/* ═══════════════════════════════════════════════════════════════════
   MICROMARKETS WEBAPP
   Warm paper, serif claims / sans chrome, split-rule odds.
   Tokens from docs/superpowers/specs/2026-06-12-webapp-brand-ui-design.md §2.3
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --paper: #faf7f1;
  --panel: #f5f1e8;
  --surface: #fff;
  --ink: #1e1a15;
  --muted: #776d5e;   /* was #a3998a (original) → #6b6155 (over-dark) → lightest AA on paper+panel */
  --muted2: #797163;  /* was #7d7466 (original) → #534940 (over-dark) → lightest AA on paper */
  --hair: #e9e2d4;
  --hair2: #efe9dc;
  --line: #d9d0bd;
  --faint: #c5bcab;
  --yes: #297852;   /* was #2f8a5e (original) → #246f4d (over-dark) → lightest AA on paper+yes-bg */
  --no: #af473f;    /* was #c0584f (original) → #a83e37 (over-dark) → lightest AA on paper+no-bg */
  --gold: #916924;  /* was #b8862e (original) → #8f671e (over-dark) → lightest AA on paper+gold-bg */
  --gold-bg: #fdf4df;
  --gold-edge: #ecd9a8;
  --yes-bg: #e3efe7;
  --yes-edge: #bcd8c6;
  --no-bg: #f6e4e2;
  --no-edge: #e4bdb8;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, Helvetica, Arial, sans-serif;
  --max: 980px;
}

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

/* ── header ──────────────────────────────────────────────────────── */
.site-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 26px; border-bottom: 1px solid var(--hair);
  font-family: var(--sans);
}
.wordmark { font-size: 16px; font-weight: 800; letter-spacing: -0.3px; }
.wordmark span { color: var(--muted); }
.site-nav { display: flex; gap: 18px; font-size: 12px; color: var(--muted); }
.site-nav a:hover, .site-nav a.active { color: var(--ink); }
.head-right { display: flex; align-items: center; gap: 14px; }
.live-count { font-size: 11px; color: var(--muted); }
.live-count b { color: var(--ink); }
.dot-live { color: var(--yes); }
.btn-ink {
  background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 700;
  padding: 9px 17px; border-radius: 7px; display: inline-block;
}

/* ── pulse ticker strip ──────────────────────────────────────────── */
.ticker {
  background: var(--ink); color: #cfc5b2; font-family: var(--sans);
  font-size: 11px; padding: 7px 0; overflow: hidden; white-space: nowrap;
}
.ticker-inner { display: inline-block; animation: tick 45s linear infinite; }
@keyframes tick { to { transform: translateX(-50%); } }
.ticker .k-bet, .ticker .k-birth { color: #7fd6a8; }
.ticker .k-graduation { color: #e8c684; }
.ticker .k-settlement { color: #ff8d80; }
.ticker .k-refund { color: #b3a999; }

/* ── hero ────────────────────────────────────────────────────────── */
.hero { padding: 48px 26px 34px; border-bottom: 1px solid var(--hair); }
.hero h1 { font-size: 38px; line-height: 1.22; font-weight: 400; margin: 0; max-width: 660px; }
.hero h1 em { font-style: italic; }
.hero p { font-family: var(--sans); font-size: 14px; color: var(--muted2); 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 { border-bottom: 2px solid var(--ink); padding-bottom: 3px; }
.verbs a.dim { color: var(--muted); border-bottom-color: #e0d8c8; }

/* ── 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-size: 18px; line-height: 1.45; }
.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); }
.kicker {
  font-family: var(--sans); font-size: 10px; letter-spacing: 2px;
  color: var(--muted); font-weight: 700; margin-bottom: 18px;
}

/* ── 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 { 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(--serif); 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: #eee9de; 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(--serif); font-size: 12px; line-height: 1.3; color: var(--ink); }
.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(--ink); color: var(--paper); border-color: var(--ink); }
.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;
}
.btn-star { font-family: var(--sans); font-size: 14px; font-weight: 400; background: transparent; border: none; color: var(--muted2); cursor: pointer; padding: 2px 5px; border-radius: 4px; line-height: 1; flex-shrink: 0; }
.btn-star:hover { color: var(--gold); }
.btn-star.on { color: var(--gold); }
.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) ────────────────────────────── */
.ft-product-grid {
  font-family: var(--sans);
  background: var(--panel);
  border-top: 1px solid var(--hair);
  color: var(--muted2);
}
.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 {
  font-size: 19px; font-weight: 800; letter-spacing: -0.3px;
  color: var(--ink); display: inline-block;
}
.ft-product-grid-mark span { color: var(--muted); }
.ft-product-grid-prop {
  font-family: var(--serif);
  font-size: 21px; line-height: 1.32; font-weight: 400;
  color: var(--ink);
  margin: 13px 0 6px;
}
.ft-product-grid-prop em { font-style: italic; color: var(--gold); }
.ft-product-grid-sub {
  font-size: 12.5px; line-height: 1.6; color: var(--muted2);
  margin: 0 0 18px; max-width: 320px;
}
.ft-product-grid-cta {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--ink); color: var(--paper);
  font-size: 13px; font-weight: 700;
  padding: 11px 19px; border-radius: 8px;
  letter-spacing: .01em;
}
.ft-product-grid-cta:hover { background: #000; }
.ft-product-grid-cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.ft-product-grid-ctahint {
  display: block; font-size: 11px; color: var(--muted);
  margin-top: 9px; line-height: 1.5;
}
.ft-product-grid-ctahint b { color: var(--muted2); font-weight: 700; }
.ft-product-grid-cols {
  display: flex; flex-wrap: wrap; gap: 36px 52px;
}
.ft-product-grid-col { min-width: 116px; }
.ft-product-grid-coltitle {
  font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin: 2px 0 13px;
}
.ft-product-grid-links { list-style: none; margin: 0; padding: 0; }
.ft-product-grid-links li { margin: 0 0 9px; }
.ft-product-grid-links a {
  font-size: 13px; color: var(--muted2);
  border-bottom: 1px solid transparent; padding-bottom: 1px;
  transition: color .12s ease, border-color .12s ease;
}
.ft-product-grid-links a:hover { color: var(--ink); border-bottom-color: var(--hair); }
.ft-product-grid-links a.ext::after { content: " ↗"; color: var(--muted); font-size: 11px; }
.ft-product-grid-trust {
  display: flex; flex-wrap: wrap; gap: 9px;
  margin-top: 38px; padding-top: 26px;
  border-top: 1px solid var(--hair);
}
.ft-product-grid-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--muted2);
  background: var(--paper); border: 1px solid var(--hair);
  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(--yes); }
.ft-product-grid-badge .dot.gold { background: var(--gold); }
.ft-product-grid-badge .dot.no { background: var(--no); }
.ft-product-grid-bar {
  margin-top: 24px;
  border-top: 1px solid var(--hair);
  padding: 15px 0 26px;
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  justify-content: space-between; align-items: center;
  font-size: 10.5px; color: var(--muted); line-height: 1.6;
}
.ft-product-grid-bar a { color: var(--muted2); border-bottom: 1px solid var(--hair); }
.ft-product-grid-bar a:hover { color: var(--ink); }
.ft-product-grid-credit { max-width: 560px; }
@media (max-width: 720px) {
  .ft-product-grid-top { flex-direction: column; gap: 34px; }
  .ft-product-grid-brand { max-width: none; }
  .ft-product-grid-cols { gap: 28px 44px; }
}
@media (max-width: 440px) {
  .ft-product-grid-wrap { padding: 36px 20px 0; }
  .ft-product-grid-prop { font-size: 19px; }
  .ft-product-grid-cols { flex-direction: column; gap: 24px; }
  .ft-product-grid-col { min-width: 0; }
  .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(--serif); font-size: 21px; font-style: italic; font-weight: 400; 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: italic; 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 { color: var(--ink); font-size: 16px; }

.pill { font-family: var(--sans); font-size: 9.5px; font-weight: 700; border-radius: 99px; padding: 3px 9px; letter-spacing: .5px; }
.pill-live { background: #e3efe7; color: var(--yes); border: 1px solid var(--yes-edge); }
.pill-demo { background: var(--panel); color: var(--muted); border: 1px solid var(--line); }
.pill-unavailable { background: var(--panel); color: var(--muted); border: 1px solid var(--line); }
.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 h1 { font-size: 28px; }
  .field { grid-template-columns: repeat(4, 1fr); }
  .site-head { flex-wrap: wrap; gap: 10px; }
  .site-nav { order: 3; width: 100%; justify-content: space-between; }
  .head-right { flex-wrap: wrap; justify-content: flex-end; }
}
/* tightest phones: drop the redundant live-count so the CTA never crowds */
@media (max-width: 480px) { .live-count { display: none; } }

/* ── 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,
.btn-star: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) {
  .ticker-inner { animation: none !important; }
  .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(--serif); font-size: 38px; line-height: 1;
  display: flex; align-items: baseline;
}
.cmp-dol { font-size: 24px; color: var(--muted2); }
.cmp-amt {
  font: inherit; font-family: var(--serif); font-size: 38px;
  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(--serif); font-size: 34px; color: var(--yes); line-height: 1; }
.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); }

/* 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 .blinded-caveat (portfolio) and .cta-block (about) variant */
.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; }

/* ── portfolio-specific styles ───────────────────────────────────── */
.pos-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--hair);
}
.pos-row:last-child { border-bottom: none; }
.pos-claim { font-size: 14px; margin-bottom: 6px; line-height: 1.4; }
.pos-meta { font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pos-side { font-weight: 700; font-size: 11px; padding: 1px 5px; border-radius: 3px; }
.pos-side.yes { color: var(--yes); background: var(--yes-bg); }
.pos-side.no  { color: var(--no);  background: var(--no-bg);  }
.pos-shares { color: var(--muted2); }
.pnl-pos  { color: var(--yes); font-weight: 600; }
.pnl-neg  { color: var(--no);  font-weight: 600; }
.pnl-zero { color: var(--muted); }
.pos-badge { font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 1px 6px; border-radius: 3px; text-transform: uppercase; }
.pos-badge-open       { color: var(--muted2); background: var(--panel); }
.pos-badge-won        { color: var(--yes);    background: var(--yes-bg); }
.pos-badge-lost       { color: var(--no);     background: var(--no-bg); }
.pos-badge-claimable,
.pos-badge-refundable { color: var(--gold);   background: var(--gold-bg); }
.pos-action { margin-top: 6px; }
.pos-handoff {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
  padding: 3px 8px;
  border: 1px solid var(--gold);
  border-radius: 4px;
  transition: background .15s, color .15s;
}
.pos-handoff:hover { background: var(--gold-bg); }

/* ── portfolio-summary ───────────────────────────────────────────── */
.portfolio-summary {
  padding: 16px 0 20px;
  border-bottom: 2px solid var(--hair);
  margin-bottom: 20px;
}
.ps-balance { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.ps-open    { font-size: 13px; color: var(--muted2); }

/* ── portfolio section headers ───────────────────────────────────── */
.pos-section-head {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 16px 0 8px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 4px;
}
.pos-section-head.urgent { color: var(--gold); }

/* ── Telegram position prompt ────────────────────────────────────── */
.telegram-prompt {
  padding: 20px 0 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.telegram-prompt-text { font-size: 14px; color: var(--muted2); }

/* ── demo label ──────────────────────────────────────────────────── */
.demo-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 3px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ── blinded-caveat (portfolio) — uses .callout base ─────────────── */
.blinded-caveat {
  margin-top: 28px;
}

/* ── about-page styles ───────────────────────────────────────────── */
.about-sections { max-width: 680px; }
.about-section { padding: 28px 0; border-top: 1px solid var(--hair); }
.about-section:first-child { border-top: none; padding-top: 12px; }
.about-section p { font-size: 15px; line-height: 1.65; color: var(--muted2); margin: 0 0 10px; }
.about-section p:last-child { margin-bottom: 0; }
.step-list { list-style: none; padding: 0; margin: 12px 0 0; }
.step-list li { display: flex; gap: 14px; margin-bottom: 14px; align-items: flex-start; }
.step-num {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--gold); color: #fff;
  font-family: var(--serif); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.step-text { font-size: 14px; line-height: 1.6; color: var(--ink); }
.step-text b { color: var(--ink); }
.honest-note { font-size: 12px; color: var(--muted); margin-top: 8px; display: block; }
.faq-list { list-style: none; padding: 0; margin: 12px 0 0; }
.faq-item { padding: 16px 0; border-top: 1px solid var(--hair); }
.faq-item:first-child { border-top: none; padding-top: 4px; }
.faq-q { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.faq-a { font-size: 14px; line-height: 1.65; color: var(--muted2); margin: 0; }

/* ── 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; }