/* ── HICS Design System ──────────────────────────────────── */

/* Google Fonts loaded via <link> in base.html for better performance */

:root {
  /* ── Core palette ── */
  --bg: #080b12;
  --surface: #0f1420;
  --surface-2: #151a2c;
  --surface-3: #1b2038;
  /* Hero banner panel — translucent --surface-2 (#151a2c @ 50%) so it reads as
     tinted glass over --bg rather than a bright lifted card. Hero-only; do not
     swap for the global --surface-2 (cards/bands rely on the solid value). */
  --hero-panel: rgba(21, 26, 44, 0.5);
  --border: #1d2438;
  --border-light: #273050;
  /* Logo SVG: cls-3=#e2e4ed, cls-4=#6c7394 */
  /* Text model (June 2026) — headline vs body, à la Happy Hues. Hierarchy comes
     from a deliberate contrast GAP, not uniform brightness: a bright --heading
     (short text → no halation) pops over a muted --text body tuned to ~8.3:1, the
     comfortable level Happy Hues uses for long reading. Lavender-grey ramp.
     Ratios vs --bg: heading ~13:1 · text/body ~8.5:1 · soft ~7:1 · muted ~6:1 ·
     dim ~5:1. All clear AA (4.5:1) on --surface and --surface-2 too. */
  --heading: #d0d4e3;
  --text: #a7a9be;
  --text-soft: #979ab2;
  --text-muted: #8b91a7;
  --text-dim: #7e849d;

  /* ── Brand accent palette — from logos/default_filldot.svg ── */
  /* Mountain polygon: cls-1 = #6296cf  */
  --accent: #6296cf;
  --accent-bright: #7eb0e8;
  --accent-dim: #172440;
  /* Muon track / amber dot: cls-2 = #f0a031 */
  --amber: #f0a031;
  --amber-bright: #f8bc65;
  --amber-dim: #2e1e06;

  /* ── Supplementary palette ── */
  --green: #2ed873;
  --green-dim: #0c2818;
  --teal: #28d4b8;
  --teal-dim: #092520;
  --red: #e85555;
  --red-dim: #280e0e;

  /* ── RGB channels (for rgba() with opacity control) ── */
  --accent-rgb: 98, 150, 207;
  --amber-rgb:  240, 160, 49;
  --green-rgb:  46, 216, 115;
  --red-rgb:    232, 85, 85;
  --border-rgb: 29, 36, 56;

  /* ── Glow tokens (derived from brand colors) ── */
  --glow-accent: 0 0 28px rgba(var(--accent-rgb), 0.20);
  --glow-amber:  0 0 28px rgba(var(--amber-rgb),  0.22);
  --glow-green:  0 0 22px rgba(var(--green-rgb), 0.18);

  /* ── Gradients ── */
  --grad-accent-strip: linear-gradient(90deg, var(--accent-dim) 0%, transparent 100%);
  --grad-card-hover: linear-gradient(135deg, var(--surface-2) 0%, var(--surface-3) 100%);

  /* Typography — sans body/UI (reads cleanly on the dark bg; thin serif strokes
     bloom on near-black), mono for headings + data. Serif retired entirely. */
  --font-mono: "IBM Plex Mono", "Courier New", monospace;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ── Type scale ──────────────────────────────────────────
     One coherent step system. Replaces ~20 ad-hoc near-duplicate
     sizes (0.8/0.8125/0.82/0.825…) that had accumulated. Headings
     keep their own fluid clamp() sizes; a few deliberate display
     one-offs (1.35/1.75/2.4rem) stay literal. */
  --fs-xs:   0.75rem;    /* 12px — eyebrows, labels, badges, meta */
  --fs-sm:   0.8125rem;  /* 13px — small UI, captions, secondary meta */
  --fs-md:   0.875rem;   /* 14px — compact body, card meta */
  --fs-base: 0.9375rem;  /* 15px — card/secondary body copy */
  --fs-lg:   1rem;        /* 16px — emphasized inline */
  --fs-xl:   1.125rem;   /* 18px — body copy, content titles */
  --fs-2xl:  1.25rem;    /* 20px — sub-headings, leads */
  --fs-3xl:  1.5rem;     /* 24px — section sub-titles */
  --fs-4xl:  2rem;        /* 32px — large data readouts */

  /* ── Line-height scale ───────────────────────────────────
     Vertical rhythm on an 8px grid: body sits on a 24px row (16px × 1.5).
     Replaces ~15 ad-hoc line-heights (1.6/1.65/1.7/1.75/1.55/1.3/1.25/1.35…)
     so text baselines and the spacing scale share one grid. */
  --lh-display: 1.2;   /* h1, h2, hero tagline — big display */
  --lh-title:   1.3;   /* h3/h4, card/note/work/status titles, subheads */
  --lh-body:    1.5;   /* body, prose, leads, summaries → 16px = 24px row */
  --lh-data:    1;     /* big single-number readouts (.reading__value etc.) */

  /* Spacing scale */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --s9: 6rem;

  /* Layout */
  --max-width: 1100px;
  /* ── Width scale ─────────────────────────────────────────
     Two tiers, like the type/spacing scales. Everything you READ left-to-right
     shares ONE reading column (--w-prose); everything SCANNABLE/visual (cards,
     charts, maps, stat grids, figures, tables) fills the wide container
     (--w-wide). Prose left-aligns to the container edge, media breaks out
     rightward — so left edges always line up and the breakout reads as
     deliberate. Replaces ~6 near-duplicate widths (720/760/640/66ch/65ch/60ch). */
  --w-prose: 41rem;            /* ~656px, ~64 chars — all body text */
  --w-wide:  var(--max-width); /* 1100px — cards/charts/maps/grids/tables */
  /* Back-compat aliases — both now resolve to the single reading column. */
  --content-width: var(--w-prose);
  --measure: var(--w-prose);
  /* Corner radius scale. --radius-sm was referenced in 5 places but never
     defined (those corners silently rendered square); 4px is the dominant
     small value used elsewhere, so it's the intended token. */
  --radius-sm: 4px;   /* badges, chips, inputs, small controls */
  --radius: 6px;       /* default — cards, panels */
  --radius-lg: 12px;  /* large — modals, feature panels */
  --header-height: 56px;

  /* ── Shadows ── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.22);
}

/* ── Reset ──────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 16px;
  scroll-behavior: smooth;
  /* Prevent the ~scrollbar-width horizontal overflow from vw-based full-bleed
     elements (e.g. .section-alt, full-bleed heroes) once a vertical scrollbar
     appears on long pages. Keeps html as the vertical scroll root. */
  overflow-x: hidden;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  /* 16px sans ≈ the apparent size of the old 18px serif (larger x-height), and
     it's the web-standard reading size. 1.5 → a 24px line box, so body text sits
     on the 8px baseline grid (one --s5 row per line). */
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  /* No -webkit-font-smoothing: antialiased — on the dark bg it thins strokes and
     makes light text shimmery; the default (heavier) rendering reads better. */
  text-rendering: optimizeLegibility;
  /* Source for the auto-numbered section eyebrows (.section__label). */
  counter-reset: hics-sec;
}

/* ── Typography ─────────────────────────────────────────── */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-mono);
  font-weight: 500;
  /* Bright headline tier — pops over the muted body for hierarchy (Happy Hues). */
  color: var(--heading);
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
  /* Even line breaks for multi-line headings (progressive enhancement) */
  text-wrap: balance;
}
h1 {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  /* Heavier than the other headings so the page title is the first anchor. */
  font-weight: 600;
}
h2 {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  margin-top: var(--s7);
}
h3 {
  font-size: var(--fs-xl);
  line-height: var(--lh-title);
  margin-top: var(--s5);
}
h4 {
  font-size: var(--fs-base);
  line-height: var(--lh-title);
  margin-top: var(--s5);
}

p {
  /* One full 24px row between paragraphs so prose marches on the baseline grid. */
  margin-top: var(--s5);
  /* Avoid short, orphaned last lines on supporting browsers */
  text-wrap: pretty;
}
p:first-child {
  margin-top: 0;
}

/* ── Readability: cap prose line length ──────────────────────
   Bare paragraphs in a section sit inside the 1100px .container,
   which lets body copy run 120+ characters per line on wide
   screens. Cap loose prose to a comfortable measure; cards,
   grids, and explicit layout blocks are unaffected. */
.section > p {
  max-width: var(--measure);
}

/* Inline emphasis now carries real weight contrast (sans), so bold reads as bold
   without leaning on colour. */
strong,
b {
  font-weight: 600;
}

/* Lead line — the second tier under a page/section title. Larger than body but
   light weight, so it reads as an intro, not a heading. */
.lead {
  font-size: var(--fs-2xl);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--text-soft);
}

/* Branded text selection — ties highlight to the instrument-blue accent */
::selection {
  background: rgba(var(--accent-rgb), 0.30);
  color: #fff;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Inline links in reading content carry an underline so they aren't signalled
   by colour alone (WCAG 1.4.1) — the muted accent is hard to spot among grey
   body text. Subtle by default, brighter on hover. Nav, cards, buttons, and
   arrow CTAs live outside reading prose, so are unaffected. */
.content a,
.section > p a,
.note-item__summary a,
.hero__mission a {
  text-decoration: underline;
  text-decoration-color: rgba(var(--accent-rgb), 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.15s, text-decoration-color 0.15s;
}
.content a:hover,
.section > p a:hover,
.note-item__summary a:hover,
.hero__mission a:hover {
  color: var(--accent-bright);
  text-decoration-color: var(--accent-bright);
}

code,
pre,
.mono {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s5);
  overflow-x: auto;
  margin: var(--s5) 0;
}

blockquote {
  border-left: 3px solid var(--accent);
  padding-left: var(--s5);
  color: var(--text-muted);
  font-style: italic;
  margin: var(--s6) 0;
}

/* ── Layout ─────────────────────────────────────────────── */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--s5);
}

.content {
  max-width: var(--content-width);
  /* Long-form prose shares the body's 24px-row rhythm (16px × 1.5) rather than a
     17px/1.7 one-off, so articles and lab notes sit on the same baseline grid. */
  line-height: var(--lh-body);
}
.content p + p {
  margin-top: var(--s5);
}
/* Prevent rich-text content from overflowing */
.content img,
.content table,
.richtext img,
.richtext table {
  max-width: 100%;
}
.content table,
.richtext table {
  display: block;
  overflow-x: auto;
}