/* ═══════════════════════════════════════════════════════════════════
   MICROMARKETS WEBAPP
   Official identity (brand kit, Jul 2026 — Micromarkets/Guide/design.md):
     Ink #01100D · White · Green #008400 · Lime #87F900 ·
     Rust #C23B00 · Orange #FF6C2B
     Host Grotesk (headings, display, figures; -2% kerning) + Inter.
     Backgrounds are White or Ink; on White use Green/Rust, on Ink use
     Lime/Orange. Slanted symbol bars set the brand's angle.
   Layout/type scale from
   docs/superpowers/specs/2026-06-12-webapp-brand-ui-design.md §2.3.
   ONE :root, one declaration per token — do not append an override layer.
   ═══════════════════════════════════════════════════════════════════ */

@import url("/css/shell.css");

/* — self-hosted brand fonts (variable woff2, Google Fonts builds) — */
@font-face {
  font-family: "Host Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/brand/fonts/host-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Host Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/brand/fonts/host-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/brand/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/brand/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Contrast trail — the muted/semantic slots below are AA-tuned against the
   backgrounds they are actually painted on, and pinned by the contrast suite
   in js/check-render.test.mjs. Pre-brand-kit tuning (2026-06-12 warm paper),
   kept because it records real contrast work:
     --muted  #a3998a → #6b6155 (over-dark) → #776d5e
     --muted2 #7d7466 → #534940 (over-dark) → #797163
     --yes    #2f8a5e → #246f4d (over-dark) → #297852
     --no     #c0584f → #a83e37 (over-dark) → #af473f
     --gold   #b8862e → #8f671e (over-dark) → #916924 */
:root {
  /* — official brand tokens — */
  --mm-ink:    #01100D;
  --mm-white:  #FFFFFF;
  --mm-green:  #008400;
  --mm-lime:   #87F900;
  --mm-rust:   #C23B00;
  --mm-orange: #FF6C2B;

  /* — neutrals: White paper, Ink text (no washed tints) — */
  --paper:   #ffffff;
  --panel:   #f4f7f4;
  --surface: #ffffff;
  --ink:     #01100D;
  --muted:   #5b6a63;  /* AA as text on --paper and --panel */
  --muted2:  #43534c;  /* AA as text on --paper */
  --hair:    #e4eae5;
  --hair2:   #edf1ed;
  --line:    #d2dcd4;
  --faint:   #68766f;

  /* — semantics, light-background pairing: Green primary, Rust secondary — */
  --yes: #008400;  --yes-bg: #f1faeb;  --yes-edge: #bfe0ab;  /* bg lightened for AA */
  --no:  #C23B00;  --no-bg:  #faece4;  --no-edge:  #eec3aa;
  --gold: #8a6d1f; --gold-bg: #fcf8ea; --gold-edge: #e5d5a4; /* bg lightened for AA */

  /* — type: Host Grotesk fills the display slots, Inter everything else — */
  --display: "Host Grotesk", "Inter", system-ui, sans-serif;
  --sans:    "Inter", system-ui, Helvetica, Arial, sans-serif;
  --max: 980px;
}

/* ── Ink pairing (brand kit): on Ink use Lime/Orange ──────────────────
   Selected by the html[data-theme] attribute, not prefers-color-scheme:
   a tiny pre-paint script in every page head sets data-theme from
   localStorage.mmTheme (the header toggle) falling back to the OS
   preference, so the same token set serves both the OS default and the
   manual toggle without a second declaration layer. */
:root[data-theme="dark"] {
  --paper:   var(--mm-ink);
  --panel:   #0a1a16;
  --surface: #0a1a16;
  --ink:     var(--mm-white);
  --muted:   #8ea69d;
  --muted2:  #b1c2ba;
  --hair:    #1b2b26;
  --hair2:   #142320;
  --line:    #273832;
  --faint:   #6f8079;

  --yes: var(--mm-lime);   --yes-bg: #0d2a10;  --yes-edge: #2c5a1c;
  --no:  var(--mm-orange); --no-bg:  #2a1108;  --no-edge:  #63301a;
  --gold: #e8c684;         --gold-bg: #2a2110; --gold-edge: #5a4a24;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--max); margin: 0 auto; }
a { color: inherit; text-decoration: none; }
.sans { font-family: var(--sans); }

/* — headings + claim/figure display slots: Host Grotesk, -2% kerning — */
h1, h2, h3, h4, h5 { font-family: var(--display); letter-spacing: -0.02em; font-weight: 600; }

/* — selection: lime highlighter — */
::selection { background: var(--mm-lime); color: var(--mm-ink); }

.dot-live { color: var(--yes); }

/* ── hero: full-bleed Ink band, Lime display type, slanted bars ───── */
.hero {
  position: relative; background: var(--mm-ink);
  box-shadow: 0 0 0 100vmax var(--mm-ink);
  clip-path: inset(0 -100vmax);
  border-bottom: none; padding: 52px 26px 48px;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 {
  color: var(--mm-white); font-weight: 700; font-size: 46px;
  line-height: 1.1; letter-spacing: -0.02em; margin: 0; max-width: 680px;
}
.hero h1 em { font-style: normal; color: var(--mm-lime); }
.hero p { font-family: var(--sans); font-size: 14px; color: #a9bcb3; max-width: 560px; line-height: 1.65; margin: 15px 0 0; }
.verbs { font-family: var(--sans); font-size: 12px; font-weight: 700; display: flex; gap: 20px; margin-top: 20px; }
.verbs a { color: #eaf1ed; border-bottom: 2px solid var(--mm-lime); padding-bottom: 3px; }
.verbs a.dim { color: #8ea69d; border-bottom-color: rgba(255, 255, 255, 0.22); }
.verbs a:hover { color: var(--mm-lime); }
/* the symbol's market columns, rising out of the fold (crops on-brand) */
.hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -8px; bottom: -34px; width: 296px; height: 266px;
  background: url("/brand/mmx-accent.svg") center / contain no-repeat;
}

/* ── margin note (the signature component) ───────────────────────── */
.note { display: flex; gap: 13px; }
.note + .note { margin-top: 26px; }
.rule { width: 3px; border-radius: 2px; align-self: stretch; }
.note-claim { font-family: var(--display); font-size: 18px; line-height: 1.45; letter-spacing: -0.02em; font-weight: 600; }
.note-claim, .tl-text { overflow-wrap: anywhere; }
/* inline code carries unbreakable tokens (keccak256(secret‖marketId‖userId)) */
code { overflow-wrap: anywhere; }
.note-meta { font-family: var(--sans); font-size: 11px; color: var(--muted); margin-top: 5px; }
.acts { display: flex; gap: 15px; margin-top: 9px; font-family: var(--sans); font-size: 11.5px; font-weight: 700; }
.acts .yes { color: var(--yes); }
.acts .no { color: var(--no); }
.acts .share { color: var(--faint); font-weight: 500; }

/* ── two-column: feed + rail ─────────────────────────────────────── */
.cols { display: flex; border-bottom: 1px solid var(--hair); }
.col-main { flex: 1.9; padding: 26px; border-right: 1px solid var(--hair); }
.col-rail { flex: 1; padding: 26px 22px; background: var(--panel); }
/* labels: Inter 600, uppercase, slanted green tick from the symbol */
.kicker {
  font-family: var(--sans); font-size: 10px; letter-spacing: .12em;
  color: var(--muted); font-weight: 600; margin-bottom: 18px;
}
.kicker::before {
  content: ""; display: inline-block; width: 6px; height: 10px;
  margin-right: 8px; vertical-align: -1px;
  background: var(--mm-green); transform: skewX(-14deg);
}

/* ── pulse timeline ──────────────────────────────────────────────── */
.timeline { border-left: 2px solid var(--hair); padding-left: 16px; font-family: var(--sans); }
.tl-item { position: relative; margin-bottom: 15px; font-size: 11px; line-height: 1.6; color: var(--muted2); }
.tl-item b { color: var(--ink); }
.tl-dot {
  position: absolute; left: -22px; top: 3px; width: 9px; height: 9px;
  border-radius: 99px; border: 2px solid var(--panel);
}
.page-pulse .tl-dot { border-color: var(--paper); }
.k-bet .tl-dot, .k-birth .tl-dot { background: var(--yes); }
.k-graduation .tl-dot, .k-launch .tl-dot { background: var(--gold); }
.k-settlement .tl-dot { background: var(--no); }
.k-refund .tl-dot { background: var(--muted); }
.tl-time { font-size: 10px; color: var(--muted); }
.tl-text { font-family: var(--display); font-size: 14px; color: var(--ink); margin-top: 2px; }
.tl-meta { font-size: 10px; color: var(--muted); margin-top: 2px; }
.rail-stats {
  border-top: 1px solid var(--hair); margin-top: 16px; padding-top: 13px;
  font-family: var(--sans); font-size: 11px; color: var(--muted); line-height: 1.9;
}
.rail-stats b { color: var(--ink); }

/* ── swarm field ─────────────────────────────────────────────────── */
.field { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; font-family: var(--sans); }
.tile { display: block; border-radius: 8px; padding: 7px; font-size: 9px; color: var(--muted2); line-height: 1.5; }
.tile b { font-size: 12px; }
.tile.yes { background: var(--yes-bg); border: 1px solid var(--yes-edge); }
.tile.yes b { color: var(--yes); }
.tile.no { background: var(--no-bg); border: 1px solid var(--no-edge); }
.tile.no b { color: var(--no); }
.tile.gold { background: var(--gold-bg); border: 1px solid var(--gold-edge); color: var(--gold); }
.tile.gray { background: var(--panel); border: 1px solid var(--line); color: var(--muted); }
.tile.big { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; padding: 9px; }
.tile.big .tile-claim { font-family: var(--display); font-size: 12px; line-height: 1.3; color: var(--ink); letter-spacing: -0.02em; font-weight: 600; }
.tile.big b { font-size: 16px; }
.tile.wide { grid-column: span 2; }
.legend { font-family: var(--sans); font-size: 10px; color: var(--muted); margin-top: 12px; display: flex; gap: 16px; flex-wrap: wrap; }
.sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; vertical-align: -1px; }

/* ── browse rows + chips ─────────────────────────────────────────── */
.chips { display: flex; gap: 7px; font-family: var(--sans); font-size: 11px; font-weight: 600; flex-wrap: wrap; margin-bottom: 16px; }
.chip { background: var(--surface); border: 1px solid var(--line); border-radius: 99px; padding: 5px 13px; cursor: pointer; user-select: none; }
.chip.on { background: var(--mm-green); color: #fff; border-color: var(--mm-green); }
.rows { border-top: 1px solid var(--hair); }
.mrow { display: flex; gap: 11px; padding: 13px 0; border-bottom: 1px solid var(--hair2); align-items: center; }
.mrow .note-claim { font-size: 15px; flex: 1; }
.mrow .row-meta { font-family: var(--sans); font-size: 10px; color: var(--muted); }

/* ── rowbet priced pills (YES / NO on list rows) ─────────────────── */
.rowbet { display: flex; gap: 5px; flex-shrink: 0; align-items: center; }
.rowbet-yes, .rowbet-no {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  border-radius: 99px; padding: 4px 9px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 3px; line-height: 1;
}
.rowbet-yes { color: var(--yes); background: var(--yes-bg); border: 1px solid var(--yes-edge); }
.rowbet-no  { color: var(--no);  background: var(--no-bg);  border: 1px solid var(--no-edge); }
/* muted (terminal) variant */
.rowbet-closed .rowbet-yes,
.rowbet-closed .rowbet-no {
  color: var(--muted); background: var(--panel); border-color: var(--hair);
  pointer-events: none; cursor: default;
}
/* remove underline / visited colour from pill links */
a.rowbet-yes, a.rowbet-no { text-decoration: none; }
a.rowbet-yes:hover { background: var(--yes); color: var(--surface); border-color: var(--yes); }
a.rowbet-no:hover  { background: var(--no);  color: var(--surface); border-color: var(--no); }
a.rowbet-yes:focus-visible, a.rowbet-no:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 99px;
}
.more { font-family: var(--sans); font-size: 11px; color: var(--muted); text-align: center; margin-top: 14px; }

/* ── browse toolbar (shared search + sort row, index + markets) ──── */
.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.toolbar .search { flex: 1; min-width: 160px; }
.select {
  font-size: 12px; padding: 5px 8px;
  border: 1px solid var(--hair); background: var(--paper); color: var(--ink);
  border-radius: 3px; cursor: pointer;
}

/* ── market page ─────────────────────────────────────────────────── */
.bet-panel { font-family: var(--sans); }
.panel-stats { border-top: 1px solid var(--hair); margin-top: 18px; padding-top: 14px; font-size: 11px; color: var(--muted2); line-height: 1.95; }
.panel-stats b { color: var(--ink); }
.stage-badge { color: var(--gold); }
.fine { border-top: 1px solid var(--hair); margin-top: 14px; padding-top: 12px; font-size: 10px; color: var(--muted); line-height: 1.7; }

/* ── product footer (ft-product-grid): Ink block — white lockup, Lime CTA ── */
.ft-product-grid {
  position: relative; overflow: hidden;
  font-family: var(--sans);
  background: var(--mm-ink);
  border-top: none;
  color: #8ea69d;
}
.ft-product-grid > * { position: relative; z-index: 1; }
.ft-product-grid::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -48px; bottom: -30px; width: 400px; height: 360px;
  background: url("/brand/mmx-mark-white.svg") center / contain no-repeat;
  opacity: 0.05;
}
.ft-product-grid-wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 44px 26px 0;
}
.ft-product-grid-top {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 56px;
  justify-content: space-between;
}
.ft-product-grid-brand { max-width: 340px; flex: 1 1 280px; }
.ft-product-grid-mark {
  width: 148px; height: 42px; overflow: hidden;
  text-indent: -999px; white-space: nowrap; display: inline-block;
  background: url("/brand/mmx-logo-white.png") left center / contain no-repeat;
}
.ft-product-grid-prop {
  font-family: var(--display);
  font-size: 21px; line-height: 1.32; font-weight: 400;
  color: var(--mm-white); letter-spacing: -0.02em;
  margin: 13px 0 6px;
}
.ft-product-grid-prop em { font-style: normal; color: var(--mm-lime); }
.ft-product-grid-sub {
  font-size: 12.5px; line-height: 1.6; color: #8ea69d;
  margin: 0 0 18px; max-width: 320px;
}
.ft-product-grid-cta {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--mm-lime); color: var(--mm-ink);
  font-size: 13px; font-weight: 700;
  padding: 11px 19px; border-radius: 8px;
  letter-spacing: .01em;
}
.ft-product-grid-cta:hover { background: #99ff2b; }
.ft-product-grid-cta:focus-visible { outline: 2px solid var(--mm-lime); outline-offset: 3px; }
.ft-product-grid-ctahint {
  display: block; font-size: 11px; color: #74897f;
  margin-top: 9px; line-height: 1.5;
}
.ft-product-grid-ctahint b { color: #aebfb8; font-weight: 700; }
.ft-product-grid-cols {
  display: flex; flex: 0 1 440px;
}
.ft-product-grid-col { min-width: 0; flex: 1; }
.ft-product-grid-coltitle {
  font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--mm-lime); margin: 2px 0 13px;
}
.ft-product-grid-links {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 36px; list-style: none; margin: 0; padding: 0;
}
.ft-product-grid-links li { margin: 0; }
.ft-product-grid-links a {
  font-size: 13px; color: #b1c2ba;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
  transition: color .12s ease, border-color .12s ease;
}
.ft-product-grid-links a:hover { color: var(--mm-white); border-bottom-color: rgba(255, 255, 255, 0.3); }
.ft-product-grid-links a.ext::after { content: " ↗"; color: #74897f; font-size: 11px; }
.ft-product-grid-trust {
  display: flex; flex-wrap: wrap; gap: 9px;
  margin-top: 38px; padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}
.ft-product-grid-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: #b1c2ba;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 99px; padding: 5px 12px;
}
.ft-product-grid-badge .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.ft-product-grid-badge .dot.yes { background: var(--mm-lime); }
.ft-product-grid-badge .dot.gold { background: var(--mm-orange); }
.ft-product-grid-badge .dot.no { background: var(--mm-white); }
.ft-product-grid-bar {
  margin-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  padding: 15px 0 26px;
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  justify-content: space-between; align-items: center;
  font-size: 10.5px; color: #74897f; line-height: 1.6;
}
.ft-product-grid-bar a { color: #b1c2ba; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.ft-product-grid-bar a:hover { color: var(--mm-white); }
.ft-product-grid-credit { max-width: 560px; }
@media (max-width: 720px) {
  .ft-product-grid-top { flex-direction: column; gap: 34px; }
  /* flex-basis 280px would become a height floor in the column direction,
     leaving a dead gap under the CTA hint */
  .ft-product-grid-brand { max-width: none; flex: none; }
  .ft-product-grid-cols { flex: none; width: 100%; }
}
@media (max-width: 440px) {
  .ft-product-grid-wrap { padding: 36px 20px 0; }
  .ft-product-grid-prop { font-size: 19px; }
  .ft-product-grid-links { grid-template-columns: 1fr; }
  .ft-product-grid-cta { width: 100%; justify-content: center; }
  .ft-product-grid-bar { flex-direction: column; align-items: flex-start; }
}

/* ── section heads (in-page, distinct from .page-head) ───────────── */
.section-head { font-family: var(--display); font-size: 21px; font-style: normal; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 3px; }
.section-sub { font-family: var(--sans); font-size: 12px; color: var(--muted); margin-bottom: 15px; }

/* ── page heads + responsive ─────────────────────────────────────── */
.page-head { padding: 26px 26px 0; }
.page-head h1 { font-size: 24px; font-style: normal; font-weight: 400; margin: 0 0 4px; }
.page-head .sub { font-family: var(--sans); font-size: 12px; color: var(--muted); }
.section { padding: 26px; border-bottom: 1px solid var(--hair); }
.section--flush { border-bottom: none; padding-top: 16px; }
.stat-row { display: flex; gap: 24px; font-size: 11.5px; color: var(--muted); margin-bottom: 18px; flex-wrap: wrap; font-family: var(--sans); }
.stat-row b { font-family: var(--display); color: var(--ink); font-size: 16px; letter-spacing: -0.02em; }

.claim-link:hover { text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: 3px; }

@media (max-width: 760px) {
  .cols { flex-direction: column; }
  .col-main { border-right: none; border-bottom: 1px solid var(--hair); }
  /* .hero sizing is handled by the 640px block below — the brand hero type
     scale only steps down once, at the phone breakpoint. */
  .field { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { width: 100%; }
  .hero p { font-size: 13px; }
  .verbs { flex-wrap: wrap; gap: 12px; }
  .col-main, .col-rail, .section, .page-head { padding-left: 20px; padding-right: 20px; }
  .field { grid-template-columns: repeat(2, 1fr); }
  .toolbar { align-items: stretch; }
  .toolbar .search { flex-basis: 100%; max-width: none; margin-bottom: 0; }
  .select { flex: 1; min-width: 0; }
  .mrow {
    display: grid;
    grid-template-columns: 3px minmax(0, 1fr) auto;
    gap: 8px 10px;
    align-items: start;
  }
  .mrow .rule { grid-row: 1 / 3; }
  .mrow .note-claim { grid-column: 2 / 4; }
  .mrow .row-meta { display: block; margin-top: 3px; }
  .rowbet { grid-column: 2; flex-wrap: wrap; }
  /* The composer keeps its base layout on phones: the desktop rail (~290px)
     is narrower than a phone's content width, so the base rules already fit.
     Structural cmp-* overrides here are also a foot-gun — the cmp-* base
     rules come LATER in this file and win the cascade at equal specificity
     (see check-render.test.mjs "composer media overrides"). */
  .cmp-chips { flex-wrap: wrap; }
}

/* ── search box ───────────────────────────────────────────────────── */
.search { width: 100%; max-width: 360px; font-family: var(--sans); font-size: 13px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 14px; background: var(--surface); color: var(--ink); }

/* ── visually-hidden skip link ────────────────────────────────────── */
.skip-link {
  position: absolute; top: -100%; left: 8px;
  background: var(--ink); color: var(--paper);
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  padding: 8px 14px; border-radius: 0 0 6px 6px;
  z-index: 9999; text-decoration: none;
}
.skip-link:focus { top: 0; }

/* ── focus-visible ring (all interactive elements) ────────────────── */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.btn-ink:focus-visible,
.chip:focus-visible,
.claim-link:focus-visible,
.search:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── reduced-motion: pause all continuous animations ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .grad-bar { transition: none !important; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ── skeleton loader ─────────────────────────────────────────────── */
.sk { background: linear-gradient(90deg, var(--hair2) 25%, var(--hair) 50%, var(--hair2) 75%); background-size: 200% 100%; animation: sk-shimmer 1.4s ease-in-out infinite; border-radius: 4px; }
@keyframes sk-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; background: var(--hair2); } }
.sk-line { height: 14px; margin-bottom: 10px; }
.sk-line.wide { width: 80%; }
.sk-line.med { width: 55%; }
.sk-line.short { width: 30%; }

/* ── cmp-* : stage-aware composer ticket (composer.js) ───────────── */
/* All layout + colour reuses brand tokens; no inline style blocks. */
.cmp-ticket {
  font-family: var(--sans);
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: var(--paper);
  padding: 18px;
}
.cmp-ticket-closed { background: var(--panel); }

/* Stage label */
.cmp-stage-lbl {
  font-size: 11px; font-weight: 600; color: var(--muted);
  display: flex; align-items: center; gap: 5px;
  padding-bottom: 13px; border-bottom: 1px solid var(--hair);
  margin-bottom: 0;
}
.cmp-dot {
  width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0;
}
.cmp-dot-live  { background: var(--gold); }
.cmp-dot-open  { background: var(--yes); }
.cmp-dot-muted { background: var(--muted); }

/* Tabs row (Buy/Sell) and pari "Pick a side" label */
.cmp-tabsrow { display: flex; align-items: center; padding: 13px 0 11px; min-height: 20px; }
.cmp-tabs { display: flex; gap: 20px; }
.cmp-tab {
  background: none; border: none; padding: 0 0 3px;
  font: inherit; font-size: 15px; font-weight: 600;
  color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent;
}
.cmp-tab.on { color: var(--ink); border-bottom-color: var(--ink); }
.cmp-back-lbl { font-size: 13px; font-weight: 600; color: var(--muted); }

/* YES / NO side buttons */
.cmp-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.cmp-side {
  border: 1px solid var(--hair); border-radius: 9px; padding: 13px 12px;
  cursor: pointer; background: var(--paper); text-align: left; font: inherit;
}
.cmp-side span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.cmp-side b    { display: block; font-size: 21px; margin-top: 3px; color: var(--ink); }
.cmp-side small { display: block; font-size: 10px; font-weight: 500; color: var(--muted); }
.cmp-side.yes.on { background: var(--yes); border-color: var(--yes); }
.cmp-side.no.on  { background: var(--no);  border-color: var(--no); }
.cmp-side.yes.on span, .cmp-side.yes.on b, .cmp-side.yes.on small,
.cmp-side.no.on  span, .cmp-side.no.on  b, .cmp-side.no.on  small { color: var(--surface); }
.cmp-side:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 9px; }

/* Amount row */
.cmp-amtrow { display: flex; justify-content: space-between; align-items: baseline; }
.cmp-amtlbl { font-size: 14px; font-weight: 600; }
.cmp-amtbox {
  font-family: var(--display); font-size: 38px; line-height: 1; letter-spacing: -0.02em;
  display: flex; align-items: baseline;
}
.cmp-dol { font-size: 24px; color: var(--muted2); }
.cmp-amt {
  font: inherit; font-family: var(--display); font-size: 38px; letter-spacing: -0.02em;
  width: 4.5ch; border: none; background: none;
  text-align: right; color: var(--ink); padding: 0; outline: none;
}
.cmp-amt:focus { color: var(--gold); }

/* Additive chips */
.cmp-chips { display: flex; gap: 7px; justify-content: flex-end; margin: 11px 0 2px; }
.cmp-chip {
  border: 1px solid var(--hair); border-radius: 7px; padding: 5px 11px;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--muted2); background: var(--panel); cursor: pointer;
}
.cmp-chip:hover { color: var(--ink); border-color: var(--ink); }
.cmp-unit { font-size: 11px; color: var(--muted); text-align: right; margin-top: 2px; }

/* Graduation progress bar (pari only) */
.cmp-grad { margin: 13px 0 2px; font-size: 11.5px; color: var(--muted); }
.cmp-grad b { color: var(--ink); }
.cmp-grad-bar {
  height: 5px; background: var(--hair); border-radius: 3px; margin-top: 6px; overflow: hidden;
}
.cmp-grad-bar i {
  display: block; height: 100%; background: var(--gold); border-radius: 3px;
  transition: width 0.3s ease;
}
@media (prefers-reduced-motion: reduce) { .cmp-grad-bar i { transition: none; } }

/* To-win row */
.cmp-towinrow {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 15px 0 5px; margin-top: 14px; border-top: 1px solid var(--hair);
}
.cmp-towinlbl { font-size: 14px; font-weight: 700; }
.cmp-sub { font-size: 11px; color: var(--muted); margin-top: 3px; }
.cmp-towin { font-family: var(--display); font-size: 34px; color: var(--yes); line-height: 1; letter-spacing: -0.02em; }
.cmp-warn { color: var(--no); font-size: 12px; margin: 3px 0 0; font-weight: 600; }

/* Details toggle + panel */
.cmp-details-btn {
  width: 100%; background: none; border: none; padding: 9px 0;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--muted2);
  cursor: pointer; margin: 8px 0 2px; text-align: left;
}
.cmp-details-btn:hover { color: var(--ink); }
.cmp-details {
  border: 1px solid var(--hair); border-radius: 8px; padding: 11px 13px;
  margin-bottom: 12px; background: var(--panel);
}
.cmp-drow {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 12px; padding: 4px 0; color: var(--muted);
}
.cmp-drow b { color: var(--ink); font-weight: 600; text-align: right; }
.cmp-drow + .cmp-drow { border-top: 1px solid var(--hair); }
.cmp-dnote { font-size: 11px; color: var(--muted); margin-top: 8px; line-height: 1.55; }

/* Slippage slider row (nested inside .cmp-drow) */
.cmp-caprow { display: block; }
.cmp-caprange { width: 100%; accent-color: var(--gold); margin-top: 7px; }

/* CTA link */
.cmp-cta {
  display: block; text-align: center; background: var(--ink); color: var(--paper);
  font-weight: 700; font-size: 15px; padding: 14px; border-radius: 10px;
  text-decoration: none;
}
.cmp-cta.disabled {
  background: var(--hair); color: var(--muted); pointer-events: none; cursor: not-allowed;
}
.cmp-cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 10px; }

/* Closed / terminal state */
.cmp-closed-msg {
  font-size: 13px; color: var(--muted); padding: 16px 0 6px;
  font-family: var(--sans);
}
.cmp-claim-line {
  font-size: 11.5px; color: var(--muted2); font-family: var(--sans);
  padding-top: 10px; border-top: 1px solid var(--hair); margin-top: 8px;
}
.cmp-tg-link { color: var(--yes); }
.cmp-tg-link:hover { text-decoration: underline; }

/* ── resolution terms (.rt-*) ────────────────────────────────────── */
/* Kicker inside both resolution panels gets margin-bottom via the
   panel-level kicker override below (.resolution-panel .kicker,
   .resolution-terms .kicker, etc.), not an inline style. */
.resolution-terms .kicker,
.resolution-panel .kicker,
.curve-panel .kicker,
.grad-meter .kicker { margin-bottom: 10px; }
.curve-panel .kicker,
.grad-meter .kicker { margin-bottom: 8px; }

/* resolutionTerms — description, outcomes, source rows */
/* .rt-desc uses body defaults (font-size:17px serif block) — no rule needed */
.rt-outcomes { /* block, inherits */ }
.rt-outcome  { /* inline, inherits */ }
.rt-resolves { /* block, inherits */ }
.rt-sources  { /* block, inherits */ }
.rt-domain   { /* inline, inherits */ }
.rt-src-link { /* inline anchor, inherits */ }

/* ── resolution panel (.rp-*) ─────────────────────────────────────── */
.rp-outcome    { font-size: 16px; font-weight: 700; }
.rp-verdict    { margin-top: 10px; font-size: 14px; font-weight: 600; }
.rp-reasoning  { margin-top: 8px; font-size: 13px; color: var(--muted); }
.rp-evidence   {
  margin-top: 10px; padding: 8px 10px;
  background: var(--paper); border-left: 3px solid var(--hair);
  font-size: 12px;
}
.rp-ev-author  { font-weight: 600; }
.rp-ev-text    { display: block; margin-top: 4px; font-style: italic; font-size: 12px; }
.rp-sources    { margin-top: 8px; font-size: 11px; color: var(--muted); }
.rp-res-urls   { margin-top: 4px; font-size: 11px; color: var(--muted); }
.rp-payout     { margin-top: 10px; font-size: 13px; font-weight: 600; }
.rp-tx         { margin-top: 6px; font-size: 11px; color: var(--muted); }
.rt-src-link,
.rp-tx-link,
.rp-ev-link { overflow-wrap: anywhere; word-break: break-word; }

/* State variant — pending sources have 12px (settled sources are 11px) */
.rp-pending-sources { font-size: 12px; }

/* outcome colour: YES/NO badges are inline <span style="color:var(--yes/no)"> —
   those remain dynamic (the colour depends on the outcome value). */

/* ── curve panel (.curve-*) ──────────────────────────────────────── */
/* .curve-panel itself has no special layout — inherits block */
.curve-spot    { /* block, inherits — the <b> inside carries the size */ }
.curve-spot b  { font-size: 22px; color: var(--yes); }
.curve-pools   { font-size: 11px; color: var(--muted); margin-top: 4px; }
.curve-grad-badge { color: var(--gold); }

/* ── graduation meter (.grad-*) ──────────────────────────────────── */
/* .grad-meter itself has no special layout */
.grad-label    { font-size: 12px; font-weight: 600; }
.grad-bar-wrap {
  margin-top: 6px; height: 8px;
  background: var(--hair); border-radius: 4px; overflow: hidden;
}
.grad-bar      { height: 100%; background: var(--gold); transition: width .3s; }
.grad-pct      { font-size: 10px; color: var(--muted); margin-top: 4px; }

/* ── shared empty-state ──────────────────────────────────────────── */
.empty-state {
  padding: 32px 0;
  font-size: 14px;
  color: var(--muted);
}

/* ── shared subsection divider ───────────────────────────────────── */
.subsection {
  margin-top: 24px;
  border-top: 1px solid var(--hair);
  padding-top: 16px;
}
.subsection.tight {
  margin-top: 12px;
  padding-top: 12px;
}

/* ── shared callout panel (left-rule inset) ──────────────────────── */
/* Used by the how-it-works CTA variant (.callout--cta) */
.callout {
  padding: 12px 14px;
  background: var(--panel);
  border-left: 3px solid var(--hair);
  border-radius: 0 4px 4px 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
}
.callout strong { color: var(--muted2); }
/* .callout--cta: the about-page CTA variant (larger padding, border) */
.callout--cta {
  margin-top: 28px;
  padding: 22px 24px;
  border-left: none;
  border: 1px solid var(--hair);
  border-radius: 6px;
  background: var(--panel);
  font-size: 14px;
  color: var(--muted2);
  line-height: 1.6;
}
.callout--cta p { margin: 0 0 14px; font-size: 14px; color: var(--muted2); line-height: 1.6; }
.callout--cta .btn-ink { display: inline-block; }

/* ── how-it-works page ───────────────────────────────────────────── */
.hiw-hero { margin-bottom: 0; }
.hiw-shell { padding: 0 26px 64px; }
.hiw-section { padding: 52px 0; border-bottom: 1px solid var(--hair); }
.hiw-section h2, .hiw-lab h2 {
  margin: 0 0 18px; font-size: clamp(28px, 4vw, 42px); line-height: 1.12;
}
.hiw-section h3 { margin: 0; font-size: 19px; line-height: 1.25; }
.hiw-section p, .hiw-lab p {
  margin: 0; color: var(--muted2); font-size: 15px; line-height: 1.7;
}
.hiw-eyebrow {
  margin-bottom: 12px; color: var(--yes); font-size: 10px; font-weight: 700;
  letter-spacing: .14em;
}
.hiw-eyebrow::before {
  content: ""; display: inline-block; width: 6px; height: 10px;
  margin-right: 8px; vertical-align: -1px;
  background: var(--yes); transform: skewX(-14deg);
}
.hiw-lede { max-width: 690px; }
.hiw-steps {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; margin-top: 28px; background: var(--hair);
  border: 1px solid var(--hair);
}
.hiw-step { min-height: 230px; padding: 25px; background: var(--paper); }
.hiw-step-num {
  display: block; margin-bottom: 38px; color: var(--yes);
  font-family: var(--display); font-size: 13px; font-weight: 700;
}
.hiw-step p { margin-top: 10px; font-size: 14px; }
.hiw-step a { color: var(--yes); text-decoration: underline; text-underline-offset: 3px; }
.hiw-money-flow {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px; list-style: none; padding: 0; margin: 30px 0 22px;
}
.hiw-money-flow li {
  position: relative; display: grid; place-items: center; min-height: 86px;
  padding: 12px; border: 1px solid var(--line); background: var(--panel);
  color: var(--ink); text-align: center; font-size: 12px; font-weight: 600;
}
.hiw-money-flow li:not(:last-child)::after {
  content: "→"; position: absolute; right: -15px; z-index: 1; color: var(--yes);
}
.hiw-note {
  padding: 18px 20px; border-left: 3px solid var(--yes);
  background: var(--panel);
}
.hiw-trust-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; margin-top: 28px;
}
.hiw-trust-grid article { padding: 22px; border: 1px solid var(--hair); }
.hiw-trust-grid article > span {
  display: block; margin-bottom: 32px; color: var(--yes);
  font-family: var(--display); font-size: 13px; font-weight: 700;
}
.hiw-trust-grid p { margin-top: 9px; font-size: 14px; }
.hiw-undetermined {
  margin-top: 18px; padding: 22px; background: var(--no-bg);
  border-left: 3px solid var(--no);
}
.hiw-undetermined h3 { margin-bottom: 8px; }
.hiw-lab {
  display: flex; align-items: end; justify-content: space-between; gap: 32px;
  margin: 52px -34px 0; padding: 34px; overflow: hidden;
  background: var(--mm-ink); color: var(--mm-white);
}
.hiw-lab .hiw-eyebrow { color: var(--mm-lime); }
.hiw-lab .hiw-eyebrow::before { background: var(--mm-lime); }
.hiw-lab h2 { color: var(--mm-white); }
.hiw-lab p { max-width: 620px; color: #b1c2ba; }
.hiw-lab-link {
  flex: none; padding-bottom: 3px; border-bottom: 2px solid var(--mm-lime);
  color: var(--mm-white); font-size: 13px; font-weight: 700;
}
.hiw-lab-link:hover { color: var(--mm-lime); }
.hiw-faq { margin-top: 24px; border-top: 1px solid var(--hair); }
.hiw-faq-item { border-bottom: 1px solid var(--hair); }
.hiw-faq-item summary {
  padding: 18px 34px 18px 0; cursor: pointer; color: var(--ink);
  font-family: var(--display); font-size: 18px; font-weight: 600;
}
.hiw-faq-item summary:focus-visible { outline: 2px solid var(--yes); outline-offset: 4px; }
.hiw-faq-item p { max-width: 720px; padding: 0 34px 20px 0; font-size: 14px; }
.honest-note { font-size: 12px; color: var(--muted); margin-top: 8px; display: block; }

/* ── group-page styles ───────────────────────────────────────────── */
.group-header { padding: 20px 0 0; }
.group-chat-size { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.group-stats { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-bottom: 16px; }
.group-stat { font-size: 13px; color: var(--muted2); }
.group-stat b { color: var(--ink); }
.group-treasury { font-size: 12px; color: var(--muted); margin-top: 4px; word-break: break-all; }
.group-treasury a { color: var(--yes); text-decoration: none; }
.group-treasury a:hover { text-decoration: underline; }
.group-markets-head { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--gold); text-transform: uppercase; margin: 0 0 10px; }



/* ── responsive ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .hero h1 { font-size: 33px; }
  .hero::after { width: 176px; height: 158px; right: -20px; bottom: -22px; }
}

@media (max-width: 760px) {
  .hiw-shell { padding-inline: 18px; }
  .hiw-section { padding: 40px 0; }
  .hiw-steps, .hiw-trust-grid { grid-template-columns: 1fr; }
  .hiw-step { min-height: 0; }
  .hiw-step-num, .hiw-trust-grid article > span { margin-bottom: 18px; }
  .hiw-money-flow { grid-template-columns: 1fr; gap: 12px; }
  .hiw-money-flow li { min-height: 58px; }
  .hiw-money-flow li:not(:last-child)::after {
    content: "↓"; right: auto; bottom: -13px;
  }
  .hiw-lab { align-items: flex-start; flex-direction: column; margin-inline: 0; padding: 26px; }
}

/* mid widths: the bars would sit under the hero text — fade to watermark */
@media (max-width: 1080px) {
  .hero::after { opacity: 0.3; }
}

/* ── Ink pairing: page-specific hard-coded light-background values ── */
[data-theme="dark"] .chip.on { background: var(--mm-lime); color: var(--mm-ink); border-color: var(--mm-lime); }
[data-theme="dark"] .kicker::before { background: var(--mm-lime); }
/* The Ink band is invisible on an Ink page, so it needs no override at all —
   it only needs an edge. Do NOT cancel the base `clip-path` here: that inset
   extends the band sideways but CROPS IT VERTICALLY, and that crop is the
   only thing keeping `.hero::after` (the accent bars, `bottom: -34px`) from
   spilling over the feed below. */
[data-theme="dark"] .hero { border-bottom: 1px solid var(--hair); }
[data-theme="dark"] .ft-product-grid { border-top: 1px solid var(--hair); }