/* ==================================================================
   all-files.css - All Files browse, the Applicant File shell and its
   Application destination.

   Canon: docs/design-references/all-files-prototype-review/project/
          handoff/all-files/all-files.css, lifted verbatim. Two changes at
          lift, both the bundle's own instructions: the container queries
          are media queries (plus the 232px sidenav), and the pill tone
          `is-muted` moved into threshold-chrome.css. Rules the bundle does
          not draw but this surface still needs are in the carry-over
          section at the end, kept apart so the lifted part stays diffable
          against the canon file.

   Loads AFTER threshold-tokens.css, threshold-chrome.css (.cc-pill,
   .cc-btn) and th-grid.css. The browse composes the shared tabular
   canon and adds only what the canon has no component for: the views
   rail, the option-menu filter chips, the freshness strip's notices
   and the file shell. Every th-grid-* class here is CONSUMED from
   th-grid.css, never redeclared.

   TOKENS: no `--token:` declaration appears in this file (ADR-0035).
   Every colour resolves through --th-*; the only literals are sizes
   and two drop shadows (oklch with alpha, no hex). Dark is declared
   beside the light rule it retunes, at the end of each block, never
   as a separate file.

   ------------------------------------------------------------------
   Token mapping - prototype variable -> --th-* token (light / dark
   values are identical to threshold-tokens.css; nothing here pins a
   colour of its own).

     --paper       -> --th-paper         98.8% 0.002 250 / 16% 0.010 60
     --paper2      -> --th-paper-2       96.5% 0.003 250 / 20% 0.011 60
     --paper3      -> --th-paper-3       94.2% 0.004 250 / 13% 0.009 60
     --sunk        -> --th-paper-sunk    99.6% 0.001 250 / 22% 0.012 60
     --ink         -> --th-ink           19% 0.018 255   / 94% 0.010 75
     --ink2        -> --th-ink-2         38% 0.015 255   / 72% 0.010 75
     --ink3        -> --th-ink-3         56% 0.012 255   / 54% 0.011 75
     --ink4        -> --th-ink-4         72% 0.008 255   / 40% 0.011 75
     --line        -> --th-line          91% 0.005 250   / 28% 0.012 60
     --line2       -> --th-line-2        85.5% 0.007 250 / 36% 0.013 60
     --lineSoft    -> --th-line-soft     94.5% 0.004 250 / 22% 0.011 60
     --advant      -> --th-advant        54% 0.16 245    / 70% 0.13 245
     --advantDeep  -> --th-advant-deep   34% 0.13 250    / 78% 0.10 245
     --advantSoft  -> --th-advant-soft   94% 0.04 245    / 28% 0.06 245
     --advantFg    -> --th-advant-fg     99% 0.005 245   / 14% 0.010 60
     --mar         -> --th-marigold      62% 0.14 55     / 70% 0.14 55
     --marDeep     -> --th-marigold-deep 45% 0.13 50     / 76% 0.12 50
     --marSoft     -> --th-marigold-soft 95% 0.03 60     / 26% 0.05 55
                   (marigold rows mapped only; no rule in this file
                    consumes them - ADR-0035's copper inventory is closed)
     --bind        -> --th-xr-bind       38% 0.10 25     / 58% 0.14 25
     --ok          -> --th-ok            56% 0.10 155    / 70% 0.13 155
     --okSoft      -> --th-ok-soft       95% 0.03 155    / 24% 0.04 155
     --okInk       -> --th-ok-ink        38% 0.10 155    / 82% 0.12 155
     --warn        -> --th-warn          68% 0.12 75     / 76% 0.13 75
     --warnSoft    -> --th-warn-soft     95% 0.04 80     / 26% 0.05 75
     --warnInk     -> --th-warn-ink      42% 0.13 65     / 84% 0.12 75
     --risk        -> --th-risk          56% 0.14 25     / 70% 0.15 25
     --riskSoft    -> --th-risk-soft     95% 0.035 30    / 26% 0.06 25
     --riskInk     -> --th-risk-ink      40% 0.14 25     / 82% 0.13 25
     --ruleAcc     -> --th-rule          52% 0.17 300    / 72% 0.14 300
     --ruleSoft    -> --th-rule-soft     94% 0.04 300    / 26% 0.06 300
     --sans        -> --th-font-sans
     --serif       -> --th-font-serif
     --mono        -> --th-font-mono
     13.5px / 12.5px / 11.5px / 14.5px / 16px / 23px
                   -> --th-size-14 / -13 / -12 / -15 / -17 / -24
     11px, 10.5px, 10px  -> literal (no token exists; matches th-grid.css)
     radius 2/3/5/999    -> --th-radius-2 / -3 / -5 / -pill; 4px literal
   ================================================================== */

/* ------------------------------------------------------------------
   Chrome amendments. The bundle proposes these for threshold-chrome.css;
   `.cc-pill.is-muted` has moved there. The nowrap rules stay here and are
   scoped to this surface's roots: this file loads on every page, and an
   unscoped `.cc-pill` rule would change pills on destinations that never
   agreed to it.
   ------------------------------------------------------------------ */
.af-page .cc-pill, .af-file .cc-pill { white-space: nowrap; }
.af-page .cc-btn, .af-file .cc-btn { white-space: nowrap; }

/* ------------------------------------------------------------------
   Page roots
   ------------------------------------------------------------------ */
.af-page,
.af-file {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    font-family: var(--th-font-sans);
    font-size: var(--th-size-14);
    color: var(--th-ink);
    background: var(--th-paper);
}
.af-page a, .af-file a { color: var(--th-advant); text-decoration: none; }
.af-page a:hover, .af-file a:hover { color: var(--th-advant-deep); }

/* Shared inline-flex spacer. th-grid gives .spacer to the toolbar and
   bulk bar only, so the rail and the meta row carry their own. */
.af-spacer { flex: 1; }

/* The em-dash for a value that does not apply (readiness on a closed
   file, no attention). Dim, never a pill. */
.af-na { color: var(--th-ink-4); }

/* ------------------------------------------------------------------
   Browse - page head
   ------------------------------------------------------------------ */
.af-page-head {
    padding: 22px 24px 14px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}
.af-page-title {
    margin: 0;
    font-family: var(--th-font-serif);
    font-weight: 500;
    font-size: var(--th-size-24);
    letter-spacing: -0.012em;
    color: var(--th-ink);
}
.af-page-sub { margin-top: 4px; font-size: var(--th-size-13); color: var(--th-ink-3); }

/* The grid surface carries the page inset; .cc-page has none by canon. */
.af-browse { padding: 0 24px 24px; }

/* ------------------------------------------------------------------
   Browse - views rail (proposed th-grid canon extension, note 15)
   ------------------------------------------------------------------ */
.af-views {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.af-views-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--th-ink-4);
    margin-right: 2px;
}
.af-view {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: var(--th-radius-pill);
    font: inherit;
    font-size: 12px;
    border: 1px solid var(--th-line-2);
    background: var(--th-paper);
    color: var(--th-ink-2);
    cursor: pointer;
    white-space: nowrap;
}
.af-view:hover { border-color: var(--th-ink-4); color: var(--th-ink); }
.af-view.is-active {
    border-color: var(--th-advant);
    background: var(--th-advant-soft);
    color: var(--th-advant-deep);
    font-weight: 600;
}
.af-view:focus-visible { outline: 2px solid var(--th-advant); outline-offset: 2px; }
.af-view-save {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--th-radius-3);
    font: inherit;
    font-size: 12px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--th-ink-2);
    cursor: pointer;
    white-space: nowrap;
}
.af-view-save:hover { background: var(--th-paper-2); color: var(--th-ink); }
.af-view-save:focus-visible { outline: 2px solid var(--th-advant); outline-offset: 2px; }

/* ------------------------------------------------------------------
   Browse - toolbar chips (proposed th-grid canon extension, note 15)
   "Label: **Value**" with a chevron; tinted AND bold when narrowing.
   ------------------------------------------------------------------ */
.af-chip-host { position: relative; display: inline-block; }
.af-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: var(--th-radius-5);
    font: inherit;
    font-size: 12px;
    border: 1px solid var(--th-line-2);
    background: var(--th-paper);
    color: var(--th-ink-2);
    cursor: pointer;
}
.af-chip:hover { border-color: var(--th-ink-4); }
.af-chip:focus-visible { outline: 2px solid var(--th-advant); outline-offset: 2px; }
.af-chip.is-active {
    border-color: var(--th-advant);
    background: var(--th-advant-soft);
    color: var(--th-advant-deep);
}
.af-chip.is-open { border-color: var(--th-ink-4); }
.af-chip-label { white-space: nowrap; }
.af-chip-value { font-weight: 600; }
.af-chip-caret { color: var(--th-ink-4); flex: none; }

.af-chip-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 40;
    min-width: 190px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    background: var(--th-paper-sunk);
    border: 1px solid var(--th-line-2);
    border-radius: var(--th-radius-5);
    box-shadow: 0 8px 24px oklch(20% 0.01 255 / 0.13);
}
.af-chip-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    border: 0;
    border-radius: var(--th-radius-3);
    background: transparent;
    font: inherit;
    font-size: var(--th-size-13);
    color: var(--th-ink);
    text-align: left;
    cursor: pointer;
}
.af-chip-option:hover { background: var(--th-paper-2); }
.af-chip-option:focus-visible { outline: 2px solid var(--th-advant); outline-offset: -2px; }
.af-chip-tick { width: 14px; flex: none; font-family: var(--th-font-mono); color: var(--th-advant-deep); }

.af-reset {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: var(--th-radius-3);
    font: inherit;
    font-size: var(--th-size-12);
    border: 1px solid transparent;
    background: transparent;
    color: var(--th-ink-3);
    cursor: pointer;
}
.af-reset:hover { background: var(--th-paper-2); color: var(--th-ink); }
.af-reset:focus-visible { outline: 2px solid var(--th-advant); outline-offset: 2px; }

/* ------------------------------------------------------------------
   Browse - freshness strip (lives inside .th-grid-meta)
   ------------------------------------------------------------------ */
.af-note { white-space: nowrap; }
.af-meta-count { white-space: nowrap; }
.af-note.is-contained { color: var(--th-warn-ink); }

/* "Updates available - Refresh": advant (the action role). ADR-0035's
   copper inventory is closed; the offer is not one of its sites. */
.af-updates {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px;
    border-radius: var(--th-radius-pill);
    border: 1px solid var(--th-advant-deep);
    background: var(--th-advant-soft);
    color: var(--th-advant-deep);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.af-updates .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }
.af-updates:hover { background: var(--th-advant-deep); color: var(--th-advant-fg); }
.af-updates:focus-visible { outline: 2px solid var(--th-advant); outline-offset: 2px; }

.af-refresh {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: var(--th-radius-3);
    border: 1px solid var(--th-line-2);
    background: var(--th-paper);
    color: var(--th-ink-2);
    font: inherit;
    font-size: 11px;
    white-space: nowrap;
    cursor: pointer;
}
.af-refresh:hover { border-color: var(--th-ink-4); color: var(--th-ink); }
.af-refresh:focus-visible { outline: 2px solid var(--th-advant); outline-offset: 2px; }

/* ------------------------------------------------------------------
   Browse - cell affordances (downstream of the canon, per README)
   ------------------------------------------------------------------ */
/* The wrap must not clip the chip popovers that open above it. */
.af-browse .th-grid-wrap { overflow: visible; }

.af-lifecycle { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.af-closed-meta { font-size: 10.5px; color: var(--th-ink-4); white-space: nowrap; }

/* Attention is a dot pill coloured by kind; quiet for "waiting". */
.af-attn.is-wait  { color: var(--th-ink-3); }
.af-attn.is-evid  { color: var(--th-advant-deep); }
.af-attn.is-esc   { color: var(--th-warn-ink); }
.af-attn.is-amend { color: var(--th-rule); }
.af-attn { gap: 6px; }

.af-team { color: var(--th-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-owner { color: var(--th-ink-3); }
.af-owner.is-unassigned { color: var(--th-ink-4); }

.af-rev { color: var(--th-ink-4); }
.af-rev.is-amended { color: var(--th-advant-deep); }
.af-rev-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--th-advant);
    margin-left: 4px;
    vertical-align: middle;
}

/* Column widths are on the <th> as attributes of the canon column
   definition; restated here so the static render matches. */
.af-browse .th-grid th.af-col-term  { width: 108px; }
.af-browse .th-grid th.af-col-sub   { width: 96px; }
.af-browse .th-grid th.af-col-life  { width: 118px; }
.af-browse .th-grid th.af-col-ready { width: 140px; }
.af-browse .th-grid th.af-col-attn  { width: 170px; }
.af-browse .th-grid th.af-col-team  { width: 160px; }
.af-browse .th-grid th.af-col-eff   { width: 52px; }
.af-browse .th-grid th.af-col-act   { width: 100px; }
.af-browse .th-grid th.is-sorted .th-grid-sort { color: var(--th-ink); }

/* ------------------------------------------------------------------
   File shell
   ------------------------------------------------------------------ */
.af-file-back { padding: 16px 24px 0; }
.af-file-back-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--th-ink-3);
    text-decoration: none;
    cursor: pointer;
}
.af-file-back-link:hover { color: var(--th-ink); }

.af-file-head {
    padding: 10px 24px 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}
.af-file-ident-block { min-width: 0; }
.af-file-name {
    margin: 0;
    font-family: var(--th-font-serif);
    font-weight: 500;
    font-size: var(--th-size-24);
    letter-spacing: -0.012em;
    color: var(--th-ink);
    display: flex;
    align-items: center;
    gap: 10px;
}
.af-file-ident {
    margin-top: 4px;
    font-size: var(--th-size-13);
    color: var(--th-ink-3);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.af-file-ref { font-family: var(--th-font-mono); }
.af-dot { color: var(--th-ink-4); }
/* Identity snapshot captured at submission, shown only when it differs. */
.af-filed-as {
    font-family: var(--th-font-mono);
    font-size: 10.5px;
    color: var(--th-ink-4);
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius-pill);
    padding: 0 7px;
    line-height: 1.7;
    white-space: nowrap;
}

/* "1 Applicant File" switcher - files are listed, never merged. */
.af-file-switcher { position: relative; display: inline-block; flex: none; }
.af-file-switch { gap: 7px; }
.af-file-switch .af-file-switch-icon { color: var(--th-ink-3); }
.af-file-switch .af-file-switch-caret { color: var(--th-ink-4); }
.af-file-switch-panel {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 40;
    min-width: 300px;
    padding: 4px;
    background: var(--th-paper-sunk);
    border: 1px solid var(--th-line-2);
    border-radius: var(--th-radius-5);
    box-shadow: 0 8px 24px oklch(20% 0.01 255 / 0.13);
}
.af-file-switch-head {
    padding: 6px 10px 4px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--th-ink-4);
}
.af-file-switch-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--th-radius-3);
    background: transparent;
    font: inherit;
    font-size: var(--th-size-13);
    color: var(--th-ink);
    text-align: left;
    cursor: pointer;
}
.af-file-switch-option:hover { background: var(--th-paper-2); }
.af-file-switch-option.is-current { background: var(--th-advant-soft); }
.af-file-switch-option-label { font-weight: 500; }
.af-file-switch-option-meta { font-size: 11px; color: var(--th-ink-3); font-family: var(--th-font-mono); }

/* Summary card: definition, dates, lifecycle, readiness, attention,
   effective-vs-filed, owning team. Supersedes the shipped fact strip.
   Three designed states, by the card's container width:
     > 1100  one row. The definition block has a fixed 180px basis, so
             flex-wrap never sees its max-content width; it grows into
             the spare space and ellipsises only when the pills leave
             less than its name needs. The owning block is pushed right
             by margin-left: auto, so any safety wrap right-aligns.
     720-1100  two rows (mid block below): definition + owning block
             on row 1, the separator turns into a hairline, the pills
             sit on row 2 left-aligned (and wrap among themselves).
     < 720   stacked (narrow block at the end of this file).
   The card never has a fixed height; a wrap grows it. */
.af-file-summary {
    margin: 14px 24px 0;
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius-5);
    background: var(--th-paper-sunk);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    min-width: 0;
}
.af-file-summary > * { flex: none; }
.af-file-def { display: flex; flex-direction: column; gap: 2px; flex: 1 1 180px; min-width: 0; }
.af-file-def-name { font-weight: 600; font-size: 14px; color: var(--th-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-file-def-dates { font-size: var(--th-size-12); color: var(--th-ink-3); font-family: var(--th-font-mono); white-space: nowrap; }
.af-file-sep { width: 1px; height: 26px; background: var(--th-line); }
.af-file-owning {
    display: flex;
    flex-direction: column;
    gap: 1px;
    align-items: flex-end;
    margin-left: auto;
}
.af-file-team-owner { font-size: 12px; color: var(--th-ink-2); white-space: nowrap; }
.af-file-owning-label { font-size: 11px; color: var(--th-ink-4); white-space: nowrap; }

/* Six-destination tab row */
.af-file-nav {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 14px 24px 0;
    border-bottom: 1px solid var(--th-line);
}
.af-file-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px 9px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 13px;
    color: var(--th-ink-3);
    cursor: pointer;
    text-decoration: none;
}
.af-file-tab:hover { color: var(--th-ink); }
.af-file-tab.is-current {
    color: var(--th-ink);
    font-weight: 500;
    box-shadow: inset 0 -2px 0 var(--th-advant-deep);
}
.af-file-tab:focus-visible { outline: 2px solid var(--th-advant); outline-offset: -2px; border-radius: var(--th-radius-2); }
/* Destinations not yet delivered are real tabs with a marker, not dead controls. */
.af-file-tab-later {
    font-family: var(--th-font-mono);
    font-size: 8.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--th-ink-3);
    background: var(--th-paper-2);
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius-2);
    padding: 0 4px;
    line-height: 1.6;
    white-space: nowrap;
}

/* Requirements & documents destination container (the panel itself is
   af-requirements.css). Bounded so the checklist reads as a column. */
.af-file-requirements { padding: 16px 24px 28px; max-width: 960px; }

/* ------------------------------------------------------------------
   Application destination
   ------------------------------------------------------------------ */
/* One derived readiness line. Same projection as the header pill; it
   supersedes the interim Requirements card. */
.af-app-readiness { padding: 14px 24px 0; }
.af-app-readiness-card {
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius-5);
    background: var(--th-paper-sunk);
    padding: 9px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.af-app-readiness-text { font-size: var(--th-size-13); color: var(--th-ink-2); flex: 1 1 240px; min-width: 0; line-height: 1.45; }
.af-app-readiness-link { font-size: var(--th-size-13); white-space: nowrap; }

.af-app-body { padding: 16px 24px 28px; }
.af-app-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.af-app-title { font-family: var(--th-font-serif); font-weight: 600; font-size: var(--th-size-17); color: var(--th-ink); }
.af-app-rev { font-family: var(--th-font-mono); font-size: 11px; color: var(--th-ink-3); }
.af-app-head .cc-btn svg { color: var(--th-ink-3); }
.af-app-head .cc-btn.is-primary svg { color: inherit; }

.af-app-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
    align-items: start;
}
.af-app-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.af-app-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* Sectioned application content */
.af-section {
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius-5);
    background: var(--th-paper-sunk);
}
.af-section-head {
    margin: 0;
    padding: 10px 16px;
    border-bottom: 1px solid var(--th-line);
    font-family: var(--th-font-serif);
    font-weight: 600;
    font-size: var(--th-size-14);
    color: var(--th-ink);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 8px;
}
.af-section-meta { font-family: var(--th-font-mono); font-size: 10.5px; font-weight: 400; color: var(--th-ink-4); }
.af-section-body { padding: 6px 0; }

.af-field {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 7px 16px;
    position: relative;
}
.af-field:hover { background: var(--th-paper-2); }
.af-field-label { width: 190px; flex: none; font-size: var(--th-size-12); color: var(--th-ink-3); line-height: 1.4; overflow-wrap: anywhere; }
.af-field-value { font-size: var(--th-size-14); color: var(--th-ink); min-width: 0; line-height: 1.45; overflow-wrap: anywhere; }
.af-field-value.is-empty { color: var(--th-ink-4); }
.af-field-value.is-multiline { white-space: pre-line; }
.af-field-values {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    font-size: var(--th-size-14);
    color: var(--th-ink);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* Document response row: same field grammar, file in mono. */
.af-field.is-document { padding: 7px 16px; }
.af-field-staged { font-size: var(--th-size-13); color: var(--th-ink-3); min-width: 0; line-height: 1.45; }
.af-field-file-icon { color: var(--th-ink-4); flex: none; }
.af-field-file { font-size: 13px; color: var(--th-ink); font-family: var(--th-font-mono); }
.af-field-file.is-empty { color: var(--th-ink-4); }
.af-field-file-meta { font-size: 11px; color: var(--th-ink-4); }

/* Revision marker on an amended answer / added instance. As a button
   it opens provenance; as a span it only marks. */
.af-rev-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--th-font-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--th-advant-deep);
    background: var(--th-advant-soft);
    border: 1px solid var(--th-advant);
    border-radius: var(--th-radius-pill);
    padding: 0 6px;
    line-height: 1.7;
    flex: none;
    cursor: default;
    white-space: nowrap;
}
button.af-rev-chip { cursor: pointer; }
.af-rev-chip:focus-visible { outline: 2px solid var(--th-advant); outline-offset: 2px; }
.af-rev-chip-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--th-advant); display: inline-block; }

/* Repeating group */
.af-group-body { padding: 10px 16px; display: flex; flex-direction: column; gap: 10px; }
.af-instance {
    border: 1px solid var(--th-line-soft);
    border-radius: 4px;
    padding: 10px 12px;
    background: var(--th-paper);
}
.af-instance-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.af-instance-title { font-weight: 500; font-size: 13px; color: var(--th-ink); }
.af-instance-members { display: flex; gap: 10px 18px; flex-wrap: wrap; }
.af-member { display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 100%; }
.af-member-label { font-size: 10.5px; color: var(--th-ink-4); }
.af-member-value { font-size: var(--th-size-13); color: var(--th-ink); overflow-wrap: anywhere; }
.af-member-value.is-empty { color: var(--th-ink-4); }
.af-member-value.is-staged { color: var(--th-ink-3); }
.af-member.is-wide { flex-basis: 100%; }
.af-member-value.is-multiline { white-space: pre-line; line-height: 1.45; }
.af-member-values {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--th-size-13);
    color: var(--th-ink);
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.af-instance-title { overflow-wrap: anywhere; }
.af-group-empty { margin: 0; font-size: var(--th-size-13); color: var(--th-ink-3); }

/* Application reads: approved Stage 2A handoff, effective and immutable filed. */
.af-app-title { margin: 0; }
.af-app-title:focus-visible,
.af-app-state-head:focus-visible,
.af-filed-banner-title:focus-visible { outline: 2px solid var(--th-advant); outline-offset: 2px; border-radius: var(--th-radius-2); }
.af-app-title:focus:not(:focus-visible),
.af-app-state-head:focus:not(:focus-visible),
.af-filed-banner-title:focus:not(:focus-visible) { outline: none; }
.af-app-body.is-single > .af-app-head,
.af-app-body.is-single > .af-app-grid { max-width: 820px; }
.af-app-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.af-app-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.af-app-body, .af-filed { position: relative; }
.af-app-loading { display: flex; flex-direction: column; gap: 16px; }
.af-app-loading-text { margin: 0; font-size: var(--th-size-13); color: var(--th-ink-3); }
.af-app-skeleton {
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius-5);
    background: var(--th-paper-sunk);
    padding: 0 0 6px;
}
.af-app-skeleton-head { height: 40px; border-bottom: 1px solid var(--th-line); margin-bottom: 6px; }
.af-app-skeleton-row { display: flex; align-items: center; gap: 14px; padding: 9px 16px; }
.af-app-skeleton-label { width: 140px; height: 10px; flex: none; border-radius: var(--th-radius-2); background: var(--th-paper-2); }
.af-app-skeleton-value { width: 46%; height: 12px; border-radius: var(--th-radius-2); background: var(--th-paper-2); }
.af-app-skeleton-value.is-short { width: 24%; }
.af-app-state {
    border: 1px solid var(--th-line-2);
    border-radius: var(--th-radius-5);
    background: var(--th-paper-sunk);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.af-app-state-head {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-family: var(--th-font-sans);
    font-size: var(--th-size-14);
    font-weight: 600;
    color: var(--th-ink);
    line-height: 1.4;
}
.af-app-state-icon { color: var(--th-ink-3); flex: none; margin-top: 2px; }
.af-app-state-body { margin: 0 0 0 23px; font-size: var(--th-size-13); color: var(--th-ink-2); line-height: 1.5; max-width: 600px; }
.af-app-state-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 0 23px; }
.af-app-state-actions .cc-btn { background: var(--th-paper); color: var(--th-ink-2); white-space: nowrap; }
.af-app-state-actions .cc-btn svg { color: var(--th-ink-3); }
.af-app-state-actions .cc-btn[aria-disabled="true"] { background: var(--th-paper-2); color: var(--th-ink-4); border-color: var(--th-line); cursor: not-allowed; }
.af-app-state-actions .cc-btn[aria-disabled="true"] svg { color: var(--th-ink-4); }
.af-app-state-wait { font-family: var(--th-font-mono); font-size: 11px; color: var(--th-ink-3); }
.af-filed-banner {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--th-paper-2);
    border-bottom: 1px solid var(--th-line-2);
    padding: 10px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.af-filed-banner-icon { color: var(--th-ink-2); flex: none; }
.af-filed-banner-text { font-size: var(--th-size-13); color: var(--th-ink-2); line-height: 1.45; min-width: 0; }
.af-filed-banner-title { display: inline; margin: 0; font: inherit; font-weight: 700; color: var(--th-ink); }
.af-filed-return { margin-left: auto; flex: none; }
.af-filed-return svg { color: var(--th-ink-3); }
.af-filed-body { padding: 18px 24px 28px; max-width: 820px; box-sizing: content-box; }
.af-filed-head { margin-bottom: 14px; }
.af-filed-title { margin: 0; font-family: var(--th-font-serif); font-weight: 600; font-size: var(--th-size-17); color: var(--th-ink); }
.af-filed-sub { margin-top: 3px; font-family: var(--th-font-mono); font-size: 11px; color: var(--th-ink-3); }
.af-filed-sections { display: flex; flex-direction: column; gap: 16px; }
.af-filed .af-field:hover { background: transparent; }

@media (max-width: 952px) {
    .af-filed-banner { padding: 10px 16px; flex-wrap: wrap; align-items: flex-start; gap: 8px 10px; }
    .af-filed-banner-text { flex: 1 1 calc(100% - 25px); }
    .af-filed-banner-title { display: block; }
    .af-filed-return { margin-left: 25px; }
    .af-filed-body { padding: 16px 16px 28px; }
    .af-app-state { padding: 16px; }
    .af-app-state-body, .af-app-state-actions { margin-left: 0; }
    .af-app-skeleton-label { width: 40%; }
    .af-app-skeleton-row { flex-wrap: wrap; gap: 6px; }
    .af-app-skeleton-value { width: 70%; }
}

/* Amendments panel */
.af-amendments {
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius-5);
    background: var(--th-paper-sunk);
}
.af-amendments-head {
    padding: 10px 14px;
    border-bottom: 1px solid var(--th-line);
    display: flex;
    align-items: center;
    gap: 8px;
}
.af-amendments-head svg { color: var(--th-ink-3); }
.af-amendments-title { font-weight: 600; font-size: var(--th-size-13); color: var(--th-ink); }
.af-amendments-count { margin-left: auto; font-family: var(--th-font-mono); font-size: 10.5px; color: var(--th-ink-4); }
.af-amendment { padding: 11px 14px; border-bottom: 1px solid var(--th-line-soft); }
.af-amendment-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.af-amendment-rev { font-family: var(--th-font-mono); font-size: 11px; font-weight: 600; color: var(--th-advant-deep); }
.af-amendment-title { font-size: 12px; font-weight: 500; color: var(--th-ink); }
.af-amendment-meta { font-size: 11px; color: var(--th-ink-3); font-family: var(--th-font-mono); margin-bottom: 5px; }
.af-amendment-reason { font-size: 12px; color: var(--th-ink-2); line-height: 1.45; margin-bottom: 7px; }
.af-amendment .cc-btn { margin-bottom: 6px; }
.af-amendment-locked {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--th-ink-4);
    margin-bottom: 6px;
}
.af-amendment-note { font-size: 11px; color: var(--th-ink-3); margin-bottom: 5px; }
.af-amendment-foot { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.af-amendment-impacts { font-size: 11px; color: var(--th-ink-3); }
.af-amendments-empty { padding: 14px; font-size: 12px; color: var(--th-ink-3); }
.af-amendments-foot {
    padding: 9px 14px;
    font-size: 11px;
    color: var(--th-ink-4);
    line-height: 1.45;
    border-top: 1px solid var(--th-line-soft);
}

/* ------------------------------------------------------------------
   Dark - only what does not retune through --th-* on its own: the
   two popover shadows (tuned for a light ground). Everything else
   above already follows the theme, including the pill retune that
   threshold-tokens.css applies to .cc-pill.
   ------------------------------------------------------------------ */
[data-theme="dark"] .af-chip-panel,
[data-theme="dark"] .af-file-switch-panel { box-shadow: 0 8px 24px oklch(2% 0.01 255 / 0.55); }

@media (prefers-reduced-motion: reduce) {
    .af-view, .af-chip, .af-updates, .af-refresh, .af-file-tab { transition: none; }
}

/* ------------------------------------------------------------------
   Mid (720-1100). Summary card only: the two-row state. `order` moves
   the owning block up beside the definition; the DOM (and so reading
   order) is unchanged, and none of the reordered children is focusable.
   A 1100px container is a 1332px viewport beside the 232px sidenav.
   ------------------------------------------------------------------ */
@media (max-width: 1332px) {
    .af-file-summary { gap: 10px 10px; }
    .af-file-def { order: 1; flex: 1 1 0; }
    .af-file-owning { order: 2; }
    .af-file-sep { order: 3; flex: 0 0 100%; width: auto; height: 1px; background: var(--th-line-soft); }
    .af-file-summary > .cc-pill { order: 4; }
    /* Lift correction, not in the canon file: a closed file's readiness is the dim dash, not a
       pill, and without its own order it kept 0 and led the card ahead of the definition. */
    .af-file-summary > .af-na { order: 4; }
}

/* ------------------------------------------------------------------
   Narrow (400). A 720px container is a 952px viewport beside the 232px
   sidenav. The canon owns the grid's own horizontal scroll; what is
   handled here is the chrome around it.
   ------------------------------------------------------------------ */
@media (max-width: 952px) {
    .af-page-head, .af-browse { padding-left: 16px; padding-right: 16px; }
    .af-page-head { flex-direction: column; align-items: stretch; gap: 10px; }
    .af-browse .th-grid-toolbar .th-grid-search { min-width: 0; flex: 1 1 100%; }
    /* The canon meta row is nowrap; at phone width its trailing Refresh
       would leave the viewport. Scoped to this root, not the canon. */
    .af-browse .th-grid-meta { flex-wrap: wrap; row-gap: 6px; }
    .af-browse .th-grid-meta > * { white-space: nowrap; }
    .af-browse .th-grid-wrap { overflow-x: auto; }
    .af-browse .th-grid-pager { flex-wrap: wrap; }

    .af-file-back, .af-file-head, .af-file-nav, .af-app-readiness { padding-left: 16px; padding-right: 16px; }
    .af-file-summary { margin-left: 16px; margin-right: 16px; gap: 10px 14px; }
    .af-file-sep { display: none; }
    .af-file-def { flex-basis: 100%; }
    .af-file-def-name, .af-file-def-dates { white-space: normal; }
    .af-file-def, .af-file-owning, .af-file-summary > .cc-pill, .af-file-summary > .af-na { order: 0; }
    .af-file-owning { align-items: flex-start; flex-basis: 100%; margin-left: 0; }
    .af-file-head { flex-direction: column; gap: 12px; }
    /* Six tabs do not fit a phone column; the nav scrolls within itself
       so every destination stays reachable and keeps its marker. */
    .af-file-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
    .af-file-tab { flex: 0 0 auto; }
    .af-app-body, .af-file-requirements { padding: 16px 16px 28px; }
    .af-app-grid { grid-template-columns: minmax(0, 1fr); }
    .af-field { flex-wrap: wrap; gap: 2px 14px; }
    .af-field-label { width: 100%; }
    .af-field.is-document { gap: 2px 14px; }
}

/* ==================================================================
   Carry-overs - rules the handoff bundle does not draw, for behaviour
   this surface already had and still needs. Nothing here restyles a
   lifted class.
   ================================================================== */

/* Lift correction, not in the canon file. The narrow block gives the tab
   row `overflow-x: auto`, which drops its automatic minimum height; inside
   Threshold's height-bounded page (.cc-page scrolls, .af-file is a flex
   column) it was then the one child that could shrink, and it collapsed to
   its border. The canon sheet never sat in a bounded pane, so it never
   showed. */
.af-file-nav { flex-shrink: 0; }

/* Transparent, full-viewport, BELOW the panel's z-index: an outside click
   lands here and closes a popover. No interop module, and nothing visible. */
.af-popover-scrim {
    position: fixed;
    inset: 0;
    z-index: 39;
    background: transparent;
}

/* Term chip: the canon chip opening a searchable, pageable listbox. The
   bundle draws the Term chip closed only; its options come from a paged
   endpoint, so the panel keeps its search. */
.af-term { font-size: var(--th-size-12); }

.af-term-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 40;
    width: 260px;
    padding: 4px;
    background: var(--th-paper-sunk);
    border: 1px solid var(--th-line-2);
    border-radius: var(--th-radius-5);
    box-shadow: 0 8px 24px oklch(20% 0.01 255 / 0.13);
}

.af-term-search { padding: 4px 4px 6px; border-bottom: 1px solid var(--th-line-soft); }

/* Visually hidden but present: the combobox needs a real label, and the
   chip above it already carries the visible "Term:" the reader sees. */
.af-term-search-label,
.af-term-status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.af-term-input {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--th-line-2);
    border-radius: var(--th-radius-3);
    background: var(--th-paper);
    font: inherit;
    font-size: var(--th-size-12);
    color: var(--th-ink);
}

.af-term-input::placeholder { color: var(--th-ink-4); }

.af-term-input:focus-visible {
    outline: 2px solid var(--th-advant);
    outline-offset: 1px;
}

.af-term-clear {
    border: 0;
    background: transparent;
    color: var(--th-ink-3);
    font-size: var(--th-size-15);
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}

.af-term-clear:hover { color: var(--th-ink); }

.af-term-clear:focus-visible {
    outline: 2px solid var(--th-advant);
    outline-offset: 2px;
    border-radius: var(--th-radius-2);
}

.af-term-list {
    max-height: 240px;
    overflow-y: auto;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.af-term-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: var(--th-radius-3);
    color: var(--th-ink);
    cursor: pointer;
}

.af-term-option:hover { background: var(--th-paper-2); }

/* The cursor is a border, not a tint: a keyboard reader on a high-contrast
   or forced-colour display must still see where they are. */
.af-term-option.is-cursor {
    background: var(--th-advant-soft);
    box-shadow: inset 0 0 0 1px var(--th-advant);
}

.af-term-option.is-selected { font-weight: 600; }

.af-term-option-mark {
    width: 12px;
    flex: none;
    font-family: var(--th-font-mono);
    color: var(--th-advant-deep);
}

/* Truncates rather than wrapping: a long Term name must not reflow the
   option rows the cursor is walking. */
.af-term-option-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.af-term-empty,
.af-term-error,
.af-term-more {
    padding: 6px 10px;
    color: var(--th-ink-3);
}

.af-term-error { color: var(--th-risk); }

/* The picker's in-panel "Load more" / retry: a text button. */
.af-linkbtn {
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    color: var(--th-advant);
    text-decoration: underline;
    cursor: pointer;
}

.af-linkbtn:hover { color: var(--th-advant-deep); }

.af-linkbtn:focus-visible {
    outline: 2px solid var(--th-advant);
    outline-offset: 2px;
    border-radius: var(--th-radius-2);
}

/* The shell's own phases: opening, access refused, could not open. */
.af-file-state {
    padding: 28px 24px;
    color: var(--th-ink-3);
    font-size: var(--th-size-13);
}

.af-file-state h1 {
    margin: 0 0 6px;
    font-family: var(--th-font-serif);
    font-weight: 500;
    font-size: var(--th-size-20);
    color: var(--th-ink);
}

/* Planned destinations. The bundle keeps these sketches for the three
   `later` tabs. */
.af-planned { max-width: 760px; padding: 16px 24px 28px; }

.af-planned-banner {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    margin-bottom: 16px;
    border: 1px dashed var(--th-line-2);
    border-radius: var(--th-radius-5);
    background: var(--th-paper-2);
    font-size: var(--th-size-13);
    color: var(--th-ink-2);
    line-height: 1.5;
}

.af-planned-banner-head { color: var(--th-ink); }

.af-planned-title {
    margin: 0 0 12px;
    font-family: var(--th-font-serif);
    font-weight: 600;
    font-size: 16px;
    color: var(--th-ink);
}

.af-planned-sketch { display: flex; flex-direction: column; gap: 10px; }

.af-planned-sketch .line {
    height: 12px;
    border-radius: var(--th-radius-2);
    background: repeating-linear-gradient(-45deg,
        var(--th-paper-2) 0 8px, var(--th-line-soft) 8px 16px);
}

.af-planned-sketch .w64 { width: 64%; }
.af-planned-sketch .w82 { width: 82%; }
.af-planned-sketch .w48 { width: 48%; }

.af-planned-sketch .block {
    height: 88px;
    border-radius: 4px;
    border: 1px solid var(--th-line-soft);
    background: repeating-linear-gradient(-45deg,
        var(--th-paper-2) 0 8px, var(--th-paper-sunk) 8px 16px);
}

[data-theme="dark"] .af-term-panel { box-shadow: 0 8px 24px oklch(2% 0.01 255 / 0.55); }
[data-theme="dark"] .af-planned-banner { background: var(--th-paper-3); }
[data-theme="dark"] .af-term-option.is-cursor {
    background: color-mix(in oklab, var(--th-advant) 22%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .af-term-option { transition: none; }
}

@media (max-width: 952px) {
    .af-term-panel { width: 220px; }
    .af-term-list { min-width: 200px; }
    .af-planned { padding: 16px 16px 28px; }
}