/* Field card (contract C3) and the grids that hold it. Landing's sharpen-to
   reference and the Steels index both render through this file, loaded via
   each template's own head_extra block (base.html is not mine to edit).
   Tokens only, verbatim from app.css (C2) -- no new colour literals. */

.fc {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--card-pad);
  background: var(--paper-white);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
}

@media (prefers-reduced-motion: no-preference) {
  .fc {
    transition: transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out);
  }
  .fc:hover {
    transform: translateY(var(--lift-hover));
    box-shadow: var(--shadow-btn-hover);
  }
}

.fc:focus-visible {
  outline: 2px solid var(--lore-navy);
  outline-offset: 2px;
}

.fc__brand {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-pill);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.fc__steel {
  margin: 0;
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--ink-strong);
}

.fc__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}

.fc__ang {
  font-size: 30px;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--lore-navy);
  font-variant-numeric: tabular-nums;
}

.fc__ang small {
  font-size: var(--fs-meta);
  font-weight: var(--fw-regular);
  color: var(--ink-muted);
  margin-left: 2px;
}

/* No-pass state (input.md 2.3: absent is not zero) -- text, never 0deg. */
.fc__ang--nopass {
  font-size: var(--fs-h4);
  color: var(--ink-muted);
}

.fc__result {
  text-align: right;
}

/* Result chip. Bumped to --fs-small (14.5px, bold) rather than the canvas's
   --fs-micro: measured, --success (#4e7a63) on --surface-success (#e2ece6)
   is 4.05:1, which clears the WCAG AA large-text floor (3:1, text >=14px
   bold) but not the small-text floor (4.5:1) that --fs-micro would need.
   --danger on --surface-danger already clears 5.62:1 at any size. Hue is
   untouched on both tokens; only the chip's own text size changed. See
   changelist Accessibility section. */
.fc__chip {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-pill);
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid;
}

.fc__chip--pass {
  background: var(--surface-success);
  border-color: var(--border-success);
  color: var(--success);
}

.fc__chip--fail {
  background: var(--surface-danger);
  border-color: var(--border-danger);
  color: var(--danger);
}

.fc__n {
  margin-top: 2px;
  font-size: var(--fs-meta);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* Card grid (visual spec): repeat(auto-fill, minmax(--card-min, 1fr)),
   gap --grid-gap, single column under 680px (contract C8 breakpoint). */
.fc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
  gap: var(--grid-gap);
}

@media (max-width: 679px) {
  .fc-grid {
    grid-template-columns: 1fr;
  }
}

/* Steels index: category heading above each grid. */
.fc-cat {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: var(--sp-6) 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border-parch);
}

.fc-cat:first-of-type {
  margin-top: var(--sp-4);
}

/* Steels index: All / Passed / Not yet filter, same shape as the canvas
   pills but scoped under fc- so it cannot collide with another leaf's
   pill classes landing in app.css or layout.css later. */
.fc-filter {
  display: flex;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 var(--sp-5);
}

.fc-filter__link {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-card);
  color: var(--ink-body);
  background: var(--paper-white);
  text-decoration: none;
}

.fc-filter__link:focus-visible {
  outline: 2px solid var(--lore-navy);
  outline-offset: 2px;
}

.fc-filter__link.is-on {
  border-color: var(--lore-navy);
  background: var(--lore-navy);
  color: var(--parchment);
}

/* Landing: angle band grouping the sharpen-to cards, one per feasible angle. */
.fc-band {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--grid-gap);
  align-items: start;
  margin-top: var(--sp-5);
}

.fc-band__ang {
  font-size: 44px;
  font-weight: var(--fw-bold);
  color: var(--lore-navy);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.fc-band__label {
  margin-top: var(--sp-1);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
}

@media (max-width: 679px) {
  .fc-band {
    grid-template-columns: 1fr;
  }
}

/* Landing: stats card foot line (last test date, pass count, HRC coverage). */
.stats-strip__foot {
  margin: var(--sp-4) 0 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-parch);
  font-size: var(--fs-meta);
  color: var(--ink-muted);
}

/* ============================================================================
   A1 decrowd pass, 2026-09-08. Steel-first reference card (Sivali: "it feels
   like a brand + steel when people just want a quick answer like what steel
   what angle... then maybe small letter to show which brand we work on").

   Deliberately a NEW namespace (.steel-card*), not a restyle of .fc*: .fc and
   steel_card.html are shared with the Steels index (A2, editing in parallel),
   and this card pools one steel across brands rather than rendering one
   steel-and-brand pair, which is a different shape, not a different skin.
   Reuses .fc-grid for layout (identical grid need, no reason to fork it) and
   the .fc__chip pass-state tokens verbatim (already measured to 4.05:1 on
   --fs-small bold, see that rule's comment above) so the two card families
   read as siblings on the same page. #}
/* R3 (Sivali, 2026-09-09): "there is no like card to show some border sth".
   Measured live: the declared .steel-card border/face boundary was real in
   the DOM and imperceivable on screen -- face vs page ground 1.23:1, hairline
   vs face 1.58:1, both under the 3:1 non-text floor. The card rule itself was
   never wrong; nothing in it was visible.

   Fix has two parts, both reusing existing tokens, no new colour:
   1. Border recoloured from --border-card (a warm-tan hairline meant for
      table/parchment dividers, see cards.css .fc-cat/.fc-filter__link) to
      --field-teal, the token app.css already documents as "labels,
      overlines, hairlines -- NOT body text (3.03:1)". Measured: 3.73:1
      against the paper-white face, 3.03:1 against the parchment page
      ground -- clears 3:1 on BOTH sides of the line, not just the one the
      gate checks, so the boundary reads whether the eye tracks it from
      inside the card or from the gap between cards. Deliberately not a
      dark navy outline (Ethan's brief: that fights the low-chroma earth
      palette) -- field-teal is already a muted, in-palette hue with no hex
      literal added (contract C2, test_cards_css_introduces_no_new_colour_literals).
   2. Elevation upgraded from --shadow-card (1px/3px blur, 12% navy -- the
      "12% hint" the brief named) to --shadow-btn (2px/5px, 20%), the same
      resting elevation this canvas already gives its buttons. Hover keeps
      --shadow-btn-hover, so the card now lifts through the same two-step
      language a .btn does instead of a shadow so faint it could not do the
      job alone. */
.steel-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--card-pad);
  background: var(--paper-white);
  border: 1px solid var(--field-teal);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-btn);
  text-decoration: none;
  color: inherit;
  touch-action: manipulation;
}

@media (prefers-reduced-motion: no-preference) {
  .steel-card {
    transition: transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out);
  }
  .steel-card:hover {
    transform: translateY(var(--lift-hover));
    box-shadow: var(--shadow-btn-hover);
  }
}

.steel-card:focus-visible {
  outline: 2px solid var(--lore-navy);
  outline-offset: 2px;
}

/* Steel leads (web-interaction.md 1.5: name/lead with the widest thing the
   card is about). Brand is demoted to .steel-card__brands below, never
   removed -- D1 requires it stay visible, just not first. */
.steel-card__name {
  margin: 0;
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--ink-strong);
}

.steel-card__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}

.steel-card__angle {
  font-size: 30px;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--lore-navy);
  font-variant-numeric: tabular-nums;
}

.steel-card__angle small {
  font-size: var(--fs-meta);
  font-weight: var(--fw-regular);
  color: var(--ink-muted);
  margin-left: 2px;
}

.steel-card__result {
  text-align: right;
}

/* Pass-state chip, tokens identical to .fc__chip (see that rule's comment):
   --fs-small (14.5px bold) clears the WCAG AA large-text floor (3:1) at
   --success on --surface-success (4.05:1 measured), which --fs-micro would
   not. Every card in this reference passed, by construction (pooled from
   PASS_WITH_ANGLE rows only), so only the pass variant exists here. */
.steel-card__chip {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-pill);
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-success);
  background: var(--surface-success);
  color: var(--success);
}

.steel-card__n {
  margin-top: 2px;
  font-size: var(--fs-meta);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* Brand fine print (D1: demoted, never deleted). Shows the winning maker,
   and -- only when another brand also tested this steel -- how many and
   whether their angle differs, so a reader can see the split the moment it
   exists rather than assuming one brand speaks for the steel. */
.steel-card__brands {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-pill);
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Third outcome (input.md 2.3, web-interaction.md 1.5): passed the full cut
   count with no micro-bevel angle on record. Its own quiet list, never a
   card with an invented degree and never folded into "no pass" -- a plain
   text row is enough to say "we know this passed; we don't know at what
   angle" without borrowing either the pass-card or the fail-chip language. */
.sharpen-ref__noangle {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-parch);
}

.sharpen-ref__noangle-head {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--sp-2);
}

.sharpen-ref__noangle-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
}

.sharpen-ref__noangle-list a {
  font-weight: var(--fw-bold);
  color: var(--lore-navy);
}

.sharpen-ref__noangle-brand {
  font-size: var(--fs-meta);
  color: var(--ink-muted);
}

/* Reference section foot note: steels with no pass yet (absent is not zero
   -- input.md 2.3 -- named as a count, not silently dropped). */
.sharpen-ref__foot {
  margin-top: var(--sp-5);
  font-size: var(--fs-meta);
  color: var(--ink-muted);
}

.sharpen-ref__foot a {
  color: var(--lore-olive);
}

/* Landing: merged spotlight + near-miss section wrapper. The two children
   keep their own .spotlight-band / .nearmiss-band classes and layout.css
   rules (border-top, padding) unchanged; this only removes the extra
   <section> that used to wrap each one, so the page carries one fewer
   top-level section without touching either subsection's own styling. */
.notable-band {
  padding-top: var(--sp-2);
}

/* ============================================================================
   Web Interface Guidelines review, 2026-09-09 (whole app): no heading anywhere
   used text-wrap for widow control, and no tap target set touch-action, so
   every tap carried the 300ms double-tap delay. Fixed here for every heading
   and interactive element landing.html actually renders -- this file is what
   I own; layout.css owns the base rule for several of these selectors and is
   frozen, but adding one extra property alongside a frozen rule is additive,
   not an edit to that file. A landing page whose cards are mostly a steel
   name and a number is exactly where a widowed heading is visible. */
.hero h1,
.sharpen-ref__title,
.steel-card__name,
.fc__steel,
.fc-cat,
.section-title,
.metric-explain h2,
.step h3,
.variable h3,
.spotlight-card__name {
  text-wrap: balance;
}

.btn,
.spotlight-card,
.nearmiss-row,
.fc-filter__link,
.sharpen-ref__noangle-list a {
  touch-action: manipulation;
}

/* ============================================================================
   Ledger (round three, B2 option 1), 2026-09-09. Replaces .fc-band/.fc-grid
   as the landing page's primary "find your steel" reference; .fc* and
   .steel-card* stay in the file for this round (they still back the two
   degraded fallback branches and the Steels index) -- OUT-OF-SCOPE DEFECT
   below names their eventual removal.

   Contrast correction, measured with tools/gates/_common.contrast (the same
   helper the gate uses), not trusted from a token comment (verification.md
   2.2, "source-level proof is not screen-level proof" -- a comment is
   source-level):
     --deep-teal   (#46707e) on --parchment measures 4.41:1, NOT the 4.5:1+
                   the app.css comment claims ("clears 4.5:1 where teal text
                   is needed"). It is fine for the one entry here that is
                   16px bold (>=14px bold clears the WCAG AA large-text 3:1
                   floor), but the design also asks for the same hue at
                   12.5px and 11.5px, both of which need 4.5:1 and fail by
                   0.09:1 -- not a rounding-distance miss, a real one.
     --ink-muted   (#6e664f) on --parchment measures 4.65:1, clearing 4.5:1.
                   The brief's own figure for this token (3.23:1) is the
                   token's PRE-darkening literal (#8a7f63, see app.css's own
                   comment above --ink-muted); the live token already passes,
                   so brand fine print stays on --ink-muted, unchanged from
                   every other card family in this file.
   --ledger-teal-text is a computed blend, not a new literal (the colour-
   literal test scans for hex/rgb()/hsl() text, which color-mix() is none
   of): 90% --deep-teal / 10% --lore-navy, measuring 4.91:1, close enough to
   read as the same teal while clearing 4.5:1 at every size the design uses
   it. BRAND ASSUMPTION - darkened the small-text teal role (per-side label,
   family label, +N, N tests, repeat entries) 10% toward navy to clear
   4.5:1; kept literal --deep-teal only on the 16px bold repeat steel name,
   where 4.41:1 already clears the large-text 3:1 floor - Milo review
   recommended. */
:root {
  --ledger-teal-text: color-mix(in srgb, var(--deep-teal) 90%, var(--lore-navy) 10%);
}

.ledger {
  margin-top: var(--sp-6);
}

.ledger__row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 0 var(--sp-7);
  padding: var(--sp-5) 0 var(--sp-4);
  border-top: 1px solid var(--border-parch);
}

.ledger__row:first-child {
  border-top: 2px solid var(--lore-navy);
}

.ledger__ang {
  font-size: 44px;
  font-weight: var(--fw-bold);
  line-height: .9;
  color: var(--lore-navy);
  letter-spacing: -.02em;
}

.ledger__ang small {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ledger-teal-text);
}

.ledger__families {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--sp-6);
}

.ledger__fam {
  min-width: 0;
}

.ledger__famlab {
  margin-bottom: var(--sp-1);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ledger-teal-text);
}

.ledger__run {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2) var(--sp-4);
  align-content: start;
}

.ledger__ent {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--sp-1);
  line-height: 1.3;
  min-width: 0;
}

.ledger__steel {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--lore-navy);
  text-decoration: none;
  touch-action: manipulation;
}

.ledger__steel:hover {
  text-decoration: underline;
}

.ledger__steel:focus-visible {
  outline: 2px solid var(--lore-navy);
  outline-offset: 2px;
}

.ledger__brand {
  font-size: var(--fs-meta);
  color: var(--ink-muted);
}

.ledger__more {
  font-weight: var(--fw-bold);
  color: var(--ledger-teal-text);
}

.ledger__n {
  font-size: var(--fs-micro);
  color: var(--ledger-teal-text);
  font-variant-numeric: tabular-nums;
}

/* Repeat entry (`primary: false`, the steel's higher passing angle): steel
   name and brand both move to the teal-text role instead of navy/muted, so
   the two occurrences of a two-angle steel read as "same steel, secondary
   result" without a second label (locked design, .unlazy/ledger/PLAN.md). */
.ledger__ent--rep .ledger__steel {
  color: var(--ledger-teal-text);
}

.ledger__ent--rep .ledger__brand {
  color: var(--ledger-teal-text);
}

.ledger__foot {
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-parch);
  font-size: var(--fs-caption);
  color: var(--ink-body);
  line-height: 1.6;
}

@media (max-width: 679px) {
  .ledger__row {
    grid-template-columns: 1fr;
    gap: var(--sp-2) 0;
    padding: var(--sp-4) 0 var(--sp-3);
  }

  .ledger__ang {
    font-size: 32px;
  }

  .ledger__families {
    grid-template-columns: 1fr;
    gap: var(--sp-4) 0;
  }

  .ledger__run {
    grid-template-columns: 1fr;
  }

  /* 44px tap height (web-interaction.md, touch targets): only the steel
     name is the <a>, so the padding has to sit on the link itself, not on
     the row, or the row could be tall while the real hit target stays
     text-sized. */
  .ledger__steel {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 0;
  }
}