/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/* Blackstoq theme tokens — light defined on :root, dark under both the OS
   media query and an explicit data-theme stamp, so the toggle wins both ways. */

:root {
  color-scheme: light;
  /* Violet-tinted surfaces: cards sit a shade deeper than the page so panels
     read as panels. Accent carries all neutral data marks; green/red stay
     reserved for direction. */
  --page: #eeeaf9;
  --surface: #fdfcff;
  --ink: #14101d;
  --ink-2: #4c4463;
  --muted: #7d7595;
  --grid: #e8e3f5;
  --baseline: #c4bcdb;
  --border: rgba(60, 35, 125, 0.13);
  --shadow: 0 1px 2px rgba(38, 18, 96, 0.05), 0 6px 20px rgba(38, 18, 96, 0.07);
  --glow: radial-gradient(1100px 520px at 50% -240px, rgba(91, 63, 214, 0.13), transparent 72%);
  --accent: #5b3fd6;
  --accent-soft: rgba(91, 63, 214, 0.13);
  --series-1: #5b3fd6;
  --up: #056b30;
  --up-mark: #0a9a45;
  --down: #cf3535;
  --flow-buy: #0a9a45;
  --flow-sell: #cf3535;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page: #0a0810;
    --surface: #191525;
    --ink: #ffffff;
    --ink-2: #c7c0da;
    --muted: #8d85a3;
    --grid: #2c2640;
    --baseline: #443b5c;
    --border: rgba(255, 255, 255, 0.10);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 6px 20px rgba(0, 0, 0, 0.35);
    --glow: radial-gradient(1100px 520px at 50% -240px, rgba(139, 112, 240, 0.16), transparent 72%);
    --accent: #8b70f0;
    --accent-soft: rgba(139, 112, 240, 0.20);
    --series-1: #8b70f0;
    --up: #1aa34e;
    --up-mark: #1aa34e;
    --down: #e2585a;
    --flow-buy: #1aa34e;
    --flow-sell: #e2585a;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0a0810;
  --surface: #191525;
  --ink: #ffffff;
  --ink-2: #c7c0da;
  --muted: #8d85a3;
  --grid: #2c2640;
  --baseline: #443b5c;
  --border: rgba(255, 255, 255, 0.10);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 6px 20px rgba(0, 0, 0, 0.35);
  --glow: radial-gradient(1100px 520px at 50% -240px, rgba(139, 112, 240, 0.16), transparent 72%);
  --accent: #8b70f0;
  --accent-soft: rgba(139, 112, 240, 0.20);
  --series-1: #8b70f0;
  --up: #1aa34e;
  --up-mark: #1aa34e;
  --down: #e2585a;
  --flow-buy: #1aa34e;
  --flow-sell: #e2585a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--page);
  background-image: var(--glow);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

a { color: inherit; text-decoration: none; }

.shell { max-width: 1240px; margin: 0 auto; padding: 20px 24px 72px; }

/* --------------------------------------------------------------- app bar --
   Legacy .topbar rules are gone: pages now sit inside AppShell, which renders
   one AppBar. Anything still importing TopBar renders nothing. */
.topbar { display: none; }

/* header search ----------------------------------------------------------- */
.search { position: relative; display: flex; align-items: center; }
.search-icon {
  position: absolute; left: 10px; color: var(--muted); pointer-events: none;
}
.search-input {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: 4px;
  font-size: 13px; padding: 6px 26px 6px 29px; width: 210px;
  font-family: inherit;
}
.search-input::placeholder { color: var(--muted); }
.search-input:focus {
  outline: none; border-color: var(--accent); width: 260px;
}
.search-input { transition: width 0.14s ease; }
.search-kbd {
  position: absolute; right: 8px; color: var(--muted);
  font-size: 10.5px; font-family: inherit;
  border: 1px solid var(--border); border-radius: 3px;
  padding: 0 4px; pointer-events: none;
}

.search-results {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  width: 320px; max-height: 340px; overflow-y: auto;
  margin: 0; padding: 4px; list-style: none;
  background: var(--surface);
  border-radius: 5px;
  box-shadow: 0 10px 30px rgba(38, 18, 96, 0.18);
}
.search-hit {
  display: grid; grid-template-columns: 58px 1fr; grid-gap: 2px 8px; gap: 2px 8px;
  width: 100%; text-align: left; cursor: pointer;
  background: none; border: none; border-radius: 3px;
  padding: 7px 9px; color: var(--ink); font-family: inherit;
}
.search-hit.active { background: var(--accent-soft); }
.hit-sym { font-weight: 700; font-size: 13px; }
.hit-name {
  font-size: 12.5px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hit-sector {
  grid-column: 2; font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search-empty { padding: 10px; color: var(--muted); font-size: 12.5px; }

/* -------------------------------------------------------------- stat rail */
/* One row of compact cells split by hairlines, each with a micro-visual. */
.rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-gap: 4px;
  gap: 4px;
  margin-bottom: 8px;
}
.rail-item {
  min-width: 0;
  background: var(--surface);
  border-radius: 5px;
  box-shadow: var(--shadow);
  padding: 13px 15px 14px;
}
.rail-label {
  display: flex; align-items: center; gap: 5px;
  color: var(--ink-2); font-size: 11px; font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 6px;
  white-space: nowrap; overflow: hidden;
}
.rail-label svg { flex: none; opacity: 0.9; }
.rail-label span { overflow: hidden; text-overflow: ellipsis; }
.rail-value {
  font-size: 19px; font-weight: 700; letter-spacing: -0.3px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.rail-sub {
  font-size: 11.5px; color: var(--ink-2); margin-top: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 1080px) {
  .rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* micro-visuals ----------------------------------------------------------- */
.range-track {
  position: relative; height: 4px; margin-top: 8px; border-radius: 2px;
  background: color-mix(in oklab, var(--ink) 8%, transparent);
}
.range-track.empty { opacity: 0.45; }
.range-fill {
  position: absolute; left: 0; top: 0; height: 100%; border-radius: 2px;
  background: color-mix(in oklab, var(--accent) 45%, transparent);
}
.range-dot {
  position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px var(--surface);
}
.range-tick {
  position: absolute; top: -3px; bottom: -3px; width: 1.5px;
  background: var(--baseline); transform: translateX(-50%);
}
.range-track.diverging { background: none; }
.range-track.diverging .axis {
  position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px;
  background: var(--baseline);
}
.div-fill { position: absolute; top: 0; height: 4px; border-radius: 2px; }
.meter-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 2px; }
.meter-fill.tone-ink { background: var(--accent); }
.up-bg { background: var(--up-mark); }
.down-bg { background: var(--down); }
.flat-bg { background: var(--baseline); }

.stack-bar {
  display: flex; gap: 2px; height: 4px; margin-top: 8px;
  border-radius: 2px; overflow: hidden;
}
.stack-bar .seg { display: block; height: 100%; border-radius: 2px; }

/* hero range under the counter price */
.hero-range { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 11px; margin: 4px 0 22px; }
.hero-range .bound {
  font-size: 12px; color: var(--muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hero-range .range-track { flex: 1 1; margin-top: 0; height: 5px; }
.hero-range .caption { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

/* ------------------------------------------------------------------ panels */
.card {
  background: var(--surface);
  border-radius: 5px;
  box-shadow: var(--shadow);
  padding: 18px 20px;
}
.card h2 {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 12px;
  font-size: 12.5px; font-weight: 700;
  color: var(--ink); letter-spacing: 0.7px; text-transform: uppercase;
}
.card h2 svg { flex: none; opacity: 0.9; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.card-head h2 { margin: 0; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 8px; gap: 8px; margin-bottom: 8px; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ tables */
table.data { width: 100%; border-collapse: collapse; }
table.data th {
  text-align: left; font-size: 11px; font-weight: 650;
  color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.5px;
  padding: 6px 8px; border-bottom: 1px solid var(--grid);
}
table.data td {
  padding: 8px; border-bottom: 1px solid var(--grid);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
table.data tr:last-child td { border-bottom: none; }
table.data tr.row-link:hover td { background: color-mix(in oklab, var(--ink) 4%, transparent); cursor: pointer; }
td.num, th.num { text-align: right; }
td.sym { font-weight: 650; }
td.name { color: var(--ink-2); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--muted); }

/* change chips — the signature accent */
.chip {
  display: inline-block; padding: 1px 8px; border-radius: 3px;
  font-size: 12.5px; font-weight: 620; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.chip.up { color: var(--up); background: color-mix(in oklab, var(--up) 12%, transparent); }
.chip.down { color: var(--down); background: color-mix(in oklab, var(--down) 12%, transparent); }
.chip.flat { color: var(--muted); background: color-mix(in oklab, var(--muted) 14%, transparent); }

/* hairline meters under foreign-flow nets */
.mini-meter {
  display: block; height: 3px; border-radius: 2px; margin-top: 4px;
  background: color-mix(in oklab, var(--ink) 7%, transparent);
}
.mini-meter .fill { display: block; height: 100%; border-radius: 2px; margin-left: auto; }
.mini-meter .fill.up-bg { background: var(--up-mark); }
.mini-meter .fill.down-bg { background: var(--down); }

/* --------------------------------------------------------------- spotlight */
.spotlight { margin-bottom: 8px; }
.spot-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.spot-head .spot-price { font-size: 26px; font-weight: 700; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; letter-spacing: -0.3px; }
.spot-head .spot-name { color: var(--ink-2); font-size: 12.5px; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spot-head .range-row { margin: 0 0 0 auto; }

.symbol-select, .session-select {
  background: transparent; color: var(--ink);
  border: 1px solid var(--border); border-radius: 4px;
  font-size: 13px; font-weight: 650; padding: 4px 8px;
}
.symbol-select { font-size: 15px; }

/* range pills */
.range-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; align-items: center; }
.range-row button {
  background: none; border: none; border-radius: 4px;
  color: var(--muted); font-size: 12.5px; font-weight: 600;
  padding: 4px 11px; cursor: pointer;
}
.range-row button:hover { color: var(--ink); }
.range-row button.active { background: var(--accent); color: #fff; }
.chart-note { margin-left: auto; color: var(--muted); font-size: 12px; align-self: center; }

/* ----------------------------------------------------------- sector board */
.sector-list { display: flex; flex-direction: column; }
.sector-row { border-bottom: 1px solid var(--grid); }
.sector-row:last-child { border-bottom: none; }
.sector-head {
  display: grid;
  grid-template-columns: 14px minmax(120px, 1.4fr) 28px minmax(90px, 2fr) 82px 66px;
  align-items: center; grid-gap: 10px; gap: 10px; width: 100%;
  background: none; border: none; cursor: pointer;
  padding: 9px 4px; color: var(--ink); text-align: left; font-size: 13.5px;
}
.sector-head:hover { background: color-mix(in oklab, var(--ink) 4%, transparent); }
.sector-head .caret { color: var(--muted); font-size: 11px; }
.sector-head .sector-name { font-weight: 620; }
.sector-head .sector-count {
  color: var(--muted); font-size: 11.5px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; text-align: right;
}
.sector-head .chip { justify-self: end; }
.sector-head .sector-meta { font-size: 11.5px; justify-self: end; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* diverging bar: zero at the centre, gains right, losses left */
.sector-bar { position: relative; height: 8px; }
.sector-bar .axis {
  position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px;
  background: var(--baseline);
}
.sector-bar .fill { position: absolute; top: 1px; height: 6px; border-radius: 3px; }
.sector-bar .fill.up-bg { background: var(--up-mark); }
.sector-bar .fill.down-bg { background: var(--down); }

.sector-body { padding: 2px 4px 14px; }
.sector-foot { color: var(--muted); font-size: 11.5px; margin-top: 12px; }

@media (max-width: 720px) {
  .sector-head { grid-template-columns: 14px 1fr 74px; }
  .sector-head .sector-count, .sector-head .sector-bar, .sector-head .sector-meta { display: none; }
}

/* filter box for the counters table */
.filter-input {
  background: transparent; border: 1px solid var(--border); border-radius: 4px;
  color: var(--ink); font-size: 12.5px; padding: 5px 13px; width: 210px;
}
.filter-input::placeholder { color: var(--muted); }
.filter-input:focus { outline: none; border-color: var(--accent); }

/* ----------------------------------------------------------- counter page */
.stock-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.stock-head h1 { margin: 0; font-size: 26px; letter-spacing: -0.3px; }
.stock-head .fullname { color: var(--ink-2); font-size: 13px; }
.stock-head .last { font-size: 26px; font-weight: 700; margin-left: auto; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

.badge {
  display: inline-block; padding: 2px 10px; border-radius: 3px;
  font-size: 14px; font-weight: 650; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.badge.up { color: var(--up); background: color-mix(in oklab, var(--up) 12%, transparent); }
.badge.down { color: var(--down); background: color-mix(in oklab, var(--down) 12%, transparent); }
.badge.flat { color: var(--muted); background: color-mix(in oklab, var(--muted) 14%, transparent); }

/* ------------------------------------------------------------------- misc */
.chart-box { position: relative; width: 100%; }

.btn-ghost {
  background: none; border: 1px solid var(--border); border-radius: 4px;
  color: var(--ink-2); font-size: 12px; padding: 4px 12px; cursor: pointer;
}
.btn-ghost:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 5%, transparent); }

.table-scroll { max-height: 440px; overflow: auto; }
.table-scroll table.data thead th {
  position: -webkit-sticky;
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}

.loading { color: var(--muted); padding: 48px 0; text-align: center; }
.error { color: var(--down); padding: 48px 0; text-align: center; }

.live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--up-mark); margin-right: 2px;
  animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse { 50% { opacity: 0.35; } }

/* =========================================================== responsive === */
/* Every wide element scrolls inside its own container; nothing overflows the
   page, and control rows stack rather than squeeze. */
.sector-body { overflow-x: auto; }
.sector-body table.data { min-width: 520px; }
.table-scroll table.data { min-width: 620px; }

@media (max-width: 900px) {
  .shell { padding: 16px 16px 56px; }
  .spot-head .range-row { margin-left: 0; width: 100%; }
  .chart-note { margin-left: 0; }
}

@media (max-width: 720px) {
  /* Seven nav items can't share one wrapped row. Search takes its own full
     line, the links sit beneath it, and the call to action anchors the right. */
  .topbar { gap: 10px; padding-bottom: 14px; }
  .topbar .asof { font-size: 11.5px; margin-left: 0; }
  .topbar nav {
    width: 100%; margin-left: 0; flex-wrap: wrap; gap: 12px 16px;
  }
  .search { order: -1; flex: 1 1 100%; min-width: 0; }
  .search-input, .search-input:focus { width: 100%; }
  .search-results { width: auto; left: 0; right: 0; }
  .topbar nav > a, button.nav-signin { font-size: 13.5px; }
  .nav-cta { margin-left: auto; order: 2; }
  .theme-toggle-wrap, .topbar nav > .btn-ghost { order: 3; }
  .card { padding: 14px 14px 16px; }
  .card-head { flex-wrap: wrap; gap: 8px; }
  .filter-input { width: 100%; }
  .stock-head { gap: 8px 12px; }
  .stock-head h1 { font-size: 22px; }
  .stock-head .last { font-size: 22px; margin-left: 0; width: 100%; }
  .hero-range .caption { width: 100%; }
  .rail-value { font-size: 17px; }
  table.data td, table.data th { padding: 7px 6px; }
  td.name { max-width: 130px; }
}

@media (max-width: 420px) {
  .shell { padding: 12px 12px 48px; }
  /* Two columns all the way down. Six full-width cards is a long scroll for
     six short numbers; stepping the type down fits them side by side and the
     block reads as one summary rather than a queue. */
  .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .rail-item { padding: 9px 10px 10px; border-radius: 4px; }
  .rail-label { font-size: 9px; letter-spacing: 0.4px; gap: 4px; margin-bottom: 4px; }
  .rail-label svg { width: 11px; height: 11px; }
  .rail-value { font-size: 15px; letter-spacing: -0.2px; }
  .rail-sub { font-size: 10px; margin-top: 3px; }
  /* The meters under a value are decoration at this size. */
  .rail-item .range-track, .rail-item .meter-track { margin-top: 5px; height: 3px; }
  .spot-head .spot-name { display: none; }
}

.profile-text { margin: 0; font-size: 13px; line-height: 1.65; color: var(--ink-2); }

.filter-bar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
  margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--grid);
}
.filter-bar label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; font-weight: 650; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.filter-bar input {
  background: var(--page); color: var(--ink); font-family: inherit;
  border: 1px solid var(--border); border-radius: 4px;
  font-size: 12.5px; padding: 5px 8px; width: 128px;
}
.filter-bar input:focus { outline: none; border-color: var(--accent); }
.filter-bar button { align-self: flex-end; }
.filter-bar button:disabled { opacity: 0.4; cursor: default; }

/* sign-in ----------------------------------------------------------------- */
.login-wrap { display: flex; align-items: center; justify-content: center; min-height: 78vh; }
.login-card { width: 100%; max-width: 340px; text-align: center; padding: 30px 26px; }
.login-brand { font-size: 22px; font-weight: 750; letter-spacing: 0.3px; }
.login-sub { color: var(--muted); font-size: 12.5px; margin: 6px 0 20px; }
.login-input { width: 100%; padding: 9px 12px; text-align: center; }
.login-btn {
  width: 100%; margin-top: 10px; padding: 9px 12px; cursor: pointer;
  background: var(--accent); color: #fff; font-family: inherit; font-size: 13.5px;
  font-weight: 650; border: none; border-radius: 4px;
}
.login-btn:disabled { opacity: 0.5; cursor: default; }
.login-error { color: var(--down); font-size: 12.5px; margin-top: 12px; }

.range-custom { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; }
.range-custom input {
  background: var(--page); color: var(--ink); font-family: inherit;
  border: 1px solid var(--border); border-radius: 4px; font-size: 12px; padding: 3px 7px;
}
.range-custom input:focus { outline: none; border-color: var(--accent); }
.range-custom .dash { color: var(--muted); }

.window-stats {
  display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--grid);
  font-size: 12px; color: var(--ink-2);
}
.window-stats b { color: var(--ink); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; font-weight: 650; }
.window-stats b.up { color: var(--up); }
.window-stats b.down { color: var(--down); }
.login-hint { color: var(--muted); font-size: 11.5px; margin: 8px 0 0; text-align: left; }
.login-switch { margin-top: 14px; font-size: 12.5px; color: var(--ink-2); }
.login-switch button, .login-switch a {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent); font-family: inherit; font-size: 12.5px; font-weight: 650;
}
.login-switch button:hover, .login-switch a:hover { text-decoration: underline; }

/* ===================================================== app shell & sidebar */
.app { display: flex; min-height: 100vh; }
.app-body { flex: 1 1; min-width: 0; display: flex; flex-direction: column; }
.app-main {
  flex: 1 1; width: 100%; min-width: 0;
  max-width: 1240px; margin: 0 auto; padding: 22px 24px 72px;
}

.sidebar {
  position: -webkit-sticky;
  position: sticky; top: 0; align-self: flex-start;
  width: 218px; flex: none; height: 100vh;
  transition: width .18s cubic-bezier(.32,.72,0,1);
  display: flex; flex-direction: column;
  padding: 18px 12px 14px;
  background: var(--surface);
  border-right: 1px solid var(--grid);
}
.sidebar-brand {
  display: flex; align-items: center; gap: 4px; min-width: 0;
  font-size: 17px; font-weight: 750; letter-spacing: 0.3px;
  padding: 4px 10px 18px;
}
.sb-wordmark {
  font-size: 16px; font-weight: 740; letter-spacing: -0.02em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-section {
  font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--muted); padding: 18px 10px 7px;
}
.sidebar-nav { display: flex; flex-direction: column; gap: 1px; }
.sidebar-link {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: 5px;
  font-size: 13.5px; color: var(--ink-2);
}
.sidebar-link svg { flex: none; opacity: 0.8; }
.sidebar-link:hover { background: color-mix(in oklab, var(--ink) 5%, transparent); color: var(--ink); }
.sidebar-link.active {
  background: var(--accent-soft); color: var(--ink); font-weight: 650;
}
.sidebar-link.active svg { opacity: 1; color: var(--accent); }
.sidebar-badge {
  margin-left: auto; font-style: normal; font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.5px; color: var(--accent);
  background: var(--accent-soft); border-radius: 3px; padding: 1px 5px;
}
.sidebar-lock { margin-left: auto; font-size: 10px; opacity: 0.6; }
.sidebar-dot {
  width: 14px; height: 14px; flex: none; border-radius: 3px;
  border: 1.5px solid var(--baseline);
}
.sidebar-dot.admin { border-color: var(--accent); background: var(--accent-soft); }

.sidebar-foot {
  margin-top: auto; padding: 14px 10px 0; border-top: 1px solid var(--grid);
  font-size: 11.5px; color: var(--muted);
}
.sidebar-plan { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.plan-chip {
  font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  padding: 2px 7px; border-radius: 3px;
  background: color-mix(in oklab, var(--ink) 8%, transparent); color: var(--ink-2);
}
.plan-chip.plan-pro, .plan-chip.plan-team, .plan-chip.plan-enterprise {
  background: var(--accent-soft); color: var(--accent);
}
.sidebar-credits { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.sidebar-org, .sidebar-user {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.5;
}
.sidebar-org { color: var(--ink-2); font-weight: 600; }
.sidebar-upgrade {
  display: block; margin-top: 10px; text-align: center;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 650;
  padding: 6px 10px; border-radius: 4px;
}

.sidebar-toggle {
  display: none; position: fixed; top: 12px; left: 12px; z-index: 60;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: 5px;
  width: 34px; height: 34px; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--shadow);
}
.sidebar-scrim {
  display: none; position: fixed; inset: 0; z-index: 45;
  background: rgba(0, 0, 0, 0.45);
}

@media (max-width: 860px) {
  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 70; width: 264px;
    transform: translateX(-100%); transition: transform 0.22s cubic-bezier(.32,.72,0,1);
    box-shadow: 0 0 40px rgba(20, 16, 29, 0.18);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-scrim { display: block; }
  /* Clear the tab bar plus the home indicator on a notched phone. */
  .app-main { padding: 16px 15px calc(78px + env(safe-area-inset-bottom)); }
}

/* ============================================================ gated states */
.locked {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 22px; border-radius: 5px;
  background: color-mix(in oklab, var(--accent) 5%, var(--surface));
  border: 1px dashed color-mix(in oklab, var(--accent) 32%, transparent);
  color: var(--ink-2);
}
.locked > svg { flex: none; color: var(--accent); }
.locked-compact { padding: 13px 16px; }
.locked-body { flex: 1 1; min-width: 0; }
.locked-title { font-weight: 650; color: var(--ink); font-size: 13.5px; }
.locked-desc { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; }
.locked-cta {
  flex: none; background: var(--accent); color: #fff;
  font-size: 12.5px; font-weight: 650; padding: 7px 14px; border-radius: 4px;
  white-space: nowrap;
}
.locked-cta:hover { filter: brightness(1.08); }

.truncated-note {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--grid);
  font-size: 12px; color: var(--muted);
}
.truncated-note a { color: var(--accent); font-weight: 650; }
.truncated-note a:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .locked { flex-wrap: wrap; }
  .locked-cta { width: 100%; text-align: center; }
}
.range-row button.locked-pill { color: var(--muted); opacity: 0.75; }
.range-row button.locked-pill:hover { opacity: 1; color: var(--ink-2); }
.pill-lock { font-size: 8.5px; margin-left: 3px; vertical-align: 1px; }

/* ================================================================= pricing */
.pricing-head { padding: 8px 0 20px; max-width: 620px; }
.pricing-head h1 { margin: 0 0 8px; font-size: 26px; letter-spacing: -0.3px; }
.pricing-head p { margin: 0 0 16px; color: var(--ink-2); font-size: 13.5px; line-height: 1.6; }
.cycle-toggle { margin-bottom: 0; }

.pricing-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(226px, 1fr));
  grid-gap: 8px;
  gap: 8px; margin-bottom: 8px;
}
.pricing-card { display: flex; flex-direction: column; position: relative; }
.pricing-card.featured { outline: 1.5px solid var(--accent); }
.pricing-flag {
  position: absolute; top: -1px; right: 14px;
  background: var(--accent); color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase; padding: 3px 8px;
  border-radius: 0 0 4px 4px;
}
.pricing-name { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink); }
.pricing-tagline { margin: 4px 0 14px; font-size: 12.5px; color: var(--ink-2); min-height: 34px; }
.pricing-price { font-size: 24px; font-weight: 700; letter-spacing: -0.4px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.pricing-per { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.pricing-note { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.pricing-features { list-style: none; margin: 16px 0 18px; padding: 0; flex: 1 1; }
.pricing-features li {
  position: relative; padding: 5px 0 5px 18px; font-size: 12.5px;
  color: var(--ink-2); line-height: 1.45;
}
.pricing-features li::before {
  content: ""; position: absolute; left: 2px; top: 11px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.pricing-link { display: block; text-align: center; }
.pricing-current {
  text-align: center; font-size: 12.5px; font-weight: 650; color: var(--accent);
  padding: 9px; background: var(--accent-soft); border-radius: 4px;
}
.pricing-enterprise {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.pricing-enterprise h2 { margin: 0 0 6px; font-size: 14px; letter-spacing: 0; text-transform: none; }
.pricing-enterprise p { margin: 0; font-size: 12.5px; color: var(--ink-2); max-width: 620px; line-height: 1.6; }
.pricing-foot { color: var(--muted); font-size: 11.5px; margin: 16px 0 0; max-width: 640px; line-height: 1.6; }
@media (max-width: 620px) { .pricing-enterprise { flex-direction: column; align-items: flex-start; } }

/* ============================================================ AI research */
.research-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; padding: 6px 0 14px;
}
.research-head h1 {
  display: flex; align-items: center; gap: 9px;
  margin: 0; font-size: 22px; letter-spacing: -0.3px;
}
.research-meter {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--ink-2);
}
.research-meter b { color: var(--ink); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.meter-track {
  display: block; width: 90px; height: 4px; border-radius: 2px;
  background: color-mix(in oklab, var(--ink) 9%, transparent); overflow: hidden;
}
.meter-fill-bar { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.research-credits {
  font-size: 11px; padding: 2px 7px; border-radius: 3px;
  background: var(--accent-soft); color: var(--accent); font-weight: 650;
}

.research-intro { max-width: 620px; }
.research-intro h1 { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; font-size: 20px; }
.research-intro p { color: var(--ink-2); font-size: 13.5px; line-height: 1.6; }
.research-samples { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 18px; }
.research-samples .sample {
  background: none; border: 1px solid var(--border); border-radius: 999px;
  color: var(--ink-2); font-family: inherit; font-size: 12px;
  padding: 5px 12px; cursor: pointer; text-align: left;
}
.research-samples button.sample:hover { border-color: var(--accent); color: var(--ink); }

.research-thread { min-height: 240px; max-height: 58vh; overflow-y: auto; }
.research-empty { color: var(--ink-2); font-size: 13px; }
.research-empty p { margin: 4px 0 0; }
.msg { margin-bottom: 14px; }
.msg-user { display: flex; justify-content: flex-end; }
.msg-user-text {
  background: var(--accent); color: #fff; font-size: 13px;
  padding: 8px 13px; border-radius: 12px 12px 3px 12px; max-width: 78%;
}
.answer {
  background: color-mix(in oklab, var(--ink) 3%, transparent);
  border-radius: 3px 12px 12px 12px; padding: 13px 15px; font-size: 13px;
}
.answer.thinking { color: var(--muted); }
.answer-title { font-weight: 650; margin-bottom: 9px; font-size: 13px; }
.answer-text { margin: 0; color: var(--ink-2); line-height: 1.6; }
.answer-facts { margin: 0 0 12px; display: grid; grid-gap: 5px; gap: 5px; }
.answer-facts > div { display: flex; justify-content: space-between; gap: 14px; }
.answer-facts dt { color: var(--ink-2); font-size: 12.5px; }
.answer-facts dd { margin: 0; font-weight: 650; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; font-size: 12.5px; }

.research-composer { display: flex; gap: 8px; margin-top: 8px; }
.research-input { flex: 1 1; padding: 10px 14px; }
.research-send { width: auto; margin-top: 0; padding: 10px 22px; }
.research-foot { color: var(--muted); font-size: 11.5px; margin: 10px 0 0; }

/* ============================================================ auth screens */
.login-stack { width: 100%; max-width: 380px; }
.login-card { max-width: none; text-align: left; }
.login-card .login-brand, .login-card .login-sub { text-align: center; }
.login-sub { min-height: 20px; }

.type-toggle {
  display: flex; gap: 3px; padding: 3px; margin-bottom: 18px;
  background: color-mix(in oklab, var(--ink) 5%, transparent); border-radius: 5px;
}
.type-toggle button {
  flex: 1 1; background: none; border: none; border-radius: 4px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 650; padding: 7px 8px;
  color: var(--ink-2);
}
.type-toggle button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

.field { display: block; margin-bottom: 12px; }
.field > span {
  display: block; font-size: 11px; font-weight: 650; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--ink-2); margin-bottom: 5px;
}
.field input, .field select {
  width: 100%; background: var(--page); color: var(--ink); font-family: inherit;
  border: 1px solid var(--border); border-radius: 4px;
  font-size: 13.5px; padding: 9px 11px;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); }
.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1 1; min-width: 0; }

.code-input {
  width: 100%; text-align: center; font-size: 30px; font-weight: 700;
  letter-spacing: 12px; text-indent: 12px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
  background: var(--page); color: var(--ink); font-family: inherit;
  border: 1px solid var(--border); border-radius: 5px; padding: 14px 8px;
  margin-bottom: 4px;
}
.code-input:focus { outline: none; border-color: var(--accent); }
.code-input::placeholder { color: var(--baseline); letter-spacing: 12px; }

.login-alt { margin-top: 12px; text-align: center; }
.login-alt button {
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 12.5px; color: var(--accent); font-weight: 650; padding: 0;
}
.login-alt button:disabled { color: var(--muted); cursor: default; }
.login-alt button:not(:disabled):hover { text-decoration: underline; }
.login-switch { text-align: center; }
.login-notice {
  margin-top: 10px; padding: 9px 12px; border-radius: 4px; font-size: 12.5px;
  background: var(--accent-soft); color: var(--accent); text-align: center;
}
.login-error { text-align: center; }

.grid-1 { display: grid; grid-template-columns: 1fr; grid-gap: 8px; gap: 8px; margin-bottom: 8px; }

.nav-signin { font-weight: 650; }
.nav-cta {
  background: var(--accent); color: #fff !important;
  font-size: 12.5px; font-weight: 650; padding: 6px 13px; border-radius: 4px;
  white-space: nowrap;
}
.nav-cta:hover { filter: brightness(1.08); }
@media (max-width: 720px) {
  .topbar nav { flex-wrap: wrap; }
  .nav-cta { order: 3; }
}


.read-more {
  background: none; border: none; padding: 0; margin-top: 8px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 650; color: var(--accent);
}
.read-more:hover { text-decoration: underline; }

/* =============================================================== breadcrumbs */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  font-size: 12px; color: var(--muted); padding: 2px 0 12px;
}
.crumb { display: inline-flex; align-items: center; gap: 7px; }
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }
.crumb-sep { color: var(--baseline); }

/* AI allowance on each plan card — present, not shouted */
.pricing-ai {
  display: flex; flex-direction: column; gap: 2px;
  margin: 14px 0 2px; padding: 10px 12px; border-radius: 4px;
  background: var(--accent-soft);
}
.pricing-ai-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.7px;
  text-transform: uppercase; color: var(--accent);
}
.pricing-ai-value { font-size: 12.5px; font-weight: 650; color: var(--ink); }
.pricing-ai-sub { font-size: 11px; color: var(--ink-2); line-height: 1.45; }

.pricing-ai-explainer { margin-bottom: 8px; text-align: center; }
.ai-head {
  display: flex; align-items: baseline; justify-content: center;
  gap: 10px; margin-bottom: 8px;
}
.pricing-ai-explainer h2 {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0; font-size: 14px; letter-spacing: 0; text-transform: none;
}
.ai-more { font-size: 11.5px; font-weight: 650; color: var(--accent); white-space: nowrap; }
.ai-more:hover { text-decoration: underline; }
.ai-lede {
  margin: 0 auto 26px; font-size: 13px; color: var(--ink-2);
  line-height: 1.6; max-width: 48ch;
}
/* A centred trio reads as one composition; spread across the full card they
   drift apart and the first item hugs the left edge. */
.ai-value-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 26px 34px;
  gap: 26px 34px; max-width: 780px; margin: 0 auto 6px;
}
.ai-value { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ai-value-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--accent-soft); color: var(--accent);
}
.ai-value b { font-size: 12.5px; color: var(--ink); font-weight: 650; }
.ai-value > span:last-child {
  font-size: 12.5px; color: var(--ink-2); line-height: 1.5; max-width: 24ch;
}

/* ================================================================== modal */
.modal-scrim {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; overflow-y: auto;
  background: color-mix(in oklab, var(--ink) 45%, transparent);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  animation: modal-fade 0.14s ease;
}
.modal {
  position: relative; width: 100%; max-width: 396px; margin: auto;
  background: var(--surface); border-radius: 8px; padding: 28px 26px 24px;
  box-shadow: 0 20px 60px rgba(24, 12, 62, 0.32);
  animation: modal-rise 0.18s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes modal-fade { from { opacity: 0; } }
@keyframes modal-rise { from { opacity: 0; transform: translateY(10px) scale(0.985); } }

.modal-close {
  position: absolute; top: 12px; right: 12px;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 5px;
  background: none; border: none; color: var(--muted); cursor: pointer;
}
.modal-close:hover { background: color-mix(in oklab, var(--ink) 6%, transparent); color: var(--ink); }
.modal-brand {
  font-size: 13px; font-weight: 750; letter-spacing: 0.3px;
  color: var(--accent); margin-bottom: 14px;
}
.modal-title { margin: 0 0 4px; font-size: 19px; letter-spacing: -0.3px; }
.modal-sub { margin: 0 0 20px; font-size: 12.5px; color: var(--ink-2); }
.modal .login-btn { margin-top: 4px; }

.modal-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--grid); font-size: 12.5px; color: var(--ink-2);
}
.modal-foot button, .link-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 650; color: var(--accent);
}
.modal-foot button:hover, .link-btn:hover { text-decoration: underline; }

/* nav buttons that used to be links */
button.nav-signin {
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 650; color: var(--ink-2); padding: 0;
}
button.nav-signin:hover { color: var(--ink); }
button.nav-cta { border: none; cursor: pointer; font-family: inherit; }
button.locked-cta { border: none; cursor: pointer; font-family: inherit; }

@media (max-width: 460px) {
  .modal-scrim { padding: 0; }
  .modal { max-width: none; min-height: 100vh; border-radius: 0; padding-top: 44px; }
}

/* ================================================= AI Research (research-led) */
.rs-hero {
  display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  grid-gap: 52px;
  gap: 52px; align-items: stretch; padding: 28px 0 44px;
}
/* The copy spans the device's height rather than floating mid-column. */
.rs-hero-copy {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 6px 0;
}
.rs-hero-title { display: flex; flex-direction: column; }
.rs-kicker {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent);
  padding-bottom: 12px;
}
.rs-hero h1 {
  margin: 0; font-size: 36px; line-height: 1.13; letter-spacing: -1px;
}
.rs-hero-copy p {
  margin: 0; font-size: 15px; line-height: 1.72; color: var(--ink-2);
  max-width: 42ch;
}
.rs-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ai-cta { width: auto; margin-top: 0; padding: 11px 20px; display: inline-block; }

.rs-hero-panel { min-width: 0; display: flex; align-items: center; }

/* the query line — a command bar, not a bubble */
.q-line {
  display: flex; align-items: baseline; gap: 8px;
  padding: 9px 12px; margin-bottom: 12px; border-radius: 4px;
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  border-left: 2px solid var(--accent);
}
.q-caret { color: var(--accent); font-weight: 700; font-size: 13px; }
.q-text { font-size: 13px; color: var(--ink); line-height: 1.5; }

/* tearsheet ---------------------------------------------------------------- */
.sheet { border: 1px solid var(--grid); border-radius: 4px; padding: 13px 14px; }
.sheet-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding-bottom: 10px;
}
.sheet-sym { font-size: 15px; font-weight: 750; letter-spacing: -0.2px; }
.sheet-name {
  display: block; font-size: 11px; color: var(--muted); margin-top: 1px;
}
.sheet-px { text-align: right; white-space: nowrap; }
.sheet-last {
  display: block; font-size: 18px; font-weight: 700;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums; letter-spacing: -0.3px;
}
.sheet-spark { width: 100%; height: auto; display: block; margin-bottom: 12px; }
.sheet-grid {
  display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0 18px; gap: 0 18px; margin: 0;
  border-top: 1px solid var(--grid);
}
.sheet-grid > div {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--grid);
}
.sheet-grid dt { font-size: 11.5px; color: var(--ink-2); }
.sheet-grid dd {
  margin: 0; font-size: 11.5px; font-weight: 650;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.sheet-foot { font-size: 10px; color: var(--muted); padding-top: 9px; }

/* artifacts ---------------------------------------------------------------- */
.artifact {
  border: 1px solid var(--grid); border-radius: 4px; padding: 12px 13px;
  background: var(--surface);
}
.artifact .mock-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.artifact .mock-table th {
  text-align: left; font-size: 9.5px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--muted);
  padding: 3px 4px 6px; border-bottom: 1px solid var(--grid);
}
.artifact .mock-table td {
  padding: 6px 4px; border-bottom: 1px solid var(--grid);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.artifact .mock-table tr:last-child td { border-bottom: none; }
.artifact .mock-table td:first-child { font-weight: 700; }
.mock-svg { width: 100%; height: auto; display: block; }
.mock-tick { font-size: 7.5px; fill: var(--muted); }

.flow-mock {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 4px; height: 120px;
}
.flow-axis {
  position: absolute; left: 12px; right: 12px; top: 50%; height: 1px;
  background: var(--baseline);
}
.flow-bar { position: relative; flex: 1 1; border-radius: 1px; }
.flow-bar.pos { background: var(--up-mark); }
.flow-bar.neg { background: var(--down); }

.fan-legend {
  display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px;
  padding-top: 9px; border-top: 1px solid var(--grid);
  font-size: 11px; color: var(--ink-2);
}
.fan-legend b { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--ink); }

.note-mock { display: flex; flex-direction: column; gap: 7px; }
.note-kicker {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.7px;
  text-transform: uppercase; color: var(--accent);
}
.note-title { font-size: 12.5px; font-weight: 700; margin-bottom: 3px; }
.note-body, .note-side { display: flex; flex-direction: column; gap: 6px; }
.note-line { height: 5px; border-radius: 2px; background: var(--grid); display: block; }
.note-line.w95 { width: 95%; } .note-line.w88 { width: 88%; }
.note-line.w85 { width: 85%; } .note-line.w78 { width: 78%; }
.note-line.w70 { width: 70%; } .note-line.w65 { width: 65%; }
.note-line.w52 { width: 52%; }
.note-split { display: flex; gap: 10px; margin: 3px 0; }
.note-fig {
  width: 44%; height: 52px; border-radius: 3px;
  background: linear-gradient(155deg,
    color-mix(in oklab, var(--accent) 40%, transparent),
    color-mix(in oklab, var(--accent) 10%, transparent));
}
.note-side { flex: 1 1; justify-content: center; }
.note-cite { font-size: 10px; color: var(--muted); padding-top: 5px; }

/* walkthrough -------------------------------------------------------------- */
.rs-section-head { padding: 4px 0 22px; }
.rs-section-head h2 { margin: 0 0 5px; font-size: 20px; letter-spacing: -0.4px; }
.rs-section-head p { margin: 0; font-size: 12.5px; color: var(--muted); max-width: 52ch; }

/* Five steps, one row. Everything inside is sized to survive a ~215px card. */
.rs-steps {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px; margin-bottom: 24px; align-items: stretch;
}
.rs-card { display: flex; flex-direction: column; padding: 14px 14px 16px; }
.rs-card-head { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.rs-step-n {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; color: var(--accent);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.rs-card-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.7px;
  text-transform: uppercase; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ai-planned {
  margin-left: auto; flex: none;
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--border);
  border-radius: 3px; padding: 1px 5px;
}
.rs-card .q-line {
  padding: 7px 9px; margin-bottom: 10px; align-items: flex-start;
}
.rs-card .q-caret { font-size: 11px; }
.rs-card .q-text { font-size: 11.5px; line-height: 1.45; }
.rs-card-artifact { margin-bottom: 12px; }
.rs-card h3 { margin: 0 0 5px; font-size: 13px; letter-spacing: -0.1px; }
.rs-card p { margin: 0; font-size: 11.5px; color: var(--ink-2); line-height: 1.5; }

/* compact artifact variants inside the cards */
.rs-card .artifact { padding: 9px 10px; }
.rs-card .artifact .mock-table { font-size: 10.5px; }
.rs-card .artifact .mock-table th { font-size: 8.5px; padding: 2px 2px 5px; }
.rs-card .artifact .mock-table td { padding: 4px 2px; }
.rs-card .flow-mock { height: 92px; }
.rs-card .fan-legend { font-size: 9.5px; gap: 2px 10px; }
.rs-card .sheet { padding: 10px 11px; }
.rs-card .sheet-grid { grid-template-columns: 1fr; }
.rs-card .sheet-sym { font-size: 13px; }
.rs-card .sheet-name { display: none; }
.rs-card .sheet-last { font-size: 15px; }
.rs-card .sheet-grid dt, .rs-card .sheet-grid dd { font-size: 10.5px; }
.rs-card .sheet-grid > div:nth-child(n+5) { display: none; }
.rs-card .sheet-foot { display: none; }
.rs-card .note-fig { height: 40px; }
.rs-card .note-cite { display: none; }

@media (max-width: 1180px) {
  .rs-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .rs-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .rs-steps { grid-template-columns: minmax(0, 1fr); }
}

/* ROI + trust -------------------------------------------------------------- */
.ai-roi { margin-bottom: 8px; }
.ai-roi h2, .ai-final h2 { margin: 0 0 16px; font-size: 13px; letter-spacing: 0.7px; }
.ai-roi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-gap: 22px; gap: 22px;
}
.ai-roi-item { display: flex; flex-direction: column; gap: 7px; }
.ai-roi-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 7px;
  background: var(--accent-soft); color: var(--accent);
}
.ai-roi-item b { font-size: 12.5px; font-weight: 650; }
.ai-roi-item > span:last-child { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }

.ai-final {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 8px;
}
.ai-final h2 { margin: 0 0 4px; font-size: 15px; letter-spacing: 0; text-transform: none; }
.ai-final p { margin: 0; font-size: 12.5px; color: var(--ink-2); }

@media (max-width: 900px) {
  .rs-hero { grid-template-columns: 1fr; gap: 26px; }
  .rs-hero-copy { display: block; }
  .rs-hero-copy .rs-hero-title { margin-bottom: 14px; }
  .rs-hero-copy p { margin-bottom: 24px; }
  .rs-hero h1 { font-size: 27px; }
}

/* Artifacts share a fixed frame so every card's heading starts on the same
   line — ragged baselines were making a tidy row look accidental. */
.rs-card-artifact {
  display: flex; align-items: stretch;
  height: 208px; margin-bottom: 13px;
}
.rs-card-artifact > * { flex: 1 1; min-width: 0; }
.rs-card .artifact, .rs-card .sheet {
  display: flex; flex-direction: column; justify-content: center;
}
.rs-card .flow-mock { height: 100%; align-items: center; }
.rs-card .note-mock { justify-content: flex-start; overflow: hidden; }
.rs-card .sheet-spark { margin-bottom: 9px; }

/* =========================================================== laptop mock */
.laptop { width: 100%; max-width: 620px; margin-left: auto; }
.laptop-screen {
  background: var(--surface);
  border: 7px solid color-mix(in oklab, var(--ink) 82%, transparent);
  border-radius: 10px 10px 3px 3px;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(30, 14, 78, 0.22);
}
.laptop-hinge {
  height: 8px; margin: 0 -5%;
  background: color-mix(in oklab, var(--ink) 82%, transparent);
  border-radius: 0 0 4px 4px;
}
.laptop-base {
  height: 5px; margin: 0 -9%;
  background: color-mix(in oklab, var(--ink) 62%, transparent);
  border-radius: 0 0 9px 9px;
}

/* app inside the screen --------------------------------------------------- */
.am { display: flex; height: 344px; font-size: 10px; background: var(--page); }

.am-rail {
  width: 118px; flex: none; display: flex; flex-direction: column;
  padding: 11px 9px; background: var(--surface);
  border-right: 1px solid var(--grid);
}
.am-brand {
  font-size: 11px; font-weight: 750; letter-spacing: 0.2px; margin-bottom: 11px;
}
.am-new {
  font-size: 9.5px; font-weight: 650; color: var(--accent);
  background: var(--accent-soft); border-radius: 3px;
  padding: 5px 7px; margin-bottom: 12px;
}
.am-rail-label {
  font-size: 8px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 5px;
}
.am-thread {
  font-size: 9.5px; color: var(--ink-2); padding: 5px 7px; border-radius: 3px;
  margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.am-thread.active { background: color-mix(in oklab, var(--ink) 6%, transparent); color: var(--ink); font-weight: 650; }
.am-rail-foot {
  margin-top: auto; padding-top: 9px; border-top: 1px solid var(--grid);
  display: flex; align-items: center; gap: 6px;
  font-size: 8.5px; color: var(--muted);
}
.am-plan {
  font-size: 7.5px; font-weight: 700; letter-spacing: 0.5px;
  background: var(--accent-soft); color: var(--accent);
  padding: 1px 4px; border-radius: 2px;
}

.am-main { flex: 1 1; min-width: 0; display: flex; flex-direction: column; }
.am-scroll { flex: 1 1; overflow: hidden; padding: 12px 13px 4px; }

.am-ask {
  align-self: flex-end; max-width: 74%; margin-left: auto; margin-bottom: 10px;
  background: var(--accent); color: #fff; font-size: 10px; line-height: 1.45;
  padding: 6px 10px; border-radius: 9px 9px 2px 9px; width: -moz-fit-content; width: fit-content;
}
.am-ask-2 { margin-top: 10px; margin-bottom: 0; opacity: 0.55; }

.am-answer {
  background: var(--surface); border: 1px solid var(--grid); border-radius: 4px;
  padding: 9px 10px;
}
.am-sheet-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.am-sheet-top b { font-size: 11px; }
.am-sub { display: block; font-size: 8px; color: var(--muted); }
.am-px { text-align: right; }
.am-px b { font-size: 12px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.am-chip {
  display: block; font-size: 8px; font-weight: 650; color: var(--up);
  background: color-mix(in oklab, var(--up) 12%, transparent);
  border-radius: 2px; padding: 1px 4px; margin-top: 2px;
}
.am-spark { width: 100%; height: auto; display: block; margin: 7px 0; }
.am-stats {
  display: grid; grid-template-columns: 1fr 1fr; grid-gap: 3px 10px; gap: 3px 10px;
  padding: 7px 0; border-top: 1px solid var(--grid); border-bottom: 1px solid var(--grid);
  font-size: 8.5px; color: var(--ink-2);
}
.am-stats b { float: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--ink); }
.am-text { margin: 7px 0 0; font-size: 9px; line-height: 1.5; color: var(--ink-2); }
.am-cite { font-size: 7.5px; color: var(--muted); margin-top: 5px; }

.am-composer {
  display: flex; align-items: center; gap: 7px; margin: 8px 13px 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 5px; padding: 7px 8px 7px 11px;
}
.am-input { flex: 1 1; font-size: 9.5px; color: var(--muted); }
.am-send {
  flex: none; width: 19px; height: 19px; border-radius: 4px;
  background: var(--accent); color: #fff; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
}

@media (max-width: 900px) {
  .laptop { margin: 0 auto; max-width: 520px; }
  .am { height: 300px; }
}
@media (max-width: 560px) {
  .am-rail { display: none; }
  .am { height: 268px; }
}

/* ================================================ mobile: research surfaces */
@media (max-width: 640px) {
  /* AI Research hero */
  .rs-hero { padding: 14px 0 26px; gap: 22px; }
  .rs-hero h1 { font-size: 24px; letter-spacing: -0.6px; }
  .rs-hero-copy p { font-size: 14px; max-width: none; }
  .rs-cta { gap: 8px; }
  .rs-cta .ai-cta, .rs-cta .btn-ghost {
    flex: 1 1 auto; text-align: center; padding: 11px 14px;
  }
  .rs-kicker { padding-bottom: 8px; }
  .rs-section-head h2 { font-size: 17px; }

  /* The assistant itself */
  .research-head { gap: 8px; padding-bottom: 12px; }
  .research-head h1 { font-size: 18px; }
  .research-meter { width: 100%; justify-content: space-between; font-size: 11.5px; }
  .meter-track { flex: 1 1; max-width: none; margin: 0 4px; }
  .research-thread { max-height: 52vh; padding: 14px; }
  .msg-user-text { max-width: 88%; font-size: 12.5px; }
  .answer { padding: 11px 12px; font-size: 12.5px; }
  .research-samples { gap: 5px; }
  .research-samples .sample { font-size: 11.5px; padding: 5px 10px; }

  /* Composer stays reachable with one thumb */
  .research-composer { gap: 6px; }
  .research-input { padding: 10px 12px; font-size: 13px; }
  .research-send { padding: 10px 16px; }
  .research-foot { font-size: 11px; }

  /* Plans: the assistant block */
  .pricing-ai-explainer { padding: 16px 14px; }
  .ai-head { flex-wrap: wrap; gap: 4px 10px; }
  .ai-lede { font-size: 12.5px; margin-bottom: 20px; }
  .ai-value-grid { gap: 20px; }
  .ai-value > span:last-child { max-width: 30ch; }
}

@media (max-width: 420px) {
  .rs-hero h1 { font-size: 21px; }
  .laptop-screen { border-width: 5px; }
  .am { height: 240px; }
  .am-composer { margin: 6px 9px 9px; }
}

/* password reveal --------------------------------------------------------- */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 40px; }
.pw-toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 4px;
  background: none; border: none; cursor: pointer; color: var(--muted);
}
.pw-toggle:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 6%, transparent); }
.pw-toggle[aria-pressed="true"] { color: var(--accent); }

/* =============================================== sidebar (market platform) */
.sidebar { padding: 0; overflow: hidden; }
.sb-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 14px 12px 10px;
}
.sidebar-brand { padding: 0; font-size: 16px; }
.sb-collapse {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: none; border-radius: 4px;
  background: none; border: none; cursor: pointer; color: var(--muted);
}
.sb-collapse:hover { background: color-mix(in oklab, var(--ink) 6%, transparent); color: var(--ink); }

/* live session state */
.sb-pulse {
  margin: 0 12px 12px; padding: 9px 11px; border-radius: 5px;
  background: var(--page); border: 1px solid var(--grid);
}
.sb-pulse-row { display: flex; align-items: baseline; gap: 7px; }
.sb-pulse-row + .sb-pulse-row { margin-top: 6px; }
.sb-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
}
.sb-status.live { color: var(--up); }
.sb-status.shut { color: var(--muted); }
.sb-index { font-size: 11px; font-weight: 700; color: var(--ink-2); }
.sb-index-val {
  font-size: 12.5px; font-weight: 700; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.sb-index-chg { font-size: 11px; font-weight: 650; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

.sb-scroll { flex: 1 1; overflow-y: auto; padding: 0 12px; }
.sb-group + .sb-group { margin-top: 4px; }
.sidebar-section { padding: 14px 10px 6px; }

/* recent counters */
.sb-recent { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 4px; }
.sb-chip {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px;
  padding: 3px 8px; border-radius: 3px;
  background: color-mix(in oklab, var(--ink) 5%, transparent); color: var(--ink-2);
}
.sb-chip:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 9%, transparent); }
.sb-chip.active { background: var(--accent-soft); color: var(--accent); }

/* footer */
.sidebar-foot { margin: 0; padding: 12px; border-top: 1px solid var(--grid); }
.sb-org-switch {
  width: 100%; margin-bottom: 10px; background: var(--page); color: var(--ink);
  border: 1px solid var(--border); border-radius: 4px;
  font-family: inherit; font-size: 11.5px; padding: 5px 7px;
}
.sb-user { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.sb-avatar {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
}
.sb-user-meta { min-width: 0; display: flex; flex-direction: column; }
.sb-user-name {
  font-size: 12px; font-weight: 650; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-user-sub {
  font-size: 10.5px; color: var(--muted); text-transform: capitalize;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-meta-row { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.sidebar-credits { font-size: 11px; color: var(--muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.sidebar-signout {
  width: 100%; margin-top: 8px; background: none; cursor: pointer;
  border: 1px solid var(--border); border-radius: 4px; color: var(--ink-2);
  font-family: inherit; font-size: 11.5px; font-weight: 600; padding: 6px;
}
.sidebar-signout:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 5%, transparent); }

/* collapsed rail */
.sidebar.collapsed { width: 58px; }
.sidebar.collapsed .sidebar-link { justify-content: center; padding: 9px 0; }
.sidebar.collapsed .sb-scroll { padding: 0 8px; }
.sidebar.collapsed .sidebar-foot { padding: 10px 8px; }
.sidebar.collapsed .sb-user { justify-content: center; margin-bottom: 0; }
/* The collapsed brand is the Bq mark itself now, which carries its own
   monochrome tile — the old accent square would sit behind it. */
.sidebar.collapsed .sidebar-brand {
  display: flex; align-items: center; justify-content: center;
}

@media (max-width: 860px) {
  .sidebar.collapsed { width: 232px; }
  .sb-collapse { display: none; }
}

/* =========================================== admin, settings, placeholders */
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; padding: 4px 0 16px;
}
.page-head h1 { margin: 0; font-size: 23px; letter-spacing: -0.4px; }

.admin-404 { text-align: center; padding: 80px 20px; }
.admin-404 h1 { margin: 0; font-size: 56px; letter-spacing: -1.5px; color: var(--muted); }
.admin-404 p { color: var(--ink-2); margin: 6px 0 20px; }

.kv { margin: 0; display: grid; grid-gap: 0; gap: 0; }
.kv > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--grid);
}
.kv > div:last-child { border-bottom: none; }
.kv dt { font-size: 12.5px; color: var(--ink-2); }
.kv dd { margin: 0; font-size: 12.5px; font-weight: 650; text-align: right; }

.settings-note { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; margin: 0 0 14px; }
.perm-list { display: flex; flex-wrap: wrap; gap: 5px; }
.perm-chip {
  font-size: 10.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 3px 8px; border-radius: 3px; color: var(--ink-2);
  background: color-mix(in oklab, var(--ink) 5%, transparent);
}
.invite-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* analytics bars */
.an-chart { display: flex; flex-direction: column; gap: 8px; }
.an-chart-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11.5px; color: var(--ink-2);
}
.an-chart-head b { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--ink); }
.an-bars {
  display: flex; align-items: flex-end; gap: 2px; height: 96px;
  padding-top: 4px; border-bottom: 1px solid var(--grid);
}
.an-bar { flex: 1 1; background: var(--accent); border-radius: 1.5px 1.5px 0 0; min-height: 2px; }
.an-axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); }

.soon-page { text-align: center; padding: 56px 28px; max-width: 520px; margin: 24px auto; }
.soon-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 10px; margin-bottom: 16px;
  background: var(--accent-soft); color: var(--accent);
}
.soon-page h1 { margin: 0 0 10px; font-size: 21px; letter-spacing: -0.3px; }
.soon-page p { margin: 0 0 22px; font-size: 13.5px; color: var(--ink-2); line-height: 1.65; }
.soon-cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ==================================================== admin UI components */
.head-count {
  margin-left: 10px; font-size: 12px; font-weight: 650; color: var(--muted);
  background: color-mix(in oklab, var(--ink) 6%, transparent);
  padding: 2px 8px; border-radius: 999px; vertical-align: middle;
}
.head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.table-card { padding: 0; overflow: hidden; }
.table-card .loading { padding: 40px 0; }
.table-card .sector-foot { padding: 12px 18px; border-top: 1px solid var(--grid); margin: 0; }
.table-scroll-x { overflow-x: auto; }
.admin-table { min-width: 720px; }
.admin-table th { padding: 11px 18px; background: var(--page); }
.admin-table td { padding: 11px 18px; vertical-align: middle; }
.admin-table tbody tr:hover { background: color-mix(in oklab, var(--ink) 3%, transparent); }

.cell-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cell-title {
  font-size: 13px; font-weight: 650; display: inline-flex; align-items: center; gap: 7px;
}
.cell-title.link {
  background: none; border: none; padding: 0; cursor: pointer; color: var(--ink);
  font-family: inherit; text-align: left;
}
.cell-title.link:hover { color: var(--accent); text-decoration: underline; }
.cell-sub {
  font-size: 11.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px;
}
.tag-admin, .tag-you {
  font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
  padding: 1px 5px; border-radius: 3px;
}
.tag-admin { background: var(--accent-soft); color: var(--accent); }
.tag-you { background: color-mix(in oklab, var(--ink) 8%, transparent); color: var(--muted); }

.row-actions { display: inline-flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.row-btn {
  background: none; border: 1px solid var(--border); border-radius: 4px;
  color: var(--ink-2); font-family: inherit; font-size: 11.5px; font-weight: 600;
  padding: 4px 10px; cursor: pointer; white-space: nowrap;
}
.row-btn:hover:not(:disabled) { color: var(--ink); border-color: var(--baseline); }
.row-btn:disabled { opacity: 0.45; cursor: default; }
.row-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.row-btn.danger { background: var(--down); border-color: var(--down); color: #fff; }
.confirm-pair { display: inline-flex; gap: 5px; }
.inline-edit { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.inline-edit .filter-input { width: 190px; }

.table-empty { padding: 30px 18px !important; text-align: center; color: var(--muted); }

/* toast */
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 200; display: flex; align-items: center; gap: 14px;
  max-width: min(520px, calc(100vw - 32px));
  padding: 11px 14px; border-radius: 6px; font-size: 13px; line-height: 1.45;
  box-shadow: 0 12px 34px rgba(24, 12, 62, 0.28);
  animation: toast-in 0.18s ease;
}
.toast-ok { background: var(--ink); color: var(--page); }
.toast-error { background: var(--down); color: #fff; }
.toast button {
  background: none; border: none; color: inherit; cursor: pointer;
  font-size: 17px; line-height: 1; opacity: 0.7; padding: 0;
}
.toast button:hover { opacity: 1; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

/* plan switching */
.pricing-note-inline {
  text-align: center; font-size: 12px; color: var(--muted);
  padding: 9px; border: 1px dashed var(--border); border-radius: 4px;
}
.billing-notice {
  margin-top: 8px; padding: 12px 16px; border-radius: 5px; font-size: 12.5px;
  line-height: 1.55; color: var(--ink-2);
  background: var(--accent-soft);
  border-left: 2px solid var(--accent);
}

@media (max-width: 720px) {
  .admin-table th, .admin-table td { padding: 9px 12px; }
  .row-actions { justify-content: flex-start; }
}

/* ---------------------------------------------------- credit top-up --- */
/* A strip, not a grid: the copy holds the left, the packs sit right. Three
   tiles stretched across a full-width card is mostly empty space. */
.topup {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.topup-intro { min-width: 0; }
.topup-intro h2 {
  display: flex; align-items: center; gap: 7px;
  margin: 0; font-size: 0.95rem; font-weight: 650; color: var(--ink);
  letter-spacing: -0.01em;
}
.topup-intro h2 svg { color: var(--accent); }
.topup-intro p { margin: 3px 0 0; font-size: 0.8rem; color: var(--muted); }
.topup-intro p b { color: var(--ink-2); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.topup-note {
  flex-basis: 100%; margin: 0; font-size: 0.76rem; color: var(--muted);
}

.pack-row { display: flex; gap: 6px; flex-wrap: wrap; }
.pack {
  position: relative; display: flex; flex-direction: column; gap: 1px;
  min-width: 134px; padding: 9px 13px 10px; text-align: left;
  border: 1px solid var(--border); border-radius: 3px;
  background: var(--page); color: inherit; cursor: pointer; font: inherit;
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.pack:hover:not(:disabled) {
  border-color: var(--accent); background: var(--accent-soft);
  transform: translateY(-1px);
}
.pack:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pack:disabled { cursor: default; opacity: 0.55; }
.pack.best { border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); }
.pack-flag {
  position: absolute; top: -7px; right: 9px; padding: 1px 6px;
  font-size: 0.6rem; font-weight: 650; letter-spacing: 0.05em;
  text-transform: uppercase; border-radius: 2px;
  background: var(--accent); color: #fff;
}
.pack-credits {
  font-size: 1.12rem; font-weight: 700; line-height: 1.15; color: var(--ink);
  letter-spacing: -0.02em; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.pack-price {
  font-size: 0.82rem; font-weight: 600; color: var(--ink-2);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.pack-rate { font-size: 0.7rem; color: var(--muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .topup { gap: 12px; }
  .pack-row { width: 100%; }
  .pack { flex: 1 1; min-width: 0; padding: 9px 10px 10px; }
}

/* ------------------------------------------------ payment callback --- */
.soon-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-bottom: 4px; border-radius: 50%;
  font-size: 1.15rem; font-weight: 700; line-height: 1;
}
.soon-badge.good {
  background: color-mix(in oklab, var(--up) 14%, transparent); color: var(--up);
}
.soon-badge.bad {
  background: color-mix(in oklab, var(--down) 12%, transparent); color: var(--down);
}
.soon-spin {
  width: 26px; height: 26px; margin-bottom: 6px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--accent);
  animation: soon-spin 0.7s linear infinite;
}
@keyframes soon-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .soon-spin { animation-duration: 2.4s; } }
.soon-amount {
  margin: 2px 0 0; font-size: 1.3rem; font-weight: 700; color: var(--ink);
  letter-spacing: -0.02em; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.soon-amount span { font-size: 0.8rem; font-weight: 500; color: var(--muted); }
.soon-sub { font-size: 0.8rem; color: var(--muted); }

/* ------------------------------------------------ revenue cash split --- */
.cash-split { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cash-chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 4px 9px; border-radius: 3px;
  border: 1px solid var(--border); background: var(--page);
  font-size: 0.74rem; color: var(--muted);
}
.cash-chip b { font-size: 0.85rem; color: var(--ink); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------ billing page --- */
.page-head.tight { margin: 0 0 12px; }
.page-head.tight h2 {
  display: flex; align-items: center; gap: 7px;
  margin: 0; font-size: 0.95rem; font-weight: 650; color: var(--ink);
  letter-spacing: -0.01em;
}
.page-head.tight h2 svg { color: var(--accent); }

.use-grid {
  display: grid; grid-gap: 6px; gap: 6px; margin-bottom: 14px;
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
}
.use-stat, .use-spark {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: 3px;
  border: 1px solid var(--border); background: var(--page);
}
.use-spark { grid-column: span 2; justify-content: flex-end; gap: 6px; }
.use-value {
  font-size: 1.2rem; font-weight: 700; color: var(--ink);
  letter-spacing: -0.02em; line-height: 1.1; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.use-label {
  font-size: 0.7rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.spark {
  display: flex; align-items: flex-end; gap: 1px; height: 38px;
}
.spark-bar {
  flex: 1 1; min-width: 0; border-radius: 1px 1px 0 0;
  background: var(--accent);
}

.mono { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; font-size: 0.76rem; letter-spacing: -0.01em; }

.topup-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.topup-cta h2 {
  display: flex; align-items: center; gap: 7px;
  margin: 0; font-size: 0.95rem; font-weight: 650; color: var(--ink);
}
.topup-cta h2 svg { color: var(--accent); }
.topup-cta p { margin: 3px 0 0; font-size: 0.8rem; color: var(--muted); }

@media (max-width: 640px) {
  .use-spark { grid-column: span 2; }
}

/* VAT clarification under a plan price — quiet, but never hidden. */
.pricing-vat {
  margin-top: 2px; font-size: 0.72rem; color: var(--muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------- plan change quote --- */
.quote-backdrop {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  padding: 20px; background: rgba(20, 16, 29, 0.44);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}
.quote { width: min(430px, 100%); }
.quote h2 {
  margin: 0 0 10px; font-size: 1.02rem; font-weight: 660; color: var(--ink);
  letter-spacing: -0.015em;
}
.quote-lede { margin: 0 0 14px; font-size: 0.84rem; color: var(--ink-2); line-height: 1.6; }
.quote-lede b { color: var(--ink); }
.quote-lines { margin: 0 0 12px; display: flex; flex-direction: column; gap: 7px; }
.quote-lines > div { display: flex; justify-content: space-between; gap: 14px; }
.quote-lines dt { font-size: 0.82rem; color: var(--ink-2); }
.quote-lines dd {
  margin: 0; font-size: 0.82rem; font-weight: 600; color: var(--ink);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.quote-credit dt, .quote-credit dd { color: var(--up) !important; }
.quote-sum {
  padding-top: 9px; margin-top: 2px; border-top: 1px solid var(--border);
}
.quote-sum dt { font-weight: 650; color: var(--ink) !important; }
.quote-total { font-size: 1.12rem !important; letter-spacing: -0.02em; }
.quote-note { margin: 0 0 4px; font-size: 0.75rem; color: var(--muted); line-height: 1.55; }
.quote-cta { display: flex; gap: 7px; margin-top: 14px; }
.quote-cta .login-btn { flex: 1 1; }

/* Queued plan change — informational, never alarming. */
.pending-change {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  border-left: 2px solid var(--accent);
}
.pending-change > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pending-change b { font-size: 0.85rem; color: var(--ink); font-weight: 650; }
.pending-change span { font-size: 0.79rem; color: var(--muted); line-height: 1.55; }

/* ========================================================= app bar & tabs ==
   A header has to read as a layer above the page, not as the first block of
   content. Translucency plus a hairline does that at rest; the shadow only
   appears once something has scrolled under it. */
.appbar {
  position: -webkit-sticky;
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklab, var(--surface) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--grid);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.appbar.lifted {
  border-bottom-color: transparent;
  box-shadow: 0 1px 0 var(--grid), 0 6px 22px -14px rgba(38, 18, 96, 0.35);
}
.appbar-row {
  max-width: 1240px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  height: 54px; padding: 0 24px;
}

.appbar-brand { display: flex; align-items: center; gap: 4px; flex: none; }
/* Monochrome by design: the mark carries the name, the accent is reserved for
   data. --ink inverts with the theme, so the square is black on white and
   white on black without a second rule. Corners are barely eased rather than
   rounded — the shape should read as cut, not softened. */
.appbar-mark {
  display: inline-grid; place-items: center;
  min-width: 26px; height: 22px; padding: 0 5px;
  border-radius: 2px; font-size: 12.5px; font-weight: 800;
  background: var(--ink); color: var(--surface);
  letter-spacing: -0.03em; font-feature-settings: "ss01";
}
.appbar-word { font-size: 16px; font-weight: 740; letter-spacing: -0.02em; color: var(--ink); }

.appbar-session {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--grid); background: var(--page);
  font-size: 11.5px; color: var(--muted); white-space: nowrap;
}
.appbar-session.live { color: var(--up); border-color: color-mix(in oklab, var(--up) 30%, var(--grid)); }

.appbar-links { display: flex; align-items: center; gap: 4px; margin-left: 6px; }
.appbar-links a {
  padding: 6px 11px; border-radius: 6px;
  font-size: 13px; font-weight: 620; color: var(--ink-2);
  transition: background .12s ease, color .12s ease;
}
.appbar-links a:hover { background: color-mix(in oklab, var(--ink) 5%, transparent); color: var(--ink); }
.appbar-links a.active { color: var(--accent); background: var(--accent-soft); }

.appbar-search { margin-left: auto; min-width: 0; max-width: 340px; flex: 1 1 220px; }
.appbar-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; flex: none; }
.appbar-actions .appbar-cta { margin-left: 5px; }   /* set apart from the icons */
/* Only collapse the auto-margin where the search box is actually rendered.
   It stays in the DOM when hidden, so an unscoped sibling selector matched on
   mobile too and pinned the controls beside the brand instead of the edge. */
@media (min-width: 861px) {
  .appbar-search + .appbar-actions { margin-left: 0; }
}

.appbar-icon {
  display: none; place-items: center; width: 34px; height: 34px;
  flex: none;
  border-radius: 8px; border: 1px solid transparent;
  background: transparent; color: var(--ink-2); cursor: pointer;
}
.appbar-icon:hover { background: color-mix(in oklab, var(--ink) 6%, transparent); color: var(--ink); }
/* Always a glyph — the only bar control that is never text. */
.theme-toggle { display: grid; }

.appbar-signin {
  background: none; border: 0; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 640; color: var(--ink-2); padding: 6px 8px;
}
.appbar-signin:hover { color: var(--accent); }
.appbar-cta {
  border: 0; cursor: pointer; font: inherit; white-space: nowrap;
  font-size: 12.5px; font-weight: 660; color: #fff;
  padding: 7px 13px; border-radius: 7px;
  background: linear-gradient(140deg, var(--accent), color-mix(in oklab, var(--accent) 62%, #d946ef));
  box-shadow: 0 1px 2px rgba(38, 18, 96, .18);
}
.appbar-cta:hover { filter: brightness(1.07); }

.appbar-avatar {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: 50%; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 24%, transparent);
}
.appbar-avatar:hover { background: color-mix(in oklab, var(--accent) 20%, transparent); }

.appbar-sheet {
  padding: 0 15px 11px;
  border-top: 1px solid var(--grid);
  animation: sheet-in .16s ease;
}
.appbar-sheet .search-wrap, .appbar-sheet form { width: 100%; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(-4px); } }

.only-mobile { display: none; }
@media (max-width: 860px) {
  .only-desktop { display: none !important; }
  .only-mobile { display: inline-flex; }
  .appbar-icon { display: grid; }
  .appbar-row { height: 52px; padding: 0 12px; gap: 8px; }
  .appbar-word { font-size: 15px; }
  .appbar-session { font-size: 11px; padding: 2px 8px; }
  .appbar-sheet { padding: 0 12px 10px; }
}
@media (max-width: 860px) {
  /* The bar is for identity, search and account. Which session the data is
     from belongs with the data, and the page already states it. */
  .appbar-session { display: none; }
}

/* ---------------------------------------------------------------- tab bar */
.tabbar { display: none; }
@media (max-width: 860px) {
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in oklab, var(--surface) 88%, transparent);
    backdrop-filter: saturate(1.6) blur(16px);
    -webkit-backdrop-filter: saturate(1.6) blur(16px);
    border-top: 1px solid var(--grid);
  }
  .tab {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 5px 2px 3px; border: 0; background: none; cursor: pointer;
    font: inherit; color: var(--muted);
    -webkit-tap-highlight-color: transparent;
  }
  .tab-icon {
    display: grid; place-items: center; width: 40px; height: 26px;
    border-radius: 999px; transition: background .16s ease, color .16s ease;
  }
  .tab-label { font-size: 10.5px; font-weight: 600; letter-spacing: .01em; }
  .tab.active { color: var(--accent); }
  .tab.active .tab-icon { background: var(--accent-soft); }
  .tab:active .tab-icon { transform: scale(.94); }
  /* The assistant is the thing we want a thumb to find first. */
  .tab.accent .tab-icon { color: var(--accent); }
  .tab.accent.active .tab-icon {
    background: linear-gradient(140deg, var(--accent), color-mix(in oklab, var(--accent) 60%, #d946ef));
    color: #fff;
  }
}

/* ============================================================ chat surface ==
   The transcript owns the scroll, not the page, so the composer never drifts
   off-screen mid-conversation. */
.chat {
  display: flex; flex-direction: column;
  height: calc(100vh - 54px);
  margin: -22px -24px -72px;      /* escape .app-main padding, own the frame */
}
.chat-scroll {
  flex: 1 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scroll-padding-bottom: 24px;
}

/* ------------------------------------------------------------- chat frame */
.chat-bar {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  padding: 9px 24px; border-bottom: 1px solid var(--grid);
  background: var(--surface);
}
.chat-bar-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chat-bar-left b { font-size: 13.5px; font-weight: 660; color: var(--ink); }
.chat-bar-right { display: flex; align-items: center; gap: 8px; flex: none; }


.chat-meter { display: flex; align-items: center; gap: 7px; }
.chat-meter-text { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.chat-meter-text b { color: var(--ink); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.chat-meter-track {
  width: 54px; height: 3px; border-radius: 2px; background: var(--grid);
  overflow: hidden;
}
.chat-meter-fill { display: block; height: 100%; background: var(--accent); }
.chat-credit-pill {
  padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 620;
  background: var(--accent-soft); color: var(--accent);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.chat-act {
  border: 1px solid var(--grid); background: var(--surface); cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 600; color: var(--ink-2);
  padding: 3px 9px; border-radius: 5px;
}
.chat-act:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.chat-act:disabled { opacity: .5; cursor: default; }

/* -------------------------------------------------------------- empty state */
.chat-hero {
  position: relative; max-width: 680px; margin: 0 auto;
  padding: clamp(32px, 9vh, 92px) 24px 28px; text-align: center;
}
.chat-hero-glow {
  position: absolute; left: 50%; top: 0; translate: -50% 0;
  width: min(560px, 90%); height: 260px; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side,
              color-mix(in oklab, var(--accent) 22%, transparent), transparent 76%);
  filter: blur(12px); opacity: .5;
}
.chat-hero > * { position: relative; z-index: 1; }
/* Black and white, matching the Bq mark: --ink inverts with the theme, so it
   is a dark tile on light and a light tile on dark without a second rule. */
.chat-mark {
  display: grid; place-items: center; margin: 0 auto 13px;
  width: 34px; height: 34px; border-radius: 3px;
  background: var(--ink); color: var(--surface);
}

.chat-hero .chat-mark { margin-bottom: 13px; }
.chat-hero h1 {
  margin: 0 0 8px; font-size: clamp(21px, 3.4vw, 28px); line-height: 1.25;
  letter-spacing: -0.03em; font-weight: 680; color: var(--ink);
}
.chat-hi {
  display: block; font-size: 13px; font-weight: 600; letter-spacing: 0;
  color: var(--muted); margin-bottom: 4px;
}
.chat-hero p {
  margin: 0 auto; max-width: 470px; font-size: 13.5px; line-height: 1.65;
  color: var(--ink-2);
}
.chat-hero-cta { margin-top: 22px; text-align: left; }

.chat-starters {
  display: grid; grid-gap: 7px; gap: 7px; margin-top: 22px; text-align: left;
  /* Explicitly two, not auto-fit. Four cards divide evenly into 2x2 at any
     width; auto-fit silently drops to a single column whenever the hero is
     narrower than twice the minimum, which is how these ended up stacked. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.starter {
  display: grid; grid-gap: 3px; gap: 3px; padding: 12px 13px; cursor: pointer;
  grid-template-columns: auto 1fr; grid-template-areas: "icon label" "prompt prompt";
  border: 1px solid var(--grid); border-radius: 9px; background: var(--surface);
  font: inherit; text-align: left;
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.starter:hover:not(:disabled):not(.is-static) {
  border-color: color-mix(in oklab, var(--accent) 42%, var(--grid));
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -12px rgba(38, 18, 96, .45);
}
.starter:disabled { opacity: .55; cursor: default; }
.starter.is-static { cursor: default; }
.starter-icon { grid-area: icon; color: var(--accent); display: grid; place-items: center; }
.starter-label { grid-area: label; font-size: 13px; font-weight: 650; color: var(--ink); }
.starter-prompt {
  grid-area: prompt; font-size: 12px; line-height: 1.5; color: var(--muted);
  margin-top: 1px;
}

/* ------------------------------------------------------------- transcript */
.chat-thread {
  max-width: 780px; margin: 0 auto; padding: 22px 24px 8px;
  display: flex; flex-direction: column; gap: 20px;
}
.turn { display: flex; gap: 11px; }
.turn-user { justify-content: flex-end; }
.bubble {
  max-width: min(560px, 82%); padding: 9px 14px; border-radius: 15px 15px 3px 15px;
  background: linear-gradient(140deg, var(--accent), color-mix(in oklab, var(--accent) 68%, #d946ef));
  color: #fff; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap;
  box-shadow: 0 2px 10px -6px rgba(38, 18, 96, .5);
}
/* Black on light, white on dark: --ink and --surface swap with the theme, so
   the mark inverts without a second rule. Barely-rounded corners, matching
   the 3px on the 34px hero mark and on the favicon tile, rather than the 8px
   squircle it had: a near-square plate, not a rounded chip. */
.turn-avatar {
  display: grid; place-items: center; width: 25px; height: 25px; flex: none;
  border-radius: 3px; margin-top: 1px;
  background: var(--ink); color: var(--surface);
}
.turn-avatar.pulse { animation: avatar-pulse 1.5s ease-in-out infinite; }
@keyframes avatar-pulse { 50% { opacity: .55; } }
.turn-body { min-width: 0; flex: 1 1; padding-top: 2px; }

.chat-block-title {
  font-size: 13px; font-weight: 660; color: var(--ink); margin-bottom: 7px;
}
.chat-prose { margin: 0; font-size: 13.5px; line-height: 1.68; color: var(--ink-2); }
/* A list the answer wrote as prose. The agent is told to put suggestions in
   the redirect card instead, but a slip should degrade to a readable list
   rather than to one mashed line of dash-separated fragments. */
.chat-list {
  margin: 9px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.68;
  color: var(--ink-2);
}
.chat-list li { margin: 3px 0; }

.turn-brand {
  margin: 10px 0 0; font-size: 9.5px; letter-spacing: 0.04em;
  color: var(--muted); opacity: 0.8;
}
.chat-table-wrap {
  overflow-x: auto; border: 1px solid var(--grid); border-radius: 8px;
}
.chat-facts { display: grid; grid-gap: 5px; gap: 5px; margin: 0 0 10px; }
.chat-facts > div { display: flex; justify-content: space-between; gap: 16px; }
.chat-facts dt { font-size: 12.5px; color: var(--muted); }
.chat-facts dd {
  margin: 0; font-size: 12.5px; font-weight: 620; color: var(--ink);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.chat-inline-link { font-size: 12.5px; font-weight: 650; color: var(--accent); }
.chat-inline-link:hover { text-decoration: underline; }

.turn-actions {
  display: flex; align-items: center; gap: 6px; margin-top: 10px;
  opacity: 0; transition: opacity .14s ease;
}
.turn-assistant:hover .turn-actions, .turn-actions:focus-within { opacity: 1; }
@media (hover: none) { .turn-actions { opacity: 1; } }
.turn-cost { font-size: 11px; color: var(--muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

.typing { display: inline-flex; gap: 4px; padding: 6px 0; }
.typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  animation: typing 1.1s ease-in-out infinite;
}
.typing i:nth-child(2) { animation-delay: .16s; }
.typing i:nth-child(3) { animation-delay: .32s; }
@keyframes typing { 0%, 60%, 100% { opacity: .25; transform: translateY(0); }
                    30% { opacity: 1; transform: translateY(-3px); } }

/* ---------------------------------------------------------------- composer */
.chat-dock {
  position: relative; flex: none;
  padding: 10px 24px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--page) 62%, transparent);
}
.chat-wall { max-width: 780px; margin: 0 auto; padding: 0 24px 8px; }

.chat-jump {
  position: absolute; top: -34px; left: 50%; translate: -50% 0;
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; cursor: pointer; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--grid);
  box-shadow: 0 4px 14px -8px rgba(38, 18, 96, .5);
}
.chat-jump:hover { color: var(--accent); border-color: var(--accent); }

/* The gradient lives on a wrapper border so focus lights the whole edge
   without the layout shift a thicker border would cause. */
.composer {
  position: relative; max-width: 780px; margin: 0 auto;
  border-radius: 15px; padding: 1px;
  background: var(--grid);
  transition: background .18s ease, box-shadow .18s ease;
}
.composer::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; opacity: 0; transition: opacity .18s ease; pointer-events: none;
  background: linear-gradient(120deg, var(--accent),
              color-mix(in oklab, var(--accent) 45%, #d946ef) 48%,
              color-mix(in oklab, var(--accent) 60%, #22d3ee));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.composer:focus-within::before { opacity: 1; }
.composer:focus-within {
  box-shadow: 0 8px 30px -18px color-mix(in oklab, var(--accent) 70%, transparent);
}
.composer.busy::before { opacity: 1; animation: edge-shift 2.4s linear infinite; }
@keyframes edge-shift { to { filter: hue-rotate(30deg); } }

.composer > * { position: relative; z-index: 1; }
.composer-field {
  background: var(--surface); border-radius: 14px 14px 0 0; padding: 11px 14px 2px;
}
.composer-input {
  width: 100%; border: 0; outline: 0; resize: none; background: transparent;
  font: inherit; font-size: 14px; line-height: 1.55; color: var(--ink);
  max-height: 200px; overflow-y: auto;
}
.composer-input::placeholder { color: var(--muted); }
.composer-input:disabled { cursor: not-allowed; }

.composer-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 8px 7px 10px; background: var(--surface);
  border-radius: 0 0 14px 14px;
}
.composer-modes { display: flex; gap: 2px; }
.mode {
  border: 0; background: none; cursor: pointer; font: inherit;
  font-size: 12px; font-weight: 620; color: var(--muted);
  padding: 4px 10px; border-radius: 7px;
}
.mode:hover { color: var(--ink-2); background: color-mix(in oklab, var(--ink) 5%, transparent); }
.mode.on { background: var(--accent-soft); color: var(--accent); }

.composer-right { display: flex; align-items: center; gap: 9px; }
.composer-hint { font-size: 11px; color: var(--muted); }
.composer-hint kbd {
  font: inherit; font-size: 10.5px; padding: 1px 4px; border-radius: 3px;
  border: 1px solid var(--grid); background: var(--page);
}
.composer-send {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border: 0; border-radius: 9px; cursor: pointer; color: #fff;
  background: linear-gradient(140deg, var(--accent), color-mix(in oklab, var(--accent) 62%, #d946ef));
  transition: opacity .14s ease, filter .14s ease;
}
.composer-send:hover:not(:disabled) { filter: brightness(1.08); }
.composer-send:disabled { opacity: .35; cursor: default; }
.composer-send.stop { background: var(--ink-2); }

.chat-foot {
  max-width: 780px; margin: 8px auto 0; text-align: center;
  font-size: 11px; color: var(--muted);
}

@media (max-width: 860px) {
  .chat { height: calc(100dvh - 52px - 62px - env(safe-area-inset-bottom));
          margin: -16px -15px calc(-78px - env(safe-area-inset-bottom)); }
  .chat-bar { padding: 8px 15px; }
  .chat-thread { padding: 16px 15px 6px; gap: 17px; }
  .chat-dock { padding: 8px 12px 10px; }
  .chat-wall { padding: 0 12px 8px; }
  .chat-hero { padding: 26px 16px 20px; }
  /* Two by two. Four full-width cards is a scroll before you have asked
     anything; at this size the label carries the idea and the prompt is a
     hint, so both can step down and still read. */
  .chat-starters { grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 16px; }
  .starter { padding: 10px 11px; border-radius: 8px; gap: 2px; }
  .starter-icon svg { width: 13px; height: 13px; }
  .starter-label { font-size: 12px; letter-spacing: -0.01em; }
  .starter-prompt { font-size: 10.5px; line-height: 1.45; }
  .bubble { max-width: 88%; }
}

/* An empty room should look composed, not top-loaded: with nothing to scroll,
   the invitation sits where the eye lands. */
.chat-scroll.centred { display: grid; align-content: center; }
.chat-scroll.centred .chat-hero { padding-top: 8px; padding-bottom: 8px; }
@media (max-width: 860px) {
  .chat-foot { margin-top: 6px; font-size: 10.5px; }
}

/* The sector in a counter's header is now its own way back to the sector
   view, since the breadcrumb that used to do that is gone. */
.head-sector { color: inherit; border-bottom: 1px solid transparent; }
.head-sector:hover { color: var(--accent); border-bottom-color: currentColor; }

@media (max-width: 360px) {
  /* Below this the two columns get tight; the prompt drops and the label
     alone still says what the card will ask. */
  .starter-prompt { display: none; }
  .starter { padding: 11px 10px; }
}
.profile-text.muted-note { color: var(--muted); font-style: italic; }

/* ================================================= conversation history ==
   Docked on a desktop and open by default; a slide-over below 1100px, where
   there is no spare column. Docking it was the point: a thread list you have
   to summon is a thread list nobody uses, and every research tool people
   already know keeps one on screen.

   The dock is done with grid on `.chat` rather than by restructuring the
   markup, so the bar, the transcript and the composer stay exactly where they
   were and only the rail is new. */
.chat.with-hist {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 268px;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.chat.with-hist .chat-bar    { grid-column: 1; grid-row: 1; }
.chat.with-hist .chat-scroll { grid-column: 1; grid-row: 2; }
.chat.with-hist .chat-dock   { grid-column: 1; grid-row: 3; }
.chat.with-hist .chat-wall   { grid-column: 1; }

.hist-scrim {
  position: fixed; inset: 0; z-index: 44;
  background: rgba(20, 16, 29, 0.36);
}
.hist {
  position: fixed; z-index: 45; top: 0; right: 0; bottom: 0; width: min(320px, 86vw);
  display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--grid);
  box-shadow: -12px 0 40px -24px rgba(38, 18, 96, .6);
  animation: hist-in .18s cubic-bezier(.32,.72,0,1);
}
.hist.docked {
  position: static; z-index: auto; width: auto; grid-column: 2; grid-row: 1 / -1;
  box-shadow: none; animation: none; background: transparent;
  border-left: 1px solid var(--grid);
}
@keyframes hist-in { from { transform: translateX(14px); opacity: 0; } }

.hist-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 14px 10px;
}
.hist-head b {
  font-size: 10.5px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.hist-collapse {
  display: grid; place-items: center; width: 24px; height: 24px;
  border: 0; background: none; cursor: pointer; color: var(--muted);
  border-radius: 5px;
}
.hist-collapse:hover {
  color: var(--ink); background: color-mix(in oklab, var(--ink) 7%, transparent);
}

/* The primary action in the rail, so it is a button rather than a link in a
   header: starting a fresh line of research is what people come here to do. */
.hist-new {
  display: flex; align-items: center; gap: 7px;
  margin: 0 10px 10px; padding: 8px 11px;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface); cursor: pointer; font: inherit;
  font-size: 12.5px; font-weight: 600; color: var(--ink);
}
.hist-new:hover { border-color: var(--accent); color: var(--accent); }
.hist-new span { font-size: 14px; line-height: 1; color: var(--muted); }
.hist-new:hover span { color: var(--accent); }

.hist-empty {
  margin: 0; padding: 4px 14px 18px; font-size: 12px; line-height: 1.6;
  color: var(--muted);
}
.hist-list {
  list-style: none; margin: 0; padding: 0 8px 10px;
  overflow-y: auto; flex: 1 1; min-height: 0;
}
.hist-list ul { list-style: none; margin: 0; padding: 0; }
.hist-bucket + .hist-bucket { margin-top: 12px; }
.hist-bucket-label {
  padding: 4px 6px; font-size: 10px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.hist-item {
  position: relative; display: flex; align-items: center; border-radius: 6px;
}
.hist-item:hover { background: color-mix(in oklab, var(--ink) 5%, transparent); }
.hist-item.active { background: var(--accent-soft); }
.hist-open {
  flex: 1 1; min-width: 0; text-align: left; border: 0; background: none;
  cursor: pointer; font: inherit; padding: 7px 9px;
  display: flex; flex-direction: column; gap: 1px;
}
.hist-title {
  font-size: 12.5px; font-weight: 550; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hist-item.active .hist-title { color: var(--accent); font-weight: 650; }
.hist-meta { font-size: 10px; color: var(--muted); }
.hist-tools {
  display: flex; gap: 1px; padding-right: 5px;
  opacity: 0; transition: opacity .12s ease;
}
.hist-item:hover .hist-tools, .hist-tools:focus-within { opacity: 1; }
@media (hover: none) { .hist-tools { opacity: 1; } }
.hist-tool {
  display: grid; place-items: center; width: 22px; height: 22px;
  border: 0; background: none; cursor: pointer; color: var(--muted);
  border-radius: 4px;
}
.hist-tool:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 8%, transparent); }
.hist-rename {
  flex: 1 1; min-width: 0; margin: 5px 7px; padding: 5px 7px;
  border: 1px solid var(--accent); border-radius: 4px;
  background: var(--page); color: var(--ink); font: inherit; font-size: 12.5px;
}
.chat-act.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* ------------------------------------------------------ answer feedback */
.rate { display: inline-flex; gap: 1px; margin-left: 2px; }
.rate-btn {
  display: grid; place-items: center; width: 24px; height: 22px;
  border: 0; background: none; cursor: pointer; color: var(--muted);
  border-radius: 4px; transition: color .12s ease, background .12s ease;
}
.rate-btn:hover { color: var(--ink-2); background: color-mix(in oklab, var(--ink) 7%, transparent); }
.rate-btn.up { color: var(--up); background: color-mix(in oklab, var(--up) 13%, transparent); }
.rate-btn.down.on { color: var(--down); background: color-mix(in oklab, var(--down) 12%, transparent); }
.rate-btn.down svg { margin-top: 2px; }

@media (min-width: 1180px) {
  /* More room on a desktop, so the prompts stop wrapping to three lines. */
  .chat-hero { max-width: 820px; }
  .chat-starters { gap: 8px; }
  .starter { padding: 13px 14px; }
}

/* The section name stands in for the wordmark once the sidebar is showing it.
   Same weight and size as the brand it replaces, so the bar's left edge keeps
   its rhythm rather than looking like something went missing. */
.appbar-section {
  margin: 0; font-size: 15px; font-weight: 680; color: var(--ink);
  letter-spacing: -0.02em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
/* .appbar-brand is a flex item, so hiding it needs the flex display back on
   the mobile side rather than the inline-flex the utility assumes. */
@media (max-width: 860px) { .appbar-brand.only-mobile { display: flex; } }

@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }

/* =============================================================== billing ==
   The history table is the one place a finance person reads carefully, so the
   figures get room and the reference — needed only for reconciliation — rides
   under the description rather than taking a column. */
.cell-stack.amount { align-items: flex-end; }
.cell-sub.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; letter-spacing: -0.02em;
}

@media (max-width: 720px) {
  /* Six columns will not fit a phone and a sideways scroll hides the amount,
     which is the column that matters. Each invoice becomes a card instead.

     THE min-width RESET IS THE WHOLE FIX. `.admin-table` carries
     min-width: 720px so the desktop table can scroll rather than crush its
     columns. Switching the rows to `display: block` here did not clear it, so
     every "card" was still 720px wide inside the scroll container: the labels
     sat at the left edge and their values 720px to the right, off screen. The
     stacking was working perfectly and none of it was visible at once. */
  .bill-table { min-width: 0; width: 100%; }
  .table-scroll-x:has(.bill-table) { overflow-x: visible; }

  .bill-table thead { display: none; }
  .bill-table, .bill-table tbody, .bill-table td { display: block; }
  /* A wrapping flex row, so the reading order can differ from the column
     order the desktop table needs, and so the three short particulars can
     share one line instead of taking three. */
  .bill-table tr {
    display: flex; flex-flow: row wrap; align-items: baseline;
    border: 1px solid var(--border); border-radius: 6px;
    padding: 11px 13px; margin-bottom: 8px; background: var(--surface);
  }
  .bill-table td {
    padding: 3px 0; border: 0; text-align: left;
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 14px; min-width: 0;
  }
  .bill-table td::before {
    content: attr(data-label);
    flex: none; font-size: 10px; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.05em;
  }
  .bill-table td[data-label=""]::before { content: none; }

  /* What it was for, as the card's title: full width, no label, the reference
     under it. */
  .bill-table td[data-label="For"] {
    order: 1; display: block; padding: 0 0 8px;
  }
  .bill-table td[data-label="For"]::before { display: none; }
  .bill-table td[data-label="For"] .cell-title { font-size: 13.5px; }

  /* Then the figure, ruled off and set large: on a billing screen it is the
     line everyone is actually looking for. */
  .bill-table td[data-label="Amount"] {
    order: 2; padding: 8px 0; margin-bottom: 4px;
    border-top: 1px solid var(--grid); border-bottom: 1px solid var(--grid);
    align-items: center;
  }
  .bill-table td[data-label="Amount"] .cell-title { font-size: 15px; }

  /* Date, method and status on one line, unlabelled. "Sep 6, 2026",
     "Mobile Money" and "paid" each announce what they are, so three label
     rows were 60px of card spent restating the obvious, and only two
     invoices fitted a screen. */
  .bill-table td[data-label="Date"],
  .bill-table td[data-label="Method"],
  .bill-table td[data-label="Status"] {
    flex: 0 0 auto; padding: 7px 0 0; gap: 0;
  }
  .bill-table td[data-label="Date"]   { order: 3; }
  .bill-table td[data-label="Method"] { order: 4; text-transform: capitalize; }
  .bill-table td[data-label="Status"] { order: 5; }
  .bill-table td[data-label="Date"]::before,
  .bill-table td[data-label="Method"]::before,
  .bill-table td[data-label="Status"]::before { content: none; }
  .bill-table td[data-label="Date"]::after,
  .bill-table td[data-label="Method"]::after {
    content: "·"; color: var(--baseline); margin: 0 7px;
  }
  .bill-table td[data-label="Date"],
  .bill-table td[data-label="Method"] { color: var(--ink-2); }

  /* The receipt on its own line at the foot. */
  .bill-table td[data-label=""] { order: 6; flex: 0 0 100%; }
  .bill-table td[data-label="For"],
  .bill-table td[data-label="Amount"] { flex: 0 0 100%; }

  .bill-table .cell-stack, .bill-table .cell-stack.amount {
    align-items: flex-end; text-align: right;
  }
  .bill-table td[data-label="For"] .cell-stack {
    align-items: flex-start; text-align: left;
  }
  .bill-table td.num { text-align: left; }
  /* Secondary, and sized to its label: the amount is what the card is for,
     and a full-width button above it was competing for that job. */
  .bill-table .row-btn { margin-top: 9px; padding: 6px 16px; }
  .bill-table .table-empty { text-align: center; padding: 22px 4px; }
}

/* ========================================================== fundamentals ==
   Statements are inherently wide: a row per line item, a column per year. */
.fund-age {
  font-size: 11px; color: var(--muted); white-space: nowrap;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--grid); background: var(--page);
}
.fund-age.stale {
  color: var(--down);
  border-color: color-mix(in oklab, var(--down) 30%, var(--grid));
}
.fund-tabs { margin: 0 0 12px; flex-wrap: wrap; }
.fund-note { margin: 0 0 12px; font-size: 12.5px; color: var(--ink-2); }

.fund-headline {
  display: grid; grid-gap: 5px; gap: 5px; margin-bottom: 14px;
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
}
.fund-stat {
  display: flex; flex-direction: column; gap: 1px;
  padding: 9px 11px; border-radius: 4px;
  border: 1px solid var(--border); background: var(--page);
}
.fund-stat-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fund-stat-value {
  font-size: 1.05rem; font-weight: 700; color: var(--ink);
  letter-spacing: -0.02em; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.fund-stat-year { font-size: 10px; color: var(--muted); }

.fund-table td.fund-item {
  font-size: 12px; color: var(--ink-2); white-space: nowrap;
  position: -webkit-sticky;
  position: sticky; left: 0; background: var(--surface);
}
.fund-table td.num { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fund-table td.num.neg { color: var(--down); }
.fund-table th.num { white-space: nowrap; }

/* ================================================================== news ==*/
.news-list { list-style: none; margin: 0; padding: 0; }
.news-item + .news-item { border-top: 1px solid var(--grid); }
.news-link {
  display: flex; flex-direction: column; gap: 3px; padding: 9px 2px;
  border-radius: 4px;
}
.news-link:hover .news-title { color: var(--accent); }
.news-title { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.45; }
.news-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 11px; color: var(--muted);
}
.news-source { font-weight: 600; }
.news-dot { opacity: .6; }
.news-tags { display: inline-flex; gap: 3px; margin-left: 2px; }
.news-tag {
  font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .03em;
  padding: 1px 5px; border-radius: 3px;
  background: var(--accent-soft); color: var(--accent);
}
.news-empty { padding: 14px 2px; font-size: 12.5px; color: var(--muted); }

/* ========================================================= account menu ==*/
.acct { position: relative; }
.appbar-avatar { border: 1px solid color-mix(in oklab, var(--accent) 24%, transparent);
                 cursor: pointer; font-family: inherit; }
.appbar-avatar[aria-expanded="true"] {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.acct-menu {
  position: absolute; top: calc(100% + 7px); right: 0; z-index: 60;
  width: 244px; padding: 5px;
  background: var(--surface); border: 1px solid var(--grid); border-radius: 8px;
  box-shadow: 0 12px 34px -18px rgba(38, 18, 96, .55);
  animation: acct-in .13s ease;
}
@keyframes acct-in { from { opacity: 0; transform: translateY(-4px); } }
.acct-head {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 10px 10px; border-bottom: 1px solid var(--grid); margin-bottom: 4px;
}
.acct-name {
  font-size: 13px; font-weight: 660; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acct-mail {
  font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acct-row { display: flex; align-items: center; gap: 7px; margin-top: 6px; }
.acct-credits { font-size: 11px; color: var(--muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.acct-org {
  margin-top: 4px; font-size: 10.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acct-links { display: flex; flex-direction: column; }
.acct-link {
  display: block; width: 100%; text-align: left;
  padding: 7px 10px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 550; color: var(--ink-2);
  border-radius: 5px;
}
.acct-link:hover { background: color-mix(in oklab, var(--ink) 6%, transparent); color: var(--ink); }
.acct-link.danger {
  margin-top: 4px; border-top: 1px solid var(--grid);
  border-radius: 0 0 5px 5px; color: var(--down);
}
.acct-link.danger:hover { background: color-mix(in oklab, var(--down) 9%, transparent); }
.acct-link:disabled { opacity: .6; cursor: default; }
/* A failing pipeline is the one stat on the overview that demands action. */
.rail-sub.warn { color: var(--down); font-weight: 600; }
/* Live tick marker on the spotlight header. */
.spot-live {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 620; color: var(--up);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* A market cap we computed ourselves is an estimate, not the exchange's. */
.cap-derived { color: var(--muted); }
.th-dot { margin-left: 5px; vertical-align: 1px; }
/* Says what the change is measured against, without shouting it. */
.th-note {
  font-weight: 500; font-size: 9.5px; color: var(--muted);
  text-transform: none; letter-spacing: 0;
}
/* Says the chart is tracking the board rather than a choice you made. */
.spot-follow {
  padding: 1px 7px; border-radius: 999px; white-space: nowrap;
  font-size: 10px; font-weight: 650; letter-spacing: .03em;
  background: var(--accent-soft); color: var(--accent);
}
/* Cycle and currency sit together above the plan grid. */
.pricing-toggles { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ========================================================== permissions ==
   The description leads; the key is available but recedes. */
.perm-role { font-size: 11.5px; color: var(--muted); text-transform: capitalize; }
.perm-groups {
  display: grid; grid-gap: 14px 22px; gap: 14px 22px;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
}
.perm-group-title {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.perm-items { list-style: none; margin: 0; padding: 0; display: grid; grid-gap: 5px; gap: 5px; }
.perm-item { display: flex; gap: 7px; align-items: baseline; }
.perm-tick { flex: none; color: var(--up); font-size: 11px; }
.perm-text { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); min-width: 0; }
.perm-key {
  display: block; margin-top: 1px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; color: var(--muted);
}

/* Dormant capabilities read as pending, not as things you do today. */
.perm-dormant {
  margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--grid);
}
.perm-dormant p {
  margin: 0 0 8px; font-size: 12px; line-height: 1.55; color: var(--muted);
}
.perm-item.dim .perm-text { color: var(--muted); }
.perm-item.dim .perm-tick { color: var(--muted); }

/* ------------------------------------------------------- close account --- */
.danger-zone { border-left: 2px solid var(--down); }
.danger-zone h2 { color: var(--ink); }
.danger-text {
  margin: 0 0 12px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
  max-width: 60ch;
}
.danger-text b { color: var(--ink); }
.danger-fields {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; max-width: 460px;
}
.danger-fields .filter-input { flex: 1 1 190px; }
.danger-cta { display: flex; gap: 6px; flex-wrap: wrap; }
.row-btn.danger {
  border-color: color-mix(in oklab, var(--down) 40%, var(--border));
  color: var(--down);
}
.row-btn.danger:hover:not(:disabled) {
  background: color-mix(in oklab, var(--down) 9%, transparent);
}

/* ------------------------------------------------------- convert to team --- */
.convert { border-left: 2px solid var(--accent); }
.convert-text {
  margin: 0 0 12px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
  max-width: 62ch;
}
.convert-note {
  margin: 0 0 10px; font-size: 12px; line-height: 1.55; color: var(--muted);
  max-width: 62ch;
}
.row-btn.primary {
  border-color: var(--accent); color: #fff; background: var(--accent);
}
.row-btn.primary:hover:not(:disabled) { filter: brightness(1.08); }
.row-btn.primary:disabled { opacity: .5; }

/* --------------------------------------------- dormant capabilities row --- */
.perm-more { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--grid); }
.perm-more-row {
  display: flex; align-items: baseline; gap: 9px; width: 100%;
  padding: 7px 9px; border: 1px solid var(--grid); border-radius: 5px;
  background: var(--page); cursor: pointer; font: inherit; text-align: left;
}
.perm-more-row:hover { border-color: var(--accent); }
.perm-more-count {
  flex: none; font-size: 11px; font-weight: 700; color: var(--accent);
  padding: 1px 7px; border-radius: 999px; background: var(--accent-soft);
}
.perm-more-text { flex: 1 1; font-size: 12px; line-height: 1.5; color: var(--muted); }
.perm-more-toggle {
  flex: none; font-size: 11.5px; font-weight: 620; color: var(--ink-2);
}
.perm-items.dormant { margin-top: 9px; padding-left: 9px; }
.perm-more-cta {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-top: 11px;
}
.perm-more-note {
  margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--muted);
  max-width: 46ch;
}
.perm-convert { margin-top: 11px; }
.perm-convert .danger-fields { align-items: center; max-width: 560px; }
.perm-convert .filter-input { flex: 1 1 240px; }
.join .soon-badge { display: inline-grid; }
.join-note { color: var(--ink-2); }
.join-dead { color: var(--muted); font-size: 13px; line-height: 1.6; }
.sb-status.pre { color: var(--muted); }
.sb-pulse-asof {
  margin-top: 2px; font-size: 9.5px; color: var(--muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* =========================================================== market brief ==*/
/* The brief leads the page, so it is the one card allowed a display size of
   type. Everything under it steps back down to the platform's data scale. */

.news-head { align-items: center; justify-content: space-between; gap: 10px; }

.brief { padding: 18px 20px 15px; }
.brief-period {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--accent);
}
.brief-headline {
  margin: 7px 0 12px; font-size: 24px; line-height: 1.24; font-weight: 700;
  letter-spacing: -0.025em; color: var(--ink); max-width: 46ch;
}
.brief-body p {
  margin: 0 0 11px; font-size: 14.5px; line-height: 1.68; color: var(--ink-2);
  max-width: 74ch;
}
.brief-body p:first-child { color: var(--ink); }

.brief-quotes {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  justify-content: center; margin: 16px 0 0;
}
.brief-quote {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 4px 10px; border-radius: 3px;
  border: 0; background: var(--page);
  font-size: 11.5px; color: var(--muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.brief-quote:hover b { color: var(--accent); }
.brief-quote b {
  font-size: 11.5px; font-weight: 700; color: var(--ink);
  letter-spacing: .01em;
}
.brief-quote em { font-style: normal; font-weight: 650; }
.brief-quote em.up { color: var(--up); }
.brief-quote em.down { color: var(--down); }

.brief-provenance {
  margin-top: 12px; font-size: 11px; line-height: 1.6; color: var(--muted);
  max-width: 82ch;
}

.brief-absent, .brief-gate { padding: 22px 20px; }
.brief-absent h2, .brief-gate h2 { margin: 0 0 8px; }
.brief-gate-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* ------------------------------------------------- the figures behind it ---*/
.wrap { margin-top: 8px; }
.wrap-asof { font-size: 11px; color: var(--muted); }

.wrap-lead {
  display: grid; grid-template-columns: minmax(200px, 260px) 1fr;
  grid-gap: 18px;
  gap: 18px; align-items: center;
  padding: 4px 0 14px; border-bottom: 1px solid var(--grid);
}
.wrap-lead-figure { display: flex; flex-direction: column; gap: 1px; }
.wrap-lead-name { font-size: 11px; color: var(--muted); }
.wrap-lead-level {
  font-size: 28px; font-weight: 700; letter-spacing: -0.03em;
  color: var(--ink); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.wrap-lead-change { font-size: 13px; font-weight: 650; color: var(--muted); }
.wrap-lead-change.up { color: var(--up); }
.wrap-lead-change.down { color: var(--down); }
.wrap-lead-change em {
  font-style: normal; font-weight: 500; font-size: 11.5px;
  color: var(--muted); margin-left: 6px;
}

.breadth-bar {
  display: flex; height: 9px; border-radius: 3px; overflow: hidden;
  background: var(--grid); gap: 2px;
}
.breadth-bar .seg { display: block; }
.breadth-bar .up-bg { background: var(--up-mark); }
.breadth-bar .down-bg { background: var(--down); }
.breadth-bar .flat-bg { background: var(--baseline); }
.breadth-key {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 7px;
  font-size: 11px; color: var(--ink-2);
}
.breadth-key b { font-weight: 700; }
.breadth-key b.up { color: var(--up); }
.breadth-key b.down { color: var(--down); }
.breadth-key .muted { color: var(--muted); }

.wrap-indices {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  grid-gap: 1px 14px;
  gap: 1px 14px;
}
.wrap-indices li {
  display: flex; align-items: baseline; gap: 6px; padding: 4px 0;
  font-size: 11.5px;
}
.wrap-idx-name { color: var(--muted); flex: 1 1; min-width: 0; }
.wrap-idx-level { font-weight: 650; color: var(--ink); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.wrap-idx-change { font-weight: 650; color: var(--muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.wrap-idx-change.up { color: var(--up); }
.wrap-idx-change.down { color: var(--down); }

.wrap-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-gap: 8px;
  gap: 8px; margin: 14px 0 0;
}
.wrap-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 11px; border-radius: 3px;
  border: 0; background: var(--page);
}
.wrap-stat-label {
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
}
.wrap-stat-value {
  font-size: 15px; font-weight: 700; color: var(--ink);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.wrap-stat-value.up { color: var(--up); }
.wrap-stat-value.down { color: var(--down); }
.wrap-stat-note { font-size: 10.5px; color: var(--muted); }
.wrap-stat-note.up { color: var(--up); }
.wrap-stat-note.down { color: var(--down); }

.wrap-sectors, .wrap-movers-grid { margin-top: 16px; }
.wrap h4 {
  margin: 0 0 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.wrap-sector-list { list-style: none; margin: 0; padding: 0; }
.wrap-sector-list li {
  display: grid; grid-template-columns: minmax(120px, 1.4fr) minmax(90px, 2fr) 62px;
  align-items: center; grid-gap: 10px; gap: 10px; padding: 3px 0; font-size: 11.5px;
}
.wrap-sector-name { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis;
                    white-space: nowrap; }
.wrap-sector-list .chip { justify-self: end; }

.wrap-movers-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  grid-gap: 14px;
  gap: 14px;
}
.wrap-movers ul { list-style: none; margin: 0; padding: 0; }
.wrap-movers li {
  display: grid; grid-template-columns: 46px 1fr auto;
  align-items: baseline; grid-gap: 6px; gap: 6px; padding: 3px 0; font-size: 11.5px;
}
.wrap-movers li + li { border-top: 1px solid var(--grid); }
.wrap-sym { font-weight: 700; color: var(--ink); font-size: 11.5px; }
.wrap-sym:hover { color: var(--accent); }
.wrap-close {
  color: var(--muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; text-align: right;
}

/* ------------------------------------------------------------- subtopics ---*/
.brief-topics { margin-top: 8px; }
.topic-list { list-style: none; margin: 0; padding: 0; }
.topic-card { padding: 10px 0; }
.topic-card + .topic-card { border-top: 1px solid var(--grid); }
.topic-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; text-align: left; color: var(--ink);
}
.topic-label { font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em; }
.topic-count { font-size: 10.5px; color: var(--muted); margin-left: auto; }
.topic-card .caret { font-size: 10px; color: var(--muted); }
.topic-summary {
  margin: 5px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
  max-width: 82ch;
}
.topic-sources { list-style: none; margin: 9px 0 0; padding: 0 0 0 11px;
                 border-left: 2px solid var(--accent-soft); }
.topic-sources li { padding: 4px 0; }
.topic-sources a { font-size: 12px; font-weight: 600; color: var(--ink); }
.topic-sources a:hover { color: var(--accent); }
.topic-source-meta {
  display: flex; align-items: center; gap: 6px; margin-top: 2px;
  font-size: 10.5px; color: var(--muted);
}

/* ----------------------------------------------------------- the feed ------*/
.news-filters { margin: 2px 0 6px; }
.news-filter-flag { margin-left: auto; }
.news-excerpt {
  font-size: 11.5px; line-height: 1.55; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-topic {
  padding: 1px 6px; border-radius: 3px; background: var(--grid);
  color: var(--ink-2); font-size: 9.5px; font-weight: 650;
}
.news-item { display: flex; flex-direction: column; }
.news-item > .news-tags { padding: 0 0 9px 2px; }
.news-filters button em {
  font-style: normal; opacity: .6; font-size: 9.5px; margin-left: 2px;
}
.news-more { margin-top: 10px; }

@media (max-width: 680px) {
  .brief { padding: 15px 14px 13px; }
  .brief-headline { font-size: 19px; }
  .brief-body p { font-size: 13.5px; }
  .wrap-lead { grid-template-columns: 1fr; gap: 12px; }
  .wrap-lead-level { font-size: 24px; }
  /* Two columns of small type beats one column of scrolling on a phone. */
  .wrap-stats { grid-template-columns: 1fr 1fr; }
  .wrap-movers-grid { grid-template-columns: 1fr 1fr; }
  .wrap-sector-list li { grid-template-columns: 1fr 56px; }
  .wrap-sector-list .sector-bar { display: none; }
}

/* ================================================== brief subscriptions ==*/
.digest-prefs { list-style: none; margin: 10px 0 0; padding: 0; }
.digest-prefs li + li { margin-top: 4px; }
.digest-pref {
  display: flex; gap: 9px; align-items: flex-start; cursor: pointer;
  padding: 10px 11px; border-radius: 5px;
  border: 1px solid var(--border); background: var(--page);
}
.digest-pref:hover { border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); }
.digest-pref input { margin: 2px 0 0; accent-color: var(--accent); }
.digest-pref span { display: flex; flex-direction: column; gap: 1px; }
.digest-pref b { font-size: 12.5px; font-weight: 650; color: var(--ink); }
.digest-pref em {
  font-style: normal; font-size: 11.5px; line-height: 1.5; color: var(--muted);
}
.digest-pref.compact { padding: 7px 9px; }
.digest-pref.compact em { font-size: 11px; }

.signup-briefs {
  border: 0; padding: 0; margin: 4px 0 2px;
  display: flex; flex-direction: column; gap: 4px;
}
.signup-briefs legend {
  padding: 0 0 5px; font-size: 11px; font-weight: 650; color: var(--muted);
}

.unsub { max-width: 480px; margin: 8vh auto 0; }
.unsub h1 { font-size: 18px; margin: 0 0 9px; }
.unsub-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* ==================================================== buttons & actions ==*/
/* Two shapes the app was using by name before either existed: a primary
   action carrying the accent, and a quiet one that sits beside it without
   competing. Both work as <button> and as <Link>, which is why the padding
   and line-height are set rather than inherited. */
.btn-primary, .btn-quiet {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 15px; border-radius: 5px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 650; line-height: 1.2;
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.btn-primary:hover { background: color-mix(in oklab, var(--accent) 86%, #000); }
.btn-quiet {
  background: var(--page); color: var(--ink-2);
  border: 1px solid var(--border); font-weight: 600;
}
.btn-quiet:hover {
  color: var(--ink);
  border-color: color-mix(in oklab, var(--accent) 45%, var(--border));
}
.btn-primary:disabled, .btn-quiet:disabled { opacity: .55; cursor: default; }

/* Pagination reads as the end of the list, not as an action floating after it:
   full width, quiet, with the list's own rule above it. */
.news-more {
  width: auto; margin: 0; font-size: 12.5px;
  padding: 7px 16px; border-radius: 999px;
}

/* ------------------------------------------------- top bar, middle widths --*/
/* A fifth link put the signed-out bar over its width budget: "AI research"
   wrapped to two lines and the search field ran under the sign-in button.
   Links never wrap, and between the mobile breakpoint and 1080px the field
   gives way to the search icon the bar already carries — which is the same
   thing the bar does on a phone, just starting sooner. */
.appbar-links { flex: none; }
.appbar-links a { white-space: nowrap; }

@media (max-width: 1080px) {
  .appbar-search.only-desktop { display: none !important; }
  .appbar-icon.only-mobile { display: grid; }
  .appbar-sheet { display: block; }
}
@media (max-width: 940px) {
  /* Tighter still: the labels keep their own line, the padding gives. */
  .appbar-links { gap: 1px; margin-left: 2px; }
  .appbar-links a { padding: 6px 7px; font-size: 12.5px; }
}

/* ------------------------------------------------------------- day strip ---*/
.day-strip { margin: -2px 0 8px; gap: 3px; }
.day-strip button {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 9px; font-size: 12px;
}
.day-strip button em {
  font-style: normal; font-size: 9.5px; opacity: .55;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
/* A day that already has a brief written for it. */
.day-dot {
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
  flex: none;
}
.day-strip button.active .day-dot { background: #fff; }

.brief-nearest {
  margin-left: 8px; padding: 1px 6px; border-radius: 3px;
  background: var(--grid); color: var(--muted);
  font-size: 9.5px; font-weight: 600; letter-spacing: 0;
  text-transform: none;
}

.link-quiet {
  background: none; border: 0; padding: 0; margin-right: 8px; cursor: pointer;
  font-family: inherit; font-size: 11px; color: var(--accent);
  text-decoration: underline; text-underline-offset: 2px;
}
.link-quiet:hover { color: var(--ink); }

@media (max-width: 680px) {
  /* Eight chips do not fit a phone; scroll them rather than wrap to three rows. */
  .day-strip {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding-bottom: 2px;
  }
  .day-strip::-webkit-scrollbar { display: none; }
  .day-strip button { flex: none; }
  .day-strip button em { display: none; }
}

/* --------------------------------------------- brief: prose beside a chart --*/
.brief-split {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
  grid-gap: 24px;
  gap: 24px; align-items: stretch;
}
/* The prose no longer needs its own measure — the column sets it. */
.brief-split .brief-body p { max-width: none; }
/* A column, so its last child can take up whatever the chart leaves. */
.brief-aside { display: flex; flex-direction: column; }

.sess { margin: 0; }
.sess figcaption {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; padding-bottom: 6px;
}
.sess-title {
  font-size: 10px; font-weight: 700; letter-spacing: .055em;
  text-transform: uppercase; color: var(--muted);
}
.sess-value {
  font-size: 13px; font-weight: 700; color: var(--muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sess-value.up { color: var(--up); }
.sess-value.down { color: var(--down); }
.sess-value em {
  font-style: normal; font-weight: 500; font-size: 10px; color: var(--muted);
  margin-left: 5px;
}

.sess-plot { position: relative; }
.sess-base { stroke: var(--baseline); stroke-width: 1; }
.sess-axis { stroke: var(--grid); stroke-width: 1; }
.sess-line {
  fill: none; stroke: var(--accent); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
}
.sess-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.sess-label {
  fill: var(--ink-2); font-size: 9.5px; font-weight: 650;
  font-family: inherit; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.sess-up { fill: var(--up-mark); }
.sess-down { fill: var(--down); }

/* Hit targets wider than the marks they select. */
.sess-hit { position: absolute; inset: 0; display: flex; }
.sess-hit button {
  flex: 1 1; background: none; border: 0; padding: 0; cursor: crosshair;
}
.sess-hit button:focus-visible { outline: 1px solid var(--accent); }

.sess-read {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  margin-top: 7px;
  font-size: 11px; color: var(--ink-2); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.sess-read-date { font-weight: 650; color: var(--ink); }
.sess-read b { font-weight: 700; }
.sess-read .up { color: var(--up); }
.sess-read .down { color: var(--down); }
.sess-read .muted { color: var(--muted); margin-left: auto; }

/* Official levels, spaced to fill the column the chart leaves short. */
.brief-indices {
  list-style: none; margin: 12px 0 0; padding: 0;
  flex: 1 1; display: flex; flex-direction: column; justify-content: space-evenly;
  gap: 2px;
}
.brief-indices li {
  display: grid; grid-template-columns: 1fr auto 58px;
  align-items: baseline; grid-gap: 8px; gap: 8px;
  padding: 4px 0; font-size: 11.5px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.brief-indices li + li { border-top: 1px solid var(--grid); }
.brief-idx-name { color: var(--muted); overflow: hidden;
                  text-overflow: ellipsis; white-space: nowrap; }
.brief-idx-level { font-weight: 650; color: var(--ink); }
.brief-idx-change { color: var(--muted); text-align: right; font-weight: 650; }
.brief-idx-change.up { color: var(--up); }
.brief-idx-change.down { color: var(--down); }

.brief-details {
  display: flex; width: -moz-fit-content; width: fit-content; margin: 18px auto 0; gap: 7px;
  padding: 7px 16px; border-radius: 999px; font-size: 12.5px;
}
.brief-details .caret { font-size: 9px; opacity: .7; }

.brief-figures {
  margin: 18px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 7px; gap: 7px;
}
.brief-figures > div {
  background: var(--page); padding: 10px 12px; border-radius: 3px;
  display: flex; flex-direction: column; gap: 1px;
}
.brief-figures dt {
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
}
.brief-figures dd {
  margin: 0; font-size: 13.5px; font-weight: 700; color: var(--ink);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.brief-figures dd.up { color: var(--up); }
.brief-figures dd.down { color: var(--down); }
.brief-figures small { font-size: 10px; color: var(--muted); }

.news-foot {
  display: flex; justify-content: center; gap: 8px;
  padding-top: 14px;
}

/* The Today tab before today's brief exists: the reason, and the way to the
   session that does. Centred, because there is nothing else on the card to
   align to. */
.brief-awaiting {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 40px 24px; text-align: center;
}
/* A statement, not a section label — so it drops the card heading's caps. */
.brief-awaiting h2 {
  margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.015em;
  text-transform: none; color: var(--ink);
}
.brief-awaiting .profile-text { max-width: 46ch; }
.brief-awaiting .btn-primary { margin-top: 6px; }

/* Filter counts: present but subordinate to the label they qualify. */
.news-filters button em {
  font-style: normal; font-size: 9.5px; opacity: .6; margin-left: 3px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.news-filters button.active em { opacity: .85; }


/* ============================================ news page: narrow screens ==
   Placed last on purpose. The first version of this block sat above the rules
   it was overriding, so at equal specificity the base rules won and none of it
   applied — the figure row stayed four across on a phone and pushed the whole
   card past the viewport, which then clipped everything inside it. */

@media (max-width: 900px) {
  /* The chart follows the prose rather than squeezing beside it. */
  .brief-split { grid-template-columns: 1fr; gap: 14px; }
  .brief-aside { display: block; }
  .brief-indices { margin-top: 10px; }
}

@media (max-width: 680px) {
  /* Two columns of small type beats one column of scrolling. */
  .brief-figures { grid-template-columns: 1fr 1fr; }
  .wrap-stats { grid-template-columns: 1fr 1fr; }
  .wrap-movers-grid { grid-template-columns: 1fr 1fr; }
  /* A tabular figure has a floor; below it the track must be allowed to
     shrink or the grid grows the card instead. */
  .wrap-stats > *, .wrap-movers > *, .brief-figures > div { min-width: 0; }
  .wrap-indices { grid-template-columns: 1fr 1fr; }
  .brief-quotes { justify-content: flex-start; }
  .brief-headline { font-size: 19px; }
  .brief { padding: 15px 14px 13px; }
  .brief-awaiting { padding: 30px 16px; }
  .sess-read { font-size: 10.5px; gap: 7px; }
}

@media (max-width: 430px) {
  /* At phone width a two-up figure block truncates its own numbers, and a
     truncated figure is worse than a taller card. */
  .brief-figures, .wrap-stats { grid-template-columns: 1fr; }
  .wrap-indices { grid-template-columns: 1fr; }
  .wrap-movers-grid { grid-template-columns: 1fr; }
  .wrap-sector-list li { grid-template-columns: 1fr 56px; }
  .wrap-sector-list .sector-bar { display: none; }
  .news-foot { flex-direction: column; }
  .news-foot .news-more { width: 100%; }
}

/* ============================================================ artifacts ====
   Charts and tables rendered from the research agent's tool results.

   THREE SERIES, NOT FOUR. The categorical steps below were picked by running
   scripts/validate_palette.js over them, not by eye. A fourth hue passes in
   light mode but cannot be separated from the others inside dark mode's much
   narrower lightness band (OKLCH L 0.48–0.67) — every candidate left one pair
   at ΔE ~7 under deuteranopia and ~5 under tritanopia, i.e. two lines a
   colour-blind reader cannot tell apart. So the cap is three, enforced in
   Artifacts.jsx and stated in the render_chart tool description. Worst pair,
   all pairs, both modes: ΔE 13.4 (deutan) / 10.8 (tritan).

   Direction stays reserved: --up and --down mean up and down, and are never
   handed out as a series colour. */
:root {
  --s1: #5b3fd6;
  --s2: #b26400;
  --s3: #0088a8;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --s1: #7f62e8;
    --s2: #c47d10;
    --s3: #1f9bb5;
  }
}
:root[data-theme="dark"] {
  --s1: #7f62e8;
  --s2: #c47d10;
  --s3: #1f9bb5;
}

.art {
  margin: 14px 0 0; padding: 12px 13px 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px;
}
/* The header carries the title now (.art-head / .art-title) — this only has
   to reset the browser default so the flex row is not fighting it. */
.art figcaption { margin: 0; }
.art-plot { position: relative; }

.art-grid { stroke: var(--grid); stroke-width: 1; }
.art-axis { stroke: var(--baseline); stroke-width: 1; }
.art-base { stroke: var(--baseline); stroke-width: 1; }
.art-cross { stroke: var(--baseline); stroke-width: 1; }
.art-tick {
  fill: var(--muted); font-size: 9.5px; font-family: inherit;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.art-line {
  fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
}
.art-line.s1, .art-dot.s1, .art-swatch.s1 { stroke: var(--s1); }
.art-line.s2, .art-dot.s2, .art-swatch.s2 { stroke: var(--s2); }
.art-line.s3, .art-dot.s3, .art-swatch.s3 { stroke: var(--s3); }
.art-dot { stroke-width: 2; }
.art-dot.s1 { fill: var(--s1); }
.art-dot.s2 { fill: var(--s2); }
.art-dot.s3 { fill: var(--s3); }
/* A ring in the page colour, so overlapping marks stay countable. */
.art-dot { stroke: var(--surface); }

.art-bar.pos { fill: var(--s1); }
.art-bar.neg { fill: var(--down); }

.art-band.outer { fill: var(--s1); opacity: 0.15; }
.art-band.inner { fill: var(--s1); opacity: 0.26; }

/* Hit targets wider than the marks they select, inset to the plot area. */
.art-hit { position: absolute; top: 0; bottom: 18px; display: flex; }
.art-hit button {
  flex: 1 1; background: none; border: 0; padding: 0; cursor: crosshair;
}

.art-read {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-top: 8px; font-size: 11px; color: var(--ink-2);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.art-read-x { font-weight: 650; color: var(--ink); }
.art-read-v { display: inline-flex; align-items: baseline; gap: 5px; }
.art-read-v b { font-weight: 700; color: var(--ink); }
.art-read.fan .art-read-v.up b { color: var(--up); }
.art-read.fan .art-read-v.down b { color: var(--down); }

.art-legend {
  display: flex; gap: 13px; flex-wrap: wrap; margin-top: 7px;
  font-size: 10.5px; color: var(--muted);
}
.art-key { display: inline-flex; align-items: center; gap: 5px; }
.art-swatch {
  width: 9px; height: 3px; border-radius: 2px; display: inline-block;
  background: currentColor;
}
.art-swatch.s1 { background: var(--s1); }
.art-swatch.s2 { background: var(--s2); }
.art-swatch.s3 { background: var(--s3); }
.art-swatch.band-outer {
  height: 8px; background: var(--s1); opacity: 0.15;
}
.art-swatch.band-inner {
  height: 8px; background: var(--s1); opacity: 0.26;
}

.art-note {
  margin: 8px 0 0; font-size: 10.5px; line-height: 1.5; color: var(--muted);
}

/* A wide table scrolls inside its own box; the page never scrolls sideways. */
.art-scroll { overflow-x: auto; }
.art-table table.data { font-size: 12px; }
.art-table-foot {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: 7px; font-size: 10.5px;
}
.art-table-foot .muted { color: var(--muted); }

/* ------------------------------------------------- steps and citations --- */
/* What the agent is doing, while it does it. A minute of three dots reads as
   a hang; the same minute with "Reading five years of daily bars for KCB"
   reads as work — and is the honest account of it. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-gap: 6px; gap: 6px; }
.steps li {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink-2);
}
.step-mark {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--baseline);
}
.steps li.running .step-mark {
  background: var(--accent); animation: step-pulse 1.1s ease-in-out infinite;
}
.steps li.done .step-mark { background: var(--up-mark); }
.steps li.failed .step-mark { background: var(--down); }
.steps li.done, .steps li.failed { color: var(--muted); }
.step-label { min-width: 0; }
.step-meta {
  margin-left: auto; font-size: 10.5px; color: var(--muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums; flex: none;
}
@keyframes step-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}

.cites { margin-top: 12px; }
.cites-toggle {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 11px; color: var(--muted);
  text-decoration: underline; -webkit-text-decoration-color: var(--border); text-decoration-color: var(--border);
  text-underline-offset: 3px;
}
.cites-toggle:hover { color: var(--ink-2); }
.cites-toggle em { font-style: normal; color: var(--down); }
/* minmax(0, 1fr) and min-width: 0, both deliberate. A grid item's default
   min-width is auto, which means it refuses to shrink below its content's
   min-content width — and a <pre> of unwrapped JSON or SQL has a very large
   one. The track grew to fit it and the whole panel ran off the side of the
   screen. These two lines are what let the code blocks scroll inside their
   own box instead. */
.cites-list {
  margin: 9px 0 0; padding: 0 0 0 18px; display: grid; grid-gap: 9px; gap: 9px;
  grid-template-columns: minmax(0, 1fr);
  font-size: 11.5px; color: var(--ink-2);
}
.cites-list li { min-width: 0; }
.cites-list li.bad { color: var(--down); }
.cites-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cites-tool {
  font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--muted); background: var(--page);
  border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px;
}
.cites-label { font-weight: 550; color: var(--ink); }
.cites-meta {
  margin-left: auto; font-size: 10px; color: var(--muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.cites-sql {
  margin: 5px 0 0; padding: 8px 9px; overflow-x: auto; max-width: 100%;
  background: var(--page); border: 1px solid var(--border);
  border-radius: 4px; font-size: 10.5px; line-height: 1.55;
  white-space: pre; color: var(--ink-2);
}
.cites-error { margin: 4px 0 0; font-size: 11px; color: var(--down); }

@media (max-width: 680px) {
  .art { padding: 10px 10px 9px; }
  .art-read { gap: 8px; font-size: 10.5px; }
  .art-legend { gap: 10px; }
  .cites-meta { margin-left: 0; }
}

/* -------------------------------------------------- admin: AI cost page --- */
.admin-intro {
  margin: -4px 0 16px; font-size: 12.5px; line-height: 1.65;
  color: var(--ink-2); max-width: 74ch;
}
.admin-intro code {
  font-size: 11.5px; background: var(--page); padding: 1px 5px;
  border: 1px solid var(--border); border-radius: 3px;
}
.admin-note {
  margin: -2px 0 12px; font-size: 11.5px; line-height: 1.6; color: var(--muted);
  max-width: 78ch;
}
.admin-split { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 14px; gap: 14px; }

/* Cost and revenue share one axis because they share a unit — the whole
   point of the panel is the gap between them, which two scales would hide. */
/* Bars, not an area. Left-aligned with a width cap, because three days of
   data spread across the full width renders as three solid blocks and stops
   reading as a time series at all. */
.an-bars.pairs { gap: 5px; align-items: flex-end; justify-content: flex-start; }
.cost-pair {
  flex: 0 1 auto; width: 26px; min-width: 8px;
  display: flex; align-items: flex-end; gap: 2px; height: 100%;
}
.cost-bar { flex: 1 1; border-radius: 1.5px 1.5px 0 0; min-height: 2px; }
.cost-bar.cost { background: var(--s2); }
.cost-bar.rev { background: var(--s1); }
.cost-key {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; color: var(--muted);
}
.cost-swatch {
  width: 9px; height: 3px; border-radius: 2px; display: inline-block;
  margin-left: 6px;
}
.cost-swatch.cost { background: var(--s2); }
.cost-swatch.rev { background: var(--s1); }

@media (max-width: 900px) {
  .admin-split { grid-template-columns: 1fr; }
}

/* Consecutive paragraphs in an answer. `.chat-prose` carries margin: 0 for the
   single-paragraph case, which ran two paragraphs of a research answer
   together into one wall. */
.chat-prose + .chat-prose { margin-top: 11px; }

/* ------------------------------------------------- the evidence trail --- */
/* The claim is that every figure is a query result rather than generated
   text. A claim like that is worth nothing if checking it is hard, so this
   is one click from every answer and goes all the way down to the rows. */
.ev-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1px solid var(--border); border-radius: 5px;
  padding: 4px 9px; cursor: pointer; font: inherit; font-size: 11px;
  font-weight: 550; color: var(--ink-2);
}
.ev-btn:hover { color: var(--ink); border-color: var(--baseline); }
.ev-btn.on {
  color: var(--accent); border-color: var(--accent);
  background: var(--accent-soft);
}
.ev-btn svg { flex: none; }
.ev-btn em {
  font-style: normal; font-size: 10px; font-weight: 700; color: var(--muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.ev-bad {
  width: 5px; height: 5px; border-radius: 50%; background: var(--down);
}

.ev-panel {
  margin-top: 10px; padding: 12px 13px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px;
}
.ev-verdict {
  margin: 0 0 12px; padding-bottom: 10px; font-size: 11.5px; line-height: 1.6;
  color: var(--ink-2); border-bottom: 1px solid var(--grid);
}
.ev-verdict.flagged { color: var(--down); }
.ev-more { font-size: 10.5px; margin-top: 6px; display: inline-block; }
.ev-data { margin-top: 7px; }
.ev-data table.data { font-size: 11px; }
.ev-note { font-size: 10px; color: var(--muted); display: block; margin-top: 5px; }
.ev-json {
  margin: 6px 0 0; padding: 8px 9px; max-height: 240px; overflow: auto;
  max-width: 100%;
  background: var(--page); border: 1px solid var(--border);
  border-radius: 4px; font-size: 10.5px; line-height: 1.5; color: var(--ink-2);
}

/* A tool result that is not a plain table: scalars as a compact list, then
   each array of records as its own small table. A raw JSON dump technically
   discloses everything and communicates nothing — and this panel exists to
   be read by someone checking a figure, not by someone debugging. */
.ev-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 4px 14px;
  gap: 4px 14px; margin: 7px 0 0; font-size: 11px;
}
.ev-facts > div {
  display: flex; justify-content: space-between; gap: 8px; min-width: 0;
  padding: 2px 0; border-bottom: 1px solid var(--grid);
}
.ev-facts dt { color: var(--muted); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.ev-facts dd {
  margin: 0; color: var(--ink); font-weight: 550; flex: none;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.ev-group { margin-top: 10px; min-width: 0; }
.ev-group-title {
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.ev-group table.data { font-size: 10.5px; }
.ev-prose {
  margin: 0; font-size: 11px; line-height: 1.6; color: var(--ink-2);
  overflow-wrap: anywhere;
}
.ev-foot {
  margin: 12px 0 0; padding-top: 9px; border-top: 1px solid var(--grid);
  font-size: 10px; color: var(--muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------ artifact downloads --- */
/* A figure that leaves the page has to take its provenance with it, which is
   why these are explicit exports rather than a right-click: the PNG is drawn
   with its title and basis note on it, and the CSV carries them as rows. See
   lib/download.js.

   Top right of the figure, because they belong to the whole artifact — a
   control under a chart reads as part of the chart's own caption. Dimmed
   until the figure is hovered so a page of three artifacts is not a page of
   six buttons, but never hidden: on a touch screen there is no hover, and an
   export you cannot find is an export that does not exist. */
.art-head {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 9px;
}
.art-title {
  font-size: 12px; font-weight: 650; color: var(--ink);
  letter-spacing: -0.01em; line-height: 1.45; min-width: 0;
}
.art-tools { display: flex; gap: 2px; margin-left: auto; flex: none; }
.art-tool {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 5px;
  background: none; border: 1px solid transparent; cursor: pointer;
  color: var(--muted); opacity: 0.65; transition: opacity 0.12s ease;
}
.art:hover .art-tool, .art-tool:focus-visible { opacity: 1; }
.art-tool:hover {
  color: var(--ink); background: var(--page); border-color: var(--border);
}
.art-tool:disabled { opacity: 0.4; cursor: default; }
.art-tool svg { flex: none; }

/* ---------------------------------------------------------- redirects --- */
/* A question this desk does not answer. The suggestions are buttons because
   a dead end that lists what you could have asked, unclickable, is a worse
   dead end. */
.redirect {
  margin: 4px 0 0; padding: 14px 15px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 2px solid var(--baseline); border-radius: 6px;
}
.redirect.needs_detail { border-left-color: var(--accent); }
.redirect.capability { border-left-color: var(--s3); }
.redirect-head {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
}
.redirect-msg {
  margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink);
}
.redirect-asks {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 6px; margin-top: 12px;
}
.redirect-ask {
  background: var(--page); border: 1px solid var(--border); border-radius: 5px;
  padding: 7px 11px; cursor: pointer; font: inherit; font-size: 12px;
  color: var(--ink-2); text-align: left; max-width: 100%;
}
.redirect-ask:hover {
  color: var(--ink); border-color: var(--accent); background: var(--accent-soft);
}
.redirect-ask:disabled { cursor: default; opacity: 0.7; }

/* A locked export: visible, so the capability is discoverable, with a padlock
   pip. It stays muted rather than picking up the accent on hover, because an
   accented control reads as available. */
.art-lock-wrap { position: relative; display: inline-flex; }
.art-tool-locked { position: relative; }
.art-tool-locked:hover { color: var(--ink-2); }
.art-tool-locked.on {
  color: var(--ink); background: var(--page); border-color: var(--border);
}
.art-tool-pip {
  position: absolute; right: 0; bottom: 0;
  color: var(--muted); background: var(--surface); border-radius: 3px;
}

.art-lock-pop {
  position: absolute; z-index: 30; top: calc(100% + 6px); right: 0;
  width: 250px; padding: 12px 13px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: var(--shadow);
}
.art-lock-title {
  font-size: 12.5px; font-weight: 650; color: var(--ink); margin-bottom: 4px;
}
.art-lock-desc {
  margin: 0 0 11px; font-size: 11.5px; line-height: 1.55; color: var(--ink-2);
}
.art-lock-cta { display: flex; align-items: center; gap: 12px; }
.art-lock-up {
  padding: 5px 12px; border-radius: 5px; background: var(--accent);
  color: #fff; font-size: 11.5px; font-weight: 650; text-decoration: none;
}
.art-lock-up:hover { filter: brightness(1.08); }
.art-lock-cta .link-quiet { font-size: 11.5px; }

/* Anchored to the right edge of the tools, so on a narrow artifact the
   popover cannot push the card sideways. */
@media (max-width: 460px) {
  .art-lock-pop { width: min(250px, calc(100vw - 60px)); }
}

/* Axis titles. Heavier than a tick label and in body ink, because on an
   exported chart they are the only thing saying what is being measured. */
/* Small tracked capitals, in the muted ink the tick labels use. The ticks are
   the data; this is only the label on them, and at body size and weight it
   was reading as the loudest thing on the chart. */
.art-axis-title {
  fill: var(--muted); font-size: 7px; font-weight: 700;
  font-family: inherit; letter-spacing: 0.07em;
}