/* styles/sections/spec-builder-final-doc.css
 * The final spec document (js/spec-final-doc.js, js/spec-final-spec.js). It has to read like a
 * finished document, not a workspace: no cards, no per-section chrome, no badges, no warning
 * boxes. Headings and prose in one column. The honesty marks (blocked lines, unmet readiness
 * items) are quiet on purpose: an orange left rule and a short text tag on the line itself.
 * Re-based from css/spec-final-doc.css. Light mode only. */
@layer sections {
  /* Prose follows the Editorial board (ouGVN): h3 Piazzolla 600 at lh 1.05 (20px on M, 24px from
     D, 28px on W, the --ed-h3 steps editorial.css sets on .article), lists in Piazzolla at the
     editorial size and 1.6 with square fern markers, and an unboxed table. js/spec-final-doc.js
     cannot take .prose, so the values are set here. */
  .specdoc {
    --specdoc-h3: 20px;
    --specdoc-h3-ls: -0.01em;
    --specdoc-table: 14px;

    display: flex;
    flex-direction: column;
    gap: var(--space-24);
  }

  /* The sections live in their own wrapper (the surface re-renders just this node), so the
     .specdoc gap sits between the wrapper, the error line and the actions, not between
     sections. This one spaces the sections. */
  .specdoc-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
  }

  /* ===================== TITLE AND SECTIONS ===================== */

  /* The document title is the card headline: the same fixed size as .lite-headline */
  .specdoc-title {
    margin: 0 0 var(--space-4);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: var(--spec-headline);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.015em;
    text-wrap: balance;
  }

  .specdoc-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }

  .specdoc-h {
    margin: 0 0 var(--space-4);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: var(--specdoc-h3);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: var(--specdoc-h3-ls);
  }

  /* One prose face: every line of the document is the editorial serif body (ouGVN, 18/1.6 on
     D), the same as the list items. The small sans parts are labels and captions. */
  .specdoc-line {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: var(--t-editorial-size);
    line-height: var(--t-editorial-lh);
  }

  /* The "PROBLEM:" inline label and the standalone list captions */
  .specdoc-key {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink-muted);
    font-size: var(--spec-micro);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .specdoc-val {
    color: var(--ink);
  }

  /* An empty section says so quietly, and says why. It is never dressed up as content. */
  .specdoc-empty {
    margin: 0;
    color: var(--ink-muted);
    font-size: var(--spec-ui-sm);
    font-style: italic;
    line-height: 1.5;
  }

  .specdoc-note {
    margin: 0;
    color: var(--ink-muted);
    font-size: var(--spec-ui-sm);
    line-height: 1.5;
  }

  /* ===================== LISTS ===================== */

  /* Native square markers in fern (editorial-blocks.css `.prose ul`); ::marker carries the tone */
  .lite-preview-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    margin: 0;
    padding: 0 0 0 var(--space-24);
    list-style: square;
  }

  /* lite-form.css draws a round dot with li::before and pads for it; the markers here are native */
  .lite-preview-list li {
    padding-left: 0;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: var(--t-editorial-size);
    line-height: var(--t-editorial-lh);
  }

  .lite-preview-list li::before {
    content: none;
  }

  .lite-preview-list li::marker {
    color: var(--fern);
  }

  .lite-preview-list strong {
    font-weight: 600;
  }

  /* The no-gos are one half of every coherence conflict, so their marker is orange */
  .lite-preview-list li.specdoc-nogo::marker {
    color: var(--orange);
  }

  /* ===================== THE UNRESOLVED MARK ===================== */

  /* The rule reinforces the words; "I need:" is real text in the accessible name */
  .specdoc-ask,
  .specdoc-ask-li {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: baseline;
    margin: 0;
    padding-left: var(--space-8);
    border-left: 3px solid var(--orange);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: var(--t-editorial-size);
    line-height: var(--t-editorial-lh);
  }

  /* A blocked entry wears the orange rule, not the list marker */
  .lite-preview-list li.specdoc-ask-li {
    list-style: none;
    font-family: var(--font-display);
    font-size: var(--t-editorial-size);
    line-height: var(--t-editorial-lh);
  }

  .specdoc-ask-tag {
    color: var(--orange-ink);
    font-family: var(--font-body);
    font-size: var(--spec-ui-sm);
    font-weight: 600;
    white-space: nowrap;
  }

  .specdoc-ask-text {
    flex: 1 1 12rem;
  }

  /* ===================== READINESS ===================== */

  /* Progress is "N of M", never a percentage: the model authors the checklist */
  .specdoc-count {
    margin: 0;
    color: var(--ink-muted);
    font-size: var(--spec-ui-sm);
  }

  .specdoc-readiness {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .specdoc-readiness-item {
    display: flex;
    gap: var(--space-4);
    align-items: baseline;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: var(--t-editorial-size);
    line-height: var(--t-editorial-lh);
  }

  /* One colour for both states: the glyph shape and the accessible name carry met versus not */
  .specdoc-readiness-mark {
    color: var(--ink-muted);
  }

  /* ===================== ACTIONS AND STATUS ===================== */

  /* Rag left, matching baselines, secondary left and primary right by DOM order (Download as PDF
     is appended before Claim in js/spec-final-spec.js). No `order`: it would move a button
     visually and leave the tab order behind it. Not full width: the pair must not reflow when a
     sibling's label changes to "Preparing your PDF...". On a narrow column they stack, and the
     stack still reads Download, then Claim. */
  .specdoc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    align-items: baseline;
    justify-content: flex-start;
  }

  .specdoc-actions .btn {
    min-height: 44px;
    flex: 0 1 auto;
    width: auto;
  }

  /* The one home for a claim failure */
  .specdoc-error {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    align-items: baseline;
  }

  /* Announced, never display: none */
  .specdoc-live {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* ===================== EARS TABLE ===================== */

  /* Unboxed (board "Editorial / table"): an ink rule under mono headers, rule-separated rows.
     The scroll wrapper stays, so a wide table scrolls inside the card. */
  .specdoc-ears-scroll {
    overflow-x: auto;
  }

  .specdoc-ears {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: var(--specdoc-table);
    line-height: 1.45;
  }

  .specdoc-ears th,
  .specdoc-ears td {
    padding: var(--space-12) var(--space-16) var(--space-12) 0;
    text-align: left;
    vertical-align: top;
    color: var(--ink-2);
  }

  .specdoc-ears th {
    padding-top: 0;
    padding-bottom: var(--space-10);
    border-bottom: 1px solid var(--ink);
    color: var(--ink-muted);
    font-family: var(--font-mono);
    font-size: var(--spec-micro);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.2px;
    white-space: nowrap;
  }

  .specdoc-ears td {
    border-bottom: 1px solid var(--rule-cell);
  }

  /* Board "Editorial / table": the first column is ink, the rest ink-2 */
  .specdoc-ears td:first-child {
    color: var(--ink);
  }

  .specdoc-ears-id,
  .specdoc-ears-tpl {
    font-family: var(--font-mono);
    font-size: var(--spec-micro);
    white-space: nowrap;
  }

  @media (min-width: 900px) {
    .specdoc {
      --specdoc-h3: 24px;
      --specdoc-table: 15px;
    }
  }

  @media (min-width: 1680px) {
    .specdoc {
      --specdoc-table: 16px;
    }
  }

  /* ===================== hidden MUST WIN ===================== */

  /* .specdoc-error and .specdoc-actions are flex and toggled by `hidden`. The root half is kept
     in case this surface is ever hidden directly; the shell today toggles the container. */
  .specdoc[hidden],
  .specdoc [hidden] {
    display: none;
  }
}