/* Clairvynt Synapse — Regulatory citation review (feature 087).
   Ports the decisions in docs/wireframes/2026-08-18-regulatory-citation-review-r1.html onto the app's
   token aliases. Table chrome, buttons, badges, toolbar and pagination come from components.css; only
   what those do not already provide lives here.

   The one remaining feature 087 query is a container query on .reg-scope rather than a viewport media query,
   because a narrow window on a wide monitor must get the narrow layout:
     - under 1240px of surface every control grows to the 44x44 touch bound */

.reg-scope { container-type: inline-size; min-width: 0; }

/* ---------- cell content ---------- */

.reg-table .cell-sub,
.reg-scope .data-table .cell-sub {
    display: block;
    font-size: var(--text-caption1);
    color: var(--color-service-grey);
    margin-top: 2px;
}

@container (max-width: 1240px) {
    .reg-scope .btn { min-height: 44px; min-width: 44px; }
    .reg-scope .btn-sm { min-height: 44px; }
    .reg-scope .reg-link { min-height: 44px; display: inline-flex; align-items: center; }
}

.reg-mono { font-family: var(--clv-font-mono); font-size: var(--text-caption1); }

/* Status is quiet on the normal case and a badge only on the exception, so a queue that is mostly
   auto-confirmed does not read as a wall of pills. Wrapping lets the stale chip and the reviewer
   attribution drop to their own line instead of overflowing the cell. */
.reg-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    row-gap: 3px;
    font-size: var(--text-caption1);
    white-space: nowrap;
}

.reg-status .cell-sub { flex-basis: 100%; margin-top: 0; }
.reg-status-quiet { color: var(--color-service-grey); }
.reg-status-ok { color: var(--color-success); }

.reg-ico {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.reg-ico-md { width: 16px; height: 16px; }

/* Stale evidence sits beside a status it does not change, never as a column of its own: it is true
   on a small minority of rows, so a column would be more than 90% empty. */
.reg-stale {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: var(--radius-sm);
    padding: 1px 6px;
    /* Caption1 with an opaque ground. The tint token is a 10% alpha, so on a striped row the chip
       composited to 4.45:1 against its own text — under the 4.5 floor for small text. */
    font-size: var(--text-caption1);
    background: #FBF1EA;
    color: var(--color-warning);
    border: 1px solid var(--color-warning-tint-border);
    white-space: nowrap;
}

/* ---------- two-pane detail ---------- */

.reg-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.reg-card + .reg-card { margin-top: var(--space-5); }

.reg-card-head {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
}

.reg-card-title {
    font-family: var(--font-heading);
    font-size: var(--text-body);
    font-weight: var(--font-medium);
    color: var(--color-navy);
    line-height: 1.3;
    margin: 0;
}

.reg-card-body { padding: var(--space-4) var(--space-5); }
.reg-card-body.tight { padding: var(--space-3) var(--space-5); }

.reg-kv {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2) var(--space-5);
    font-size: var(--text-caption1);
    margin: 0;
}

.reg-kv dt { color: var(--color-service-grey); font-weight: var(--font-medium); }
.reg-kv dd { color: var(--color-navy); margin: 0; }

.reg-section-head {
    font-size: var(--text-caption1);
    font-weight: var(--font-medium);
    color: var(--color-service-grey);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin: var(--space-5) 0 var(--space-2);
}

.reg-section-head:first-child { margin-top: 0; }

/* ---------- banners ---------- */

.reg-banner {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-caption1);
    line-height: 1.5;
}

.reg-banner strong { font-weight: var(--font-medium); display: block; }
/* An inline link in a banner is underlined so it does not rely on colour, and tall enough to hit. */
.reg-banner a { color: inherit; font-weight: var(--font-medium); text-decoration: underline; text-underline-offset: 2px; display: inline-flex; align-items: center; min-height: 24px; }
.reg-banner-warn { background: var(--color-warning-tint); border: 1px solid var(--color-warning-tint-border); color: var(--color-warning); }
.reg-banner-error { background: var(--color-error-tint); border: 1px solid var(--color-error-tint-border); color: var(--color-error); }
.reg-banner-info { background: var(--color-info-tint); border: 1px solid var(--color-info-tint-border); color: var(--color-navy); }

/* ---------- empty, skeleton ---------- */

.reg-skeleton {
    height: 12px;
    display: block;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--color-surface) 0%, var(--color-border-light) 50%, var(--color-surface) 100%);
    background-size: 200% 100%;
    animation: reg-shimmer 1.4s linear infinite;
}

.reg-skeleton.alt { animation-delay: .2s; }

@keyframes reg-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .reg-skeleton { animation: none; }
}

/* ---------- misc ---------- */

.reg-link {
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    color: var(--color-text-link);
    text-decoration: none;
    font-size: inherit;
    cursor: pointer;
}

.reg-link:hover { color: var(--color-text-link-hover); text-decoration: underline; }

/* .reg-link inherits its size so it sits inside a table cell. Where it stands alone under body
   text it needs the caption size, or it reads as the heading of what follows. */
.reg-link-sm { font-size: var(--text-caption1); }
.reg-link:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

.reg-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.reg-hint { font-size: var(--text-caption1); color: var(--color-service-grey); }

.reg-field { display: grid; gap: var(--space-1); margin-bottom: var(--space-4); }
.reg-field label { font-size: var(--text-caption1); font-weight: var(--font-medium); color: var(--color-service-grey); }
.reg-field .reg-required { color: var(--color-error); font-weight: var(--font-regular); margin-left: var(--space-1); }

.reg-input,
.reg-textarea,
.reg-select {
    border: 1.5px solid var(--color-control-border);
    border-radius: var(--radius-md);
    padding: 0 var(--space-3);
    font-family: var(--font-primary);
    font-size: var(--text-subhead);
    color: var(--color-text-primary);
    background: var(--color-white);
    height: 44px; /* the 44px control height every toolbar select on the page uses */
    width: 100%;
}

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

.reg-picker {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    background: var(--color-white);
    overflow: hidden auto;
    max-height: 260px;
    margin-top: var(--space-1);
}

.reg-picker-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--space-2) var(--space-3);
    border: none;
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-white);
    font-size: var(--text-subhead);
    color: var(--color-navy);
    cursor: pointer;
}

.reg-picker-option:last-child { border-bottom: none; }
.reg-picker-option:hover, .reg-picker-option.selected { background: var(--clv-color-ice-blue); }
.reg-picker-option:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.reg-picker-option .cell-sub { display: block; font-size: var(--text-caption1); color: var(--color-service-grey); }

.reg-alias-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border-light);
}

.reg-alias-row:last-child { border-bottom: none; }
.reg-alias-text { font-size: var(--text-subhead); color: var(--color-navy); }

.reg-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- register and runs ---------- */

.reg-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.reg-field .reg-optional { color: var(--color-service-grey); font-weight: var(--font-regular); margin-left: var(--space-1); }

/* Retiring an alias changes what future runs match, so the confirmation states the
   consequence in place rather than relying on the button label. */
.reg-confirm {
    flex: 1 1 100%;
    padding: var(--space-3);
    border: 1px solid var(--color-warning-tint-border);
    border-radius: var(--radius-md);
    background: var(--color-warning-tint);
}

.reg-confirm p {
    margin: 0 0 var(--space-3);
    font-size: var(--text-caption1);
    color: var(--color-navy);
}

/* .cell-sub carries its caption styling from the table rules, so outside a table it needs
   its own. In a flex alias row it also has to be a block or it runs on from the alias text. */
.reg-alias-row .cell-sub {
    display: block;
    margin-top: 2px;
    font-size: var(--text-caption1);
    color: var(--color-service-grey);
}

/* ---------- button variants this module needs ---------- */

/* Tertiary: the quiet third option beside a primary and a secondary (clear filters, cancel a form).
   Text only, so it never competes with the one primary action on the view. */
.btn-tertiary {
    background: transparent;
    border: 1.5px solid transparent;
    /* The link token, not slate blue: at the small size on the expanded-row surface slate blue
       measures 4.37:1 and this one is the palette's rated pair for that surface. */
    color: var(--clv-color-text-link);
}

.btn-tertiary:hover { color: var(--color-text-link-hover); text-decoration: underline; }

/* Danger: navy fill with a slate border, never a red fill. Red is reserved for a state the system
   reports, not for a control a reviewer is about to press. The label carries the consequence. */
.btn-danger {
    background: var(--color-navy);
    color: var(--color-white);
    border: 2px solid var(--color-service-grey);
}

/* ---------- cited in (feature 088) ---------- */

/* A blank cell reads as missing data. A grey zero reads as measured and nothing to do. */
.reg-zero { color: var(--color-service-grey); }

/* ===== Feature 108: the two-screen regulatory section =================================
   Everything here is a feature modifier on shared chrome. The table, toolbar, search,
   facet, card, badges and empty states are the app's own classes; these rules only add
   what the coverage and manage surfaces need on top. */

/* The two page containers. They carry the section's own vertical rhythm and give each screen a
   stable hook for automation; .reg-scope stays the shared regulatory scope both sit inside. */
.reg-coverage > * + * { margin-top: 0; }
.reg-coverage .table-pagination { margin-top: var(--space-4); }

/* The shared detail wrapper is a two-column grid. Both regulatory surfaces stack their
   detail in one column so a long quote never has to share a row with a form, and so the
   detail holds up at the narrow bound. */
.reg-detail-stack { display: block; }
.reg-detail-stack > * + * { margin-top: var(--space-4); }

/* The shared accordion caps at 900px to animate. A regulation cited across several
   documents runs past that and would be clipped, so these detail rows opt out of the cap.
   The trade is the open/close transition, which is the right trade for evidence. */
.reg-scope .expandable-content.open { max-height: none; }

/* The coverage filter's pressed state. StatCard owns the card itself; only "this one is on"
   was missing, and it is a general affordance rather than a regulatory one. */
.stat-card.selected { border-color: var(--color-teal); box-shadow: 0 0 0 1px var(--color-teal); }
.stat-card.clickable:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* First-load skeleton, the shape of the loaded page: the evidence bar, then four rows. */
.reg-sk { display: grid; gap: var(--space-3); }
.reg-sk-bar { display: block; height: 72px; border-radius: var(--radius-lg); }
.reg-sk-row {
    display: grid; grid-template-columns: 45% 12% 27%; gap: var(--space-4);
    padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border-light);
}

/* Toolbar modifiers: the shared row plus a right-aligned count, which is the only thing
   these two surfaces need on top of .table-toolbar. */
.reg-cov-toolbar .filter-count { margin-left: auto; }
.reg-review-toolbar .filter-count { margin-left: auto; }

/* The register's pagination stacks at phone width. */
@media (max-width: 720px) {
    .table-pagination { align-items: flex-start; flex-direction: column; gap: var(--space-3); }
}

/* .page-header stacks by default; the single section action sits beside the title rather than
   under it, so the modifier turns the row back on. */
.page-header.reg-pagehead { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.reg-pagehead > :last-child { flex: none; }

/* One cited document and the mentions inside it. */
.reg-doc-block {
    background: var(--color-white); border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-3);
}
.reg-doc-head {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2);
    font-size: var(--text-subhead); font-weight: 500; margin-bottom: var(--space-3);
}
.reg-why { margin: 0; font-size: var(--text-caption1); color: var(--color-navy); line-height: 1.55; max-width: 80ch; }
.reg-why strong { font-weight: var(--font-medium); }
.reg-footline {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--space-3); border-top: 1px solid var(--color-border-light);
    padding-top: var(--space-3); font-size: var(--text-caption1); color: var(--color-service-grey);
}

/* The subject combobox: the repo's inline picker (.reg-input over a .reg-picker listbox), sized
   for a subject name rather than the toolbar's 360px search. */
.reg-subject-edit { display: grid; gap: var(--space-2); width: 320px; max-width: 100%; }
.reg-subject-edit .reg-picker { margin-top: 0; }

/* Not cited is an absence, On hold is a decision. Both were badge-pending, so the two read
   as the same state at a glance. The outlined pill says paused without adding a colour. */
.reg-scope .badge-hold {
    background: var(--color-surface);
    border: 1px solid var(--color-service-grey);
    color: var(--color-service-grey);
}

/* The shared caption row (ExpandableTable's GroupRow) inside a regulatory table. No regulatory
   surface pins one today; the subject headers below override it. */
.reg-scope .table-group-row td {
    padding: var(--space-3) var(--space-6);
    background: var(--color-warning-tint);
    border-bottom: 1px solid var(--color-border-light);
}

/* Coverage (feature 109): one collapsible header per subject, carrying its name and count. The
   no-subject group takes the warning tint because an administrator has a job there. */
.reg-scope .table-group-row.reg-grp td {
    padding: var(--space-2) var(--space-4);
    background: var(--color-ice-blue);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    font-weight: var(--font-medium);
    color: var(--color-navy);
    vertical-align: middle;
}
.reg-scope .table-group-row.reg-grp-nosub td { background: var(--color-warning-tint); border-color: var(--color-warning-tint-border); }
.reg-grp-name { font-size: var(--text-subhead); }
.reg-grp-n { margin-left: var(--space-2); font-size: var(--text-caption1); font-weight: var(--font-regular); color: var(--color-service-grey); }
/* Manage (feature 109). The back link sits above the page header, the one line about
   suggestions sits between the toolbar and the rows it would otherwise have been. */
.reg-back { display: inline-flex; align-items: center; min-height: 24px; margin-bottom: var(--space-3); padding-inline: 0; }

/* A scoped check in flight, in the status cell. The ring is the only moving thing on the page and
   it stops under reduced motion; the words carry the state on their own. */
.reg-busy {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-caption1); color: var(--color-navy); white-space: nowrap;
}
.reg-busy i {
    width: 12px; height: 12px; flex: none; border-radius: var(--radius-full);
    border: 2px solid var(--color-border); border-top-color: var(--color-blue);
    animation: reg-spin 1s linear infinite;
}
@keyframes reg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .reg-busy i { animation: none; } }
.reg-check-failed {
    display: inline-flex; align-items: center; gap: var(--space-1);
    font-size: var(--text-caption1); color: var(--color-error);
}
.reg-check-failed .reg-ico { stroke: var(--color-error); }

.reg-field .reg-subject-edit { width: 100%; }
/* The rekey message names the regulation that already owns the identity; it sits under the
   form it answers, the same place the stale-stamp banner sits. */
.reg-mng-identity-conflict { margin: 0 0 var(--space-3); font-size: var(--text-footnote); color: var(--color-error); }

.reg-addcard { margin-bottom: var(--space-5); }
.reg-alias-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border-light);
}
.reg-alias-row:last-of-type { border-bottom: none; }

/* ---------- UX pass on the two screens ---------- */

/* The default stat card is a 24px-padded marketing tile. These five sit above a dense
   review table, so they take the table's rhythm rather than pushing it below the fold: the
   deck's card is one figure at title3 with its label and caption tight against it, ~80px. */
.reg-coverage .stat-card { padding: var(--space-3) var(--space-4); }
.reg-coverage .stat-label { margin-bottom: 0; line-height: 1.35; }
.reg-coverage .stat-value { font-size: var(--text-title3); line-height: 1.1; }
.reg-coverage .stat-sub { margin-top: 0; line-height: 1.35; }

/* The shared search input is 36px; every other toolbar control here is 44px, as on
   /assignments (assignments.css sets the same override), and 44 is the tablet touch bound. */
.reg-scope .search-field input { height: 44px; }

/* ===== Feature 1624: one Regulations page =============================================
   Modifiers on the shared chrome for the register row, Review suggestions and the Archive.
   Every control on a toolbar is 44px, the tablet touch bound. */

/* The ⋯ menu on a register row: the review queue's kebab at the page's 44px touch bound, its items
   on one line each. */
.reg-scope .rq-kebab { width: 44px; height: 44px; }
.reg-scope .rq-kebab-menu { top: 48px; }
.reg-scope .rq-kebab-menu button { white-space: nowrap; text-align: left; }

/* The expanded register row: where it is cited on the left, details and history on the right. */
.reg-row-detail {
    display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-4) var(--space-8); align-items: start;
}
.reg-row-detail > * { min-width: 0; }
.reg-row-details { display: grid; gap: var(--space-3); align-content: start; }
.reg-row-cited { min-width: 0; }
@container (max-width: 1100px) { .reg-row-detail { grid-template-columns: minmax(0, 1fr); } }
.reg-details-head, .reg-head-actions, .reg-editor-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap;
}
.reg-status-marker { margin-left: var(--space-2); }
.reg-editor { display: grid; gap: var(--space-3); }
.reg-field-wide { grid-column: 1 / -1; }
.reg-history { list-style: none; margin: 0; padding: 0; }
.reg-history-line {
    padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border-light);
    font-size: var(--text-caption1); color: var(--color-navy);
}
.reg-history-line:last-child { border-bottom: none; }
.reg-history .cell-sub { padding-left: var(--space-4); }

/* Review suggestions: the list toggle, the selection bar and the suggestion cards. */
.reg-review-lists { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.reg-scope .filter-chip {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4);
    border: 1px solid var(--color-border); border-radius: var(--radius-full);
    background: var(--color-white); color: var(--color-service-grey); font-size: var(--text-caption1);
    cursor: pointer; text-decoration: none;
}
.reg-scope .filter-chip:hover { border-color: var(--color-blue); color: var(--color-navy); }
.reg-scope .filter-chip.active { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-white); }
.reg-scope .table-toolbar .filter-select, .reg-scope .reg-actions .btn { min-height: 44px; }
.reg-selection-bar {
    position: sticky; top: var(--topbar-height); z-index: 2; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
    padding: var(--space-2) var(--space-4); margin-bottom: var(--space-3);
    background: var(--color-surface); border: 1px solid var(--color-border-light); border-radius: var(--radius-md);
    font-size: var(--text-caption1); color: var(--color-navy);
}
.reg-sugg-group { margin-bottom: var(--space-6); }
.reg-sugg-group-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.reg-sugg-group-head h3 { margin: 0; font-size: var(--text-subhead); font-weight: var(--font-medium); color: var(--color-navy); }
.reg-sugg-card {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-2);
    padding: var(--space-4); margin-bottom: var(--space-3);
    background: var(--color-white); border: 1px solid var(--color-border-light); border-radius: var(--radius-md);
}
.reg-sugg-card.selected { border-color: var(--color-teal); box-shadow: 0 0 0 1px var(--color-teal); }
.reg-variants { border-style: dashed; }
.reg-sugg-check { width: 24px; height: 24px; margin: var(--space-1) auto 0; color: var(--color-navy); accent-color: var(--color-blue); cursor: pointer; }
.reg-sugg-check:disabled { cursor: not-allowed; }
.reg-sugg-body { display: grid; gap: var(--space-3); min-width: 0; }
.reg-sugg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.reg-sugg-ai { margin: 0; font-size: var(--text-caption1); color: var(--color-navy); }
.reg-sugg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); }
@container (max-width: 760px) { .reg-sugg-grid { grid-template-columns: minmax(0, 1fr); } }
.reg-sugg-quote { display: grid; gap: var(--space-1); }
.reg-sugg-form { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px dashed var(--color-border-light); }
.reg-kept { display: grid; gap: var(--space-2); }
.reg-kept-row, .reg-choice-row {
    display: flex; align-items: center; gap: var(--space-2); min-height: 44px;
    font-size: var(--text-caption1); color: var(--color-navy); cursor: pointer;
}
.reg-choice { margin: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); }
.reg-choice legend { padding: 0 var(--space-1); font-size: var(--text-caption1); color: var(--color-navy); }
.reg-reject { display: inline-flex; align-items: center; gap: var(--space-1); }
.reg-reject-more { min-width: 44px; min-height: 44px; }
.reg-reject-note { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.reg-reject-note .reg-input { min-height: 44px; min-width: 240px; }

/* Review selected: one row per regulation that will be written. */
.reg-preview-modal { width: min(920px, 96vw); }
.reg-preview-body { gap: var(--space-4); }
.reg-preview-row { display: grid; gap: var(--space-2); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border-light); }
.reg-preview-row:last-of-type { border-bottom: none; }
.reg-preview-row-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.reg-preview-row-head .btn { margin-left: auto; }

/* The two other views of the page. */
.reg-review, .reg-archive { min-width: 0; }
.reg-archive > .reg-banner { margin-bottom: var(--space-4); }
.reg-archive .reg-nowrap { white-space: nowrap; }
.reg-archive td[data-label="Actions"] .btn { width: 100%; }

/* ===== Feature 1624, round 2: a quieter register =====================================
   The sync line, the evidence bar and the register's numeric columns. The bar is the home page's
   shared stacked track (.status-bar-track, .status-bar-segment, .dot), so its colours are the app's. */
.reg-sync-wrap { display: inline-flex; align-items: center; gap: var(--space-3); }
.reg-sync { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-footnote); color: var(--color-service-grey); }
.reg-sync.ok .reg-ico { width: 16px; height: 16px; stroke: var(--color-success); }
.reg-sync.warn { color: var(--badge-attention-text); font-weight: var(--font-medium); }

.reg-evidence {
    display: grid; gap: var(--space-3); margin-bottom: var(--space-5); padding: var(--space-4) var(--space-5);
    background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
}
.reg-evidence-counts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); }
.reg-evidence-count {
    display: inline-flex; align-items: baseline; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-2);
    border: 1px solid transparent; border-radius: var(--radius-md); background: none; cursor: pointer;
    font: inherit; font-size: var(--text-subhead); color: var(--color-navy);
}
.reg-evidence-count strong { font-size: var(--text-title3); font-weight: var(--font-medium); }
.reg-evidence-count .dot { align-self: center; }
.reg-evidence-count:hover { background: var(--color-surface); }
.reg-evidence-count.selected { border-color: var(--color-navy); background: var(--color-surface); }
.reg-evidence-count:focus-visible, .reg-evidence-x:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.reg-evidence-x { height: 44px; }
.reg-evidence-counts .reg-evidence-x:first-of-type { margin-left: auto; }

.reg-scope .data-table .reg-num { text-align: right; font-variant-numeric: tabular-nums; }
.reg-id { margin-left: var(--space-2); color: var(--color-service-grey); }
.reg-waiting { font-size: var(--text-footnote); color: var(--badge-attention-text); }
.reg-confirm-link {
    display: inline-flex; align-items: center; min-height: 24px; font-size: var(--text-footnote);
    font-weight: var(--font-medium); color: var(--color-text-link); text-decoration: underline; text-underline-offset: 2px;
}
.reg-doc-count { margin-left: auto; font-size: var(--text-caption1); font-weight: var(--font-regular); color: var(--color-service-grey); }
/* The row ⋯ repeats down the register, so it is quiet until hovered or focused. */
.reg-scope .data-table td .rq-kebab { border-color: transparent; }
.reg-scope .data-table td .rq-kebab:hover, .reg-scope .data-table td .rq-kebab[aria-expanded="true"] { border-color: var(--color-control-border); }

/* Official legislation check and record. The warning hue stays on the banner surface; text uses body colour for contrast. */
.reg-official-check { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.reg-official-check .reg-banner-warn { color: var(--color-text-primary); }
.reg-official-run { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
.reg-official-checked { display: block; white-space: nowrap; }
.reg-official-record .reg-actions { margin-block: var(--space-3); }
.reg-official-record .reg-hint a { text-decoration: underline; }
.reg-official-attribution { margin-top: var(--space-4); }