/* ==========================================================================
   THE TOOLS HUB (work order H1)

   The approved rendering is docs/design/tools-hub-reference-v7.html and
   this sheet reproduces its geometry from tokens. Every color is a
   token; every size is a token, a calc() of a token, or a rem value
   where the reference's hand-set size has no token (the T1 precedent).
   The reference's raw hexes and stand-in sans are not carried over.

   Size notes, the reference's hand-set values at the 16-per-rem base:
   680 = 42.5rem, 24 = --space-lg, 58 = 3.625rem, 46 = 2.875rem,
   26 = 1.625rem, 52 = 3.25rem, 54 = 3.375rem, 64 = 4rem,
   14 = .875rem, 13 = .8125rem, 42 = 2.625rem, 56 = 3.5rem.
   The reference's phone row breakpoint (430 wide) is 26.875rem, the
   same breakpoint T1 uses.
   ========================================================================== */

body {
  margin: 0;
  background: var(--color-ground);
  color: var(--color-ink-body);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-variant-numeric: var(--font-numeric-figures);
}

.wrap {
  max-width: 42.5rem;
  margin-left: auto;
  margin-right: auto;
  /* Side padding is written as the two longhands ON PURPOSE. The v2a
     reference shipped a vertical-padding shorthand that zeroed the
     wrap's side padding, and no overflow check could catch it; the H1
     work order answers with a gate that MEASURES each section's side
     margins at phone width (scripts/tools_hub_check.py). Longhands
     make the intent unshadowable. */
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

/* ---- masthead ---------------------------------------------------------- */

.top { padding-top: 1.625rem; }

.wordmark {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: 1.1875rem;
  letter-spacing: 0.34em;
  color: var(--color-gold-base);
  text-decoration: none;
}

/* ---- hero -------------------------------------------------------------- */

.hero { padding-top: 3.625rem; padding-bottom: 2.875rem; }

h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--weight-medium);
  font-size: clamp(2.25rem, 8vw, 3.25rem);
  line-height: 1.12;
  color: var(--color-headline);
  max-width: 15ch;
}

.hero .sub { margin: 1.25rem 0 0; font-size: var(--text-lead); max-width: 50ch; }
.hero .quiet { margin: 0.875rem 0 0; font-size: 0.90625rem; color: var(--color-ink-muted); }

/* ---- the live tool card ------------------------------------------------ */

.card {
  background: var(--color-surface-card);
  border: var(--border-hairline) solid var(--color-hairline);
  border-radius: var(--radius-lg);
  padding: 1.625rem;
}

.q {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: 1.625rem;
  line-height: 1.2;
}

.tech {
  margin-top: 0.3125rem;
  font-size: 0.78125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.card p { margin: 0.8125rem 0 0; font-size: var(--text-body); max-width: 50ch; }
.cardviz { margin-top: var(--space-md); }

/* Two cards, one wrap: the gap lives between them rather than in a
   second section, so the measured side margins of every section are
   exactly what they were. The reference's 24 is --space-lg. */
.card + .card { margin-top: var(--space-lg); }

/* ---- buttons ----------------------------------------------------------- */

.btn {
  display: inline-block;
  margin-top: 1.125rem;
  background: var(--color-gold-interface);
  color: var(--color-surface-card);
  text-decoration: none;
  font-size: 0.96875rem;
  font-weight: var(--weight-medium);
  padding: 0.8125rem 1.625rem;
  /* The reference's 10 sits between the two token radii; composed, not
     hardcoded. */
  border-radius: calc((var(--radius-sm) + var(--radius-md)) / 2);
}

.btn.ghost {
  background: transparent;
  color: var(--color-gold-interface);
  border: var(--border-chip) solid var(--color-gold-interface);
}

.btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* display:contents made form.submit silent. The form is a real box. */
.waitlist-form {
  margin: 1.125rem 0 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  max-width: 22rem;
}
.waitlist-form input[type="email"] {
  font: inherit;
  font-size: 0.96875rem;
  padding: 0.8125rem 1rem;
  border: var(--border-hairline) solid var(--color-hairline);
  border-radius: calc((var(--radius-sm) + var(--radius-md)) / 2);
  background: var(--color-surface-card);
  color: var(--color-ink-body);
  width: 100%;
}
.waitlist-form .btn {
  appearance: none;
  -webkit-appearance: none;
  margin-top: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
}
.waitlist-form .btn:not(.ghost) { border: 0; }

/* ---- the coming list --------------------------------------------------- */

.coming { padding-top: 3.25rem; }

.lead {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: 1.5rem;
  color: var(--color-ink-body);
}

.list { margin-top: 1.25rem; border-top: var(--border-hairline) solid var(--color-hairline); }

.row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  border-bottom: var(--border-hairline) solid var(--color-hairline);
}

.mini { width: 4rem; flex-shrink: 0; }

.rq {
  font-family: var(--font-serif);
  font-weight: var(--weight-medium);
  font-size: var(--text-lead);
  line-height: 1.3;
}

.rt {
  font-size: 0.71875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-top: 0.125rem;
}

.coming .after { margin: 1.25rem 0 0; font-size: 0.9375rem; color: var(--color-ink-muted); }
.btnrow { margin-top: 0.875rem; }

/* ---- the Tools+ band --------------------------------------------------- */

.plus { margin-top: 3.625rem; background: var(--color-surface-band); }
.plus .inner { padding-top: 3.375rem; padding-bottom: 3.625rem; }

/* THE SELECTOR CARRIES .plus ON PURPOSE (Goldy's ruling, 2026-08-18).
   Written bare as `.bigline` it scores 0,1,0, so the `.plus p` rule
   further down scores 0,1,1 and wins on specificity, and the trend line
   rendered at body size instead of display size. The approved reference
   carried the identical bug, which is how it reached review looking
   right in the markup and wrong on the page. v5 fixes the reference and
   this fixes the build; both now qualify the selector. The hub gate
   measures the computed size rather than reading this rule. */
.plus .bigline {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: clamp(1.75rem, 6.6vw, 2.375rem);
  line-height: 1.22;
  color: var(--color-headline);
  max-width: 20ch;
}

.plus h2 {
  margin: 1.375rem 0 0;
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: var(--text-title-sm);
}

.plus p { margin: var(--space-sm) 0 0; font-size: 1.03125rem; max-width: 50ch; }
.plus .price { margin-top: var(--space-sm); font-weight: var(--weight-semibold); }

/* ---- footer ------------------------------------------------------------ */

footer { padding-top: 2.625rem; padding-bottom: 3.5rem; }
footer p { margin: 0; font-size: 0.90625rem; color: var(--color-ink-muted); }
footer a { color: var(--color-gold-text-body); text-decoration: none; }

/* ---- the pictogram palette --------------------------------------------
   Chart-language meaning classes for the SVG icons: tinted fill plus a
   same-family outline at the data weight, exactly the law the reference
   note names. Cost tint = money that left, no judgment. -------------- */

.v-good   { fill: var(--color-chart-good-fill);      stroke: var(--color-chart-good-outline);      stroke-width: var(--border-data); }
.v-watch  { fill: var(--color-chart-watch-fill);     stroke: var(--color-chart-watch-outline);     stroke-width: var(--border-data); }
.v-attn   { fill: var(--color-chart-attention-fill); stroke: var(--color-chart-attention-outline); stroke-width: var(--border-data); }
.v-cost   { fill: var(--color-chart-cost-fill);      stroke: var(--color-chart-cost-outline);      stroke-width: var(--border-data); }
.v-anchor { fill: var(--color-chart-anchor); }

.v-line-anchor { fill: none; stroke: var(--color-chart-anchor); stroke-width: 1.6; }
.v-line-good   { fill: none; stroke: var(--color-chart-good-outline); stroke-width: 1.6; }
.v-mark        { stroke: var(--color-chart-anchor); stroke-width: 3; }
.v-base        { stroke: var(--color-hairline); stroke-width: var(--border-data); }
.v-conn        { stroke: var(--color-chart-connector); stroke-dasharray: 4 4; }
.v-text        { fill: var(--color-hairline); }
.v-note        { fill: none; stroke: var(--color-gold-base); stroke-width: var(--border-data); }
.v-arrow       { fill: none; stroke: var(--color-chart-label-secondary); stroke-width: 1.2; }
.v-lab         { fill: var(--color-chart-label-secondary); }
.v-check       { fill: var(--color-chart-good-outline); }

/* ---- card arrival. Charts build even when reduce zeros the
   interface durations. No JS means no .motion-ok, so the picture is
   already finished. ------------------------------------------- */

.motion-ok .fall-grow {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0);
  transition: transform var(--duration-build) var(--ease-out);
}
.motion-ok .fall-grow.is-drawn { transform: scaleY(1); }

.motion-ok .cross-grow {
  /* 304 is the length of each line: hypot(319 - 21, 79 - 21), rounded
     up so no sub-pixel tail is left showing. */
  stroke-dasharray: 304;
  stroke-dashoffset: 304;
  transition: stroke-dashoffset var(--duration-build) var(--ease-out);
}

.motion-ok .cross-grow.is-drawn { stroke-dashoffset: 0; }

.motion-ok .cross-dot {
  opacity: 0;
  transition: opacity var(--duration-build-fade) var(--ease-out);
}

.motion-ok .cross-dot.is-shown { opacity: 1; }

/* ---- the phone step, the reference's own row breakpoint ---------------- */

@media (max-width: 26.875rem) {
  .mini { width: 3.375rem; }
  .rq { font-size: 1.03125rem; }
}