/* ==================================================================
   af-requirements.css - the Requirements & documents destination of
   the Applicant File shell.

   Canon: docs/design-references/all-files-prototype-review/project/
          handoff/all-files/af-requirements.css, lifted verbatim for the
          CHECKLIST half: the panel head, the closed / blockers / ready
          lines, the checklist card, its rows and their detail. The action
          sheet, evidence links, intents, the documents ledger, the viewer
          drawer and the round 3 additions are not lifted: every element
          they style waits on the documents capability (ADR-0055) or on
          the requirement actions, and ships with them.

   The narrow block is a media query, like all-files.css: a 720px
   container is a 952px viewport beside the 232px sidenav.

   Loads after threshold-tokens.css, threshold-chrome.css and
   all-files.css. TOKENS: no `--token:` declaration (ADR-0035); every
   colour is --th-*.
   ================================================================== */

.af-req-panel {
    font-family: var(--th-font-sans);
    color: var(--th-ink);
    font-size: var(--th-size-14);
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
.af-req-panel a { color: var(--th-advant); text-decoration: none; }
.af-req-panel a:hover { color: var(--th-advant-deep); }
.af-req-panel svg { flex: none; }

/* ------------------------------------------------------------------
   Head: title, summary line, head actions (exactly those the viewer
   holds; absent, never disabled)
   ------------------------------------------------------------------ */
.af-req-head { display: flex; align-items: flex-start; gap: 10px 14px; flex-wrap: wrap; }
.af-req-head-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 260px; }
.af-req-title { font-family: var(--th-font-serif); font-weight: 600; font-size: var(--th-size-17); color: var(--th-ink); }
.af-req-summary { font-size: var(--th-size-12); color: var(--th-ink-3); }
.af-req-head-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.af-req-head-actions .cc-btn { white-space: nowrap; }
.af-req-head-actions .cc-btn svg { color: var(--th-ink-3); }

/* Closed file: read-only, history stays readable */
.af-req-closed-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 12px;
    border: 1px solid var(--th-line);
    border-radius: 4px;
    background: var(--th-paper-2);
    font-size: var(--th-size-13);
    color: var(--th-ink-2);
    line-height: 1.45;
}
.af-req-closed-note svg { color: var(--th-ink-3); margin-top: 2px; }

/* Why the header reads Awaiting requirements - the exact blockers */
.af-req-blockers {
    border: 1px solid var(--th-warn);
    border-radius: 4px;
    background: var(--th-warn-soft);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.af-req-blockers-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--th-size-13);
    font-weight: 600;
    color: var(--th-warn-ink);
}
.af-req-blockers-list { display: flex; flex-direction: column; gap: 3px; }
.af-req-blocker { display: flex; align-items: baseline; gap: 8px; font-size: var(--th-size-13); color: var(--th-ink); flex-wrap: wrap; }
.af-req-blocker-tag { font-size: 11px; font-weight: 600; color: var(--th-warn-ink); flex: none; }
.af-req-blocker-label { min-width: 0; }
.af-req-blocker-meta { font-size: var(--th-size-12); color: var(--th-ink-3); }

.af-req-ready { display: flex; align-items: center; gap: 8px; font-size: var(--th-size-13); color: var(--th-ok-ink); }

/* The destination is always the split, so opening a document later never
   re-parents the checklist. One column until then. */
.af-req-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; min-width: 0; }

/* ------------------------------------------------------------------
   Checklist card
   ------------------------------------------------------------------ */
.af-req-checklist,
.af-doc-ledger {
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius-5);
    background: var(--th-paper-sunk);
}
.af-req-card-head,
.af-doc-head {
    padding: 10px 16px;
    border-bottom: 1px solid var(--th-line);
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.af-req-card-title,
.af-doc-title { font-family: var(--th-font-serif); font-weight: 600; font-size: var(--th-size-14); color: var(--th-ink); }
.af-req-card-meta,
.af-doc-meta { font-size: 11px; color: var(--th-ink-4); }
.af-req-empty,
.af-doc-empty { padding: 14px 16px; font-size: var(--th-size-13); color: var(--th-ink-3); }

.af-req-item { border-bottom: 1px solid var(--th-line-soft); }
.af-req-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    color: var(--th-ink);
}
.af-req-row:hover { background: var(--th-paper-2); }
.af-req-row:focus-visible { outline: 2px solid var(--th-advant); outline-offset: -2px; }
.af-req-chevron { color: var(--th-ink-4); margin-top: 3px; transition: transform .12s; }
.af-req-row[aria-expanded="true"] .af-req-chevron { transform: rotate(90deg); }
.af-req-row-main { display: flex; flex-direction: column; gap: 3px; flex: 1 1 220px; min-width: 0; }
.af-req-row-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.af-req-label { font-size: var(--th-size-14); font-weight: 500; color: var(--th-ink); }
.af-req-kind { font-family: var(--th-font-mono); font-size: 10.5px; color: var(--th-ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.af-req-blocking { font-size: 10.5px; font-weight: 600; color: var(--th-warn-ink); letter-spacing: 0.02em; }
.af-req-hidden { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--th-ink-3); }
.af-req-row-sub { font-size: var(--th-size-12); color: var(--th-ink-3); display: flex; gap: 8px; flex-wrap: wrap; }
.af-req-due { color: var(--th-ink-3); white-space: nowrap; }
.af-req-due.is-overdue { color: var(--th-risk-ink); font-weight: 600; }
.af-req-state { flex: none; }

.af-req-detail { padding: 0 16px 14px 40px; display: flex; flex-direction: column; gap: 10px; }
.af-req-facts { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--th-ink-3); line-height: 1.45; }

.af-req-instr-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font: inherit;
    font-size: var(--th-size-12);
    color: var(--th-ink-2);
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.af-req-instr-toggle svg { transition: transform .12s; }
.af-req-instr-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.af-req-instr-toggle:focus-visible { outline: 2px solid var(--th-advant); outline-offset: 2px; border-radius: var(--th-radius-2); }
.af-req-instr-body {
    margin-top: 6px;
    padding: 8px 12px;
    border-left: 2px solid var(--th-line-2);
    font-size: var(--th-size-13);
    color: var(--th-ink-2);
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.af-req-instr-line { display: flex; gap: 6px; }
.af-req-instr-line.is-bullet { padding-left: 8px; }
.af-req-instr-bullet { color: var(--th-ink-3); }
.af-req-instr-note { font-size: 11px; color: var(--th-ink-3); margin-top: 3px; }

/* Resolution stamp: waiver / direct basis / authoritative capability / accepted evidence */
.af-req-stamp {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 9px 12px;
    border: 1px solid var(--th-line);
    border-radius: 4px;
    background: var(--th-paper);
}
.af-req-stamp-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.af-req-stamp-text { font-size: var(--th-size-13); color: var(--th-ink); }
.af-req-stamp-reason { font-size: var(--th-size-13); color: var(--th-ink-2); line-height: 1.45; }
.af-req-stamp-actions { display: flex; gap: 6px; margin-top: 2px; }
.af-req-cap-note { font-size: 12px; color: var(--th-ink-3); line-height: 1.45; }

.af-req-history { display: flex; gap: 10px; font-size: 12px; color: var(--th-ink-3); line-height: 1.45; }
.af-req-history svg { margin-top: 3px; color: var(--th-ink-4); }
.af-req-history-text { display: flex; flex-direction: column; gap: 2px; }

/* Carry-over: the instructions body renders the applicant's own Markdown
   (the Rendering library's MarkdownRenderer, the one Compass uses), so the
   note beneath it stays true. The canon's prototype drew each line as a
   span; real Markdown arrives as paragraphs and lists, whose default
   margins would break the body's own 3px rhythm. */
.af-req-instr-body > p,
.af-req-instr-body > ul,
.af-req-instr-body > ol { margin: 0; }
.af-req-instr-body > ul,
.af-req-instr-body > ol { padding-left: 18px; }

@media (prefers-reduced-motion: reduce) {
    .af-req-chevron, .af-req-instr-toggle svg { transition: none; }
}

/* Narrow (400). The detail indent collapses and the trailing pill wraps
   under the title. */
@media (max-width: 952px) {
    .af-req-detail { padding-left: 16px; }
    .af-req-row { flex-wrap: wrap; }
    .af-req-state { margin-left: 24px; }
}