/* =========================================================================
   Bloxpoll design system

   Two typefaces, one accent, no gradients. Rubik carries everything a person
   reads, headings included - its softened corners keep a dense board of numbers
   from reading as a spreadsheet. Oswald is reserved for figures: condensed, so
   a five-digit value takes the width of a four-digit one, and uniform enough in
   the digits that a column still lines up. The contrast between the two is
   wide on purpose, which is what lets a number read as a number without a
   second colour spent saying so. Surfaces are
   flat neutral greys separated by hairlines rather than by shadow, corners
   are tight, and nothing moves on hover except colour. The only saturated
   pixels on the page mean something: green is up, red is down, amber is the
   published list, indigo is a thing you can press.
   ========================================================================= */

/* Self-hosted, latin subset, ~52KB for both, variable across the whole weight
   range the interface uses. No third-party font request: the page renders on
   its own bytes or not at all. */
@font-face {
  font-family: "Rubik";
  src: url("/fonts/rubik-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  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: "Oswald";
  src: url("/fonts/oswald-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  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;
}

/* The page is a cool near-white. It was a true #FFF for a while and read as
   glare across a large screen - a full sheet of maximum-brightness pixels with
   nothing for the eye to rest on. The ground has come down a few points so that
   surfaces now sit above it rather than dissolving into it, which the hairlines
   and the one soft card shadow were previously doing all the work of implying.
   Anything floating over the page keeps the pure white, because something
   covering the sheet should read as lifted off it. Dark is still one button
   away and keeps the near-black palette the first draft was built in. */
:root {
  color-scheme: light;

  --bg: #F4F5F8;
  --surface: #FCFCFD;
  --surface-2: #EFF1F5;
  --surface-3: #E4E7ED;
  --raise: #FFFFFF;

  --ink: #0F1115;
  --ink-2: #474D57;
  --ink-3: #6C727F;

  --line: #E7E9EE;
  --line-2: #D3D7DF;

  --accent: #4F46E5;
  --accent-2: #6366F1;
  --accent-ink: #FFFFFF;
  --accent-soft: rgba(79, 70, 229, .07);
  --accent-fill: rgba(79, 70, 229, .13);
  --accent-glow: rgba(79, 70, 229, .24);

  --editorial: #A16207;
  --editorial-soft: rgba(161, 98, 7, .10);

  --up: #0E8A5E;
  --up-2: #0A7049;
  --up-soft: rgba(14, 138, 94, .09);
  --up-fill: rgba(14, 138, 94, .15);

  --down: #CC3A30;
  --down-2: #AD2D25;
  --down-soft: rgba(204, 58, 48, .08);
  --down-fill: rgba(204, 58, 48, .14);

  /* The neutral side is deliberately the one colour on the page that is not a
     colour. Green means up and red means down; "unchanged" earns neither, and
     saying so in grey is the honest version of saying so at all. */
  --flat: #5B6270;
  --flat-soft: rgba(91, 98, 112, .09);
  --flat-fill: rgba(91, 98, 112, .17);

  /* On white, a card needs a shadow to be an object. These are the whole
     elevation scale: a resting hairline shadow, a hover, and a floating one
     for anything that covers the page. */
  --shadow-1: 0 1px 2px rgba(15, 17, 21, .05), 0 1px 1px rgba(15, 17, 21, .03);
  --shadow-2: 0 10px 26px -14px rgba(15, 17, 21, .26), 0 2px 6px -2px rgba(15, 17, 21, .06);
  --shadow-3: 0 26px 56px -22px rgba(15, 17, 21, .30), 0 5px 14px -5px rgba(15, 17, 21, .08);
  --lift: 0 4px 12px -6px rgba(15, 17, 21, .18), 0 1px 2px rgba(15, 17, 21, .04);
  --scrim: rgba(15, 17, 21, .38);

  --surface-hover: #FFFFFF;

  --chip-l: 33%; --chip-s: 56%;
  --glyph-mix: 13%;

  --font: "Rubik", ui-sans-serif, system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: "Oswald", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Roboto Mono", monospace;

  --r-sm: 6px; --r-md: 9px; --r-lg: 12px; --r-xl: 16px;
  --shell: 1420px;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0B0C0E;
  --surface: #131418;
  --surface-2: #191B1F;
  --surface-3: #24262C;
  --raise: #191B1F;

  --ink: #F4F3F0;
  --ink-2: #A6A8AE;
  --ink-3: #85878E;

  --line: #212329;
  --line-2: #2F323A;

  --accent: #7C86F5;
  --accent-2: #99A1FF;
  --accent-ink: #0B0C0E;
  --accent-soft: rgba(124, 134, 245, .13);
  --accent-fill: rgba(124, 134, 245, .20);
  --accent-glow: rgba(124, 134, 245, .32);

  --editorial: #E8B247;
  --editorial-soft: rgba(232, 178, 71, .13);

  --up: #3ECF8E;
  --up-2: #2FB87B;
  --up-soft: rgba(62, 207, 142, .12);
  --up-fill: rgba(62, 207, 142, .20);

  --down: #F2685F;
  --down-2: #DC5449;
  --down-soft: rgba(242, 104, 95, .12);
  --down-fill: rgba(242, 104, 95, .19);
  --flat: #98A0B0;
  --flat-soft: rgba(152, 160, 176, .12);
  --flat-fill: rgba(152, 160, 176, .22);

  /* Dark separates by hairline, not by shadow: on a near-black ground a drop
     shadow reads as dirt. Only the floating layers get one. */
  --shadow-1: none;
  --shadow-2: 0 12px 32px -18px rgba(0, 0, 0, .9);
  --shadow-3: 0 24px 56px -26px rgba(0, 0, 0, .95);
  --lift: none;
  --scrim: rgba(6, 7, 9, .62);

  --surface-hover: #191B1F;

  --chip-l: 74%; --chip-s: 58%;
  --glyph-mix: 15%;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* One family for everything a person reads, a second one reserved entirely
   for figures. That is the only typographic contrast in the interface: prose
   versus data. Headings are the body face held tight and dark, not a third
   voice, and the wordmark is the one place the figure face speaks as type. */
h1, h2, h3, h4, .mtitle h1, .question {
  font-family: var(--font); font-weight: 600; letter-spacing: -.025em;
}
.brand b { font-family: var(--font-num); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
::selection { background: var(--accent-fill); color: var(--ink); }

/* The scrollbar is part of the page, so it gets the page's palette. */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border: 3px solid var(--bg); border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
*::-webkit-scrollbar-track { background: transparent; }

.n { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.lab { font-size: 10px; font-weight: 600; letter-spacing: .085em; text-transform: uppercase; color: var(--ink-3); }
.wrap { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 clamp(14px, 2.4vw, 40px); }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--ink-3); }

/* ---------- app bar ---------- */
.bar {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.bar .wrap { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 23px); height: 67px; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; cursor: pointer; }
/* The mark. Two arches, a flat base and a pair of eyes that look at each other
   - drawn rather than loaded, so it is one path in the HTML instead of a
   request, and it stays sharp at any size the header is asked to be. No keyline
   around it: the original was a sticker photographed on black and needed an
   edge to sit against it, and on a page that supplies its own ground the edge
   was either invisible or a white fringe around a pink shape. */
.logo { width: 40px; height: 31px; flex: none; display: block; }
.logo svg { width: 100%; height: 100%; display: block; }
.brand b { font-size: 23px; font-weight: 600; letter-spacing: -.035em; }
.brand svg { transition: transform .16s; }
.brand:hover svg { transform: translateY(-1px) rotate(-3deg); }

/* Text-only navigation, no chrome around it: the only thing marking the
   current section is white ink and a hairline under the word. */
.nav { display: flex; align-items: center; gap: clamp(5px, .9vw, 16px); flex: none; }
.nav::before {
  content: ""; width: 1px; height: 23px; background: var(--line-2); margin-right: 5px; flex: none;
}
.nav button {
  position: relative; border: 0; background: none; color: var(--ink-3); font-size: 15.5px; font-weight: 500;
  padding: 21px 2px; cursor: pointer; white-space: nowrap; transition: color .14s;
}
.nav button:hover { color: var(--ink); }
.nav button[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav button[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ink);
}

.barright { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
.wallet {
  display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 5px 6px 5px 10px; color: var(--ink-3);
  font-size: 10.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
}
/* The balance used to be prefixed with the word REP. A token mark says the
   same thing faster and leaves the number as the only text in the badge; the
   label survives for screen readers in the adjacent .sr span. */
.wallet .coin { display: grid; place-items: center; width: 17px; height: 17px; flex: none; color: var(--accent); }
.wallet .coin svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.wallet b {
  font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 16px;
  font-weight: 650; letter-spacing: -.01em; color: var(--ink); text-transform: none;
}
.wallet .av {
  width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center;
  font-size: 10px; font-weight: 700; color: var(--accent); letter-spacing: -.02em;
  background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-glow);
}
.themer {
  width: 37px; height: 37px; border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-3); cursor: pointer; display: grid; place-items: center;
  transition: color .12s, border-color .12s;
}
.themer:hover { color: var(--ink); border-color: var(--line-2); }
.themer svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* ---------- search ---------- */
/* The search control opens the palette rather than holding a caret of its own:
   one field that could only find items has become a dialog that finds items,
   people and pages, so what is left in the header is the door to it. It is
   styled as the input it replaced because that is what a reader expects to
   click on, and losing that affordance to gain a dialog would be a bad trade. */
.search {
  position: relative; flex: 1 1 auto; max-width: 460px; min-width: 110px;
  display: flex; align-items: center; gap: 9px;
  height: 39px; padding: 0 14px 0 36px;
  font: inherit; font-size: 14.5px; text-align: left; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--ink-3); transition: border-color .13s, background .13s, color .13s;
}
.search > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search:hover { border-color: var(--line-2); background: var(--surface); color: var(--ink-2); }
.search:focus-visible { border-color: var(--accent); background: var(--surface); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.search > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; stroke: var(--ink-3); fill: none; stroke-width: 2; pointer-events: none; }

/* ---------- game switcher ---------- */
.games { border-bottom: 1px solid var(--line); background: var(--bg); }
.games .wrap { display: flex; gap: 4px; overflow-x: auto; padding-top: 8px; padding-bottom: 8px; scrollbar-width: none; }
.games .wrap::-webkit-scrollbar { display: none; }
.gtab {
  display: flex; align-items: center; gap: 8px; flex: none; cursor: pointer;
  border: 1px solid transparent; background: none; border-radius: var(--r-md);
  padding: 5px 11px 5px 6px; font-size: 13px; font-weight: 550; color: var(--ink-3);
  transition: color .12s, background .12s, border-color .12s;
}
.gtab:hover { color: var(--ink); background: var(--surface-2); }
/* The selected game is an inverted pill, the loudest single control in the
   chrome, because everything below it is scoped to that game. */
.gtab[aria-pressed="true"] { color: var(--bg); background: var(--ink); border-color: var(--ink); font-weight: 600; }
.gtab[aria-pressed="true"] .cnt { color: color-mix(in srgb, var(--bg) 62%, transparent); }
.gtab[aria-pressed="true"] .feedchip.live { background: color-mix(in srgb, var(--up) 26%, transparent); color: var(--up-2); }
.gtab[aria-pressed="true"] .feedchip.seed { background: color-mix(in srgb, var(--bg) 12%, transparent); color: color-mix(in srgb, var(--bg) 60%, transparent); }
.gdot { width: 22px; height: 22px; border-radius: 6px; flex: none; overflow: hidden; display: block; background: color-mix(in srgb, hsl(var(--h) 60% 50%) 22%, var(--surface-2)); box-shadow: inset 0 0 0 1px var(--line-2); }
.gdot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gdot.has-art { background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.gtab .cnt { font-family: var(--font-num); font-size: 11px; color: var(--ink-3); font-weight: 600; }
.feedchip {
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 4px; white-space: nowrap;
}
.feedchip.live { background: var(--up-soft); color: var(--up); }
.feedchip.seed { background: var(--surface-3); color: var(--ink-3); }

/* ---------- trust rail ----------
   The provenance numbers are background evidence, not a headline: a hairline
   strip at the foot of the page, dimmed until the reader hovers or tabs into
   it. Anyone who came to check the accuracy score can still read every word. */
.rail {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 1px; background: var(--line);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin: 28px 0 10px; opacity: .82; transition: opacity .18s ease;
}
.rail:hover, .rail:focus-within { opacity: 1; }
.stat { background: var(--surface); padding: clamp(14px, 1.1vw, 20px) clamp(16px, 1.5vw, 26px); display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.stat .big {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 28px; line-height: 1; letter-spacing: -.03em; font-weight: 600;
}
.stat .sub { font-size: 12px; color: var(--ink-3); }
.stat .sub + .sub { margin-top: 3px; }
.stat .sub.warn { color: var(--editorial); }
.stat.hero { background: var(--surface); }
.stat.hero .big { font-size: 38px; }
.verdict { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 620; color: var(--up); }
.verdict.bad { color: var(--down); }
.verdict.none { color: var(--ink-3); font-weight: 550; }

/* Inside the rail the same cells shrink to a label + number on one line, with
   the explanatory lines wrapping underneath at footnote size. */
.rail .stat {
  background: var(--bg); padding: 7px clamp(9px, .9vw, 15px);
  flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 7px;
}
.rail .lab { font-size: 9px; letter-spacing: .09em; }
.rail .stat .big { font-size: 15px; line-height: 1.2; letter-spacing: -.015em; font-weight: 600; }
.rail .stat.hero .big { font-size: 16px; }
.rail .stat .sub, .rail .verdict { flex: 0 0 100%; font-size: 10.5px; line-height: 1.4; }
.rail .stat .sub + .sub { margin-top: 0; }
.rail .verdict { font-weight: 600; gap: 4px; }
.bars { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.brow { display: grid; grid-template-columns: 62px 1fr 46px; align-items: center; gap: 9px; font-size: 11.5px; color: var(--ink-2); }
.meter { height: 5px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 999px; transition: width .5s cubic-bezier(.2, .7, .3, 1); }
.brow .bv { font-family: var(--font-num); text-align: right; font-size: 11.5px; }

/* ---------- panels ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.ph { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.ph h2 { margin: 0; font-size: 14.5px; font-weight: 600; letter-spacing: -.02em; }
.ph .note { font-size: 12px; color: var(--ink-3); }

/* ---------- item glyph ---------- */
/* The item chip is a flat tint of the item's rarity hue with the monogram
   set in the same hue, not a gradient swatch with white type on it. */
.glyph {
  width: 46px; height: 46px; border-radius: var(--r-md); flex: none; display: grid; place-items: center;
  font-family: var(--font-num); font-size: 13px; font-weight: 600; letter-spacing: -.02em;
  overflow: hidden; position: relative;
  color: hsl(var(--h) var(--chip-s) var(--chip-l));
  background: color-mix(in srgb, hsl(var(--h) 60% 50%) var(--glyph-mix), var(--surface-2));
  box-shadow: inset 0 0 0 1px var(--line);
}
.glyph img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 4px; }
.glyph.has-art { background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2); }
/* A date market has no art, so the deadline itself fills the square: the day
   where the monogram goes, the month under it. */
.glyph.date { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1; }
.glyph.date b { font-family: var(--font-num); font-size: 17px; font-weight: 620; letter-spacing: -.04em; }
.glyph.date i { font-style: normal; font-size: 8px; font-weight: 700; letter-spacing: .1em; opacity: .78; }

/* ---------- market header ---------- */
.market { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 24vw, 420px); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 24px; box-shadow: var(--shadow-1); }
.mleft { background: var(--surface); min-width: 0; display: flex; flex-direction: column; }
.mright { background: var(--surface-2); display: flex; flex-direction: column; }

.mhead { display: flex; align-items: flex-start; gap: 16px; padding: clamp(16px, 1.5vw, 26px); flex-wrap: wrap; }
.mtitle { min-width: 0; flex: 1 1 220px; }
.mtitle h1 { margin: 0; font-size: 23px; font-weight: 600; letter-spacing: -.03em; line-height: 1.12; }
.mtitle .meta { margin-top: 7px; font-size: 12.5px; color: var(--ink-3); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mprice { margin-left: auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.mprice .v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 46px; font-weight: 600; line-height: .95; letter-spacing: -.035em; }
.mprice .cap { font-size: 11px; font-weight: 620; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.mprice .band { font-family: var(--font-num); font-size: 12px; color: var(--ink-3); }

.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 650; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pill i { font-style: normal; font-size: 9px; }
.pill.up { background: var(--up-soft); color: var(--up); }
.pill.down { background: var(--down-soft); color: var(--down); }
.pill.flat { background: var(--surface-3); color: var(--ink-3); }

.tag {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 680; letter-spacing: .05em;
  text-transform: uppercase; padding: 2.5px 7px; border-radius: 5px; border: 1px solid var(--line-2);
  color: var(--ink-3); white-space: nowrap; cursor: help;
}
.tag.contested { border-color: transparent; background: var(--accent-soft); color: var(--accent); }
.tag.drifting { border-color: transparent; background: var(--editorial-soft); color: var(--editorial); }
.tag.volatile { border-color: transparent; background: var(--down-soft); color: var(--down); }
.tag.steady { border-color: transparent; background: var(--surface-3); color: var(--ink-3); }
.tag.settled { border-color: transparent; background: var(--surface-3); color: var(--ink-2); }
.tag.ok { border-color: transparent; background: var(--up-soft); color: var(--up); }
.tag.warn { border-color: transparent; background: var(--down-soft); color: var(--down); }

/* The forecast window. It is structural rather than directional, so it stays
   quiet - except on the short markets, which are the ones worth acting on today
   and read as the live half of the board. */
.tag.win { font-family: var(--font-num); letter-spacing: .02em; color: var(--ink-2); }
.tag.win.w3 { border-color: transparent; background: var(--accent-soft); color: var(--accent); }

/* Off the board. Deliberately the quietest chip in the set: it marks the
   absence of a market, and an absence should not shout. */
.tag.watch { border-style: dashed; color: var(--ink-3); }

.reads { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.read { background: var(--surface); padding: 12px clamp(16px, 1.5vw, 26px); display: flex; flex-direction: column; gap: 3px; }
.read .v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 16.5px; font-weight: 650; letter-spacing: -.02em; }
.read .v small { font-size: 11px; font-weight: 550; color: var(--ink-3); letter-spacing: 0; }

/* ---------- chart ---------- */
.chartwrap { padding: 18px clamp(16px, 1.5vw, 26px) 14px; }
.ctrls { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.legend { display: flex; gap: 15px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 14px; height: 3px; border-radius: 2px; flex: none; }
.sw.band { height: 10px; border-radius: 3px; background: var(--accent-fill); box-shadow: inset 0 0 0 1px var(--accent-soft); }

.seg { display: inline-flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 2px; }
.seg button {
  border: 0; background: transparent; color: var(--ink-3); font-size: 12px; font-weight: 650;
  padding: 4px 11px; border-radius: var(--r-sm); cursor: pointer; transition: background .12s, color .12s;
}
.seg button:hover:not(:disabled) { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); font-weight: 700; }
.seg button:disabled { opacity: .35; cursor: not-allowed; }

.chartbox { position: relative; }
.chartbox svg { display: block; width: 100%; height: clamp(268px, 34vh, 380px); touch-action: none; }
.chartbox text { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.tip {
  position: absolute; pointer-events: none; opacity: 0; transition: opacity .12s ease; z-index: 5;
  background: var(--raise); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--shadow-2);
  padding: 9px 11px; font-size: 12px; min-width: 190px;
}
.tip .d { font-size: 10px; font-weight: 680; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.tip .r { display: flex; align-items: center; justify-content: space-between; gap: 16px; line-height: 1.75; color: var(--ink-2); }
.tip .r b { color: var(--ink); font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 650; }
.tip .r i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 7px; vertical-align: -1px; }
.chartnote { font-size: 11.5px; color: var(--ink-3); margin-top: 8px; line-height: 1.5; }

/* ---------- why Bloxpoll ---------- */
.why { border-top: 1px solid var(--line); }
.whytoggle {
  width: 100%; border: 0; background: none; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 13px clamp(16px, 1.5vw, 26px); cursor: pointer; text-align: left; color: var(--ink);
  font-size: 13.5px; font-weight: 620; transition: background .12s;
}
.whytoggle:hover { background: var(--surface-2); }
.whytoggle .chev { width: 14px; height: 14px; stroke: var(--ink-3); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s cubic-bezier(.3, .7, .3, 1); }
.whytoggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.whybody { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s cubic-bezier(.3, .7, .3, 1); }
.whybody.open { grid-template-rows: 1fr; }
.whybody > div { overflow: hidden; }
.whyinner { padding: 2px clamp(16px, 1.5vw, 26px) 18px; }
.frow2 { display: grid; grid-template-columns: minmax(0, 1fr) 96px 62px; align-items: center; gap: 12px; padding: 7px 0; font-size: 13px; border-bottom: 1px solid var(--line); }
.frow2:last-of-type { border-bottom: 0; }
.frow2 .fl { color: var(--ink-2); display: flex; align-items: center; gap: 7px; min-width: 0; }
.frow2 .fbar { height: 6px; background: var(--surface-3); border-radius: 999px; position: relative; overflow: hidden; }
.frow2 .fbar i { position: absolute; top: 0; bottom: 0; border-radius: 999px; transition: width .4s, left .4s; }
.frow2 .fv { font-family: var(--font-num); font-variant-numeric: tabular-nums; text-align: right; font-weight: 650; font-size: 12.5px; }
.frow2 .fv.pos { color: var(--up); }
.frow2 .fv.neg { color: var(--down); }
.derived { font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 3px; padding: 0 3px; flex: none; }
.whyfoot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); line-height: 1.55; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 2px; padding: 0 clamp(16px, 1.5vw, 26px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.tabs button {
  border: 0; background: none; color: var(--ink-3); font-size: 12.5px; font-weight: 650; letter-spacing: .03em;
  text-transform: uppercase; padding: 11px 12px; cursor: pointer; position: relative; transition: color .12s;
}
.tabs button:hover { color: var(--ink-2); }
.tabs button[aria-selected="true"] { color: var(--ink); }
.tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px 2px 0 0; }
.tabpane { padding: 18px clamp(16px, 1.5vw, 26px) 22px; }

.actgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; margin-bottom: 16px; }
.actcell { background: var(--surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.actcell .v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 650; letter-spacing: -.025em; }

.feed { display: flex; flex-direction: column; }
.frowa { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: 11px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.frowa:last-child { border-bottom: 0; }
.frowa .av2 { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 700; }
.frowa .who { min-width: 0; display: flex; align-items: center; gap: 7px; }
.frowa .who b { font-weight: 570; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frowa .dir { font-weight: 680; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.frowa .dir.up { color: var(--up); }
.frowa .dir.down { color: var(--down); }
.frowa .when { font-family: var(--font-num); font-size: 11.5px; color: var(--ink-3); text-align: right; min-width: 56px; }
.demo { font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-3); border-radius: 3px; padding: 1px 4px; flex: none; }

.rules { display: flex; flex-direction: column; gap: 14px; }
.rule { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: start; font-size: 13px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.rule:last-child { border-bottom: 0; padding-bottom: 0; }
.rule dt { color: var(--ink-3); font-size: 11px; font-weight: 680; letter-spacing: .09em; text-transform: uppercase; padding-top: 2px; }
.rule dd { margin: 0; color: var(--ink-2); line-height: 1.6; }
.rule dd b { color: var(--ink); font-weight: 620; }
.rule dd .n { color: var(--ink); font-weight: 650; }

/* =========================================================================
   THE FORECAST PANEL - the loudest object on the page
   ========================================================================= */
.fc { padding: clamp(16px, 1.4vw, 24px); display: flex; flex-direction: column; gap: 15px; flex: 1; }
.fc h2 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.question { margin: 0; font-size: 16.5px; font-weight: 600; letter-spacing: -.025em; line-height: 1.3; color: var(--ink); text-wrap: balance; }

.benchmark {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 13px 15px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.benchmark .lab { margin-bottom: 3px; }
.benchmark .v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 28px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.benchmark .rel { font-size: 12px; font-weight: 620; text-align: right; }
.locked { font-size: 10.5px; color: var(--ink-3); display: flex; align-items: center; gap: 4px; margin-top: 5px; }
.locked svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; }

/* --- UP / DOWN --- */
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Three columns on a panel this narrow means the middle one has to earn its
   place at a smaller size rather than by stealing width from the other two. */
.sides.three { grid-template-columns: 1fr .84fr 1fr; gap: 7px; }
.sides.three .side { padding-left: 8px; padding-right: 8px; }
.sides.three .side .word { font-size: 13.5px; }
.sides.three .side .against { font-size: 10.5px; }
.side {
  position: relative; border: 2px solid var(--line); background: var(--surface); border-radius: var(--r-md);
  padding: 15px 10px 13px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px;
  transition: border-color .16s cubic-bezier(.3,.7,.3,1), background .16s, transform .12s, box-shadow .16s, opacity .16s;
  overflow: hidden;
}
.side .arrow {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  background: var(--surface-3); color: var(--ink-3); transition: background .16s, color .16s, transform .16s;
}
.side .arrow svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.side .word { font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--ink-2); transition: color .16s; }
.side .against { font-family: var(--font-num); font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; transition: color .16s; }

.side:hover { border-color: var(--line-2); }
.side.up:hover { border-color: color-mix(in srgb, var(--up) 45%, var(--line)); }
.side.down:hover { border-color: color-mix(in srgb, var(--down) 45%, var(--line)); }
.side.stable:hover { border-color: color-mix(in srgb, var(--flat) 45%, var(--line)); }


.side.up[aria-pressed="true"] { border-color: var(--up); background: var(--up-soft); box-shadow: 0 0 0 3px var(--up-soft), var(--shadow-2); }
.side.down[aria-pressed="true"] { border-color: var(--down); background: var(--down-soft); box-shadow: 0 0 0 3px var(--down-soft), var(--shadow-2); }
.side.stable[aria-pressed="true"] { border-color: var(--flat); background: var(--flat-soft); box-shadow: 0 0 0 3px var(--flat-soft), var(--shadow-2); }
.side.stable[aria-pressed="true"] .arrow { background: var(--flat); color: #fff; }
.side.stable[aria-pressed="true"] .word { color: var(--flat); }
.side.stable[aria-pressed="true"]::after { color: var(--flat); }
.side.up[aria-pressed="true"] .arrow { background: var(--up); color: #fff; }
.side.down[aria-pressed="true"] .arrow { background: var(--down); color: #fff; }
.side.up[aria-pressed="true"] .word { color: var(--up); }
.side.down[aria-pressed="true"] .word { color: var(--down); }
.side[aria-pressed="true"] .against { color: var(--ink-2); font-weight: 600; }

/* Chance on the left, payout on the right, on one line under the side's name.
   The pair is the decision: they always move opposite ways, so reading one
   without the other is reading half of it. */
.sodds { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-top: 5px; font-family: var(--font-num); }
.sodds .sp { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sodds .sw { font-size: 12.5px; font-weight: 650; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.side[aria-pressed="true"] .sodds .sw { color: currentColor; }
.sides.three .side .sodds .sp { font-size: 10px; }
.sides.three .side .sodds .sw { font-size: 11.5px; }
.side[aria-pressed="true"]::after {
  content: ""; position: absolute; top: 7px; right: 7px; width: 15px; height: 15px; border-radius: 50%;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='black'/><path d='M7 12.5l3.2 3.2L17 9' stroke='white' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='black'/><path d='M7 12.5l3.2 3.2L17 9' stroke='white' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  animation: pop .16s ease-out;
}
.side.up[aria-pressed="true"]::after { color: var(--up); }
.side.down[aria-pressed="true"]::after { color: var(--down); }
@keyframes pop { from { opacity: 0; } to { opacity: 1; } }

.sides[data-picked] .side[aria-pressed="false"] { opacity: .44; }

/* The press.
   A side button rebuilds the whole panel when it is clicked, which used to
   throw away the only feedback that the click had landed - the new node simply
   appeared, already selected, with nothing to say it had just happened. The
   rebuilt button replays this instead: a quick squash into the press, a lift
   out of it, and a ring that expands and fades the way a physical key would
   sound if you could see it. */
@keyframes sidepop {
  0%   { transform: scale(.94); }
  45%  { transform: scale(1.035); }
  100% { transform: scale(1); }
}
@keyframes sidering {
  0%   { opacity: .55; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.13); }
}
.side.pressed { animation: sidepop .34s cubic-bezier(.22, 1.2, .36, 1) both; }
.side.pressed::before {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
  border: 2px solid currentColor; animation: sidering .42s ease-out both;
}
.side.up.pressed::before { color: var(--up); }
.side.down.pressed::before { color: var(--down); }
.side.stable.pressed::before { color: var(--flat); }
.sides[data-picked] .side[aria-pressed="false"]:hover { opacity: .75; }

/* --- confidence --- */

/* --- stake --- */
.stakebox { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 13px; }
.stepper { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; align-items: center; gap: 8px; }
.stepper button {
  width: 34px; height: 34px; border: 1px solid var(--line-2); background: var(--surface-2); border-radius: var(--r-sm);
  color: var(--ink-2); font-size: 17px; font-weight: 600; cursor: pointer; display: grid; place-items: center;
  transition: border-color .12s, color .12s, background .12s;
}
.stepper button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.stepper button:disabled { opacity: .4; cursor: not-allowed; }
.stepper .amt { text-align: center; }
.stepper .amt input {
  width: 100%; border: 0; background: none; text-align: center; font-family: var(--font-num);
  font-variant-numeric: tabular-nums; font-size: 25px; font-weight: 600; letter-spacing: -.025em; color: var(--ink);
  padding: 0; -moz-appearance: textfield;
}
.stepper .amt input::-webkit-outer-spin-button, .stepper .amt input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper .amt input:focus { outline: none; }
.stepper .amt .u { font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); }
.quick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 11px; }
.quick button {
  border: 1px solid var(--line); background: var(--surface-2); border-radius: 7px; padding: 6px 2px;
  font-size: 11.5px; font-weight: 650; color: var(--ink-3); cursor: pointer; font-family: var(--font-num);
  transition: border-color .12s, color .12s;
}
.quick button:hover { border-color: var(--accent); color: var(--accent); }
.quick button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.avail { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--ink-3); margin-top: 10px; }
.avail b { font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 650; }

/* --- submit --- */
.submit {
  width: 100%; border: 0; border-radius: var(--r-md); padding: 14px; font-size: 14px; font-weight: 700;
  letter-spacing: .01em; background: var(--accent); color: var(--accent-ink); cursor: pointer;
  transition: filter .12s, transform .1s, background .16s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.submit.up { background: var(--up); color: #fff; }
.submit.down { background: var(--down); color: #fff; }
.submit:hover:not(:disabled) { filter: brightness(1.08); }
.submit:active:not(:disabled) { transform: translateY(1px); }
.submit:disabled { opacity: .4; cursor: not-allowed; filter: none; transform: none; background: var(--surface-3); color: var(--ink-3); }
.subnote { font-size: 11.5px; color: var(--ink-3); text-align: center; line-height: 1.5; }
.err { font-size: 12px; color: var(--down); text-align: center; font-weight: 600; }

/* --- active position --- */
.position { display: flex; flex-direction: column; gap: 14px; animation: fadein .3s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.posbanner {
  display: flex; align-items: center; gap: 13px; padding: 15px; border-radius: var(--r-md);
  border: 2px solid; background: var(--surface);
}
.posbanner.up { border-color: var(--up); background: var(--up-soft); }
.posbanner.down { border-color: var(--down); background: var(--down-soft); }
.posbanner .arrow { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; }
.posbanner.up .arrow { background: var(--up); }
.posbanner.down .arrow { background: var(--down); }
.posbanner .arrow svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.posbanner .pw { font-size: 19px; font-weight: 720; letter-spacing: -.01em; line-height: 1.1; }
.posbanner.up .pw { color: var(--up); }
.posbanner.down .pw { color: var(--down); }
.posbanner .pa { font-family: var(--font-num); font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.posgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.poscell { background: var(--surface); padding: 11px 13px; display: flex; flex-direction: column; gap: 3px; }
.poscell .v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 650; }
.poscell .v.plain { font-family: var(--font); letter-spacing: .02em; }
.ghost {
  width: 100%; border: 1px solid var(--line-2); background: var(--surface); border-radius: var(--r-md);
  padding: 11px; font-size: 13px; font-weight: 650; color: var(--ink-2); cursor: pointer;
  transition: border-color .12s, color .12s;
}
.ghost:hover { border-color: var(--down); color: var(--down); }

/* ---------- discovery ---------- */
.filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pills button {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-3); border-radius: var(--r-sm);
  padding: 6px 12px; font-size: 12.5px; font-weight: 550; cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.pills button:hover { color: var(--ink); border-color: var(--line-2); }
.pills button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.wins { flex: none; }
.wins button { font-family: var(--font-num); }
.sorter { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); }
.sorter select { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 10px; font-size: 12.5px; font-weight: 620; color: var(--ink); cursor: pointer; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 296px), 1fr)); gap: clamp(12px, 1vw, 18px); align-items: stretch; }
.mk {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(14px, 1vw, 18px); display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-1);
  overflow: hidden; isolation: isolate;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.mk:hover { border-color: var(--line-2); background: var(--surface-hover); }
.mk.mine { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-soft); }
/* The whole card is one link. Named for what it is rather than for its state:
   a bare `.open` rule collided with the expanded "why" body, which also
   carries an `open` class, and dragged it out of the page. */
.cardlink { position: absolute; inset: 0; z-index: 1; border: 0; background: none; padding: 0; cursor: pointer; color: transparent; font-size: 0; border-radius: var(--r-lg); }
.cardlink:focus { outline: none; }
.mk:has(.cardlink:focus-visible) { outline: 2px solid var(--accent-2); outline-offset: 2px; }

.mktop { display: flex; align-items: flex-start; gap: 11px; }
.mktop .glyph { width: 44px; height: 44px; border-radius: var(--r-md); font-size: 12px; }
.mkid { min-width: 0; flex: 1; }
.mkid b { display: block; font-size: 14.5px; font-weight: 620; letter-spacing: -.018em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkid .tier { font-size: 11.5px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.mkval { text-align: right; flex: none; }
.mkval .v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 21px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; display: block; }
.mkval .u { font-size: 9.5px; font-weight: 680; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }

.gauge { display: flex; align-items: center; gap: 12px; }
.track { position: relative; height: 28px; flex: 1; min-width: 0; }
.track .rail-l { position: absolute; left: 0; right: 0; top: 13px; height: 2px; border-radius: 2px; background: var(--surface-3); }
.track .band { position: absolute; top: 9px; height: 10px; border-radius: 3px; background: var(--accent-fill); box-shadow: inset 0 0 0 1px var(--accent-soft); }
.track .band.wide { background: repeating-linear-gradient(115deg, var(--accent-fill) 0 4px, transparent 4px 8px); }
.track .tick { position: absolute; top: 6px; width: 3px; height: 16px; border-radius: 2px; background: var(--accent); margin-left: -1px; }
.track .ed { position: absolute; top: 5px; width: 2px; height: 18px; background: var(--editorial); margin-left: -1px; }
.track .ed::before { content: ""; position: absolute; left: -3px; top: -5px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--editorial); }

.split { display: flex; flex-direction: column; gap: 5px; }
.splitbar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; display: flex; }
.splitbar i.u { background: var(--up); }
.splitbar i.d { background: var(--down); }
.splitbar i.s { background: var(--flat); opacity: .55; }
.splitbar i { display: block; height: 100%; transition: width .4s; }
.splitlab { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); }
.splitlab b { font-family: var(--font-num); font-weight: 650; }
.splitlab .su { color: var(--up); }
.splitlab .sd { color: var(--down); }

/* Three sides on one row, with the neutral one narrower than the two it sits
   between. Equal thirds made STABLE look like an equal bet, which it is not -
   it pays less and it is the quiet call, so it takes less of the card and wears
   the one colour on the page that is not a colour. */
.acts { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr .82fr 1fr; gap: 6px; }
.acts .fl { background: var(--flat-soft); color: var(--flat); letter-spacing: .02em; }
.acts .fl svg { stroke-width: 2.4; }
.acts button {
  border: 1px solid transparent; border-radius: var(--r-sm); padding: 9px; font-size: 12.5px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: filter .12s, border-color .12s, transform .1s;
}
.acts button svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.acts .hi { background: var(--up-soft); color: var(--up); }
.acts .lo { background: var(--down-soft); color: var(--down); }
.acts .hi:hover { background: var(--up-fill); border-color: var(--up); }
.acts .lo:hover { background: var(--down-fill); border-color: var(--down); }
.acts .fl:hover { background: var(--flat-fill); border-color: var(--flat); }
.acts button:active { transform: translateY(1px); }
/* A date has two answers, not three. */
.acts.two { grid-template-columns: 1fr 1fr; }
.acts .held { grid-column: 1 / -1; background: var(--accent-soft); color: var(--accent); cursor: default; }
.acts .held:hover { transform: none; }
/* A tracked item's card still opens, it just has nothing to stake. */
.acts .watchbtn { background: var(--surface-2); color: var(--ink-3); cursor: pointer; font-weight: 600; }
.acts .watchbtn:hover { color: var(--ink); border-color: var(--line-2); }

.empty { padding: 52px 24px; text-align: center; color: var(--ink-3); font-size: 13.5px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.more { display: block; margin: 18px auto 0; border: 1px solid var(--line-2); background: var(--surface); border-radius: var(--r-md); padding: 10px 24px; font-size: 13px; font-weight: 650; color: var(--ink-2); cursor: pointer; }
.more:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- my forecasts / leaderboard ---------- */
.section { margin-bottom: 26px; }
.section > h2 { font-size: 18px; font-weight: 600; letter-spacing: -.03em; margin: 0 0 4px; }
.section > p.lede { margin: 0 0 16px; font-size: 13px; color: var(--ink-3); max-width: 68ch; line-height: 1.55; }

.plist { display: flex; flex-direction: column; }
.prow {
  display: grid; grid-template-columns: 38px minmax(0, 1.6fr) 92px 96px 106px auto;
  gap: 14px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 13px;
}
.prow:last-child { border-bottom: 0; }
.prow .glyph { width: 38px; height: 38px; border-radius: 10px; font-size: 11px; }
.prow .pn { min-width: 0; }
.prow .pn b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow .pn span { font-size: 11.5px; color: var(--ink-3); }
.prow .col { display: flex; flex-direction: column; gap: 2px; }
.prow .col .v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 650; }
.outcome { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; white-space: nowrap; }
.outcome.open { background: var(--accent-soft); color: var(--accent); }
.outcome.won { background: var(--up-soft); color: var(--up); }
.outcome.lost { background: var(--down-soft); color: var(--down); }
.outcome.tied { background: var(--surface-3); color: var(--ink-3); }
.outcome.sold { background: var(--accent-soft); color: var(--accent); }

.lrow { display: grid; grid-template-columns: 26px minmax(0, 1fr) 68px 62px 78px 76px 84px; gap: 12px; align-items: center; padding: 11px 18px; border-bottom: 1px solid var(--line); font-size: 13px; }
.lrow:last-child { border-bottom: 0; }
.lrow.head { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); }
.lrow .rk { font-family: var(--font-num); font-size: 12px; color: var(--ink-3); }
.lrow .who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lrow .who b { font-weight: 570; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; text-align: right; }
.lrow.me { background: var(--accent-soft); }
.you { font-size: 9.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: 4px; padding: 0 4px; flex: none; }

.mecard { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 18px; }

/* ---------- how it works ---------- */
.how { padding: 20px 22px; }
.how h2 { margin: 0 0 4px; font-size: 16px; font-weight: 680; letter-spacing: -.02em; }
.how .lede { margin: 0 0 18px; font-size: 13px; color: var(--ink-3); max-width: 64ch; line-height: 1.55; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.step { display: flex; flex-direction: column; gap: 6px; }
.step .k { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.step .k i { width: 20px; height: 2px; background: var(--accent); border-radius: 2px; display: block; }
.step h3 { margin: 0; font-size: 13.5px; font-weight: 660; letter-spacing: -.015em; }
.step p { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
.foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3); line-height: 1.65; max-width: 82ch; }
.foot b { color: var(--ink-2); font-weight: 650; }
.foot a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- identity: avatars, the verified mark, the connect sheet ----------
   A verified account shows its real Roblox headshot and a mark; an unverified
   one keeps the coloured monogram. That contrast is the whole point, so the
   two share a size and a frame and differ only in what fills them. */

/* The monogram avatar, used wherever a handle appears without a linked
   account. The feed keeps its own slightly tighter variant below. */
.av2 {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-size: 9px; font-weight: 700; letter-spacing: -.02em;
  color: hsl(var(--h, 215) var(--chip-s) var(--chip-l));
  background: color-mix(in srgb, hsl(var(--h, 215) 60% 50%) var(--glyph-mix), var(--surface-2));
}
.av, .av2, .av3 { position: relative; overflow: hidden; }
.av.has-art, .av2.has-art, .av3.has-art { background: var(--surface-3); }
.av img, .av2 img, .av3 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av2.ok, .av3.ok { box-shadow: 0 0 0 1.5px var(--accent); }

.wallet .acct {
  display: flex; align-items: center; gap: 8px; border: 0; padding: 0; background: none;
  font: inherit; color: var(--ink); cursor: pointer; flex: none; border-radius: 999px;
}
.wallet .acct:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wallet .acct:hover .av { filter: brightness(1.06); box-shadow: 0 0 0 2px var(--accent-glow); }
.wallet .acct:hover .rbn { color: var(--accent); }
.wallet .av { transition: box-shadow .14s, filter .14s; }
.wallet .av.ok { box-shadow: 0 0 0 1.5px var(--accent); }
.wallet .av.nudge { box-shadow: 0 0 0 1.5px var(--editorial); }
/* A connected account says who it is in the bar; the monogram alone does not. */
.wallet .rbn {
  max-width: 136px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding-right: 8px; font-size: 14px; font-weight: 620; letter-spacing: -.01em;
  text-transform: none; color: var(--ink); transition: color .12s;
}

.av3 {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-size: 15px; font-weight: 700; letter-spacing: -.02em;
  color: hsl(var(--h) var(--chip-s) var(--chip-l));
  background: color-mix(in srgb, hsl(var(--h) 60% 50%) var(--glyph-mix), var(--surface-2));
}

.tick { display: inline-grid; place-items: center; width: 14px; height: 14px; flex: none; color: var(--accent); }
.tick svg { width: 14px; height: 14px; display: block; }

.lrow .who a { color: inherit; text-decoration: none; }
.lrow .who a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* --- the account row on My Forecasts --- */
.idbanner {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
.idbanner .who { min-width: 0; flex: 1; }
.idbanner .top, .idcard .top { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 660; letter-spacing: -.015em; }
.idbanner .sub, .idcard .sub { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin-top: 2px; }
.cta {
  border: 0; border-radius: var(--r-sm); padding: 10px 15px; font-size: 13px; font-weight: 680; flex: none;
  background: var(--accent); color: var(--accent-ink); cursor: pointer; transition: filter .12s;
}
.cta:hover { filter: brightness(1.08); }
.textbtn {
  border: 1px solid var(--line-2); background: var(--surface-2); border-radius: var(--r-sm); padding: 8px 13px;
  font-size: 12.5px; font-weight: 650; color: var(--ink-2); cursor: pointer; flex: none;
  transition: border-color .12s, color .12s;
}
.textbtn:hover { border-color: var(--accent); color: var(--accent); }

/* --- sheet --- */
.sheet {
  position: fixed; inset: 0; z-index: 200; background: var(--scrim);
  backdrop-filter: blur(3px); display: grid; place-items: center; padding: 20px;
  animation: fadein .16s ease;
}
.sheetcard {
  width: min(520px, 100%); max-height: min(86vh, 760px); overflow: auto;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-xl); box-shadow: var(--shadow-3);
  animation: rise .2s cubic-bezier(.2, .8, .3, 1);
}
.sheethead {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 17px 20px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.sheethead h2 { margin: 0; font-size: 15.5px; font-weight: 680; letter-spacing: -.02em; }
.xbtn {
  width: 28px; height: 28px; flex: none; border: 1px solid var(--line); background: var(--surface-2);
  border-radius: var(--r-sm); color: var(--ink-3); font-size: 17px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: color .12s, border-color .12s;
}
.xbtn:hover { color: var(--ink); border-color: var(--line-2); }
.sheetbody { padding: 18px 20px 20px; }
.sheetbody .lede { margin: 0 0 16px; font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.sheetbody .fine { margin: 14px 0 0; font-size: 11.8px; color: var(--ink-3); line-height: 1.6; }
.sheetbody .err { margin-top: 12px; text-align: left; }
.sheetbody .warn {
  margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--editorial);
  background: var(--editorial-soft); border-radius: var(--r-sm); padding: 9px 11px; line-height: 1.5;
}

.field { display: block; margin-bottom: 12px; }
.field .lab { display: block; margin-bottom: 6px; }
.field input {
  width: 100%; border: 1px solid var(--line-2); background: var(--surface-2); border-radius: var(--r-md);
  padding: 12px 13px; font-size: 14px; font-weight: 600; color: var(--ink); transition: border-color .12s;
}
.field input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.field input::placeholder { color: var(--ink-3); font-weight: 500; }

/* --- the three-step checklist --- */
.lsteps { display: flex; flex-direction: column; gap: 4px; }
.lstep { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 0 0 16px; }
.lstep .k {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-family: var(--font-num); font-size: 11.5px; font-weight: 700;
  background: var(--accent-soft); color: var(--accent);
}
.lstep .b { min-width: 0; }
.lstep h4 { margin: 3px 0 7px; font-size: 13.5px; font-weight: 660; letter-spacing: -.015em; }
.lstep p { margin: 0 0 9px; font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }

.seedbox {
  display: flex; align-items: center; gap: 10px; background: var(--surface-2);
  border: 1px dashed var(--line-2); border-radius: var(--r-md); padding: 10px 10px 10px 13px;
}
.seedbox code {
  flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  color: var(--ink); overflow-wrap: break-word; user-select: all;
}
.seedbox .copy {
  flex: none; border: 1px solid var(--line-2); background: var(--surface); border-radius: 7px; padding: 6px 11px;
  font-size: 11.5px; font-weight: 700; color: var(--ink-2); cursor: pointer; transition: border-color .12s, color .12s;
}
.seedbox .copy:hover { border-color: var(--accent); color: var(--accent); }

.actionlink, .ghostlink {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  border: 1px solid var(--line-2); background: var(--surface-2); border-radius: var(--r-sm);
  padding: 9px 13px; font-size: 12.5px; font-weight: 650; color: var(--ink-2); transition: border-color .12s, color .12s;
  /* One of these is a <button> now, which would otherwise arrive with the
     browser's own form font rather than the page's. */
  font-family: inherit; cursor: pointer;
}
.actionlink:hover, .ghostlink:hover { border-color: var(--accent); color: var(--accent); }
.actionlink::after { content: "↗"; font-size: 11px; }

.idcard {
  display: flex; align-items: center; gap: 13px; padding: 13px; margin-bottom: 16px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
}
.idcard .who { min-width: 0; flex: 1; }

.lrow2 { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
/* Three buttons across a sheet this narrow, so they wrap rather than squeeze
   their labels down to an ellipsis. */
.lrow2 { flex-wrap: wrap; }
.lrow2 .ghost, .lrow2 .ghostlink { width: auto; flex: 1 1 120px; justify-content: center; text-align: center; padding-left: 9px; padding-right: 9px; }

/* ---------- toast ---------- */
.toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  background: var(--raise); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--shadow-3);
  padding: 11px 16px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 9px;
  animation: rise .25s cubic-bezier(.2, .8, .3, 1);
}
.toast.up { border-color: var(--up); }
.toast.down { border-color: var(--down); }
.toast .mark { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; font-size: 10px; }
.toast.up .mark { background: var(--up); }
.toast.down .mark { background: var(--down); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- skeleton ---------- */
.skel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); opacity: .6; animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: .45; } 50% { opacity: .75; } }

/* ---------- responsive ---------- */
/* =========================================================================
   Book layout

   The reference here is a prediction-market book: separate cards with air
   between them rather than one welded slab, a quiet chart, and a trade panel
   that stays under the cursor while the page scrolls. Green and red appear
   only on a side; the blue accent only on something you can press.
   ========================================================================= */

/* --- detail: two cards, the right one pinned --- */
.market {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(330px, 25vw, 404px);
  gap: 16px; background: none; border: 0; border-radius: 0; overflow: visible;
  box-shadow: none; margin-bottom: 26px;
}
.mleft, .mright {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-1);
}
.mright { position: sticky; top: 72px; align-self: start; }

.mhead { align-items: center; gap: 15px; }
.glyph.big { width: 58px; height: 58px; border-radius: var(--r-lg); font-size: 16px; }
.mtitle h1 { font-size: clamp(22px, 2.1vw, 30px); font-weight: 600; letter-spacing: -.035em; }
.mtitle .meta { margin-top: 9px; }

/* One muted line of facts, each with its own mark, directly under the title. */
.metaline {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 9px; font-size: 12.5px; color: var(--ink-3);
}
.metaline span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.metaline svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.mprice .v { font-size: clamp(34px, 3.4vw, 48px); }

/* --- the outcome row --- */
.otable { border-top: 1px solid var(--line); padding: 4px clamp(16px, 1.5vw, 26px) 16px; }
.ohead {
  display: grid; grid-template-columns: minmax(0, 1fr) 92px minmax(0, 300px); gap: 14px; align-items: center;
  padding: 11px 0 9px; border-bottom: 1px solid var(--line);
  font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3);
}
.ohead .c { text-align: center; }
.orow {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) 92px minmax(0, 300px); gap: 14px; align-items: center;
  padding: 15px 0 13px;
}
.orow .on { min-width: 0; }
.orow .on b { display: block; font-size: 15px; font-weight: 620; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orow .on .sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.ochance { text-align: center; }
.ochance .big {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 29px; font-weight: 600; letter-spacing: -.03em; line-height: 1;
}
.ochance .lab { margin-top: 3px; letter-spacing: .08em; }
.obtns { display: grid; grid-template-columns: 1fr .82fr 1fr; gap: 8px; }
.obtns .onone {
  grid-column: 1 / -1; display: grid; place-items: center; padding: 11px 14px;
  border: 1px dashed var(--line-2); border-radius: var(--r-md);
  font-size: 12px; font-weight: 620; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3);
}
.obuy {
  position: relative; overflow: hidden; border: 0; border-radius: var(--r-sm); cursor: pointer;
  padding: 11px 8px; font-size: 13px; font-weight: 700; letter-spacing: .01em;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .14s, color .14s, transform .1s;
}
.obuy i { font-style: normal; font-size: 10px; }
.obuy.up { background: var(--up-fill); color: var(--up); }
.obuy.down { background: var(--down-fill); color: var(--down); }
.obuy.stable { background: var(--flat-fill); color: var(--flat); }
.obuy.up:hover, .obuy.up[aria-pressed="true"] { background: var(--up); color: #fff; }
.obuy.down:hover, .obuy.down[aria-pressed="true"] { background: var(--down); color: #fff; }
.obuy:active { transform: translateY(1px); }
.ofoot { font-size: 11.5px; color: var(--ink-3); line-height: 1.55; max-width: 76ch; }

/* The panel a tracked item gets where the trade card would be. Same frame, no
   accent, no controls except the one that takes you to where the markets are. */
.fc.watch .question { color: var(--ink-2); }
.fc.watch .benchmark { background: var(--surface-2); }
.watchnote { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }
.watchnote.small { font-size: 11.5px; }
.fc.watch .cta { width: 100%; }

/* --- trade card --- */
.fchead { display: flex; align-items: center; gap: 11px; }
.fchead .glyph { width: 38px; height: 38px; border-radius: var(--r-sm); font-size: 11px; }
.fchead .t { min-width: 0; }
.fchead .t b { display: block; font-size: 14px; font-weight: 620; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.mright { background: var(--surface); }
.fc { gap: 14px; }
.benchmark, .stakebox { background: var(--surface-2); border-color: var(--line); }

/* A picked side fills solid, the way a taken offer does on a book. */
.side { border-width: 1px; background: var(--surface-2); }
.side.up[aria-pressed="true"] {
  background: var(--up); border-color: var(--up); box-shadow: var(--shadow-2);
}
.side.down[aria-pressed="true"] {
  background: var(--down); border-color: var(--down); box-shadow: var(--shadow-2);
}
.side.stable[aria-pressed="true"] {
  background: var(--flat); border-color: var(--flat); box-shadow: 0 0 0 3px var(--flat-soft), var(--shadow-2);
}
.side.up[aria-pressed="true"] .word, .side.down[aria-pressed="true"] .word, .side.stable[aria-pressed="true"] .word,
.side.up[aria-pressed="true"] .against, .side.down[aria-pressed="true"] .against, .side.stable[aria-pressed="true"] .against { color: #fff; }
.side.up[aria-pressed="true"] .against, .side.down[aria-pressed="true"] .against, .side.stable[aria-pressed="true"] .against { opacity: .82; }
.side.up[aria-pressed="true"] .arrow, .side.down[aria-pressed="true"] .arrow, .side.stable[aria-pressed="true"] .arrow { background: rgba(255, 255, 255, .22); color: #fff; }

.stepper .amt input { font-size: 30px; }
.submit { border-radius: var(--r-sm); padding: 15px; font-size: 14.5px; }
.submit:not(.up):not(.down):not(:disabled) { background: var(--accent); color: var(--accent-ink); }

/* --- market cards --- */
.mkval .chance {
  display: block; font-size: 10.5px; font-weight: 650; letter-spacing: .02em;
  text-transform: uppercase; color: var(--ink-3); margin-top: 1px;
}
.mkval .chance b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 700; }
.mkval .chance.up b { color: var(--up); }
.mkval .chance.down b { color: var(--down); }

.mk {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); transition: border-color .14s, background .14s, box-shadow .16s;
}
.mk:hover { border-color: var(--line-2); background: var(--surface-hover); box-shadow: var(--lift); }
.mkid b { font-size: 14px; font-weight: 620; letter-spacing: -.02em; }
.acts button {
  border: 0; border-radius: var(--r-sm); font-weight: 700; font-size: 12.5px;
  transition: background .14s, color .14s;
}
.acts button.hi { background: var(--up-fill); color: var(--up); }
.acts button.lo { background: var(--down-fill); color: var(--down); }
.acts button.fl { background: var(--flat-fill); color: var(--flat); }
.acts button.hi:hover { background: var(--up); color: #fff; }
.acts button.lo:hover { background: var(--down); color: #fff; }
.acts button.fl:hover { background: var(--flat); color: #fff; }
.acts button svg { stroke-width: 3; }

/* --- rail: flatter, since the cards now carry the borders --- */
.rail { box-shadow: none; }
.stat.hero .big { letter-spacing: -.045em; }
.rail .stat.hero .big { letter-spacing: -.02em; }

/* --- panels and lists inherit the same card language --- */
.panel { box-shadow: var(--shadow-1); }
.lrow.head { background: var(--surface-2); }

@media (max-width: 1100px) {
  .mright { position: static; }
  .orow, .ohead { grid-template-columns: 44px minmax(0, 1fr) 80px; }
  .ohead { grid-template-columns: minmax(0, 1fr) 80px; }
  .ohead div:nth-child(3) { display: none; }
  .obtns { grid-column: 1 / -1; margin-top: 2px; }
}
@media (max-width: 720px) {
  .nav::before { display: none; }
  .metaline { gap: 12px; font-size: 12px; }
  .ochance .big { font-size: 25px; }
}

@media (max-width: 1100px) {
  .market { grid-template-columns: 1fr; }
  .rail { grid-template-columns: 1fr 1fr; }
  .lrow { grid-template-columns: 24px minmax(0, 1fr) 62px 58px 72px 80px; }
  .lrow .hideable:nth-child(5) { display: none; }
  .prow { grid-template-columns: 34px minmax(0, 1fr) 88px auto; }
  .prow .col.hideable { display: none; }
}
@media (max-width: 860px) {
  .nav { display: none; }
  .rail { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .wrap { padding: 0 13px; }
  .bar .wrap { height: auto; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
  .search { order: 3; max-width: none; flex-basis: 100%; }
  .wallet .rbn { max-width: 88px; }
  .mprice { margin-left: 0; align-items: flex-start; text-align: left; }
  .mprice .v { font-size: 36px; }
  .mtitle h1 { font-size: 20px; }
  .grid { grid-template-columns: 1fr; }
  .rule { grid-template-columns: 1fr; gap: 5px; }
  .lrow { grid-template-columns: 22px minmax(0, 1fr) 58px 66px 70px; }
  .lrow .hideable { display: none; }
  /* The forecast action has to stay the easiest thing to reach on a phone. */
  .mright { order: -1; }
  .stepper .amt input { font-size: 22px; }
  .lrow .who .av2 { width: 20px; height: 20px; font-size: 8px; }
  .idbanner { flex-wrap: wrap; }
  .idbanner .cta, .idbanner .textbtn { width: 100%; }
  /* The connect flow becomes a bottom sheet, which is where a thumb is. */
  .sheet { padding: 0; place-items: end stretch; }
  .sheetcard { width: 100%; max-height: 92vh; border-radius: var(--r-xl) var(--r-xl) 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* =========================================================================
   Rarity chip

   "chroma · item" used to be grey body text doing nothing. The rarity is the
   single most recognisable thing about a Roblox item, so it now carries the
   item's own hue - the same hue the glyph and the avatar use - as a small
   tinted chip. The kind stays quieter inside it.
   ========================================================================= */
.rt {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0;
  padding: 2px 7px 2px 6px; border-radius: var(--r-sm);
  background: hsl(var(--h) 65% 50% / .12);
  border: 1px solid hsl(var(--h) 60% 55% / .28);
  color: hsl(var(--h) var(--chip-s) var(--chip-l));
  font-size: 10px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase;
  white-space: nowrap;
}
.rt i {
  width: 5px; height: 5px; border-radius: 50%; flex: none;
  background: hsl(var(--h) var(--chip-s) var(--chip-l));
}
.rt em { font-style: normal; font-weight: 600; opacity: .6; letter-spacing: .04em; }
.rt em::before { content: "·"; margin-right: 4px; opacity: .7; }
.mtitle .meta .rt { font-size: 10.5px; padding: 3px 10px 3px 7px; }

/* ---------- card sheen + rarity edge ---------- */
.mk::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: -1;
  background: linear-gradient(90deg, hsl(var(--h, 215) 70% 55% / .9), hsl(var(--h, 215) 70% 55% / 0) 62%);
  opacity: .5; transition: opacity .18s;
}
.mk:hover::before { opacity: 1; }
.mk .acts { margin-top: auto; }

/* Bars that grow in rather than appearing fully drawn. */
.splitbar i { animation: growx .55s cubic-bezier(.2, .8, .3, 1) both; }
.splitbar i.u { transform-origin: left; }
.splitbar i.d { transform-origin: right; animation-delay: .05s; }
.splitbar i.s { transform-origin: center; animation-delay: .03s; }
@keyframes growx { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* =========================================================================
   Trade animation

   Placing a forecast is the one moment the product asks for commitment, and
   cancelling one is the moment it gives the stake back. Both read as a
   transfer: a REP chip flies between the stake and the wallet, and the wallet
   counts to its new balance. That is the whole motion budget. Nothing here
   blocks the interaction, and nothing celebrates a trade at the user.
   ========================================================================= */
.fx { position: fixed; inset: 0; z-index: 200; pointer-events: none; }


.fxrep {
  position: fixed; padding: 7px 13px; border-radius: 999px; border: 1px solid;
  font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 700;
  box-shadow: var(--shadow-2); white-space: nowrap;
  transform: translate(-50%, -50%) scale(1);
  transition: transform .78s cubic-bezier(.55, -.15, .3, 1), opacity .78s ease-in;
}
.fxrep.debit { background: var(--down-soft); color: var(--down); border-color: var(--down); }
.fxrep.credit { background: var(--up-soft); color: var(--up); border-color: var(--up); }

.wallet { transition: border-color .2s, background .2s; }
.wallet.bump { border-color: var(--accent); background: var(--accent-soft); animation: bump .55s cubic-bezier(.2, 1.4, .35, 1); }
.wallet.bump b { color: var(--accent); }
@keyframes bump { 0%, 100% { transform: none; } 32% { transform: scale(1.1); } }

.submit, .ghost { position: relative; overflow: hidden; }
.acts button { transition: background .14s, color .14s; }
.acts .hi:hover { background: var(--up); color: var(--bg); }
.acts .lo:hover { background: var(--down); color: var(--bg); }
.acts .fl:hover { background: var(--flat); color: var(--bg); }

/* Submit, mid-flight. */
.submit.placing { pointer-events: none; }
.submit.placing::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 18%, rgba(255, 255, 255, .3) 50%, transparent 82%);
  animation: sweep .85s linear infinite;
}
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* The filled position lands rather than appears. One move, no bounce. */
.posbanner { animation: settle .32s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes settle { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .fx { display: none; }
  .splitbar i { animation: none; }
}

/* =========================================================================
   The market furniture

   Four things a forecasting market needs that a value list does not: a shape
   for the probability, a bottom line on every card saying how much is riding
   on it, somewhere to keep the markets you are watching, and visible proof
   that other people are trading. None of it invents a number - every figure
   here is one the API already returns.
   ========================================================================= */

/* --- the theme button shows the theme it takes you to --- */
.themer .i-sun { display: none; }
:root[data-theme="dark"] .themer .i-moon { display: none; }
:root[data-theme="dark"] .themer .i-sun { display: block; }

/* --- the shortcut hint, which gets out of the way the moment it is used --- */
.search kbd.slash {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%); pointer-events: none;
  font-family: var(--font-num); font-size: 12px; font-weight: 650; line-height: 1; color: var(--ink-3);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px;
  transition: opacity .12s;
}


/* --- the live strip --- */
.ticker { border-bottom: 1px solid var(--line); background: var(--surface-2); }
:root[data-theme="dark"] .ticker { background: var(--bg); }
.ticker .wrap { display: flex; align-items: center; gap: 14px; padding-top: 7px; padding-bottom: 7px; min-width: 0; }
.live {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.live i { width: 6px; height: 6px; border-radius: 50%; background: var(--up); animation: beat 2.6s ease-out infinite; }
@keyframes beat {
  0% { box-shadow: 0 0 0 0 var(--up-fill); }
  70%, 100% { box-shadow: 0 0 0 6px transparent; }
}
.tk {
  display: flex; gap: 8px; overflow-x: auto; min-width: 0; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 94%, transparent);
  mask-image: linear-gradient(90deg, #000 94%, transparent);
}
.tk::-webkit-scrollbar { display: none; }
.tkc {
  flex: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); border-radius: 999px;
  padding: 3px 12px 3px 4px; font-size: 12px; color: var(--ink-3);
  transition: border-color .12s, box-shadow .14s;
}
.tkc:hover { border-color: var(--line-2); box-shadow: var(--lift); }
.tkc .av2 { width: 19px; height: 19px; font-size: 8px; }
.tkc b { color: var(--ink); font-weight: 620; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkc .d { font-size: 10px; font-weight: 750; letter-spacing: .05em; }
.tkc .d.up { color: var(--up); }
.tkc .d.down { color: var(--down); }
.tkc .d.stable { color: var(--flat); }
.tkc .nm { color: var(--ink-2); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkc .st { color: var(--ink-2); font-weight: 650; }
.tkc .ag { font-size: 11px; }

/* --- the chance dial --- */
.mkval { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.dial { position: relative; width: 56px; height: 33px; margin-top: 4px; }
.dial svg { display: block; width: 56px; height: 33px; }
.dial path { fill: none; stroke-width: 5; stroke-linecap: round; }
.dial .dbg { stroke: var(--surface-3); }
.dial .dfg { transition: stroke-dashoffset .55s cubic-bezier(.2, .8, .3, 1); }
.dial.up .dfg, .dial.up b { stroke: var(--up); color: var(--up); }
.dial.down .dfg, .dial.down b { stroke: var(--down); color: var(--down); }
.dial b {
  position: absolute; left: 0; right: 0; bottom: 0; text-align: center; line-height: 1;
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 15.5px; font-weight: 650; letter-spacing: -.035em;
}
.dial b i { font-style: normal; font-size: 9.5px; font-weight: 600; opacity: .75; margin-left: 1px; }

/* --- the card's bottom line --- */
.mkfoot {
  display: flex; align-items: center; gap: 14px;
  padding-top: 11px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink-3);
}
.mkfoot .fs { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; min-width: 0; }
.mkfoot .fs svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mkfoot .fs b { font-weight: 620; color: var(--ink-2); letter-spacing: -.01em; }
/* The footer reads as part of the card link; only the bookmark sits above it,
   because it is the one control here that does not navigate. */
.watch {
  position: relative; z-index: 2;
  margin-left: auto; flex: none; width: 27px; height: 27px; border: 0; background: none; cursor: pointer;
  border-radius: var(--r-sm); color: var(--ink-3); display: grid; place-items: center;
  transition: color .12s, background .12s;
}
.watch svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.watch:hover { color: var(--ink); background: var(--surface-2); }
.watch[aria-pressed="true"] { color: var(--editorial); }
.watch[aria-pressed="true"] svg { fill: var(--editorial); }

/* --- the watchlist lens --- */
.watchonly { flex: none; }
.wpill {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-3);
  border-radius: var(--r-sm); padding: 6px 12px; font-size: 12.5px; font-weight: 550;
  transition: border-color .12s, color .12s, background .12s;
}
.wpill svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.wpill em {
  font-style: normal; font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 11px; font-weight: 650; background: var(--surface-3); border-radius: 4px; padding: 0 5px;
}
.wpill:hover { color: var(--ink); border-color: var(--line-2); }
.wpill[aria-pressed="true"] {
  color: var(--editorial); background: var(--editorial-soft);
  border-color: color-mix(in srgb, var(--editorial) 38%, transparent);
}
.wpill[aria-pressed="true"] svg { fill: currentColor; }
.wpill[aria-pressed="true"] em { background: color-mix(in srgb, var(--editorial) 15%, transparent); color: var(--editorial); }

/* --- the filter bar stays with the grid ---
   The shadow-plus-clip trick paints the bar's own background across the full
   viewport width without a wrapper element, so nothing scrolls through the
   gutters beside it. */
@media (min-width: 721px) {
  .filters {
    position: sticky; top: 67px; z-index: 30; margin-bottom: 14px;
    padding: 11px 0; background: var(--bg);
    box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax);
  }
}

/* The market page carries the dial at reading size, centred over its label. */
.ochance .dial.lg { width: 94px; height: 56px; margin: 0 auto; }
.ochance .dial.lg svg { width: 94px; height: 56px; }
.ochance .dial.lg path { stroke-width: 4.4; }
.ochance .dial.lg b { font-size: 27px; letter-spacing: -.04em; }
.ochance .dial.lg b i { font-size: 15px; }
.ochance .dial + .lab { margin-top: 5px; }

/* =========================================================================
   Round two: the things a board needs that a grid of cards does not

   A way to say what kind of object you are looking for, a shape for where the
   value has been, a denser way to read the same board, the book behind a
   market, somewhere to go next, and a control within reach of a thumb. Same
   palette, same hairlines, same two typefaces - nothing here introduces a new
   colour or a new radius.
   ========================================================================= */

/* ---------- the category rail ----------
   Wider and quieter than the filter pills below it: this is navigation, not a
   query. Chips scroll horizontally on a narrow screen and the bar fades at its
   right edge rather than showing a scrollbar. */
.cats { border-bottom: 1px solid var(--line); background: var(--bg); }
.cats .wrap {
  display: flex; gap: 6px; overflow-x: auto; padding-top: 9px; padding-bottom: 9px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 96%, transparent);
  mask-image: linear-gradient(90deg, #000 96%, transparent);
}
.cats .wrap::-webkit-scrollbar { display: none; }
.cat {
  flex: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid transparent; background: none; border-radius: 999px;
  padding: 6px 13px 6px 10px; font-size: 12.5px; font-weight: 550; color: var(--ink-3);
  transition: color .12s, background .12s, border-color .12s;
}
.cat .ci { display: grid; place-items: center; width: 15px; height: 15px; flex: none; }
.cat .ci svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.cat .cl { white-space: nowrap; }
.cat .cn {
  font-size: 10.5px; font-weight: 650; color: var(--ink-3);
  background: var(--surface-3); border-radius: 4px; padding: 1px 5px;
  transition: background .12s, color .12s;
}
.cat:hover { color: var(--ink); background: var(--surface-2); }
.cat[aria-pressed="true"] {
  color: var(--bg); background: var(--ink); border-color: var(--ink); font-weight: 620;
}
.cat[aria-pressed="true"] .cn { background: color-mix(in srgb, var(--bg) 18%, transparent); color: color-mix(in srgb, var(--bg) 72%, transparent); }
/* Nothing on the board in this category. Still reachable - pressing it opens
   the whole list - but it should not look like the others. */
.cat.thin { opacity: .5; }
.cat.thin:hover { opacity: 1; }

/* ---------- sparklines ----------
   No axis, no grid, no hover. One line, a wash under it and a dot on the last
   print, coloured by the only claim a thumbnail can honestly make: which end
   is higher. */
.spark { position: relative; flex: 1 1 auto; min-width: 0; height: 30px; }
.spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.spark .sl { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark .sa { fill: currentColor; opacity: .09; stroke: none; }
.spark .sd {
  position: absolute; width: 5px; height: 5px; border-radius: 50%; background: currentColor;
  margin-left: -3.5px; margin-top: -2.5px;
  box-shadow: 0 0 0 2px var(--surface);
}
.spark.up { color: var(--up); }
.spark.down { color: var(--down); }
.spark.flat { color: var(--ink-3); }
.spark.empty { visibility: hidden; }

.trendrow { display: flex; align-items: center; gap: 12px; min-width: 0; }
.trendrow .mv { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.trendrow .mv .lab { font-size: 9px; }
.trendrow .nohist { flex: 1; font-size: 11.5px; color: var(--ink-3); }

/* ---------- density toggle ---------- */
.seg.dens { flex: none; }
.seg button.ico { padding: 5px 9px; display: grid; place-items: center; }
.seg button.ico svg { width: 14px; height: 14px; fill: currentColor; stroke: none; display: block; }

/* ---------- the board as rows ----------
   The same markets on a shared grid, so the numbers line up down the page.
   Everything the card carried that needs width - the band gauge, the crowd
   split bar - is dropped rather than squeezed. */
.rows { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-1); }
.mkrow {
  position: relative; display: grid;
  grid-template-columns: 36px minmax(0, 1.5fr) minmax(72px, 1fr) 66px 104px 92px auto;
  gap: 14px; align-items: center; padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  transition: background .12s;
}
.mkrow:last-child { border-bottom: 0; }
.mkrow:hover { background: var(--surface-2); }
.mkrow.mine { box-shadow: inset 2px 0 0 var(--accent); }
.mkrow:has(.cardlink:focus-visible) { outline: 2px solid var(--accent-2); outline-offset: -2px; }
.mkrow .glyph.sm { width: 36px; height: 36px; border-radius: var(--r-sm); font-size: 10px; }
.mkrow .rid { min-width: 0; }
.mkrow .rid b { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkrow .rid .tier { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; overflow: hidden; margin-top: 2px; }
.mkrow .spark { height: 26px; }
/* A date has no history to draw, so the slot the sparkline lives in carries
   its YES/NO split instead - the same bar the card wears, at row height. */
.mkrow .ebar.rowbar { align-self: center; height: 7px; }
.mkrow .glyph.date.sm b { font-size: 13px; }
.mkrow .glyph.date.sm i { font-size: 7px; }
.mkrow .rcol { min-width: 0; text-align: right; display: flex; flex-direction: column; gap: 1px; }
.mkrow .rcol .v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 650; letter-spacing: -.02em; }
.mkrow .rcol .v.up { color: var(--up); }
.mkrow .rcol .v.down { color: var(--down); }
.mkrow .rcol .lab { font-size: 9px; text-align: right; }
.mkrow .rcol .lab b { font-family: var(--font-num); font-weight: 650; letter-spacing: 0; }
.mkrow .racts { position: relative; z-index: 2; display: flex; align-items: center; gap: 6px; }
.mkrow .racts button {
  border: 1px solid transparent; border-radius: var(--r-sm); padding: 7px 11px;
  font-size: 11.5px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  transition: background .12s, border-color .12s, color .12s;
}
.mkrow .racts button svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mkrow .racts .hi { background: var(--up-soft); color: var(--up); }
.mkrow .racts .lo { background: var(--down-soft); color: var(--down); }
.mkrow .racts .hi:hover { background: var(--up); color: var(--bg); }
.mkrow .racts .lo:hover { background: var(--down); color: var(--bg); }
.mkrow .racts .held { background: var(--accent-soft); color: var(--accent); }
.mkrow .racts .watchbtn { background: var(--surface-2); color: var(--ink-3); font-weight: 600; }
.mkrow .racts .watchbtn:hover { color: var(--ink); border-color: var(--line-2); }
.mkrow .watch { margin-left: 0; width: 25px; height: 25px; }

/* ---------- top holders ----------
   Two columns, one per side, each row a name and a bar proportional to the
   biggest stake in the market. The weight of a side is legible as a shape
   before a single figure is read. */
.holders { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.hcol { background: var(--surface); padding: 12px 14px 14px; min-width: 0; }
.hhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 9px; margin-bottom: 9px; border-bottom: 1px solid var(--line); }
.hhead .sd { font-size: 11px; font-weight: 750; letter-spacing: .06em; }
.hhead b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 650; }
.hcol.up .hhead .sd { color: var(--up); }
.hcol.down .hhead .sd { color: var(--down); }
.hempty { font-size: 12px; color: var(--ink-3); padding: 6px 0; }
.hrow { display: grid; grid-template-columns: 22px minmax(0, 1fr) 52px 46px; gap: 9px; align-items: center; padding: 5px 0; font-size: 12.5px; }
.hrow .av2 { width: 22px; height: 22px; font-size: 8px; }
.hrow .who { display: flex; align-items: center; gap: 5px; min-width: 0; }
.hrow .who b { font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.hbar i { display: block; height: 100%; border-radius: 999px; animation: growx .5s cubic-bezier(.2, .8, .3, 1) both; transform-origin: left; }
.hcol.up .hbar i { background: var(--up); }
.hcol.down .hbar i { background: var(--down); }
.hst { font-family: var(--font-num); font-variant-numeric: tabular-nums; text-align: right; font-weight: 650; font-size: 12px; color: var(--ink-2); }

/* ---------- comparable items ---------- */
.relpanel { margin-top: 22px; }
.relgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 1px; background: var(--line); }
.relcard {
  display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
  background: var(--surface); border: 0; padding: 12px 14px; min-width: 0; font: inherit; color: inherit;
  transition: background .12s;
}
.relcard:hover { background: var(--surface-2); }
.relcard .glyph.sm { width: 34px; height: 34px; border-radius: var(--r-sm); font-size: 10px; flex: none; }
.relcard .reln { min-width: 0; flex: 1; }
.relcard .reln b { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.relcard .relsub { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.relcard .relsub .n { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 620; color: var(--ink-2); }
.relcard > .tag { flex: none; }

/* ---------- profit and loss, wherever a number can go either way ---------- */
.gain { color: var(--up); }
.loss { color: var(--down); }
.stat .big.gain { color: var(--up); }
.stat .big.loss { color: var(--down); }

/* ---------- the phone bar ----------
   On a narrow screen the trade card is a scroll away from the chart it acts
   on. This pins the two sides to the bottom of the viewport; it drives the
   same draft state the panel does rather than being a second way to forecast. */
.mobar { display: none; }
@media (max-width: 1100px) {
  .mobar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: flex; align-items: center; gap: 12px;
    padding: 10px clamp(13px, 2.4vw, 22px) calc(10px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--line); box-shadow: var(--shadow-2);
  }
  body:has(.mobar) { padding-bottom: 78px; }
  .mobar .mbv { min-width: 0; }
  .mobar .mbv .v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 650; letter-spacing: -.025em; }
  .mobar .mba { margin-left: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .mobar button {
    border: 1px solid transparent; border-radius: var(--r-md); padding: 11px 20px;
    font-size: 13px; font-weight: 750; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  }
  .mobar button svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  .mobar .hi { background: var(--up-soft); color: var(--up); }
  .mobar .lo { background: var(--down-soft); color: var(--down); }
  .mobar .hi[aria-pressed="true"] { background: var(--up); color: var(--bg); }
  .mobar .lo[aria-pressed="true"] { background: var(--down); color: var(--bg); }
  .mobar .held { margin-left: auto; background: var(--accent-soft); color: var(--accent); }
  /* Toasts land above the bar rather than behind it. */
  body:has(.mobar) .toasts { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- rows, narrowed ---------- */
@media (max-width: 1100px) {
  .mkrow { grid-template-columns: 34px minmax(0, 1.4fr) minmax(60px, 1fr) 60px 92px auto; }
  .mkrow .rcol.hideable { display: none; }
}
@media (max-width: 820px) {
  .mkrow { grid-template-columns: 34px minmax(0, 1fr) 58px 88px auto; }
  .mkrow .spark { display: none; }
}
@media (max-width: 620px) {
  .mkrow { grid-template-columns: 32px minmax(0, 1fr) 84px auto; gap: 10px; padding: 9px 11px; }
  .mkrow .rcol.chance { display: none; }
  .mkrow .racts button { padding: 7px 9px; }
  .holders { grid-template-columns: 1fr; }
  .cat .cn { display: none; }
}

/* ---------- the tab count ----------
   Only the comment tab carries one, because it is the only tab whose contents
   grow while you are looking at the page. */
.tabs button em {
  font-style: normal; font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0; margin-left: 6px;
  background: var(--surface-3); color: var(--ink-3); border-radius: 999px; padding: 1px 5px;
  transition: background .12s, color .12s;
}
.tabs button[aria-selected="true"] em { background: var(--accent-soft); color: var(--accent); }

/* ---------- share row ----------
   Three quiet controls under the title. Ghost buttons rather than solid ones:
   nothing here competes with the trade card, which is the only thing on this
   page that should look like it wants pressing. */
.shareRow { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
/* Its own class, not .ghost: that name already belongs to the full-width
   cancel-position button, and borrowing it made every control here 100% wide
   and stacked. */
.shareRow .sbtn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; width: auto; flex: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-3); font: inherit; font-size: 12px; font-weight: 600; padding: 5px 11px 5px 9px;
  transition: color .13s, border-color .13s, background .13s;
}
.shareRow .sbtn svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.shareRow .sbtn:hover { color: var(--ink); border-color: var(--line-2); background: var(--surface-2); }
.shareRow .sbtn.done { color: var(--up); border-color: var(--up); }
.shareRow .sbtn.on { color: var(--accent); border-color: var(--accent); }
.shareRow .sbtn.on svg { fill: var(--accent); stroke: var(--accent); }

/* ---------- comments ----------
   The only place on the page where a person, rather than the engine, says
   something. The position badge next to each name is the whole point: it is
   what lets a take be read for what it is without anyone having to be
   trusted. */
.comments { display: flex; flex-direction: column; gap: 14px; }
.chint { font-size: 12.5px; line-height: 1.6; margin: 0; }

.cform {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px;
  transition: border-color .13s, box-shadow .13s;
}
.cform:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cform textarea {
  width: 100%; resize: vertical; min-height: 56px; border: 0; background: none; padding: 0;
  font: inherit; font-size: 13.5px; line-height: 1.6; color: var(--ink);
}
.cform textarea:focus { outline: none; }
.cform textarea::placeholder { color: var(--ink-3); }
.cfoot { display: flex; align-items: center; gap: 9px; }
.ccount { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--ink-3); margin-left: auto; }
.ccount.low { color: var(--editorial); }
.cpost {
  border: 0; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 650;
  background: var(--accent); color: var(--accent-ink); border-radius: var(--r-sm); padding: 7px 15px;
  transition: background .13s, opacity .13s;
}
.cpost:hover { background: var(--accent-2); }
.cpost:disabled { opacity: .5; cursor: default; }

/* The badge the comment will carry, shown before it is written rather than
   after. Finding out your name went out labelled UP·400 is worse once it is
   already public. */
.cwill { font-size: 11px; font-weight: 700; letter-spacing: .04em; border-radius: 999px; padding: 3px 9px; }
.cwill.none { background: var(--surface-3); color: var(--ink-3); font-weight: 600; letter-spacing: .02em; }

.cpos { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.cpos i { font-style: normal; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 650; opacity: .85; }
.cpos.up { background: var(--up-soft); color: var(--up); }
.cpos.down { background: var(--down-soft); color: var(--down); }
.cpos.stable { background: var(--flat-soft); color: var(--flat); }
span.cpos:not(.cwill) { font-size: 10px; font-weight: 700; letter-spacing: .04em; border-radius: 999px; padding: 2px 7px; }

.clist { display: flex; flex-direction: column; }
.crow { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 11px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.crow:first-child { padding-top: 4px; }
.crow:last-child { border-bottom: 0; padding-bottom: 4px; }
.crow .av2 { width: 30px; height: 30px; font-size: 10px; }
.cbody { min-width: 0; }
.chead { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 13px; }
.chead b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.cwhen { font-family: var(--font-num); font-size: 11.5px; color: var(--ink-3); margin-left: auto; flex: none; }
.cdel {
  border: 0; background: none; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 600;
  color: var(--ink-3); padding: 0 0 0 4px; flex: none; transition: color .12s;
}
.cdel:hover { color: var(--down); }
.cdel:disabled { opacity: .5; cursor: default; }
.ctext { margin: 5px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); overflow-wrap: anywhere; }

/* ---------- profit curve ----------
   The shape behind the profit figure: whether it was earned steadily or on one
   lucky call. The zero line is always drawn, so "up 400" and "down 400" cannot
   render as the same picture. */
.eq { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px clamp(14px, 1.4vw, 20px) 12px; margin-bottom: 18px; }
.eqhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.eqhead .lab { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.eqsub { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.eqread { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: var(--ink-3); text-align: right; }
.eqread b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 650; color: var(--ink); }
.eqread b.gain { color: var(--up); }
.eqread b.loss { color: var(--down); }
.eqplot { height: 132px; }
.eqplot svg { width: 100%; height: 100%; display: block; overflow: visible; }
.eqa { stroke: none; }
.eqa.up { fill: var(--up-fill); }
.eqa.down { fill: var(--down-fill); }
.eql { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.eql.up { stroke: var(--up); }
.eql.down { stroke: var(--down); }
.eqz { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.eqd.up { fill: var(--up); }
.eqd.down { fill: var(--down); }
.eqempty { display: flex; flex-direction: column; gap: 5px; padding: 6px 0 4px; }
.eqempty b { font-size: 13.5px; font-weight: 600; }
.eqempty span { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; max-width: 62ch; }

@media (max-width: 620px) {
  .eqplot { height: 104px; }
  .eqread { width: 100%; justify-content: flex-start; text-align: left; }
  .crow { grid-template-columns: 26px minmax(0, 1fr); gap: 9px; }
  .crow .av2 { width: 26px; height: 26px; font-size: 9px; }
  .cwhen { margin-left: 0; }
}

/* ---------- resolution notices ----------
   A bell in the header and a panel under it. The dot is a count rather than a
   plain mark because "three of your calls resolved" and "one did" are worth
   different amounts of attention. */
.bellwrap { position: relative; flex: none; }
.bell {
  position: relative; width: 37px; height: 37px; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r-sm);
  color: var(--ink-3); cursor: pointer; transition: color .13s, border-color .13s, background .13s;
}
.bell svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bell:hover { color: var(--ink); border-color: var(--line-2); background: var(--surface); }
.bell[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.bell.has { color: var(--ink); }
.bell .dot {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--down); color: #fff; font-family: var(--font-num);
  font-size: 10.5px; font-weight: 700; font-style: normal; line-height: 1;
  border: 1.5px solid var(--bg);
}

.notif {
  position: absolute; right: 0; top: calc(100% + 9px); z-index: 60;
  width: min(384px, calc(100vw - 24px));
  background: var(--raise); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-3); overflow: hidden;
  animation: notifin .16s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes notifin { from { opacity: 0; transform: translateY(-5px) scale(.985); } }
.nhead {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.nhead b { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.ncount { font-size: 11px; font-weight: 700; color: var(--down); background: var(--down-soft); border-radius: 999px; padding: 2px 8px; }
.nlist { max-height: min(56vh, 420px); overflow-y: auto; }
.nempty { padding: 22px 16px; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }

.nrow {
  width: 100%; display: flex; gap: 11px; align-items: flex-start; text-align: left;
  padding: 11px 14px; border: 0; border-bottom: 1px solid var(--line);
  background: none; font: inherit; color: inherit; cursor: pointer; transition: background .12s;
}
.nrow:last-of-type { border-bottom: 0; }
.nrow:hover { background: var(--surface-2); }
/* Unread is a bar in the gutter, not a wash over the row: the row still has to
   be readable, and a tinted background on half the list makes neither half so. */
.nrow.unread { box-shadow: inset 2.5px 0 0 var(--accent); }
.nrow .glyph { width: 32px; height: 32px; border-radius: 8px; font-size: 10px; flex: none; }
.nbody { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.ntop { display: flex; align-items: baseline; gap: 8px; }
.ntop b { font-size: 13px; font-weight: 620; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ntop .cwhen { margin-left: auto; flex: none; }
.nline { display: flex; align-items: center; gap: 7px; }
.nside { font-size: 10px; font-weight: 750; letter-spacing: .05em; color: var(--ink-3); }
.nside.up { color: var(--up); }
.nside.down { color: var(--down); }
.nside.stable { color: var(--flat); }
.ndelta { font-size: 13px; font-weight: 700; }
.ndelta.gain { color: var(--up); }
.ndelta.loss { color: var(--down); }
.nline .outcome { margin-left: auto; font-size: 9.5px; padding: 2px 6px; }
.nfine { font-size: 11px; color: var(--ink-3); }
.nfoot {
  width: 100%; border: 0; border-top: 1px solid var(--line); background: var(--surface-2);
  padding: 10px; font: inherit; font-size: 12px; font-weight: 650; color: var(--ink-2);
  cursor: pointer; transition: color .12s, background .12s;
}
.nfoot:hover { color: var(--accent); background: var(--surface-3); }

/* ---------- command palette ----------
   One dialog over a dimmed page, pinned near the top rather than centred: the
   list grows downward as you type, and a centred box would slide the input
   around under the cursor while you were still using it. */
.palwrap {
  position: fixed; inset: 0; z-index: 200; display: flex; justify-content: center;
  padding: clamp(40px, 11vh, 120px) 16px 16px;
  background: color-mix(in srgb, var(--ink) 34%, transparent);
  backdrop-filter: blur(3px);
  animation: palfade .13s ease-out both;
}
@keyframes palfade { from { opacity: 0; } }
.pal {
  width: min(620px, 100%); max-height: min(70vh, 620px); display: flex; flex-direction: column;
  background: var(--raise); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-3); overflow: hidden;
  animation: palrise .18s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes palrise { from { opacity: 0; transform: translateY(-10px) scale(.99); } }

.palbar { display: flex; align-items: center; gap: 11px; padding: 0 14px; border-bottom: 1px solid var(--line); flex: none; }
.palbar > svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--ink-3); stroke-width: 2; }
.palbar input {
  flex: 1; min-width: 0; height: 52px; border: 0; background: none; outline: none;
  font: inherit; font-size: 15.5px; color: var(--ink);
}
.palbar input::placeholder { color: var(--ink-3); }
.palbar kbd {
  flex: none; font-family: var(--font-num); font-size: 10px; font-weight: 650; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; background: var(--surface-2);
}

.palbody { overflow-y: auto; padding: 6px; }
.palsec {
  padding: 10px 10px 5px; font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.palrow {
  width: 100%; display: flex; align-items: center; gap: 11px; text-align: left;
  padding: 8px 10px; border: 0; border-radius: var(--r-sm); background: none;
  font: inherit; color: inherit; cursor: pointer;
}
/* The highlight follows the keyboard, and the mouse moves the keyboard rather
   than painting a second, competing hover state. There is only ever one
   selected row, however you are driving it. */
.palrow.on { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-fill); }
.palicon { flex: none; width: 30px; height: 30px; display: grid; place-items: center; }
.palicon .glyph { width: 30px; height: 30px; border-radius: 8px; font-size: 9.5px; }
.palicon .av2 { width: 28px; height: 28px; font-size: 10px; }
.palmark {
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px;
  background: var(--surface-3); color: var(--ink-3);
}
.palmark svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.palrow.on .palmark { background: var(--accent-fill); color: var(--accent); }
.palmid { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.palmid b { font-size: 13.5px; font-weight: 620; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palmid span { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palval { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.palval b { font-size: 13px; font-weight: 700; color: var(--ink); }
.palacc { font-size: 10.5px; color: var(--ink-3); }
.palnone { padding: 8px 12px 14px; font-size: 12.5px; color: var(--ink-3); }
.palfoot {
  display: flex; gap: 16px; padding: 11px 12px 6px; margin-top: 4px;
  border-top: 1px solid var(--line); font-size: 11px; color: var(--ink-3);
}

/* ---------- keyboard shortcuts ---------- */
.keys {
  width: min(430px, 100%); align-self: flex-start;
  background: var(--raise); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-3); padding: 20px;
  animation: palrise .18s cubic-bezier(.2, .8, .3, 1) both;
}
.keys h3 { font-size: 15px; font-weight: 700; margin-bottom: 14px; }
.keylist { display: flex; flex-direction: column; gap: 2px; }
.keyrow { display: flex; align-items: center; gap: 12px; padding: 5px 0; font-size: 12.5px; color: var(--ink-2); }
.kbs { flex: none; display: flex; gap: 4px; width: 88px; }
.kbs kbd {
  font-family: var(--font-num); font-size: 10.5px; font-weight: 650; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 4px; padding: 2px 6px; min-width: 20px; text-align: center;
}
.keys .fine { margin-top: 14px; }

/* ---------- skeletons ----------
   The shape of the page that is coming, so nothing jumps when it lands. */
.skel { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.sk {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.sk-head { height: 74px; }
.sk-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.sk-stat { height: 64px; }
.sk-row { height: 44px; }
.skel-pal { padding: 4px 10px 10px; }
.skel-pal .sk-row { height: 38px; }
.skel-notif { padding: 12px 14px; }

/* ---------- profiles ---------- */
.phead { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; margin-bottom: 16px; }
.av4 {
  width: 60px; height: 60px; flex: none; border-radius: 50%; display: grid; place-items: center;
  overflow: hidden; font-size: 19px; font-weight: 700; color: #fff;
  background: hsl(var(--h, 215) 42% 46%);
}
.av4 img { width: 100%; height: 100%; object-fit: cover; }
.av4.ok { box-shadow: 0 0 0 2px var(--accent); }
.pwho { min-width: 0; flex: 1; }
.pname { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pname h2 { margin: 0; }
.youtag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft); border-radius: 3px; padding: 2px 5px;
}
.psub { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 5px; font-size: 12.5px; color: var(--ink-3); }
.pacts { display: flex; gap: 9px; flex-wrap: wrap; }

/* A handle, anywhere it appears, is a link to the record behind it. */
.hlink {
  border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--ink);
  cursor: pointer; border-radius: 3px; transition: color .12s;
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hlink:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.hlink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.takes { display: flex; flex-direction: column; }
.take {
  width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: none;
  font: inherit; color: inherit; cursor: pointer; padding: 13px 16px; transition: background .12s;
}
.take:last-child { border-bottom: 0; }
.take:hover { background: var(--surface-2); }
.ttop { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.ttop b { font-size: 13px; font-weight: 650; }
.ttop .cwhen { margin-left: auto; }
.take .ctext { margin: 0; }

/* ---------- position value and selling out ----------
   A position is a holding with a price, so the panel says what that price is,
   where it sits between the two outcomes, and what the odds behind it are. */
.marks {
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2);
  padding: 13px; margin-top: 12px; display: flex; flex-direction: column; gap: 9px;
}
.markbig .lab { margin-bottom: 3px; }
.mrow { display: flex; align-items: baseline; gap: 9px; }
.mrow b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.mrow b.gain { color: var(--up); }
.mrow b.loss { color: var(--down); }

.markbar { position: relative; height: 7px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.markbar i { display: block; height: 100%; border-radius: 999px; transition: width .45s cubic-bezier(.2,.8,.3,1); }
.markbar i.up { background: var(--up); }
.markbar i.down { background: var(--down); }
/* Where the position was bought. Everything to the right of this tick is
   profit and everything to the left of it is not, which is the whole story of
   the trade in one mark. */
.markbar .entry {
  position: absolute; top: -3px; width: 2px; height: 13px; border-radius: 1px;
  background: var(--ink); opacity: .55; transform: translateX(-1px);
}
.markends, .markodds { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); }
.markodds { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

.sell {
  width: 100%; margin-top: 11px; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 13px 15px; border-radius: var(--r-md); cursor: pointer;
  border: 1px solid var(--line-2); background: var(--surface);
  font: inherit; font-size: 13.5px; font-weight: 650; color: var(--ink-2);
  transition: border-color .13s, color .13s, background .13s;
}
.sell b { font-size: 15px; font-weight: 700; color: var(--ink); }
.sell.up:hover { border-color: var(--up); color: var(--up); background: var(--up-soft); }
.sell.up:hover b { color: var(--up); }
.sell.down:hover { border-color: var(--down); color: var(--down); background: var(--down-soft); }
.sell.down:hover b { color: var(--down); }
.sell:disabled, .sell.placing { opacity: .6; cursor: default; }

/* The portfolio row shows a live value where it used to show a static stake. */
/* --- holding rewards --- */
.carrynote {
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2);
  padding: 10px 12px; font-size: 11.5px; line-height: 1.55; color: var(--ink-3);
}
.carrynote b { color: var(--ink-2); font-weight: 680; }

.holdbox {
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--up-soft);
  padding: 11px 13px; display: flex; flex-direction: column; gap: 5px;
}
.hrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hrow b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 700; }
.hrow b.gain { color: var(--up); }
.hsub { font-size: 11.5px; color: var(--ink-3); line-height: 1.55; }
.prow .lab.held { color: var(--up); letter-spacing: .04em; text-transform: none; font-size: 10.5px; }

.prow .v.gain { color: var(--up); }
.prow .v.loss { color: var(--down); }

@media (prefers-reduced-motion: reduce) {
  .sk { animation: none; }
  .side.pressed { animation: none; }
  .side.pressed::before { animation: none; opacity: 0; }
  .pal, .keys, .notif, .palwrap { animation: none; }
}

@media (max-width: 560px) {
  .acts { grid-template-columns: 1fr .7fr 1fr; gap: 5px; }
  .acts button { padding-left: 4px; padding-right: 4px; font-size: 11px; }
}

@media (max-width: 720px) {
  .search > span, .search kbd.slash { display: none; }
  .search { flex: 0 0 34px; max-width: 34px; min-width: 34px; padding: 0; justify-content: center; }
  .search > svg { position: static; transform: none; }
  .sides.three { grid-template-columns: 1fr; gap: 8px; }
  .sides.three .side { flex-direction: row; justify-content: flex-start; gap: 11px; padding: 11px 14px; }
  .sides.three .side .against { margin-left: auto; }
  .phead { gap: 12px; }
  .av4 { width: 48px; height: 48px; font-size: 16px; }
  .palwrap { padding-top: 24px; }
}

/* =========================================================================
   Update markets

   A date market is not an item market and is not dressed as one: no glyph, no
   rarity hue, no cone. What it has instead is a projection with a visible
   provenance, so the card leads with where the number came from and the two
   prices sit side by side adding to a hundred. Green is YES and red is NO -
   the same green and red the rest of the board uses for a value going up or
   down, because a bet that the thing happens is the optimistic side either
   way.
   ========================================================================= */

.tag.ok { border-color: transparent; background: var(--up-soft); color: var(--up); }
.tag.warn { border-color: transparent; background: var(--editorial-soft); color: var(--editorial); }

/* Update markets on the board.
   
   Same card as the calendar page, sitting above the item grid: these are
   markets in the same game bought with the same REP, so they are shown as
   markets rather than as an advert for a different page. */

/* The date card is an item card whose glyph happens to be a deadline, so it
   only says what differs: the chance reads a shade bigger than an item's
   value does, because it is the one number the whole card is about. */
.evmk .mkval .v { font-size: 22px; }

.ehero { margin-bottom: 20px; }
.ehero h1 { margin: 0; font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; letter-spacing: -.035em; }
.ehero .sub { margin: 9px 0 0; max-width: 74ch; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.ehero .muted { margin: 7px 0 0; font-size: 12.5px; }

.esrc { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
.esrc:hover { border-bottom-color: currentColor; }

.elist { display: flex; flex-direction: column; gap: 16px; }
.efoot { margin-top: 20px; max-width: 90ch; font-size: 12px; line-height: 1.6; }

.ecard {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  box-shadow: var(--shadow-1); padding: clamp(15px, 1.4vw, 22px);
  display: flex; flex-direction: column; gap: 14px;
}
.ehead { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.ehead h2 { margin: 0; font-size: 19px; font-weight: 620; letter-spacing: -.03em; }
.ehead .meta { margin-top: 8px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.eproj { margin-left: auto; text-align: right; display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.eproj .cap { font-size: 10px; font-weight: 620; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.eproj .v { font-family: var(--font-num); font-size: 22px; font-weight: 600; letter-spacing: -.03em; }
.eproj .band { font-family: var(--font-num); font-size: 11.5px; color: var(--ink-3); cursor: help; }
.eblurb { margin: 0; max-width: 82ch; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }

.ehold {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  font-size: 10.5px; font-weight: 680; letter-spacing: .05em; padding: 3px 8px; border-radius: 5px;
}
.ehold i { font-family: var(--font-num); font-style: normal; font-weight: 600; opacity: .8; }
.ehold.yes { background: var(--up-fill); color: var(--up-2); }
.ehold.no { background: var(--down-fill); color: var(--down-2); }

.emore { border-top: 1px solid var(--line); padding-top: 11px; }
.emore summary { cursor: pointer; font-size: 12.5px; font-weight: 620; color: var(--ink-3); }
.emore summary:hover { color: var(--accent); }
.emore .muted { margin: 9px 0 0; font-size: 12px; }
.ehist { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.ehrow { display: flex; align-items: baseline; gap: 10px; font-size: 12.5px; color: var(--ink-2); }
.ehrow b { font-family: var(--font-num); font-weight: 620; color: var(--ink); min-width: 38px; }
.ehrow.skipped b { color: var(--ink-3); }
.ehrow .esrc { font-size: 11px; margin-left: auto; }

/* The price bar. One row, two colours, no axis: all it has to show is which
   way the weight sits and roughly how far. */
.ebar { height: 6px; border-radius: 99px; background: var(--down-fill); overflow: hidden; cursor: help; }
.ebar i { display: block; height: 100%; background: var(--up); }
.ebar.big { height: 9px; margin: 0 clamp(16px, 1.5vw, 26px) 4px; }

/* Two sides, sized equally. The item board has three because an item can sit
   still; a date cannot. */
.esides { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.eside {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 13px 10px;
  border: 1.5px solid var(--line-2); border-radius: var(--r-md); background: var(--surface);
  cursor: pointer; font: inherit; transition: border-color .13s, background .13s, transform .1s;
}
.eside:hover { transform: translateY(-1px); }
.eside b { font-size: 12px; font-weight: 720; letter-spacing: .08em; }
.eside .price { font-family: var(--font-num); font-size: 24px; font-weight: 620; letter-spacing: -.035em; }
.eside .pay { font-size: 10.5px; color: var(--ink-3); }
.eside.yes:hover, .eside.yes[aria-pressed="true"] { border-color: var(--up); background: var(--up-soft); }
.eside.yes b, .eside.yes .price { color: var(--up); }
.eside.no:hover, .eside.no[aria-pressed="true"] { border-color: var(--down); background: var(--down-soft); }
.eside.no b, .eside.no .price { color: var(--down); }
.esides[data-picked] .eside:not([aria-pressed="true"]) { opacity: .55; }

.ebox {
  border-top: 1px solid var(--line); padding: clamp(15px, 1.4vw, 22px);
  display: flex; flex-direction: column; gap: 10px;
}
.ebox .muted { margin: 0; font-size: 13px; line-height: 1.6; }
.enote { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.enote li { font-size: 13px; line-height: 1.55; color: var(--ink-2); }

.eppl { display: flex; flex-direction: column; gap: 8px; }
.eprow { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.eprow .muted { font-size: 11px; }
.eprow .ehold { margin-left: auto; }

.eresult { border-radius: var(--r-md); padding: 11px 13px; font-size: 13px; line-height: 1.5; }
.eresult.win { background: var(--up-soft); color: var(--up-2); }
.eresult.loss { background: var(--down-soft); color: var(--down-2); }

.poscell.up .v { color: var(--up); }
.poscell.down .v { color: var(--down); }

@media (max-width: 720px) {
  .ehead { gap: 10px; }
  .eproj { margin-left: 0; text-align: left; align-items: flex-start; }
}

/* The connect-to-trade gate that replaces the buy button for a session with no
   verified Roblox account. It sits where the submit button sat, so the panel
   keeps its shape whether or not the reader can take a side. */
.gate { display: flex; flex-direction: column; gap: 10px; }

/* =========================================================================
   Phone

   Everything below is the narrow-screen layer, kept in one block at the end
   so the rules that only exist to undo a desktop assumption are readable as
   a set rather than scattered through the file.
   ========================================================================= */

@media (max-width: 860px) {
  /* The header becomes two rows: identity and account on top, the sections
     underneath as a scroller. The nav used to be hidden outright here, which
     left Trending, My Forecasts and the Leaderboard unreachable on a phone -
     the palette knew about them but nothing on screen did. */
  .bar .wrap { height: auto; flex-wrap: wrap; gap: 9px; padding-top: 9px; padding-bottom: 0; }
  .brand b { font-size: 17.5px; }
  .search { order: 1; }
  .barright { order: 2; gap: 8px; }
  .nav {
    display: flex; order: 3; flex: 1 0 100%; gap: 2px; align-items: stretch;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin: 0 calc(-1 * clamp(14px, 2.4vw, 40px)); padding: 0 clamp(14px, 2.4vw, 40px);
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav::before { display: none; }
  .nav button { flex: none; padding: 9px 11px 11px; font-size: 14.5px; }

  /* The bell panel anchors to the header rather than to the bell. On a phone
     the bell sits near the left edge, and a 384px panel hung off its right
     edge ran straight off the screen. .bar is sticky, so it is already a
     containing block: dropping the wrapper's position lets the panel span the
     viewport under the header at any width. */
  .bellwrap { position: static; }
  .notif {
    left: clamp(14px, 2.4vw, 40px); right: clamp(14px, 2.4vw, 40px);
    width: auto; top: calc(100% + 7px); z-index: 70;
  }
  .nlist { max-height: min(62vh, 460px); }
}

@media (max-width: 720px) {
  .bar .wrap { padding-bottom: 0; }
  /* .wrap drops to a 13px gutter here, so the two lanes that bleed to the
     screen edge have to match it or the page gains a pixel of sideways
     scroll. */
  .nav { margin: 0 -13px; padding: 0 13px; }
  .bell, .themer { width: 34px; height: 34px; }
  .wallet { padding: 4px 5px 4px 8px; gap: 7px; }
  .wallet b { font-size: 15px; }
  .wallet .av { width: 25px; height: 25px; }
  .wallet .rbn { max-width: 72px; }

  /* Every control in one scrolling lane. Wrapped, the six groups stacked four
     rows deep and the first card started halfway down the screen; a lane keeps
     the statuses - the ones actually reached for - at the top left, and the
     rest a swipe away. */
  .filters {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    overscroll-behavior-x: contain; align-items: center; gap: 8px;
    margin: 0 -13px 12px; padding: 1px 13px;
  }
  .filters::-webkit-scrollbar { display: none; }
  .filters > * { flex: none; }
  .filters .pills { flex-wrap: nowrap; }
  .sorter { margin-left: 0; }
  .sorter select { padding: 6px 8px; }
}

@media (max-width: 480px) {
  /* Under ~440px the header row is the constraint, so the name goes and the
     headshot carries the account on its own. */
  .wallet .rbn { display: none; }
  .brand .logo { width: 34px; height: 26px; }
  .brand b { font-size: 16.5px; }

  .pills button { padding: 5px 10px; font-size: 12px; }
  .seg button { padding: 5px 9px; font-size: 11.5px; }
  .sorter span { display: none; }
}

@media (max-width: 1100px) {
  /* The pinned bar carries three sides, not two. On a two-column grid the
     third wrapped onto a second row that fell off the bottom of the viewport,
     so DOWN was unreachable on a phone. */
  .mobar .mba { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .mobar button { padding: 11px 10px; font-size: 12.5px; }
  .mobar .fl { background: var(--flat-fill); color: var(--flat); }
  .mobar .fl[aria-pressed="true"] { background: var(--flat); color: var(--bg); }
}

@media (max-width: 430px) {
  /* Three sides plus the benchmark is more than a 390px bar holds with the
     arrows, and the words carry the meaning on their own. */
  .mobar { gap: 9px; }
  .mobar button { padding: 10px 6px; font-size: 11.5px; }
  .mobar .mba button svg { display: none; }
  .mobar .mbv .v { font-size: 16px; }
}