/* Right — ad-supported niche hub
   Tokens and components lifted from the design doc (Right Mockups.dc.html). */

:root {
  --paper:   #e8e5dd;
  --card:    #f7f5f0;
  --well:    #faf9f5;
  --ink:     #16150f;
  --ink-2:   #3a382e;
  --ink-3:   #5b584c;
  --mute:    #8a8778;
  --line:    #c9c4b4;
  --green:   #1f8f5f;
  --green-d: #166a46;
  --green-x: #176e49;
  --mint:    #5fd39a;
  --mint-bg: #e9f2ec;
  --red:     #a33a2a;

  --rule:    rgba(0, 0, 0, .12);
  --rule-2:  rgba(0, 0, 0, .07);
  --on-ink:  rgba(247, 245, 240, .72);
  --on-ink-2:rgba(247, 245, 240, .55);

  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --sans: Archivo, system-ui, sans-serif;

  /* No ad unit may sit within this distance of a control surface. */
  --ad-clearance: 40px;

  --page: 1180px;
  --rail: 300px;
  --gutter: 26px;
}

* { box-sizing: border-box; }

/* The `hidden` attribute only sets `display: none` through the user-agent
   stylesheet, so ANY class with its own `display` silently outranks it. That
   bug shipped three times here — `.auth__form`, `.settle-banner` and
   `.compare-tray` are all `display: flex`, so the login page showed both
   forms at once, the compare tray never went away and the settlement banner
   sat there empty. Scripts toggling `el.hidden` were correct; the CSS was
   ignoring them. One rule, stated once, for every element on the site.

   It is `!important` because the components it overrules use `!important`
   themselves in the mobile media queries. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--green); }
a:hover { color: var(--green-d); }

input, button { font: inherit; color: inherit; }

/* ---------- type helpers ---------- */

.eyebrow {
  font: 500 9px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}
.eyebrow--green { color: var(--green); }
.eyebrow--mint  { color: var(--mint); }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.pos { color: var(--green); }
.neg { color: var(--red); }

/* ---------- shell ---------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 58px;
  padding: 0 var(--gutter);
  background: var(--ink);
  color: var(--card);
}
.site-header__brand { display: flex; align-items: baseline; gap: 14px; }
.wordmark {
  font: 800 22px/1 var(--sans);
  letter-spacing: -.02em;
  color: var(--card);
  text-decoration: none;
}
.site-header__section {
  font: 500 9px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(247, 245, 240, .5);
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font: 500 12px/1 var(--sans);
  color: var(--on-ink);
}
.site-nav a { color: var(--on-ink); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--card); }
.site-nav__login {
  padding: 7px 14px;
  border: 1px solid rgba(247, 245, 240, .3);
  color: var(--card) !important;
}
.site-nav__stat { font: 500 11px/1 var(--mono); color: var(--mint); }
.avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(247, 245, 240, .16);
  font: 600 10px/1 var(--mono);
  color: var(--card);
}

.page {
  max-width: var(--page);
  margin: 0 auto;
  background: var(--card);
  border-inline: 1px solid var(--rule);
  min-height: 100vh;
}

/* main column + sticky ad rail */
/* Column gap is the ad clearance, not a visual choice: the rail holds ad
   units and the main column holds control surfaces, so the two columns must
   stay 40px apart horizontally. Same for the filter column. */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail);
  column-gap: var(--ad-clearance);
  row-gap: 30px;
  padding: var(--gutter);
}
.layout--filters {
  grid-template-columns: 210px minmax(0, 1fr) var(--rail);
}
/* The rail.

   Left as the whole column being sticky, and that is a decision rather than
   an oversight — see the README. A sticky element taller than the viewport
   has nowhere to pin, so on pages whose rail stack runs past ~900px this
   scrolls away at 1440x900 instead of holding.

   The obvious fix — make only the 300x600 unit sticky and order it last so it
   cannot overlap the panels above it — was built, measured, and reverted: the
   suite reported `lag=0`, meaning the unit never reached its pin before the
   layout ended. It moved the unit down the page and changed nothing else.
   Making it genuinely stick needs the rail stack to fit the viewport, which
   means dropping a panel or shrinking the unit below the 300x600 the design
   specifies. That is a product decision, not a CSS one. */
.rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: start;
  position: sticky;
  top: 16px;
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 0 var(--gutter);
  padding: 18px 0 26px;
  border-top: 1px solid var(--rule);
  font: 400 12px/1.5 var(--mono);
  color: var(--ink-3);
}

/* ---------- ad wells ---------- */

.ad-well {
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(135deg, #e4e1d7 0 8px, #eeebe3 8px 16px);
  border: 1px dashed rgba(0, 0, 0, .22);
  /* Clearance from any neighbouring control surface. */
  margin-block: var(--ad-clearance);
}
.ad-well__label {
  font: 500 10px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .45);
  text-align: center;
  padding: 0 8px;
}
.ad-well--billboard { width: 970px; max-width: 100%; height: 90px; margin-inline: auto; }
.ad-well--leader    { width: 728px; max-width: 100%; height: 90px; margin-inline: auto; }
.ad-well--banner    { width: 468px; max-width: 100%; height: 60px; margin-inline: auto; }
.ad-well--halfpage  { height: 600px; }
.ad-well--halfpage .ad-well__label { transform: rotate(-90deg); white-space: nowrap; }
.ad-well--mpu       { height: 250px; }
.ad-well--mpu-l     { height: 280px; }

/* The rail wells are flush inside the rail stack; the stack itself is clear
   of controls because it lives in its own column. */
.rail .ad-well { margin-block: 0; }

/* Anchor unit — mobile only, dismissible, returns on the next page load. */
.ad-anchor {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  height: 56px;
  display: none;
  align-items: center;
  justify-content: center;
  background: #e4e1d7;
  border-top: 1px solid rgba(0, 0, 0, .18);
  margin: 0;
}
.ad-anchor .ad-well__label { font-size: 9px; letter-spacing: .12em; }
.ad-anchor__close {
  position: absolute;
  right: 8px;
  width: 28px; height: 28px;
  border: 1px solid rgba(0, 0, 0, .2);
  background: transparent;
  font: 500 12px/1 var(--mono);
  color: rgba(0, 0, 0, .55);
  cursor: pointer;
}

.only-mobile { display: none !important; }

/* ---------- generic surfaces ---------- */

.panel {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .1);
  padding: 20px;
}
.panel--dark { background: var(--ink); color: var(--card); border: 0; }
.panel--dark .eyebrow { color: var(--mint); }

.hero { max-width: 580px; margin-bottom: 28px; }
.hero h1 {
  margin: 0 0 12px;
  font: 700 42px/1.08 var(--sans);
  letter-spacing: -.025em;
  text-wrap: pretty;
}
.hero p { margin: 0; font: 400 15px/1.6 var(--sans); color: var(--ink-3); }

.page-title {
  margin: 0 0 22px;
  font: 700 34px/1.1 var(--sans);
  letter-spacing: -.025em;
}

.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }

.entry-card__kicker { margin-bottom: 12px; }
.entry-card__title {
  font: 600 21px/1.15 var(--sans);
  letter-spacing: -.015em;
  margin-bottom: 8px;
}
.entry-card__body {
  font: 400 13px/1.55 var(--sans);
  color: var(--ink-3);
  margin-bottom: 14px;
}
.panel--dark .entry-card__body { color: rgba(247, 245, 240, .68); }
.entry-card__cta { font: 500 11px/1 var(--mono); }
a.entry-card { display: block; text-decoration: none; color: var(--ink); }
/* Must out-specify a.entry-card, or the dark cards inherit ink-on-ink. */
a.entry-card.panel--dark { color: var(--card); }
a.entry-card:hover { border-color: var(--green); }
a.entry-card.panel--dark:hover { outline: 1px solid var(--green); }

.entry-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.entry-card__reset { font: 500 10px/1 var(--mono); color: var(--on-ink-2); }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  padding: 10px 18px;
  font: 600 12px/1 var(--sans);
  border: 0;
  cursor: pointer;
  text-decoration: none;
}
.btn--primary { background: var(--green); color: #fff; }
.btn--ghost {
  background: transparent;
  border: 1px solid rgba(247, 245, 240, .3);
  color: var(--card);
}
.btn[disabled] { cursor: default; opacity: .55; }

/* ---------- shared game engine ---------- */

.signin-nudge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: var(--ink);
  color: var(--card);
  margin-bottom: 20px;
}
.signin-nudge__text { font: 400 12px/1.5 var(--mono); color: var(--on-ink); }
.signin-nudge__text strong { color: var(--card); font-weight: 600; }
.signin-nudge__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.signin-nudge__dismiss {
  background: none;
  border: 0;
  color: var(--on-ink-2);
  font: 400 18px/1 var(--sans);
  cursor: pointer;
  padding: 4px;
}
.signin-nudge__dismiss:hover { color: var(--card); }

.settle-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: var(--mint-bg);
  border: 1px solid rgba(31, 143, 95, .3);
  margin-bottom: 20px;
  font: 500 11px/1.4 var(--mono);
  color: var(--green-x);
}

.call-card {
  border: 1px solid var(--rule);
  background: #fff;
  padding: 26px;
}
.call-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}
.call-card__symbol {
  font: 600 34px/1 var(--mono);
  letter-spacing: -.02em;
}
.call-card__symbol--sm { font-size: 30px; }
.call-card__sub { font: 400 13px/1.4 var(--sans); color: var(--ink-3); margin-top: 6px; }
.call-card__price { font: 600 26px/1 var(--mono); }
.call-card__sub--warn { color: var(--red); }
.call-card__delta { font: 500 12px/1 var(--mono); margin-top: 7px; }

.spark {
  margin: 22px 0;
  height: 120px;
  position: relative;
  background: var(--well);
  border: 1px solid var(--rule-2);
}
.spark__mid { position: absolute; left: 0; right: 0; top: 52%; border-top: 1px dashed rgba(0, 0, 0, .2); }
.spark__fill { position: absolute; inset: 8px; opacity: .75; }
.spark__label {
  position: absolute; left: 10px; top: 8px;
  font: 500 9px/1 var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--mute);
}

.calls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.calls--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.call-btn {
  padding: 22px;
  text-align: center;
  border: 0;
  cursor: pointer;
  background: var(--ink);
  color: var(--card);
}
.calls--three .call-btn { padding: 20px; }
.call-btn__label { display: block; font: 700 22px/1 var(--sans); letter-spacing: -.02em; }
.calls--three .call-btn__label { font-size: 19px; }
.call-btn__note { display: block; font: 500 10px/1 var(--mono); margin-top: 9px; opacity: .65; }
.call-btn--yes { background: var(--green); color: #fff; }
.call-btn--yes .call-btn__note { opacity: .85; }
.call-btn--neutral {
  background: var(--well);
  color: var(--ink);
  border: 1px solid rgba(0, 0, 0, .18);
}
.call-btn--neutral .call-btn__note { color: var(--mute); opacity: 1; }
.call-btn[aria-pressed="true"] { outline: 3px solid var(--ink); outline-offset: 2px; }
.call-btn[disabled] { cursor: default; filter: grayscale(.55); opacity: .6; }
.call-btn[disabled][aria-pressed="true"] { filter: none; opacity: 1; }

.call-meta {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font: 400 11px/1.4 var(--mono);
  color: var(--mute);
}

/* streak strip */
.streak-row { display: flex; gap: 16px; margin-top: 20px; }
.streak-row > * { flex: 1; }
.streak-cells { display: flex; gap: 4px; flex-wrap: wrap; }
.streak-cell { width: 15px; height: 26px; background: var(--line); }
.streak-cell--hit { background: var(--green); }
.streak-cell--today { background: transparent; border: 1px dashed rgba(0, 0, 0, .3); }
.streak-caption { margin-top: 11px; font: 400 11px/1 var(--mono); color: var(--ink-3); }
.rank { font: 600 26px/1 var(--mono); }
.rank-note { margin-top: 9px; font: 400 11px/1.4 var(--mono); color: var(--ink-3); }

/* ---------- switch comparator ---------- */

.filters__title {
  font: 600 18px/1.1 var(--sans);
  letter-spacing: -.015em;
  margin-bottom: 18px;
}
.filters__stack { display: flex; flex-direction: column; gap: 22px; }
.filters__group .eyebrow { display: block; margin-bottom: 11px; }

.check-list { display: flex; flex-direction: column; gap: 8px; }
.check {
  display: flex; gap: 9px; align-items: center;
  font: 400 13px/1 var(--sans);
  color: var(--ink-2);
  cursor: pointer;
}
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  width: 12px; height: 12px;
  border: 1px solid rgba(0, 0, 0, .35);
  flex: none;
}
.check input:checked + .check__box { border-color: var(--green); background: var(--green); }
.check input:focus-visible + .check__box { outline: 2px solid var(--ink); outline-offset: 2px; }

.range { margin: 16px 0 10px; }
.range input {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 3px; margin: 8px 0;
  background: rgba(0, 0, 0, .14);
  cursor: pointer;
}
.range input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--ink); border: 0; cursor: pointer;
}
.range input::-moz-range-thumb {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--ink); border: 0; cursor: pointer;
}
.range__value { font: 500 11px/1 var(--mono); color: var(--ink-2); }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 7px 9px;
  font: 500 11px/1 var(--mono);
  border: 1px solid rgba(0, 0, 0, .2);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--card); border-color: var(--ink); }

.filters__reset {
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font: 500 11px/1 var(--mono);
  color: var(--green);
  background: none;
  border-inline: 0; border-bottom: 0;
  text-align: left;
  cursor: pointer;
}

.results-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.results-count { font: 600 18px/1.1 var(--sans); letter-spacing: -.015em; }
.results-sort { font: 500 11px/1 var(--mono); color: var(--mute); }

.table { border: 1px solid var(--rule); background: #fff; }
.trow {
  display: grid;
  grid-template-columns: 24px 1.6fr .8fr .6fr .7fr .7fr .6fr;
  gap: 10px;
  padding: 12px 14px;
  align-items: center;
  border-bottom: 1px solid var(--rule-2);
}
.trow:last-child { border-bottom: 0; }
.trow--head {
  padding: 11px 14px;
  background: #f0ede6;
  border-bottom: 1px solid var(--rule);
  font: 500 9px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6b6858;
}
.trow--picked { background: var(--mint-bg); }
.trow__name { font: 500 13px/1.2 var(--sans); }
.trow__cell { font: 400 12px/1 var(--mono); color: var(--ink-2); }
.trow .check__box { cursor: pointer; }
.table__empty { padding: 26px 14px; font: 400 13px/1.5 var(--sans); color: var(--ink-3); }

.compare-tray {
  margin: 24px var(--gutter) 0;
  padding: 16px var(--gutter);
  background: var(--ink);
  color: var(--card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.compare-tray__items { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tray-chip {
  padding: 7px 11px;
  background: rgba(247, 245, 240, .1);
  font: 500 12px/1 var(--sans);
  border: 0;
  color: var(--card);
  cursor: pointer;
}
.read-next { display: flex; flex-direction: column; gap: 9px; font: 400 13px/1.4 var(--sans); }

/* ---------- print cost calculator ---------- */

.calc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; }
.calc-col { display: flex; flex-direction: column; gap: 18px; }
.field .eyebrow { display: block; margin-bottom: 8px; }
.input {
  display: flex;
  border: 1px solid rgba(0, 0, 0, .2);
  background: #fff;
}
.input input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 12px 13px;
  font: 500 16px/1 var(--mono);
  background: transparent;
}
.input input:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.input__prefix, .input__suffix {
  padding: 12px 13px;
  font: 500 12px/1.35 var(--mono);
  color: var(--mute);
  display: flex;
  align-items: center;
}
.input__prefix { padding-right: 0; font-size: 16px; }
.input__prefix + input { padding-left: 4px; }
.input__suffix { border-left: 1px solid var(--rule); }
.input-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }

.result-grid {
  margin-top: 26px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.result { background: var(--ink); color: var(--card); padding: 24px; }
.result .eyebrow { color: var(--mint); margin-bottom: 14px; display: block; }
.result__total {
  font: 600 56px/1 var(--mono);
  letter-spacing: -.03em;
  margin-bottom: 20px;
}
.result__lines {
  display: flex; flex-direction: column; gap: 9px;
  font: 400 12px/1 var(--mono);
  color: var(--on-ink);
}
.result__line { display: flex; justify-content: space-between; gap: 16px; }
.result__actions {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(247, 245, 240, .16);
  display: flex; gap: 10px; flex-wrap: wrap;
}

.share-card { background: #f0ede6; border: 1px solid rgba(0, 0, 0, .14); padding: 22px; }
.share-card__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 18px;
}
.share-card__brand { font: 800 15px/1 var(--sans); letter-spacing: -.02em; }
.share-card__total { font: 600 40px/1 var(--mono); letter-spacing: -.03em; }
.share-card__meta { font: 400 13px/1.4 var(--sans); color: var(--ink-3); margin-top: 8px; }
.share-bar { margin-top: 18px; height: 8px; display: flex; gap: 2px; }
.share-bar span:nth-child(1) { background: var(--green); }
.share-bar span:nth-child(2) { background: var(--ink); }
.share-bar span:nth-child(3) { background: var(--mute); }
.share-bar span:nth-child(4) { background: var(--line); }
.share-legend {
  margin-top: 9px;
  font: 500 9px/1 var(--mono);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--mute);
}

.toast {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translateX(-50%);
  z-index: 60;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--card);
  font: 500 12px/1 var(--mono);
}
.toast[hidden] { display: none; }

/* ---------- crypto desk ---------- */

.desk-top { display: flex; gap: 16px; margin-bottom: 20px; }
.portfolio { flex: 1.3; padding: 22px; background: var(--ink); color: var(--card); }
.portfolio__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.portfolio__value { display: flex; align-items: baseline; gap: 14px; margin: 16px 0 20px; flex-wrap: wrap; }
.portfolio__value strong { font: 600 40px/1 var(--mono); letter-spacing: -.03em; }
.portfolio__chart { height: 88px; position: relative; background: rgba(247, 245, 240, .05); }
.portfolio__chart > div { position: absolute; inset: 6px; background: var(--green); opacity: .85; }
.ledger { flex: 1; }
.ledger__rows {
  display: flex; flex-direction: column; gap: 11px;
  font: 400 12px/1 var(--mono);
  color: var(--ink-2);
}
.ledger__row { display: flex; justify-content: space-between; gap: 12px; }
.ledger__row--total { padding-top: 11px; border-top: 1px solid rgba(0, 0, 0, .1); }
.leaders {
  display: flex; flex-direction: column; gap: 10px;
  font: 400 12px/1 var(--mono);
  color: var(--ink-2);
}
.leaders__row { display: flex; justify-content: space-between; gap: 12px; }
.leaders__row--you { padding-top: 10px; border-top: 1px solid rgba(0, 0, 0, .1); }

/* ---------- sticks ---------- */

.sticks {
  background: var(--card);
  border: 1px solid var(--rule);
  padding: 26px;
  margin-bottom: 4px;
}
.sticks__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.sticks__prompt { font: 700 22px/1.15 var(--sans); letter-spacing: -.02em; }
.sticks__prompt strong { color: var(--green); font-weight: 800; }
.sticks__mode { margin-top: 6px; font: 400 11px/1.4 var(--mono); color: var(--mute); }
.sticks__scores { display: flex; gap: 22px; text-align: right; }
.sticks__score { display: flex; flex-direction: column; gap: 3px; }
.sticks__score-num { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; }
.sticks__score strong { font: 600 22px/1 var(--mono); }
.sticks__score span {
  font: 500 9px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
}

.sticks__board {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 220px;
  padding: 18px;
  background: var(--well);
  border: 1px solid var(--rule-2);
}
.sticks__empty {
  margin: auto;
  font: 400 13px/1.5 var(--mono);
  color: var(--ink-3);
  text-align: center;
}

/* One stick: a full-width hit area with a bar inside it, so the click target
   is the row rather than the drawn length — picking the shortest stick should
   not be the hardest thing to hit. */
.stick {
  display: block;
  width: 100%;
  padding: 3px 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.stick__bar {
  display: block;
  height: 16px;
  background: var(--ink-2);
  border: 1px solid var(--ink);
  transition: background .12s, transform .12s;
}
.stick:hover:not(:disabled) .stick__bar { background: var(--green); transform: translateX(2px); }
.stick:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.stick:disabled { cursor: default; }

/* Face down: every stick identical, full width, numbered. The player is
   choosing odds, not reading a board, so the covers must give away nothing —
   not length, not order, not a hint from the drawing. */
.stick--down .stick__bar {
  width: 100% !important;
  height: 26px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  background: repeating-linear-gradient(135deg, #d8d4c8 0 6px, #e2dfd4 6px 12px);
  border-color: rgba(0, 0, 0, .28);
  font: 500 11px/1 var(--mono);
  color: rgba(0, 0, 0, .45);
}
.stick--down:hover .stick__bar { background: var(--mint-bg); color: var(--green-d); }

/* Turned over. The winning stick is marked whether or not it was picked, so
   the result can be checked by eye instead of taken on trust. */
.stick__bar { transition: width .35s ease, background .12s; }
.stick--answer .stick__bar { background: var(--green); border-color: var(--green-d); }
.stick--won .stick__bar { background: var(--green); border-color: var(--green-d); }
.stick--wrong .stick__bar { background: var(--red); border-color: var(--red); }
.stick--wrong .stick__bar::after,
.stick--answer .stick__bar::after { content: ""; }

.sticks__status {
  min-height: 20px;
  margin-top: 14px;
  font: 500 12px/1.4 var(--mono);
  color: var(--ink-3);
}
.sticks__status--good { color: var(--green); }
.sticks__status--bad { color: var(--red); }

.sticks__controls {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-2);
}
.sticks__dial { flex: 1; }
.sticks__deal { white-space: nowrap; }

.sticks__over {
  margin-top: 18px;
  padding: 16px;
  background: var(--mint-bg);
  font: 400 12px/1.6 var(--mono);
  color: var(--ink-2);
}
.sticks__over strong { display: block; font: 700 14px/1.3 var(--sans); margin-bottom: 4px; }
.sticks__over a { display: inline-block; margin-top: 8px; color: var(--green); }

/* ---------- streak flame ----------
   Shown wherever a streak count is displayed, and only when it is > 0 — a
   flame on a streak of zero would be advertising the thing that just went
   out. Kept to transform/opacity so it never nudges layout or trips the
   ad-clearance geometry check. */
@keyframes flame-flicker {
  0%, 100% { transform: scale(1) rotate(-2deg); opacity: 1; }
  25%      { transform: scale(1.08) rotate(2deg); opacity: .92; }
  50%      { transform: scale(.94) rotate(-3deg); opacity: 1; }
  75%      { transform: scale(1.05) rotate(1deg); opacity: .96; }
}
.flame {
  display: inline-block;
  animation: flame-flicker 1.6s ease-in-out infinite;
  transform-origin: 50% 85%;
}
@media (prefers-reduced-motion: reduce) {
  .flame { animation: none; }
}

/* ---------- the footer wall, and the page made of them ---------- */

.ad-well--wall { height: 250px; margin-inline: var(--gutter); }
.ad-wall__more {
  display: block;
  margin: -26px var(--gutter) 0;
  font: 500 11px/1 var(--mono);
  color: var(--mute);
  text-decoration: none;
}
.ad-wall__more:hover { color: var(--green); text-decoration: underline; }

.wall-intro { padding: 40px var(--gutter) 8px; max-width: 720px; }
.wall-intro p { font: 400 14px/1.6 var(--sans); color: var(--ink-2); }
.wall-intro__note { font: 400 12px/1.6 var(--mono) !important; color: var(--ink-3) !important; }
.wall-counter {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: 20px 0 0;
  padding: 14px 16px;
  background: var(--ink);
  color: var(--on-ink);
  font: 400 11px/1.4 var(--mono);
  position: sticky;
  top: 0;
  z-index: 5;
}
.wall-counter strong { color: var(--mint); font-weight: 600; }

.wall {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--gutter);
}
.wall__unit { width: 100%; margin-block: 20px; }
/* Back to top. Fixed, appears once there is something to go back up from,
   and sits clear of the mobile anchor unit so it never covers the dismiss
   button — the one control a reader must always be able to reach. */
.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 15px;
  background: var(--ink);
  color: var(--card);
  border: 0;
  font: 500 11px/1 var(--mono);
  letter-spacing: .04em;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s, transform .18s;
  pointer-events: none;
}
.to-top--on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--green-d); }
.to-top:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

.wall-end { padding: 30px var(--gutter) 60px; text-align: center; }
.wall-end p { font: 400 12px/1.6 var(--mono); color: var(--ink-3); }
.wall-end a { font: 500 12px/1 var(--mono); color: var(--green); }

/* ---------- buy links ---------- */

.buy {
  font: 500 11px/1 var(--mono);
  color: var(--green);
  text-decoration: none;
  white-space: nowrap;
}
.buy:hover { text-decoration: underline; }
.buy__where {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 10px;
}
.buy-note { margin: 12px 0 0; font: 400 11px/1.5 var(--mono); color: var(--mute); }

/* ---------- long-form ---------- */

.prose { max-width: 68ch; }
.prose h2 {
  margin: 34px 0 10px;
  font: 600 19px/1.25 var(--sans);
  letter-spacing: -.015em;
}
.prose p, .prose li { font: 400 14px/1.7 var(--sans); color: var(--ink-2); }
.prose ul { padding-left: 18px; }
.prose li { margin-bottom: 10px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose__standfirst {
  font: 400 16px/1.6 var(--sans) !important;
  color: var(--ink-3) !important;
  padding-bottom: 6px;
}
.prose__foot {
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-2);
  font: 400 12px/1.6 var(--mono) !important;
  color: var(--ink-3) !important;
}

/* ---------- rechtliche seiten ---------- */

.legal { max-width: 78ch; padding: 40px var(--gutter) 60px; }
.legal h2 {
  margin: 32px 0 10px;
  font: 600 16px/1.25 var(--sans);
  letter-spacing: -.01em;
}
.legal p, .legal li { font: 400 13px/1.7 var(--sans); color: var(--ink-2); }
.legal ul { padding-left: 18px; }
.legal li { margin-bottom: 8px; }
.legal code {
  padding: 1px 5px;
  background: var(--well);
  border: 1px solid var(--rule-2);
  font: 400 12px/1 var(--mono);
}
/* Unübersehbar, und absichtlich hässlich: eine Rechtsseite mit Platzhaltern
   darf nicht so aussehen, als wäre sie fertig. */
.legal__todo {
  margin-bottom: 30px;
  padding: 16px 18px;
  background: #fdf3d7;
  border: 2px solid #b8860b;
  font: 400 12px/1.65 var(--mono);
  color: #4a3a08;
}
.legal__todo strong { display: block; margin-bottom: 6px; font: 700 13px/1.3 var(--sans); }

/* ---------- consent ---------- */

/* A card in the bottom-left corner rather than a full-bleed bar.

   The bar was the giveaway: edge-to-edge dark strip, text left, two equal
   buttons pushed to the far right by `space-between`. That silhouette is on
   every third site and reads as something bolted on rather than part of the
   page. A narrow card sitting in the corner reads as the site talking, keeps
   the whole layout visible behind it, and — the part that matters commercially
   — a 420px column forces the copy to stay short. */
.consent {
  position: fixed;
  inset: auto auto var(--gutter) var(--gutter);
  z-index: 60;                    /* above the anchor unit, which it outranks */
  width: 420px;
  max-width: calc(100vw - var(--gutter) * 2);
  padding: 20px 22px 18px;
  background: var(--ink);
  color: var(--card);
  /* One heavy edge instead of a border on all four sides: the same device the
     legal note and the settle banner use, so it belongs to this site. */
  border-left: 3px solid var(--green);
  box-shadow: 0 6px 0 rgba(0, 0, 0, .14);
}
.consent__text strong { display: block; font: 700 15px/1.25 var(--sans); margin-bottom: 7px; }
.consent__text p { margin: 0 0 10px; font: 400 12px/1.55 var(--mono); color: var(--on-ink); }
.consent__text a { font: 400 11px/1 var(--mono); color: var(--mint); }
/* The buttons share the row below the text and split it evenly, which is the
   equal-prominence floor expressed as layout rather than as a magic width. */
.consent__actions { display: flex; gap: 8px; margin-top: 14px; }

/* Only present when the dialog was reopened from the footer, where it means
   "leave my answer alone". Deliberately quiet: it is not a third option on a
   first visit, because on a first visit it does not exist. */
.consent__keep {
  display: block;
  margin: 12px 0 0;
  padding: 0;
  background: none;
  border: 0;
  font: 400 11px/1 var(--mono);
  color: var(--on-ink-2);
  text-decoration: underline;
  cursor: pointer;
}
.consent__keep:hover { color: var(--card); }

/* Both buttons keep the same box: same min-width, same padding, same font,
   same row, one click each. Refusing must not be the *harder* option, or the
   consent is not freely given.

   Accept additionally gets the site's primary green fill, Reject the ordinary
   outline. That is emphasis, and emphasis is what is left once obstruction is
   off the table. Do not "improve" this further by shrinking Ablehnen, dimming
   its label below the 4.5:1 contrast it has here, moving it to a second
   screen, or replacing it with a link — those are the specific patterns EU
   authorities have fined, and they would also make the stored consent
   worthless as a legal basis, which is the whole point of collecting it. */
.consent__btn {
  /* Equal share of the row, whatever the labels say. "Werbung erlauben" is the
     longer word; sizing to content would quietly make Ablehnen the smaller
     target, which is the floor this must not fall through. */
  flex: 1 1 0;
  min-width: 0;
  padding: 12px 14px;
  background: transparent;
  border: 1px solid rgba(247, 245, 240, .45);
  color: var(--card);
}
/* Generic hover first: the primary rule below shares its specificity and must
   win for the element that carries both classes. */
.consent__btn:hover { background: rgba(247, 245, 240, .12); }
.consent__btn--primary {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.consent__btn--primary:hover { background: var(--green-d); border-color: var(--green-d); }
.consent__btn:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

/* While the banner is up, keep the anchor unit out from under it. The height
   comes from consent.js measuring the rendered card, because it depends on how
   the copy wraps; the fallback covers the moment before that runs. */
body.has-consent-banner .ad-anchor {
  bottom: calc(var(--consent-h, 148px) + var(--gutter) * 2);
}

/* A slot waiting on consent looks the same as one waiting to be scrolled to:
   it holds its space, so answering the banner never reflows the page. */
.ad-well[data-pending] { opacity: .65; }

/* ---------- groups ---------- */

.board-scope {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule-2);
}
.board-scope__code { font: 400 11px/1 var(--mono); color: var(--ink-3); }
.group-code {
  padding: 3px 7px;
  background: var(--ink);
  color: var(--mint);
  font: 600 12px/1 var(--mono);
  letter-spacing: .1em;
}

.group-forms { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.group-form { display: flex; flex-direction: column; gap: 7px; }
.group-form__line { display: flex; gap: 8px; }
.group-form__line .input { flex: 1; }
.group-form__line .btn { white-space: nowrap; }

/* ---------- leaderboard ---------- */

/* The comparator's .trow grid is a seven-column layout for switch specs; the
   standings need their own column counts, so they override just the tracks. */
.trow--lb-sticks { grid-template-columns: 40px 1.6fr .6fr .7fr .8fr .7fr; }
.trow--lb-crypto { grid-template-columns: 40px 1.8fr .9fr 1fr .7fr; }

/* ---------- account ---------- */

.auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 40px;
  padding: 44px var(--gutter) 60px;
  align-items: start;
}
.auth__intro p { font: 400 14px/1.6 var(--sans); color: var(--ink-2); max-width: 52ch; }
.auth__list {
  margin: 20px 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 56ch;
}
.auth__list li {
  padding-left: 16px;
  border-left: 2px solid var(--mint);
  font: 400 13px/1.55 var(--sans);
  color: var(--ink-2);
}
.auth__list strong { color: var(--ink); font-weight: 600; }
.auth__note { font: 400 12px/1.6 var(--mono); color: var(--ink-3); max-width: 60ch; }

.auth__panel { padding: 0; }
.auth__tabs { display: flex; border-bottom: 1px solid var(--rule); }
.auth__tab {
  flex: 1;
  padding: 15px 12px;
  font: 600 12px/1 var(--sans);
  letter-spacing: .01em;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--mute);
  cursor: pointer;
}
.auth__tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--green); }

.auth__form { display: flex; flex-direction: column; gap: 18px; padding: 24px; }
.auth__form .field { display: block; }
.auth__submit { width: 100%; padding: 13px 18px; font-size: 13px; }

.field__hint { margin: 7px 0 0; font: 400 11px/1.5 var(--mono); color: var(--mute); }
.field__error {
  margin: 7px 0 0;
  font: 500 11px/1.5 var(--mono);
  color: var(--red);
}
.input:focus-within { border-color: var(--green); }

.auth__offline {
  margin: 0;
  padding: 14px 24px;
  background: var(--mint-bg);
  border-bottom: 1px solid var(--rule-2);
  font: 400 12px/1.6 var(--mono);
  color: var(--ink-2);
}
.auth__offline code { font-weight: 600; }

.auth__done { padding: 26px 24px; }
.auth__done-title { font: 700 20px/1.2 var(--sans); letter-spacing: -.015em; }
.auth__done p { font: 400 13px/1.6 var(--sans); color: var(--ink-2); }
.auth__done-links { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.auth__done-links a {
  font: 500 12px/1 var(--mono);
  color: var(--green);
  text-decoration: none;
}
.auth__done-links a:hover { text-decoration: underline; }

/* ---------- saved work (quotes, favourites) ---------- */

.saved { display: flex; flex-direction: column; gap: 10px; }
.saved__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-2);
  font: 400 12px/1.4 var(--mono);
  color: var(--ink-2);
}
.saved__row:last-child { border-bottom: 0; padding-bottom: 0; }
.saved__name {
  background: none;
  border: 0;
  padding: 0;
  font: 500 12px/1.4 var(--mono);
  color: var(--green);
  cursor: pointer;
  text-align: left;
}
.saved__name:hover { text-decoration: underline; }
.saved__drop {
  background: none;
  border: 0;
  padding: 0 0 0 10px;
  font: 400 14px/1 var(--mono);
  color: var(--mute);
  cursor: pointer;
}
.saved__empty { font: 400 12px/1.6 var(--mono); color: var(--ink-3); margin: 0; }

/* The favourite toggle sits inside a comparator row. It is a star, not a
   .btn, so it does not enter the ad-clearance control set for a control the
   reader cannot mis-hit. */
.fav {
  background: none;
  border: 0;
  padding: 0 2px;
  font: 400 14px/1 var(--mono);
  color: var(--line);
  cursor: pointer;
}
.fav[aria-pressed="true"] { color: var(--green); }

/* ---------- responsive (1f) ---------- */

@media (max-width: 1100px) {
  :root { --rail: 0px; }
  .layout, .layout--filters { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .rail { display: none; }
  .only-mobile { display: block !important; }
  .ad-well.only-mobile { display: flex !important; }
  .hide-mobile { display: none !important; }
  .ad-anchor.only-mobile { display: flex !important; }
  .ad-anchor[hidden] { display: none !important; }
  .page { border-inline: 0; }
  .auth { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  /* Anchor height plus the clearance, so the last control can never sit
     within 40px of the anchor unit. */
  body { padding-bottom: calc(56px + var(--ad-clearance)); }
  body.anchor-dismissed { padding-bottom: 0; }
}

@media (max-width: 760px) {
  :root { --gutter: 16px; --ad-clearance: 40px; }
  .site-header { height: 50px; padding: 0 16px; }
  .site-header__section { display: none; }
  .site-nav { gap: 14px; font-size: 11px; }
  .site-nav a:not(.site-nav__login):not(.site-nav__stat) { display: none; }
  .wordmark { font-size: 18px; }
  .hero h1 { font-size: 30px; }
  .page-title { font-size: 26px; }
  .grid-2, .calc-grid, .result-grid, .desk-top, .streak-row, .input-pair {
    grid-template-columns: 1fr;
    display: grid;
    gap: 16px;
  }
  .call-card { padding: 18px; }
  .call-card__symbol { font-size: 28px; }
  .spark { height: 70px; }
  .calls--three { grid-template-columns: 1fr; }
  .result__total { font-size: 42px; }
  .trow { grid-template-columns: 20px 1.4fr .7fr .6fr; }
  .trow > :nth-child(n + 5) { display: none; }
  .compare-tray { margin-inline: 0; }
  .sticks { padding: 16px; }
  .sticks__head { flex-direction: column; gap: 14px; }
  .sticks__scores { text-align: left; }
  .sticks__controls { flex-direction: column; align-items: stretch; gap: 14px; }
  .sticks__deal { width: 100%; }
  .ad-well--wall { height: 250px; margin-inline: 0; }
  .ad-wall__more { margin-inline: 0; }
  .wall-counter { gap: 12px; font-size: 10px; }
}