/*
 * Gear Ratio Calculator -- tokens, layout, panels.
 *
 * The palette, the fonts and the 2px radius are lifted from the theme's
 * assets/css/main.css so the tool reads as part of the site even though the
 * theme is stripped from this page. Anything that crosses a file boundary is
 * a custom property declared here; see CONTRACT.md.
 *
 * Every size is calc(<base> * var(--grc-ui-scale)) so the whole UI rescales
 * from one number. --grc-ui-scale: 1 reproduces the drawn design.
 *
 * No url() anywhere in this file. Nothing here may depend on its own location,
 * because an optimiser that rewrites stylesheets into a cache directory would
 * take every relative path with it.
 */

:root {
  /* Theme palette, read from the live main.css v1.0.2 on 2026-09-17. */
  --grc-red: #e11d2a;
  --grc-red-dark: #b91320;
  --grc-bg: #0a0a0b;
  --grc-bg-2: #0f0f12;
  --grc-surface: #141417;
  --grc-surface-2: #1b1b21;
  --grc-surface-3: #23232a;
  --grc-line: rgba(255, 255, 255, .08);
  --grc-line-strong: rgba(255, 255, 255, .16);
  --grc-text: #f4f1ec;
  --grc-dim: #c1c1c7;
  --grc-muted: #8a8a90;
  --grc-faint: #6a6a72;

  /*
   * Gear series colours: a sequential cyan ramp, first gear darkest.
   *
   * Gears are ORDERED, not categorical, so a categorical palette would be the
   * wrong instrument -- it would give ten equally-weighted identities to a
   * sequence that has a direction. The ramp encodes that direction, and
   * reading order down the legend matches reading order up the chart.
   *
   * What the ramp does NOT do is let you identify a line by its colour, and
   * the validator is blunt about why: ten steps of one hue land about 3 units
   * of OKLab apart, far under the 15 that tells two series apart by eye. That
   * is a property of ramps, not a fixable choice -- no single hue separates
   * ten series. So identification is carried entirely by secondary encoding,
   * and the chart is built so it never has to rest on colour:
   *
   *   - every line carries a direct end-label with its gear number
   *   - every line carries its own dash pattern
   *   - the lines fan out from the origin at different slopes and never cross
   *   - the selected gear is drawn emphasised while the rest recede, so at any
   *     moment exactly one line is the one being read
   *
   * The check that IS in scope for a sequential ramp -- contrast against the
   * chart surface -- passes at every step (all ten >= 3:1 against #141417),
   * and lightness is monotonic. Re-run before changing any of these:
   *
   *   node scripts/validate_palette.js "<the ten below>" --mode dark --surface "#141417"
   *
   * grc-chart.js reads these with getComputedStyle rather than keeping a
   * second copy of the hex values, and picks N evenly-spaced steps for an
   * N-speed gearbox rather than the first N.
   *
   * The ramp is deliberately COOL and the whole warm half of the wheel is
   * reserved: red is the redline, amber is the proposed setup in compare
   * mode. A warm pixel on this chart always means the same thing.
   */
  --grc-gear-1: #0e7490;
  --grc-gear-2: #0891b2;
  --grc-gear-3: #06a3c4;
  --grc-gear-4: #0eb8d6;
  --grc-gear-5: #22c9e0;
  --grc-gear-6: #3ed5e8;
  --grc-gear-7: #5fdeee;
  --grc-gear-8: #80e6f2;
  --grc-gear-9: #a0edf6;
  --grc-gear-10: #bdf3f9;

  --grc-warn: #f5a524;     /* the proposed setup, and soft warnings */
  --grc-good: #4ade80;
  --grc-cool: #38bdf8;

  --grc-font-display: "Oswald", "Arial Narrow", Arial, sans-serif;
  --grc-font-body: "Spectral", Georgia, "Times New Roman", serif;
  --grc-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --grc-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --grc-radius: 2px;
  --grc-ease: cubic-bezier(.2, .7, .2, 1);
  --grc-ease-out: cubic-bezier(.16, 1, .3, 1);
  --grc-ui-scale: 1;

  --grc-maxw: calc(1200px * var(--grc-ui-scale));
  --grc-pad: calc(32px * var(--grc-ui-scale));
  --grc-gap: calc(48px * var(--grc-ui-scale));
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.grc-body {
  margin: 0;
  background: var(--grc-bg);
  color: var(--grc-text);
  font-family: var(--grc-font-body);
  font-size: calc(17px * var(--grc-ui-scale));
  line-height: 1.65;
  overflow-x: hidden;
}

.grc-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.grc-wrap { width: 100%; max-width: var(--grc-maxw); margin: 0 auto; padding: 0 var(--grc-pad); }

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

.grc-masthead {
  position: relative; z-index: 4;
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(16px * var(--grc-ui-scale));
  padding: calc(18px * var(--grc-ui-scale)) var(--grc-pad);
  max-width: var(--grc-maxw); margin: 0 auto;
}
.grc-logo { display: inline-flex; line-height: 0; text-decoration: none; color: var(--grc-text); }
/* The site's own logo, the same SVG the theme masthead draws at 48px. */
.grc-logo svg { display: block; height: calc(38px * var(--grc-ui-scale)); width: auto; }
/* Fallback only, for when assets/logo.svg cannot be read. */
.grc-logo-word {
  font-family: var(--grc-font-display); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; font-size: calc(19px * var(--grc-ui-scale));
}
.grc-logo-word b { color: var(--grc-red); font-weight: 600; }
.grc-masthead-link {
  font-family: var(--grc-font-ui); font-size: calc(13px * var(--grc-ui-scale));
  letter-spacing: .06em; text-transform: uppercase; color: var(--grc-muted);
  text-decoration: none; border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.grc-masthead-link:hover { color: var(--grc-text); border-bottom-color: var(--grc-red); }

/* ---------- shared panel furniture ---------- */

.grc-panel { position: relative; padding: var(--grc-gap) 0; }
.grc-panel + .grc-panel { border-top: 1px solid var(--grc-line); }

.grc-eyebrow {
  font-family: var(--grc-font-ui); font-size: calc(12px * var(--grc-ui-scale));
  letter-spacing: .18em; text-transform: uppercase; color: var(--grc-red);
  margin: 0 0 calc(10px * var(--grc-ui-scale));
}
.grc-panel-title {
  font-family: var(--grc-font-display); font-weight: 500; text-transform: uppercase;
  letter-spacing: .02em; line-height: 1.05;
  font-size: clamp(calc(26px * var(--grc-ui-scale)), 3.4vw, calc(40px * var(--grc-ui-scale)));
  margin: 0 0 calc(14px * var(--grc-ui-scale));
}
.grc-panel-note {
  font-family: var(--grc-font-ui); font-size: calc(14px * var(--grc-ui-scale));
  color: var(--grc-muted); max-width: 62ch; margin: 0;
}
.grc-panel-note a { color: var(--grc-dim); }

/* ---------- the odometer ---------- */

.grc-odo {
  display: inline-flex; align-items: baseline;
  font-family: var(--grc-font-display); font-variant-numeric: tabular-nums;
  font-weight: 600; letter-spacing: .01em; line-height: 1;
}
/* 1ch is the advance of a digit in a tabular-numeral font, so the reel is
   exactly as wide as the glyph it shows. A fixed em width leaves a visible gap
   after narrow digits. */
.grc-odo-reel { display: inline-block; overflow: hidden; height: 1em; width: 1ch; vertical-align: baseline; text-align: center; }
.grc-odo-strip { display: block; transition: transform .7s var(--grc-ease-out); will-change: transform; }
.grc-odo-strip i { display: block; height: 1em; line-height: 1; font-style: normal; }
.grc-odo-fixed { display: inline-block; }
.grc-odo-fixed--sep { width: .32em; }

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

.grc-btn {
  appearance: none; cursor: pointer;
  font-family: var(--grc-font-ui); font-size: calc(13px * var(--grc-ui-scale));
  letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  padding: calc(11px * var(--grc-ui-scale)) calc(18px * var(--grc-ui-scale));
  background: transparent; color: var(--grc-dim);
  border: 1px solid var(--grc-line-strong); border-radius: var(--grc-radius);
  transition: border-color .2s, color .2s, background .2s;
}
.grc-btn:hover { border-color: var(--grc-red); color: var(--grc-text); background: rgba(225, 29, 42, .1); }
.grc-btn--primary { background: var(--grc-red); border-color: var(--grc-red); color: #fff; }
.grc-btn--primary:hover { background: var(--grc-red-dark); border-color: var(--grc-red-dark); color: #fff; }
.grc-btnrow {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: calc(10px * var(--grc-ui-scale)); margin-top: calc(14px * var(--grc-ui-scale));
}
.grc-copied {
  font-family: var(--grc-font-ui); font-size: calc(12px * var(--grc-ui-scale));
  letter-spacing: .1em; text-transform: uppercase; color: var(--grc-good);
  opacity: 0; transition: opacity .2s;
}
.grc-copied.is-on { opacity: 1; }

/* ---------- form controls ---------- */

.grc-field { display: block; margin-bottom: calc(14px * var(--grc-ui-scale)); }
.grc-label {
  display: block; font-family: var(--grc-font-ui);
  font-size: calc(11px * var(--grc-ui-scale)); letter-spacing: .16em;
  text-transform: uppercase; color: var(--grc-muted);
  margin-bottom: calc(6px * var(--grc-ui-scale));
}
.grc-input, .grc-select {
  width: 100%; appearance: none;
  font-family: var(--grc-font-ui); font-size: calc(15px * var(--grc-ui-scale));
  padding: calc(10px * var(--grc-ui-scale)) calc(12px * var(--grc-ui-scale));
  background: var(--grc-bg-2); color: var(--grc-text);
  border: 1px solid var(--grc-line-strong); border-radius: var(--grc-radius);
  transition: border-color .2s;
}
.grc-select {
  /* No url(): the caret is a pure-CSS chevron drawn with gradients. */
  padding-right: calc(30px * var(--grc-ui-scale));
  background-image:
    linear-gradient(45deg, transparent 50%, var(--grc-muted) 50%),
    linear-gradient(135deg, var(--grc-muted) 50%, transparent 50%);
  background-position:
    right calc(15px * var(--grc-ui-scale)) center,
    right calc(10px * var(--grc-ui-scale)) center;
  background-size: calc(5px * var(--grc-ui-scale)) calc(5px * var(--grc-ui-scale));
  background-repeat: no-repeat;
}
.grc-input:focus, .grc-select:focus { outline: none; border-color: var(--grc-red); }
.grc-input.is-bad { border-color: var(--grc-red); }
.grc-input::placeholder { color: var(--grc-faint); }

/*
 * Links inside the tool chrome. Without this they inherit the browser default,
 * which is a dark blue that is effectively invisible on a near-black surface.
 * Scoped to .grc-app so the article below keeps its own link styling.
 */
.grc-app a {
  color: var(--grc-dim);
  text-decoration-color: var(--grc-red);
  text-underline-offset: 2px;
  transition: color .18s;
}
.grc-app a:hover { color: var(--grc-text); }

.grc-hint {
  font-family: var(--grc-font-ui); font-size: calc(12px * var(--grc-ui-scale));
  color: var(--grc-faint); margin: calc(5px * var(--grc-ui-scale)) 0 0;
  min-height: calc(17px * var(--grc-ui-scale));
}
.grc-hint.is-bad { color: var(--grc-red); }

/* chips: the quick-pick ratios and the notation switcher */
.grc-chips { display: flex; flex-wrap: wrap; gap: calc(6px * var(--grc-ui-scale)); }
.grc-chip {
  appearance: none; cursor: pointer;
  font-family: var(--grc-font-ui); font-size: calc(12px * var(--grc-ui-scale));
  font-variant-numeric: tabular-nums;
  padding: calc(6px * var(--grc-ui-scale)) calc(10px * var(--grc-ui-scale));
  background: var(--grc-surface-2); color: var(--grc-dim);
  border: 1px solid transparent; border-radius: var(--grc-radius);
  transition: border-color .15s, color .15s, background .15s;
}
.grc-chip:hover { border-color: var(--grc-line-strong); color: var(--grc-text); }
.grc-chip[aria-pressed="true"] { background: rgba(225, 29, 42, .16); border-color: var(--grc-red); color: var(--grc-text); }

/* ---------- panel 1: the drivetrain ---------- */

.grc-hero {
  position: relative;
  /* Measured against the built layout. perf-check.js is the gate on this. */
  min-height: calc(700px * var(--grc-ui-scale));
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(16px * var(--grc-ui-scale)) 0 calc(36px * var(--grc-ui-scale));
  overflow: hidden;
}
.grc-hero-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 110% at 78% 14%, rgba(8, 145, 178, .14), transparent 56%),
    radial-gradient(90% 80% at 12% 90%, rgba(225, 29, 42, .12), transparent 60%),
    linear-gradient(140deg, var(--grc-surface-3), var(--grc-bg) 64%);
}
.grc-hero-inner {
  position: relative; z-index: 2; width: 100%;
  max-width: var(--grc-maxw); margin: 0 auto; padding: 0 var(--grc-pad);
}
.grc-hero-head { text-align: center; }
.grc-hero-title {
  font-family: var(--grc-font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .02em; line-height: 1;
  font-size: clamp(calc(28px * var(--grc-ui-scale)), 4.8vw, calc(52px * var(--grc-ui-scale)));
  margin: 0 0 calc(10px * var(--grc-ui-scale));
}
.grc-hero-title em { font-style: normal; color: var(--grc-red); }
.grc-hero-sub {
  font-family: var(--grc-font-ui); color: var(--grc-dim);
  font-size: calc(16px * var(--grc-ui-scale));
  max-width: 62ch; margin: 0 auto calc(14px * var(--grc-ui-scale));
}

/*
 * The answer line is the LCP element and it is server-rendered, so it must
 * hold its height before any script runs. Two lines at the largest clamp.
 */
.grc-answer {
  text-align: center;
  min-height: calc(120px * var(--grc-ui-scale));
  margin: calc(10px * var(--grc-ui-scale)) 0 calc(6px * var(--grc-ui-scale));
}
.grc-answer-speed {
  font-size: clamp(calc(56px * var(--grc-ui-scale)), 11vw, calc(120px * var(--grc-ui-scale)));
  color: var(--grc-text);
  /*
   * drop-shadow, not text-shadow. Each digit sits in a reel with
   * overflow:hidden, which clips a text-shadow to the reel's rectangle and
   * paints a visible box behind every number. A filter runs after the element
   * is composited, so it follows the glyph shapes instead.
   */
  filter: drop-shadow(0 calc(2px * var(--grc-ui-scale)) calc(26px * var(--grc-ui-scale)) rgba(8, 145, 178, .38));
}
.grc-answer-unit {
  font-family: var(--grc-font-display); font-weight: 500;
  font-size: clamp(calc(18px * var(--grc-ui-scale)), 2.6vw, calc(28px * var(--grc-ui-scale)));
  letter-spacing: .1em; text-transform: uppercase; color: var(--grc-muted);
  margin-left: .28em;
}
.grc-answer-line {
  font-family: var(--grc-font-ui); font-size: calc(14px * var(--grc-ui-scale));
  letter-spacing: .04em; color: var(--grc-dim);
  min-height: calc(22px * var(--grc-ui-scale)); margin: calc(4px * var(--grc-ui-scale)) 0 0;
}
.grc-answer-line b { color: var(--grc-text); font-weight: 600; }

/* gear selector */
.grc-gearbar {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: calc(6px * var(--grc-ui-scale));
  margin: calc(14px * var(--grc-ui-scale)) 0 calc(10px * var(--grc-ui-scale));
  min-height: calc(46px * var(--grc-ui-scale));
}
.grc-gearbtn {
  appearance: none; cursor: pointer;
  font-family: var(--grc-font-display); font-weight: 600;
  font-size: calc(17px * var(--grc-ui-scale)); line-height: 1;
  width: calc(46px * var(--grc-ui-scale)); height: calc(46px * var(--grc-ui-scale));
  background: var(--grc-surface-2); color: var(--grc-dim);
  border: 1px solid var(--grc-line); border-radius: var(--grc-radius);
  transition: border-color .18s, color .18s, background .18s, transform .18s var(--grc-ease-out);
}
.grc-gearbtn:hover { color: var(--grc-text); border-color: var(--grc-line-strong); }
.grc-gearbtn[aria-pressed="true"] {
  background: rgba(8, 145, 178, .2); border-color: var(--grc-cool); color: var(--grc-text);
  transform: translateY(calc(-2px * var(--grc-ui-scale)));
}
.grc-gearbtn small {
  display: block; font-family: var(--grc-font-ui); font-weight: 400;
  font-size: calc(9px * var(--grc-ui-scale)); letter-spacing: .04em;
  color: var(--grc-faint); margin-top: calc(2px * var(--grc-ui-scale));
}
.grc-gearbtn[aria-pressed="true"] small { color: var(--grc-dim); }

/* the rpm rail */
.grc-scrub { margin-top: calc(8px * var(--grc-ui-scale)); }
.grc-rail {
  position: relative; height: calc(52px * var(--grc-ui-scale));
  cursor: grab; touch-action: none;
  border: 1px solid var(--grc-line); border-radius: var(--grc-radius);
  background: linear-gradient(180deg, var(--grc-surface-2), var(--grc-bg-2));
  overflow: hidden;
}
.grc-app[data-grc-dragging="1"] .grc-rail { cursor: grabbing; }
.grc-rail:focus-visible { outline: 2px solid var(--grc-red); outline-offset: 2px; }
/* The band above redline, drawn as a positioned block so the width can be set
   from the redline value rather than hard-coded. */
.grc-rail-red {
  position: absolute; top: 0; bottom: 0; right: 0; width: 0;
  background: linear-gradient(90deg, rgba(225, 29, 42, .06), rgba(225, 29, 42, .32));
  border-left: 1px solid var(--grc-red);
  pointer-events: none;
}
.grc-rail-ticks { position: absolute; inset: 0; pointer-events: none; }
.grc-rail-tick { position: absolute; bottom: 0; width: 1px; background: var(--grc-line-strong); }
.grc-rail-tick span {
  position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%);
  font-family: var(--grc-font-ui); font-size: calc(10px * var(--grc-ui-scale));
  letter-spacing: .08em; color: var(--grc-faint); white-space: nowrap;
}
.grc-rail-head {
  position: absolute; top: calc(-4px * var(--grc-ui-scale)); bottom: calc(-4px * var(--grc-ui-scale));
  width: calc(4px * var(--grc-ui-scale)); margin-left: calc(-2px * var(--grc-ui-scale));
  background: var(--grc-red); border-radius: 1px;
  box-shadow: 0 0 calc(18px * var(--grc-ui-scale)) rgba(225, 29, 42, .8);
  transition: left .12s linear;
}
.grc-app[data-grc-dragging="1"] .grc-rail-head { transition: none; }

.grc-scrub-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: calc(12px * var(--grc-ui-scale)); margin-top: calc(10px * var(--grc-ui-scale));
  font-family: var(--grc-font-ui); font-size: calc(12px * var(--grc-ui-scale));
  color: var(--grc-faint);
}
.grc-rpmform { display: inline-flex; align-items: center; gap: calc(8px * var(--grc-ui-scale)); }
.grc-rpmform label { letter-spacing: .1em; text-transform: uppercase; }
.grc-rpmform input {
  width: calc(88px * var(--grc-ui-scale)); text-align: right;
  font-family: var(--grc-font-ui); font-size: calc(13px * var(--grc-ui-scale));
  padding: calc(6px * var(--grc-ui-scale)) calc(8px * var(--grc-ui-scale));
  background: var(--grc-bg-2); color: var(--grc-text);
  border: 1px solid var(--grc-line-strong); border-radius: var(--grc-radius);
}
.grc-rpmform input:focus { outline: none; border-color: var(--grc-red); }

/* ---------- panel 2: inputs ---------- */

.grc-input-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: calc(20px * var(--grc-ui-scale));
  margin-top: calc(24px * var(--grc-ui-scale));
}
.grc-card {
  background: var(--grc-surface); border: 1px solid var(--grc-line);
  border-radius: var(--grc-radius); padding: calc(20px * var(--grc-ui-scale));
  min-height: calc(330px * var(--grc-ui-scale));
  display: flex; flex-direction: column;
}
.grc-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: calc(10px * var(--grc-ui-scale)); margin-bottom: calc(14px * var(--grc-ui-scale));
}
.grc-card-title {
  font-family: var(--grc-font-display); font-weight: 500; text-transform: uppercase;
  letter-spacing: .08em; font-size: calc(15px * var(--grc-ui-scale));
  margin: 0; color: var(--grc-text);
}
.grc-card-badge {
  font-family: var(--grc-font-ui); font-size: calc(11px * var(--grc-ui-scale));
  font-variant-numeric: tabular-nums; letter-spacing: .06em;
  color: var(--grc-cool); white-space: nowrap;
}
.grc-card-foot {
  margin-top: auto; padding-top: calc(12px * var(--grc-ui-scale));
  font-family: var(--grc-font-ui); font-size: calc(12px * var(--grc-ui-scale));
  color: var(--grc-faint); min-height: calc(34px * var(--grc-ui-scale));
}

/* the editable gear rows */
.grc-gearrows {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: calc(6px * var(--grc-ui-scale)) calc(8px * var(--grc-ui-scale));
  margin: calc(4px * var(--grc-ui-scale)) 0 calc(10px * var(--grc-ui-scale));
}
.grc-gearrow-n {
  font-family: var(--grc-font-ui); font-size: calc(11px * var(--grc-ui-scale));
  letter-spacing: .1em; text-transform: uppercase; color: var(--grc-muted);
  white-space: nowrap;
}
.grc-gearrow-step {
  font-family: var(--grc-font-ui); font-size: calc(11px * var(--grc-ui-scale));
  font-variant-numeric: tabular-nums; color: var(--grc-faint); text-align: right;
  white-space: nowrap; min-width: calc(48px * var(--grc-ui-scale));
}
.grc-gearrows input {
  width: 100%; font-variant-numeric: tabular-nums;
  font-family: var(--grc-font-ui); font-size: calc(14px * var(--grc-ui-scale));
  padding: calc(6px * var(--grc-ui-scale)) calc(9px * var(--grc-ui-scale));
  background: var(--grc-bg-2); color: var(--grc-text);
  border: 1px solid var(--grc-line); border-radius: var(--grc-radius);
}
.grc-gearrows input:focus { outline: none; border-color: var(--grc-red); }
.grc-gearrows input.is-bad { border-color: var(--grc-red); }

.grc-minirow { display: flex; gap: calc(8px * var(--grc-ui-scale)); align-items: flex-end; }
.grc-minirow .grc-field { flex: 1; margin-bottom: 0; }

/* the deflection switch */
.grc-toggle {
  display: flex; align-items: flex-start; gap: calc(9px * var(--grc-ui-scale));
  font-family: var(--grc-font-ui); font-size: calc(12px * var(--grc-ui-scale));
  color: var(--grc-dim); cursor: pointer; line-height: 1.45;
}
.grc-toggle input { margin: calc(3px * var(--grc-ui-scale)) 0 0; accent-color: var(--grc-red); flex: none; }

/* ---------- panel 3: the table ---------- */

.grc-tablewrap {
  margin-top: calc(20px * var(--grc-ui-scale));
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  /* Measured: header plus six gear rows at the default gearbox. */
  min-height: calc(300px * var(--grc-ui-scale));
}
.grc-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--grc-font-ui); font-size: calc(14px * var(--grc-ui-scale));
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.grc-table th, .grc-table td {
  padding: calc(9px * var(--grc-ui-scale)) calc(12px * var(--grc-ui-scale));
  border-bottom: 1px solid var(--grc-line); text-align: right;
}
.grc-table th {
  font-size: calc(11px * var(--grc-ui-scale)); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--grc-muted);
  border-bottom-color: var(--grc-line-strong);
}
.grc-table th:first-child, .grc-table td:first-child { text-align: left; }
.grc-table tbody tr { transition: background .18s; }
.grc-table tbody tr.is-current { background: rgba(8, 145, 178, .12); }
.grc-table td.is-strong { color: var(--grc-text); font-weight: 600; }
.grc-table .grc-swatch {
  display: inline-block; width: calc(10px * var(--grc-ui-scale)); height: calc(10px * var(--grc-ui-scale));
  border-radius: 1px; margin-right: calc(8px * var(--grc-ui-scale));
  vertical-align: baseline;
}

/* ---------- panel 4: the chart ---------- */

.grc-chart-frame {
  position: relative; width: 100%;
  /* The SVG is drawn to this box, so reserving it exactly prevents any shift. */
  aspect-ratio: 16 / 9;
  min-height: calc(280px * var(--grc-ui-scale));
  background: var(--grc-surface); border: 1px solid var(--grc-line);
  border-radius: var(--grc-radius);
  margin-top: calc(20px * var(--grc-ui-scale));
  touch-action: pan-y;
}
.grc-chart-frame svg { display: block; width: 100%; height: 100%; }

.grc-legend {
  display: flex; flex-wrap: wrap; gap: calc(8px * var(--grc-ui-scale)) calc(18px * var(--grc-ui-scale));
  margin-top: calc(14px * var(--grc-ui-scale));
  font-family: var(--grc-font-ui); font-size: calc(12px * var(--grc-ui-scale));
  color: var(--grc-muted); min-height: calc(20px * var(--grc-ui-scale));
}
.grc-legend-key { display: inline-flex; align-items: center; gap: calc(7px * var(--grc-ui-scale)); }
.grc-legend-swatch {
  width: calc(18px * var(--grc-ui-scale)); height: calc(3px * var(--grc-ui-scale));
  border-radius: 2px; flex: none;
}

.grc-details {
  margin-top: calc(18px * var(--grc-ui-scale));
  border-top: 1px solid var(--grc-line); padding-top: calc(12px * var(--grc-ui-scale));
}
.grc-details > summary {
  cursor: pointer; list-style: none;
  font-family: var(--grc-font-ui); font-size: calc(13px * var(--grc-ui-scale));
  letter-spacing: .08em; text-transform: uppercase; color: var(--grc-muted);
}
.grc-details > summary::-webkit-details-marker { display: none; }
.grc-details > summary::before { content: "+ "; color: var(--grc-red); }
.grc-details[open] > summary::before { content: "\2212 "; }
.grc-details > summary:hover { color: var(--grc-text); }

/* ---------- panel 5: compare ---------- */

.grc-compare-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: calc(20px * var(--grc-ui-scale)); margin-top: calc(22px * var(--grc-ui-scale));
}
.grc-side {
  background: var(--grc-surface); border: 1px solid var(--grc-line);
  border-top-width: calc(3px * var(--grc-ui-scale));
  border-radius: var(--grc-radius); padding: calc(18px * var(--grc-ui-scale));
}
.grc-side--now { border-top-color: var(--grc-cool); }
.grc-side--new { border-top-color: var(--grc-warn); }
.grc-side-title {
  font-family: var(--grc-font-display); font-weight: 500; text-transform: uppercase;
  letter-spacing: .1em; font-size: calc(13px * var(--grc-ui-scale));
  margin: 0 0 calc(14px * var(--grc-ui-scale)); color: var(--grc-dim);
}
.grc-side--now .grc-side-title { color: var(--grc-cool); }
.grc-side--new .grc-side-title { color: var(--grc-warn); }

.grc-verdicts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(220px * var(--grc-ui-scale)), 1fr));
  gap: calc(16px * var(--grc-ui-scale)); margin-top: calc(22px * var(--grc-ui-scale));
}
/*
 * The reservation lives on the tile, not on the grid.
 *
 * auto-fit gives four columns on a desktop, two on a tablet and one on a
 * phone, so a single min-height on the container is right for exactly one of
 * them and leaves 150px of dead space under a single row on the other two.
 * Reserving each tile instead is correct at every column count, and the
 * placeholder tiles have the same structure as the filled ones, so the height
 * is already stable from first paint.
 */
.grc-verdict {
  background: var(--grc-surface-2); border: 1px solid var(--grc-line);
  border-radius: var(--grc-radius); padding: calc(18px * var(--grc-ui-scale));
  min-height: calc(198px * var(--grc-ui-scale));
}
.grc-verdict-label {
  font-family: var(--grc-font-ui); font-size: calc(11px * var(--grc-ui-scale));
  letter-spacing: .14em; text-transform: uppercase; color: var(--grc-muted);
  margin: 0 0 calc(8px * var(--grc-ui-scale));
}
.grc-verdict-value {
  font-size: clamp(calc(26px * var(--grc-ui-scale)), 3.6vw, calc(38px * var(--grc-ui-scale)));
  color: var(--grc-text); line-height: 1;
}
.grc-verdict-value.is-warn { color: var(--grc-warn); }
.grc-verdict-value.is-good { color: var(--grc-good); }
.grc-verdict-foot {
  font-family: var(--grc-font-ui); font-size: calc(12px * var(--grc-ui-scale));
  color: var(--grc-faint); margin: calc(9px * var(--grc-ui-scale)) 0 0;
  line-height: 1.5; min-height: calc(76px * var(--grc-ui-scale));
}
.grc-verdict-foot b { color: var(--grc-dim); font-weight: 600; }

.grc-recommend {
  margin-top: calc(22px * var(--grc-ui-scale));
  padding: calc(20px * var(--grc-ui-scale));
  background: linear-gradient(140deg, rgba(225, 29, 42, .1), transparent 70%), var(--grc-surface);
  border: 1px solid var(--grc-line-strong); border-radius: var(--grc-radius);
  min-height: calc(120px * var(--grc-ui-scale));
}
.grc-recommend-line {
  font-family: var(--grc-font-ui); font-size: calc(15px * var(--grc-ui-scale));
  color: var(--grc-dim); margin: 0; line-height: 1.6;
}
.grc-recommend-line b { color: var(--grc-text); }
.grc-recommend-ratio {
  font-family: var(--grc-font-display); font-weight: 600;
  font-size: calc(34px * var(--grc-ui-scale)); color: var(--grc-red);
  line-height: 1; margin: calc(4px * var(--grc-ui-scale)) 0 calc(8px * var(--grc-ui-scale));
}

/* ---------- catalogue links ---------- */

.grc-reading { margin-top: calc(26px * var(--grc-ui-scale)); }
.grc-reading-head {
  font-family: var(--grc-font-display); font-weight: 500; text-transform: uppercase;
  letter-spacing: .08em; font-size: calc(15px * var(--grc-ui-scale));
  margin: 0 0 calc(12px * var(--grc-ui-scale)); color: var(--grc-dim);
  min-height: calc(22px * var(--grc-ui-scale));
}
.grc-reading-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(230px * var(--grc-ui-scale)), 1fr));
  gap: calc(8px * var(--grc-ui-scale));
  min-height: calc(60px * var(--grc-ui-scale));
}
.grc-reading-list a {
  display: block; padding: calc(11px * var(--grc-ui-scale)) calc(14px * var(--grc-ui-scale));
  background: var(--grc-surface-2); border: 1px solid transparent;
  border-left: calc(2px * var(--grc-ui-scale)) solid var(--grc-red);
  border-radius: var(--grc-radius);
  font-family: var(--grc-font-ui); font-size: calc(14px * var(--grc-ui-scale));
  color: var(--grc-dim); text-decoration: none;
  transition: background .18s, color .18s, transform .18s var(--grc-ease-out);
}
.grc-reading-list a:hover {
  background: var(--grc-surface-3); color: var(--grc-text);
  transform: translateX(calc(3px * var(--grc-ui-scale)));
}

/* ---------- panel 6: share ---------- */

.grc-share-grid {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: calc(28px * var(--grc-ui-scale)); margin-top: calc(22px * var(--grc-ui-scale));
}
.grc-cardframe {
  width: 100%; aspect-ratio: 1200 / 630;
  background: var(--grc-surface); border: 1px solid var(--grc-line);
  border-radius: var(--grc-radius); overflow: hidden;
}
.grc-cardframe canvas { display: block; width: 100%; height: 100%; }
.grc-embed-code {
  width: 100%; resize: vertical;
  font-family: var(--grc-font-mono); font-size: calc(12px * var(--grc-ui-scale));
  line-height: 1.5; padding: calc(12px * var(--grc-ui-scale));
  background: var(--grc-bg-2); color: var(--grc-dim);
  border: 1px solid var(--grc-line-strong); border-radius: var(--grc-radius);
}
.grc-embed-code:focus { outline: none; border-color: var(--grc-red); }

/* ---------- article and credits ---------- */

.grc-article {
  display: block; max-width: calc(760px * var(--grc-ui-scale));
  margin: 0 auto; padding: var(--grc-gap) var(--grc-pad);
  /*
   * The article is a long way below the fold and nothing above it depends on
   * its layout, so let the browser skip it until it is near. The intrinsic
   * size keeps the scrollbar honest while it is skipped.
   */
  content-visibility: auto;
  contain-intrinsic-size: auto 2600px;
}
.grc-article h2 {
  font-family: var(--grc-font-display); font-weight: 500; text-transform: uppercase;
  letter-spacing: .02em; line-height: 1.15;
  font-size: calc(28px * var(--grc-ui-scale));
  margin: calc(42px * var(--grc-ui-scale)) 0 calc(14px * var(--grc-ui-scale));
}
.grc-article h2:first-child { margin-top: 0; }
.grc-article h3 {
  font-family: var(--grc-font-display); font-weight: 500;
  font-size: calc(20px * var(--grc-ui-scale)); letter-spacing: .01em;
  margin: calc(28px * var(--grc-ui-scale)) 0 calc(10px * var(--grc-ui-scale));
}
.grc-article p, .grc-article li { color: var(--grc-dim); }
.grc-article a { color: var(--grc-text); text-decoration-color: var(--grc-red); text-underline-offset: 3px; }
.grc-article a:hover { color: var(--grc-red); }
.grc-article table {
  width: 100%; border-collapse: collapse; margin: calc(18px * var(--grc-ui-scale)) 0;
  font-family: var(--grc-font-ui); font-size: calc(14px * var(--grc-ui-scale));
  font-variant-numeric: tabular-nums;
}
.grc-article th, .grc-article td {
  padding: calc(8px * var(--grc-ui-scale)) calc(10px * var(--grc-ui-scale));
  border-bottom: 1px solid var(--grc-line); text-align: left;
}
.grc-article th {
  font-size: calc(11px * var(--grc-ui-scale)); letter-spacing: .1em;
  text-transform: uppercase; color: var(--grc-muted);
}
.grc-article code {
  font-family: var(--grc-font-mono); font-size: .92em;
  background: var(--grc-surface-2); padding: .1em .35em; border-radius: var(--grc-radius);
}
.grc-article .grc-formula {
  display: block; font-family: var(--grc-font-mono);
  font-size: calc(14px * var(--grc-ui-scale));
  background: var(--grc-surface); border-left: calc(2px * var(--grc-ui-scale)) solid var(--grc-red);
  padding: calc(14px * var(--grc-ui-scale)) calc(18px * var(--grc-ui-scale));
  margin: calc(18px * var(--grc-ui-scale)) 0; color: var(--grc-text);
  overflow-x: auto; white-space: pre;
}

.grc-credits {
  max-width: var(--grc-maxw); margin: 0 auto;
  padding: var(--grc-gap) var(--grc-pad) calc(64px * var(--grc-ui-scale));
  border-top: 1px solid var(--grc-line);
  font-family: var(--grc-font-ui); font-size: calc(13px * var(--grc-ui-scale));
  color: var(--grc-faint);
}
.grc-credits a { color: var(--grc-dim); }

/*
 * Space for Mediavine's adhesion bar, added by grc-track.js when the ad script
 * actually loads -- so the padding only exists on pages that will have a bar.
 */
body.grc-ads .grc-app { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }

/* ---------- embedded copies ---------- */

/* ?embed=1 is somebody else's page: no masthead, no article, no share, no ads. */
body.grc-embedded .grc-masthead,
body.grc-embedded .grc-panel--share,
body.grc-embedded .grc-article,
body.grc-embedded .grc-credits { display: none; }
body.grc-embedded .grc-hero { min-height: auto; }

/* ---------- reveal on scroll ---------- */

/*
 * The hidden state is gated on data-grc-js, which grc-app.js sets on the root
 * before it does anything else. Written as a bare `.grc-reveal { opacity: 0 }`
 * this would hide three whole panels from anyone whose JavaScript did not run
 * -- a blocked file, a stalled network, a parse error -- and the page would
 * look like it had simply lost its middle. Content is visible by default and
 * only hides once something is there to bring it back.
 */
.grc-app[data-grc-js] .grc-reveal {
  opacity: 0;
  transform: translateY(calc(14px * var(--grc-ui-scale)));
}
/*
 * Scoped the same way as the rule above it, and not one notch weaker. Written
 * as a bare `.grc-reveal.is-in` this loses on specificity to
 * `.grc-app[data-grc-js] .grc-reveal` and every revealed panel stays at zero
 * opacity, which looks exactly like the observer never fired.
 */
.grc-app[data-grc-js] .grc-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .6s var(--grc-ease-out), transform .6s var(--grc-ease-out);
  transition-delay: calc(var(--grc-delay, 0) * 90ms);
}

/* ---------- breakpoints ---------- */

@media (max-width: 900px) {
  :root { --grc-pad: calc(20px * var(--grc-ui-scale)); --grc-gap: calc(34px * var(--grc-ui-scale)); }
  .grc-input-grid { grid-template-columns: 1fr; }
  .grc-compare-grid { grid-template-columns: 1fr; }
  .grc-share-grid { grid-template-columns: 1fr; }
  .grc-card { min-height: 0; }
  .grc-hero { min-height: calc(640px * var(--grc-ui-scale)); }
  .grc-chart-frame { aspect-ratio: 4 / 3; }
}

@media (max-width: 560px) {
  .grc-logo svg { height: calc(30px * var(--grc-ui-scale)); }
  .grc-gearbtn { width: calc(40px * var(--grc-ui-scale)); height: calc(40px * var(--grc-ui-scale)); }
  .grc-gearbar { min-height: calc(86px * var(--grc-ui-scale)); }
  .grc-article { padding-left: calc(16px * var(--grc-ui-scale)); padding-right: calc(16px * var(--grc-ui-scale)); }
}

/*
 * One blanket rule, last, scoped to the tool roots.
 *
 * Scoped rather than global so it cannot reach into article content, and
 * blanket rather than per-animation so every animation added later is covered
 * without anyone remembering to come back here. The tool stays fully
 * functional: values arrive instead of counting up, and the drivetrain holds
 * a still frame instead of turning.
 */
@media (prefers-reduced-motion: reduce) {
  .grc-app, .grc-app *, .grc-app *::before, .grc-app *::after,
  .grc-art, .grc-art *, .grc-art *::before, .grc-art *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .grc-app[data-grc-js] .grc-reveal { opacity: 1; transform: none; }
}