/* CalcVC — web expression of design/BRAND_CONTRACT.md + design/tokens.json.
   Monochrome neutrals, one muted ink-steel accent, system typeface only.
   No webfont, no gradient, no shadow, no glassmorphism, no outcome colour. */

:root {
  color-scheme: light dark;

  /* tokens.json → color.light */
  --bg: #FFFFFF;
  --bg-subtle: #F6F6F7;
  --bg-elevated: #FFFFFF;
  --fill: #F0F0F1;
  --text-primary: #1A1A1A;
  --text-secondary: #5C5C5C;
  --text-tertiary: #8C8C8C;
  --separator: #E6E6E6;
  --accent: #3D4F61;
  --accent-muted: #5A6B7C;
  --on-accent: #FFFFFF;

  /* tokens.json → typography.web */
  --font: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* tokens.json → space (4-point grid) */
  --xxs: 4px;
  --xs: 8px;
  --sm: 12px;
  --md: 16px;
  --lg: 20px;
  --xl: 24px;
  --xxl: 32px;
  --section: 56px;
  --min-touch: 44px;

  /* tokens.json → radius */
  --r-chip: 6px;
  --r-control: 8px;
  --r-card: 12px;
  --r-sheet: 16px;

  /* tokens.json → motion */
  --dur-short: 160ms;
  --dur-medium: 220ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  --measure: 68ch;
  --container: 1000px;
  --gutter: clamp(20px, 5vw, 40px);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* tokens.json → color.dark (restrained charcoal, not theatrical OLED) */
    --bg: #161616;
    --bg-subtle: #1C1C1C;
    --bg-elevated: #1E1E1E;
    --fill: #242424;
    --text-primary: #F2F2F2;
    --text-secondary: #A8A8A8;
    --text-tertiary: #7A7A7A;
    --separator: #2C2C2C;
    --accent: #A8B8C8;
    --accent-muted: #8A9AAA;
    --on-accent: #161616;
  }
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
}

/* Numbers are native, legible and financially precise everywhere. */
.num,
table,
.formula,
.metric__value {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-short) var(--ease), color var(--dur-short) var(--ease);
}

a:hover {
  border-bottom-color: var(--accent-muted);
}

a:focus-visible,
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-chip);
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.2;
}

p {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

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

.measure {
  max-width: var(--measure);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: var(--sm) var(--md);
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: var(--r-control);
  z-index: 10;
}

.skip-link:focus {
  left: var(--gutter);
  top: var(--xs);
}

/* ── Chrome ─────────────────────────────────────────────────────────── */

.chrome {
  border-bottom: 1px solid var(--separator);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 5;
}

.chrome__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md);
  min-height: 56px;
  padding-block: var(--sm);
}

.brand {
  display: inline-flex;
  align-items: center;
  border-bottom: 0;
  min-height: var(--min-touch);
}

/* Owner-supplied wordmark. It is the logo, never the app icon. */
.brand__logo {
  height: 26px;
  width: auto;
}

/* The wordmark artwork has a white ground; give it a plate on charcoal. */
@media (prefers-color-scheme: dark) {
  .brand__logo,
  .footer__logo {
    background: #FFFFFF;
    border-radius: var(--r-chip);
    padding: 4px 6px;
  }
}

.chrome__nav {
  display: flex;
  align-items: center;
  gap: var(--lg);
  font-size: 14px;
}

.chrome__nav a {
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  min-height: var(--min-touch);
}

.chrome__nav a:hover,
.chrome__nav a[aria-current="page"] {
  color: var(--text-primary);
}

/* ── Kickers, sections ──────────────────────────────────────────────── */

.kicker {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0;
}

.section {
  border-top: 1px solid var(--separator);
  padding-block: var(--section);
}

.section__head {
  display: flex;
  align-items: baseline;
  gap: var(--sm);
  margin-bottom: var(--xl);
}

.section__numeral {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
}

.section__title {
  font-size: 20px;
}

.section__lede {
  font-size: 17px;
  color: var(--text-secondary);
  margin-top: var(--sm);
}

.stack > * + * {
  margin-top: var(--md);
}

.stack-lg > * + * {
  margin-top: var(--xl);
}

/* ── Hero ───────────────────────────────────────────────────────────── */

.hero {
  padding-block: clamp(48px, 9vw, 88px) var(--section);
}

.hero__title {
  font-size: clamp(28px, 3.6vw, 36px);
  margin-top: var(--sm);
  max-width: 26ch;
}

.hero__lede {
  font-size: 17px;
  color: var(--text-secondary);
  margin-top: var(--md);
  max-width: 60ch;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--xs);
  margin-top: var(--xl);
  padding: 6px 10px;
  border: 1px solid var(--separator);
  border-radius: var(--r-chip);
  background: var(--bg-subtle);
  font-size: 13px;
  color: var(--text-secondary);
}

.status__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-muted);
  flex: none;
}

/* Persistent, concise, tertiary. Never a splashy banner. */
.disclaimer {
  margin-top: var(--xl);
  padding-top: var(--md);
  border-top: 1px solid var(--separator);
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 64ch;
}

/* ── Figures ────────────────────────────────────────────────────────── */

.figure {
  margin: 0;
  border: 1px solid var(--separator);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--bg-subtle);
}

.figure img {
  width: 100%;
}

.figure figcaption {
  padding: var(--sm) var(--md);
  border-top: 1px solid var(--separator);
  font-size: 12px;
  color: var(--text-secondary);
}

/* ── Tables ─────────────────────────────────────────────────────────── */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.table caption {
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding-bottom: var(--xs);
}

.table th,
.table td {
  text-align: left;
  padding: 10px var(--sm) 10px 0;
  border-bottom: 1px solid var(--separator);
  vertical-align: baseline;
}

.table th {
  font-weight: 400;
  color: var(--text-secondary);
  width: 46%;
}

.table td {
  color: var(--text-primary);
}

.table td.value {
  text-align: right;
  padding-right: 0;
  font-weight: 600;
}

.table td.note {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 400;
}

.table tr:last-child th,
.table tr:last-child td {
  border-bottom: 0;
}

.grid-2 {
  display: grid;
  gap: var(--xxl);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .grid-2 {
    grid-template-columns: 1fr 1fr;
    gap: var(--xxl) 48px;
  }
}

/* ── Formula panel ──────────────────────────────────────────────────── */

.formula {
  margin: 0;
  padding: var(--md);
  background: var(--bg-subtle);
  border: 1px solid var(--separator);
  border-radius: var(--r-card);
  font-size: 15px;
  line-height: 2;
  color: var(--text-primary);
  overflow-x: auto;
}

.formula dt {
  color: var(--text-secondary);
  font-size: 13px;
}

.formula dd {
  margin: 0 0 var(--sm);
}

.formula dd:last-child {
  margin-bottom: 0;
}

/* ── Plain lists ────────────────────────────────────────────────────── */

.list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--separator);
  color: var(--text-secondary);
  font-size: 15px;
}

.list li:last-child {
  border-bottom: 0;
}

.list strong {
  color: var(--text-primary);
  font-weight: 500;
}

.prose {
  max-width: var(--measure);
}

.prose h2 {
  font-size: 17px;
  margin-top: var(--xxl);
  margin-bottom: var(--xs);
}

.prose h2:first-of-type {
  margin-top: var(--xl);
}

.prose p {
  color: var(--text-secondary);
  margin-bottom: var(--sm);
}

.prose ul {
  margin: 0 0 var(--md);
  padding-left: var(--lg);
  color: var(--text-secondary);
}

.prose li {
  margin-bottom: var(--xxs);
}

.meta {
  font-size: 13px;
  color: var(--text-secondary);
}

/* ── Footer ─────────────────────────────────────────────────────────── */

.footer {
  border-top: 1px solid var(--separator);
  padding-block: var(--xxl);
  font-size: 13px;
  color: var(--text-secondary);
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--md);
}

.footer__logo {
  height: 20px;
  width: auto;
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lg);
}

.footer__nav a {
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  min-height: var(--min-touch);
}

.footer__legal {
  margin-top: var(--lg);
  padding-top: var(--md);
  border-top: 1px solid var(--separator);
  max-width: 72ch;
}

.footer__legal p + p {
  margin-top: var(--xs);
}

/* ── Motion: small and purposeful; Reduce Motion honoured ───────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Spacing utilities (kept as classes so the CSP can forbid inline style) ── */

.mt-0 { margin-top: 0; }
.mt-lg { margin-top: var(--lg); }
.mt-xxl { margin-top: var(--xxl); }
.mb-lg { margin-bottom: var(--lg); }