/* Clairvynt Synapse — Components (ported subset of the prototype v3 component + screen CSS).
   In scope: badges, buttons, data tables, toolbars, tabs, progress bars, the By-Role list,
   expandable rows, inert row actions, SC chips, stat cards, distribution bars, and the
   source slide-out. Out of scope and intentionally NOT ported: element cards, donut/heatmap,
   activity feed, quick actions, org chart, compliance, review-queue, admin,
   issue modal, implementation tracking (plan D4/D5, spec Out of Scope). */

.a11y-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;height:24px;padding:2px 10px;border-radius:var(--radius-full);font-size:var(--text-caption1);font-weight:var(--font-regular);white-space:nowrap;gap:var(--space-1)}
.badge-confirmed{background:var(--color-success-tint);color:var(--color-success)}
.badge-needs-action{background:var(--color-warning-tint);color:var(--color-warning)}
.badge-rejected{background:var(--color-error-tint);color:var(--color-error)}
.badge-flagged{background:var(--color-info-tint);color:var(--color-info)}
.badge-pending{background:var(--color-draft-tint);border:1px solid var(--color-draft-tint-border);color:var(--color-text-secondary)}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:40px;padding:0 var(--space-6);border-radius:var(--radius-md);font-size:var(--text-subhead);font-weight:var(--font-medium);transition:all var(--duration-base) var(--ease-default);white-space:nowrap}
.btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.btn-primary{background:var(--color-navy);color:var(--color-white)}.btn-primary:hover{background:var(--color-blue)}
.btn-secondary{background:transparent;border:1.5px solid var(--color-navy);color:var(--color-navy)}.btn-secondary:hover{background:var(--color-navy);color:var(--color-white)}
/* .btn had no disabled treatment, so a disabled button rendered pixel-identical to a live one and
   its hover still fired. .dc-btn, .edit-save-btn and .pager-btn each invented their own; this is
   that same opacity-and-cursor pattern promoted to the shared rule. */
.btn:disabled{opacity:.5;cursor:default}
.btn-primary:disabled:hover{background:var(--color-navy)}
.btn-secondary:disabled:hover{background:transparent;color:var(--color-navy)}
.btn-sm{height:32px;padding:0 var(--space-3);font-size:var(--text-caption1)}

/* ── Data tables + toolbar ──────────────────────────────────────────────── */
/* Feature 051 issue 3 — responsiveness: the base .data-table had no width, so every table shrank to its
   fixed-column content and left a gutter on wide (28"/30") screens. Fill the container everywhere; the
   .tbl-scroll / .data-table-wrapper wrappers keep overflow-x scoped to the table on narrow (13") screens
   so the page body never scrolls sideways. (The assignments page carried a page-scoped copy of this;
   this global rule generalises it to Role Mappings, Manage roles, Roles overview, Review Queue, etc.) */
/* border-collapse must be explicit. Without it the table takes the UA default of `separate` with
   2px spacing, and the container background shows through the gaps between cells. That was
   invisible while the header was near-white; on the Deep Teal header it renders as white grout.
   Every other table in the app already sets collapse on its own page-scoped rule. */
.data-table{width:100%;border-collapse:collapse}
.data-table-wrapper{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}
/* Product UI data-table header (Clairvynt Design System 2.4). The system defines two header
   variants: a light one for marketing and content pages, and this one for product surfaces where
   tables dominate. --color-navy resolves to Deep Teal #004262 despite its name. No border-bottom:
   the header is its own edge against a white body. */
/* The fill is painted on the row as well as the cell. With cells alone, a column whose width lands
   on a fractional pixel can expose a 1px seam of the white container between two th rects. One
   rectangle spanning the row removes that; the per-cell background stays so hover and sorted can
   paint over it. */
.data-table thead tr{background:var(--color-navy)}
.data-table thead th{background:var(--color-navy);color:var(--color-text-inverse);font-family:var(--font-heading);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:14px 16px;text-align:left;white-space:nowrap}
.data-table tbody tr{border-bottom:1px solid var(--color-border-light);transition:background var(--duration-fast)}
.data-table tbody tr:nth-child(even):not(.expandable-row){background:var(--color-surface)}
.data-table tbody tr:hover:not(.expandable-row){background:rgba(162,189,189,0.08)}
.data-table tbody td{padding:var(--space-3) var(--space-4);font-size:var(--text-subhead);font-weight:var(--font-regular);vertical-align:middle}
.table-container{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}
.doc-ref{font-weight:var(--font-regular);color:var(--color-teal-text);cursor:pointer}.doc-ref:hover{text-decoration:underline}
.table-toolbar{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--color-border-light);flex-wrap:wrap}
.search-field{position:relative;flex:1;min-width:200px;max-width:360px}
.search-field input{width:100%;height:36px;border:1.5px solid var(--color-control-border);border-radius:var(--radius-md);padding:0 var(--space-3) 0 36px;font-size:var(--text-subhead);color:var(--color-text-primary);transition:all var(--duration-base) var(--ease-default)}
.search-field input:focus{outline:none;border-color:var(--color-blue);box-shadow:var(--shadow-focus)}
.search-field svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--color-service-grey)}
.filter-select{border:1.5px solid var(--color-control-border);border-radius:var(--radius-md);font-size:var(--text-subhead);color:var(--color-text-primary);cursor:pointer;padding-left:var(--space-3)}.filter-select:focus{outline:none;border-color:var(--color-blue);box-shadow:var(--shadow-focus)}
.toolbar-check{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 11px;border:1.5px solid var(--color-control-border);border-radius:var(--radius-md);font-size:var(--text-subhead);color:var(--color-text-primary);background:var(--color-white);cursor:pointer;white-space:nowrap;user-select:none}
.toolbar-check:hover{border-color:var(--color-control-border)}
.toolbar-check:has(input:checked){border-color:var(--color-control-border);background:#F4F8F8;font-weight:500}
.toolbar-check input{width:14px;height:14px;margin:0;accent-color:var(--color-blue);cursor:pointer}
.table-pagination{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-6);border-top:1px solid var(--color-border-light);font-size:var(--text-caption1);color:var(--color-service-grey)}

/* Native single-select contract. Important longhands prevent later page background shorthands from
   restoring the platform arrow. Custom comboboxes do not use a select element and stay untouched. */
select:not([multiple]):not([size]) {
    min-height: 44px !important;
    padding-right: var(--space-8) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    /* R3-3a: appearance:none drops the platform's own vertical centring, leaving the option text
       pinned to the top of the 44px box. align-content centres block content (Chrome 123+/Safari 17.4+)
       and is ignored where unsupported. */
    align-content: center;
    background-color: var(--color-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234B7696' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - var(--space-3)) center !important;
    background-size: 16px 16px !important;
}

/* ── Sortable header (shared SortableTh component, feature 055) ─────────── */
/* Global (not scoped .razor.css): sibling headers in the same tables come from C# RenderFragment
   builders, which scoped CSS never reaches — one global block keeps every header consistent.
   Mirrors the .mr36-sortth treatment in roles.css (the older per-page copy on Manage roles). */
.sort-th{cursor:pointer;user-select:none;white-space:nowrap}
.sort-th button{display:inline-flex;align-items:center;min-height:24px;padding:0;border:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}.sort-th button:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
/* On the Deep Teal header these previously painted the label in --color-navy, which is the header
   background itself: a 1:1 contrast that made the sorted column's own name invisible. Label stays
   inverse in every state; the state is carried by the cell background, matching .asg-sortable. */
.sort-th:hover{color:var(--color-text-inverse);background:var(--color-deep-navy)}
.sort-th.sorted{color:var(--color-text-inverse);background:var(--color-blue)}
.sort-th.center{text-align:center}
/* One arrow look everywhere (2026-07-17, revised R3-4c 2026-08-27): filled 9px ▲/▼ on the actively
   sorted column only. Inactive columns keep an invisible ↕ slot that fades in on hover/focus — an
   arrow on every column read as noise. */
.sort-th .sort-arrow{font-size:9px;opacity:.9}
.sort-th:not(.sorted) .sort-arrow{color:var(--color-text-inverse);opacity:0;transition:opacity var(--duration-fast)}
.sort-th:not(.sorted):hover .sort-arrow,.sort-th:not(.sorted):focus-within .sort-arrow{color:var(--color-text-inverse);opacity:.65}

/* ── Quick filters (007 cockpit) ────────────────────────────────────────── */
.filter-bar{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);border-bottom:1px solid var(--color-border-light);flex-wrap:wrap}
.filter-bar .filter-status{display:flex;gap:var(--space-1);margin-left:var(--space-2)}
.filter-bar .filter-count{margin-left:auto;font-size:var(--text-caption1);color:var(--color-service-grey);white-space:nowrap}
.filter-chip{height:30px;padding:0 var(--space-3);border:1.5px solid var(--color-border);border-radius:var(--radius-full);background:var(--color-white);font-size:var(--text-caption1);font-weight:var(--font-medium);color:var(--color-service-grey);cursor:pointer;transition:all var(--duration-fast)}
.filter-chip:hover{border-color:var(--color-blue);color:var(--color-navy)}
.filter-chip.active{background:var(--color-navy);color:var(--color-white);border-color:var(--color-navy)}

/* ── Tabs (SegmentedTabs) ───────────────────────────────────────────────── */
.tabs{display:flex;gap:0;border-bottom:2px solid var(--color-border-light);margin-bottom:var(--space-6)}
.tab-btn{padding:var(--space-3) var(--space-6);font-size:var(--text-subhead);font-weight:var(--font-regular);color:var(--color-text-secondary);border-bottom:3px solid transparent;margin-bottom:-2px;transition:all var(--duration-base)}
/* v55: navy 3px indicator — the 2px teal read as invisible on Roles/Org Chart. */
.tab-btn.active{color:var(--color-navy);font-weight:var(--font-medium);border-bottom-color:var(--color-navy)}
.tab-btn:hover:not(.active){color:var(--color-navy)}
/* The count is the reason to change tab, so it sits on the tab, quieter than the label. */
.tab-count{margin-left:var(--space-2);font-size:var(--text-caption1);font-variant-numeric:tabular-nums;color:var(--color-service-grey)}
.tab-btn.active .tab-count{color:var(--color-navy)}
/* Bordered variant (SegmentedTabs Variant="bordered"): same tablist, used where a switcher sits
   ABOVE another tab strip. Two underlined strips stacked read as one flat level, which is the
   hierarchy problem the comparison result page had. */
/* align-self, not just inline-flex: the page column is a flex container, so a stretch default
   pulled the group to the full content width and it read as a banner rather than a control. */
.tabs.tabs-bordered{display:inline-flex;align-self:flex-start;width:fit-content;border:1.5px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;background:var(--color-white);margin-bottom:var(--space-4)}
.tabs-bordered .tab-btn{padding:var(--space-2) var(--space-5);min-height:44px;border-bottom:0;margin-bottom:0;color:var(--color-navy)}
.tabs-bordered .tab-btn+.tab-btn{border-left:1.5px solid var(--color-border)}
.tabs-bordered .tab-btn.active{background:var(--color-navy);color:var(--color-text-inverse);font-weight:var(--font-medium);border-bottom-color:transparent}
.tabs-bordered .tab-btn:hover:not(.active){background:var(--color-surface);color:var(--color-navy)}
.tabs-bordered .tab-btn.active .tab-count{color:var(--color-text-inverse)}
.tabs-bordered .tab-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

/* ── Progress bar ───────────────────────────────────────────────────────── */
.progress-bar{height:6px;background:var(--color-border-light);border-radius:var(--radius-full);overflow:hidden}
.progress-bar-fill{height:100%;border-radius:var(--radius-full);background:var(--color-blue);transition:width var(--duration-slow) var(--ease-default)}
.progress-bar-fill.success{background:var(--color-success)}

/* ── Assignments By-Role layout + list ──────────────────────────────────── */
.assignments-layout{display:grid;grid-template-columns:280px 1fr;gap:var(--space-6);min-height:600px}
.assignments-sidebar{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 200px)}
.assignments-sidebar-header{padding:var(--space-4);border-bottom:1px solid var(--color-border-light)}
.assignments-sidebar-header .search-field{max-width:100%}.assignments-sidebar-header .search-field input{width:100%}
.sidebar-list{flex:1;overflow-y:auto}
.sidebar-list-group-label{font-size:var(--text-caption1);font-weight:var(--font-medium);color:var(--color-service-grey);text-transform:uppercase;letter-spacing:0.05em;padding:var(--space-3) var(--space-4) var(--space-1)}
.sidebar-list-item{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);cursor:pointer;transition:all var(--duration-fast);border-left:3px solid transparent}
.sidebar-list-item:hover{background:var(--color-surface)}.sidebar-list-item.active{background:rgba(162,189,189,0.08);border-left-color:var(--color-blue)}
.sidebar-list-item .item-name{font-size:var(--text-subhead);color:var(--color-navy);font-weight:var(--font-regular);line-height:1.3}.sidebar-list-item.active .item-name{font-weight:var(--font-medium)}
.sidebar-list-item .item-count{font-size:var(--text-caption1);color:var(--color-service-grey);background:var(--color-surface);padding:2px 8px;border-radius:var(--radius-full);font-weight:var(--font-regular)}
.assignments-main{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}
.assignment-panel-header{padding:var(--space-6);border-bottom:1px solid var(--color-border-light)}
.assignment-panel-title{font-size:var(--text-title3);font-weight:var(--font-medium);color:var(--color-navy);margin-bottom:var(--space-1)}
.assignment-panel-meta{display:flex;align-items:center;gap:var(--space-6);font-size:var(--text-subhead);color:var(--color-service-grey);margin-bottom:var(--space-4);flex-wrap:wrap}
.assignment-panel-meta .meta-item{display:flex;align-items:center;gap:var(--space-2)}
.assignment-progress{display:flex;align-items:center;gap:var(--space-4)}.assignment-progress .progress-bar{flex:1}.assignment-progress .progress-text{font-size:var(--text-caption1);font-weight:var(--font-medium);color:var(--color-navy);white-space:nowrap}

/* Role Mappings APPLIES TO cell — global because AppliesCell emits these classes from a C#
   RenderFragment (no scoped-CSS attribute), so RoleMappingsPanel.razor.css cannot reach them.
   Two stacked lines: "M assignments" over a smaller "N documents". */
.mp-table .grp-applies{display:flex;flex-direction:column;gap:1px;line-height:1.25}
.mp-table .grp-assign{font-size:var(--text-subhead);color:var(--color-navy);font-weight:var(--font-medium);white-space:nowrap}
.mp-table .grp-assets{font-size:11px;color:var(--color-service-grey);white-space:nowrap}
.mp-table a.grp-applies-link{text-decoration:none;border-radius:var(--radius-sm)}
.mp-table a.grp-applies-link:hover .grp-assets,.mp-table a.grp-applies-link:hover .grp-assign{color:var(--color-text-link-hover);text-decoration:underline}
/* v55 follow-up: the row select checkbox is fragment-emitted, so its rule must be global. */
.mp-table .mp-cb{width:15px;height:15px;accent-color:var(--color-navy);cursor:pointer}

/* ── Inert row actions (visible but no handler — plan D3) ────────────────── */
.action-btns{display:flex;gap:var(--space-1)}
.action-btn{width:28px;height:28px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;transition:all var(--duration-fast);color:var(--color-service-grey)}.action-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}.action-btn svg{width:14px;height:14px}
.action-btn.confirm:hover{background:var(--color-success-tint);color:var(--color-success)}
.action-btn.reject:hover{background:var(--color-error-tint);color:var(--color-error)}
.action-btn.flag:hover{background:var(--color-info-tint);color:var(--color-info)}
.row-cta{display:inline-flex;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}
.row-cta-secondary{background:var(--color-white);color:var(--color-navy);border-color:var(--color-border)}.row-cta-secondary:hover{background:var(--color-surface)}

/* ── Expandable rows ────────────────────────────────────────────────────── */
.expandable-row td{padding:0!important}
.expandable-content{max-height:0;overflow:hidden;transition:max-height var(--duration-slow) var(--ease-default)}
.expandable-content.open{max-height:900px}
.expandable-inner{padding:var(--space-4) var(--space-6) var(--space-5);background:var(--color-surface);border-top:1px solid var(--color-border-light);display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4) var(--space-8)}
.detail-label{font-size:var(--text-caption1);font-weight:var(--font-medium);color:var(--color-service-grey);text-transform:uppercase;letter-spacing:0.03em;margin-bottom:var(--space-1)}
.detail-value{font-size:var(--text-subhead);color:var(--color-navy);line-height:1.5}
.cockpit-panel{display:flex;flex-direction:column;gap:var(--space-3)}
.cockpit-panel-title{font-size:var(--text-subhead);font-weight:var(--font-medium);font-family:var(--font-heading);color:var(--color-navy);padding-bottom:var(--space-2);border-bottom:1px solid var(--color-border-light)}
.cockpit-badges{display:flex;gap:var(--space-2);flex-wrap:wrap}
.cockpit-status{grid-column:1/-1;padding:var(--space-4) 0;font-size:var(--text-subhead);color:var(--color-service-grey)}
.cockpit-status.error{color:var(--color-error)}
/* Structured raise-issue / reject correction form */
.correction-field{margin-top:12px}
.correction-label{display:block;margin-bottom:8px;font-weight:600}
.correction-input,.correction-select{width:100%;padding:8px;border:1px solid var(--color-border)}
.correction-input{font-family:inherit}
.correction-textarea{width:100%;min-height:100px;padding:8px;border:1px solid var(--color-border);font-family:inherit}
.confidence-bar{display:flex;align-items:center;gap:var(--space-2)}
.confidence-track{width:60px;height:4px;background:var(--color-border-light);border-radius:var(--radius-full);overflow:hidden}
.confidence-fill{height:100%;border-radius:var(--radius-full);background:var(--color-blue)}

/* ── Stat cards (Dashboard) ─────────────────────────────────────────────── */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-6);margin-bottom:var(--space-8)}
.stat-card{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);transition:box-shadow var(--duration-base) var(--ease-default)}.stat-card:hover{box-shadow:var(--shadow-md)}
.stat-card.clickable{cursor:pointer}
.stat-label{font-size:var(--text-caption1);font-weight:var(--font-medium);color:var(--color-service-grey);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:var(--space-2)}
.stat-value{font-size:var(--text-title2);font-weight:var(--font-medium);font-family:var(--font-heading);color:var(--color-navy);line-height:1.15}
.stat-value.accent{color:var(--color-warning)}
.stat-sub{font-size:var(--text-caption1);color:var(--color-service-grey);margin-top:var(--space-2)}

/* Snapshot caption in the dashboard page header. */
.dashboard-snapshot{font-size:var(--text-caption1);color:var(--color-service-grey);text-align:right;margin-top:var(--space-1)}
.dashboard-header-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-2)}
.dashboard-header-actions .dashboard-snapshot{margin-top:0}

/* ── SC (safety-criticality) chip — score 1..5 ──────────────────────────── */
.sc-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--radius-sm);font-size:var(--text-caption2);font-weight:var(--font-medium);letter-spacing:0.02em;border:1px solid;line-height:1.2}
.sc-chip.sc-1{background:#FEF3E7;color:#8A5A1A;border-color:#F5D9A8}
.sc-chip.sc-2{background:#FEEBD0;color:#8A4818;border-color:#F2C896}
.sc-chip.sc-3{background:#FDD9B0;color:#8A3814;border-color:#EFB070}
.sc-chip.sc-4{background:#FBC18E;color:#7A2A0E;border-color:#E89858}
.sc-chip.sc-5{background:#F5A372;color:#5C1D08;border-color:#D87C3C}
.sc-chip-empty{font-size:var(--text-caption2);color:var(--color-service-grey)}
.sc-flag-dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
/* Pending SC-proposal marker: an open ring beside the chip while a proposal awaits a decision. */
.sc-proposal-pending-dot{width:8px;height:8px;border-radius:50%;border:2px solid #2563EB;background:transparent;display:inline-block;margin-left:5px;vertical-align:middle}
/* Pending SC-proposal banner inside the cockpit SC panel. */
.sc-proposal-pending{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--radius-sm);font-size:var(--text-caption2);font-weight:var(--font-medium);background:#EFF4FF;color:#1E40AF;border:1px solid #BFD3FF}
/* SC change history (US4): the assignment's full SC trajectory inside the cockpit SC panel. */
.sc-history{margin-top:14px}
.sc-history-list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.sc-history-row{padding:8px 10px;border:1px solid var(--color-border);border-left:3px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-white)}
.sc-history-row[data-status="Approved"]{border-left-color:#2F9E44}
.sc-history-row[data-status="Rejected"]{border-left-color:#E03131}
.sc-history-row[data-status="Superseded"]{border-left-color:var(--color-service-grey)}
.sc-history-row[data-status="Pending"]{border-left-color:#2563EB}
.sc-history-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sc-history-scores{font-weight:var(--font-medium);color:var(--color-navy);font-variant-numeric:tabular-nums}
.sc-history-reason{font-size:var(--text-caption2);color:var(--color-service-grey)}
.sc-history-rationale{margin-top:4px;font-size:var(--text-caption1);color:var(--color-navy)}
.sc-history-meta{margin-top:4px;font-size:var(--text-caption2);color:var(--color-service-grey)}
.sc-history-note{margin-top:2px;font-size:var(--text-caption2);color:var(--color-service-grey);font-style:italic}

/* ── Distribution bars (SC distribution, per-role, per-document) ─────────── */
.dist-bars{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);margin-bottom:var(--space-8)}
.dist-bars h2{font-size:var(--text-body);font-weight:var(--font-medium);color:var(--color-navy);margin-bottom:var(--space-1)}
.dist-bars .dist-subtitle{font-size:var(--text-caption1);color:var(--color-service-grey);margin-bottom:var(--space-5);line-height:1.5}
.dist-row{display:flex;align-items:center;gap:var(--space-3);height:36px;padding:0 var(--space-2);border-radius:var(--radius-sm);transition:background var(--duration-fast) var(--ease-default)}
.dist-row:hover{background:var(--color-surface)}
.dist-label{font-size:var(--text-subhead);color:var(--color-navy);font-weight:var(--font-regular);width:200px;min-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dist-track{flex:1}
.dist-count{font-size:var(--text-caption1);font-weight:var(--font-medium);color:var(--color-navy);width:50px;text-align:right;flex-shrink:0}

/* ── Role loadings (v21 dashboard two-tone bars) ────────────────────────── */
.role-loadings{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);margin-bottom:var(--space-8)}
.role-loadings h2{font-size:var(--text-body);font-weight:var(--font-medium);color:var(--color-navy);margin-bottom:var(--space-1)}
.role-loadings .dist-subtitle{font-size:var(--text-caption1);color:var(--color-service-grey);line-height:1.5}
.role-loadings-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-4)}
.role-loadings-link{font-size:var(--text-caption1);font-weight:var(--font-medium);color:var(--color-text-link);white-space:nowrap;flex-shrink:0}
.role-loadings-link:hover{text-decoration:underline}
.role-loadings-legend{display:flex;align-items:center;gap:var(--space-5);margin-bottom:var(--space-4);font-size:var(--text-caption1);color:var(--color-service-grey)}
.legend-item{display:inline-flex;align-items:center;gap:var(--space-2)}
.legend-swatch{width:10px;height:10px;border-radius:var(--radius-sm);flex-shrink:0}
.legend-swatch.assign{background:var(--color-navy)}
.legend-swatch.sc{background:var(--color-warning)}
.loading-row{display:flex;align-items:center;gap:var(--space-3);height:36px;padding:0 var(--space-2);border-radius:var(--radius-sm);transition:background var(--duration-fast) var(--ease-default)}
.loading-row:hover{background:var(--color-surface)}
.loading-label{width:210px;min-width:210px;overflow:hidden}
.loading-name{font-size:var(--text-subhead);color:var(--color-navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.loading-sub{font-size:var(--text-caption2);color:var(--color-service-grey);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.loading-track{flex:1;height:14px;background:var(--color-border-light);border-radius:var(--radius-full);overflow:hidden;display:flex}
.loading-seg{height:100%}
.loading-seg.sc{background:var(--color-warning)}
.loading-seg.assign{background:var(--color-navy)}
.loading-count{width:64px;text-align:right;flex-shrink:0;font-size:var(--text-caption1)}
.loading-count .assign{color:var(--color-navy);font-weight:var(--font-medium)}
.loading-count .sc{color:var(--color-warning)}

/* ── Source slide-out (text-only quote + reference — plan D7) ────────────── */
.source-viewer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,4,50,0.62);z-index:199;opacity:0;pointer-events:none;transition:opacity var(--duration-slow) var(--ease-default)}
.source-viewer-overlay.open{opacity:1;pointer-events:auto}
.source-viewer{position:fixed;top:0;right:0;width:50%;height:100vh;background:var(--color-white);z-index:200;transition:transform var(--duration-slow) var(--ease-default),box-shadow var(--duration-slow) var(--ease-default),visibility 0s var(--duration-slow);display:flex;flex-direction:column;overflow:hidden;transform:translateX(100%);visibility:hidden}
.source-viewer.open{transform:translateX(0);box-shadow:-8px 0 32px rgba(0,4,50,0.12);visibility:visible;transition:transform var(--duration-slow) var(--ease-default),box-shadow var(--duration-slow) var(--ease-default),visibility 0s 0s}
/* Light header (2026-07-16): the old dark-navy band with dark-teal text was near-unreadable. */
.source-viewer-header{background:var(--color-white);color:var(--color-navy);border-bottom:1px solid var(--color-border);padding:var(--space-5) var(--space-6);display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);flex-shrink:0}
.source-viewer-header .sv-head-text{min-width:0}
.source-viewer-header .sv-kicker{font-size:var(--text-caption2);font-weight:var(--font-medium);letter-spacing:.08em;text-transform:uppercase;color:var(--color-service-grey)}
.source-viewer-header .sv-head-title{font-size:var(--text-body);font-weight:var(--font-medium);font-family:var(--font-heading);color:var(--color-navy);margin:2px 0 0;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.source-viewer-header .sv-subtitle{font-size:var(--text-caption1);color:var(--color-service-grey);margin-top:3px}
.sv-close-btn{width:32px;height:32px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--color-service-grey);transition:all var(--duration-fast);flex-shrink:0}.sv-close-btn:hover{background:var(--color-surface);color:var(--color-navy)}.sv-close-btn svg{width:18px;height:18px}
.source-viewer-body{flex:1;overflow-y:auto;padding:var(--space-6) var(--space-8)}
/* The scan flag sits inline in the meta grid (2026-07-17 slide-out redesign). */
.sv-scan-flag{display:inline-flex;align-items:center;background:var(--color-warning-tint);color:var(--color-warning);border-radius:var(--radius-full);padding:1px 8px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-left:var(--space-2);vertical-align:middle}
.sv-section{margin-bottom:var(--space-6)}
.sv-assignment-identity{margin-bottom:var(--space-6)}
.sv-assignment-title{font-family:var(--font-heading);font-size:var(--text-body);font-weight:var(--font-medium);line-height:1.35;color:var(--color-navy)}
.sv-assignment-subtitle{font-size:var(--text-caption1);color:var(--color-service-grey);margin-top:var(--space-1)}
.sv-assignment-active{display:flex;flex-direction:column;gap:var(--space-1);margin-top:var(--space-4);padding-left:var(--space-3);border-left:2px solid var(--color-border-light)}
.sv-assignment-label{font-size:var(--text-caption2);font-weight:var(--font-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--color-service-grey)}
.sv-assignment-normalised{font-size:var(--text-subhead);line-height:1.5;color:var(--color-text-primary)}
.sv-section-title{font-size:var(--text-subhead);font-weight:var(--font-medium);font-family:var(--font-heading);color:var(--color-navy);margin-bottom:var(--space-3)}
.sv-section p,.sv-section li{font-size:var(--text-subhead);color:var(--color-text-primary);line-height:1.7;margin-bottom:var(--space-3)}
.sv-quote{background:rgba(251,191,36,0.14);border-left:3px solid var(--color-warning);padding:var(--space-4);border-radius:0 var(--radius-sm) var(--radius-sm) 0;white-space:pre-wrap;word-break:break-word;font-size:var(--text-subhead);line-height:1.7;color:var(--color-navy)}
.sv-quote+.sv-quote{margin-top:var(--space-3)}
.sv-mark{background:rgba(251,191,36,0.38);color:var(--color-navy);padding:1px 2px;border-radius:2px;font-weight:var(--font-medium);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.sv-sheet-note{font-size:var(--text-caption1);color:var(--color-service-grey);margin:var(--space-3) 0}
.sv-meta-grid{display:grid;grid-template-columns:auto 1fr;gap:var(--space-2) var(--space-5);font-size:var(--text-subhead);margin:0 0 var(--space-6);align-items:baseline}
.sv-meta-grid dt{color:var(--color-service-grey);font-weight:var(--font-medium);white-space:nowrap}
.sv-meta-grid dd{color:var(--color-navy);margin:0}
.sv-er{color:rgb(180,83,9);font-weight:500}
/* Conditional justification/notes blocks, visually the accordion's justify-note (scoped to
   .assignments-page there, so the slide-out carries its own copy). */
.sv-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;margin-bottom:var(--space-3)}
.sv-note .sv-note-label{display:block;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:0.04em;color:rgb(138,109,27);margin-bottom:2px}

/* ── Source PDF viewer (feature 046) — global on purpose: .sv-pdf-page/.sv-pdf-highlight are created
   by js/source-viewer.js and scoped .razor.css cannot reach JS-injected DOM. ──────────────────── */
.source-viewer.sv-wide{width:72%;max-width:1100px}
.sv-pdf-toolbar{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)}
.sv-pdf-toolbar .sv-pdf-pageinfo{font-size:var(--text-caption1);color:var(--color-service-grey)}
.sv-pdf-nav{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-white);color:var(--color-navy);font-size:var(--text-subhead);line-height:1;cursor:pointer;transition:all var(--duration-fast)}
.sv-pdf-nav:hover:not(:disabled){background:var(--color-surface)}
.sv-pdf-nav:disabled{opacity:0.4;cursor:default}
.sv-pdf-host{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);overflow:auto;max-height:60vh}
.sv-pdf-page{position:relative;margin:0 auto;background:var(--color-white)}
.sv-pdf-canvas{display:block}
.sv-pdf-highlight{position:absolute;background:rgba(251,191,36,0.32);border:2px solid var(--color-warning);border-radius:2px;pointer-events:none;box-sizing:border-box}
.sv-pdf-highlight-active{background:color-mix(in srgb,var(--clv-color-warning-dark) 56%,transparent);border:3px solid var(--clv-color-deep-navy);box-shadow:0 0 0 2px var(--color-white),0 0 0 5px var(--clv-color-deep-navy);z-index:2}
.sv-pdf-note{font-size:var(--text-caption1);color:var(--color-service-grey);font-style:italic;margin:var(--space-2) 0 0}
/* pdf.js selectable text layer (2026-07-16): transparent spans positioned by TextLayer over the
   canvas; the visible selection colour is the only painted pixel. Minimal subset of pdf.js's
   text_layer_builder.css — enough for selection, nothing else. */
.sv-pdf-page .textLayer{position:absolute;inset:0;overflow:hidden;line-height:1;text-align:initial;transform-origin:0 0;caret-color:CanvasText;z-index:2}
.sv-pdf-page .textLayer span,.sv-pdf-page .textLayer br{color:transparent;position:absolute;white-space:pre;cursor:text;transform-origin:0% 0%}
.sv-pdf-page .textLayer ::selection{background:rgba(47,111,143,0.35)}

@media(max-width:1280px){.assignments-layout{grid-template-columns:240px 1fr}.source-viewer{width:60%}.main-content{padding:var(--space-6)}}
@media(max-width:1024px){.assignments-layout{grid-template-columns:1fr}.assignments-sidebar{max-height:300px}.source-viewer{width:80%}.dist-label{width:140px;min-width:140px}}

/* ── Roles library (feature 018) ──────────────────────────────────────────── */
.roles-summary{display:flex;flex-wrap:wrap;gap:8px;margin:var(--space-3) 0 var(--space-5)}
.roles-sum-item{font-size:var(--text-caption1);color:var(--color-service-grey);background:var(--color-surface);border:1px solid var(--color-border-light);border-radius:var(--radius-full);padding:4px 12px}
.roles-sum-item strong{color:var(--color-navy);font-weight:var(--font-medium)}
.tbl-scroll{overflow:auto;max-height:calc(100vh - 320px);background:var(--color-white);border:1px solid var(--color-border-light);border-radius:var(--radius-md)}
.data-table.sticky-head thead th{position:sticky;top:0;z-index:2}
/* v14 table treatment — scoped to the Roles-section tables (the only .tbl-scroll users): white
   body, generous padding, visible row dividers. The header now inherits the shared product variant
   above; only the padding differs, so this rule no longer restates colour or type.
   The sticky variant deliberately sets NO background. It does not need one: the base
   `.data-table thead th` already paints every header cell, sticky or not, so the scrolled rows
   cannot show through. Restating it here was actively harmful, because at (0,3,2) it outranked the
   (0,2,0) `.sort-th.sorted` and `.asg-sortable.sorted` state rules and flattened the sorted column
   back to the default colour on every .tbl-scroll table. */
.tbl-scroll .data-table thead th{padding:14px 16px}
.tbl-scroll .data-table tbody td{padding:14px 16px;font-size:13.5px;color:var(--rp-ink)}
.tbl-scroll .data-table tbody tr:nth-child(even):not(.mp-exp):not(.grp-exp){background:var(--rp-surface2)}
.tbl-scroll .data-table tbody tr:hover:not(.mp-exp):not(.grp-exp){background:var(--rp-row-hover)}
/* Roles-section toolbar joins the table into one white card (v14 prototype). Scoped via :has to a
   toolbar immediately followed by a .tbl-scroll, so Assignments/Documents toolbars are unaffected. */
.table-toolbar:has(+ .tbl-scroll){background:var(--color-white);border:1px solid var(--color-border-light);border-bottom:none;border-radius:var(--radius-md) var(--radius-md) 0 0}
.table-toolbar + .tbl-scroll{border-top:none;border-top-left-radius:0;border-top-right-radius:0}
.tbl-scroll + .table-pagination{background:var(--color-white);border:1px solid var(--color-border-light);border-top:none;border-radius:0 0 var(--radius-md) var(--radius-md)}
.kind-pill{display:inline-flex;align-items:center;font-size:var(--text-caption1);color:var(--color-navy);background:var(--color-surface);border:1px solid var(--color-border-light);border-radius:var(--radius-full);padding:2px 9px;white-space:nowrap}
.mp-table .new-role-chip{vertical-align:middle}
.src-pill{display:inline-block;white-space:nowrap;font-size:var(--text-caption1);border-radius:var(--radius-full);padding:2px 9px;font-weight:var(--font-medium)}
.src-org{background:color-mix(in srgb, var(--color-teal) 30%, transparent);color: var(--color-navy)}
.src-oms{background:color-mix(in srgb, var(--color-blue) 14%, transparent);color:color-mix(in srgb, var(--color-blue) 75%, var(--color-navy))}
.level-chip{display:inline-block;font-size:11px;color:var(--color-info);background:var(--color-info-tint);border-radius:var(--radius-sm);padding:1px 7px;white-space:nowrap}
.rl-name{font-size:var(--text-subhead);color:var(--color-navy);line-height:1.3}
/* 056: marker on library rows that are not on the master role list. */
.rl-unmatched{display:inline-block;font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--color-warning);background:var(--color-warning-tint);border-radius:var(--radius-full);padding:1px 7px;margin-left:6px;vertical-align:middle}
.rl-acr{font-size:var(--text-caption1);color:var(--color-service-grey)}
.cell-muted{color:var(--color-service-grey)}
/* 026 — v16 Roles deltas: the library's inline kind editor and the Org Master PSL/TA ticks. */
.tick{color:var(--color-success);font-weight:var(--font-medium)}
.kind-edit{display:inline-flex;align-items:center;gap:5px;cursor:pointer;border-radius:var(--radius-full)}
.kind-edit:hover .kind-pill{border-color:var(--color-control-border);color:var(--color-text-link-hover)}
.kind-edited{color:var(--color-warning);font-size:15px;line-height:1}
.kind-inline-select{font-size:var(--text-caption1);color:var(--color-navy);background:var(--color-white);border:1px solid var(--color-blue);border-radius:var(--radius-sm);padding:2px 6px;max-width:150px}
/* Role-mapping cells rendered from C# RenderFragments (match type, role type, confidence bands, the
   attention badge, the edit-action hover) — these must be global, since Blazor scoped CSS only reaches
   elements written as literal markup in the .razor template, not builder-emitted ones. */
.match-cell{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.msrc{font-size:var(--text-caption1);font-family:var(--font-heading);letter-spacing:.02em;color:var(--color-info);background:var(--color-info-tint);border-radius:4px;padding:2px 7px;white-space:nowrap}
.msrc.warn{color:var(--color-warning);background:color-mix(in srgb, var(--color-warning) 10%, var(--color-white))}
.new-role-chip{display:inline-flex;align-items:center;padding:2px 8px;border:1px solid color-mix(in srgb, var(--color-warning) 34%, var(--color-border-light));border-radius:var(--radius-full);background:color-mix(in srgb, var(--color-warning) 10%, var(--color-white));color:color-mix(in srgb, var(--color-warning) 78%, var(--color-navy));font-size:var(--text-caption1);font-weight:var(--font-medium);white-space:nowrap}
.fan-pill{display:inline-flex;align-items:center;font-size:9.5px;font-family:var(--font-heading);letter-spacing:.05em;text-transform:uppercase;background:color-mix(in srgb, var(--color-teal) 30%, transparent);color: var(--color-navy);border-radius:3px;padding:2px 6px;margin-left:8px;vertical-align:middle;font-weight:500;white-space:nowrap}
.rt-pill{font-size:10px;font-family:var(--font-heading);letter-spacing:.03em;border-radius:3px;padding:2px 6px;font-weight:500;white-space:nowrap}
.rt-mapped{background:color-mix(in srgb, var(--color-blue) 12%, transparent);color:color-mix(in srgb, var(--color-blue) 70%, var(--color-navy))}
.rt-merged{background:color-mix(in srgb, var(--color-deep-navy) 12%, transparent);color:color-mix(in srgb, var(--color-blue) 50%, var(--color-deep-navy))}
.rt-new{background:color-mix(in srgb, var(--color-warning) 16%, var(--color-white));color:color-mix(in srgb, var(--color-warning) 90%, var(--color-navy))}
.rt-nomatch{background:color-mix(in srgb, var(--color-warning) 10%, transparent);color:var(--color-warning)}
.rt-notrole{background:color-mix(in srgb, var(--v21-grey) 14%, transparent);color:color-mix(in srgb, var(--v21-grey) 80%, var(--color-navy))}
.confidence-bar.confidence-high .confidence-fill{background:var(--color-success)}
.confidence-bar.confidence-mid .confidence-fill{background:var(--color-blue)}
.confidence-bar.confidence-low .confidence-fill{background:var(--color-warning)}
.conf-pct{font-size:var(--text-caption1);color:var(--color-service-grey)}
.badge-attention{background:color-mix(in srgb, var(--color-warning) 16%, var(--color-white));color:color-mix(in srgb, var(--color-warning) 90%, var(--color-navy));border:1px solid color-mix(in srgb, var(--color-warning) 40%, var(--color-white))}
.action-btn.reassign:hover{background:var(--color-warning-tint);color:var(--color-warning)}
.action-btn.unmap:hover{background:var(--color-error-tint);color:var(--color-error)}

/* ── Assignments v16 (025) ──────────────────────────────────────────────── */
/* Extra toolbar filters (SC-rank, role-type) sit in the filter-bar alongside the chips. */
.filter-bar .asg-extra-filter{height:30px;font-size:var(--text-caption1)}
/* Sortable header cells: pointer + active highlight + the ▲/▼ indicator. */
.data-table thead th.asg-sortable{user-select:none}
/* Hover and sorted each take a whole brand token rather than a mix of one. A color-mix computes to
   a value that resolves to no token, and ui-check reports that as off-brand, correctly, because a
   near-brand colour nobody can name is exactly the token evasion the system bans.
   Hover recedes (Deep Navy), sorted advances (Slate Blue), so the transient and the persistent
   state read as different kinds of thing rather than two strengths of the same one.
   White on Slate Blue is 4.68:1, above the 4.5 threshold for this 12px header text. */
.data-table thead th.asg-sortable:hover{background:var(--color-deep-navy)}
.data-table thead th.asg-sortable.sorted{background:var(--color-blue)}
.sort-ind{font-size:9px;opacity:.9}
/* The middle "Role / Document" cell on the All tab stacks the role over the document link. */
.asg-roledoc{display:flex;flex-direction:column;gap:2px}
.asg-role-cell{font-weight:var(--font-medium);color:var(--color-navy)}
.asg-resp-text{display:inline-block;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
/* Clickable source pill: "Section X · p.N" → opens the SourceViewer. Reuses .src-pill geometry. */
.src-pill.asg-src-pill{background:color-mix(in srgb, var(--color-blue) 12%, transparent);color:color-mix(in srgb, var(--color-blue) 70%, var(--color-navy));cursor:pointer;border:none;display:inline-flex;align-items:center}
.src-pill.asg-src-pill:hover{background:color-mix(in srgb, var(--color-blue) 22%, transparent)}
/* Numbered pager shared by every Assignments tab. */
.pagination-btns{display:inline-flex;gap:4px;align-items:center}
.pager-btn{min-width:30px;height:30px;padding:0 8px;border:1.5px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-white);font-size:var(--text-caption1);color:var(--color-navy);cursor:pointer}
.pager-btn:hover:not(:disabled):not(.active){border-color:var(--color-blue)}
.pager-btn.active{background:var(--color-navy);color:var(--color-white);border-color:var(--color-navy)}
.pager-btn:disabled{opacity:.5;cursor:default}
.pagination-text{font-size:var(--text-caption1);color:var(--color-service-grey)}

/* ===== Change Control → Overview (feature 029 Phase 2) ===== */
/* Green confirmed metric on the stat card (additive to .accent's amber). */
.stat-value.success{color:var(--color-success)}

/* Hero banner: a single white card, lead text left, headline metrics right. */
.clv-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-8);background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6) var(--space-8);margin-bottom:var(--space-8)}
.clv-hero-eyebrow{font-size:var(--text-caption1);font-weight:var(--font-medium);color:var(--color-service-grey);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:var(--space-3)}
.clv-hero-headline{font-family:var(--font-heading);font-size:var(--text-title2);font-weight:var(--font-medium);color:var(--color-navy);line-height:1.15;margin-bottom:var(--space-2)}
.clv-hero-sub{font-size:var(--text-subhead);color:var(--color-service-grey)}
.clv-hero-metrics{display:flex;gap:var(--space-8);flex-shrink:0}
.clv-hero-metric{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.clv-hero-metric .val{font-family:var(--font-heading);font-size:var(--text-title1);font-weight:var(--font-medium);color:var(--color-navy);line-height:1.05}
.clv-hero-metric .lbl{font-size:var(--text-caption1);font-weight:var(--font-medium);color:var(--color-service-grey);text-transform:uppercase;letter-spacing:0.05em;margin-top:var(--space-1)}

/* Section heading reused above the asset grid. */
.section-heading{font-family:var(--font-heading);font-size:var(--text-title3);font-weight:var(--font-medium);color:var(--color-navy);margin:0 0 var(--space-5)}

/* Progress by Asset: a grid of donut cards. */
#element-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-6);margin-bottom:var(--space-8)}
.element-card{display:flex;flex-direction:column;align-items:center;gap:var(--space-5);background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);transition:box-shadow var(--duration-base) var(--ease-default)}
.element-card:hover{box-shadow:var(--shadow-md)}
.element-card-header{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);text-align:center}
.element-number{font-size:var(--text-caption2);font-weight:var(--font-medium);color:var(--color-service-grey);text-transform:uppercase;letter-spacing:0.06em}
.element-name{font-family:var(--font-heading);font-size:var(--text-body-lg);font-weight:var(--font-medium);color:var(--color-navy)}
.donut-chart{position:relative;width:120px;height:120px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center}
.donut-center{position:absolute;width:72px;height:72px;border-radius:var(--radius-full);background:var(--color-white);display:flex;flex-direction:column;align-items:center;justify-content:center}
.donut-percent{font-family:var(--font-heading);font-size:var(--text-body-lg);font-weight:var(--font-medium);color:var(--color-navy);line-height:1}
.donut-label{font-size:var(--text-caption2);color:var(--color-service-grey);text-transform:uppercase;letter-spacing:0.05em;margin-top:var(--space-1)}
.element-stats{display:flex;flex-direction:column;gap:var(--space-2);width:100%}
.element-stat-row{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-subhead);color:var(--color-text-primary)}
.element-stat-row .label{flex:1;color:var(--color-service-grey)}
.element-stat-row .count{font-weight:var(--font-medium);color:var(--color-navy)}

/* Status / legend dots — shared colour variants. */
.dot{width:10px;height:10px;border-radius:var(--radius-full);flex-shrink:0;display:inline-block}
.dot-approved{background:var(--color-success)}
.dot-issue{background:var(--color-warning)}
.dot-rejected{background:var(--color-error)}
.dot-sc{background:var(--color-navy)}
.dot-extracted{background:var(--color-service-light)}

/* Review Progress by Document: stacked status bars. */
.status-bars-wrapper{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);margin-bottom:var(--space-8)}
.status-bars-wrapper h2{font-family:var(--font-heading);font-size:var(--text-title3);font-weight:var(--font-medium);color:var(--color-navy);margin:0 0 var(--space-2)}
.status-bars-subtitle{font-size:var(--text-subhead);color:var(--color-service-grey);margin:0 0 var(--space-4)}
.status-bars-legend{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-bottom:var(--space-5)}
.status-bars-legend-item{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-caption1);color:var(--color-service-grey)}
.status-bar-row{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-2) 0;cursor:pointer;border-radius:var(--radius-sm)}
.status-bar-row:hover{background:var(--color-surface)}
.status-bar-label{width:140px;flex-shrink:0;font-size:var(--text-subhead);color:var(--color-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status-bar-track{flex:1;display:flex;height:14px;border-radius:var(--radius-full);overflow:hidden;background:var(--color-border-light)}
.status-bar-segment{height:100%}
.status-bar-segment.seg-approved{background:var(--color-success)}
.status-bar-segment.seg-issue{background:var(--color-warning)}
.status-bar-segment.seg-rejected{background:var(--color-error)}
.status-bar-segment.seg-sc{background:var(--color-navy)}
.status-bar-segment.seg-extracted{background:var(--color-service-light)}
.status-bar-total{width:40px;flex-shrink:0;text-align:right;font-size:var(--text-subhead);color:var(--color-service-grey)}
.status-bar-pct{width:48px;flex-shrink:0;text-align:right;font-size:var(--text-subhead);font-weight:var(--font-medium);color:var(--color-navy)}

/* Recent Activity + Quick Actions. */
.activity-section{display:grid;grid-template-columns:2fr 1fr;gap:var(--space-6);margin-bottom:var(--space-8)}
.activity-feed,.quick-actions{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6)}
.section-title{font-family:var(--font-heading);font-size:var(--text-body-lg);font-weight:var(--font-medium);color:var(--color-navy);margin-bottom:var(--space-4)}
.activity-empty{font-size:var(--text-subhead);color:var(--color-service-grey)}
.activity-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);padding:var(--space-3) 0;border-bottom:1px solid var(--color-border-light)}
.activity-row:last-child{border-bottom:none}
.activity-text{font-size:var(--text-subhead);color:var(--color-text-primary)}
.activity-text b{color:var(--color-navy);font-weight:var(--font-medium)}
.activity-time{font-size:var(--text-caption1);color:var(--color-service-grey);white-space:nowrap;flex-shrink:0}
.quick-actions{display:flex;flex-direction:column;align-items:stretch}
.quick-actions .btn{margin-bottom:var(--space-3);width:100%}
.quick-actions .btn:last-child{margin-bottom:0}
@media (max-width:900px){.activity-section{grid-template-columns:1fr}.clv-hero{flex-direction:column;gap:var(--space-5)}.clv-hero-metrics{align-self:stretch;justify-content:flex-start}}

/* Role-mapping target details are available through native hover help and an accessible description.
   These rules live in the global sheet because the target is emitted from a C# RenderFragment. */
.mapped-target-info{position:relative;display:inline-flex;max-width:100%;border-radius:var(--radius-sm)}
.mapped-target-info:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.mapped-target-details{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* #307: dense tables stay tables at phone width and expose a labelled keyboard-scroll region. */
.table-scroll-region{overflow-x:auto;min-width:0;max-width:100%;scrollbar-width:auto}
.table-scroll-region:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.table-scroll-instruction{display:block;margin:0 0 var(--space-2);color:var(--color-service-grey);font-size:var(--text-caption1)}
.rp-row-open{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-1);min-width:44px;min-height:44px;border:0;background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer;border-radius:var(--radius-sm)}
.rp-row-open:focus-visible,.asg-row-toggle:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.asg-row-toggle{min-width:44px;min-height:44px;border:0;background:transparent;color:inherit;cursor:pointer}