/*
 * Car Inflation 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(--cic-ui-scale)) so the whole UI rescales
 * from one number. --cic-ui-scale: 1 reproduces the drawn design.
 */

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

  /* Series colours. Red is "then", amber is "today", cyan is income.
     They differ in lightness as well as hue, so the chart stays readable
     in the common forms of colour blindness and in greyscale print. */
  --cic-then: #e11d2a;
  --cic-now: #f5a524;
  --cic-income: #38bdf8;
  --cic-good: #4ade80;

  --cic-font-display: "Oswald", "Arial Narrow", Arial, sans-serif;
  --cic-font-body: "Spectral", Georgia, "Times New Roman", serif;
  --cic-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

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

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

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

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

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

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

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

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

.cic-masthead {
  position: relative; z-index: 4;
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(16px * var(--cic-ui-scale));
  padding: calc(18px * var(--cic-ui-scale)) var(--cic-pad);
  max-width: var(--cic-maxw); margin: 0 auto;
}
.cic-logo { display: inline-flex; align-items: center; gap: .6em; text-decoration: none; color: var(--cic-text); }
.cic-logo img { display: block; height: calc(30px * var(--cic-ui-scale)); width: auto; }
.cic-logo-word {
  font-family: var(--cic-font-display); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; font-size: calc(19px * var(--cic-ui-scale));
}
.cic-logo-word b { color: var(--cic-red); font-weight: 600; }
.cic-masthead-link {
  font-family: var(--cic-font-ui); font-size: calc(13px * var(--cic-ui-scale));
  letter-spacing: .06em; text-transform: uppercase; color: var(--cic-muted);
  text-decoration: none; border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.cic-masthead-link:hover { color: var(--cic-text); border-bottom-color: var(--cic-red); }

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

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

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

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

.cic-odo {
  display: inline-flex; align-items: baseline;
  font-family: var(--cic-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 left a visible gap
   after narrow digits: "19.8" rendered as "1 9.8". */
.cic-odo-reel { display: inline-block; overflow: hidden; height: 1em; width: 1ch; vertical-align: baseline; text-align: center; }
.cic-odo-strip {
  display: block;
  transition: transform .85s var(--cic-ease-out);
  will-change: transform;
}
.cic-odo-strip i { display: block; height: 1em; line-height: 1; font-style: normal; }
.cic-odo-fixed { display: inline-block; }
.cic-odo-fixed--sep { width: .32em; }

/* ---------- panel 1: the dial ---------- */

.cic-dial {
  position: relative; min-height: calc(560px * var(--cic-ui-scale));
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(24px * var(--cic-ui-scale)) 0 calc(40px * var(--cic-ui-scale));
  overflow: hidden;
}
.cic-dial-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 110% at 78% 18%, rgba(225, 29, 42, .16), transparent 55%),
    linear-gradient(140deg, var(--cic-surface-3), var(--cic-bg) 62%);
  transition: filter 1.1s var(--cic-ease);
  filter: hue-rotate(var(--cic-era-hue, 0deg)) saturate(var(--cic-era-sat, 1));
}
.cic-dial-inner {
  position: relative; z-index: 2; width: 100%;
  max-width: var(--cic-maxw); margin: 0 auto; padding: 0 var(--cic-pad);
}

.cic-hero-head { text-align: center; }
.cic-hero-title {
  font-family: var(--cic-font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .02em; line-height: 1;
  font-size: clamp(calc(30px * var(--cic-ui-scale)), 5.2vw, calc(56px * var(--cic-ui-scale)));
  margin: 0 0 calc(10px * var(--cic-ui-scale));
}
.cic-hero-title em { font-style: normal; color: var(--cic-red); }
.cic-hero-sub {
  font-family: var(--cic-font-ui); color: var(--cic-dim);
  font-size: calc(16px * var(--cic-ui-scale));
  max-width: 58ch; margin: 0 auto calc(18px * var(--cic-ui-scale));
}

/* the year readout */
.cic-yearline {
  display: flex; align-items: center; justify-content: center;
  gap: calc(18px * var(--cic-ui-scale));
  margin: calc(6px * var(--cic-ui-scale)) 0 calc(4px * var(--cic-ui-scale));
}
.cic-year {
  font-size: clamp(calc(64px * var(--cic-ui-scale)), 13vw, calc(148px * var(--cic-ui-scale)));
  color: var(--cic-text);
  text-shadow: 0 calc(2px * var(--cic-ui-scale)) calc(30px * var(--cic-ui-scale)) rgba(225, 29, 42, .28);
}
.cic-nudge {
  appearance: none; background: transparent; cursor: pointer;
  border: 1px solid var(--cic-line-strong); border-radius: var(--cic-radius);
  color: var(--cic-dim); font-family: var(--cic-font-ui);
  width: calc(42px * var(--cic-ui-scale)); height: calc(42px * var(--cic-ui-scale));
  font-size: calc(19px * var(--cic-ui-scale)); line-height: 1;
  transition: border-color .2s, color .2s, background .2s;
}
.cic-nudge:hover { border-color: var(--cic-red); color: var(--cic-text); background: rgba(225, 29, 42, .1); }
.cic-nudge:disabled { opacity: .3; cursor: default; }

.cic-era-label {
  text-align: center; font-family: var(--cic-font-ui);
  font-size: calc(13px * var(--cic-ui-scale));
  letter-spacing: .16em; text-transform: uppercase; color: var(--cic-now);
  min-height: calc(20px * var(--cic-ui-scale));
  margin: 0 0 calc(18px * var(--cic-ui-scale));
}

/* the scrubber rail */
.cic-scrub { position: relative; margin: 0 auto; max-width: calc(980px * var(--cic-ui-scale)); }
.cic-scrub-rail {
  position: relative; height: calc(58px * var(--cic-ui-scale));
  border: 1px solid var(--cic-line-strong); border-radius: var(--cic-radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(0, 0, 0, .25));
  cursor: ew-resize; touch-action: pan-y; overflow: hidden;
}
.cic-scrub-rail:focus-visible { outline: 2px solid var(--cic-red); outline-offset: 3px; }
.cic-ticks { position: absolute; inset: 0; pointer-events: none; }
.cic-tick { position: absolute; bottom: 0; width: 1px; background: rgba(255, 255, 255, .11); height: calc(7px * var(--cic-ui-scale)); }
.cic-tick.is-half { height: calc(11px * var(--cic-ui-scale)); background: var(--cic-line-strong); }
.cic-tick.is-decade { height: calc(18px * var(--cic-ui-scale)); background: rgba(255, 255, 255, .34); }
.cic-tick-label {
  position: absolute; top: calc(7px * var(--cic-ui-scale)); transform: translateX(-50%);
  font-family: var(--cic-font-ui); font-size: calc(10px * var(--cic-ui-scale));
  letter-spacing: .1em; color: var(--cic-faint); pointer-events: none;
}
.cic-eras { position: absolute; inset: 0; pointer-events: none; }
.cic-era-band { position: absolute; top: 0; bottom: 0; border-right: 1px solid rgba(255, 255, 255, .06); transition: background .4s var(--cic-ease); }
.cic-era-band.is-current { background: rgba(225, 29, 42, .1); }
.cic-scrub-head {
  position: absolute; top: calc(-6px * var(--cic-ui-scale)); bottom: calc(-6px * var(--cic-ui-scale));
  width: calc(3px * var(--cic-ui-scale)); background: var(--cic-red);
  box-shadow: 0 0 calc(18px * var(--cic-ui-scale)) rgba(225, 29, 42, .9);
  transform: translateX(-50%); pointer-events: none;
  transition: left .18s var(--cic-ease);
}
.cic-scrub-head::after {
  content: ""; position: absolute; left: 50%; top: calc(-5px * var(--cic-ui-scale));
  width: calc(11px * var(--cic-ui-scale)); height: calc(11px * var(--cic-ui-scale));
  background: var(--cic-red); transform: translateX(-50%) rotate(45deg);
}
.cic-app[data-cic-dragging="1"] .cic-scrub-head { transition: none; }

.cic-scrub-hint {
  display: flex; justify-content: space-between; gap: 1em; align-items: center;
  font-family: var(--cic-font-ui); font-size: calc(12px * var(--cic-ui-scale));
  letter-spacing: .08em; text-transform: uppercase; color: var(--cic-faint);
  margin-top: calc(10px * var(--cic-ui-scale));
}
.cic-yearform { display: inline-flex; align-items: center; gap: .5em; }
.cic-yearform input {
  width: calc(78px * var(--cic-ui-scale)); background: var(--cic-surface); color: var(--cic-text);
  border: 1px solid var(--cic-line-strong); border-radius: var(--cic-radius);
  padding: calc(5px * var(--cic-ui-scale)) calc(8px * var(--cic-ui-scale));
  font-family: var(--cic-font-ui); font-size: calc(13px * var(--cic-ui-scale)); text-align: center;
}
.cic-yearform input:focus-visible { outline: 2px solid var(--cic-red); outline-offset: 1px; }

/* ---------- panel 2: the reveal ---------- */

.cic-reveal-grid {
  display: grid; gap: calc(18px * var(--cic-ui-scale));
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: calc(34px * var(--cic-ui-scale));
}
.cic-stat {
  background: var(--cic-surface); border: 1px solid var(--cic-line);
  border-top: calc(3px * var(--cic-ui-scale)) solid var(--cic-stat-accent, var(--cic-line-strong));
  border-radius: var(--cic-radius);
  padding: calc(22px * var(--cic-ui-scale));
  /* CLS reservation: measured by tools/measure-reservations.js across every
     year the scrubber can reach, taking the tallest result. */
  min-height: calc(176px * var(--cic-ui-scale));
  display: flex; flex-direction: column; justify-content: space-between;
}
.cic-stat--then { --cic-stat-accent: var(--cic-then); }
.cic-stat--adj  { --cic-stat-accent: var(--cic-muted); }
.cic-stat--now  { --cic-stat-accent: var(--cic-now); }
.cic-stat-label {
  font-family: var(--cic-font-ui); font-size: calc(12px * var(--cic-ui-scale));
  letter-spacing: .14em; text-transform: uppercase; color: var(--cic-muted); margin: 0;
}
.cic-stat-value {
  font-size: clamp(calc(30px * var(--cic-ui-scale)), 4.4vw, calc(48px * var(--cic-ui-scale)));
  margin: calc(12px * var(--cic-ui-scale)) 0 calc(8px * var(--cic-ui-scale));
  color: var(--cic-text);
}
.cic-stat-foot {
  font-family: var(--cic-font-ui); font-size: calc(13px * var(--cic-ui-scale));
  color: var(--cic-faint); margin: 0; min-height: calc(38px * var(--cic-ui-scale));
}

/* the duel bar */
.cic-duel { margin-top: calc(8px * var(--cic-ui-scale)); }
.cic-duel-row {
  display: grid; grid-template-columns: calc(154px * var(--cic-ui-scale)) 1fr;
  gap: calc(14px * var(--cic-ui-scale)); align-items: center;
  margin-bottom: calc(12px * var(--cic-ui-scale));
}
.cic-duel-name {
  font-family: var(--cic-font-ui); font-size: calc(13px * var(--cic-ui-scale));
  letter-spacing: .06em; text-transform: uppercase; color: var(--cic-dim);
}
.cic-duel-track {
  position: relative; height: calc(34px * var(--cic-ui-scale));
  background: var(--cic-surface); border: 1px solid var(--cic-line);
  border-radius: var(--cic-radius); overflow: hidden;
}
.cic-duel-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  transform-origin: left center; transform: scaleX(0);
  transition: transform 1.05s var(--cic-ease-out);
}
.cic-duel-fill--adj { background: linear-gradient(90deg, #4b4b55, #6a6a72); }
.cic-duel-fill--now { background: linear-gradient(90deg, var(--cic-red-dark), var(--cic-now)); }
/* The all-vehicle bar is the one that includes SUVs and pickups. Hatched so it
   reads as a different measure rather than simply a bigger number. */
.cic-duel-fill--all {
  background:
    repeating-linear-gradient(135deg,
      rgba(255, 255, 255, .16) 0 6px, transparent 6px 12px),
    linear-gradient(90deg, var(--cic-red-dark), var(--cic-now));
}
.cic-duel-amount {
  position: absolute; right: calc(10px * var(--cic-ui-scale)); top: 50%; transform: translateY(-50%);
  font-family: var(--cic-font-display); font-size: calc(15px * var(--cic-ui-scale));
  font-variant-numeric: tabular-nums; color: var(--cic-text);
}
.cic-gap-callout {
  margin-top: calc(18px * var(--cic-ui-scale)); padding: calc(18px * var(--cic-ui-scale));
  border: 1px solid var(--cic-line-strong);
  border-left: calc(3px * var(--cic-ui-scale)) solid var(--cic-red);
  background: rgba(225, 29, 42, .07); border-radius: var(--cic-radius);
  font-family: var(--cic-font-ui); font-size: calc(16px * var(--cic-ui-scale));
  color: var(--cic-dim); min-height: calc(78px * var(--cic-ui-scale));
}
.cic-gap-callout b { color: var(--cic-text); font-weight: 600; }

/* ---------- panel 3: weeks of work ---------- */

.cic-work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cic-gap); }
.cic-work-side { min-height: calc(198px * var(--cic-ui-scale)); display: flex; flex-direction: column; }
.cic-work-side .cic-work-caption { margin-top: auto; }
.cic-work-head { display: flex; align-items: baseline; gap: .6em; margin-bottom: calc(14px * var(--cic-ui-scale)); }
.cic-work-weeks { font-size: calc(46px * var(--cic-ui-scale)); color: var(--cic-work-accent, var(--cic-text)); }
.cic-work-side--then { --cic-work-accent: var(--cic-then); }
.cic-work-side--now { --cic-work-accent: var(--cic-now); }
.cic-work-unit {
  font-family: var(--cic-font-ui); font-size: calc(13px * var(--cic-ui-scale));
  letter-spacing: .14em; text-transform: uppercase; color: var(--cic-muted);
}
.cic-tiles {
  display: flex; flex-wrap: wrap; gap: calc(4px * var(--cic-ui-scale));
  /* Three rows of tiles: the worst case in the range is 1952 at 53 weeks,
     which wraps to two rows on desktop and three on a phone. Measured, not
     guessed -- see tools/perf-check.js for the CLS budget this protects. */
  min-height: calc(64px * var(--cic-ui-scale)); align-content: flex-start;
}
.cic-tile {
  width: calc(13px * var(--cic-ui-scale)); height: calc(13px * var(--cic-ui-scale));
  background: var(--cic-surface-2); border: 1px solid var(--cic-line);
  transform: scale(.4); opacity: 0;
  transition: transform .4s var(--cic-ease-out), opacity .4s var(--cic-ease-out), background .3s;
}
.cic-tile.is-in { transform: scale(1); opacity: 1; }
.cic-tile.is-filled { background: var(--cic-work-accent, var(--cic-red)); border-color: transparent; }
.cic-work-caption {
  font-family: var(--cic-font-ui); font-size: calc(13px * var(--cic-ui-scale));
  color: var(--cic-faint); margin: calc(14px * var(--cic-ui-scale)) 0 0;
}
.cic-work-verdict {
  margin-top: calc(26px * var(--cic-ui-scale)); padding-top: calc(20px * var(--cic-ui-scale));
  border-top: 1px solid var(--cic-line);
  font-family: var(--cic-font-ui); font-size: calc(17px * var(--cic-ui-scale));
  color: var(--cic-dim); min-height: calc(60px * var(--cic-ui-scale));
}
.cic-work-verdict b { color: var(--cic-text); }

/* ---------- panel 5: context tiles ---------- */

.cic-context-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(14px * var(--cic-ui-scale)); }
.cic-ctile {
  background: var(--cic-surface); border: 1px solid var(--cic-line);
  border-radius: var(--cic-radius); padding: calc(18px * var(--cic-ui-scale));
  min-height: calc(126px * var(--cic-ui-scale));
}
.cic-ctile-label {
  font-family: var(--cic-font-ui); font-size: calc(11px * var(--cic-ui-scale));
  letter-spacing: .14em; text-transform: uppercase; color: var(--cic-muted);
  margin: 0 0 calc(10px * var(--cic-ui-scale));
}
.cic-ctile-value { font-size: calc(30px * var(--cic-ui-scale)); color: var(--cic-text); }
.cic-ctile-foot {
  font-family: var(--cic-font-ui); font-size: calc(12px * var(--cic-ui-scale));
  color: var(--cic-faint); margin: calc(8px * var(--cic-ui-scale)) 0 0;
}
.cic-ctile-empty { color: var(--cic-faint); font-family: var(--cic-font-ui); font-size: calc(15px * var(--cic-ui-scale)); }

.cic-yearposts { margin-top: var(--cic-gap); }
.cic-yearposts-list {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: calc(12px * var(--cic-ui-scale));
  min-height: calc(82px * var(--cic-ui-scale));
}
.cic-yearposts-list a {
  display: block; padding: calc(14px * var(--cic-ui-scale)) calc(16px * var(--cic-ui-scale));
  background: var(--cic-surface); border: 1px solid var(--cic-line);
  border-left: calc(3px * var(--cic-ui-scale)) solid var(--cic-red);
  border-radius: var(--cic-radius); color: var(--cic-text); text-decoration: none;
  font-family: var(--cic-font-ui); font-size: calc(15px * var(--cic-ui-scale));
  transition: background .2s, transform .2s var(--cic-ease);
}
.cic-yearposts-list a:hover { background: var(--cic-surface-2); transform: translateX(calc(3px * var(--cic-ui-scale))); }

/* ---------- panel 6: share and embed ---------- */

.cic-share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cic-gap); align-items: start; }
.cic-sharecard-frame {
  background: var(--cic-surface); border: 1px solid var(--cic-line);
  border-radius: var(--cic-radius); padding: calc(14px * var(--cic-ui-scale));
}
.cic-sharecard-frame canvas { display: block; width: 100%; height: auto; border-radius: var(--cic-radius); }
.cic-btnrow { display: flex; flex-wrap: wrap; align-items: center; gap: calc(10px * var(--cic-ui-scale)); margin-top: calc(14px * var(--cic-ui-scale)); }
.cic-btn {
  appearance: none; cursor: pointer; border-radius: var(--cic-radius);
  font-family: var(--cic-font-ui); font-size: calc(13px * var(--cic-ui-scale));
  letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  padding: calc(12px * var(--cic-ui-scale)) calc(20px * var(--cic-ui-scale));
  border: 1px solid var(--cic-line-strong); background: transparent; color: var(--cic-text);
  transition: background .2s, border-color .2s, transform .15s var(--cic-ease);
}
.cic-btn:hover { border-color: var(--cic-red); background: rgba(225, 29, 42, .12); }
.cic-btn:active { transform: translateY(1px); }
.cic-btn--primary { background: var(--cic-red); border-color: var(--cic-red); color: #fff; }
.cic-btn--primary:hover { background: var(--cic-red-dark); border-color: var(--cic-red-dark); }
.cic-embed-code {
  width: 100%; min-height: calc(122px * var(--cic-ui-scale)); resize: vertical;
  background: var(--cic-bg-2); color: var(--cic-dim); border: 1px solid var(--cic-line-strong);
  border-radius: var(--cic-radius); padding: calc(14px * var(--cic-ui-scale));
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: calc(12px * var(--cic-ui-scale)); line-height: 1.5;
}
.cic-copied {
  font-family: var(--cic-font-ui); font-size: calc(13px * var(--cic-ui-scale));
  color: var(--cic-good); opacity: 0; transition: opacity .25s;
}
.cic-copied.is-on { opacity: 1; }

/* ---------- the article ---------- */

.cic-article {
  max-width: calc(760px * var(--cic-ui-scale)); margin: 0 auto;
  padding: var(--cic-gap) var(--cic-pad) calc(72px * var(--cic-ui-scale));
  background: var(--cic-bg);
}
.cic-article h2, .cic-article h3 {
  font-family: var(--cic-font-display); font-weight: 500; text-transform: uppercase;
  letter-spacing: .02em; line-height: 1.15; color: var(--cic-text);
  margin: calc(46px * var(--cic-ui-scale)) 0 calc(14px * var(--cic-ui-scale));
}
.cic-article h2 { font-size: calc(30px * var(--cic-ui-scale)); }
.cic-article h3 { font-size: calc(21px * var(--cic-ui-scale)); }
.cic-article p, .cic-article li { color: var(--cic-dim); }
.cic-article a { color: var(--cic-now); text-decoration: underline; text-underline-offset: 3px; }
.cic-article a:hover { color: var(--cic-text); }
.cic-article table {
  width: 100%; border-collapse: collapse; margin: calc(24px * var(--cic-ui-scale)) 0;
  font-family: var(--cic-font-ui); font-size: calc(14px * var(--cic-ui-scale));
}
.cic-article th, .cic-article td {
  padding: calc(10px * var(--cic-ui-scale)) calc(12px * var(--cic-ui-scale));
  border-bottom: 1px solid var(--cic-line); text-align: right;
}
.cic-article th:first-child, .cic-article td:first-child { text-align: left; }
.cic-article thead th {
  color: var(--cic-muted); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; font-size: calc(12px * var(--cic-ui-scale));
  border-bottom-color: var(--cic-line-strong);
}
.cic-article tbody tr:hover { background: var(--cic-surface); }
.cic-article figcaption,
.cic-sources { font-size: calc(13px * var(--cic-ui-scale)); color: var(--cic-faint); font-family: var(--cic-font-ui); }

.cic-credits {
  border-top: 1px solid var(--cic-line);
  padding: calc(30px * var(--cic-ui-scale)) var(--cic-pad);
  text-align: center; font-family: var(--cic-font-ui);
  font-size: calc(13px * var(--cic-ui-scale)); color: var(--cic-faint);
}
.cic-credits a { color: var(--cic-muted); }

/* ---------- embedded on someone else's site ---------- */

/*
 * ?embed=1. Whoever embeds this is lending us their page, so the copy takes
 * the tool and the credit and leaves everything that only makes sense at home:
 * the article, our ads, the share and embed panel (offering an embed code
 * inside an embed is a loop), and the site masthead.
 */
.cic-embedded .cic-masthead,
.cic-embedded #guide,
.cic-embedded .cic-panel--share { display: none; }
.cic-embedded .cic-dial { min-height: calc(460px * var(--cic-ui-scale)); }
.cic-embedded .cic-credits { padding: calc(18px * var(--cic-ui-scale)) var(--cic-pad); }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  :root { --cic-pad: calc(20px * var(--cic-ui-scale)); --cic-gap: calc(34px * var(--cic-ui-scale)); }
  .cic-reveal-grid { grid-template-columns: 1fr; }
  .cic-work-grid, .cic-share-grid { grid-template-columns: 1fr; }
  .cic-context-grid { grid-template-columns: repeat(2, 1fr); }
  .cic-yearposts-list { grid-template-columns: 1fr; }
  .cic-duel-row { grid-template-columns: 1fr; gap: calc(6px * var(--cic-ui-scale)); }
  .cic-dial { min-height: calc(500px * var(--cic-ui-scale)); }
  .cic-scrub-hint { flex-direction: column; align-items: center; gap: calc(10px * var(--cic-ui-scale)); }
  .cic-stat { min-height: calc(150px * var(--cic-ui-scale)); }
}
@media (max-width: 520px) {
  .cic-context-grid { grid-template-columns: 1fr; }
  .cic-masthead-link { display: none; }
}

/*
 * Reduced motion. One blanket rule, scoped to the tool's roots, so a single
 * edit covers every animation added later. The tool stays fully functional:
 * values still update, they simply arrive instead of counting up.
 */
@media (prefers-reduced-motion: reduce) {
  .cic-app, .cic-app *, .cic-app *::before, .cic-app *::after,
  .cic-art, .cic-art *, .cic-art *::before, .cic-art *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}