/* ============================================================
   CoolPlanet App Design System — Components & Layout
   ============================================================ */

* { box-sizing: border-box; }
html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  /* Plain grey canvas, per the v2 specimen (rule 8): the canvas is flat grey
     (graphite in dark); the generative planet appears only in deliberate
     .planet-band bands, never as a whole-page wash. */
  background: #F4F5F5;
}
[data-theme="dark"] body {
  background: #303030;
}

/* ----- Layout shell ----- */
.shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}

.sidenav {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  border-right: 1px solid var(--border-default);
  background: var(--surface-elevated);
  padding: var(--sp-8) var(--sp-7);
  overflow-y: auto;
  z-index: var(--z-sticky);
}

.sidenav__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-9);
}
.sidenav__brand-mark {
  width: 28px; height: 28px;
  display: grid; place-items: center;
}
.sidenav__brand-name {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-lg);
  letter-spacing: var(--tracking-snug);
}
.sidenav__brand-sub {
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-top: 2px;
}

.sidenav__section {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mega);
  color: var(--text-tertiary);
  margin: var(--sp-7) 0 var(--sp-3);
  padding: 0 var(--sp-3);
}
.sidenav__section:first-of-type { margin-top: 0; }

.sidenav__link {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--r-sm);
  font-size: var(--fs-body);
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast);
  position: relative;
}
.sidenav__link:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}
.sidenav__link.is-active {
  background: var(--brand-subtle);
  color: var(--text-primary);
  font-weight: var(--fw-medium);
}
.sidenav__link.is-active::before {
  content:"";
  position:absolute; left:0; top:8px; bottom:8px;
  width: 2px;
  background: var(--brand);
  border-radius: 2px;
}

/* Main pane */
.main {
  padding: var(--sp-10) var(--sp-12) var(--sp-14);
  max-width: 1180px;
  width: 100%;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: calc(var(--z-sticky) - 1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-5) var(--sp-12);
  background: color-mix(in oklab, var(--surface-canvas) 80%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  margin: calc(var(--sp-10) * -1) calc(var(--sp-12) * -1) var(--sp-10);
}
.topbar__crumbs {
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.topbar__actions { display: flex; gap: var(--sp-3); align-items:center; }

/* Theme toggle */
.theme-toggle {
  display: inline-flex;
  background: var(--surface-sunken);
  border-radius: var(--r-pill);
  padding: 3px;
  border: 1px solid var(--border-default);
}
.theme-toggle button {
  appearance: none;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all var(--d-fast) var(--ease-out);
}
.theme-toggle button[aria-pressed="true"] {
  background: var(--surface-elevated);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
}

/* ----- Section header ----- */
.section { padding: var(--sp-10) 0 var(--sp-13); position: relative; }
.section:last-child { border-bottom: 0; }

/* ----- Hairline borders — coloured 1px edges. Pair with any container to
   declare its tone without filling. Variants below tint the alpha‑mixed brand. */
.hairline       { border: 1px solid color-mix(in oklab, var(--brand) 22%, transparent); }
.hairline-top   { border-top:    1px solid color-mix(in oklab, var(--brand) 22%, transparent); }
.hairline-bot   { border-bottom: 1px solid color-mix(in oklab, var(--brand) 22%, transparent); }
.hairline-left  { border-left:   1px solid color-mix(in oklab, var(--brand) 22%, transparent); }
.hairline-right { border-right:  1px solid color-mix(in oklab, var(--brand) 22%, transparent); }
.hairline--forest { border-color: color-mix(in oklab, var(--forest-400) 28%, transparent); }
.hairline--lime   { border-color: color-mix(in oklab, var(--accent-lime) 38%, transparent); }
.hairline--teal   { border-color: color-mix(in oklab, var(--accent-teal) 30%, transparent); }
.hairline--cyan   { border-color: color-mix(in oklab, var(--accent-cyan) 32%, transparent); }
.hairline--info   { border-color: color-mix(in oklab, var(--info-400) 30%, transparent); }
.hairline--amber  { border-color: color-mix(in oklab, var(--warning-400) 30%, transparent); }
.hairline--ink    { border-color: color-mix(in oklab, var(--text-primary) 14%, transparent); }
.section__eyebrow {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  color: var(--brand-strong);
  margin-bottom: var(--sp-3);
}
.section__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--sp-4);
}
.section__lede {
  font-size: var(--fs-body-lg);
  color: var(--text-secondary);
  max-width: 62ch;
  margin: 0 0 var(--sp-10);
  line-height: var(--lh-relaxed);
}

.subsection { margin-top: var(--sp-11); }
.subsection__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-snug);
  margin: 0 0 var(--sp-3);
}
.subsection__note {
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--sp-6);
  max-width: 60ch;
}

/* ----- Tiles & grid utilities ----- */
.grid { display: grid; gap: var(--sp-5); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.g-6 { grid-template-columns: repeat(6, 1fr); }

.tile {
  position: relative;
  background:
    radial-gradient(ellipse 90% 80% at 100% 0%, color-mix(in oklab, var(--section-accent, var(--brand)) 14%, transparent), transparent 65%),
    color-mix(in oklab, var(--section-accent, var(--brand)) 4%, var(--surface-elevated));
  border: 1px solid color-mix(in oklab, var(--text-primary) 14%, transparent);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  overflow: hidden;
}
.tile--flat { border: 1px dashed var(--border-default); background: transparent; }

/* Tile rhythm — vary border treatment: ink → cyan → lime, never identical adjacent */
.tile-rhythm > .tile:nth-child(3n+1) {
  background:
    radial-gradient(ellipse 90% 80% at 100% 0%, color-mix(in oklab, var(--brand) 16%, transparent), transparent 65%),
    color-mix(in oklab, var(--brand) 5%, var(--surface-elevated));
  border-color: color-mix(in oklab, var(--text-primary) 18%, transparent);
}
.tile-rhythm > .tile:nth-child(3n+2) {
  background:
    radial-gradient(ellipse 90% 80% at 0% 100%, color-mix(in oklab, var(--accent-cyan) 18%, transparent), transparent 65%),
    color-mix(in oklab, var(--accent-cyan) 5%, var(--surface-elevated));
  border-color: color-mix(in oklab, var(--accent-cyan) 38%, transparent);
}
.tile-rhythm > .tile:nth-child(3n+3) {
  background:
    radial-gradient(ellipse 90% 80% at 50% 100%, color-mix(in oklab, var(--accent-lime) 18%, transparent), transparent 65%),
    color-mix(in oklab, var(--accent-lime) 5%, var(--surface-elevated));
  border-color: color-mix(in oklab, var(--accent-lime) 45%, transparent);
}

/* Section accent — each section can own a different accent colour so the
   page reads in chapters rather than one uniform tone. Wash opacity is
   strong enough to actually see, not just hint. Bullet dots, eyebrows,
   and the per-section gradient overlay all inherit. */
.section { --section-accent: var(--brand-strong); position: relative; }
.section--lime  { --section-accent: var(--lime-600); }
.section--teal  { --section-accent: var(--teal-400); }
.section--cyan  { --section-accent: var(--accent-cyan); }
.section--info  { --section-accent: var(--info-500); }
.section--amber { --section-accent: var(--warning-500); }
.section .bullet-eyebrow__dot { background: var(--section-accent); }

/* Per-section ambient wash — removed. The body bg's color spots already give
   each scroll position a different ambient hue, so overlaying a second
   per-section gradient was redundant AND was creating visible hard edges
   wherever the gradient peaked near the section margin. Accent colour for
   eyebrows + bullet dots still derives from --section-accent. */

/* Code chip for token names */
.token {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
  background: var(--surface-sunken);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  letter-spacing: 0;
}
.kbd {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  padding: 1px 5px;
  border: 1px solid var(--border-default);
  border-bottom-width: 2px;
  border-radius: var(--r-xs);
  background: var(--surface-elevated);
  color: var(--text-secondary);
}

/* ============================================================
   COLOR SWATCHES
   ============================================================ */
.swatch {
  position: relative;
  border-radius: var(--r-md);
  border: 1px solid var(--border-subtle);
  padding: var(--sp-3);
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: var(--fs-caption);
  overflow: hidden;
}
.swatch__name { font-weight: var(--fw-medium); }
.swatch__val { font-family: var(--font-mono); opacity: .7; }
.ramp { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; }
.ramp__step {
  height: 64px;
  border-radius: var(--r-sm);
  position: relative;
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: flex-end;
  padding: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: -0.02em;
}

/* Semantic surface preview */
.surface-card {
  border-radius: var(--r-lg);
  border: 1px solid var(--border-subtle);
  padding: var(--sp-6);
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.surface-card__label { font-weight: var(--fw-medium); font-size: var(--fs-body); }
.surface-card__meta { font-size: var(--fs-caption); color: var(--text-tertiary); font-family: var(--font-mono); }

/* ============================================================
   TYPOGRAPHY SPECIMENS
   ============================================================ */
.type-row {
  display: grid;
  grid-template-columns: 140px 1fr 200px;
  gap: var(--sp-6);
  align-items: baseline;
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--border-subtle);
}
.type-row:last-child { border-bottom: 1px solid var(--border-subtle); }
.type-row__label {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
}
.type-row__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-tertiary);
  text-align: right;
}
.type-row__sample { color: var(--text-primary); }

/* Type scale samples */
.t-display-2xl { font-size: var(--fs-display-2xl); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); font-family: var(--font-display);}
.t-display-xl  { font-size: var(--fs-display-xl);  font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); font-family: var(--font-display);}
.t-display-lg  { font-size: var(--fs-display-lg);  font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); font-family: var(--font-display);}
.t-display-md  { font-size: var(--fs-display-md);  font-weight: var(--fw-semibold); letter-spacing: var(--tracking-snug); line-height: var(--lh-snug); font-family: var(--font-display);}
.t-h1 { font-size: var(--fs-h1); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-snug); line-height: var(--lh-snug);}
.t-h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-snug); line-height: var(--lh-snug);}
.t-h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
.t-h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
.t-body-lg { font-size: var(--fs-body-lg); }
.t-body { font-size: var(--fs-body); }
.t-body-sm { font-size: var(--fs-body-sm); color: var(--text-secondary); }
.t-caption { font-size: var(--fs-caption); color: var(--text-tertiary); }
.t-overline { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-mega); color: var(--text-tertiary); }
.t-mono { font-family: var(--font-mono); font-size: var(--fs-body-sm); }
.t-num { font-family: var(--font-mono); font-feature-settings: "tnum"; }

/* ============================================================
   SPACING & RADII
   ============================================================ */
.spacing-bar {
  display: grid;
  grid-template-columns: 80px 1fr 80px;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-3) 0;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-secondary);
}
.spacing-bar__bar {
  height: 12px;
  background: var(--brand);
  border-radius: 2px;
}
.spacing-bar__px { text-align: right; color: var(--text-tertiary); }

.radius-tile {
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  height: 90px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
}

.shadow-tile {
  background: var(--surface-elevated);
  border-radius: var(--r-lg);
  height: 110px;
  display: flex;
  align-items: flex-end;
  padding: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  --btn-bg: var(--surface-elevated);
  --btn-fg: var(--text-primary);
  --btn-border: var(--border-default);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1;
  padding: 0 var(--sp-5);
  height: 36px;
  border-radius: var(--r-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  cursor: pointer;
  transition: background var(--d-fast) var(--ease-out),
              border-color var(--d-fast),
              color var(--d-fast),
              transform var(--d-fast),
              box-shadow var(--d-fast);
  white-space: nowrap;
  letter-spacing: var(--tracking-snug);
}
.btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.btn:active { transform: translateY(.5px); }

/* primary (forest, white text) */
.btn--primary {
  --btn-bg: var(--brand);
  --btn-fg: var(--text-on-brand);
  --btn-border: transparent;
}
.btn--primary:hover { background: var(--brand-hover); }
.btn--primary:active { background: var(--brand-active); }

/* secondary (forest/teal — depth direction) */
.btn--secondary {
  --btn-bg: var(--surface-inverse);
  --btn-fg: var(--text-inverse);
  --btn-border: transparent;
}
.btn--secondary:hover { background: color-mix(in oklab, var(--surface-inverse) 88%, var(--brand) 12%); }

/* tertiary / ghost */
.btn--ghost {
  --btn-bg: transparent;
  --btn-border: transparent;
  --btn-fg: var(--text-primary);
}
.btn--ghost:hover { background: var(--surface-sunken); }

/* outline */
.btn--outline {
  --btn-bg: transparent;
  --btn-border: var(--border-strong);
}
.btn--outline:hover { background: var(--surface-sunken); }

/* danger */
.btn--danger {
  --btn-bg: var(--status-danger);
  --btn-fg: #fff;
  --btn-border: transparent;
}
.btn--danger:hover { background: color-mix(in oklab, var(--status-danger) 85%, black); }

/* sizes */
.btn--sm { height: 28px; padding: 0 var(--sp-4); font-size: var(--fs-body-sm); border-radius: var(--r-sm); }
.btn--lg { height: 44px; padding: 0 var(--sp-7); font-size: var(--fs-body-lg); border-radius: var(--r-md); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .5; pointer-events: none;
}

/* Variation B: pill */
.btn--pill { border-radius: var(--r-pill); }
/* Variation C: sharp + tight (brutalist accent) */
.btn--sharp { border-radius: var(--r-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-size: var(--fs-caption); font-weight: var(--fw-semibold); }

/* Icon button */
.icon-btn {
  width: 32px; height: 32px;
  display: inline-grid; place-items: center;
  border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--d-fast);
}
.icon-btn:hover { background: var(--surface-sunken); color: var(--text-primary); }

/* ============================================================
   INPUTS / SELECTS / SWITCHES / CHECKBOX
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--text-primary); }
.field__hint { font-size: var(--fs-caption); color: var(--text-tertiary); }
.field__hint--error { color: var(--status-danger); }

.input, .select, .textarea {
  appearance: none;
  width: 100%;
  font: inherit;
  font-size: var(--fs-body);
  color: var(--text-primary);
  background:
    radial-gradient(ellipse 100% 100% at 100% 50%, color-mix(in oklab, var(--brand) 5%, transparent), transparent 75%),
    var(--surface-elevated);
  border: 1px solid color-mix(in oklab, var(--brand) 16%, transparent);
  border-radius: var(--r-md);
  height: 36px;
  padding: 0 var(--sp-4);
  transition: border-color var(--d-fast), box-shadow var(--d-fast);
  outline: none;
}
.textarea { padding: var(--sp-3) var(--sp-4); height: auto; min-height: 84px; resize: vertical; line-height: var(--lh-base); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus-ring) 25%, transparent);
}
.input::placeholder, .textarea::placeholder { color: var(--text-tertiary); }
.input[aria-invalid="true"] { border-color: var(--status-danger); }
.input[disabled] { opacity: .5; background: var(--surface-sunken); }

.input-group {
  display: flex;
  align-items: center;
  background:
    radial-gradient(ellipse 100% 100% at 100% 50%, color-mix(in oklab, var(--brand) 5%, transparent), transparent 75%),
    var(--surface-elevated);
  border: 1px solid color-mix(in oklab, var(--brand) 16%, transparent);
  border-radius: var(--r-md);
  padding: 0 var(--sp-4);
  height: 36px;
  gap: var(--sp-3);
}
.input-group:focus-within {
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus-ring) 25%, transparent);
}
.input-group .input {
  border: 0; height: 100%; padding: 0; background: transparent; box-shadow: none;
}
.input-group__addon {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
}

.select {
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 14px center, right 9px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--sp-9);
  color: var(--text-primary);
}

/* Checkbox / Radio */
.check, .radio {
  appearance: none;
  width: 16px; height: 16px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface-elevated);
  border-radius: var(--r-xs);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  transition: all var(--d-fast);
}
.radio { border-radius: 999px; }
.check:checked, .radio:checked {
  background: var(--brand);
  border-color: var(--brand);
}
.check:checked::after {
  content:"";
  width: 9px; height: 5px;
  border-left: 2px solid var(--text-on-brand);
  border-bottom: 2px solid var(--text-on-brand);
  transform: rotate(-45deg) translate(1px,-1px);
}
.radio:checked::after { content:""; width:6px; height:6px; border-radius:50%; background: var(--text-on-brand); }

/* Switch */
.switch {
  position: relative;
  width: 36px; height: 20px;
  background: var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--d-base);
  flex-shrink: 0;
}
.switch::after {
  content:"";
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 999px;
  transition: transform var(--d-base) var(--ease-out);
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.switch.is-on { background: var(--brand); }
.switch.is-on::after { transform: translateX(16px); }

/* Slider track preview (visual only) */
.slider {
  position: relative;
  height: 4px;
  background: var(--border-default);
  border-radius: 2px;
}
.slider::after {
  content:"";
  position:absolute; top:-6px; left: 40%;
  width: 16px; height: 16px;
  background: var(--surface-elevated);
  border: 2px solid var(--brand);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}
.slider::before {
  content:"";
  position:absolute; left: 0; top: 0; height: 100%; width: 40%;
  background: var(--brand);
  border-radius: 2px;
}

/* ============================================================
   BADGES / TAGS / STATUS PILLS
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-snug);
  border-radius: var(--r-pill);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  border: 1px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
}
.badge--success { background: var(--status-success-bg); color: var(--status-success); }
.badge--warning { background: var(--status-warning-bg); color: var(--status-warning); }
.badge--danger  { background: var(--status-danger-bg);  color: var(--status-danger); }
.badge--info    { background: var(--status-info-bg);    color: var(--status-info); }
.badge--brand   { background: var(--brand-subtle);      color: var(--brand-strong); }
.badge--inverse { background: var(--surface-inverse);   color: var(--text-inverse); }
.badge__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Tag — square corners */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 8px;
  font-size: var(--fs-caption);
  border: 1px solid var(--border-default);
  border-radius: var(--r-xs);
  background: var(--surface-elevated);
  color: var(--text-secondary);
  font-family: var(--font-mono);
}
.tag__close { color: var(--text-tertiary); cursor: pointer; line-height: 1; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, color-mix(in oklab, var(--brand) 5%, transparent), transparent 65%),
    var(--surface-elevated);
  border: 1px solid color-mix(in oklab, var(--text-primary) 14%, transparent);
  border-radius: var(--r-lg);
  padding: var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.card__head { display: flex; justify-content: space-between; align-items: flex-start; }
.card__title { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--text-secondary); margin: 0; }
.card__metric { font-size: var(--fs-display-md); font-family: var(--font-display); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); line-height: 1; font-feature-settings: "tnum"; }
.card__delta { font-size: var(--fs-caption); color: var(--status-success); }
.card__foot { font-size: var(--fs-caption); color: var(--text-tertiary); }

/* ============================================================
   METRIC TILE — the new graphic-designed metric block.
   Architecture: ambient brand glow + mono bullet eyebrow + giant numeral +
   hairline-divider footer.
   ============================================================ */
.metric {
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 0% 100%, color-mix(in oklab, var(--brand) 4%, transparent), transparent 65%),
    var(--surface-elevated);
  border: 1px solid color-mix(in oklab, var(--accent-cyan) 28%, transparent);
  border-radius: var(--r-xl);
  padding: var(--sp-9) var(--sp-8) var(--sp-7);
  min-height: 320px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-8);
}
.metric__glow {
  position: absolute; inset: -10%;
  background: radial-gradient(ellipse 70% 60% at 90% 10%, var(--accent-lime), transparent 55%);
  filter: blur(50px);
  opacity: .28;
  pointer-events: none;
}
.metric__inner { position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--sp-7); flex: 1; justify-content: space-between; }
.metric__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-5); }
.metric__num {
  font-family: var(--font-display);
  font-size: 84px;
  line-height: .85;
  letter-spacing: -.035em;
  font-weight: 400;
  color: var(--text-primary);
  font-feature-settings: "tnum";
  margin: 0;
}
.metric__num--brand { color: var(--brand-strong); }
.metric__num sup, .metric__num small {
  font-size: .35em;
  vertical-align: top;
  margin-left: .12em;
  font-weight: 500;
  color: var(--text-tertiary);
}
.metric__foot {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--sp-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  gap: var(--sp-4);
}
.metric__delta { color: var(--status-success); font-weight: 500; }
.metric__delta--down { color: var(--status-danger); }

/* Variant directions */
.metric--forest .metric__glow {
  background: radial-gradient(ellipse 70% 60% at 90% 10%, var(--forest-400), transparent 55%);
  opacity: .25;
}
.metric--teal .metric__glow {
  background: radial-gradient(ellipse 70% 60% at 90% 10%, var(--accent-cyan), transparent 55%);
  opacity: .25;
}

/* Inverse variant — dark surface, gradient bleed, white num */
.metric--inverse {
  background: var(--surface-inverse);
  color: var(--text-inverse);
  border-color: transparent;
}
.metric--inverse .metric__num { color: var(--text-inverse); }
.metric--inverse .metric__foot {
  border-color: color-mix(in oklab, var(--text-inverse) 15%, transparent);
  color: color-mix(in oklab, var(--text-inverse) 70%, transparent);
}
/* Inverse metric card — make the glow respect inverse-accent so it doesn't
   always emit lime regardless of theme */
.metric--inverse .metric__glow {
  background:
    radial-gradient(ellipse 80% 70% at 90% 10%, color-mix(in oklab, var(--inverse-accent) 50%, transparent), transparent 60%),
    radial-gradient(ellipse 70% 60% at 60% 90%, color-mix(in oklab, var(--brand) 35%, transparent), transparent 65%);
  opacity: 1;
  filter: blur(60px);
}

/* Motif variant — full graphic treatment: bleed + topography */
.metric--motif {
  background: #0B1110;
  color: #F1F5F1;
  border-color: transparent;
}
.metric--motif .metric__num { color: #fff; font-weight: 300; }
.metric--motif .metric__foot {
  border-color: rgba(241,245,241,.18);
  color: rgba(241,245,241,.75);
}
.metric--motif .metric__glow {
  background:
    radial-gradient(ellipse 80% 60% at 100% 30%, rgba(77,133,77,.55), transparent 55%),
    radial-gradient(ellipse 60% 50% at 90% 95%, rgba(63,160,176,.40), transparent 60%),
    radial-gradient(ellipse 50% 40% at 95% 5%, rgba(178,189,47,.35), transparent 55%);
  opacity: 1;
  filter: blur(50px);
}
.metric--motif::after {
  content:"";
  position:absolute; inset: 0;
  background: url('topography-white.svg') center/cover no-repeat;
  opacity: .05;
  pointer-events: none;
  z-index: 1;
}
.metric--motif .metric__inner { z-index: 3; }

/* Card direction variations (kept for back-compat with old markup) */
.card--accent {
  background: var(--brand-subtle);
  border-color: transparent;
}
.card--inverse {
  background: var(--surface-inverse);
  color: var(--text-inverse);
  border-color: transparent;
}
.card--inverse .card__title { color: color-mix(in oklab, var(--text-inverse) 65%, transparent); }
.card--inverse .card__foot  { color: color-mix(in oklab, var(--text-inverse) 50%, transparent); }
.card--motif {
  position: relative;
  overflow: hidden;
  background: #0B1110;
  color: #F2F4F4;
  border: 0;
}
.card--motif .card__title { color: rgba(242,244,244,.7); }
.card--motif .card__foot  { color: rgba(242,244,244,.55); }
.card--motif::before {
  content:"";
  position:absolute; inset: 0;
  background:
    radial-gradient(circle at 78% 32%, rgba(77,133,77,.55), transparent 42%),
    radial-gradient(circle at 92% 75%, rgba(63,160,176,.40), transparent 38%),
    radial-gradient(circle at 60% 90%, rgba(47,98,48,.40), transparent 50%),
    radial-gradient(circle at 88% 18%, rgba(178,189,47,.28), transparent 30%);
  filter: blur(20px);
  pointer-events: none;
}
.card--motif::after {
  content:"";
  position:absolute; inset: 0;
  background: url('topography-white.svg') center/cover no-repeat;
  opacity: .06;
  pointer-events: none;
}
.card--motif > * { position: relative; z-index: 1; }
.card--motif::before {
  content:"";
  position:absolute; inset: 0;
  background:
    radial-gradient(circle at 78% 32%, rgba(77,133,77,.55), transparent 42%),
    radial-gradient(circle at 92% 75%, rgba(63,160,176,.40), transparent 38%),
    radial-gradient(circle at 60% 90%, rgba(47,98,48,.40), transparent 50%),
    radial-gradient(circle at 88% 18%, rgba(178,189,47,.28), transparent 30%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 1;
}
.card--motif > * { position: relative; z-index: 1; }

/* ============================================================
   TABLE
   ============================================================ */
.table-wrap {
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%, color-mix(in oklab, var(--brand) 4%, transparent), transparent 65%),
    var(--surface-elevated);
  border: 1px solid color-mix(in oklab, var(--text-primary) 14%, transparent);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-sm);
}
.table thead th {
  text-align: left;
  font-weight: var(--fw-medium);
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-subtle);
}
.table tbody td {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
}
.table tbody tr:hover td { background: var(--surface-sunken); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { font-family: var(--font-mono); font-feature-settings: "tnum"; text-align: right; }
.table .row-meta { color: var(--text-tertiary); font-family: var(--font-mono); font-size: var(--fs-micro); }

/* Avatar / Org bullet */
.avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--brand-subtle);
  color: var(--brand-strong);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border-subtle);
}

/* ============================================================
   NAVIGATION (Tabs, Sidebar example, Breadcrumbs)
   ============================================================ */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-default);
}
.tabs__tab {
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-body);
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-weight: var(--fw-medium);
  transition: color var(--d-fast);
}
.tabs__tab:hover { color: var(--text-primary); }
.tabs__tab.is-active {
  color: var(--text-primary);
  border-color: var(--brand);
}

.segmented {
  display: inline-flex;
  background: var(--surface-sunken);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 2px;
}
.segmented__item {
  padding: 6px 14px;
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--d-fast);
  white-space: nowrap;
}
.segmented__item.is-active {
  background: var(--surface-elevated);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
}

.crumbs {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-body-sm);
  color: var(--text-tertiary);
}
.crumbs a { color: var(--text-tertiary); text-decoration: none; }
.crumbs a:hover { color: var(--text-primary); }
.crumbs__sep { opacity: .5; }
.crumbs__current { color: var(--text-primary); }

/* App sidebar example */
.app-sidebar {
  background:
    radial-gradient(ellipse 80% 50% at 0% 0%, color-mix(in oklab, var(--brand) 5%, transparent), transparent 70%),
    var(--surface-elevated);
  border: 1px solid color-mix(in oklab, var(--accent-cyan) 26%, transparent);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  width: 240px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.app-sidebar__head {
  display: flex; gap: var(--sp-3); align-items: center;
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-subtle);
}
.app-sidebar__head-mark {
  width: 28px; height: 28px;
  background: var(--surface-inverse);
  color: var(--text-inverse);
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-weight: var(--fw-bold);
  font-size: var(--fs-caption);
}
.app-sidebar__item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--d-fast);
}
.app-sidebar__item:hover { background: var(--surface-sunken); color: var(--text-primary); }
.app-sidebar__item.is-active {
  background: var(--brand-subtle);
  color: var(--text-primary);
  font-weight: var(--fw-medium);
}
.app-sidebar__group {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mega);
  color: var(--text-tertiary);
  padding: var(--sp-4) var(--sp-4) var(--sp-2);
}

/* ============================================================
   MODAL / DRAWER / TOAST
   ============================================================ */
.modal-mock {
  position: relative;
  background:
    radial-gradient(ellipse 50% 60% at 100% 100%, color-mix(in oklab, var(--brand) 8%, transparent), transparent 60%),
    var(--surface-sunken);
  border: 1px solid color-mix(in oklab, var(--accent-cyan) 22%, transparent);
  border-radius: var(--r-lg);
  padding: var(--sp-10) var(--sp-7);
  display: grid;
  place-items: center;
  min-height: 280px;
  overflow: hidden;
}
.modal {
  background:
    radial-gradient(ellipse 70% 60% at 100% 0%, color-mix(in oklab, var(--brand) 5%, transparent), transparent 65%),
    var(--surface-elevated);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 420px;
  border: 1px solid color-mix(in oklab, var(--accent-cyan) 32%, transparent);
  overflow: hidden;
}
.modal__head { padding: var(--sp-6) var(--sp-7) var(--sp-2); }
.modal__title { font-size: var(--fs-h3); font-weight: var(--fw-semibold); margin: 0; }
.modal__body { padding: var(--sp-3) var(--sp-7) var(--sp-6); color: var(--text-secondary); font-size: var(--fs-body); line-height: var(--lh-relaxed); }
.modal__foot {
  padding: var(--sp-5) var(--sp-7);
  background:
    radial-gradient(ellipse 80% 100% at 100% 50%, color-mix(in oklab, var(--brand) 6%, transparent), transparent 70%),
    var(--surface-sunken);
  border-top: 1px solid color-mix(in oklab, var(--brand) 16%, transparent);
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-3);
}

.drawer-mock {
  background:
    radial-gradient(ellipse 60% 60% at 0% 100%, color-mix(in oklab, var(--accent-cyan) 7%, transparent), transparent 60%),
    var(--surface-sunken);
  border: 1px solid color-mix(in oklab, var(--accent-lime) 26%, transparent);
  border-radius: var(--r-lg);
  height: 320px;
  position: relative;
  overflow: hidden;
}
.drawer {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 320px;
  background:
    radial-gradient(ellipse 60% 70% at 100% 0%, color-mix(in oklab, var(--brand) 5%, transparent), transparent 65%),
    var(--surface-elevated);
  border-left: 1px solid color-mix(in oklab, var(--accent-lime) 38%, transparent);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.drawer__head { display: flex; justify-content: space-between; align-items: center; }
.drawer__title { font-size: var(--fs-h4); font-weight: var(--fw-semibold); margin: 0; }
.drawer__body { font-size: var(--fs-body-sm); color: var(--text-secondary); line-height: var(--lh-relaxed); }

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  min-width: 280px;
  max-width: 360px;
}
.toast__icon {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
  margin-top: 2px;
}
.toast__body { font-size: var(--fs-body-sm); line-height: var(--lh-base); }
.toast__title { font-weight: var(--fw-semibold); margin-bottom: 2px; }
.toast__msg { opacity: .8; }
.toast--success .toast__icon { background: var(--status-success); }
.toast--warning .toast__icon { background: var(--status-warning); }
.toast--danger  .toast__icon { background: var(--status-danger); }

/* ============================================================
   EMPTY STATES / LOADING / SKELETON
   ============================================================ */
.empty {
  border: 1px dashed color-mix(in oklab, var(--accent-cyan) 32%, transparent);
  border-radius: var(--r-lg);
  padding: var(--sp-10);
  text-align: center;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, color-mix(in oklab, var(--brand) 6%, transparent), transparent 65%),
    var(--surface-elevated);
}
.empty + .empty { border-color: color-mix(in oklab, var(--accent-lime) 38%, transparent); }
.empty__icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--surface-sunken);
  margin: 0 auto var(--sp-5);
  display: grid; place-items: center;
  color: var(--text-tertiary);
}
.empty__title { font-size: var(--fs-h4); font-weight: var(--fw-semibold); margin: 0 0 var(--sp-2); }
.empty__msg { color: var(--text-secondary); font-size: var(--fs-body-sm); max-width: 36ch; margin: 0 auto var(--sp-5); }

.skeleton {
  background: linear-gradient(90deg, var(--surface-sunken) 0%, var(--surface-raised) 50%, var(--surface-sunken) 100%);
  background-size: 200% 100%;
  animation: skel 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes skel {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.spinner {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border-default);
  border-top-color: var(--brand);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   DATA SET PIECES — editorial, magazine-quality data visualisations
   where the number is the artwork. Use for report covers, hero
   metrics, splash pages. Not for tables / dashboards / repeat UI.
   ============================================================ */

/* IBM-style tally-mark stat: row of vertical bars + huge numeral + description */
.dsp-block { padding: 0; }
.dsp-tally {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-11);
  align-items: end;
  padding: var(--sp-9) 0 var(--sp-10);
}
.dsp-tally + .dsp-tally { border-top: 1px solid var(--border-default); }
.dsp-tally__viz {
  display: flex;
  align-items: stretch;
  gap: 5px;
  height: 96px;
  margin-bottom: var(--sp-5);
}
.dsp-tally__bar {
  flex: 1;
  border-radius: 1px;
  background: var(--surface-sunken);
}
.dsp-tally__bar--fill {
  background: linear-gradient(180deg, var(--accent-cyan), var(--forest-400) 55%, var(--forest-700));
}
.dsp-tally__num {
  font-family: var(--font-display);
  font-size: 144px;
  line-height: .82;
  letter-spacing: -.045em;
  font-weight: 300;
  margin: 0;
  color: var(--text-primary);
  font-feature-settings: "tnum";
}
.dsp-tally__num sup { font-size: .32em; vertical-align: top; font-weight: 400; margin-left: .04em; }
.dsp-tally__desc {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--text-secondary);
  align-self: end;
  padding-bottom: var(--sp-6);
  max-width: 32ch;
}
.dsp-tally--dark { background: #0B1110; color: #F1F5F1; padding: 0 var(--sp-10); border-radius: var(--r-2xl); }
.dsp-tally--dark .dsp-tally__bar { background: rgba(255,255,255,.10); }
.dsp-tally--dark .dsp-tally__num { color: #fff; }
.dsp-tally--dark .dsp-tally__desc { color: rgba(241,245,241,.7); }
.dsp-tally--dark + .dsp-tally--dark { border-top-color: rgba(255,255,255,.18); }

/* Horizontal sector-list editorial chart — each row is its own composition:
   big sector name, baseline/current bar, big delta numeral. Charcoal surface. */
.dsp-hbars {
  background: #1B201F;
  color: #F1F5F1;
  border: 1px solid color-mix(in oklab, var(--accent-lime) 32%, transparent);
  border-radius: var(--r-2xl);
  padding: var(--sp-10);
  position: relative;
  overflow: hidden;
}
.dsp-hbars__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-7);
  margin-bottom: var(--sp-9);
}
.dsp-hbars__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: -.01em;
  margin: 0;
  color: #fff;
}
.dsp-hbars__legend {
  display: flex;
  gap: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: rgba(241,245,241,.65);
}
.dsp-hbars__legend > div { display: flex; align-items: center; gap: 8px; }
.dsp-hbars__legend i { width: 10px; height: 10px; display: inline-block; }

.dsp-hbar {
  display: grid;
  grid-template-columns: 200px 1fr 220px;
  align-items: center;
  gap: var(--sp-9);
  padding: var(--sp-7) 0;
}
.dsp-hbar + .dsp-hbar { border-top: 1px solid rgba(255,255,255,.12); }
.dsp-hbar__sector {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -.01em;
  color: #fff;
}
.dsp-hbar__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mega);
  color: rgba(241,245,241,.5);
  margin-top: 4px;
}
.dsp-hbar__track {
  position: relative;
  height: 10px;
  background: rgba(255,255,255,.08);
  border-radius: 2px;
  overflow: hidden;
}
.dsp-hbar__base {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: rgba(255,255,255,.22);
  border-radius: 2px;
}
.dsp-hbar__current {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--forest-400);
  border-radius: 2px;
}
.dsp-hbar__values {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.dsp-hbar__delta {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1;
  letter-spacing: -.025em;
  font-weight: 400;
  color: var(--forest-300);
  font-feature-settings: "tnum";
}
.dsp-hbar__range {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: rgba(241,245,241,.5);
}

/* Magazine sparkline stat — single huge number + small line + caption */
.dsp-spark {
  background:
    radial-gradient(ellipse 70% 60% at 100% 0%, color-mix(in oklab, var(--brand) 6%, transparent), transparent 65%),
    var(--surface-elevated);
  border: 1px solid color-mix(in oklab, var(--text-primary) 16%, transparent);
  border-radius: var(--r-xl);
  padding: var(--sp-9);
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
  min-height: 320px;
  position: relative;
  overflow: hidden;
}
/* Pair the second dsp-spark with a cyan hairline to vary from its forest neighbour */
.dsp-spark:nth-of-type(2n) {
  border-color: color-mix(in oklab, var(--accent-cyan) 32%, transparent);
}

.dsp-spark__num {
  font-family: var(--font-display);
  font-size: 112px;
  line-height: .85;
  letter-spacing: -.04em;
  font-weight: 300;
  color: var(--text-primary);
  font-feature-settings: "tnum";
  margin: 0;
}
.dsp-spark__num sup { font-size: .32em; vertical-align: top; font-weight: 400; margin-left: .04em; color: var(--text-secondary); }
.dsp-spark__caption {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  color: var(--text-secondary);
  line-height: 1.3;
  max-width: 28ch;
}
.dsp-spark__line { margin-top: auto; }

/* ============================================================
   CHARTS (token-driven previews)
   ============================================================ */
.chart {
  position: relative;
  background: #1B201F;
  color: #F1F5F1;
  border: 1px solid color-mix(in oklab, var(--accent-cyan) 22%, transparent);
  border-radius: var(--r-2xl);
  padding: var(--sp-9);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.chart__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-5);
  position: relative;
  z-index: 2;
}
.chart__title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -.012em;
  line-height: 1.1;
  margin: 0;
  color: inherit;
}
.chart__body {
  position: relative;
  z-index: 2;
}
.chart__foot {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: var(--sp-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: rgba(241,245,241,.55);
}
.chart:nth-of-type(2n) { border-color: color-mix(in oklab, var(--accent-lime) 30%, transparent); }
.chart:nth-of-type(3n) { border-color: color-mix(in oklab, var(--forest-300) 32%, transparent); }
.chart--hero { border-color: color-mix(in oklab, var(--accent-cyan) 32%, transparent); }

.chart .bullet-eyebrow { color: rgba(241,245,241,.65); }
.chart .badge { color: var(--brand-strong); }

/* Composed stat — number + mono caption side by side, framed by hairlines.
   Used as a confident "headline" inside a chart container. */
.ctx-stat {
  display: flex;
  align-items: baseline;
  gap: var(--sp-7);
  padding: var(--sp-6) 0;
  border-top: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.14);
  position: relative;
  z-index: 2;
}
.ctx-stat__num {
  font-family: var(--font-display);
  font-size: 96px;
  line-height: .85;
  letter-spacing: -.04em;
  font-weight: 300;
  color: inherit;
  font-feature-settings: "tnum";
  white-space: nowrap;
}
.ctx-stat__num sup { font-size: .3em; vertical-align: top; margin-left: .05em; font-weight: 400; color: rgba(241,245,241,.55); }
.ctx-stat__caption {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mega);
  line-height: 1.4;
  color: rgba(241,245,241,.55);
}

/* Magazine ranked list — full-width row stack with big sector + value.
   Each row breathes, hairline separators, monochromatic forest bars. */
.ranked-list {
  position: relative;
  z-index: 2;
}
.ranked-row {
  display: grid;
  grid-template-columns: 60px minmax(180px, 1fr) 2fr 220px;
  align-items: center;
  gap: var(--sp-7);
  padding: var(--sp-6) 0;
}
.ranked-row + .ranked-row { border-top: 1px solid rgba(255,255,255,.12); }
.ranked-row__rank {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: rgba(241,245,241,.4);
  letter-spacing: var(--tracking-wide);
}
.ranked-row__name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -.005em;
  color: inherit;
}
.ranked-row__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mega);
  color: rgba(241,245,241,.45);
  margin-top: 2px;
}
.ranked-row__track {
  position: relative;
  height: 8px;
  background: rgba(255,255,255,.08);
  border-radius: 2px;
  overflow: hidden;
}
.ranked-row__fill {
  position: absolute; inset: 0;
  background: var(--forest-300);
  border-radius: 2px;
  transform-origin: left;
}
.ranked-row__value {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.ranked-row__num {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1;
  letter-spacing: -.02em;
  font-weight: 400;
  color: inherit;
  font-feature-settings: "tnum";
}
.ranked-row__pct {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: rgba(241,245,241,.5);
}

/* Stacked-categories horizontal bar — single 100% bar split into named segments */
.stack-bar {
  display: flex;
  height: 56px;
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-top: var(--sp-3);
  position: relative;
  z-index: 2;
}
.stack-bar__seg {
  position: relative;
  display: flex;
  align-items: end;
  padding: var(--sp-3) var(--sp-4);
  min-width: 0;
}
.stack-bar__seg-pct {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
  font-weight: 500;
  color: inherit;
  font-feature-settings: "tnum";
}
.stack-bar-legend {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  position: relative;
  z-index: 2;
}
.stack-bar-legend__row {
  display: grid;
  grid-template-columns: 14px 1fr 80px;
  align-items: center;
  gap: var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.stack-bar-legend__row:last-child { border-bottom: 0; }
.stack-bar-legend__sw { width: 10px; height: 10px; }
.stack-bar-legend__name { color: rgba(241,245,241,.85); }
.stack-bar-legend__num { text-align: right; font-family: var(--font-mono); color: rgba(241,245,241,.6); }

/* Scatter quadrant — replacement for the heatmap, more interpretable */
.scatter-quad {
  position: relative;
  height: 320px;
  padding: var(--sp-5) var(--sp-5) var(--sp-7) 110px;
  z-index: 2;
}
.scatter-quad__grid {
  position: absolute;
  inset: var(--sp-5) var(--sp-5) var(--sp-7) 110px;
  border-left: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.scatter-quad__rule {
  position: absolute;
  background: rgba(255,255,255,.08);
}
.scatter-quad__rule--h { left: 0; right: 0; height: 1px; }
.scatter-quad__rule--v { top: 0; bottom: 0; width: 1px; }
.scatter-quad__axis-y {
  position: absolute;
  left: 0;
  top: 50%;
  transform: rotate(-90deg) translateX(0);
  transform-origin: left top;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mega);
  color: rgba(241,245,241,.5);
  white-space: nowrap;
}
.scatter-quad__axis-x {
  position: absolute;
  bottom: 0;
  left: 110px;
  right: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mega);
  color: rgba(241,245,241,.5);
}
.scatter-quad__axis-label-low {
  position: absolute;
  left: 110px;
  bottom: 20px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  color: rgba(241,245,241,.45);
}
.scatter-quad__axis-label-high {
  position: absolute;
  right: var(--sp-5);
  bottom: 20px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  color: rgba(241,245,241,.45);
}
.scatter-quad__point {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--forest-400);
  transform: translate(-50%, 50%);
  border: 2px solid #1B201F;
}
.scatter-quad__point--accent {
  background: var(--accent-lime);
  width: 20px;
  height: 20px;
}
.scatter-quad__label {
  position: absolute;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: rgba(241,245,241,.8);
  white-space: nowrap;
  transform: translate(-50%, calc(50% + 18px));
  letter-spacing: var(--tracking-snug);
}

/* Waffle — 10×10 dot grid showing percentage */
.waffle {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  position: relative;
  z-index: 2;
  aspect-ratio: 1;
  width: 240px;
  min-width: 200px;
  flex-shrink: 0;
}
.waffle__cell {
  aspect-ratio: 1;
  border-radius: 2px;
  background: rgba(255,255,255,.07);
}
.waffle__cell--fill { background: var(--forest-400); }
.waffle__cell--accent { background: var(--accent-lime); }

/* Featured (hero) chart — ambient brand glow on charcoal */
.chart--hero {
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%, rgba(77,133,77,.28), transparent 65%),
    radial-gradient(ellipse 50% 70% at 0% 100%, rgba(178,189,47,.12), transparent 65%),
    #1B201F;
  padding: var(--sp-10);
}
.chart--hero .chart__title { font-size: 38px; letter-spacing: -.02em; font-weight: 400; }

.chart__metric-row {
  display: flex;
  gap: var(--sp-10);
  align-items: baseline;
  border-top: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.14);
  padding: var(--sp-6) 0;
  position: relative;
  z-index: 2;
}
.chart__metric-row > div { display: flex; flex-direction: column; gap: 4px; }
.chart__metric-row .num {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1;
  letter-spacing: -.025em;
  font-weight: 400;
  color: inherit;
  font-feature-settings: "tnum";
}
.chart__metric-row .label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mega);
  color: rgba(241,245,241,.5);
}

.dv-legend {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-3);
  font-size: var(--fs-caption);
  color: var(--text-secondary);
}
.dv-legend__chip { display: flex; align-items: center; gap: 6px; }
.dv-legend__sw { width: 10px; height: 10px; border-radius: 2px; }

/* ============================================================
   BRAND MOTIF
   ============================================================ */
.motif {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  height: 320px;
  display: flex;
  align-items: flex-end;
  padding: var(--sp-9);
  color: #F2F2F2;
}
.motif__bg {
  position: absolute; inset: 0;
  background: #0B1110;
  z-index: 0;
}
.motif__blobs {
  position: absolute; inset: -10%;
  filter: blur(70px);
  z-index: 1;
  opacity: .85;
}
/* Real CoolPlanet topographic SVG, masked so we can theme the line colour
   and dial opacity independently. Kept quiet — reads as texture, not pattern.
   Variants below give per-surface variance: blurred / sharp, dark / light. */
.motif__topo {
  position: absolute; inset: 0;
  z-index: 2;
  background: url('topography-white.svg') center/cover no-repeat;
  opacity: .18;
  pointer-events: none;
}
.motif__topo--blur  { filter: none; opacity: .06; }
.motif__topo--sharp { filter: none; }
.motif__topo--dark  { filter: invert(1); opacity: .14; }
.motif__topo--light { }
.motif__topo--zoom  { background-size: 220% 220%; background-position: 30% 70%; }
.motif__topo--offset{ display: none; } /* deprecated */
.motif__content { position: relative; z-index: 3; }
.motif__eyebrow { font-size: var(--fs-caption); letter-spacing: var(--tracking-mega); text-transform: uppercase; opacity: .65; margin-bottom: var(--sp-3); }
.motif__title { font-family: var(--font-display); font-size: var(--fs-display-lg); font-weight: 400; letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); margin: 0; }

.motif--light .motif__bg { background: var(--n-50); }
.motif--light { color: var(--n-900); }
.motif--light .motif__blobs { opacity: .85; filter: blur(90px); }
.motif--light .motif__topo {
  filter: invert(1);
  opacity: .08;
}
}

.motif--mid .motif__bg { background: var(--teal-800); }
.motif--mid .motif__blobs { opacity: .8; }
.motif--mid .motif__topo { opacity: .14; }

/* ============================================================
   EDITORIAL — report covers, stat heroes, splash surfaces
   The expressive side of the system. Use sparingly: one per page.
   ============================================================ */

/* Dark stat composition with ambient gradient bleed + topography */
.editorial-block {
  position: relative;
  background: #0B1110;
  border: 1px solid color-mix(in oklab, var(--accent-cyan) 28%, transparent);
  border-radius: var(--r-2xl);
  padding: var(--sp-12) var(--sp-11) var(--sp-12);
  color: #F1F5F1;
  overflow: hidden;
}
.editorial-block__bleed {
  position: absolute; inset: -10%;
  background:
    radial-gradient(ellipse 70% 60% at 100% 40%, rgba(178,189,47,.32), transparent 65%),
    radial-gradient(ellipse 60% 50% at 85% 20%, rgba(77,133,77,.40), transparent 60%),
    radial-gradient(ellipse 70% 60% at 100% 90%, rgba(63,160,176,.30), transparent 65%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(47,98,48,.28), transparent 60%);
  filter: blur(60px);
  pointer-events: none;
}
.editorial-block__topo {
  position: absolute; inset: 0;
  background: url('topography-white.svg') center/cover no-repeat;
  opacity: .05;
  pointer-events: none;
}
.editorial-block__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}
.editorial-row { padding: var(--sp-8) 0; display: flex; flex-direction: column; gap: var(--sp-6); }
.editorial-row + .editorial-row { border-top: 1px solid rgba(255,255,255,.18); }
.editorial-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-11); padding: var(--sp-8) 0; border-top: 1px solid rgba(255,255,255,.18); }

/* Mono bullet eyebrow — the small "● COMPANIES COMMITTING TO …" label */
.bullet-eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  color: color-mix(in oklab, currentColor 88%, transparent);
  font-family: var(--font-mono);
  font-weight: 500;
}
.bullet-eyebrow__dot {
  width: 8px; height: 8px;
  background: var(--accent-lime);
  flex-shrink: 0;
}
.bullet-eyebrow--forest .bullet-eyebrow__dot { background: var(--forest-400); }
.bullet-eyebrow--teal   .bullet-eyebrow__dot { background: var(--accent-cyan); }

/* The massive editorial numeral */
.editorial-num {
  font-family: var(--font-display);
  font-size: 128px;
  line-height: .9;
  letter-spacing: -.04em;
  font-weight: 300;
  color: #fff;
  font-feature-settings: "tnum";
  margin: 0;
}
.editorial-num--md { font-size: 96px; }
.editorial-num sup {
  font-size: .35em;
  vertical-align: top;
  margin-left: .1em;
  font-weight: 400;
  color: color-mix(in oklab, currentColor 70%, transparent);
}

/* Editorial sweep — light theme is the default, dark theme swaps to charcoal
   with adjusted gradient stops so the bleed still reads. */
.editorial-light {
  position: relative;
  background: var(--n-50);
  border: 1px solid color-mix(in oklab, var(--accent-lime) 38%, transparent);
  border-radius: var(--r-2xl);
  padding: var(--sp-12) var(--sp-11);
  overflow: hidden;
  min-height: 380px;
  display: flex;
  align-items: center;
}
[data-theme="dark"] .editorial-light {
  background: #1B201F;
  color: #F1F5F1;
}
.editorial-light__bleed {
  position: absolute; inset: -10%;
  background:
    radial-gradient(ellipse 75% 80% at 110% 50%, rgba(178,189,47,.65), transparent 65%),
    radial-gradient(ellipse 60% 70% at 90% 30%, rgba(77,133,77,.45), transparent 60%),
    radial-gradient(ellipse 50% 50% at 75% 80%, rgba(63,160,176,.35), transparent 60%);
  filter: blur(50px);
  pointer-events: none;
}
[data-theme="dark"] .editorial-light__bleed {
  background:
    radial-gradient(ellipse 75% 80% at 110% 50%, rgba(178,189,47,.32), transparent 65%),
    radial-gradient(ellipse 60% 70% at 90% 30%, rgba(77,133,77,.40), transparent 60%),
    radial-gradient(ellipse 50% 50% at 75% 80%, rgba(63,160,176,.30), transparent 60%);
}
[data-theme="dark"] .editorial-light__title { color: #F1F5F1; }
[data-theme="dark"] .editorial-light__title em { color: var(--forest-300); }
[data-theme="dark"] .editorial-light__eyebrow { color: rgba(241,245,241,.65); }
[data-theme="dark"] .editorial-light__meta { color: rgba(241,245,241,.55); }
.editorial-light__inner { position: relative; z-index: 2; max-width: 78%; }
.editorial-light__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--sp-6);
}
.editorial-light__title {
  font-family: var(--font-display);
  font-size: 88px;
  line-height: .95;
  letter-spacing: -.035em;
  font-weight: 400;
  margin: 0 0 var(--sp-7);
  color: var(--text-primary);
}
.editorial-light__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--brand-strong);
}
.editorial-light__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
  display: flex; gap: var(--sp-5);
}

/* Diffuse stat — charcoal-base hero card. One accent (forest). Variants
   differ in their neutral gradient direction, not their hue. */
.diffuse-stat {
  position: relative;
  background: #1F2422;
  border: 1px solid color-mix(in oklab, var(--accent-cyan) 24%, transparent);
  border-radius: var(--r-2xl);
  padding: var(--sp-10);
  min-height: 380px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--sp-5);
  color: #F1F5F1;
}
.diffuse-stat:nth-of-type(2n) { border-color: color-mix(in oklab, var(--accent-lime) 24%, transparent); }
.diffuse-stat:nth-of-type(3n) { border-color: color-mix(in oklab, var(--forest-300) 26%, transparent); }
.diffuse-stat:nth-of-type(4n) { border-color: color-mix(in oklab, var(--warning-400) 24%, transparent); }
.diffuse-stat__glow {
  position: absolute; inset: -10%;
  background:
    radial-gradient(ellipse 70% 60% at 100% 0%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(0,0,0,.40), transparent 65%);
  pointer-events: none;
}
.diffuse-stat__inner { position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--sp-4); }
.diffuse-stat__num {
  font-family: var(--font-display);
  font-size: 144px;
  line-height: .85;
  letter-spacing: -.04em;
  font-weight: 300;
  color: #fff;
  font-feature-settings: "tnum";
  margin: 0;
}
.diffuse-stat__num sup { font-size: .32em; vertical-align: top; margin-left: .08em; font-weight: 400; color: rgba(255,255,255,.55); }
.diffuse-stat__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: rgba(241,245,241,.6);
}

/* Variants — same charcoal base, different neutral wash + one variant gets
   the forest accent on the numeral. */
.diffuse-stat--mid {
  background: #262C2A;
}
.diffuse-stat--mid .diffuse-stat__glow {
  background:
    radial-gradient(ellipse 70% 60% at 0% 0%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(ellipse 80% 70% at 100% 100%, rgba(0,0,0,.30), transparent 60%);
}
.diffuse-stat--deep {
  background: #161D1B;
}
.diffuse-stat--deep .diffuse-stat__glow {
  background:
    radial-gradient(ellipse 50% 50% at 100% 100%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(ellipse 70% 60% at 20% 20%, rgba(0,0,0,.35), transparent 60%);
}
.diffuse-stat--accent {
  background: #1F2422;
}
.diffuse-stat--accent .diffuse-stat__glow {
  background:
    radial-gradient(ellipse 80% 70% at 90% 10%, rgba(77,133,77,.40), transparent 60%),
    radial-gradient(ellipse 60% 60% at 30% 100%, rgba(0,0,0,.40), transparent 60%);
}
.diffuse-stat--accent .diffuse-stat__num { color: var(--forest-300); font-weight: 300; }

/* World-map mock for editorial blocks (placeholder dotted landmass) */
.world-mock {
  width: 100%;
  height: 240px;
  display: grid; place-items: center;
  position: relative;
}
.world-mock svg { width: 100%; height: 100%; }

/* ============================================================
   END EDITORIAL
   ============================================================ */


/* ============================================================
   COMPOSED SURFACES — varied container backgrounds, outlines and
   dot-grid textures. Lifted from a prior brand exploration; translated
   into the forest palette. Use sparingly: a single page should mix
   2-3 of these treatments, never all of them.
   ============================================================ */

/* Dot-grid texture utility — pair with any tinted container.
   Variants: size (xs/sm/md/lg/xl), colour (default currentColor / brand / cyan /
   lime), and fade (radial mask). Use as a positioned overlay inside a relative
   container; uses currentColor so it picks up the surface's tint unless overridden. */
.dot-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 14px 14px;
  opacity: .06;
  pointer-events: none;
}
.dot-grid--xs { background-size: 8px 8px; }
.dot-grid--sm { background-size: 12px 12px; }
.dot-grid--md { background-size: 18px 18px; }
.dot-grid--lg { background-size: 24px 24px; }
.dot-grid--xl { background-size: 36px 36px; }
.dot-grid--bold { background-image: radial-gradient(currentColor 1.5px, transparent 1.5px); }

/* Topography texture — the real CoolPlanet contour SVG as a positioned overlay.
   Same composability as dot-grid: blur/sharp, light/dark, opacity controllable. */
.topo-tex {
  position: absolute; inset: 0;
  background: url('topography-white.svg') center/cover no-repeat;
  opacity: .14;
  pointer-events: none;
}
/* Either-or principle:
   - BLUR variants: enough blur to dissolve lines into atmosphere; HIGH opacity so the haze is felt
   - SHARP variants: no blur, LOW opacity so contour lines are visible but quiet
   Never combine "slightly blurred + low opacity" — reads as muddy */
.topo-tex--blur  { filter: none; opacity: .06; }
.topo-tex--zoom  { background-size: 220% 220%; background-position: 30% 70%; }
.topo-tex--offset{ display: none; } /* deprecated */

/* Gradient texture — ambient brand wash as a standalone overlay layer */
.grad-tex {
  position: absolute; inset: -10%;
  background:
    radial-gradient(ellipse 60% 50% at 100% 0%, color-mix(in oklab, var(--brand) 22%, transparent), transparent 60%),
    radial-gradient(ellipse 50% 60% at 0% 100%, color-mix(in oklab, var(--accent-cyan) 14%, transparent), transparent 65%);
  filter: blur(50px);
  pointer-events: none;
}
.grad-tex--lime {
  background:
    radial-gradient(ellipse 60% 50% at 100% 0%, color-mix(in oklab, var(--accent-lime) 25%, transparent), transparent 60%),
    radial-gradient(ellipse 50% 60% at 0% 100%, color-mix(in oklab, var(--brand) 16%, transparent), transparent 65%);
}
.grad-tex--teal {
  background:
    radial-gradient(ellipse 60% 50% at 0% 0%, color-mix(in oklab, var(--accent-teal) 25%, transparent), transparent 60%),
    radial-gradient(ellipse 50% 60% at 100% 100%, color-mix(in oklab, var(--accent-cyan) 16%, transparent), transparent 65%);
}

/* Fade variants — radial mask to soften toward one corner */
.dot-grid--fade-tr {
  -webkit-mask: radial-gradient(ellipse 80% 100% at 100% 0%, #000 30%, transparent 80%);
          mask: radial-gradient(ellipse 80% 100% at 100% 0%, #000 30%, transparent 80%);
}
.dot-grid--fade-bl {
  -webkit-mask: radial-gradient(ellipse 80% 100% at 0% 100%, #000 30%, transparent 80%);
          mask: radial-gradient(ellipse 80% 100% at 0% 100%, #000 30%, transparent 80%);
}
.dot-grid--fade-center {
  -webkit-mask: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 30%, #000 80%);
          mask: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 30%, #000 80%);
}

/* Colour helpers — set currentColor on the parent or use these */
.dot-grid--brand { color: var(--brand); }
.dot-grid--lime  { color: var(--accent-lime); }
.dot-grid--cyan  { color: var(--accent-cyan); }
.dot-grid--ink   { color: var(--text-primary); }

/* Featured surface — strong brand outline + soft brand-tint bg + dot grid.
   Use for the ONE "currently focused" container on the page. */
.featured-surface {
  position: relative;
  background:
    radial-gradient(ellipse 60% 80% at 100% 50%, rgba(77,133,77,.12), transparent 65%),
    color-mix(in oklab, var(--brand) 8%, var(--surface-elevated));
  border: 1.5px solid var(--brand);
  border-radius: var(--r-2xl);
  padding: var(--sp-9);
  overflow: hidden;
}
.featured-surface .dot-grid { color: var(--forest-500); }
.featured-surface > * { position: relative; z-index: 2; }

/* Brand-tint container — soft, no strong outline, dot grid */
.tint-surface {
  position: relative;
  background:
    radial-gradient(ellipse 70% 80% at 0% 100%, rgba(77,133,77,.10), transparent 70%),
    color-mix(in oklab, var(--brand) 6%, var(--surface-elevated));
  border: 1px solid color-mix(in oklab, var(--brand) 15%, transparent);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  overflow: hidden;
}
.tint-surface .dot-grid { color: var(--forest-500); opacity: .12; }
.tint-surface > * { position: relative; z-index: 2; }

/* Dark callout container — near-black with optional brand wash */
.dark-surface {
  position: relative;
  background: #0F1414;
  color: #F1F5F1;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  overflow: hidden;
}
.dark-surface--wash {
  background:
    radial-gradient(ellipse 60% 80% at 100% 100%, rgba(77,133,77,.30), transparent 65%),
    #0F1414;
}
.dark-surface .dot-grid { color: #fff; opacity: .07; }
.dark-surface > * { position: relative; z-index: 2; }

/* Header-strip pattern — the "HW2 CY 2026 → 36.66 tCO₂E + 3 sub-metrics" hero row */
.metric-strip {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--sp-9);
  align-items: center;
  position: relative;
  z-index: 2;
}
.metric-strip__lead { display: flex; flex-direction: column; gap: var(--sp-3); }
.metric-strip__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.metric-strip__num {
  font-family: var(--font-display);
  font-size: 84px;
  line-height: .85;
  letter-spacing: -.035em;
  font-weight: 400;
  color: var(--text-primary);
  font-feature-settings: "tnum";
  display: flex; align-items: baseline; gap: var(--sp-3);
}
.metric-strip__unit {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.metric-strip__sub { border-left: 1px solid color-mix(in oklab, var(--brand) 25%, transparent); padding-left: var(--sp-6); display: flex; flex-direction: column; gap: 4px; }
.metric-strip__sub-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.metric-strip__sub-num {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--text-primary);
  font-feature-settings: "tnum";
}
.metric-strip__sub-pct {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
}
.metric-strip__foot {
  margin-top: var(--sp-7);
  display: flex;
  justify-content: flex-end;
  padding-top: var(--sp-5);
  border-top: 1px solid color-mix(in oklab, var(--brand) 20%, transparent);
  position: relative; z-index: 2;
}
.metric-strip__cta {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
}
.metric-strip__cta:hover { color: var(--brand-strong); }

/* Numbered step list — 1/2/3 with active brand-outline state */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  padding: var(--sp-7);
  background:
    radial-gradient(ellipse 60% 60% at 100% 100%, color-mix(in oklab, var(--brand) 4%, transparent), transparent 65%),
    var(--surface-elevated);
  border: 1px solid color-mix(in oklab, var(--accent-lime) 38%, transparent);
  border-radius: var(--r-xl);
}
.step {
  position: relative;
  background: var(--surface-canvas);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  border: 1px solid transparent;
  transition: all var(--d-base) var(--ease-out);
}
.step--active {
  background: color-mix(in oklab, var(--brand) 8%, var(--surface-elevated));
  border-color: var(--brand);
}
.step__num {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}
.step--active .step__num {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.step__label {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.2;
}
.step__status {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mega);
  color: var(--text-tertiary);
  margin-top: 4px;
}
.step--active .step__status { color: var(--brand-strong); }

/* Bottom attention strip — full-width thin row with icon + label + count */
.attention-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background:
    radial-gradient(ellipse 50% 80% at 0% 50%, color-mix(in oklab, var(--status-warning) 5%, transparent), transparent 65%),
    var(--surface-elevated);
  border: 1px solid color-mix(in oklab, var(--status-warning) 26%, transparent);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.attention-strip__head {
  grid-column: 1 / -1;
  padding: var(--sp-5) var(--sp-7) 0;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.attention-strip__title {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  color: var(--status-warning);
}
.attention-strip__count {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
}
.attention-strip__item {
  padding: var(--sp-6) var(--sp-7);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  cursor: pointer;
  transition: background var(--d-fast);
  border-top: 1px solid var(--border-subtle);
}
.attention-strip__item + .attention-strip__item { border-left: 1px solid var(--border-subtle); }
.attention-strip__item:hover { background: var(--surface-sunken); }
.attention-strip__icon {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--brand) 10%, var(--surface-sunken));
  display: grid; place-items: center;
  color: var(--brand-strong);
  flex-shrink: 0;
}
.attention-strip__label {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--text-primary);
  font-weight: 500;
  flex: 1;
}
.attention-strip__badge {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
}
.attention-strip__arrow {
  color: var(--text-tertiary);
  transition: transform var(--d-fast), color var(--d-fast);
}
.attention-strip__item:hover .attention-strip__arrow {
  transform: translateX(4px);
  color: var(--text-primary);
}

/* Coverage list — checklist-style with brand-tint background */
.coverage-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4) var(--sp-9);
  position: relative;
  z-index: 2;
}
.coverage-list__head {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--sp-3);
}
.coverage-list__head-title {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.coverage-list__head-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
}
.coverage-list__head-link {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--text-primary);
  text-decoration: none;
}
.coverage-list__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--text-primary);
  padding: var(--sp-3) 0;
}
.coverage-list__dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--brand);
  flex-shrink: 0;
}
.coverage-list__row--done .coverage-list__dot {
  background: var(--brand);
  position: relative;
}
.coverage-list__row--done .coverage-list__dot::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: #fff;
  border-radius: 50%;
  transform: scale(.5);
}

/* Dark bar-list — chart inside the dark-surface */
.dark-barlist {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.dark-barlist__row {
  display: grid;
  grid-template-columns: 180px 1fr 60px 50px;
  align-items: center;
  gap: var(--sp-5);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: rgba(241,245,241,.85);
}
.dark-barlist__track {
  position: relative;
  height: 10px;
  background: rgba(255,255,255,.06);
  border-radius: 2px;
  overflow: hidden;
}
.dark-barlist__fill {
  position: absolute; inset: 0;
  background: var(--brand);
  border-radius: 2px;
}
.dark-barlist__fill--alt { background: var(--forest-200); }
.dark-barlist__fill--quiet { background: rgba(255,255,255,.22); }
.dark-barlist__num { font-family: var(--font-mono); text-align: right; color: rgba(241,245,241,.85); }
.dark-barlist__pct { font-family: var(--font-mono); text-align: right; color: rgba(241,245,241,.5); }

/* ============================================================
   END COMPOSED SURFACES
   ============================================================ */


/* ============================================================
   ICONS
   ============================================================ */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--sp-3);
}
.icon-tile {
  aspect-ratio: 1;
  background:
    radial-gradient(ellipse 90% 90% at 100% 0%, color-mix(in oklab, var(--brand) 6%, transparent), transparent 70%),
    var(--surface-elevated);
  border: 1px solid color-mix(in oklab, var(--brand) 14%, transparent);
  border-radius: var(--r-md);
  display: grid; place-items: center;
  color: var(--text-secondary);
  position: relative;
  transition: all var(--d-fast);
}
.icon-tile:hover { border-color: color-mix(in oklab, var(--brand) 32%, transparent); color: var(--text-primary); }
.icon-tile__name {
  position: absolute;
  bottom: 6px; left: 0; right: 0;
  font-family: var(--font-mono);
  font-size: 9px;
  text-align: center;
  color: var(--text-tertiary);
}

/* Footnotes */
.footnote { display: flex; gap: var(--sp-3); font-size: var(--fs-caption); color: var(--text-tertiary); margin-top: var(--sp-4); }
.footnote__rule { width: 24px; height: 1px; background: var(--border-default); margin-top: 8px; flex-shrink: 0;}

/* TOC pill list */
.toc-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  background: var(--surface-sunken);
  color: var(--text-tertiary);
  padding: 1px 6px;
  border-radius: var(--r-xs);
  margin-left: var(--sp-2);
}

/* Responsive */
@media (max-width: 1100px) {
  .sidenav { display: none; }
  .shell { grid-template-columns: 1fr; }
  .main { padding: var(--sp-7); }
  .topbar { margin: calc(var(--sp-7) * -1) calc(var(--sp-7) * -1) var(--sp-7); padding: var(--sp-4) var(--sp-7); }
  .g-3, .g-4, .g-6 { grid-template-columns: repeat(2, 1fr); }
  .type-row { grid-template-columns: 1fr; }
  .type-row__meta { text-align: left; }
  .editorial-grid-2 { grid-template-columns: 1fr; gap: var(--sp-8); }
  .editorial-num { font-size: 80px; }
  .editorial-light__title { font-size: 56px; }
  .diffuse-stat__num { font-size: 96px; }
  .editorial-light__inner { max-width: 100%; }
  .metric-strip { grid-template-columns: 1fr 1fr; }
  .metric-strip__lead { grid-column: 1 / -1; }
  .metric-strip__num { font-size: 64px; }
  .steps { grid-template-columns: 1fr; }
  .coverage-list { grid-template-columns: 1fr; }
  .attention-strip { grid-template-columns: 1fr; }
  .attention-strip__item + .attention-strip__item { border-left: 0; border-top: 1px solid var(--border-subtle); }
}