/* 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;
    color: var(--color-blue);
}

.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. */
.reg-estate {
    display: flex; align-items: center; gap: var(--space-2);
    margin: 0 0 var(--space-5); font-size: var(--text-caption); color: var(--color-service-grey);
}
.reg-estate .reg-ico { stroke: var(--color-success); flex: none; }
.reg-estate.warn .reg-ico { stroke: var(--color-warning); }

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

/* .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: 62ch; }
.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-mention + .reg-mention { margin-top: var(--space-3); }
/* A pending mention carries a rule, not a fill: it has to read as "this one needs you"
   in a stack of settled quotes without turning the block into a warning panel. */
.reg-mention.pending .reg-quote { border-left: 2px solid var(--color-warning); }
.reg-quote mark {
    background: rgba(251, 191, 36, .34); border-bottom: 2px solid var(--color-warning);
    padding: 1px 0; color: inherit;
}
.reg-src {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4);
    margin: var(--space-2) 0 0; font-size: var(--text-caption); color: var(--color-service-grey);
}
.reg-why {
    margin: var(--space-2) 0 0; font-size: var(--text-caption);
    color: var(--color-service-grey); line-height: 1.55; max-width: 70ch;
}
.reg-reassign {
    margin-top: var(--space-3); max-width: 460px;
    padding: var(--space-3); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); background: var(--color-surface);
}
.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-caption); color: var(--color-service-grey);
}
.reg-cov-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }

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

/* Manage: suggestions are pinned above the known rows rather than given a screen. The
   group line and the left rule are what make that a section instead of odd rows. */
.reg-scope .table-group-row td {
    padding: var(--space-3) var(--space-6);
    background: var(--color-warning-surface);
    border-bottom: 1px solid var(--color-border-light);
}
.reg-groupline {
    margin: 0;
    font-size: var(--text-caption); font-weight: 500; letter-spacing: .06em;
    text-transform: uppercase; color: var(--color-warning);
}

/* The rule marks the row, so it belongs on the first cell only. On every cell it drew a
   vertical warning line at each column boundary. The tint carries the row across the width. */
.reg-scope .data-table tbody tr.reg-row-suggested > td { background: var(--color-warning-surface); }
.reg-row-suggested > td:first-child { box-shadow: inset 2px 0 0 var(--color-warning); }
.reg-row-unresolved > td { box-shadow: inset 2px 0 0 var(--color-service-grey); }

/* The state bar. It replaces the processing-history screen, so it has to carry a failure
   as clearly as it carries "up to date". */
.reg-runbar {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-3) var(--space-5); margin-bottom: var(--space-5);
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    background: var(--color-white);
}
.reg-runbar-text { display: grid; gap: 2px; margin-right: auto; min-width: 0; }
.reg-runbar-text strong { font-size: var(--text-subhead); font-weight: 500; }
.reg-runbar-text span { font-size: var(--text-caption); color: var(--color-service-grey); }
.reg-runbar-ok { border-left: 3px solid var(--color-success); }
.reg-runbar-warn { border-left: 3px solid var(--color-warning); }
.reg-runbar-error { border-left: 3px solid 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 four sit above a dense
   review table, so they take the table's rhythm rather than pushing it below the fold. */
.reg-coverage .stat-card { padding: var(--space-4) var(--space-5); }

/* The known-regulation panel is a form, not a table. Left unbounded it stretched its
   fields and its alias rows the full width of a 1920 viewport, so the Retire control sat
   half a screen from the term it retires. The cap goes on the content, not the panel, so
   the panel's own background still spans the table. */
.reg-manage .reg-detail-stack > * { max-width: 760px; }