/* The Audio Toolkit — Console
   A calculator is a channel strip. Inputs and results sit in recessed windows
   cut into a console surface, not on raised cards. #00d4aa survives, but as a
   signal-present LED on live values and focus, not as an accent sprayed across
   backgrounds and gradients. Mobile-first, dark only. */

/* ── Typefaces ──────────────────────────────────────────────────────────
   Self-hosted so the site keeps making zero third-party requests. Both are
   weight-variable latin subsets pulled from Google Fonts; licence in
   /fonts/OFL.txt. Martian Mono also carries a width axis (75–112.5%). */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/archivo-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo Narrow';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fonts/archivo-narrow-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 112.5%;
  font-display: swap;
  src: url('/fonts/martian-mono-latin.woff2') format('woff2');
}

/* ── Tokens ─────────────────────────────────────────────────────────────
   The old --color- and --spacing- names are kept as aliases of these tokens.
   guides.css, limiter-calculator.css, bpm-to-ms/styles.css and the inline CSS
   in ear-training.html all reference them, so retokenising here rethemes those
   without touching them. --color-bg maps to the recessed well, not the page
   ground: everywhere it is used outside this file it means "inset surface". */
:root {
  /* Console surface */
  --field:  #1b1e22;   /* page ground, console graphite */
  --strip:  #23272c;   /* raised channel strip */
  --well:   #101316;   /* recessed window interior */
  --rule:   #32383f;   /* hairline */
  --rule-2: #272c32;   /* quieter hairline */

  /* Ink */
  --silk:  #e6e3dd;    /* warm off-white silkscreen */
  --muted: #8a939c;
  --faint: #5e666e;

  /* Signal */
  --led:     #00d4aa;
  --led-hi:  #2ee3c0;
  --led-dim: rgba(0, 212, 170, 0.16);
  --amber:   #f0a93c;
  --red:     #e4573d;

  --font-sans:   'Archivo', system-ui, -apple-system, sans-serif;
  --font-narrow: 'Archivo Narrow', 'Archivo', system-ui, sans-serif;
  --font-mono:   'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;
  --spacing-2xl: 64px;

  /* Console gear has small radii, not pills. */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 3px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
  --shadow-md: 0 2px 6px rgba(0,0,0,.5);
  --shadow-lg: 0 4px 14px rgba(0,0,0,.55);
  --inset:     inset 0 2px 5px rgba(0,0,0,.65);

  --transition: 120ms cubic-bezier(.2,.6,.3,1);
  --max-width: 720px;

  /* Legacy aliases */
  --color-bg: var(--well);
  --color-bg-card: var(--strip);
  --color-bg-elevated: #1f2429;
  --color-text: var(--silk);
  --color-text-muted: var(--muted);
  --color-primary: var(--led);
  --color-primary-hover: var(--led-hi);
  --color-primary-dim: var(--led-dim);
  --color-border: var(--rule);
  --color-error: var(--red);
  --color-success: var(--led);
  --color-warning: var(--amber);
}

/* ── Reset & base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
/* Any explicit display beats the UA stylesheet's [hidden] rule, so hidden
   elements stay visible unless this is stated. */
[hidden] { display: none !important; }
body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.55;
  background: var(--field);
  color: var(--silk);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Headings are never uppercased. Content carries meaningful casing — dB, ms,
   BPM, SpeakON, dBFS — and "DB CONVERTER" is simply wrong. Silkscreen caps are
   reserved for .silk, the desk's own labels, which are never content. */
h1, h2, h3, h4 { font-family: var(--font-narrow); font-weight: 700; line-height: 1.15; color: var(--silk); }
h1 { font-size: clamp(1.5rem, 6vw, 2rem); letter-spacing: -0.005em; }
h2 { font-size: clamp(1.125rem, 3.5vw, 1.3125rem); letter-spacing: 0.01em; }
h3 { font-size: 1rem; letter-spacing: 0.02em; }
p { color: var(--muted); }
a { color: var(--led); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--led-hi); }
strong { color: var(--silk); font-weight: 600; }
em { color: var(--silk); font-style: italic; }
code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: 0.8125em;
  font-variant-numeric: tabular-nums;
}

/* ── Silkscreen label: the console's own voice ───────────────────────────
   Reserved for the desk's labels. Never applied to content: tool names carry
   meaningful casing (dB, ms, BPM, SpeakON) that uppercasing would destroy. */
.silk {
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Surfaces ────────────────────────────────────────────────────────── */
.strip {
  background: linear-gradient(180deg, #262b31 0%, #202429 100%);
  border: 1px solid #2e343b;
  border-top-color: #3a424a;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.045);
}
.well {
  background: var(--well);
  border: 1px solid #0b0e10;
  border-top-color: #070909;
  border-radius: var(--radius-md);
  box-shadow: var(--inset), inset 0 -1px 0 rgba(255,255,255,.04);
}

/* ── Header ──────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--field);
  border-bottom: 1px solid var(--rule);
}
.site-header .container {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--spacing-lg);
  align-items: center;
  height: 54px;
}
.logo {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--silk);
  flex-shrink: 0;
  white-space: nowrap;
}
.logo:hover { color: var(--led); }
.logo span {
  font-family: var(--font-narrow);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
}
.logo-icon { width: 22px; height: 22px; color: var(--led); flex-shrink: 0; }

/* Two labels, at every width. Six tool links behind a hamburger was more
   chrome than an eight-page site needs, and it left a dead zone between 640
   and 1025px where the full nav overflowed. The footer still links every
   tool from every page, and /tools/ lists them with descriptions. */
.main-nav { grid-column: 2; justify-self: end; display: flex; gap: var(--spacing-lg); }
.nav-link {
  position: relative;
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.045em;
  color: var(--muted);
  padding: var(--spacing-sm) 0;
  white-space: nowrap;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1px;
  background: var(--led);
  transform: scaleX(0);
  transition: transform var(--transition);
}
.nav-link:hover { color: var(--led); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { color: var(--silk); }

/* ── Page intro ──────────────────────────────────────────────────────── */
.intro, .hero { padding: 40px 0 28px; }
.hero { text-align: left; }
/* No per-block ch cap. The column is the measure: --max-width holds every
   text block to the same 680 as the h1, the panels and the row list, so the
   page has one right edge as well as one left edge. A cap here only ever put
   prose short of its own siblings. */
.intro p, .hero-subtitle { color: var(--muted); margin-top: 10px; }
#hero-title .brand-highlight { color: inherit; }

.section-title {
  display: block;
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 9px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--rule);
}

/* ── Tool list: each row is a channel on the desk ────────────────────── */
.group { margin-bottom: 34px; }
.group:last-of-type { margin-bottom: var(--spacing-2xl); }
.group > .silk { display: block; padding-bottom: 9px; border-bottom: 1px solid var(--rule); }

.row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: var(--spacing-md);
  padding: 15px 0 15px 14px;
  border-bottom: 1px solid var(--rule-2);
  color: inherit;
  position: relative;
  min-height: 60px;
}
.row::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--rule);
  transition: background var(--transition);
}
.row:hover::before, .row:focus-visible::before { background: var(--led); }
.row-name {
  font-family: var(--font-narrow);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  transition: color var(--transition);
}
.row:hover .row-name, .row:focus-visible .row-name { color: var(--led); }
.row-desc { grid-column: 1; font-size: 0.875rem; color: var(--muted); margin-top: 2px; }
/* The right-hand token names the units the tool works in, not what it returns.
   It carries no column header: as a header it would have made a factual claim
   that is false for most rows. */
.row-out {
  grid-row: 1;
  grid-column: 2;
  align-self: baseline;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--muted);
  white-space: nowrap;
  transition: color var(--transition);
}
.row:hover .row-out, .row:focus-visible .row-out { color: var(--led); }

/* ── Tool page head ──────────────────────────────────────────────────── */
.tool-page { padding: 0 0 var(--spacing-2xl); }
.tool-header { text-align: left; padding: 34px 0 22px; margin-bottom: 0; }
.tool-header .silk { display: block; margin-bottom: 7px; color: var(--faint); }
.tool-header h1 {
  font-size: clamp(1.5rem, 6vw, 1.875rem);
  letter-spacing: -0.005em;
  margin-bottom: 0;
}
.tool-header p { margin: 10px 0 0; font-size: 0.9375rem; }

/* ── Panels ──────────────────────────────────────────────────────────── */
.panel, .tool-calculator {
  background: linear-gradient(180deg, #262b31 0%, #202429 100%);
  border: 1px solid #2e343b;
  border-top-color: #3a424a;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.045);
  padding: 18px 18px 20px;
  margin-bottom: 18px;
}
@media (max-width: 480px) { .panel, .tool-calculator { padding: var(--spacing-md) 14px 18px; } }
/* Panel titles are headers, not just another silkscreen label. */
.panel > .silk {
  display: block;
  color: var(--silk);
  font-size: 0.75rem;
  padding-bottom: 11px;
  margin-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--rule-2);
}

/* ── Fields ──────────────────────────────────────────────────────────── */
/* Two-up even on a phone: four stacked full-width fields is too much
   scrolling for someone holding the handset at a gig. */
.fields { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (min-width: 560px) { .fields { gap: var(--spacing-md); } }
.fields.trio > .f:last-child { grid-column: 1 / -1; }
@media (min-width: 560px) {
  .fields.trio { grid-template-columns: 1fr 1fr 1fr; }
  .fields.trio > .f:last-child { grid-column: auto; }
}
.calculator-row { display: grid; gap: 12px; margin-bottom: var(--spacing-md); }
@media (min-width: 560px) { .calculator-row { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--spacing-md); } }

.f, .field-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.f label, .field-group label {
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
  cursor: pointer;
}
.f-in { position: relative; display: block; }

.f input, .f select,
.field-group input, .field-group select,
.form-field input, .form-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 12px;
  font-family: var(--font-mono);
  font-stretch: 87.5%;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  color: var(--silk);
  background: var(--well);
  border: 1px solid #0b0e10;
  border-top-color: #070909;
  border-radius: var(--radius-md);
  box-shadow: var(--inset);
  transition: box-shadow var(--transition), border-color var(--transition);
  appearance: none;
  -webkit-appearance: none;
}
.f input, .field-group input { -moz-appearance: textfield; }
.f input, .f select, .field-group input, .field-group select { padding-right: 38px; }
.form-field input, .form-field textarea {
  font-family: var(--font-sans);
  font-stretch: normal;
  font-size: 1rem;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.f input::placeholder, .field-group input::placeholder { color: #2c3339; }
.f input:focus, .f select:focus,
.field-group input:focus, .field-group select:focus,
.form-field input:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--led);
  box-shadow: var(--inset), 0 0 0 2px var(--led-dim);
}
.field-group select, .f select {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

/* Unit tag sits inside the window, right-aligned, silkscreened. */
.f-unit, .field-group .unit {
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--faint);
  pointer-events: none;
}
.f-unit {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
}
/* .has-unit is a grid so the unit can overlay row 2 without absolute
   positioning fighting the label and hint rows. */
.field-group.has-unit {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.field-group.has-unit > label { grid-row: 1; }
.field-group.has-unit > input,
.field-group.has-unit > select { grid-row: 2; }
.field-group.has-unit > .unit { grid-row: 2; justify-self: end; align-self: center; margin-right: 13px; }
.field-group.has-unit > .hint { grid-row: 3; }

/* Chevron for selects — iOS Safari ignores background-image on <select>,
   so it has to be drawn on the wrapper. */
.select-wrap, .f-in.sel { position: relative; display: block; }
.select-wrap::after, .f-in.sel::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  pointer-events: none;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  transition: border-color var(--transition);
}
.select-wrap:focus-within::after, .select-wrap:hover::after,
.f-in.sel:focus-within::after { border-color: var(--led); }

.f .note, .field-group .hint, .hint { font-size: 0.75rem; color: var(--faint); line-height: 1.4; }
/* A panel's own explanatory line, above the fields or below the results. */
.panel > .note { font-size: 0.8125rem; margin-bottom: var(--spacing-md); }
.panel > .ro-sub + .note { margin: var(--spacing-md) 0 0; }
.panel > .btn { margin-top: var(--spacing-md); }
@media (max-width: 480px) { .f input, .f select, .field-group input, .field-group select { font-size: 16px; } }

/* The field currently driving the calculation is lit, the way a selected
   channel is lit on a desk. A four-way converter is otherwise ambiguous about
   which value is the source and which three are derived. */
.f.is-src > label, .field-group.is-src > label { color: var(--led); }
.f.is-src .f-in::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--led);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  box-shadow: 0 0 6px rgba(0, 212, 170, .5);
  z-index: 2;
}

/* Equal label heights keep paired input boxes aligned. */
@media (min-width: 560px) {
  .calculator-row.core-inputs, .calculator-row.amp-gain-row { grid-template-columns: 1fr 1fr; align-items: start; }
}
.calculator-row.core-inputs .field-group > label,
.calculator-row.amp-gain-row .field-group > label { min-height: 2.8em; }

/* ── Readout: recessed window with a meter scale ─────────────────────── */
.readout, .results {
  position: relative;
  background: var(--well);
  border: 1px solid #0b0e10;
  border-top-color: #070909;
  border-radius: var(--radius-md);
  box-shadow: var(--inset), inset 0 -1px 0 rgba(255,255,255,.04);
  padding: 22px 20px 18px;
  margin-bottom: 26px;
}
@media (max-width: 480px) { .readout, .results { padding: 20px 14px 14px; } }
/* One scale, not two. A second, finer row of ticks was decoration. */
.readout::before, .results::before {
  content: "";
  position: absolute;
  left: 1px; right: 1px; top: 1px;
  height: 5px;
  background: repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 24px);
  opacity: .7;
  pointer-events: none;
}
.results { margin-top: var(--spacing-md); }
.results h3 {
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 6px;
}

.ro-head { display: flex; align-items: center; gap: 9px; margin-bottom: var(--spacing-md); }
.ro-head .silk { color: var(--faint); }
/* Signal-present lamp: on when the readout is showing a real value. */
.sig { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.sig i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2b3237;
  display: block;
  transition: background var(--transition), box-shadow var(--transition);
}
.sig.on i { background: var(--led); box-shadow: 0 0 7px rgba(0,212,170,.75); }
.sig span {
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--faint);
}
.sig.on span { color: var(--led); }

.ro-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ro-val {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(2rem, 9vw, 2.75rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--led);
  transition: color var(--transition);
}
.ro-val.idle { color: #333a41; }
/* Meter states, so a level readout warns the way a meter does. */
.ro-val.warn { color: var(--amber); }
.ro-val.hot { color: var(--red); }
/* Never uppercased: this prints real units, where ms and dB casing matters. */
.ro-unit { font-family: var(--font-mono); font-size: 1rem; color: var(--muted); }

.ro-sub { margin-top: 18px; border-top: 1px solid #1b1f23; padding-top: 4px; }

/* Dotted leader lines carry the eye from label to value, the way a spec sheet
   does. They replace the row rules: one device doing the job, not two. */
/* Wrapping matters on a phone: a long value drops to its own full-width line
   rather than pushing the row past the viewport. */
.ro-line, .result-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 9px;
  padding: 9px 0;
}
.ro-line > .silk { flex: none; }
.lead {
  flex: 1 1 auto;
  min-width: 14px;
  align-self: center;
  border-bottom: 1px dotted #363d44;
  transform: translateY(-2px);
}
.ro-line b, .result-value {
  flex: 0 1 auto;
  margin-left: auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-stretch: 87.5%;
  font-weight: 400;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  color: var(--silk);
  text-align: right;
}
/* Empty states are prose, not a value. Keeping them in the same face made
   placeholder text read as data. */
.ro-line b.idle {
  color: var(--faint);
  font-family: var(--font-sans);
  font-size: 0.875rem;
}
.ro-line b.led { color: var(--led); }
.ro-line b.warn { color: var(--amber); }
.ro-line b.hot { color: var(--red); }

/* .result-row is the pre-Console markup for the same thing: a label and a
   value with nothing between them, so the leader is grown from the label. */
.result-label {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.result-label::after {
  content: "";
  flex: 1 1 auto;
  min-width: 14px;
  align-self: center;
  border-bottom: 1px dotted #363d44;
  transform: translateY(-2px);
}
.result-label em { font-style: normal; color: var(--faint); text-transform: none; letter-spacing: 0; }
.result-value.warning { color: var(--amber); }
.result-value.error { color: var(--red); }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: 13px 20px;
  font-family: var(--font-narrow);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  min-height: 48px;
  touch-action: manipulation;
}
/* The primary action is a momentary switch on the panel, not a filled slab.
   Nothing on this site is a block of mint: the LED is always a signal sitting
   on a recessed surface, and it lights on contact. */
.btn-primary {
  background: var(--well);
  color: var(--led);
  border-color: #0b0e10;
  border-top-color: #070909;
  box-shadow: var(--inset);
}
.btn-primary:hover { color: var(--led-hi); box-shadow: var(--inset), 0 0 0 1px rgba(0,212,170,.35); }
.btn-primary:active {
  background: rgba(0, 212, 170, 0.13);
  box-shadow: var(--inset), 0 0 0 1px var(--led);
}
.btn-outline {
  background: transparent;
  color: var(--muted);
  border-color: var(--rule);
}
.btn-outline:hover { color: var(--led); border-color: var(--led); background: var(--led-dim); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Prose: the manual, not the instrument ───────────────────────────────
   Long-form copy and the FAQ sit below the tool and stay quiet. Quiet means
   given less weight, not given less thought.

   The governing rule: a recessed well means a live value. Reference material
   never gets one. Formula blocks and table headers used to sit in wells with
   an inset shadow, which is the readout's own material, so the manual was
   wearing the instrument's clothes. */

/* One real threshold, not five identical hairlines: the first prose block is
   where the instrument ends and the manual begins, and the rest are section
   breaks. Expressed as "every block gets the threshold, then any block
   following another gives it up", because :first-of-type would match the
   first <section> on the page — which on a tool page is the readout. */
.content-section {
  border-top: 1px solid var(--rule);
  padding-top: var(--spacing-xl);
  margin: var(--spacing-lg) 0 var(--spacing-xl);
}
.content-section + .content-section {
  border-top-color: var(--rule-2);
  padding-top: var(--spacing-lg);
  margin-top: 0;
}

.content-section h2 {
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  color: var(--silk);
  margin-bottom: var(--spacing-md);
}
/* h2 and h3 are the same face, weight and colour, so the step has to come
   from size and from space. The gap above an h3 is wider than a paragraph
   break, which is what binds it to the text below it rather than leaving it
   floating between two blocks. */
.content-section h3 {
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--silk);
  margin: var(--spacing-xl) 0 var(--spacing-sm);
}
.content-section h3:first-child { margin-top: 0; }

.content-section p,
.content-section li { font-size: 0.9375rem; line-height: 1.65; }
/* The gap has to beat the leading or paragraphs read as one slab. */
.content-section p { margin-bottom: var(--spacing-lg); }
.content-section ul,
.content-section ol { margin-bottom: var(--spacing-lg); padding-left: var(--spacing-lg); color: var(--muted); }
.content-section li { margin-bottom: var(--spacing-sm); }
.content-section li::marker { color: var(--faint); }
.content-section > *:last-child { margin-bottom: 0; }

/* Inline code needs no chip: the change of face is the signal. */
.content-section code { color: var(--silk); }

/* A formula is reference, so it is ruled and indented rather than boxed. */
.content-section pre {
  border-left: 1px solid var(--rule);
  padding: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-md);
  overflow-x: auto;
  margin-bottom: var(--spacing-lg);
  color: var(--muted);
  line-height: 1.7;
}
.content-section pre code { color: var(--muted); }

/* A source line is the most credible thing on the page and was set to nearly
   disappear. It is an annotation on what precedes it, not fine print. */
.content-section .note,
.panel > .note {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
}
.content-section .note {
  border-left: 1px solid var(--rule);
  padding-left: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}
.panel > .note { margin-bottom: var(--spacing-md); }
.panel > .ro-sub + .note { margin: var(--spacing-md) 0 0; }
.panel > .btn { margin-top: var(--spacing-md); }

/* ── Reference tables ────────────────────────────────────────────────────
   Horizontal rules only. The vertical grid did no work: the columns already
   align, and boxing every cell made a spec sheet look like a spreadsheet. */
.content-section table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--spacing-lg);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 480px) { .content-section table { font-size: 0.8125rem; } }
/* A spec table that clips on a phone with no sign it continues is a table
   that gets misread. These four layers are the standard no-JS scroll shadow:
   the two `local` layers ride with the content and mask the two `scroll`
   layers at each end, so a shadow appears on a side only while there is more
   table to reach on that side. */
.content-section .table-wrap {
  overflow-x: auto;
  margin-bottom: var(--spacing-lg);
  background:
    linear-gradient(to right, var(--field), transparent) left center / 28px 100% no-repeat local,
    linear-gradient(to left, var(--field), transparent) right center / 28px 100% no-repeat local,
    linear-gradient(to right, rgba(0,0,0,.45), transparent) left center / 14px 100% no-repeat scroll,
    linear-gradient(to left, rgba(0,0,0,.45), transparent) right center / 14px 100% no-repeat scroll;
}
.content-section .table-wrap table { margin-bottom: 0; }
.content-section th,
.content-section td {
  padding: 10px var(--spacing-md) 10px 0;
  border: none;
  border-bottom: 1px solid var(--rule-2);
  text-align: left;
  vertical-align: top;
  color: var(--muted);
}
.content-section th:last-child,
.content-section td:last-child { padding-right: 0; }
@media (max-width: 480px) {
  .content-section th, .content-section td { padding: 8px var(--spacing-sm) 8px 0; }
}
.content-section th {
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom-color: var(--rule);
  white-space: nowrap;
}
.content-section tbody tr:last-child td { border-bottom: none; }
.content-section td strong { color: var(--silk); }
.content-section td:first-child { color: var(--silk); }

/* Spec values are set in the instrument's own face so they align on the
   figure and scan like the readouts do. Marked per cell rather than by
   column: these tables mix values and prose in the same row. */
.content-section td.num {
  font-family: var(--font-mono);
  font-stretch: 87.5%;
  font-size: 0.8125rem;
  color: var(--muted);
  white-space: nowrap;
}
.content-section td.num strong { color: var(--silk); font-weight: 500; }

/* ── FAQ ─────────────────────────────────────────────────────────────────
   The question is a heading and takes the display face; the answer is body
   copy. Setting both in Archivo at the same size left an open entry reading
   as two similar paragraphs. */
.faq { margin-top: var(--spacing-lg); }
.faq details { border-top: 1px solid var(--rule-2); }
.faq details:last-of-type { border-bottom: 1px solid var(--rule-2); }
.faq summary {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-md);
  padding: 15px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-narrow);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  color: var(--silk);
  transition: color var(--transition);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--led); }
/* A flex item rather than an absolutely positioned one, so it stays on the
   first line's baseline when the question wraps. Same chevron the selects
   use, so the site has one disclosure idiom. */
.faq summary::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 8px;
  height: 8px;
  align-self: center;
  border-right: 1.5px solid var(--faint);
  border-bottom: 1.5px solid var(--faint);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--transition), border-color var(--transition);
}
.faq summary:hover::after { border-color: var(--led); }
.faq details[open] summary { border-bottom: 1px solid var(--rule-2); }
.faq details[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.faq .faq-content { padding: var(--spacing-md) 0 var(--spacing-lg); }
.faq .faq-content p { font-size: 0.9375rem; line-height: 1.65; }
.faq .faq-content > *:last-child { margin-bottom: 0; }

/* ── Contact form ────────────────────────────────────────────────────── */
.contact-form { margin-bottom: var(--spacing-lg); max-width: 520px; }
.form-field { margin-bottom: var(--spacing-md); }
.form-field label {
  display: block;
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 6px;
}
.required { color: var(--led); }
.form-field textarea { min-height: 160px; resize: vertical; line-height: 1.5; padding: 12px; }
.form-field input::placeholder, .form-field textarea::placeholder { color: #2c3339; }
.form-field input[aria-invalid="true"], .form-field textarea[aria-invalid="true"] {
  border-color: var(--red);
  box-shadow: var(--inset), 0 0 0 2px rgba(228, 87, 61, 0.18);
}
.field-error { display: block; font-size: 0.8125rem; color: var(--red); margin-top: 4px; }
.field-error:empty { display: none; }
.form-actions { margin-top: var(--spacing-md); }
.form-actions .btn { width: 100%; min-height: 52px; }
.form-status {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  display: none;
}
.form-status.success { display: block; background: var(--led-dim); border: 1px solid var(--led); color: var(--led); }
.form-status.error { display: block; background: rgba(228, 87, 61, 0.1); border: 1px solid var(--red); color: var(--red); }
.form-fallback {
  margin-top: var(--spacing-lg);
  padding: var(--spacing-md);
  background: var(--well);
  border-radius: var(--radius-md);
  border: 1px solid #0b0e10;
  box-shadow: var(--inset);
  font-size: 0.875rem;
  color: var(--muted);
}
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ── Footer ──────────────────────────────────────────────────────────── */
.site-footer { margin-top: auto; padding: 26px 0 34px; border-top: 1px solid var(--rule); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: var(--spacing-md); }
.footer-nav a { font-family: var(--font-narrow); color: var(--muted); font-size: 0.875rem; letter-spacing: 0.02em; }
.footer-nav a:hover { color: var(--led); }
.copyright { font-size: 0.75rem; color: var(--faint); }

/* ── Utilities ───────────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Quality floor ───────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--led); outline-offset: 2px; }
.row:focus-visible { outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ── Print ───────────────────────────────────────────────────────────── */
@media print {
  .site-header, .site-footer, .btn { display: none; }
  .tool-calculator, .panel { break-inside: avoid; }
}