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