/* Assignments v28 reskin (feature 032).

   Brings the existing Assignments screen into line with the v28 design system already in the app
   (Role Profiles / Change Control / Dashboard). The screen's structure and behaviour are unchanged
   — the v28 prototype renders Assignments with the same assignments-enhance-v16 layer as v16, so the
   delta is the global brand/design system. This file only refines the look.

   GLOBAL, not a .razor.css: several assignment class names are emitted from Assignments.razor's
   @code/inline switches (status badge, resp-type chip, sorted-header, propose/decide buttons), and a
   scoped .razor.css would not reach builder-emitted markup (the project's scoped-CSS gotcha).

   Every rule is scoped under `.assignments-page` so shared components on OTHER screens (which already
   match v28 via components.css) are not restyled and do not diverge. Colours resolve to layout.css
   :root tokens and the role-profiles.css `--rp-*` aliases (loaded before this file); no raw hex —
   the brand-hex guard rejects it. */

/* ── Cards / surfaces ───────────────────────────────────────────────────────
   Match the v28 card treatment (border-light + soft shadow) used by Role Profiles. */
.assignments-page .assignments-sidebar,
.assignments-page .assignments-main {
    border-color: var(--rp-border-light);
    box-shadow: var(--shadow-sm);
}

/* ── Panel header ───────────────────────────────────────────────────────────
   v28 title face (Archivo) + tightened tracking, to match the v28 doc/section heads. */
.assignments-page .assignment-panel-title {
    font-family: var(--font-heading);
    letter-spacing: -.01em;
}

.assignments-page .assignment-progress .progress-bar { height: 8px; }

/* ── Sidebar list ───────────────────────────────────────────────────────────
   v28 list hover/active (ice active wash, teal rail) + the count as a v28 pill. */
.assignments-page .sidebar-list-item:hover { background: var(--rp-row-hover); }

.assignments-page .sidebar-list-item.active {
    background: var(--rp-ice);
    border-left-color: var(--color-blue);
}

.assignments-page .sidebar-list-item .item-count {
    background: var(--rp-surface);
    border: 1px solid var(--rp-border-light);
    color: var(--rp-muted);
}

.assignments-page .sidebar-list-group-label { color: var(--rp-muted); }

/* ── Filter bar ─────────────────────────────────────────────────────────────
   v28 pills: softer resting border, clear navy active (matches the rest of the app). */
.assignments-page .filter-chip {
    border-color: var(--rp-border);
    color: var(--rp-ink-soft);
}

.assignments-page .filter-chip:hover { border-color: var(--color-blue); color: var(--color-navy); }
.assignments-page .filter-chip.active { background: var(--color-navy); color: var(--color-white); border-color: var(--color-navy); }
.assignments-page .asg-scope-pills { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }

/* ── Responsibility-type chip (v28 .rp-chip vocabulary) ─────────────────────
   The Resp. type cell renders an .rp-chip; these align its in-table baseline. The type tints
   themselves come from role-profiles.css (.rp-chip.standing/.conditional/.adhoc). */
.assignments-page td .rp-chip { vertical-align: middle; }

/* ── Data table ─────────────────────────────────────────────────────────────
   v28 light header (matches the prototype's #F6F9F9 / #3A5868 thead); the base .data-table
   rule supplies the light style, sorted/hover just deepens the tint slightly. */
/* The base .data-table has no width, so it shrinks to content and leaves the fixed-width columns
   packed on the left of wide screens — until an expanded accordion row (full-width colspan) forces
   it to 100%. Pin it to 100% so the columns fill the width in the collapsed state too. */
.assignments-page .data-table { width: 100%; }
.assignments-page .data-table thead th { background: #F6F9F9; }
.assignments-page .data-table thead th.asg-sortable:hover,
.assignments-page .data-table thead th.asg-sortable.sorted {
    background: #E9F0F0;
}

.assignments-page .data-table tbody tr { border-bottom-color: var(--rp-row-line); }
.assignments-page .data-table tbody tr:nth-child(even):not(.expandable-row) { background: var(--rp-surface2); }
.assignments-page .data-table tbody tr:hover:not(.expandable-row) { background: var(--rp-row-hover); }
.assignments-page .asg-group-chip { display: inline-flex; align-items: center; padding: 2px var(--space-3); border: 1px solid var(--color-info-tint-border); border-radius: var(--radius-sm); font-size: var(--text-caption1); color: var(--color-info); background: var(--color-info-tint); }
.assignments-page .asg-group-count { font-size: var(--text-caption1); color: var(--color-service-grey); padding: 1px 0; }
.assignments-page .asg-group-review-warning { font-size: var(--text-caption1); font-weight: var(--font-medium); color: var(--color-warning); }
.assignments-page .asg-group-drawer { display: grid; gap: var(--space-2); color: var(--rp-ink-soft); }
.assignments-page .asg-group-summary { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding: var(--space-2) var(--space-3); border: 1px solid var(--rp-border-light); border-radius: var(--radius-sm); background: var(--rp-surface2); }
.assignments-page .asg-summary-item { display: inline-flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.assignments-page .asg-summary-label { color: var(--rp-muted); font-size: var(--text-caption1); }
.assignments-page .asg-summary-value { color: var(--rp-ink); font-size: var(--text-caption1); font-weight: var(--font-medium); }
.assignments-page .asg-group-children { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.assignments-page .asg-group-child { background: var(--rp-surface); border: 1px solid var(--rp-border-light); border-left: 3px solid var(--color-blue); border-radius: var(--radius-md); overflow: hidden; transition: background var(--duration-fast), border-color var(--duration-fast); }
.assignments-page .asg-group-child:hover { background: var(--rp-surface2); }
.assignments-page .asg-group-child-header { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding: var(--space-3); cursor: pointer; }
.assignments-page .asg-group-child-header:focus-visible { outline: none; }
.assignments-page .asg-group-child:has(> .asg-group-child-header:focus-visible) { box-shadow: var(--shadow-focus); }
.assignments-page .asg-child-text { flex: 1 1 260px; min-width: 160px; color: var(--rp-ink); font-size: var(--text-subhead); line-height: 1.4; }
.assignments-page .asg-child-source { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 2px; border: 0; background: transparent; color: var(--color-blue); cursor: pointer; }
.assignments-page .asg-child-source:hover { color: var(--color-navy); }
.assignments-page .asg-child-source .asg-norm-ico { margin-left: 0; }
.assignments-page .asg-child-page { flex: 0 0 auto; color: var(--rp-muted); font-size: var(--text-caption1); white-space: nowrap; }
.assignments-page .asg-child-actions { display: inline-flex; align-items: center; flex: 0 0 auto; gap: var(--space-2); margin-left: auto; }
.assignments-page .asg-group-child-detail { padding: 0 var(--space-3) var(--space-3); }
.assignments-page .asg-group-child-detail .asg-expand { margin-top: 0; }
.assignments-page .asg-role-cell { color: var(--color-navy); }
.assignments-page .doc-ref { color: var(--color-text-link); }

/* ── Source pill ("Section X · p.N") ────────────────────────────────────────
   v28 blue-wash pill (replaces the raw-hex tint). */
.assignments-page .src-pill.asg-src-pill {
    background: color-mix(in srgb, var(--color-blue) 12%, transparent);
    color: var(--rp-adhoc-fg);
}

.assignments-page .src-pill.asg-src-pill:hover { background: color-mix(in srgb, var(--color-blue) 22%, transparent); }

/* ── Row actions ────────────────────────────────────────────────────────────
   Keep the icon-button geometry; v28 muted resting colour. */
.assignments-page .action-btn { color: var(--rp-muted); border-radius: var(--radius-md); }

/* ── Expandable detail ──────────────────────────────────────────────────────
   v28 surface for the opened detail; cockpit section heads in the v28 face. */
.assignments-page .expandable-inner {
    background: var(--rp-surface2);
    border-top-color: var(--rp-border-light);
}

/* v55: the shared .expandable-inner is a two-column grid, which parked the whole accordion in the
   LEFT 1fr column (half the row — the "skinny" rendering at 13"). The accordion is a single flow
   of blocks, so it owns the full row. The open cap also rises for the enriched detail. */
.assignments-page .expandable-inner.asg-expand-wrap { display: block; }
.assignments-page .expandable-content.open { max-height: 2000px; }

.assignments-page .cockpit-panel-title {
    font-family: var(--font-heading);
    border-bottom-color: var(--rp-border-light);
}

.assignments-page .detail-label { color: var(--color-text-secondary); }
.assignments-page .detail-value { color: var(--rp-ink); }

/* The SC propose / decide blocks read as small v28 cards instead of bare stacked controls. */
.assignments-page .propose-sc-form,
.assignments-page .sc-decide {
    margin-top: var(--space-3);
    padding: var(--space-4);
    background: var(--rp-blue-wash);
    border: 1px solid var(--rp-border-light);
    border-radius: var(--radius-md);
}

.assignments-page .correction-input,
.assignments-page .correction-select,
.assignments-page .correction-textarea {
    border: 1px solid var(--rp-border);
    border-radius: var(--radius-sm);
    color: var(--color-navy);
}

.assignments-page .correction-input:focus,
.assignments-page .correction-select:focus,
.assignments-page .correction-textarea:focus {
    outline: none;
    border-color: var(--color-blue);
    box-shadow: var(--shadow-focus);
}

/* ── Pagination ─────────────────────────────────────────────────────────────
   Token-only pager (the resting/active styles already use tokens; align radius + hover). */
.assignments-page .pager-btn { border-color: var(--rp-border); }
.assignments-page .pager-btn:hover:not(:disabled):not(.active) { border-color: var(--color-blue); }

/* ── Reject / Raise-issue modal (v28 dialog) ────────────────────────────────
   These .modal-* classes are used ONLY on this screen and had no CSS at all (the dialogs rendered
   unstyled). Style them as a centred v28 card with a dimmed backdrop. */
.assignments-page .modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--rp-overlay);
    backdrop-filter: blur(2px);
    z-index: 300;
}

.assignments-page .modal-dialog {
    position: fixed;
    inset: 0;
    z-index: 301;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    pointer-events: none;
}

.assignments-page .modal-content {
    pointer-events: auto;
    width: min(520px, 100%);
    max-height: calc(100vh - 2 * var(--space-8));
    overflow-y: auto;
    background: var(--rp-white);
    border: 1px solid var(--rp-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.assignments-page .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--rp-border-light);
}

.assignments-page .modal-title {
    font-family: var(--font-heading);
    font-size: var(--text-title3);
    font-weight: var(--font-medium);
    color: var(--color-navy);
    margin: 0;
}

.assignments-page .modal-close {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    color: var(--rp-muted);
    flex-shrink: 0;
    transition: background var(--duration-fast), color var(--duration-fast);
}

.assignments-page .modal-close:hover { background: var(--rp-surface); color: var(--color-navy); }
.assignments-page .modal-body { padding: var(--space-6); }
.assignments-page .modal-body label { color: var(--color-navy); }
.assignments-page .modal-body select,
.assignments-page .modal-body textarea {
    border: 1px solid var(--rp-border);
    border-radius: var(--radius-sm);
    color: var(--color-navy);
}

.assignments-page .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--rp-border-light);
}

/* ════════════ v34 reskin (feature 042) ════════════
   Ports the v34 prototype's Assignments screen treatment on top of the v28 base above:
   the glance-and-approve assignment row, the two-axis (review + doc-sync) status cell,
   the conditional in-row accordion (meta grid / multi-role / SC justify / issue + change
   blocks / history / action footer), the off-canvas filter drawer + faceted filter panel
   + active-filter chips bar + toolbar selects, and the "Propose a change" issue modal
   (its fields, reason chips, scope, and sections).

   Re-scoping rules applied verbatim from the v34 source:
   - a leading `#page-assignments` → `.assignments-page`;
   - bare global classes (.asg-*, .doc-pill, .ct-chip, .sc-box, .clv-check, .row-cta,
     .issue-*, .justify-note, .prov-er, .mr-*, .hx-dot, .afp-*, .seg-*, .sidebar-sort,
     .btn-link-undo …) PREFIXED with `.assignments-page ` so they cannot leak onto other
     screens. The issue modal markup renders inside the .assignments-page container, so
     scoping its classes there is correct.
   Raw hex and the v34 `var(--…)` token refs are kept verbatim (tokens resolve in layout.css;
   the brand-hex guard does not scan CSS files). Generic app-shell/sidebar/responsive rules
   from the v23-responsive block (`.sidebar`, `.main-content`, `.ms-*`, `.clv-hero`,
   `--content-max`, etc.) are owned elsewhere and are NOT duplicated here. */

/* ── asg-layout-css: filter drawer (v26) ───────────────────────────────────── */
.assignments-page { position: relative; }
.assignments-page .assignments-layout { position: relative; grid-template-columns: 1fr; }
.assignments-page .assignments-main { position: relative; }

/* filter trigger bar */
.assignments-page .asg-filter-trigger { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 var(--space-4); padding: 11px 14px; background: #fff; border: 1px solid var(--color-border); border-radius: 10px; cursor: pointer; text-align: left; font: inherit; transition: border-color .14s, box-shadow .14s; }
.assignments-page .asg-filter-trigger:hover { border-color: var(--color-control-border); box-shadow: 0 1px 3px rgba(15,40,55,.06); }
.assignments-page .asg-filter-trigger .aft-ic { width: 17px; height: 17px; color: var(--color-blue); flex-shrink: 0; }
.assignments-page .asg-filter-trigger .aft-kind { font-family: var(--font-heading); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--color-text-secondary); font-weight: 600; flex-shrink: 0; }
.assignments-page .asg-filter-trigger .aft-name { font-size: 13.5px; color: var(--color-navy); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.assignments-page .asg-filter-trigger .aft-badge { display: none; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #004262; color: #fff; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.assignments-page .asg-filter-trigger.has-active .aft-badge { display: inline-flex; }
.assignments-page .asg-filter-trigger .aft-caret { width: 16px; height: 16px; color: var(--color-text-secondary); flex-shrink: 0; transition: transform .2s; }
.assignments-page.asg-open .asg-filter-trigger .aft-caret { transform: rotate(180deg); }

/* backdrop */
.assignments-page .asg-backdrop { position: fixed; inset: 0; background: rgba(15,40,55,.34); z-index: 1600; opacity: 0; visibility: hidden; transition: opacity .22s, visibility .22s; }
.assignments-page .asg-backdrop.show { opacity: 1; visibility: visible; }

/* drawer: sidebar becomes a left off-canvas panel */
.assignments-page .assignments-sidebar { position: fixed; top: 0; left: 0; height: 100dvh; max-height: 100dvh; width: min(464px, 92vw); border-radius: 0; z-index: 1601; transform: translateX(-105%); transition: transform .28s var(--ease-default); box-shadow: 8px 0 34px rgba(15,40,55,.20); }
.assignments-page.asg-open .assignments-sidebar { transform: none; }
/* override legacy "All = full-width" rule (assignments-enhance-v16) that set display:none on the rail, which killed the drawer in All view */
.assignments-page.asg-allmode .assignments-sidebar,
.assignments-page .assignments-layout.asg-fullwidth .assignments-sidebar { display: flex; }

/* close button injected into the rail header */
.assignments-page .assignments-sidebar-header { position: relative; padding-right: 52px; }
.assignments-page .asg-rail-action { display: flex; position: absolute; top: 14px; right: 14px; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; background: transparent; border-radius: 7px; color: var(--color-blue); cursor: pointer; z-index: 2; transition: background .14s; }
.assignments-page .asg-rail-action:hover { background: var(--color-surface); }
.assignments-page .asg-rail-action svg { width: 18px; height: 18px; }

/* role label inside the responsibility cell (All view) */
.assignments-page .asg-allrole { display: block; font-size: 11px; font-weight: 600; letter-spacing: .01em; color: var(--color-text-secondary); margin-bottom: 2px; }

/* ── v30: glance-and-approve assignment cell ────────────────────────────────── */
.assignments-page .asg-cell { min-width: 340px; max-width: none; padding-top: 12px; padding-bottom: 12px; }
.assignments-page .asg-norm { font-size: 14px; line-height: 1.45; color: var(--color-navy); font-weight: var(--font-regular); }
/* The quote opens the source PDF (2026-07-16): pointer + hover underline + a small document icon that
   brightens on hover make the click target discoverable without shouting. */
.assignments-page .asg-norm-link { cursor: pointer; }
.assignments-page .asg-norm-link:hover { color: #0E4E6E; text-decoration: underline; text-decoration-color: #9DB8C6; text-underline-offset: 3px; }
.assignments-page .asg-norm-ico { width: 13px; height: 13px; margin-left: 5px; vertical-align: -1px; color: #7E96A3; opacity: .55; transition: opacity var(--duration-fast); }
.assignments-page .asg-norm-link:hover .asg-norm-ico { opacity: 1; color: #0E4E6E; }
.assignments-page .asg-quote-line { margin-top: var(--space-2); display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; line-height: 1.4; }
.assignments-page .asg-quote { font-size: 12.5px; color: var(--color-text-secondary); font-style: italic; cursor: pointer; transition: color var(--duration-fast); }
.assignments-page .asg-quote:hover { color: #1F3E52; }
.assignments-page .asg-srcref { font-size: 12px; color: #2F6F8F; background: none; border: none; padding: 0; cursor: pointer; white-space: nowrap; font-family: inherit; }
/* The in-table source pill wraps to the assignment-name column width (feature 042 follow-up):
   a deep section path would otherwise stay on one line and spill over the Document column.
   overflow-wrap:anywhere breaks a pathologically long unbroken title so nothing escapes the cell.
   Scoped to .asg-quote-line so the drawer's "View full source provenance" button (also .asg-srcref,
   outside the quote line) keeps its single-line label. Colour/size unchanged — the pill is the
   clickable source-viewer trigger, and 12px (vs 14px .asg-norm) already reads as secondary. */
.assignments-page .asg-quote-line .asg-srcref { white-space: normal; text-align: left; overflow-wrap: anywhere; }
.assignments-page .asg-srcref:hover { text-decoration: underline; color: #004262; }
.assignments-page .asg-status-cell { vertical-align: top; padding-top: 14px; white-space: nowrap; }
.assignments-page .asg-sortable { cursor: pointer; user-select: none; }
.assignments-page .asg-status-cell { vertical-align: top; padding-top: 13px; }
.assignments-page .asg-status-stack { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.assignments-page .asg-docline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.assignments-page .ct-chip { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; background: #EEF3F5; color: #3A5868; border: 1px solid var(--color-border-light); border-radius: var(--radius-full); padding: 1px 8px; white-space: nowrap; }
.assignments-page .asg-archived { opacity: .62; }
.assignments-page .asg-archived td { background: #F7F8F9; }
.assignments-page .asg-archived-tag { display: inline-flex; align-items: center; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; background: #E5E8EA; color: #5A6A72; border-radius: var(--radius-full); padding: 1px 8px; }
.assignments-page .asg-arch-note { font-size: 12px; color: var(--color-service-grey); }
.assignments-page .asg-sc-cell { text-align: center; white-space: nowrap; }
.assignments-page .sc-box { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 6px; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 600; border: 1px solid; }
.assignments-page .sc-box[tabindex="0"]:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.assignments-page .sc-lvl-1, .assignments-page .sc-lvl-2 { background: transparent; color: var(--color-text-secondary); border-color: transparent; font-weight: 500; }
.assignments-page .sc-lvl-3 { background: #FBE9D6; color: #8A4818; border-color: #EFC79A; }
.assignments-page .sc-lvl-4 { background: #F8D9C2; color: #7A2F12; border-color: #E8AC82; }
.assignments-page .sc-lvl-5 { background: #F5C9B0; color: #5C1D08; border-color: #DE9468; }
.assignments-page .asg-doc-cell { vertical-align: top; padding-top: 13px; }
.assignments-page .asg-doc-num { font-size: 12.5px; color: #1F3E52; font-weight: 500; white-space: nowrap; }
.assignments-page .asg-doc-sub { font-size: 11px; color: var(--color-service-grey); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.assignments-page .asg-role-cell { vertical-align: top; padding-top: 13px; }
.assignments-page .asg-role-name { font-size: 12.5px; color: #1F3E52; }
/* 056: document-only tag on rows whose role is not in the org chart. This is descriptive metadata,
   not an error state. */
.assignments-page .asg-unmatched-tag { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 500; letter-spacing: .01em; background: var(--color-surface); color: var(--color-service-grey); border: 1px solid var(--color-border-light); border-radius: var(--radius-full); padding: 1px 8px; margin-left: 6px; vertical-align: middle; }
/* 056: the rail's per-asset suffix on asset-scoped master roles. */
.assignments-page .sidebar-list-item .item-asset { color: var(--color-service-grey); font-size: 11px; margin-left: 6px; white-space: nowrap; }
.assignments-page .doc-pill { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; border-radius: var(--radius-full); padding: 2px 10px; white-space: nowrap; }
.assignments-page .doc-pill.doc-matches { background: transparent; color: #849299; font-weight: 500; padding-left: 0; padding-right: 0; }
.assignments-page .doc-pill.doc-quiet { background: transparent; color: #849299; font-weight: 500; padding-left: 0; padding-right: 0; }
.assignments-page .doc-pill.doc-change { background: var(--color-warning-tint); color: var(--color-warning); }
.assignments-page .doc-pill.doc-impl { background: var(--color-success-tint); color: var(--color-success); }
.assignments-page .doc-pill.doc-pending { background: #FAEBE6; color: #A23B1E; }
.assignments-page .asg-meta-val .doc-pill.doc-matches { background: #EFF3F5; color: #5A6A72; font-weight: 600; padding: 2px 10px; }
.assignments-page .asg-history { margin-top: 2px; }
.assignments-page .asg-hist { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.assignments-page .asg-hist li { position: relative; padding-left: 16px; font-size: 12.5px; color: #1F3E52; line-height: 1.4; }
.assignments-page .hx-dot { position: absolute; left: 0; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: #A2BDBD; }
.assignments-page .asg-status-cell .badge { display: inline-flex; }

/* expanded row */
.assignments-page .asg-expand { display: flex; flex-direction: column; gap: var(--space-3); }
.assignments-page .asg-meta-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-4); background: #fff; border: 1px solid var(--color-border-light); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
/* "Documented as" leads the grid and gets double width (usability feedback 2026-07-16, item 2) —
   the documented→master line is the longest value and the first thing a reviewer reads. */
.assignments-page .asg-meta-grid .asg-meta-wide { grid-column: span 2; }
.assignments-page .asg-needs-update { color: var(--color-warning); font-weight: 500; }
.assignments-page .asg-meta-val { font-size: 12.5px; color: #1F3E52; line-height: 1.45; margin-top: 2px; }
.assignments-page .asg-arrow { color: var(--color-service-grey); }
.assignments-page .asg-dim { color: var(--color-service-grey); }
@media (max-width: 1280px) {
    .assignments-page .asg-meta-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
/* v55 extraction-provenance pill (LLM / deterministic / both-agree) in the meta grid. */
.assignments-page .xm-pill { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; border-radius: var(--radius-full); padding: 2px 9px; white-space: nowrap; }
.assignments-page .xm-llm { background: #EEE9F7; color: #5B3E8F; }
.assignments-page .xm-det { background: #E3EEEC; color: #1F5F58; }
/* Plain-language extraction-type pill (2026-07-16) — one neutral tint; the content kind is
   information, not a status. */
.assignments-page .xm-kind { background: #E8EEF2; color: #33586E; }
/* Scanned/image provenance badge: warning-tinted so it reads as "check this", not just metadata. */
.assignments-page .xm-scan { background: var(--color-warning-tint); color: var(--color-warning); margin-left: 6px; text-transform: uppercase; font-size: 10px; letter-spacing: .04em; }
.assignments-page .xm-both { background: #E9F1F7; color: #2F5878; }
.assignments-page .xm-unknown { background: var(--color-surface); color: var(--color-service-grey); }

/* v55 By-Document "Page / order" cell: page first, extraction sequence as the quiet suffix. */
.assignments-page .asg-page-cell { white-space: nowrap; }
.assignments-page .asg-page { font-size: 13px; color: var(--color-navy); font-weight: 500; }
.assignments-page .asg-order { font-size: 11px; color: var(--color-service-grey); margin-left: 6px; }

/* v55 rail tools: sort select + outstanding-only chip under the rail search. */
.assignments-page .asg-rail-tools { display: flex; align-items: center; gap: 8px; padding: 0 var(--space-4) var(--space-3); }
.assignments-page .asg-rail-sort { flex: 1; min-width: 0; height: 30px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 12px; font-family: inherit; color: var(--color-navy); background: var(--color-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%236F8DA1' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 8px center; padding: 0 24px 0 8px; -webkit-appearance: none; appearance: none; cursor: pointer; }
.assignments-page .asg-rail-chip { height: 30px; padding: 0 10px; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-white); font-size: 11.5px; font-weight: 500; color: var(--color-service-grey); cursor: pointer; white-space: nowrap; font-family: inherit; }
.assignments-page .asg-rail-chip:hover { border-color: var(--color-control-border); color: var(--color-navy); }
.assignments-page .asg-rail-chip.on { background: var(--color-warning-tint); border-color: var(--color-warning); color: var(--color-warning); }

/* v55 outstanding badge beside the total count in the rail lists. */
.assignments-page .item-counts { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.assignments-page .item-outstanding { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; background: var(--color-warning-tint); color: var(--color-warning); border-radius: var(--radius-full); padding: 1px 7px; }

.assignments-page .asg-multirole { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.assignments-page .asg-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.assignments-page .asg-role-chip { display: inline-flex; align-items: center; font-size: 12px; color: #2F5B78; background: #EFF4F5; border: 1px solid var(--color-border-light); border-radius: var(--radius-full); padding: 3px 11px; }
.assignments-page .mr-rel { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border-radius: var(--radius-full); padding: 2px 9px; }
.assignments-page .mr-joint { background: #E9F1F7; color: #2F5878; }
.assignments-page .mr-alternate { background: var(--color-warning-tint); color: var(--color-warning); }
.assignments-page .asg-sc-block { display: flex; align-items: flex-start; gap: 10px; background: var(--color-surface); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
.assignments-page .asg-sc-just { font-size: 12.5px; color: #1F3E52; line-height: 1.45; flex: 1; }
.assignments-page .asg-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-1); }
.assignments-page .asg-actions .btn-approve-both { flex: 0 0 auto; min-width: 230px; background: #004262; color: #fff; border-color: #004262; }
.assignments-page .asg-actions .btn-approve-both:hover { background: #00354e; }
.assignments-page .btn-link-undo { font-size: 12px; color: var(--color-text-link); background: none; border: none; cursor: pointer; text-decoration: underline; padding: 4px 6px; }
.assignments-page .btn-link-undo:hover { color: #004262; }
/* v32 issue + change blocks */
.assignments-page .asg-issue, .assignments-page .asg-change { border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.assignments-page .asg-issue { background: var(--color-warning-tint); border: 1px solid var(--color-warning-tint-border); }
.assignments-page .asg-change { background: var(--color-success-tint); border: 1px solid var(--color-success-tint-border); }
.assignments-page .asg-issue-head, .assignments-page .asg-change-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.assignments-page .asg-issue-badge, .assignments-page .asg-change-badge { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border-radius: var(--radius-full); padding: 2px 9px; }
.assignments-page .asg-issue-badge { background: transparent; border: 1px solid var(--color-warning-tint-border); color: var(--color-warning); }
.assignments-page .asg-change-badge { background: var(--color-success-tint); color: var(--color-success); }
.assignments-page .asg-issue-type, .assignments-page .asg-change-type { font-size: 12px; color: #1F3E52; font-weight: 500; }
.assignments-page .asg-issue-reason, .assignments-page .asg-change-desc { font-size: 12.5px; color: #1F3E52; line-height: 1.45; }
.assignments-page .asg-issue-meta, .assignments-page .asg-change-meta { font-size: 11.5px; color: var(--color-service-grey); margin-top: 5px; }
.assignments-page .justify-sc { background: #F3F6F7; border-left-color: #2F6F8F; }
.assignments-page .row-cta-ghost { background: var(--color-white); color: var(--color-warning); border-color: var(--color-warning-tint-border); }
.assignments-page .row-cta-ghost:hover { background: var(--color-warning-tint); }
.assignments-page .asg-foot { display: flex; justify-content: flex-end; padding-top: 2px; }
.assignments-page .asg-raise-link { font-size: 12px; color: var(--color-warning); background: none; border: none; cursor: pointer; padding: 4px 6px; font-family: inherit; }
.assignments-page .asg-raise-link:hover { text-decoration: underline; }
/* v35: clearer in-accordion action footer for raising an issue — anchored to the bottom of the expand with a divider, a contextual prompt, and a visible (not ghost) secondary button */
.assignments-page .asg-actionbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 2px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.assignments-page .asg-actionbar-hint { font-size: 12.5px; color: var(--color-service-grey); }
.assignments-page .asg-issue-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; background: var(--color-warning-tint); color: var(--color-warning); border: 1px solid var(--color-warning-tint-border); transition: background .14s, border-color .14s, box-shadow .14s; white-space: nowrap; }
.assignments-page .asg-issue-btn:hover { background: var(--color-warning-tint); border-color: var(--color-warning); box-shadow: var(--shadow-sm); }
.assignments-page .asg-issue-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* toolbar status filter */
.assignments-page .asg-status-filter { height: 38px; padding: 0 30px 0 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; color: var(--color-navy); background: var(--color-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235A7689' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 10px center; -webkit-appearance: none; appearance: none; cursor: pointer; }
.assignments-page .asg-status-filter:hover { border-color: var(--color-control-border); }

/* ── Faceted filter panel (All assignments) ─────────────────────────────────── */
.assignments-page.asg-allmode .assignments-sidebar-header,
.assignments-page.asg-allmode #assignment-sidebar-list { display: none; }
.assignments-page:not(.asg-allmode) #asg-facet-panel { display: none; }
.assignments-page.asg-allmode .asg-filter-trigger { display: none; }
.assignments-page #asg-facet-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.assignments-page .afp-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 14px; border-bottom: 1px solid var(--color-border-light); }
.assignments-page .afp-head h3 { font-family: var(--font-heading); font-size: 15px; font-weight: 500; color: var(--color-navy); }
.assignments-page .afp-close { width: 30px; height: 30px; border: none; background: transparent; border-radius: 7px; color: var(--color-blue); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.assignments-page .afp-close:hover { background: var(--color-surface); }
.assignments-page .afp-close svg { width: 18px; height: 18px; }
.assignments-page .afp-body { flex: 1; overflow-y: auto; padding: 6px 18px 12px; }
.assignments-page .afp-group { padding: 14px 0; border-bottom: 1px solid var(--color-border-light); }
.assignments-page .afp-group:last-child { border-bottom: none; }
.assignments-page .afp-group-label { font-family: var(--font-heading); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--color-text-secondary); font-weight: 600; margin-bottom: 10px; }
.assignments-page .afp-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.assignments-page .afp-chip { font-size: 12px; font-weight: 500; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--color-border); color: var(--color-text-secondary); background: #fff; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.assignments-page .afp-chip:hover { background: var(--color-surface); }
.assignments-page .afp-chip.on { background: #004262; color: #fff; border-color: #004262; }
.assignments-page .afp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--color-border-light); }
.assignments-page .afp-clear { background: none; border: none; font: inherit; font-size: 13px; color: var(--color-text-link); cursor: pointer; font-weight: 500; }
.assignments-page .afp-clear:hover { color: #004262; text-decoration: underline; }
.assignments-page .afp-apply { flex: 1; height: 40px; border: none; border-radius: 8px; background: #004262; color: #fff; font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background .14s; }
.assignments-page .afp-apply:hover { background: var(--color-blue); }

/* active-filter chips bar above the table */
.assignments-page .asg-chips { display: none; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 var(--space-5) var(--space-4); }
.assignments-page.asg-allmode .asg-chips.has-active { display: flex; }
.assignments-page .asg-chips .acl { font-family: var(--font-heading); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--color-text-secondary); font-weight: 600; margin-right: 2px; }
.assignments-page .asg-active-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; padding: 5px 8px 5px 12px; border-radius: 999px; background: #EAF1F1; color: #004262; border: 1px solid #CFE0E0; }
.assignments-page .asg-active-chip button { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: none; background: rgba(0,66,98,.12); border-radius: 50%; color: #004262; cursor: pointer; padding: 0; }
.assignments-page .asg-active-chip button:hover { background: rgba(0,66,98,.24); }
.assignments-page .asg-active-chip button svg { width: 10px; height: 10px; }
.assignments-page .asg-chips .acl-clear { background: none; border: none; font: inherit; font-size: 12px; color: var(--color-text-link); cursor: pointer; font-weight: 500; margin-left: 2px; }
.assignments-page .asg-chips .acl-clear:hover { color: #004262; text-decoration: underline; }

/* ── asg-enhance-styles ─────────────────────────────────────────────────────── */
/* sidebar sort toggle */
.assignments-page .sidebar-sort { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
.assignments-page .asg-roletype { display: flex; align-items: center; gap: 8px; margin-top: var(--space-3); }
.assignments-page .asg-roletype-label { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-secondary); font-weight: 500; font-family: var(--font-heading); white-space: nowrap; }
.assignments-page .asg-roletype select { flex: 1; padding: 6px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; color: var(--color-navy); background: #fff; cursor: pointer; }
.assignments-page .sidebar-sort-label { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-secondary); font-weight: 500; font-family: var(--font-heading); }
.assignments-page .seg-toggle { display: inline-flex; border: 1px solid var(--color-border); border-radius: 7px; overflow: hidden; background: #fff; }
.assignments-page .seg-toggle .seg-btn { appearance: none; border: none; background: transparent; font: inherit; font-size: 12px; font-weight: 500; color: var(--color-text-secondary); padding: 5px 12px; cursor: pointer; transition: background 140ms, color 140ms; }
.assignments-page .seg-toggle .seg-btn + .seg-btn { border-left: 1px solid var(--color-border); }
.assignments-page .seg-toggle .seg-btn.active { background: #D8EAE9; color: #004262; }
.assignments-page .seg-toggle .seg-btn:hover:not(.active) { background: var(--color-surface); }
/* sortable headers */
.assignments-page #assignments-table th.asg-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.assignments-page #assignments-table th.asg-sortable .th-label { margin-right: 4px; }
.assignments-page #assignments-table th.asg-sortable:hover .th-label { color: var(--color-navy); }
.assignments-page #assignments-table th .sort-ind { display: inline-block; width: 9px; font-size: 9px; color: var(--color-text-secondary); vertical-align: middle; }
.assignments-page #assignments-table th.asg-sortable.sorted .sort-ind { color: #004262; }
.assignments-page #assignments-table th.asg-sortable.sorted .th-label { color: var(--color-navy); font-weight: 600; }
/* role cell in by-document / all views */
.assignments-page .asg-role-cell { display: inline-block; font-size: 13px; color: var(--color-navy); font-weight: 500; line-height: 1.3; }
.assignments-page .asg-roledoc { display: flex; flex-direction: column; gap: 2px; }
.assignments-page .asg-roledoc .doc-ref { font-size: 11px; }
/* All-assignments full-width layout */
.assignments-page .assignments-layout.asg-fullwidth { grid-template-columns: 1fr; }
.assignments-page .assignments-layout.asg-fullwidth .assignments-sidebar { display: none; }
/* extra toolbar selects keep rhythm */
.assignments-page .table-toolbar .asg-extra-filter { margin-left: 0; height: 38px; padding: 0 30px 0 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; color: var(--color-navy); background: var(--color-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236F8DA1' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 10px center; -webkit-appearance: none; appearance: none; cursor: pointer; }
.assignments-page .table-toolbar .asg-extra-filter:hover { border-color: var(--color-control-border); }
.assignments-page .asg-page-size { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 8px 0 11px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-service-grey); font-size: 12px; white-space: nowrap; }
.assignments-page .asg-page-size select { height: 28px; padding: 0 24px 0 7px; border: 0; border-left: 1px solid var(--color-border-light); font: inherit; font-weight: 600; color: var(--color-navy); background: var(--color-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%236F8DA1' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 6px center; -webkit-appearance: none; appearance: none; cursor: pointer; }
.assignments-page .asg-page-size:focus-within { border-color: var(--color-blue); box-shadow: var(--shadow-focus); }
.assignments-page .asg-page-size select:focus { outline: none; }
/* asset context chip (?asset= deep link): a button, so no select chevron background */
.assignments-page .table-toolbar .asg-asset-chip { background: var(--color-white); padding: 0 12px; white-space: nowrap; }

/* Status chips are the single status control on all three tabs. Counts are scoped to the other
   active filters; a zero-count chip stays visible so the row does not jump as filters change. */
.assignments-page .asg-status-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 0 var(--space-5) var(--space-4); }
.assignments-page .asg-count-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); padding: var(--space-3) var(--space-5) var(--space-2); color: var(--color-service-grey); font-size: var(--text-caption1); font-variant-numeric: tabular-nums; }
.assignments-page .asg-count-summary strong { color: var(--color-navy); font-weight: var(--font-medium); }
.assignments-page .asg-audit-back,
.assignments-page .asg-audit-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-2); color: var(--color-text-link); font-size: var(--text-subhead); font-weight: var(--font-medium); }
.assignments-page .asg-status-chips .filter-chip { display: inline-flex; align-items: center; gap: 5px; }
.assignments-page .asg-status-chips .filter-chip:disabled { opacity: .45; cursor: not-allowed; }
.assignments-page .asg-chip-count { font-variant-numeric: tabular-nums; }
.assignments-page .asg-clear-filters,
.assignments-page .asg-empty-actions button { border: 0; padding: 0; background: none; color: var(--color-text-link); font: inherit; font-size: var(--text-caption1); font-weight: var(--font-medium); cursor: pointer; text-decoration: underline; }
.assignments-page .asg-clear-filters:hover,
.assignments-page .asg-empty-actions button:hover { color: var(--color-navy); }
.assignments-page .asg-status-chips .asg-active-chip,
.assignments-page .table-toolbar .asg-active-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px 5px 12px; border: 1px solid #CFE0E0; border-radius: 999px; background: #EAF1F1; color: #004262; font-size: 12px; font-weight: 500; cursor: pointer; }
.assignments-page .asg-status-chips .asg-active-chip:hover,
.assignments-page .table-toolbar .asg-active-chip:hover { background: #D8EAE9; }
.assignments-page .asg-empty-actions { display: flex; justify-content: center; padding: 0 var(--space-5) var(--space-5); }
.assignments-page .table-pagination-right { display: flex; align-items: center; gap: var(--space-4); }

/* ── v23-responsive (assignments-relevant rules only) ───────────────────────── */
/* iPad portrait & any narrow pane (≤900px): the assignments two-column layout collapses
   to one column. Generic app-shell/sidebar selectors from this v23 media block
   (.ms-*, .clv-hero, .stats-row, .rec-stats, .main-content, .breadcrumbs, .sidebar, …)
   are owned by the global app-shell stylesheet and are intentionally NOT duplicated here. */
@media (max-width: 900px) {
    .assignments-page .assignments-layout,
    .assignments-page .assignments-layout.mapping-active { grid-template-columns: minmax(0,1fr) !important; }
}

@media (max-width: 480px) {
    .assignments-page .tabs {
        max-width: 100%;
        overflow-x: auto;
    }

    .assignments-page .tab-btn {
        flex: 0 0 auto;
        padding-inline: var(--space-4);
    }
}

/* ── missing.css: row CTAs, issue modal, clv-check, sc-box, prov-er, justify-note ── */
.assignments-page td > .row-cta { display: flex; width: 108px; min-height: 32px; justify-content: center; }
.assignments-page .row-cta { align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-sm); font-size: var(--text-caption1); font-weight: var(--font-medium); transition: all var(--duration-fast); border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.assignments-page .row-cta-primary { background: var(--color-success); color: var(--color-white); border-color: var(--color-success); }
.assignments-page .row-cta-primary:hover { background: rgb(14, 107, 53); }
.assignments-page .row-cta-secondary { background: var(--color-white); color: var(--color-navy); border-color: var(--color-border); }
.assignments-page .row-cta-secondary:hover { background: var(--color-surface); }
.assignments-page .issue-modal-overlay { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.4); display: none; align-items: center; justify-content: center; z-index: 1000; }
.assignments-page .issue-modal-overlay.open { display: flex; }
.assignments-page .issue-modal { background: var(--color-white); border-radius: var(--radius-lg); width: 520px; max-width: 90vw; max-height: 85vh; overflow: auto; box-shadow: rgba(0, 0, 0, 0.3) 0px 20px 60px; }
.assignments-page .issue-modal-header { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-light); display: flex; align-items: center; justify-content: space-between; }
.assignments-page .issue-modal-title { font-size: var(--text-title3); font-weight: var(--font-medium); color: var(--color-navy); }
.assignments-page .issue-modal-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.assignments-page .issue-modal-footer { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border-light); display: flex; justify-content: flex-end; gap: var(--space-2); }
.assignments-page .issue-field { display: flex; flex-direction: column; gap: 6px; }
.assignments-page .issue-field label { font-size: var(--text-caption1); font-weight: var(--font-medium); color: var(--color-navy); }
.assignments-page .issue-field select, .assignments-page .issue-field input, .assignments-page .issue-field textarea { padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--text-subhead); font-family: inherit; color: var(--color-navy); background: var(--color-white); }
.assignments-page .issue-field textarea { min-height: 80px; resize: vertical; }
.assignments-page .issue-modal .btn-primary { padding: 8px 16px; border-radius: var(--radius-sm); background: var(--color-warning); color: var(--color-white); font-weight: var(--font-medium); font-size: var(--text-subhead); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; }
.assignments-page .issue-modal .btn-primary:hover { background: rgb(184, 90, 15); }
.assignments-page .issue-modal .btn-cancel { padding: 8px 16px; border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-navy); border: 1px solid var(--color-border); font-size: var(--text-subhead); cursor: pointer; }
.assignments-page .issue-mapping-hint { display: flex; flex-direction: column; gap: 8px; }
.assignments-page .issue-modal .btn-primary.mc-apply { background: var(--color-navy); }
.assignments-page .issue-modal .btn-primary.mc-apply:hover { background: var(--color-blue); }
.assignments-page .issue-modal .btn-primary.mc-apply:disabled { background: var(--color-border); color: var(--color-service-grey); cursor: not-allowed; }
.assignments-page .issue-modal .btn-cancel:hover { background: var(--color-surface); }
.assignments-page .prov-er { color: var(--color-warning); font-weight: 500; }
.assignments-page .justify-note { background: rgb(255, 249, 230); border-left: 3px solid rgb(229, 185, 71); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: var(--space-2) var(--space-3); font-size: 12.5px; color: var(--color-navy); line-height: 1.5; }
.assignments-page .justify-note .justify-label { display: block; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: rgb(138, 109, 27); margin-bottom: 2px; }
.assignments-page .clv-check { appearance: none; width: 16px; height: 16px; border: 1.5px solid rgb(198, 213, 213); border-radius: 3px; cursor: pointer; position: relative; vertical-align: middle; background: rgb(255, 255, 255); transition: 0.12s; }
.assignments-page .clv-check:hover { border-color: rgb(75, 118, 150); }
.assignments-page .clv-check:checked { background: rgb(0, 66, 98); border-color: rgb(0, 66, 98); }
.assignments-page .clv-check:checked::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border-style: solid; border-color: rgb(255, 255, 255); border-image: initial; border-width: 0px 2px 2px 0px; transform: rotate(45deg); }
.assignments-page .data-table thead th.clv-check-col { width: 36px; padding-left: 12px; }
.assignments-page .data-table tbody td.clv-check-cell { padding-left: 12px; }
/* Scoped to field labels only. The bare `.issue-modal-body label` this replaced also caught the
   `.issue-scope-opt` checkbox labels ("Assignment" / "Safety criticality"), forcing display:block —
   which killed their inline-flex gap (checkbox jammed against text) and vertical centring, and
   uppercased them. The scope options now keep their own `.issue-scope-opt` layout. */
.assignments-page .issue-modal .issue-modal-body .issue-field label { display: block; font-family: var(--font-heading); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(75, 118, 150); font-weight: 500; margin-bottom: 4px; }
.assignments-page .issue-modal .issue-required { color: rgb(185, 28, 28); font-weight: 500; }
.assignments-page .issue-reason-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.assignments-page .issue-reason-chips button { padding: 7px 12px; font-size: 13px; font-weight: 400; background: rgb(255, 255, 255); border: 1.5px solid rgb(198, 213, 213); border-radius: 999px; cursor: pointer; color: rgb(75, 118, 150); font-family: var(--font-primary); transition: 0.12s; }
.assignments-page .issue-reason-chips button:hover { border-color: rgb(75, 118, 150); color: rgb(0, 66, 98); }
.assignments-page .issue-reason-chips button.active { background: rgb(0, 66, 98); color: rgb(255, 255, 255); border-color: rgb(0, 66, 98); }
.assignments-page .issue-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 12px 14px; background: rgb(246, 249, 249); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); }
.assignments-page .issue-scope-label { font-size: var(--text-caption1); font-weight: 500; color: var(--color-navy); width: 100%; }
.assignments-page .issue-scope-opt { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-subhead); color: var(--color-navy); cursor: pointer; }
.assignments-page .issue-scope-opt input { width: 16px; height: 16px; accent-color: rgb(0, 66, 98); cursor: pointer; }
.assignments-page .issue-section { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border-light); }
.assignments-page .issue-section-title { font-size: var(--text-caption1); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-service-grey); }
.assignments-page .issue-sc-context { font-size: 12.5px; color: rgb(90, 118, 137); background: rgb(246, 249, 249); border-radius: var(--radius-sm); padding: 6px 10px; }

/* ── 13"-laptop fix: at laptop widths the assignment column's 580px cap plus the nowrap doc/role/
   status columns exceed the content column even with the sidebar collapsed; tighten the cap so the
   all-assignments table fits without clipping. The wrapper keeps overflow-x:auto as the safety net
   for extreme content. ── */
@media (max-width: 1512px) {
    .assignments-page .asg-cell { min-width: 240px; max-width: 460px; }
    .assignments-page .asg-doc-cell { max-width: 170px; }
}

/* ── 2026-07-17: column balance — the nowrap document title used to claim whatever width its longest
   name needed, squeezing the (usually longer) assignment text. Wrapping it caps the column at the
   header's width and hands the space back to the assignment column. ── */
.assignments-page .asg-doc-cell { max-width: 210px; }
.assignments-page .asg-doc-num { white-space: normal; overflow-wrap: break-word; line-height: 1.35; }

/* ── 2026-07-17: toolbar org-roles checkbox (page-scoped twin of the toolbar selects' geometry). ── */
.assignments-page .asg-check { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 11px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 13px; color: var(--color-navy); background: var(--color-white); cursor: pointer; white-space: nowrap; user-select: none; }
.assignments-page .asg-check:hover { border-color: var(--color-control-border); }
.assignments-page .asg-check:has(input:checked) { border-color: var(--color-control-border); background: #F4F8F8; font-weight: 500; }
.assignments-page .asg-check input { width: 14px; height: 14px; margin: 0; accent-color: var(--color-blue); cursor: pointer; }

/* ── 2026-07-17: bulk approve — select column, action bar, confirm modal accents. ── */
.assignments-page .asg-select-th, .assignments-page .asg-select-cell { text-align: center; }
.assignments-page .asg-cb { width: 15px; height: 15px; margin: 0; accent-color: var(--color-blue); cursor: pointer; vertical-align: middle; }
.assignments-page .asg-bulkbar { display: flex; align-items: center; gap: var(--space-3); padding: 9px var(--space-6); background: #F4F8F8; border-bottom: 1px solid var(--color-border-light); }
.assignments-page .asg-bulk-count { font-size: 13px; font-weight: 600; color: var(--color-navy); }
.assignments-page .asg-bulk-clear { background: none; border: none; font-size: 12.5px; color: var(--color-text-link); cursor: pointer; text-decoration: underline; padding: 0; }
.assignments-page .asg-bulk-approve { margin-left: auto; padding: 7px 16px; border: none; border-radius: var(--radius-sm); background: var(--color-success); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
.assignments-page .asg-bulk-approve:hover { background: #14603C; }
.assignments-page .asg-bulk-approve:disabled { opacity: .55; cursor: default; }
.assignments-page .asg-bulk-list { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--color-navy); }
.assignments-page .asg-bulk-list li { line-height: 1.4; }
.assignments-page .asg-bulk-more { color: var(--color-service-grey); list-style: none; }
.assignments-page .asg-bulk-errors { margin-top: var(--space-3); font-size: 12.5px; color: var(--color-error); background: var(--color-error-tint); border-radius: var(--radius-sm); padding: 8px 10px; }
/* Approve is a positive action — override the issue modal's amber primary inside this modal only. */
.assignments-page .asg-bulk-modal .btn-primary { background: var(--color-success); }

/* ── Feature 055: collapsed rail-trigger affordance + All-tab doc/role slide-over pickers ──────── */

/* The By Role / By Document collapsed bar reads as a control. 2026-07-17: the "Change role/document"
   cue is now a bordered button-look chip — the plain underlined text read as a label to new users,
   and the bar's filtered-to-one-subject state went unnoticed. */
.assignments-page .asg-filter-trigger .aft-change { font-size: 12px; font-weight: 600; color: #2F6F8F; flex-shrink: 0; padding: 5px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: #F6F9F9; transition: background .14s, border-color .14s, color .14s; }
.assignments-page .asg-filter-trigger:hover .aft-change { color: #fff; background: var(--color-navy); border-color: var(--color-navy); }
.assignments-page .asg-filter-trigger:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Toolbar trigger buttons for the All-tab pickers: the .asg-extra-filter select look (chevron
   background included) as a button, ellipsised so a long document title cannot stretch the toolbar.
   has-pick marks an active filter in the control's own colourway (navy text, teal-ish border). */
.assignments-page .table-toolbar .asg-picker-trigger { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.assignments-page .table-toolbar .asg-picker-trigger.has-pick { border-color: var(--color-control-border); color: #004262; font-weight: 600; }

/* Right-hand slide-over panel — the source-viewer aside pattern (fixed right, full height, own
   scroll) at the filter drawer's z-band (above content, below nothing else on this screen). The
   panel is conditionally rendered, so it animates in on mount; the list reuses the rail's
   .sidebar-list-item / .item-name / .item-count vocabulary and the facet panel's close/clear. */
.assignments-page .asg-picker-backdrop { position: fixed; inset: 0; background: rgba(15,40,55,.34); z-index: 1600; animation: asg-picker-fade .22s; }
.assignments-page .asg-picker { position: fixed; top: 0; right: 0; height: 100dvh; max-height: 100dvh; width: 380px; max-width: 92vw; background: var(--color-white); z-index: 1601; display: flex; flex-direction: column; box-shadow: -8px 0 34px rgba(15,40,55,.20); animation: asg-picker-in .28s var(--ease-default); }
@keyframes asg-picker-in { from { transform: translateX(105%); } to { transform: none; } }
@keyframes asg-picker-fade { from { opacity: 0; } to { opacity: 1; } }
.assignments-page .asg-picker-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 14px; border-bottom: 1px solid var(--color-border-light); flex-shrink: 0; }
.assignments-page .asg-picker-head h3 { font-family: var(--font-heading); font-size: 15px; font-weight: 500; color: var(--color-navy); margin: 0; }
.assignments-page .asg-picker-search { padding: 12px 18px; border-bottom: 1px solid var(--color-border-light); flex-shrink: 0; }
.assignments-page .asg-picker-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 0 12px; }
.assignments-page .asg-picker-ref { display: block; font-size: 11px; font-weight: 600; letter-spacing: .01em; color: var(--color-text-secondary); }
.assignments-page .asg-picker-foot { display: flex; padding: 12px 18px; border-top: 1px solid var(--color-border-light); flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════════════════════
   Assignments UX batch 4 (2026-07-20)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── fix 1: By-Role rail TYPE / SOURCE facets + active-filter bar ────────────── */
.assignments-page .asg-rail-controls { display: flex; flex-direction: column; gap: 8px; padding: 14px var(--space-4) 12px; border-bottom: 1px solid var(--color-border-light); }
.assignments-page .asg-rail-label { font-family: var(--font-heading); font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--color-text-secondary); }
.assignments-page .asg-rail-sort-row,
.assignments-page .asg-rail-filter-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.assignments-page .asg-rail-filter-row .asg-rail-facet { flex: 1 1 0; }
.assignments-page .asg-rail-filter-row .asg-rail-chip { flex: 0 0 auto; }
.assignments-page .asg-rail-facets { display: flex; align-items: center; gap: 8px; padding: 0 var(--space-4) var(--space-3); }
.assignments-page .asg-rail-facet { flex: 1; min-width: 0; height: 30px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 12px; font-family: inherit; color: var(--color-navy); background: var(--color-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%235A7689' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 8px center; padding: 0 24px 0 8px; -webkit-appearance: none; appearance: none; cursor: pointer; }
.assignments-page .asg-rail-facet:hover { border-color: var(--color-control-border); }
/* Obvious active-filter state: a chosen facet gets the navy accent (border + text + a soft wash). */
.assignments-page .asg-rail-facet.on { border-color: var(--color-navy); color: var(--color-navy); font-weight: 600; background-color: #F4F8F8; }
.assignments-page .asg-rail-activebar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 var(--space-4) var(--space-3); }
.assignments-page .asg-rail-activecount { font-size: 11.5px; color: var(--color-service-grey); }
.assignments-page .asg-rail-clear { background: none; border: none; padding: 0; font-size: 12px; font-weight: 600; color: #2F6F8F; cursor: pointer; text-decoration: underline; font-family: inherit; }
.assignments-page .asg-rail-clear:hover { color: #004262; }
.assignments-page .asg-rail-columns,
.assignments-page #assignment-sidebar-list .sidebar-list-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 82px 28px;
    align-items: center;
    column-gap: var(--space-2);
}
.assignments-page .asg-rail-columns {
    padding: 0 var(--space-4);
    min-height: 38px;
    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-surface);
}
.assignments-page .asg-rail-column {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    min-width: 0;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: var(--color-service-grey);
    font-family: var(--font-heading);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    cursor: pointer;
    width: 100%;
}
.assignments-page .asg-rail-column-head:nth-child(n+2) .asg-rail-column { justify-content: flex-end; text-align: right; }
.assignments-page .asg-rail-review-head {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    width: 20px;
    height: 20px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-service-grey);
    font-size: 11px;
    font-weight: 700;
}
.assignments-page .asg-rail-column:hover,
.assignments-page .asg-rail-column.active { color: var(--color-navy); }
.assignments-page .asg-rail-column:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.assignments-page .asg-rail-sort-mark { flex: 0 0 auto; font-size: 9px; }
.assignments-page #assignment-sidebar-list .sidebar-list-item {
    padding-right: var(--space-4);
}
.assignments-page #assignment-sidebar-list .item-name { min-width: 0; }
.assignments-page #assignment-sidebar-list .item-count,
.assignments-page #assignment-sidebar-list .item-review {
    justify-self: end;
    min-width: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.assignments-page #assignment-sidebar-list .item-count {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-navy);
    font-size: 12px;
    font-weight: 600;
}
.assignments-page #assignment-sidebar-list .item-review {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: transparent;
    font-size: 11px;
    line-height: 1;
}
.assignments-page #assignment-sidebar-list .item-review.has-review {
    background: var(--color-white);
    border: 1px solid var(--color-warning-tint-border);
    color: var(--color-warning);
    font-weight: 700;
}

/* The shared rail is also used by All Assignments. The older facet-panel rules above hid this
   sidebar on that tab, so restore the normal drawer treatment for the shared component. */
.assignments-page.asg-allmode .asg-filter-trigger { display: flex; }
.assignments-page.asg-allmode .assignments-sidebar-header { display: block; }
.assignments-page.asg-allmode #assignment-sidebar-list { display: block; }
.assignments-page .assignments-layout.asg-fullwidth .assignments-sidebar { display: flex; }
.assignments-page .asg-cb:disabled { opacity: .42; cursor: not-allowed; }

/* ── fix 3: normalised primary line + muted verbatim "as written" secondary ──── */
.assignments-page .asg-verbatim { margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--color-text-secondary); }
.assignments-page .asg-verbatim-label { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-secondary); margin-right: 6px; vertical-align: 1px; }
.assignments-page .asg-verbatim-text { font-style: italic; }

/* ── fix 4: the page/section reference is now informational, not a source-extract link ── */
.assignments-page .asg-quote-line .asg-srcref-static { color: var(--color-text-secondary); cursor: inherit; }
.assignments-page .asg-quote-line .asg-srcref-static:hover { text-decoration: none; color: var(--color-text-secondary); }

/* ── fix 6: SC badge popover trigger, header "?" and the shared explainer ────── */
.assignments-page .sc-box-btn { font-family: inherit; cursor: pointer; line-height: 1; transition: box-shadow var(--duration-fast), filter var(--duration-fast); }
.assignments-page .sc-box-btn:hover { box-shadow: 0 0 0 2px rgba(15,40,55,.12); }
.assignments-page .sc-box-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
/* Low levels (1/2) are near-invisible by design; keep the button legible as a target. */
.assignments-page .sc-box-btn.sc-lvl-1, .assignments-page .sc-box-btn.sc-lvl-2 { color: var(--color-text-secondary); }

.assignments-page .asg-sc-th .th-label { vertical-align: middle; }
.assignments-page .asg-sc-help { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin: 0 4px; padding: 0; border: 1px solid var(--color-control-border); border-radius: 50%; background: var(--color-white); color: var(--color-text-secondary); font-size: 10px; font-weight: 700; line-height: 1; cursor: help; font-family: inherit; vertical-align: middle; transition: background .14s, color .14s, border-color .14s; }
.assignments-page .asg-sc-help:hover { background: var(--color-navy); color: #fff; border-color: var(--color-navy); }
.assignments-page .asg-sc-help:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.assignments-page .sc-info-backdrop { position: fixed; inset: 0; z-index: 1650; background: transparent; }
.assignments-page .sc-info-pop { position: fixed; z-index: 1651; width: 320px; max-width: 92vw; transform: translate(-100%, 14px); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 10px 34px rgba(15,40,55,.22); padding: 14px 16px; animation: sc-info-in .14s var(--ease-default); max-height: calc(100vh - var(--sc-y, 0px) - 30px); overflow-y: auto; }
.assignments-page .sc-info-pop:focus { outline: none; }
/* Keyboard-activated (click at 0,0): centre in the viewport instead of anchoring off-screen left. */
.assignments-page .sc-info-pop.centered { left: 50%; top: 50%; transform: translate(-50%, -50%); max-height: 80vh; animation: none; }
@keyframes sc-info-in { from { opacity: 0; transform: translate(-100%, 8px); } to { opacity: 1; transform: translate(-100%, 14px); } }
.assignments-page .sc-info-title { font-family: var(--font-heading); font-size: 14px; font-weight: 600; color: var(--color-navy); margin-bottom: 4px; }
.assignments-page .sc-info-lead { font-size: 12px; color: #4A5A62; line-height: 1.45; margin: 0 0 10px; }
.assignments-page .sc-info-levels { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.assignments-page .sc-info-levels li { display: flex; align-items: flex-start; gap: 8px; padding: 3px 5px; border-radius: var(--radius-sm); }
.assignments-page .sc-info-levels li.current { background: #EEF4F6; box-shadow: inset 0 0 0 1px #C9DBE1; }
.assignments-page .sc-info-chip { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--radius-sm); font-size: 11.5px; font-weight: 700; border: 1px solid transparent; }
.assignments-page .sc-info-chip.lvl-unscored, .assignments-page .sc-info-chip.lvl-0, .assignments-page .sc-info-chip.lvl-1, .assignments-page .sc-info-chip.lvl-2 { background: #EEF2F4; color: #5A6A72; border-color: #DCE4E7; }
.assignments-page .sc-info-chip.lvl-3 { background: #FBE9D6; color: #8A4818; border-color: #EFC79A; }
.assignments-page .sc-info-chip.lvl-4 { background: #F8D9C2; color: #7A2F12; border-color: #E8AC82; }
.assignments-page .sc-info-chip.lvl-5 { background: #F5C9B0; color: #5C1D08; border-color: #DE9468; }
.assignments-page .sc-info-meaning { font-size: 12px; color: #33454E; line-height: 1.4; }
.assignments-page .sc-info-conf { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--color-border-light); font-size: 12px; color: #4A5A62; }
.assignments-page .sc-info-conf strong { color: var(--color-navy); }