/* Stock League. Colour roles follow the validated data-viz palette:
   series 1-3 identify players (never their rank); up/down are status colours
   and always ship with an arrow and a sign, never colour alone. */

:root {
  color-scheme: light;
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --wash: #f0efec;
  --text: #0b0b0b;
  --text-2: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  --border-strong: rgba(11, 11, 11, 0.20);
  --ink: #0b0b0b;
  --on-ink: #fcfcfb;
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-8: #e34948;
  --series-ghost: #898781; /* the benchmark: neutral and dashed, not a ninth hue */
  /* The risk chart's other players: a scatter can't keep eight hues apart (any two dots can meet;
     the validator caps it at three), so it shows you in your colour and everyone else in this one
     neutral, named beside each dot. Validated against each of the eight, all pairs, both modes. */
  --series-context: #c3c2b7;
  --up: #006300;
  --down: #d03b3b;
  --warning: #fab219;
  --focus: #2a78d6;
  --shadow: 0 1px 2px rgba(11, 11, 11, 0.04), 0 6px 20px rgba(11, 11, 11, 0.04);
  --radius: 14px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0d0d0d;
    --surface: #1a1a19;
    --wash: #262624;
    --text: #ffffff;
    --text-2: #c3c2b7;
    --muted: #898781;
    --grid: #2c2c2a;
    --axis: #383835;
    --border: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.20);
    --ink: #fcfcfb;
    --on-ink: #0b0b0b;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --series-7: #9085e9;
    --series-8: #e66767;
    --series-context: #c3c2b7;
    --up: #0ca30c;
    --down: #e66767;
    --focus: #3987e5;
    --shadow: none;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d;
  --surface: #1a1a19;
  --wash: #262624;
  --text: #ffffff;
  --text-2: #c3c2b7;
  --muted: #898781;
  --grid: #2c2c2a;
  --axis: #383835;
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.20);
  --ink: #fcfcfb;
  --on-ink: #0b0b0b;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --series-7: #9085e9;
  --series-8: #e66767;
  --series-context: #c3c2b7;
  --up: #0ca30c;
  --down: #e66767;
  --focus: #3987e5;
  --shadow: none;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 15px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a.link { color: var(--focus); }
a.link:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
p { margin: 0; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

.muted { color: var(--text-2); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--page);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 1120px; margin: 0 auto; padding: 0 16px;
  height: 56px; display: flex; align-items: center; gap: 20px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 16px; }
.brand img { width: 26px; height: 26px; }

.tabs { display: flex; gap: 2px; flex: 1; }
.tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px; white-space: nowrap;
  color: var(--text-2); font-weight: 550; font-size: 14px;
}
.tab:hover { color: var(--text); background: var(--wash); }
.tab[aria-current="page"] { color: var(--text); background: var(--wash); }
.tab svg { width: 18px; height: 18px; flex: none; }
.tab .key { width: 12px; }
.tab { position: relative; }
.tab .badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--ink); color: var(--on-ink);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
}

.account-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 6px 5px 12px; border-radius: 999px; border: 1px solid var(--border);
  font-size: 14px; font-weight: 550; color: var(--text-2);
}
.account-link:hover { color: var(--text); background: var(--wash); }
.avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--wash); color: var(--text); font-size: 12px; font-weight: 650;
  box-shadow: inset 0 0 0 2px var(--player, var(--border));
}

.page { max-width: 1120px; margin: 0 auto; padding: 28px 16px 64px; display: grid; gap: 20px; }
.contents { display: contents; }

/* ----------------------------------------------------------- primitives */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  min-width: 0;
}
.card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.card-title { font-size: 15px; font-weight: 650; }
.card-sub { font-size: 13px; color: var(--text-2); }

.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.stack { display: grid; gap: 20px; align-content: start; min-width: 0; }

.eyebrow { font-size: 13px; color: var(--text-2); font-weight: 550; }
.hero {
  font-size: clamp(34px, 6vw, 52px); font-weight: 680; letter-spacing: -0.025em; line-height: 1.08;
}
.hero-sub { font-size: 15px; color: var(--text-2); margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 16px; }

.key {
  display: inline-block; width: 16px; height: 3px; border-radius: 2px;
  background: var(--player, var(--muted)); flex: none; vertical-align: middle;
}
.key.dashed { background: repeating-linear-gradient(90deg, var(--player, var(--muted)) 0 5px, transparent 5px 8px); }

.delta { display: inline-flex; align-items: baseline; gap: 4px; font-weight: 600; white-space: nowrap; }
.delta .arrow { font-size: 0.72em; }
.delta.up { color: var(--up); }
.delta.down { color: var(--down); }
.delta.flat { color: var(--text-2); }
.delta .pct { font-weight: 500; }

.pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 650; letter-spacing: 0.03em;
  padding: 2px 7px; border-radius: 999px;
  background: var(--wash); color: var(--text-2); white-space: nowrap;
}
.pill.you { background: transparent; box-shadow: inset 0 0 0 1px var(--border-strong); text-transform: uppercase; }
.status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.status .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status.filled { color: var(--up); }
.status.pending { color: var(--text-2); }
.status.pending .dot { background: var(--warning); }
.status.rejected, .status.expired { color: var(--down); }
.status.cancelled { color: var(--text-2); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: 10px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--wash); }
.btn-primary { background: var(--ink); color: var(--on-ink); border-color: transparent; }
.btn-primary:hover { background: var(--ink); opacity: 0.88; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-small { height: 30px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
.btn-block { width: 100%; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--text-2); }

.seg { display: inline-flex; background: var(--wash); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button {
  border: 0; background: transparent; color: var(--text-2);
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 6px 12px; border-radius: 8px; cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10); }
.seg button:disabled { opacity: 0.35; cursor: not-allowed; }
.seg.wide { display: flex; }
.seg.wide button { flex: 1; padding: 8px 12px; font-size: 14px; }

label.field { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-2); }
input, textarea {
  /* 16px or more, or iPhone Safari zooms the page in on every tap */
  font: inherit; font-size: 16px; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 10px 12px; width: 100%;
}
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
textarea { resize: vertical; min-height: 64px; }
input::placeholder, textarea::placeholder { color: var(--muted); }

.error-text { color: var(--down); font-size: 13px; font-weight: 550; }
.notice {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: 10px; background: var(--wash); font-size: 14px;
}
.notice.bad { box-shadow: inset 3px 0 0 var(--down); }
.empty { color: var(--text-2); font-size: 14px; padding: 8px 0; }
.loading { color: var(--text-2); font-size: 14px; padding: 40px 0; text-align: center; }
.refreshing { opacity: 0.6; transition: opacity 0.2s; }

.banner {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  padding: 12px 16px; border-radius: 12px; font-size: 14px;
  background: var(--wash);
  border: 1px solid var(--warning);
}
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .topbar { background: color-mix(in srgb, var(--page) 86%, transparent); }
  .banner {
    background: color-mix(in srgb, var(--warning) 14%, var(--surface));
    border-color: color-mix(in srgb, var(--warning) 45%, transparent);
  }
}
.banner .pill { background: var(--warning); color: #0b0b0b; }
.footer { font-size: 12px; color: var(--text-2); text-align: center; padding-top: 12px; }

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

.players { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.player-card { display: grid; gap: 10px; transition: border-color 0.15s; }
.player-card:hover { border-color: var(--border-strong); }
.player-card.ghost { background: transparent; box-shadow: none; }
.pc-head { display: flex; align-items: center; gap: 8px; font-weight: 650; }
.pc-head .rank { margin-left: auto; font-size: 13px; color: var(--text-2); font-weight: 600; }
.pc-value { font-size: 28px; font-weight: 680; letter-spacing: -0.02em; line-height: 1.1; }
.pc-meta { font-size: 13px; color: var(--text-2); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--text-2); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }

.chart { position: relative; height: 300px; }
.chart.short { height: 260px; }
.chart-tip {
  position: absolute; top: 8px; z-index: 3; pointer-events: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
  padding: 8px 10px; font-size: 12px; display: none; min-width: 140px;
}
.chart-tip .tip-title { color: var(--text-2); margin-bottom: 4px; }
.tip-row { display: flex; align-items: center; gap: 8px; line-height: 1.6; }
.tip-row strong { font-weight: 650; font-variant-numeric: tabular-nums; }
.tip-row span:last-child { color: var(--text-2); }

details.table-view { margin-top: 12px; font-size: 13px; }
details.table-view summary { cursor: pointer; color: var(--text-2); font-weight: 550; }
details.table-view .table-scroll { margin-top: 8px; max-height: 260px; overflow: auto; }

/* Risk vs return: plain SVG. Hairline grid, the zero line a step stronger; dots ringed in the
   surface colour so neighbours stay apart; you in your colour, the others neutral (and in theirs
   while hovered); text in text colours, never the players'. */
.key.dot { width: 10px; height: 10px; border-radius: 50%; }
.key.dot.dashed { background: none; border: 2px dashed var(--player, var(--muted)); }
.scatter { position: relative; }
.scatter svg { display: block; }
.scatter text { font-size: 12px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.scatter .axis-title { fill: var(--text-2); font-variant-numeric: normal; }
.scatter .grid { stroke: var(--grid); stroke-width: 1; }
.scatter .zero { stroke: var(--axis); stroke-width: 1; }
.scatter .ring { fill: var(--surface); }
.scatter .hollow { fill: var(--surface); stroke-width: 2; stroke-dasharray: 2.5 1.7; }
.scatter .pt-label { fill: var(--text-2); font-weight: 550; font-variant-numeric: normal; }
.scatter .pt-label.me { fill: var(--text); font-weight: 650; }
.scatter .leader { stroke: var(--muted); stroke-width: 1; }
.scatter .dot, .scatter .pt-label, .scatter .leader { transition: opacity 0.15s; }
.scatter .dim { opacity: 0.25; }
.scatter .hit { cursor: pointer; outline: none; }
.scatter .hit circle { fill: transparent; }
.scatter .focus-ring { fill: none; stroke: var(--focus); stroke-width: 2; pointer-events: none; }
.scatter .scatter-tip { display: block; }
.risk-missing { font-size: 13px; color: var(--text-2); margin-top: 10px; }
/* About the chart's own height, with its legend, note and table toggle, so it lands without a jump. */
.scatter-wait { min-height: 380px; display: grid; place-items: center; }
@media (max-width: 539px) { .scatter-wait { min-height: 400px; } }

.feed { list-style: none; margin: 0; padding: 0; }
.feed > li {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 2px 10px;
  padding: 12px 0; border-bottom: 1px solid var(--grid); align-items: baseline;
}
.feed > li:last-child { border-bottom: 0; padding-bottom: 0; }
.feed > li:first-child { padding-top: 0; }
.feed .key { margin-top: 8px; align-self: start; }
.feed .what { font-weight: 550; }
.feed .what a { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.feed .when { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.feed .detail { grid-column: 2 / -1; font-size: 13px; color: var(--text-2); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.feed .note { grid-column: 2 / -1; font-size: 14px; color: var(--text); margin-top: 4px; padding-left: 10px; box-shadow: inset 2px 0 0 var(--border-strong); }

/* ------------------------------------------------------------ portfolio */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.tile-label { font-size: 13px; color: var(--text-2); }
.tile-value { font-size: 20px; font-weight: 650; margin-top: 2px; letter-spacing: -0.01em; }

.table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 14px; }
.table th {
  text-align: left; font-weight: 550; font-size: 12px; color: var(--text-2);
  padding: 0 10px 10px; border-bottom: 1px solid var(--grid); white-space: nowrap;
}
.table td { padding: 12px 10px; border-bottom: 1px solid var(--grid); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table th:first-child, .table td:first-child { padding-left: 0; }
.table th:last-child, .table td:last-child { padding-right: 0; }
.table .r { text-align: right; }
.table tbody tr.clickable { cursor: pointer; }
.table tbody tr.clickable:hover td { background: var(--wash); }
.sym { font-weight: 650; display: inline-flex; gap: 6px; align-items: center; }
.sym-name { font-size: 12px; color: var(--text-2); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.split { font-size: 12px; color: var(--text-2); margin-top: 2px; white-space: nowrap; }

/* Risk card: up to three measures a row on a wide screen, one on a phone; each a short value
   and a plain-English line. */
.risk-grid {
  display: grid; gap: 16px 24px;
  grid-template-columns: repeat(auto-fill, minmax(max(210px, calc((100% - 48px) / 3)), 1fr));
}
.risk-grid.four { grid-template-columns: repeat(auto-fill, minmax(max(190px, calc((100% - 72px) / 4)), 1fr)); }
.risk-stat { border-top: 1px solid var(--grid); padding-top: 12px; min-width: 0; }
.risk-value { font-size: 20px; font-weight: 650; letter-spacing: -0.01em; margin-top: 2px; overflow-wrap: anywhere; }
.risk-value .aside { font-size: 15px; font-weight: 550; color: var(--text-2); letter-spacing: 0; }
.risk-note { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.risk-part { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin: 22px 0 12px; }
.risk-part h3 { font-size: 14px; font-weight: 650; }
.risk-flag { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13px; color: var(--text-2); margin-bottom: 14px; }
.method { display: grid; gap: 8px; margin-top: 10px; max-width: 80ch; color: var(--text-2); }

.bars { display: grid; gap: 10px; }
.bar-row { display: grid; grid-template-columns: minmax(70px, 120px) minmax(0, 1fr) 52px; gap: 10px; align-items: center; font-size: 13px; }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-fill { height: 8px; border-radius: 0 4px 4px 0; background: var(--player, var(--series-1)); min-width: 2px; }
.bar-row .r { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }

/* ---------------------------------------------------------------- trade */

.search { position: relative; }
.search input { padding-left: 40px; height: 48px; font-size: 16px; border-radius: 12px; }
.search .search-icon { position: absolute; left: 13px; top: 14px; width: 20px; height: 20px; color: var(--muted); }
.search-results {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14); padding: 6px; margin: 0; list-style: none;
  max-height: 380px; overflow: auto;
}
.search-results li {
  display: grid; grid-template-columns: minmax(90px, auto) minmax(0, 1fr) auto; gap: 12px;
  align-items: center; padding: 10px; border-radius: 8px; cursor: pointer;
}
.search-results li[aria-selected="true"], .search-results li:hover { background: var(--wash); }
.search-results .hit-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: 14px; }

.trade-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start;
  grid-template-areas: "quote ticket" "facts ticket"; grid-template-rows: auto 1fr;
}
.quote-area { grid-area: quote; }
.facts-area { grid-area: facts; min-width: 0; }
.ticket { grid-area: ticket; position: sticky; top: 76px; display: grid; gap: 14px; }

.quote-head { display: grid; gap: 4px; }
.quote-title { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.quote-title h1 { font-size: 24px; }
.quote-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 13px; color: var(--text-2); }
.price-row { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; margin-top: 10px; }
.price { font-size: clamp(32px, 5vw, 44px); font-weight: 680; letter-spacing: -0.02em; line-height: 1.1; }
.market-state { display: inline-flex; align-items: center; gap: 6px; }
.market-state .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.market-state.open .dot { background: var(--up); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px 20px; }
.stat-label { font-size: 12px; color: var(--text-2); }
.stat-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.about { font-size: 14px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.about.open { display: block; }

.preview { display: grid; gap: 6px; font-size: 14px; }
.preview-row { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.preview-row span:first-child { color: var(--text-2); }
.preview-row.total { font-weight: 650; padding-top: 6px; border-top: 1px solid var(--grid); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font: inherit; font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 999px; cursor: pointer;
}
.chip:hover { background: var(--wash); }

.suffixes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 16px; font-size: 14px; }
.suffixes code { font: 600 13px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--wash); padding: 1px 6px; border-radius: 6px; }

/* ----------------------------------------------------------------- chat */

/* The chat fills the window below the top bar; only the message list scrolls. */
.page-chat { display: flex; flex-direction: column; height: calc(100vh - 57px); height: calc(100dvh - 57px); padding-bottom: 20px; }
.chat { flex: 1; min-height: 320px; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.chat-head {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 12px;
  padding: 14px 20px 12px; border-bottom: 1px solid var(--border);
}
.chat-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 16px; }
.chat-earlier { display: flex; justify-content: center; padding: 12px 0 0; }
.chat-empty { padding: 32px 0; text-align: center; }
.chat-list { list-style: none; margin: 0; padding: 0; }
.chat-day, .chat-new {
  display: flex; align-items: center; gap: 12px; margin: 18px 0 0;
  font-size: 12px; font-weight: 600; color: var(--text-2);
}
.chat-day::before, .chat-day::after, .chat-new::before { content: ""; flex: 1; height: 1px; background: var(--grid); }
.chat-new { color: var(--text); }
.chat-new::before { background: var(--border-strong); }
.chat-new span { padding: 1px 8px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-size: 11px; }
.chat-msg { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; column-gap: 10px; align-items: start; padding: 1px 0; }
.chat-msg.start { margin-top: 14px; }
.chat-msg .key { grid-column: 1; grid-row: 1; align-self: center; }
.chat-who { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; }
.chat-name { font-weight: 650; font-size: 14px; overflow-wrap: anywhere; }
.chat-who time { font-size: 12px; color: var(--text-2); }
/* Plain text as typed: line breaks kept, and a long word wraps instead of widening the page. */
.chat-text { grid-column: 2; max-width: 72ch; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.chat-text.deleted { color: var(--text-2); font-style: italic; font-size: 14px; }
.chat-del {
  grid-column: 3; grid-row: 1; margin: -4px 0;
  width: 28px; height: 28px; display: inline-grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer;
}
.chat-del:hover { background: var(--wash); color: var(--text); }
.chat-del svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .chat-del { opacity: 0; }
  .chat-msg:hover .chat-del, .chat-del:focus-visible { opacity: 1; }
}
.chat-confirm {
  grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  margin: 4px 0 2px; font-size: 13px; color: var(--text-2);
}
.chat-jump { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14); }
.chat-composer {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px;
  padding: 12px 20px 14px; border-top: 1px solid var(--border);
}
.chat-composer textarea { flex: 1; min-width: 0; min-height: 0; max-height: 168px; resize: none; overflow-y: auto; }
.chat-composer .btn { height: 46px; min-width: 84px; }
.chat-composer .error-text, .chat-left { flex-basis: 100%; }
.chat-left { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------- AI assistant access */

.token-list { list-style: none; margin: 0; padding: 0; }
.token-list > li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 12px 0; border-bottom: 1px solid var(--grid);
}
.token-list > li:first-child { padding-top: 0; }
.token-list > li:last-child { border-bottom: 0; padding-bottom: 0; }
/* The name takes the room, so Revoke stays beside it on a phone, and at the right if it ever wraps. */
.token-what { display: grid; gap: 2px; flex: 1 1 12em; min-width: 0; }
.token-list > li > .btn { margin-left: auto; }
.token-label { font-weight: 600; overflow-wrap: anywhere; }
.token-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; color: var(--text-2); }
.token-create { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.token-create .field { flex: 1 1 260px; }
/* Shown only once, so it stands out, marked like the practice banner. */
.token-new {
  display: grid; gap: 10px; padding: 14px; border-radius: 10px;
  background: var(--wash); box-shadow: inset 3px 0 0 var(--warning);
}
.token-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* The whole token on screen, wrapped, and one tap selects all of it. */
.token-value {
  flex: 1 1 180px; min-width: 0; padding: 9px 12px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border-strong);
  font: 500 14px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere; -webkit-user-select: all; user-select: all;
}

/* ---------------------------------------------------------- login, misc */

.login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.login .card { width: min(380px, 100%); display: grid; gap: 16px; padding: 28px; }
.login .brand { font-size: 20px; }

.toasts {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  display: grid; gap: 8px; z-index: 50; width: min(420px, calc(100% - 32px));
}
.toast {
  background: var(--ink); color: var(--on-ink); border-radius: 12px; padding: 12px 16px;
  font-size: 14px; font-weight: 550; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* --------------------------------------------------------------- mobile */

@media (max-width: 860px) {
  .trade-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "quote" "ticket" "facts"; grid-template-rows: auto; }
  .ticket { position: static; }
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 719px) {
  /* backdrop-filter would make the header the containing block for the fixed tab bar */
  .topbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--page); }
  .topbar-inner { height: 52px; }
  .page { padding: 18px 16px calc(88px + env(safe-area-inset-bottom)); gap: 16px; }
  .card { padding: 16px; }
  .tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: var(--surface); border-top: 1px solid var(--border);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    justify-content: space-around;
  }
  .tab { flex-direction: column; gap: 3px; font-size: 11px; padding: 6px 4px; border-radius: 10px; flex: 1; min-width: 0; }
  .tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tab[aria-current="page"] { background: var(--wash); }
  .tab .badge { position: absolute; top: 2px; left: calc(50% + 4px); max-width: none; overflow: visible; }
  .account-link .account-name { display: none; }
  .account-link { padding: 3px; margin-left: auto; }
  .toasts { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .chart { height: 240px; }
  /* A short screen (a phone on its side) scrolls the page a little instead of pushing the composer
     under the tab bar: the card shrinks to fit, and the page never gets shorter than this. */
  .page-chat {
    height: max(calc(100vh - 53px), 520px); height: max(calc(100dvh - 53px), 520px);
    padding-top: 12px; padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }
  .chat { min-height: 0; }
  .chat-head, .chat-scroll, .chat-composer { padding-left: 14px; padding-right: 14px; }
  .chat-composer { padding-bottom: 12px; }

  /* holdings table becomes stacked cards */
  .table.stack-mobile, .table.stack-mobile tbody { display: block; width: 100%; }
  .table.stack-mobile thead { display: none; }
  .table.stack-mobile tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--grid); }
  .table.stack-mobile td.wide { grid-column: 1 / -1; }
  .table.stack-mobile .split { white-space: normal; }
  .table.stack-mobile tbody tr:last-child { border-bottom: 0; }
  .table.stack-mobile td { padding: 0; border: 0; }
  .table.stack-mobile td[data-label]:not(.lead)::before { content: attr(data-label) " "; color: var(--text-2); font-size: 12px; }
  .table.stack-mobile td.lead { grid-column: 1 / -1; }
  .table.stack-mobile td.r { text-align: left; }
  .table.stack-mobile td.hide-mobile { display: none; }
}

@media (max-width: 339px) {
  .tab { padding-left: 1px; padding-right: 1px; } /* four tabs: "Leaderboard" still fits at 320px */
}

@media (min-width: 720px) {
  .tab .tab-icon-only { display: none; }
}

/* Other players' tabs only fit on a wide screen with one other player; the leaderboard cards link
   to everyone. Several players don't fit even at full width once the chat tab has a badge. */
.tabs.crowded .tab-other { display: none; }
@media (max-width: 959px) {
  .tab-other { display: none; }
}
@media (min-width: 720px) and (max-width: 959px) {
  .topbar-inner { gap: 12px; } /* room for a "99+" chat badge at 720px */
  .account-link .account-name { display: none; }
  .account-link { padding: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}