/* 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.

   Two rules are container queries on .reg-scope rather than viewport media queries, because a narrow
   window on a wide monitor must get the narrow layout:
     - under 1600px of surface the queue folds Page and Section into their neighbours' sub-lines
     - under 1240px of surface every control grows to the 44x44 touch bound */

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

/* ---------- responsive column tiers ---------- */

.reg-table { table-layout: fixed; }
.reg-table td { overflow-wrap: anywhere; vertical-align: top; }
.reg-table .c-page, .reg-table .c-sect, .reg-table .c-norm, .reg-table .c-seen,
.reg-table .c-year, .reg-table .c-origin, .reg-table .c-kind,
.reg-table .c-dur, .reg-table .c-chunks,
.reg-table .c-asset, .reg-table .c-rev { display: none; }

.reg-table .qcol-doc { width: 25%; }
.reg-table .qcol-men { width: 23%; }
.reg-table .qcol-res { width: 25%; }
.reg-table .qcol-stat { width: 19%; }
.reg-table .qcol-pageonly { width: 8%; }

.reg-table .mcol-mark { width: 5%; }
.reg-table .mcol-text { width: 25%; }
.reg-table .mcol-rule { width: 13%; }
.reg-table .mcol-inst { width: 45%; }
.reg-table .mcol-span { width: 12%; }

.reg-table .icol-title { width: 46%; }
.reg-table .icol-kind { width: 18%; }
.reg-table .icol-alias { width: 12%; }
.reg-table .icol-status { width: 24%; }

/* Cited in (feature 088). Asset and revision fold into the document cell below 1600px of surface
   rather than disappearing: nothing needed to identify a document is dropped. */
.reg-table .dcol-doc { width: 52%; }
.reg-table .dcol-conf { width: 14%; }
.reg-table .dcol-att { width: 18%; }
.reg-table .dcol-pages { width: 16%; }

.reg-table .rcol-run { width: 9%; }
.reg-table .rcol-scope { width: 17%; }
.reg-table .rcol-requested { width: 17%; }
.reg-table .rcol-cand { width: 12%; }
.reg-table .rcol-targets { width: 26%; }
.reg-table .rcol-status { width: 19%; }

/* ---------- 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;
}

.reg-table .cell-sub.fold-inline { display: inline; margin-top: 0; }

@container (min-width: 1600px) {
    .reg-table .c-page, .reg-table .c-sect, .reg-table .c-norm, .reg-table .c-seen,
    .reg-table .c-year, .reg-table .c-origin, .reg-table .c-kind,
    .reg-table .c-dur, .reg-table .c-chunks,
    .reg-table .c-asset, .reg-table .c-rev { display: table-cell; }

    /* Hidden with the same specificity that shows .cell-sub, or the promoted value prints twice. */
    .reg-table .cell-sub.fold-inline, .reg-table .cell-sub.fold-block { display: none; }

    .reg-table .qcol-doc { width: 18%; }
    .reg-table .c-page { width: 4%; }
    .reg-table .c-sect { width: 20%; }
    .reg-table .qcol-men { width: 17%; }
    .reg-table .qcol-res { width: 26%; }
    .reg-table .qcol-stat { width: 15%; }
    .reg-table .qcol-pageonly { width: 5%; }

    .reg-table .mcol-mark { width: 3%; }
    .reg-table .mcol-text { width: 17%; }
    .reg-table .mcol-rule { width: 10%; }
    .reg-table .mcol-inst { width: 32%; }
    .reg-table .c-norm { width: 16%; }
    .reg-table .mcol-span { width: 8%; }
    .reg-table .c-seen { width: 14%; }

    .reg-table .icol-title { width: 36%; }
    .reg-table .icol-kind { width: 14%; }
    .reg-table .c-year { width: 7%; }
    .reg-table .c-origin { width: 13%; }
    .reg-table .icol-alias { width: 9%; }
    .reg-table .icol-status { width: 21%; }

    .reg-table .dcol-doc { width: 40%; }
    .reg-table .c-asset { width: 13%; }
    .reg-table .c-rev { width: 5%; }
    .reg-table .dcol-conf { width: 10%; }
    .reg-table .dcol-att { width: 15%; }
    .reg-table .dcol-pages { width: 17%; }

    .reg-table .rcol-run { width: 7%; }
    .reg-table .rcol-scope { width: 12%; }
    .reg-table .rcol-requested { width: 12%; }
    .reg-table .c-dur { width: 8%; }
    .reg-table .c-chunks { width: 9%; }
    .reg-table .rcol-cand { width: 10%; }
    .reg-table .rcol-targets { width: 26%; }
    .reg-table .rcol-status { width: 16%; }
}

@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-clamp2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.reg-trunc {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.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-pane {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: var(--space-6);
    align-items: start;
}

.reg-pane > .reg-pane-side { position: sticky; top: var(--space-4); }

@container (max-width: 1100px) {
    .reg-pane { grid-template-columns: minmax(0, 1fr); }
    .reg-pane > .reg-pane-side { position: static; }
}

.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-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-5);
    font-size: var(--text-caption1);
    color: var(--color-service-grey);
}

.reg-meta strong { font-weight: var(--font-medium); color: var(--color-navy); }

.reg-label {
    font-size: var(--text-caption1);
    font-weight: var(--font-medium);
    color: var(--color-service-grey);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: var(--space-1);
}

.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-kv.two-up { grid-template-columns: auto 1fr auto 1fr; }

.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; }

/* ---------- evidence ---------- */

.reg-context {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    font-size: var(--text-body);
    line-height: 1.7;
    color: var(--color-navy);
    margin: 0;
}

/* The Source Viewer gold, deliberately not a slate tint, so a cited passage never reads as a link. */
.reg-citation-span {
    background: color-mix(in srgb, var(--clv-color-warning) 28%, transparent);
    border-bottom: 2px solid var(--color-warning);
    padding: 1px 0;
}

.reg-legend {
    display: flex;
    gap: var(--space-5);
    flex-wrap: wrap;
    font-size: var(--text-caption1);
    color: var(--color-service-grey);
    margin-top: var(--space-2);
}

.reg-legend span { display: inline-flex; align-items: center; gap: 6px; }
.reg-swatch { width: 14px; height: 10px; border-radius: 2px; display: inline-block; flex: 0 0 auto; }

.reg-swatch-citation {
    background: color-mix(in srgb, var(--clv-color-warning) 28%, transparent);
    border-bottom: 2px solid var(--color-warning);
}

.reg-swatch-match { background: var(--color-blue); opacity: .65; }

/* A match on a different instrument is separated by pattern, not hue, so it cannot be confused with
   the amber that means "needs attention" everywhere else. */
.reg-swatch-other {
    background: repeating-linear-gradient(135deg, var(--color-blue) 0 4px, var(--clv-color-deep-navy) 4px 8px);
}

/* The match spans at their real offsets within the citation span. Drawing only the union would tell
   the reviewer the evidence is one thing when it is several. */
.reg-ruler {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    margin-top: var(--space-2);
}

.reg-ruler-row { position: relative; height: 16px; margin-bottom: 2px; }
.reg-ruler-row:last-child { margin-bottom: 0; }

.reg-ruler-bar {
    position: absolute;
    height: 16px;
    border-radius: var(--radius-sm);
    background: var(--color-blue);
    opacity: .65;
}

.reg-ruler-bar.other {
    background: repeating-linear-gradient(135deg, var(--color-blue) 0 5px, var(--clv-color-deep-navy) 5px 10px);
    opacity: .8;
}

.reg-ruler-label {
    position: absolute;
    font-size: var(--text-caption2);
    font-family: var(--clv-font-mono);
    color: var(--color-white);
    line-height: 16px;
    padding-left: 6px;
    white-space: nowrap;
    pointer-events: none;
}

.reg-marker { font-family: var(--clv-font-mono); font-size: var(--text-caption1); color: var(--color-blue); }
.reg-marker.other { color: var(--clv-color-deep-navy); }

/* ---------- decision history ---------- */

.reg-trail { list-style: none; position: relative; padding-left: var(--space-5); margin: 0; }

.reg-trail::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--color-border);
}

.reg-trail li {
    position: relative;
    padding-bottom: var(--space-4);
    font-size: var(--text-caption1);
    color: var(--color-service-grey);
}

.reg-trail li:last-child { padding-bottom: 0; }

.reg-trail li::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--space-5) + 1px);
    top: 4px;
    width: 9px;
    height: 9px;
    border-radius: var(--radius-full);
    background: var(--color-white);
    border: 2px solid var(--color-border);
}

.reg-trail li.latest::before { border-color: var(--color-blue); background: var(--color-blue); }

.reg-trail .reg-event {
    font-size: var(--text-subhead);
    font-weight: var(--font-medium);
    color: var(--color-navy);
    display: block;
}

.reg-trail .reg-event-value { color: var(--color-navy); font-weight: var(--font-regular); }

/* ---------- 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; }
.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); }
.reg-banner-success { background: var(--color-success-tint); border: 1px solid var(--color-success-tint-border); color: var(--color-success); }

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

.reg-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-12) var(--space-4);
    text-align: center;
}

.reg-empty-title { font-size: var(--text-subhead); color: var(--color-service-grey); }
.reg-empty-body { font-size: var(--text-caption1); color: var(--color-service-grey); max-width: 340px; }

.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: 36px;
    width: 100%;
}

.reg-textarea { height: auto; min-height: 64px; padding: var(--space-2) var(--space-3); resize: vertical; }

.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-progress { height: 6px; border-radius: var(--radius-full); background: var(--color-surface); overflow: hidden; min-width: 120px; flex: 1 1 240px; }
.reg-progress > i { display: block; height: 100%; border-radius: var(--radius-full); background: var(--color-blue); }

.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-list { border: 1px solid var(--color-border-light); border-radius: var(--radius-md); overflow: hidden; }
.reg-alias-list.retired { color: var(--color-service-grey); }
.reg-alias-text { font-size: var(--text-subhead); color: var(--color-navy); }
.reg-alias-list.retired .reg-alias-text { color: var(--color-service-grey); }

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

/* Applied-filter chip. The remove control keeps a 24x24 hit box while the chip stays 26px tall, so
   the row of chips does not cost a table row at the 11 inch bound. */
.reg-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: 3px 10px;
    font-size: var(--text-caption1);
    color: var(--color-navy);
    white-space: nowrap;
}

.reg-chip .reg-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: -6px -8px -6px 0;
    color: var(--color-service-grey);
    font-size: var(--text-body);
    line-height: 1;
}

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

/* Grid children default to min-content width, which lets a wide table push the
   sticky side panel off the layout instead of scrolling inside its own container. */
.reg-pane > .reg-pane-main { min-width: 0; }

.reg-table tr.reg-row-selected > td { background: var(--color-info-tint); }

.reg-pager {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.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);
}

.reg-hidden { display: none; }

/* .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) ---------- */

.reg-crumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-caption1);
    color: var(--color-service-grey);
    margin-bottom: var(--space-3);
}

.reg-crumb-current { color: var(--color-navy); font-weight: var(--font-medium); }

.reg-pg-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

/* The action must not be squeezed to a two-line stub by a long instrument title, which is the
   normal case here: statutory instrument titles run past 90 characters. */
.reg-pg-action { flex: 0 0 auto; }

/* One line, three numbers and the scan date. It sits above the table because a count a reviewer
   cannot trust is worse than no count, and the qualifier has to arrive before the rows do. */
.reg-sumline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-5);
    padding: var(--space-3) 0;
    margin-bottom: var(--space-3);
    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
    font-size: var(--text-caption1);
    color: var(--color-text-secondary);
}

.reg-sumline b { color: var(--color-navy); font-weight: var(--font-medium); font-size: var(--text-subhead); }
.reg-sumline-quiet { color: var(--color-service-grey); margin-left: auto; }

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

/* The document number and title are one link but two things. Razor collapses the whitespace
   between the spans, so the gap is a margin rather than a space in the markup. */
.reg-doc-title { margin-left: var(--space-2); }
.reg-stale-line { display: block; margin-top: 4px; }
/* A document number is an identifier; breaking it across two lines makes it unquotable. */
.reg-table .dcol-doc .reg-mono { white-space: nowrap; }

/* ===== 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 > * + *,
.reg-manage > * + * { margin-top: 0; }
.reg-coverage .table-pagination,
.reg-manage .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); }
.reg-cov-of { font-size: var(--text-subhead); color: var(--color-service-grey); }

/* The estate line. It is the only place a reader now learns that part of the corpus was
   never checked, so it sits directly under the counts it qualifies. The lead clause takes the
   tick's colour so the state reads in words as well as in the glyph. */
.reg-estate {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2);
    margin: 0 0 var(--space-5); font-size: var(--text-footnote); color: var(--color-service-grey);
}
.reg-estate .reg-ico { stroke: var(--color-success); flex: none; }
.reg-estate.warn .reg-ico { stroke: var(--color-warning); }
.reg-estate-lead { font-weight: var(--font-medium); color: var(--color-success); }
.reg-estate.warn .reg-estate-lead { color: var(--color-warning); }
.reg-estate a { color: var(--color-text-link); }

/* First-load skeleton, the shape of the loaded page: five cards, the estate line, four rows. */
.reg-sk { display: grid; gap: var(--space-3); }
.reg-sk-cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-6); margin-bottom: var(--space-3);
}
.reg-sk-cards span {
    display: block; height: 72px; border-radius: var(--radius-lg);
    background: var(--color-surface); border: 1px solid var(--color-border-light);
}
.reg-sk-line { width: 38%; }
.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,
.reg-manage-toolbar .filter-count { margin-left: auto; }

/* Findings (issue 827). The queue stays a table so a reviewer can compare candidates, evidence and
   decisions across a page. The existing table, toolbar, button, banner, quote and form primitives
   supply the chrome; these rules only set the findings-specific column rhythm and state copy. */
.reg-findings { min-width: 0; }
.reg-findings-intro {
    display: flex; align-items: flex-start; justify-content: flex-start; gap: var(--space-6);
    flex-wrap: wrap; margin-bottom: var(--space-4);
}
.reg-findings-intro > div:first-child { display: grid; gap: var(--space-1); min-width: 0; }
.reg-findings-intro strong { color: var(--color-navy); font-weight: var(--font-medium); }
.reg-findings-intro span { color: var(--color-service-grey); font-size: var(--text-caption1); }
.reg-findings-filter { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.reg-findings-filter label { color: var(--color-service-grey); font-size: var(--text-caption1); }
.reg-findings-filter .filter-select { min-width: 260px; max-width: min(520px, 100%); }
.reg-findings-table-wrap { min-width: 0; }
.reg-findings-toolbar { align-items: center; }
.reg-findings-toolbar .btn-sm { min-height: 44px; }
.reg-findings-toolbar .filter-count { margin-left: auto; }
.reg-findings-select-all { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; color: var(--color-service-grey); font-size: var(--text-caption1); cursor: pointer; }
.reg-findings-refresh { padding: var(--space-2) var(--space-6); color: var(--color-service-grey); font-size: var(--text-caption1); border-bottom: 1px solid var(--color-border-light); }
.reg-findings-empty { padding: 0 var(--space-4); }
.findings-table { min-width: 980px; table-layout: fixed; }
.findings-table th:nth-child(1), .findings-table td:nth-child(1) { width: 46px; }
.findings-table th:nth-child(2) { width: 22%; }
.findings-table th:nth-child(3) { width: 40%; }
.findings-table th:nth-child(4) { width: 13%; }
.findings-table th:nth-child(5) { width: 19%; }
.findings-table td { overflow-wrap: anywhere; vertical-align: top; }
.finding-title { display: block; color: var(--color-navy); font-weight: var(--font-medium); overflow-wrap: anywhere; }
.finding-evidence { min-width: 0; }
.finding-evidence .reg-quote, .finding-evidence .reg-quote-link { font-size: var(--text-subhead); line-height: 1.5; }
.finding-source-meta { display: flex; gap: var(--space-1) var(--space-2); flex-wrap: wrap; margin-top: var(--space-1); color: var(--color-service-grey); font-size: var(--text-caption1); }
.finding-source-meta > span { white-space: nowrap; }
.finding-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.finding-form-row td { background: var(--color-surface); border-top: 1px dashed var(--color-border-light); }
.reg-findings-form { max-width: 840px; }
.reg-findings-form .reg-input { min-height: 44px; }
.reg-findings-form .reg-field-row { max-width: 840px; }
.table-pagination-actions { display: flex; align-items: center; gap: var(--space-2); }
@container (max-width: 1240px) {
    .finding-actions { align-items: stretch; }
    .finding-actions { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) {
    .reg-findings-filter { width: 100%; }
    .reg-findings-filter .filter-select { flex: 1; min-width: 180px; }
    .reg-findings-toolbar .filter-count { margin-left: 0; }
    .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: flex-start; justify-content: space-between; gap: var(--space-6); }
.reg-pagehead .page-subtitle { max-width: none; }
.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-quote { margin: 0; }
.reg-quote mark, .reg-quote-link mark {
    background: var(--color-warning-tint); border-bottom: 2px solid var(--color-warning);
    padding: 1px 0; color: inherit;
}

/* One mention: the quote is the doorway to the source viewer, on the assignment table's quote-link
   pattern (pointer, hover underline, a small document icon that brightens). Page and section sit
   at the right; a pending mention adds a full-width strip with the rationale and the decision. */
.reg-quote-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4);
    align-items: start; padding: var(--space-2) 0;
}
.reg-quote-row + .reg-quote-row { border-top: 1px solid var(--color-border-light); }
.reg-quote-link {
    display: block; cursor: pointer; line-height: 1.5; font-size: var(--text-subhead); color: var(--color-navy);
    overflow-wrap: anywhere;
    min-height: 24px; padding: var(--space-1) 0; /* the whole passage is the source-opening target */
}
.reg-quote-link:hover { color: var(--color-text-link-hover); text-decoration: underline; text-underline-offset: 3px; }
.reg-quote-link:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }
.reg-quote-ico {
    width: 13px; height: 13px; margin-left: var(--space-1); vertical-align: -1px;
    color: var(--color-service-grey); opacity: .55; transition: opacity var(--duration-fast);
}
.reg-quote-link:hover .reg-quote-ico, .reg-quote-link:focus-visible .reg-quote-ico { opacity: 1; color: var(--color-text-link-hover); }
.reg-quote-src {
    font-size: var(--text-caption1); color: var(--color-service-grey);
    white-space: nowrap; text-align: right;
}
.reg-quote-src b { display: block; font-weight: var(--font-regular); color: var(--color-navy); }
.reg-quote-src .reg-status { white-space: normal; justify-content: flex-end; margin-top: var(--space-1); }
.reg-quote-pend {
    grid-column: 1 / -1; background: var(--color-surface);
    border-left: 3px solid var(--color-warning); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: var(--space-2) var(--space-3);
}
.reg-quote-pend .reg-actions { margin-top: var(--space-2); }
.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);
}
.reg-cov-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-8); }
.reg-cov-meta > div { min-width: 0; }
.reg-cov-meta dd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); font-size: var(--text-subhead); }
.reg-inline-edit { margin-left: var(--space-1); }

/* 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; }

/* Covered is the normal case: a tick and a word, no badge. */
.reg-cov-ok { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-success); white-space: nowrap; }
.reg-cov-ok .reg-ico { width: 14px; height: 14px; stroke-width: 2; }

/* 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 dashed edge says paused without adding a colour. */
.reg-scope .badge-hold {
    background: var(--color-surface);
    border: 1px dashed 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. The header carries the count and
   the exceptions beneath it, so a collapsed subject still says whether it needs work. 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); }
.reg-grp-x { float: right; display: inline-flex; gap: var(--space-3); font-size: var(--text-caption1); font-weight: var(--font-regular); }
.reg-grp-pending, .reg-grp-old { color: var(--color-warning); }
.reg-grp-notcited { color: var(--color-error); }
/* 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); }
.reg-suggest-line {
    margin: 0; padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
    font-size: var(--text-caption1); color: var(--color-service-grey);
}
.reg-suggest-line a { color: var(--color-text-link); }

/* 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); }

/* The expanded row: details on the left, terms on the right, one column at the narrow bound.
   Capped so two 1100px columns of form fields never appear at 2560. */
.reg-mng-two {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4) var(--space-8); align-items: start; max-width: 1200px;
}
.reg-mng-two > * { min-width: 0; }
@container (max-width: 1100px) { .reg-mng-two { grid-template-columns: minmax(0, 1fr); } }
.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; }

/* Manage's suggestion caption row is gone (suggestions live on Import); the shared
   group-row tint below it is now only the subject header's fallback. */
.reg-manage .reg-footline { max-width: 1200px; }