/* singularity45: base styles, legacy re-skin and shared components (package A).
   Colour, type and shape tokens live in themes.css, which loads after this file.
   Only this file styles bare elements and the shared classes in spec §11.3. Other packages use their prefixes. */

/* ---------- Layout variables (not theme tokens) ---------- */
:root { --wrap-pad: 16px; }
@media (min-width: 760px) { :root { --wrap-pad: 24px; } }
@media (min-width: 1024px) { :root { --wrap-pad: 32px; } }

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; }
html {
  background: var(--paper);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  background: transparent;
  color: var(--ink);
  font: 1rem/1.5 var(--font-text);
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Paper grain: one static 160px tile, behind all content, no blend modes */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E") repeat;
  opacity: var(--grain);
  filter: invert(var(--grain-invert));
}
[hidden]:not([hidden="until-found"]) { display: none !important; }
::selection { background: var(--highlight); color: var(--ink); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--display-wght);
  font-variation-settings: "SOFT" var(--display-soft);
  font-optical-sizing: auto;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: clamp(2.125rem, 1.4rem + 3.6vw, 4.25rem); line-height: 1.04; letter-spacing: -0.022em; }
h2 { font-size: clamp(1.875rem, 1.35rem + 2.4vw, 3rem); line-height: 1.08; letter-spacing: -0.018em; }
h3 { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); font-weight: calc(var(--display-wght) - 40); line-height: 1.15; letter-spacing: -0.01em; }
p { text-wrap: pretty; }

a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: from-font; }
a:hover { text-decoration-thickness: 2px; }

/* Focus: always a visible outline, never box-shadow, never outline:none (3px in High contrast, themes.css) */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.wrap { max-width: calc(1200px + 2 * var(--wrap-pad)); margin: 0 auto; padding: 0 var(--wrap-pad); }

/* ---------- Skip link and screen-reader helpers ---------- */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 8px; top: 8px; z-index: 100;
  padding: 10px 14px; border-radius: var(--radius-m);
  background: var(--raised); color: var(--ink); box-shadow: var(--shadow-pop);
  font-weight: 600; text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus, .skip:focus-visible { transform: none; }

/* ---------- Top bar (canonical header, spec §11.6) ---------- */
.topbar { position: relative; z-index: 40; background: var(--surface); border-bottom: var(--rule-w) solid var(--rule); }
.topbar .wrap { display: flex; align-items: center; gap: 16px; height: 56px; }
.brand {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em;
  font-variation-settings: "SOFT" var(--display-soft);
}
.brand span { overflow: hidden; text-overflow: ellipsis; }
.logo { flex: none; width: 20px; height: 20px; fill: none; }
.nav { display: flex; gap: 4px; margin-left: auto; min-width: 0; }
.nav a {
  display: inline-flex; flex: none; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 10px;
  border-radius: var(--radius-s); color: var(--ink-2); text-decoration: none; white-space: nowrap; font-size: .9375rem;
}
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; text-decoration: underline 2px var(--accent); text-underline-offset: 8px; }
/* The nav and the figure tabs scroll sideways, so their box clips anything drawn outside it: inset the ring */
.nav a:focus-visible, .fig-tabs button:focus-visible, .fig-tabs [role="tab"]:focus-visible { outline-offset: -3px; }
[data-theme="contrast"] .nav a:focus-visible, [data-theme="contrast"] .fig-tabs button:focus-visible,
[data-theme="contrast"] .fig-tabs [role="tab"]:focus-visible { outline-offset: -4px; }
.topbar .wrap > .btn { flex: none; }
/* Legacy dark/light toggle (no longer in any header; kept so an old copy of a page still renders) */
.theme-btn { border: 1px solid var(--rule); background: transparent; color: var(--ink-2); border-radius: var(--radius-s); padding: 5px 9px; cursor: pointer; font: inherit; font-size: 13px; }

/* Theme picker button: static markup, icon-only, 44x44, width reserved without JS */
.theme-picker {
  flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--radius-m); background: transparent; color: var(--ink-2); cursor: pointer;
}
.theme-picker:hover, .theme-picker[aria-expanded="true"] { background: var(--surface-2); color: var(--ink); }
.theme-picker svg { display: block; }
html:not(.js) .theme-picker { visibility: hidden; }
html:not(.js) [data-theme-open], html:not(.js) .tp-footer { display: none; }

@media (min-width: 1024px) {
  .topbar { position: sticky; top: 0; }
  html { scroll-padding-top: 72px; }
}
/* 760-1023: one row; compact nav (fits the five index links at 768px) that scrolls in place if a page adds more */
@media (min-width: 760px) and (max-width: 1023.98px) {
  .nav { gap: 0; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 24px; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 0 6px; font-size: .875rem; }
}
/* Phones: brand, theme and CTA on row one; the nav gets the whole of row two and scrolls if it must */
@media (max-width: 759.98px) {
  .topbar .wrap {
    display: grid; height: auto; padding-top: 4px; padding-bottom: 0;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "brand picker cta" "nav nav nav";
    column-gap: 16px; row-gap: 0; align-items: center;
  }
  .brand { grid-area: brand; min-height: 44px; }
  .theme-picker { grid-area: picker; justify-self: end; }
  .topbar .wrap > .btn { grid-area: cta; justify-self: end; }
  .nav {
    grid-area: nav; margin: 0 0 0 -10px; overflow-x: auto; flex-wrap: nowrap;
    scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: 24px;
  }
  .nav::-webkit-scrollbar { display: none; }
}
/* Narrow phones, generic headers (e.g. admin): the header's last control shares the nav row */
@media (max-width: 479.98px) {
  .topbar .wrap { grid-template-columns: minmax(0, 1fr) auto 44px; grid-template-areas: "brand brand picker" "nav cta cta"; column-gap: 8px; }
  .brand { font-size: 17px; }
  .nav { gap: 0; margin-left: -8px; }
  .nav a { padding: 0 8px; font-size: .875rem; }
}
/* Site headers with the [data-cta] button: the nav never shares its row. Brand, theme and CTA fit on row one
   down to 430px; below that the CTA is dropped (the nav's "Pilot" link and the hero CTA go to the same place). */
@media (max-width: 479.98px) {
  .topbar .wrap:has(> [data-cta]) { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "brand picker cta" "nav nav nav"; column-gap: 16px; }
}
@media (max-width: 429.98px) {
  .topbar .wrap:has(> [data-cta]) { grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "brand picker" "nav nav"; }
  .topbar .wrap > .btn[data-cta] { display: none; }
}
/* Below 360px the five index links still overflow: fade the right edge so the row reads as scrollable,
   and end the row with a spacer so the last link clears the fade at full scroll */
@media (max-width: 359.98px) {
  .topbar .wrap:has(> [data-cta]) > .nav { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
  .topbar .wrap:has(> [data-cta]) > .nav::after { content: ""; flex: 0 0 24px; }
}

.illustrative {
  background: var(--surface-2); color: var(--ink-2); font-size: .875rem; text-align: center; padding: 6px 16px;
  border-bottom: var(--rule-w) solid var(--rule);
}

/* ---------- Shared components (spec §2.6 item 9, §11.3) ---------- */

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 8px 18px; border: 1px solid var(--accent); border-radius: var(--radius-m);
  background: var(--accent); color: var(--accent-ink);
  font: 600 1rem/1.25 var(--font-text); text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color .16s cubic-bezier(.2,.7,.2,1), border-color .16s cubic-bezier(.2,.7,.2,1);
}
.btn:hover { text-decoration: none; }
.btn-sm { min-height: 40px; padding: 6px 14px; font-size: .875rem; white-space: nowrap; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--axis); }
.btn.ghost { background: transparent; color: var(--ink-2); border: 1px solid var(--rule); cursor: default; }
@supports (color: color-mix(in oklab, red, blue)) {
  .btn:not(.btn-ghost):not(.ghost):hover { background: color-mix(in oklab, var(--accent) 86%, var(--ink)); }
  .btn-ghost:hover, .chip:hover { background: color-mix(in oklab, var(--surface-2) 70%, transparent); }
}
@media (pointer: coarse) { .btn-sm { min-height: 44px; } }

/* Chips (sector chips, filters, levers): pill, 44px target, pressed state not by colour alone */
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--rule); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink);
  font: 500 .9375rem/1.2 var(--font-text); white-space: nowrap; cursor: pointer;
}
.chip:hover { border-color: var(--axis); }
.chip[aria-pressed="true"] { background: var(--accent-wash); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 600; }
.chip svg { flex: none; }

/* Status tags: glyph (CSS mask) + word + tinted pill. Glyphs are never text characters. */
.tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 6px;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  font-family: var(--font-text); font-size: .75rem; font-weight: 600; line-height: 1.4; letter-spacing: 0;
  font-variation-settings: normal; white-space: nowrap; color: var(--ink);
}
.tag::before {
  content: ""; flex: none; width: 10px; height: 10px; background: var(--muted);
  -webkit-mask: var(--tag-glyph) center / contain no-repeat; mask: var(--tag-glyph) center / contain no-repeat;
}
.tag.verified { background: var(--tag-verified-bg); --tag-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cmask id='m'%3E%3Crect width='10' height='10' fill='white'/%3E%3Cpath d='M2.7 5.1l1.6 1.6 3-3.3' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='5' cy='5' r='5' mask='url(%23m)'/%3E%3C/svg%3E"); }
.tag.verified::before { background: var(--st-verified); }
.tag.likely { background: var(--tag-likely-bg); --tag-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='4.25' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M5 .75a4.25 4.25 0 0 0 0 8.5z'/%3E%3C/svg%3E"); }
.tag.likely::before { background: var(--st-likely); }
.tag.hypothesis { background: var(--tag-hyp-bg); --tag-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='4.2' fill='none' stroke='black' stroke-width='1.5' stroke-dasharray='2.2 1.5'/%3E%3C/svg%3E"); }
.tag.hypothesis::before { background: var(--st-hypothesis); }
.tag.ruled { background: var(--tag-ruled-bg); --tag-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='black' stroke-width='1.4'%3E%3Ccircle cx='5' cy='5' r='4.2'/%3E%3Cpath d='M2.1 7.9l5.8-5.8'/%3E%3C/svg%3E"); }
.tag.ruled::before { background: var(--st-ruled); }
.tag.needs { background: var(--tag-needs-bg); border: 1px dashed var(--muted); --tag-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='black'%3E%3Crect x='.75' y='.75' width='8.5' height='8.5' rx='1' stroke-width='1.2' stroke-dasharray='1.8 1.2'/%3E%3Cpath d='M3.7 3.9a1.35 1.35 0 1 1 2 1.2c-.45.25-.7.5-.7 1' stroke-width='1.1' stroke-linecap='round'/%3E%3Ccircle cx='5' cy='7.4' r='.6' fill='black' stroke='none'/%3E%3C/svg%3E"); }
.tag.needs::before { background: var(--st-needs); }
/* A ruled-out item's label is struck through: the label may sit before or after its tag, or carry .struck */
.tag.ruled + :not(.tag), :has(+ .tag.ruled):not(.tag), .struck { text-decoration: line-through; text-decoration-thickness: 1px; }

/* Figure plate: hairline top rule, no shadow (Viz.figure builds the inside) */
.fig { margin: 0; padding: 20px; background: var(--surface); border-top: var(--rule-w) solid var(--rule); border-radius: var(--radius-m); }
.fig > figcaption { margin-top: 12px; }
.fig-tabs { display: flex; gap: 4px; margin: 12px 0; border-bottom: var(--rule-w) solid var(--rule); overflow-x: auto; scrollbar-width: none; }
.fig-tabs::-webkit-scrollbar { display: none; }
.fig-tabs button, .fig-tabs [role="tab"] {
  flex: none; min-height: 44px; padding: 0 12px; margin-bottom: calc(-1 * var(--rule-w));
  border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ink-2);
  font: 500 .875rem/1.2 var(--font-text); cursor: pointer;
}
.fig-tabs button:hover, .fig-tabs [role="tab"]:hover { color: var(--ink); }
.fig-tabs [aria-selected="true"], .fig-tabs [aria-pressed="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }

/* Type roles */
.kicker {
  margin: 0 0 8px; color: var(--accent);
  font: 500 .75rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.prose {
  max-width: 64ch; font-family: var(--font-display); font-weight: 400; font-optical-sizing: auto;
  font-size: clamp(1.125rem, 1.05rem + .35vw, 1.25rem); line-height: 1.6; font-variation-settings: "SOFT" 0; text-wrap: pretty;
}
.verdict {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 1.1rem + .8vw, 1.625rem); line-height: 1.3;
  font-variation-settings: "SOFT" 0; text-wrap: pretty;
}
.numeral {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(3rem, 2rem + 4vw, 5.5rem); line-height: 1; letter-spacing: -0.03em;
  font-variation-settings: "SOFT" 0; font-variant-numeric: tabular-nums lining-nums;
}
.money {
  background: linear-gradient(to top, transparent .1em, var(--highlight) .1em, var(--highlight) .62em, transparent .62em);
  box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 .08em;
}
.total { border-bottom: 3px double var(--ink); padding-bottom: 1px; }
.stamp {
  color: var(--muted); font: 600 .875rem/1.4 var(--font-text); font-variant-caps: all-small-caps; letter-spacing: .04em;
}
.so-what { max-width: 64ch; margin: 12px 0 0; color: var(--ink); font-size: 1rem; line-height: 1.5; }
.so-what b, .so-what strong { font-weight: 600; }
.note {
  color: var(--ink-2); font-family: var(--font-display); font-size: 15px; font-weight: 400; line-height: 1.35;
  font-variation-settings: "SOFT" var(--display-soft);
}
.data-table, .numeral, .stat .value, .vcard .big, .card-head h3 { font-variation-settings: "SOFT" 0; }

/* Adjustable number (Acme.adjustable): a native number input styled as an underlined serif figure */
/* Tight horizontal padding and no margin, so a unit or full stop next to the field reads as one token with it */
.adj {
  width: 5.5ch; min-width: 2ch; padding: 0 .06em; margin: 0;
  border: 0; border-bottom: 2px solid var(--accent); border-radius: var(--radius-s) var(--radius-s) 0 0;
  background: var(--accent-wash); color: var(--ink);
  font-family: var(--font-display); font-size: inherit; font-weight: 600; line-height: inherit; text-align: center;
  font-variation-settings: "SOFT" 0; font-variant-numeric: tabular-nums lining-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.adj::-webkit-inner-spin-button, .adj::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
@supports (field-sizing: content) { .adj { field-sizing: content; width: auto; } }
@media (pointer: fine) { .adj { cursor: ew-resize; } .adj:focus { cursor: text; } }
.adj-step {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; vertical-align: middle;
  border: 1px solid var(--rule); border-radius: var(--radius-m); background: var(--surface); color: var(--ink);
  font: 600 1.125rem/1 var(--font-text); cursor: pointer;
}

/* Theme motif: behind the hero answer card, on section dividers and once on the memo sheet */
.motif { position: relative; isolation: isolate; }
.motif::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: var(--motif); }
hr.motif { height: 28px; margin: 0; border: 0; border-top: var(--rule-w) solid var(--rule); background: var(--motif); }
hr.motif::before { content: none; }
[data-theme="dusk"] hr.motif { border-top: 0; } /* the Dusk horizon carries its own rule */

/* ---------- Legacy pages: light re-skin, no markup changes ---------- */

/* Hero */
.hero { padding: 48px 0 24px; }
.eyebrow { margin: 0 0 12px; color: var(--accent); font: 500 .75rem/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.hero h1 { font-size: clamp(2rem, 1.35rem + 2.9vw, 3.25rem); line-height: 1.06; margin: 0 0 16px; max-width: 22ch; }
.hero p.lede {
  margin: 0; max-width: 64ch; color: var(--ink-2);
  font-family: var(--font-display); font-weight: 400; font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 1.6;
  font-variation-settings: "SOFT" 0;
}

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px 24px; margin-top: 32px; }
.stat { background: none; border: 0; border-top: var(--rule-w) solid var(--rule); border-radius: 0; padding: 14px 0 0; }
.stat .label { color: var(--ink-2); font: 500 .75rem/1.35 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.stat .value { margin-top: 8px; font-family: var(--font-display); font-size: 2.125rem; font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; }
.stat .value.hero-fig { font-size: clamp(2.75rem, 2rem + 3vw, 4rem); line-height: 1; }
.stat .note { margin-top: 6px; color: var(--muted); font-family: var(--font-text); font-size: .875rem; line-height: 1.4; font-variation-settings: normal; }

/* Questions */
.questions { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 8px 0; padding: 0; list-style: none; counter-reset: q; }
.questions li { counter-increment: q; position: relative; padding: 14px 16px 14px 48px; background: var(--surface); border: var(--rule-w) solid var(--rule); border-radius: var(--radius-m); color: var(--ink); font-weight: 550; }
.questions li::before { content: counter(q); position: absolute; left: 16px; top: 14px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 500 12px/1 var(--font-mono); display: grid; place-items: center; }
.questions li a { color: inherit; text-decoration: none; }
.questions li span { display: block; color: var(--muted); font-weight: 400; font-size: .875rem; margin-top: 2px; }

/* Step sections */
.step { padding: 48px 0 8px; }
.step-head { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; margin-bottom: 8px; }
.step-num { color: var(--accent); font: 500 .75rem/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.step h2 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.125rem); line-height: 1.15; letter-spacing: -0.015em; }
.step .sub { color: var(--ink-2); margin: 6px 0 20px; max-width: 70ch; }

/* Cards become paper sheets: top rule, no shadow */
.card { background: var(--surface); border: 0; border-top: var(--rule-w) solid var(--rule); border-radius: var(--radius-m); padding: 20px; }
.card + .card { margin-top: 16px; }
.card-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.card-head h3 { margin: 0; font-size: 1.1875rem; font-weight: calc(var(--display-wght) - 40); line-height: 1.3; letter-spacing: -0.005em; }
.card-head p { margin: 4px 0 0; color: var(--ink-2); font-size: .9375rem; }
.card-head .tools { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.seg { display: inline-flex; padding: 2px; border: 1px solid var(--rule); border-radius: var(--radius-m); background: var(--surface-2); }
.seg button { min-height: 32px; padding: 4px 10px; border: 0; border-radius: var(--radius-s); background: transparent; color: var(--ink-2); font: inherit; font-size: .8125rem; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--rule); }
.link-btn { min-height: 32px; padding: 4px 2px; border: 0; background: none; color: var(--accent); font: inherit; font-size: .8125rem; cursor: pointer; text-decoration: underline; text-underline-offset: .18em; }
@media (pointer: coarse) { .seg button, .link-btn { min-height: 44px; } }
select { min-height: 32px; padding: 4px 8px; border: 1px solid var(--axis); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); font: inherit; font-size: .8125rem; }

/* Connect */
.systems { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.sys { padding: 10px 12px; background: var(--surface); border: var(--rule-w) solid var(--rule); border-radius: var(--radius-m); }
.sys b { display: block; font-size: .9375rem; font-weight: 600; }
.sys small { color: var(--muted); font-size: .8125rem; }
.recon { margin-top: 14px; display: grid; gap: 10px; }
.recon-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(120px, 1fr) auto; gap: 12px; align-items: center; font-size: .9375rem; }
.recon-row .what { color: var(--ink); }
.recon-row .what small { display: block; color: var(--muted); font-size: .8125rem; }
.meter { height: 8px; border-radius: 4px; background: var(--grid); overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--series-1); border-radius: 4px; }
.recon-row .pct { color: var(--ink-2); min-width: 52px; text-align: right; }

/* Charts (legacy kit) */
.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--font-text); font-variant-numeric: tabular-nums lining-nums; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 8px; color: var(--ink-2); font-size: .8125rem; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.legend i.line { width: 16px; height: 2px; border-radius: 1px; }
.legend i.band { width: 16px; height: 10px; border-radius: 3px; background: var(--band); }
/* Scenario lines are always dashed (6 4), so the legend swatch is too */
.legend i.line[style*="series-2"] { background: repeating-linear-gradient(90deg, var(--series-2) 0 6px, transparent 6px 10px) !important; }
.tooltip {
  position: absolute; z-index: 5; min-width: 140px; max-width: 260px; padding: 8px 10px; pointer-events: none;
  background: var(--raised); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius-m);
  box-shadow: var(--shadow-pop); font-size: .8125rem; line-height: 1.4; opacity: 0; transition: opacity .12s;
}
.tooltip b { font-weight: 650; }
.tooltip .muted { color: var(--muted); }
.data-table { width: 100%; border-collapse: collapse; font-size: .875rem; font-variant-numeric: tabular-nums lining-nums; }
.data-table caption { caption-side: top; text-align: left; padding: 0 0 8px; color: var(--ink-2); font-size: .875rem; }
.data-table th, .data-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--grid); vertical-align: top; }
.data-table th { color: var(--muted); font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.data-table tbody th { color: var(--ink); font-size: inherit; text-transform: none; letter-spacing: 0; }
.data-table td.num, .data-table th.num { text-align: right; white-space: nowrap; }
.table-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.hidden { display: none !important; }

/* Findings */
.findings { display: grid; gap: 10px; margin-top: 14px; }
.finding { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--grid); }
.finding:first-child { border-top: 0; }
.finding .amt { min-width: 72px; font-weight: 600; }
.finding .txt b { display: block; font-weight: 600; }
.finding .txt small { color: var(--ink-2); font-size: .875rem; }

.callout { margin-top: 14px; padding: 10px 14px; border-left: 3px solid var(--critical); background: var(--surface-2); border-radius: 0 var(--radius-m) var(--radius-m) 0; color: var(--ink); font-size: .9375rem; }
.callout.good { border-left-color: var(--good); }

/* Act */
.actions td .owner { display: block; color: var(--muted); font-size: .8125rem; }
/* Below --bp-sm (560px) each action row stacks: action text full width, value + confidence tag on one line under it. */
@media (max-width: 559.98px) {
  .data-table.actions thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .data-table.actions tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--grid); }
  .data-table.actions td { display: block; padding: 0; border-bottom: 0; }
  .data-table.actions td:first-child { flex: 1 0 100%; }
  .data-table.actions td.num { font-weight: 600; }
}

/* Process (old index) */
.process { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.process li { padding: 14px 16px; background: var(--surface); border: var(--rule-w) solid var(--rule); border-radius: var(--radius-m); }
.process li b { display: block; font-size: 1rem; }
.process li small { color: var(--ink-2); font-size: .875rem; }
.process li .k { color: var(--accent); font: 500 .75rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.verticals { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.vcard { display: block; padding: 20px; text-decoration: none; color: var(--ink); background: var(--surface); border: var(--rule-w) solid var(--rule); border-radius: var(--radius-m); transition: border-color .16s cubic-bezier(.2,.7,.2,1); }
a.vcard:hover { border-color: var(--accent); }
.vcard h3 { margin: 0 0 6px; font-size: 1.25rem; }
.vcard p { margin: 0 0 12px; color: var(--ink-2); font-size: .9375rem; }
.vcard .big { font-family: var(--font-display); font-size: 1.875rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.vcard .big small { display: block; margin-top: 4px; font-family: var(--font-text); font-size: .875rem; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.vcard.soon { opacity: .6; }
.vcard .go { display: inline-block; margin-top: 10px; color: var(--accent); font-size: .9375rem; font-weight: 600; }

footer { margin-top: 48px; padding: 40px 0 48px; border-top: var(--rule-w) solid var(--rule); color: var(--muted); font-size: .875rem; }
footer a { color: var(--accent); }

@media (max-width: 640px) {
  .hero { padding-top: 32px; }
  .recon-row { grid-template-columns: 1fr auto; }
  .recon-row .meter { grid-column: 1 / -1; grid-row: 2; }
  .finding { grid-template-columns: 1fr auto; }
  .finding .amt { grid-column: 1; }
  .finding .txt { grid-column: 1 / -1; grid-row: 2; }
}

/* Industries landing */
.ind-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.ind-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; text-decoration: none; color: var(--ink); background: var(--surface); border: var(--rule-w) solid var(--rule); border-radius: var(--radius-m); font-size: .9375rem; }
.ind-nav a:hover { border-color: var(--accent); }
.industry { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; margin-top: 16px; padding: 24px; background: var(--surface); border: 0; border-top: var(--rule-w) solid var(--rule); border-radius: var(--radius-l); scroll-margin-top: 16px; }
.industry h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 8px; font-size: 1.5rem; letter-spacing: -0.015em; }
.industry h3 svg { width: 26px; height: 26px; stroke: var(--accent); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.industry .problem { color: var(--ink-2); margin: 0 0 14px; }
.industry .label { margin: 16px 0 6px; color: var(--muted); font: 500 .75rem/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { padding: 4px 9px; font-size: .8125rem; background: var(--surface-2); border-radius: var(--radius-s); color: var(--ink); }
.industry ul { margin: 0; padding-left: 18px; color: var(--ink); font-size: .9375rem; }
.industry ul li { margin: 3px 0; }
.ask { display: flex; flex-direction: column; padding: 18px; background: var(--surface-2); border-radius: var(--radius-m); }
.ask q { font-family: var(--font-display); font-size: 1.25rem; font-weight: calc(var(--display-wght) - 40); line-height: 1.3; font-variation-settings: "SOFT" var(--display-soft); quotes: "“" "”"; }
.ask .answer { margin-top: 12px; font-size: .9375rem; color: var(--ink-2); }
.ask .answer b { color: var(--ink); }
.ask .cta { margin-top: auto; padding-top: 16px; }
.status { margin-left: auto; white-space: nowrap; color: var(--muted); font: 600 .75rem/1.4 var(--font-text); letter-spacing: 0; font-variation-settings: normal; }
.status.live { color: var(--good-text); }
@media (max-width: 760px) { .industry { grid-template-columns: 1fr; padding: 18px; } }

/* Mini preview chart on the Industries page */
figure.mini { margin: 16px 0 0; padding: 12px 12px 8px; background: var(--surface); border-radius: var(--radius-m); }
figure.mini figcaption { margin-top: 4px; color: var(--muted); font-size: .8125rem; }

/* ---------- Theme panel (theme.js, spec §2.8). Cards carry data-theme and render in their own theme. ---------- */
.tp-panel {
  /* captured from the page theme so the ring stays visible on every card */
  --tp-ring: var(--focus); --tp-ring-ink: var(--accent-ink); --tp-edge: var(--rule);
  position: fixed; inset: auto; z-index: 60; margin: 0; padding: 16px;
  width: 360px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow: auto; overscroll-behavior: contain;
  border: var(--rule-w) solid var(--rule); border-radius: var(--radius-l);
  background: var(--raised); color: var(--ink); box-shadow: var(--shadow-pop);
  font: 1rem/1.5 var(--font-text);
  /* theme.js docks the panel next to its trigger (header or footer): don't inherit that context's text styles */
  text-align: left; text-indent: 0; text-transform: none; letter-spacing: normal; word-spacing: normal; white-space: normal;
  font-variation-settings: normal; visibility: visible;
}
.tp-panel:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.tp-panel:modal {
  inset: auto 0 0 0; width: 100%; max-width: none; max-height: 75svh;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  border-width: var(--rule-w) 0 0; border-radius: var(--radius-l) var(--radius-l) 0 0;
}
.tp-panel::backdrop { background: rgba(0,0,0,.35); }
.tp-grab { display: none; }
.tp-panel:modal .tp-grab { display: block; width: 36px; height: 4px; margin: 4px auto 12px; border-radius: 2px; background: var(--rule); }
.tp-title { margin: 0; font-family: var(--font-text); font-size: 1.0625rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; font-variation-settings: normal; }
.tp-sub { margin: 2px 0 12px; color: var(--ink-2); font-size: .875rem; }
.tp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tp-card {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  min-height: 44px; margin: 0; padding: 8px 8px 10px; text-align: left;
  border: 1px solid var(--tp-edge); border-radius: var(--radius-m);
  background: var(--paper); color: var(--ink); font: inherit; cursor: pointer;
}
.tp-card[data-theme] { background: var(--paper); color: var(--ink); }
.tp-card:hover { border-color: var(--axis); }
.tp-card[aria-checked="true"] { border-color: var(--tp-ring); box-shadow: 0 0 0 1px var(--tp-ring); }
.tp-card:focus-visible { outline: 2px solid var(--tp-ring); outline-offset: 2px; }
[data-theme="contrast"] .tp-card:focus-visible { outline-width: 3px; }
.tp-name {
  padding-right: 24px; font-family: var(--font-display); font-weight: var(--display-wght); font-size: 1.0625rem; line-height: 1.2;
  font-variation-settings: "SOFT" var(--display-soft);
}
.tp-blurb { color: var(--ink-2); font-size: .8125rem; line-height: 1.35; }
.tp-swatch { position: relative; isolation: isolate; overflow: hidden; height: 56px; margin-bottom: 4px; border-radius: var(--radius-s); background: var(--surface); }
/* the theme motif at 50% scale behind the mini chart */
.tp-swatch::before { content: ""; position: absolute; left: 0; top: 0; z-index: -1; width: 200%; height: 200%; background: var(--motif); transform: scale(.5); transform-origin: 0 0; pointer-events: none; }
.tp-mini { display: block; width: 100%; height: 56px; }
.tp-check {
  position: absolute; top: 6px; right: 6px; z-index: 1; display: none; place-items: center; width: 20px; height: 20px;
  border-radius: 50%; background: var(--tp-ring); color: var(--tp-ring-ink);
}
.tp-card[aria-checked="true"] .tp-check { display: grid; }
.tp-system { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; }
.tp-system .tp-text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.tp-system .tp-swatch { flex: none; width: 120px; margin: 0 22px 0 0; background: none; }
.tp-half { position: absolute; inset: 0; background: var(--surface); }
.tp-half::before { content: ""; position: absolute; left: 0; top: 0; width: 200%; height: 200%; background: var(--motif); transform: scale(.5); transform-origin: 0 0; pointer-events: none; }
.tp-half .tp-mini { position: relative; }
.tp-half-a { clip-path: polygon(0 0, 100% 0, 0 100%); }
.tp-half-b { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.tp-foot { display: flex; justify-content: flex-end; margin-top: 12px; }
/* mini chart marks: every colour comes from the card's own tokens */
.tp-mini .m-neg { fill: var(--neg); }
.tp-mini .m-hatch { fill: none; stroke: var(--neg); stroke-width: 1; stroke-dasharray: 2 1.5; }
.tp-mini .m-pos { fill: var(--pos); }
.tp-mini .m-band { fill: var(--band-2); }
.tp-mini .m-med { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linecap: round; }
.tp-mini .m-s2 { fill: none; stroke: var(--series-2); stroke-width: 1.5; stroke-dasharray: 6 4; }
.tp-mini .m-pill { fill: var(--tag-verified-bg); }
.tp-mini .m-glyph { fill: var(--st-verified); }
.tp-mini .m-txt { fill: var(--ink); font: 600 7.5px var(--font-text); }
@media (max-width: 359.98px) { .tp-system .tp-swatch { display: none; } }

/* ---------- Reduced motion: global reset (components also check Acme.motionOK()) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}