/* @version print-components-2026.09.05 - bump on ANY edit */
/* ============================================================================
   TRIUMPH DESIGN SYSTEMS: PRINT - components.css
   The component layer for Print: print pieces' light-page components and the
   system's on-screen reference pages. (Screens ships its own file.)
   Six components, nothing else: the button family, .kicker, .bignum,
   .quote-display, .ladder, and .detail-cols. The file also carries one helper that is not a
   component, .hero-word, because RULE 1b needs a class and hero-fit.js needs
   something to select. Everything colors and sizes through tokens.css;
   no raw hex in this file.
   Link order: tokens.css -> pattern.css -> logos.css -> components.css
   Navy-ground remaps key off a `.field-navy` or `.on-navy` ancestor.
   ========================================================================== */

/* ---- 1. Button family - SCREEN USE ONLY ----------------------------------
   For the on-screen reference and utility pages of Print. A PRINTED piece never
   carries a button (RULE 1: flyer, not web page); a flyer's call to action is
   type and a URL, never chrome. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 22px;
  font: 800 var(--text-sm)/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  text-decoration: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    transform var(--duration-fast) var(--ease-glide),
    background var(--duration-fast) ease,
    color var(--duration-fast) ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn:disabled,
.btn[disabled] { opacity: .45; transform: none; cursor: default; }

/* One focus ring, and only one: --focus-ring, straight out of tokens.css.
   The ground remaps the ring's colours, not this rule, so a .field-navy or
   .on-navy ancestor turns it lime without a second declaration here. */
.btn:focus-visible { outline: 0; box-shadow: var(--focus-ring); }

.btn-lime { background: var(--lime); color: var(--navy); }
.btn-lime:hover { background: var(--green); color: var(--ink-on-navy); }

.btn-navy { background: var(--navy); color: var(--ink-on-navy); }
.btn-navy:hover { background: var(--night); }
.btn-navy:active { background: var(--navy); }

/* Outline buttons: hover washes the ground, press eases that wash back as the
   1px lift drops. --press-on-fog and --press-on-navy are the :active step by
   definition in tokens.css, so they sit on :active and nowhere else. */
.btn-ol-navy {
  background: transparent;
  border: 2px solid var(--navy);
  color: var(--navy);
}
.btn-ol-navy:hover { background: var(--navy-subtle); }
.btn-ol-navy:active { background: var(--press-on-fog); }

.btn-ol-light {
  background: transparent;
  border: 1px solid var(--hairline-on-navy-strong);
  color: var(--ink-on-navy);
}
.btn-ol-light:hover { background: var(--hairline-on-navy); }
.btn-ol-light:active { background: var(--press-on-navy); }

/* ---- 2. Kicker -----------------------------------------------------------
   The square-marker eyebrow. Marker rides currentColor unless .featured.
   ONE .featured kicker per piece. */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font: 600 var(--text-label)/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ink-body);
}
.kicker::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: none;
  background: currentColor;
}
/* Flat green is --green. --green-dark is the dark stop of --grad-hero and
   nothing else, so it never paints ink or a marker. */
.kicker.featured {
  letter-spacing: var(--track-kicker);
  color: var(--green);
}
.kicker.featured::before { background: var(--green); }

.field-navy .kicker,
.on-navy .kicker { color: var(--text-alpha-70); }
.field-navy .kicker.featured,
.on-navy .kicker.featured { color: var(--lime); }
.field-navy .kicker.featured::before,
.on-navy .kicker.featured::before { background: var(--lime); }

/* ---- 3. Big number -------------------------------------------------------
   Tabular mono figure with a quiet label. Currency mark in .cur, unit in .u,
   both inside .bignum-value. */
.bignum {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.bignum-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
}
.bignum-value .cur {
  font-size: max(.55em, 12px);
  vertical-align: .42em;
  color: var(--ink-body);
}
.bignum-value .u {
  font-size: max(.48em, 12px);
  margin-left: .1em;
  color: var(--ink-body);
}
.bignum-label {
  font: 600 var(--text-label)/1.2 var(--font-mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-body);
}
.field-navy .bignum-value,
.on-navy .bignum-value { color: var(--ink-on-navy); }
.field-navy .bignum-value .cur,
.on-navy .bignum-value .cur,
.field-navy .bignum-value .u,
.on-navy .bignum-value .u,
.field-navy .bignum-label,
.on-navy .bignum-label { color: var(--ink-muted-navy); }

/* ---- 4. Display quote ----------------------------------------------------
   Heavy Inter pull quote under a short hero-gradient bar. Cite is a block,
   mono, upright. */
.quote-display {
  position: relative;
  padding-top: var(--space-4);
  margin: 0;
  font-weight: 900;
  font-size: var(--text-lg);
  line-height: 1.2;
  color: var(--ink);
  max-width: 34ch;
}
.quote-display::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 6px;
  background: var(--grad-hero); /* lime -> dark green, never flip */
}
.quote-display cite {
  display: block;
  margin-top: var(--space-3);
  font: 600 var(--text-label)/1.3 var(--font-mono);
  font-style: normal;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-body);
}

/* ---- 5. Price ladder -----------------------------------------------------
   Dot-leader price rows for print pieces; pt units on purpose. .t label,
   .d leader, .p price; .row.total closes the ladder. */
.ladder {
  display: grid;
  row-gap: 6pt;
}
.ladder .row {
  display: flex;
  align-items: baseline;
  gap: 5pt;
}
.ladder .t { font-weight: 600; color: var(--ink); }
.ladder .d {
  flex: 1;
  border-bottom: 1.5pt dotted var(--hairline);
  transform: translateY(-3pt);
}
.ladder .p {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink);
}
/* The 12pt gap is deliberate: the ladder's row-gap is 6pt, so a 6pt padding
   put the rule equidistant between the last line item and the total and it
   read as an underline on the row above. The rule belongs to the total. */
.ladder .row.total {
  border-top: 1pt solid var(--ink);
  padding-top: 12pt;
}
.ladder .row.total .t,
.ladder .row.total .p { font-weight: 800; }

.field-navy .ladder .d,
.on-navy .ladder .d { border-color: var(--hairline-on-navy-strong); }
.field-navy .ladder .t,
.on-navy .ladder .t,
.field-navy .ladder .p,
.on-navy .ladder .p { color: var(--ink-on-navy); }
.field-navy .ladder .row.total,
.on-navy .ladder .row.total { border-top-color: var(--ink-on-navy); }

/* ---- 6. Detail columns ---------------------------------------------------
   The sanctioned way to set match or event facts on a sheet: ONE full-width
   hairline with even columns hanging under it, each a quiet mono label over a
   heavy Inter value. RULE 1 bans the boxed grid a fact block always wants to
   become, so this component ships no cell borders, no panel, and no fill; the
   single rule is the whole structure. Markup:
     <div class="detail-cols">
       <div><span class="dc-k">Date</span><span class="dc-v">Sat 12 Jul</span></div>
       ... </div>
   Columns are even by construction (grid-auto-columns: 1fr), so three facts
   land on a real rhythm instead of hugging the left edge. Inks and the rule
   remap under .field-navy / .on-navy, which is what puts it on a weave band. */
.detail-cols {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-5);
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-3);
}
.detail-cols .dc-k {
  display: block;
  font: 600 var(--text-label)/1 var(--font-mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-body);
  margin-bottom: var(--space-2);
}
.detail-cols .dc-v {
  display: block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--text-md);
  line-height: 1.1;
  color: var(--ink);
}

/* .stack turns the same hairline-over-content idea vertical: one hairline per
   row, label left, value right, all rows on one rhythm. For fact rows sitting
   directly under a price pair, where three columns would out-weigh the number.
   Still no box. */
.detail-cols.stack {
  grid-auto-flow: row;
  grid-auto-columns: auto;
  gap: 0;
  border-top: 0;
  padding-top: 0;
}
.detail-cols.stack > * {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  border-top: 1px solid var(--hairline);
  padding: var(--space-3) 0;
}
.detail-cols.stack .dc-k { margin-bottom: 0; }

.field-navy .detail-cols,
.on-navy .detail-cols,
.field-navy .detail-cols.stack > *,
.on-navy .detail-cols.stack > * { border-top-color: var(--hairline-on-navy-strong); }
.field-navy .detail-cols .dc-k,
.on-navy .detail-cols .dc-k { color: var(--ink-muted-navy); }
.field-navy .detail-cols .dc-v,
.on-navy .detail-cols .dc-v { color: var(--ink-on-navy); }

/* ---- RULE 1b helper: the hero line ---------------------------------------
   Not a sixth component. This is the class RULE 1b names and the class
   hero-fit.js selects: put it on the one Fabiola headline of a sheet and the
   script shrinks the declared size until the phrase fits on ONE line, so
   BEER GARDEN can never break into a BEER over GARDEN column.
   white-space and max-width are the mechanism, not decoration; overriding
   either one turns the guarantee off. No line-height here on purpose: the
   leading is the sheet's business, and hero-fit.js writes 0.92 itself in the
   balanced-wrap fallback, which it can only do if nothing else has claimed the
   property. Pair it with the per-line side-bearing nudge from tokens.css when
   the hero sits flush left.
   Relationship to .h-display: tokens.css ships .h-display as the base Fabiola
   hero at the shared --text-hero. .hero-word is the print-sheet hero, which is
   the same face at --text-hero-print plus the one-line guarantee. A sheet
   carries one or the other, never both on the same headline. */
.hero-word {
  display: block;
  white-space: nowrap;
  max-width: 100%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-hero-print);
}