/* css/spec-final-doc.css
 * Brief Lite — Spec Builder FINAL SPEC DOCUMENT (BRI-5506).
 *
 * This screen has one job the rest of Spec Builder does not: it has to read like a FINISHED
 * DOCUMENT, not like a workspace. So there are no cards, no per-section chrome, no badges and no
 * warning boxes. Headings and prose in one column, the way a spec actually looks.
 *
 * The honesty marks (blocked lines, unmet readiness items) are deliberately QUIET: an amber left
 * rule and a short text tag on the line itself. A document covered in alert boxes reads as broken
 * rather than as done, and the product bar here is honesty without theatre.
 */

/* [hidden] { display: none } lives in the USER-AGENT origin, so ANY author-origin `display:`
 * declaration beats it outright. The moment something carries a `display`, `hidden` silently stops
 * hiding while the property still reads `true` -- and every unit test asserting `.hidden` keeps
 * passing, vacuously. There is no global [hidden] reset in css/, so each surface brings its own.
 *
 * The DESCENDANT half is the one that does the work here: .specdoc-error and .specdoc-actions are
 * flex, and both are toggled by `hidden`. The ROOT half is kept deliberately even though the shell
 * toggles [data-spec-substate] rather than this node -- BRI-5505 owns that container and hides it,
 * and if this surface is ever hidden directly the rule must already be in place. Both selectors,
 * because they are not the same rule: no space = the root, space = its descendants. */
.specdoc[hidden],
.specdoc [hidden] {
  display: none !important;
}

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

/* The sections live in their OWN wrapper (the surface re-renders just this node when the spec
 * changes), so .specdoc's gap sits BETWEEN the wrapper, the error line and the actions — not
 * between sections. Without this rule every heading butts straight up against the paragraph above
 * it and the page reads as one undifferentiated block. Invisible to the unit rig, which has no
 * CSS: found by looking at the real page. */
.specdoc-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* ===================== TITLE ===================== */

.specdoc-title {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.25;
  color: var(--color-text);
}

.specdoc-title:focus {
  outline: none;
}

.specdoc-title:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ===================== SECTIONS ===================== */

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

.specdoc-h {
  margin: 0 0 var(--space-xs);
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--color-text);
}

.specdoc-line {
  margin: 0;
  line-height: 1.55;
  color: var(--color-text);
}

/* The "PROBLEM:" style inline label, and the standalone list captions. */
.specdoc-key {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

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

/* An empty section says so, quietly, and says WHY. It is never dressed up to look like content. */
.specdoc-empty {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text-muted);
  font-style: italic;
}

.specdoc-note {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text-muted);
}

/* The no-gos are load-bearing: they are one half of every coherence conflict, so their bullet is
 * amber rather than the default green.
 *
 * TWO TRAPS HERE, both of which produce a rule that lints clean, tests green, and does nothing:
 *   1. `.lite-preview-list` sets `list-style: none` and draws its bullet as a ::before with a
 *      BACKGROUND colour. So a `::marker { color: … }` rule styles a marker that is never
 *      rendered — verified in a browser, not inferred.
 *   2. The selector must out-specify `.lite-preview-list li::before` (0,1,1). A bare
 *      `.specdoc-nogo::before` is (0,1,0) and LOSES. Qualifying through the list makes it (0,2,1).
 * If you simplify this selector, check it in a browser: nothing will fail if you get it wrong. */
.lite-preview-list li.specdoc-nogo::before {
  background: var(--color-amber);
}

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

/* The left edge reinforces the words; it is NEVER the only signal, because "I need:" is real
 * text in the accessible name. */
.specdoc-ask,
.specdoc-ask-li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: baseline;
  margin: 0;
  padding-left: var(--space-sm);
  border-left: 3px solid var(--color-amber);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text);
}

.specdoc-ask-li {
  list-style: none;
}

/* A blocked list entry must not also wear the ordinary green bullet: the amber rule and the
 * "I need:" tag already carry its state, and a healthy-looking bullet beside them reads as a
 * contradiction. `list-style: none` above does NOT do this — the bullet is a ::before background
 * from .lite-preview-list, so it has to be suppressed explicitly, and through a selector that
 * out-specifies (0,1,1). Same trap as the no-go rule above. */
.lite-preview-list li.specdoc-ask-li::before {
  display: none;
}

.specdoc-ask-tag {
  font-weight: var(--font-weight-semibold);
  color: var(--color-amber-dark);
  white-space: nowrap;
}

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

/* BRI-5556 removed the `.specdoc-ask-why` modifier that used to sit here. The still-open items no
 * longer borrow this amber treatment at all — they are plain `.specdoc-note` paragraphs at the end
 * of the document (js/spec-final-doc.js), because the flag read as a warning about something the
 * user had got wrong. Everything above stays: it is the BLOCKED-field "I need:" line, which is a
 * genuine ask of the reader and does need to look like one. */

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

/* Progress is always "N of M", never a percentage -- the model authors the checklist and the
 * client does zero scoring, so there is no number to inflate. */
.specdoc-count {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

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

.specdoc-readiness-item {
  display: flex;
  gap: var(--space-xs);
  align-items: baseline;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text);
}

/* BRI-5621: ONE consistent color for both states — the glyph shape (✓ vs ○) plus the accessible
 * name ("done"/"not yet", set in js/spec-final-doc.js) already carry the met/not-met distinction;
 * a met item in muted gray next to a not-met item in amber/brown read as two different visual
 * languages in one list, not a met-vs-not-met signal. */
.specdoc-readiness-mark {
  color: var(--color-text-muted);
}

/* ===================== ACTIONS + STATUS ===================== */

/* House CTA pattern (BRI-5503): rag LEFT, matching baselines, secondary left / primary right, and
 * NOT full width. Deliberately not full-width even while Claim is the only button here — Download
 * as PDF joins it, and a CTA that changes width when a sibling appears reads as a layout bug. */
.specdoc-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: baseline;
  gap: var(--space-sm);
}

/* NO `order` HERE, DELIBERATELY. An earlier version set `order: 2` on the claim so that a secondary
 * (Download as PDF) added later would land to its left. BRI-5503's CTA rules — merged into
 * SPEC-BUILDER-CONTRACT.md §3 after this file was written — forbid exactly that: `order` moves a
 * button visually and leaves the TAB ORDER behind it, which is a Keyboard/Focus-Order failure, not
 * a style nit. It was inert while this row held one button, but it pre-committed the PDF work to
 * the forbidden mechanism.
 *
 * The secondary HAS now landed (BRI-5521). js/spec-final-spec.js appends Download as PDF BEFORE the
 * claim in DOM order, which is what puts it on the left AND gets the tab order right in one move.
 * Nothing here reorders anything, and nothing here should ever start. */

/* `.specdoc-actions .btn` is (0,2,0), which beats the shared `button.btn` (0,1,1) in
 * css/buttons.css. A single-class override would LOSE and none of this would apply — this repo has
 * already shipped that exact specificity miss (see the same note in css/spec-questions.css).
 *
 * Rule 4 (matching baselines) was VACUOUS while this row held a single CTA and is real now that it
 * holds two: equal min-height and equal font are what make `align-items: baseline` above line the
 * two labels up.
 *
 * The padding is 16px rather than the shared `.btn`'s 24px, matching .specq-actions: it buys back
 * ~32px of row and keeps the two side by side down to a wider breakpoint than they otherwise would
 * be. It does NOT make them fit at the narrowest width, and the comment here used to claim it did.
 *
 * 🔴 THEY STACK ON A NARROW COLUMN, AND THAT IS THE DELIBERATE OUTCOME. Measured in a real browser
 * (`.lite-wrap` capped at 544px leaves this row ~302px of usable width): the pair needs 324px at
 * 16px padding and 308px at 12px, so one row is only reachable by cutting the label to "Download
 * PDF" AND squeezing to 10-12px padding.
 *
 * That was rejected, and the reason is the BUSY state. "Preparing your PDF…" is the widest this row
 * ever gets and does not fit at ANY of those combinations, so a layout tuned to fit while idle
 * would REFLOW THE CLAIM BUTTON UNDER THE USER'S CURSOR the moment they press download. A stack
 * that is stable across every state beats a row that collapses during the one interaction it has.
 *
 * Stacking here is not the failure css/spec-questions.css records. That one dropped the PRIMARY
 * onto its own line, so reading order stopped ending on the committing action. Here the secondary
 * is first in DOM order, so a stack still reads Download then Claim: rule 1 (rag left) and rule 2
 * (auto width) hold on both lines, rule 3 holds by DOM order, and rule 4's matching baselines is a
 * within-row rule with no row left to apply to.
 *
 * No unit test can see any of this — the rig has no CSS and no layout. */
.specdoc-actions .btn {
  min-height: 44px; /* ≥44px touch target (contract §3) */
  flex: 0 1 auto;   /* never grow to fill the row */
  width: auto;
  padding: 0 1rem;
}

.specdoc-actions .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* The one honest home for a claim failure now that the review sheet is gone. */
.specdoc-error {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: baseline;
}

/* Visually hidden, but still announced. The status must reach assistive tech without a visual
 * change for a sighted user to hunt for. NOT `display: none` — that is not announced at all. */
.specdoc-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  /* clip-path, not the deprecated `clip` — matches .specref-live / .sr-only elsewhere in css/. */
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

/* Lifted from the review sheet (css/spec-claim.css) so the two cannot drift while both exist. The
 * review sheet is deleted by BRI-5505 and this becomes the only copy. */
.specdoc-ears-scroll {
  overflow-x: auto;
  border: 1px solid var(--color-border-subtle);
  border-radius: 8px;
}

.specdoc-ears-scroll:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.specdoc-ears {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.specdoc-ears th,
.specdoc-ears td {
  padding: 0.5rem 0.625rem;
  border-bottom: 1px solid var(--color-border-subtle);
  text-align: left;
  vertical-align: top;
}

.specdoc-ears th {
  background: var(--color-background-subtle);
  color: var(--color-text-muted);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.specdoc-ears-id,
.specdoc-ears-tpl {
  color: var(--color-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}