/* Crowd Curve -- dark by default, matched to the XSPBW trader dashboard's
 * palette (2026-09-01, per the user: "sleek like the trader UI... I like the
 * black and white"). A light theme exists behind the topbar toggle
 * (2026-09-03); dark stays the default and EVERY color must go through the
 * tokens below -- a hardcoded hex is a light-mode bug waiting to happen.
 *
 * Palette lifted from Kalshi-XSPBW/webapp/static/style.css: near-black ground,
 * graphite panels, hairline borders, monochrome type. Color is RATIONED --
 * teal only for focus/active/the profit curve, green and red only where money
 * is up or down. Everything else earns contrast through weight and size.
 *
 * Still hand-written, still no build step. */

:root {
  --bg: #0f1216;          /* page ground -- same as the trader UI */
  --surface: #161b22;     /* panels */
  --sunken: #0d1014;      /* inputs sit slightly below the panel */
  --raised: #1b2129;      /* hover rows, active seg */
  --ink: #d8dee9;         /* body text */
  --bright: #e6edf3;      /* headings, big numbers */
  --muted: #9fb3c8;       /* labels */
  --faint: #7d8998;       /* de-emphasized */
  --line: #262c36;        /* panel borders */
  --line-strong: #30363d; /* input borders */
  --accent: #4fd1c5;      /* teal: focus, links, the curve. Nothing else. */
  --good: #3fb950;
  --good-soft: #103b21;
  --bad: #f85149;
  --bad-soft: #3d1418;
  --warn: #d29922;
  --warn-soft: #2d2308;
  --kink: #d29922;
  --ms: #a371f7;
  --zebra: #12161c;            /* odd table rows -- trader-UI zebra */
  --pill-bg: #21262d;
  --btn-primary-ink: #0f1216;  /* text on the --bright primary button */
  --btn-primary-hover: #ffffff;
  --radius: 8px;
  --radius-s: 6px;
  --tap: 42px;
}

/* Light theme -- opt-in via the topbar toggle, persisted in localStorage.
 * Same ration discipline: the accent darkens to stay readable on white. */
html[data-theme="light"] {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --sunken: #edf0f3;
  --raised: #e8ecf0;
  --ink: #2a3440;
  --bright: #10161d;
  --muted: #5c6b7a;
  --faint: #8595a5;
  --line: #dde3e9;
  --line-strong: #c4cdd6;
  --accent: #0d9488;
  --good: #1a7f37;
  --good-soft: #d7f5df;
  --bad: #cf222e;
  --bad-soft: #ffe2e0;
  --warn: #9a6700;
  --warn-soft: #fff3c9;
  --kink: #9a6700;
  --ms: #8250df;
  --zebra: #f0f3f6;
  --pill-bg: #e8ecf0;
  --btn-primary-ink: #ffffff;
  --btn-primary-hover: #000000;
}

* { box-sizing: border-box; }

html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

h1 { font-size: 1.25rem; margin: 0; color: var(--bright); letter-spacing: -.01em; }
h2 {
  font-size: .78rem; margin: 0; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
}
h3 {
  font-size: .72rem; margin: 0 0 .5rem; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
}
a { color: var(--accent); }

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

.topbar {
  display: flex; align-items: center; gap: .9rem;
  padding: .55rem 1rem;
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { height: 19px; width: auto; display: block; }
/* The wordmark's "CROWD" is white; on a light ground, flip lightness while
   keeping the CURVE gradient's hues (invert + hue-rotate round trip). */
html[data-theme="light"] .brand img { filter: invert(1) hue-rotate(180deg) saturate(1.35); }

.theme-toggle {
  width: 36px; height: 32px; min-height: 32px; padding: 0; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line-strong);
  border-radius: var(--radius-s); color: var(--muted); cursor: pointer;
}
.theme-toggle:hover { color: var(--bright); border-color: var(--faint); }
.theme-toggle .sun { display: none; }
html[data-theme="light"] .theme-toggle .sun { display: block; }
html[data-theme="light"] .theme-toggle .moon { display: none; }

.signin { font-size: .82rem; color: var(--muted); text-decoration: none; white-space: nowrap; }
.signin:hover { color: var(--accent); }

/* Small screens: the tabs scroll sideways instead of crushing the layout. */
@media (max-width: 720px) {
  .topbar { gap: .7rem; }
  .brand img { height: 15px; }
  .team-tag { display: none; }
  .mainnav { gap: .85rem; overflow-x: auto; scrollbar-width: none; }
  .mainnav::-webkit-scrollbar { display: none; }
}
.crumbs { flex: 1; font-size: .82rem; }
.crumbs a { text-decoration: none; color: var(--muted); }
.crumbs a:hover { color: var(--accent); }

/* Navigation -- same idiom as the trader UI header: quiet links, teal active. */
.mainnav { display: flex; gap: 1.1rem; }
.mainnav a {
  color: var(--muted); text-decoration: none; font-size: .82rem; font-weight: 550;
  padding: .2rem 0; border-bottom: 2px solid transparent;
}
.mainnav a:hover { color: var(--bright); }
.mainnav a.active { color: var(--accent); border-bottom-color: var(--accent); }
.team-tag {
  color: var(--faint); font-size: .78rem;
  border: 1px solid var(--line); border-radius: 999px; padding: .12rem .6rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px;
}
.spacer { flex: 1; }

main { padding: 1rem; max-width: 1280px; margin: 0 auto; }
main.builder { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem;
}
.head-fields { flex: 1; min-width: 0; }
.title-input {
  width: 100%; border: none; background: transparent; color: var(--bright);
  font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em;
  padding: .15rem 0; min-height: auto;
}
.title-input:focus { outline: none; border-bottom: 2px solid var(--accent); box-shadow: none; }
.title-input::placeholder { color: var(--faint); }
.head-sub { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .3rem; }
.head-sub input {
  width: auto; flex: 1 1 120px; max-width: 190px;
  font-size: .82rem; min-height: 32px; padding: .3rem .5rem;
}
.head-actions { display: flex; align-items: center; gap: .5rem; }

/* ---------------------------------------------------------------- columns */

.columns { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; }
@media (min-width: 980px) {
  .columns { grid-template-columns: minmax(380px, 5fr) minmax(420px, 6fr); }
  .col-stats { position: sticky; top: 60px; }
}

/* ---------------------------------------------------------------- panels */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  margin-bottom: 1rem;
}
.col-inputs .panel:last-child { margin-bottom: 0; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: .6rem;
}
.panel-total { font-variant-numeric: tabular-nums; color: var(--faint); font-size: .82rem; }
.panel-note { color: var(--faint); font-size: .75rem; margin: .45rem 0 0; }
.panel-foot {
  display: flex; gap: .5rem; align-items: center;
  margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--line);
}
.panel-foot select { flex: 1 1 40%; min-height: 32px; font-size: .78rem; }
.panel-foot input { flex: 1 1 30%; min-height: 32px; font-size: .78rem; }
.panel-foot button { min-height: 32px; font-size: .78rem; padding: .2rem .8rem; }
.panel-foot .tpl-del {
  flex: 0 0 auto; padding: .2rem .5rem; color: var(--faint);
  background: transparent; border-color: transparent; font-size: .85rem;
}
.panel-foot .tpl-del:hover { color: var(--bad); border-color: var(--line-strong); background: transparent; }

/* ---------------------------------------------------------------- inputs */

label { display: block; font-size: .75rem; color: var(--muted); font-weight: 500; }
input, select {
  width: 100%; min-height: var(--tap);
  padding: .45rem .55rem; margin-top: .15rem;
  font-size: 16px; /* < 16px makes iOS Safari zoom on focus */
  color: var(--ink);
  background: var(--sunken);
  border: 1px solid var(--line-strong); border-radius: var(--radius-s);
}
input:focus, select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 209, 197, .15);
}
input::placeholder { color: var(--faint); opacity: .8; }
input[type="number"] { font-variant-numeric: tabular-nums; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="date"] { color-scheme: dark; }
html[data-theme="light"] input[type="date"] { color-scheme: light; }

button {
  min-height: var(--tap); padding: .45rem 1rem;
  font-size: .85rem; font-family: inherit; font-weight: 600;
  border-radius: var(--radius-s); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); cursor: pointer;
}
button:hover { background: var(--raised); }
/* Primary action: near-white on near-black. The monochrome statement piece --
 * color stays reserved for money and focus. */
button.primary, .button.primary {
  background: var(--bright); border-color: var(--bright); color: var(--btn-primary-ink);
  text-decoration: none;
}
button.primary:hover { background: var(--btn-primary-hover); }
button.primary:active { filter: brightness(.85); }
button.ghost { background: transparent; color: var(--muted); }
button.ghost:hover { color: var(--accent); border-color: var(--accent); background: transparent; }
button.link {
  background: none; border: none; color: var(--muted);
  padding: 0; min-height: auto; font-weight: 500;
}
button.link:hover { color: var(--accent); background: none; }
.button { display: inline-flex; align-items: center; padding: .5rem 1rem; border-radius: var(--radius-s); }
form.inline { display: inline; }

/* ---------------------------------------------------------------- rows */

.rows { display: flex; flex-direction: column; gap: .3rem; }
.row { display: flex; align-items: center; gap: .4rem; }
.row .grow { flex: 1 1 auto; min-width: 0; }
.row .amt { flex: 0 0 92px; text-align: right; }
.row .qty { flex: 0 0 64px; text-align: right; }
.row .qty-wide { flex: 0 0 110px; }
.row .allin {
  flex: 0 0 58px; text-align: right;
  font-size: .75rem; color: var(--faint); font-variant-numeric: tabular-nums;
}
.row .x {
  flex: 0 0 30px; min-height: 30px; padding: 0;
  border: none; background: none; color: var(--faint);
  font-size: 1.05rem; line-height: 1; opacity: 0;
  transition: opacity .12s;
}
.row .x:hover { color: var(--bad); background: none; }
.row:hover .x, .row:focus-within .x { opacity: .9; }
@media (hover: none) { .row .x { opacity: .85; } }
.row-labels {
  font-size: .68rem; color: var(--faint); text-transform: uppercase;
  letter-spacing: .05em; margin-bottom: .1rem;
}
.row-labels span { display: block; }
.row-labels .grow { flex: 1 1 auto; }

.inline-pct { display: flex; align-items: center; gap: .4rem; font-size: .78rem; }
/* Adorned inputs: the box is the WRAPPER, the input inside is naked. The $ and
 * % live inside the field instead of floating next to it -- the formatting the
 * user asked for, done once here for every money and percent field. */
.money-wrap, .pct-wrap {
  display: flex; align-items: center;
  background: var(--sunken); border: 1px solid var(--line-strong);
  border-radius: var(--radius-s); margin-top: .15rem; min-height: var(--tap);
}
.money-wrap > span, .pct-wrap > span {
  color: var(--faint); font-size: .85rem; user-select: none;
}
.money-wrap > span { padding-left: .55rem; }
.pct-wrap > span { padding-right: .55rem; }
.money-wrap > input, .pct-wrap > input {
  border: none; background: transparent; margin: 0; min-height: auto;
  padding: .45rem .55rem; width: 100%;
}
.pct-wrap > input { text-align: right; padding-right: .2rem; }
.money-wrap > input { padding-left: .25rem; }
.money-wrap > input:focus, .pct-wrap > input:focus { outline: none; box-shadow: none; }
.money-wrap:focus-within, .pct-wrap:focus-within {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79, 209, 197, .15);
}
/* Compact variants inside rows and panel headers. */
.row .money-wrap, .row .pct-wrap { margin-top: 0; min-height: auto; }
.row .money-wrap > input { text-align: right; }
.pct-wrap.compact { margin-top: 0; min-height: 30px; width: 92px; }
.pct-wrap.compact > input { padding: .25rem .2rem .25rem .4rem; }
.hint { color: var(--faint); font-size: .75rem; font-weight: 400; }

/* ---------------------------------------------------------------- deal */

.seg {
  display: flex; gap: 4px; padding: 4px;
  background: var(--sunken); border: 1px solid var(--line);
  border-radius: var(--radius-s);
  margin-bottom: .8rem;
}
.seg-btn {
  flex: 1; min-height: 34px; padding: .3rem .4rem;
  font-size: .75rem; font-weight: 600;
  border: 1px solid transparent; border-radius: 5px;
  background: transparent; color: var(--faint);
}
.seg-btn:hover { color: var(--ink); background: transparent; }
form[data-deal="guarantee"]  .seg-btn[data-kind="guarantee"],
form[data-deal="nbor"]       .seg-btn[data-kind="nbor"],
form[data-deal="milestones"] .seg-btn[data-kind="milestones"] {
  background: var(--raised); color: var(--bright);
  border-color: var(--line-strong);
}
.deal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; }

/* Offer sheet panel: fixed two columns so the free-text deal points line up. */
.offer-grid { grid-template-columns: 1fr 1fr; }
.offer-grid .span-2, .deal-grid .span-2 { grid-column: 1 / -1; }
.signatory-box { margin-top: .8rem; border-top: 1px solid var(--line); padding-top: .6rem; }
.signatory-box summary { cursor: pointer; font-size: .78rem; color: var(--muted); font-weight: 600; }
.signatory-box .deal-grid { margin-top: .7rem; }
.sig-remedy { display: block; margin-top: .6rem; }
.sig-remedy textarea {
  width: 100%; margin-top: .15rem; padding: .45rem .55rem;
  font: inherit; font-size: .82rem; color: var(--ink);
  background: var(--sunken); border: 1px solid var(--line-strong);
  border-radius: var(--radius-s); resize: vertical;
}
.sig-remedy textarea:focus { outline: none; border-color: var(--accent); }

.only-nbor, .only-milestones { display: none; }
form[data-deal="nbor"] .only-nbor { display: block; }
form[data-deal="nbor"] p.only-nbor { display: block; }
form[data-deal="milestones"] .only-milestones { display: block; }

/* ---------------------------------------------------------------- stats */

.stat-cards {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem;
  margin-bottom: .9rem;
}
@media (min-width: 560px) { .stat-cards { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 980px) { .stat-cards { grid-template-columns: repeat(2, 1fr); } }
.stat-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .7rem .8rem;
  display: flex; flex-direction: column; gap: .1rem;
}
.stat-label {
  font-size: .66rem; color: var(--faint); font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em;
}
.stat-value {
  font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em;
  color: var(--bright); font-variant-numeric: tabular-nums;
}
.stat-sub { font-size: .72rem; color: var(--faint); }

.callout {
  border-radius: var(--radius); padding: .6rem .8rem;
  font-size: .8rem; margin-bottom: .9rem;
  border: 1px solid var(--line);
}
.callout.deal { background: var(--surface); color: var(--muted); }
.callout.warn {
  background: var(--warn-soft); color: var(--warn);
  border-color: rgba(210, 153, 34, .35); font-weight: 550;
}

.totals-row {
  display: flex; flex-wrap: wrap; gap: .4rem 1.1rem;
  color: var(--faint); font-size: .75rem; font-variant-numeric: tabular-nums;
  padding: 0 .2rem;
}

.empty-stats { text-align: center; color: var(--faint); padding: 2.2rem 1rem; }
.empty-stats .button { margin-top: .8rem; }

/* ---------------------------------------------------------------- chart */

.chart-panel { padding-bottom: .6rem; }
.profit-chart { width: 100%; height: auto; display: block; }
.profit-chart .curve { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.profit-chart .zero { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 4 4; }
.profit-chart .guide { stroke-width: 1; stroke-dasharray: 2 3; opacity: .5; }
.profit-chart .guide.be { stroke: var(--good); }
.profit-chart .guide.kink { stroke: var(--kink); }
.profit-chart .guide.ms { stroke: var(--ms); }
.profit-chart .dot.be { fill: var(--good); }
.profit-chart .dot.kink { fill: var(--kink); }
.profit-chart .dot.ms { fill: var(--ms); }
.profit-chart .axis { fill: var(--faint); font-size: 11px; }
.profit-chart .axis.end { text-anchor: end; }
.chart-legend {
  display: flex; flex-wrap: wrap; gap: .3rem 1rem;
  font-size: .72rem; color: var(--faint); margin-top: .4rem;
}
.dot-i {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: .35rem; vertical-align: baseline;
}
.dot-i.be { background: var(--good); }
.dot-i.kink { background: var(--kink); }
.dot-i.ms { background: var(--ms); }

/* ---------------------------------------------------------------- slide */

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.slide { width: 100%; border-collapse: collapse; font-size: .76rem; }
table.slide th, table.slide td {
  padding: .35rem .45rem; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums;
}
table.slide th:first-child, table.slide td:first-child { text-align: left; }
table.slide th { color: var(--faint); font-weight: 500; }
table.slide tbody tr:nth-child(odd) { background: var(--zebra); }  /* trader-UI zebra */
table.slide tbody tr:hover { background: var(--raised); }
table.slide tr.binds td { background: var(--warn-soft); }

/* ---------------------------------------------------------------- list */

/* Bookings table -- the trader-dashboard idiom: dense, zebra, tabular figures.
 * Whole row navigates via data-href (app.js); cursor says so. */
.table-panel { padding: .35rem .5rem; }
table.data { width: 100%; border-collapse: collapse; font-size: .82rem; }
table.data th, table.data td {
  padding: .5rem .6rem; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
table.data th {
  color: var(--faint); font-weight: 500; font-size: .7rem;
  text-transform: uppercase; letter-spacing: .05em;
}
table.data th.num, table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tbody tr:nth-child(odd) { background: var(--zebra); }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr[data-href] { cursor: pointer; }
table.data tbody tr:hover { background: var(--raised); }
table.data td a { color: var(--bright); font-weight: 600; text-decoration: none; }
table.data td a:hover { color: var(--accent); }

.pill {
  display: inline-block; padding: .08rem .55rem; border-radius: 3px;
  background: var(--pill-bg); font-size: .66rem; color: var(--faint);
  text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
}
/* Deal pipeline stages. Color earns its place: green = money confirmed,
   red = dead, amber = in motion, purple = public-facing milestones. */
.status-initiated { color: var(--faint); }
.status-sent { border-color: var(--accent); color: var(--accent); }
.status-negotiating { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.status-confirmed, .status-on_sale { background: var(--good-soft); color: var(--good); border-color: transparent; }
.status-rejected { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.status-tba { color: var(--muted); }
.status-announced { border-color: var(--ms); color: var(--ms); }

.stage-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.stage-chips .chip {
  min-height: 30px; padding: .2rem .7rem; font-size: .74rem; font-weight: 600;
  background: transparent; border: 1px solid var(--line-strong);
  border-radius: 999px; color: var(--muted);
}
.stage-chips .chip.on { border-color: var(--accent); color: var(--accent); background: transparent; }

.stage-select {
  width: auto; min-height: 34px; padding: .25rem .5rem;
  font-size: .78rem; font-weight: 600; margin-top: 0;
}
.stage-select.stage-error { border-color: var(--bad); }

.thumb {
  min-height: 32px; padding: .2rem .6rem; font-size: .82rem;
  border-radius: 999px;
}
.thumb.on { border-color: var(--accent); color: var(--accent); background: rgba(79, 209, 197, .08); }

/* ---------------------------------------------------------------- misc */

.discuss { margin-top: 1rem; }
.discuss summary { cursor: pointer; font-weight: 600; font-size: .85rem; color: var(--muted); }
.discuss summary:hover { color: var(--ink); }
.comments { list-style: none; padding: 0; margin: .6rem 0; }
.comments li { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.comments p { margin: .15rem 0 0; }
.comments strong { color: var(--bright); }
.comment-box { display: flex; gap: .5rem; margin-top: .6rem; }
.plain-list { list-style: none; padding: 0; margin: .5rem 0 0; }
.plain-list li { padding: .4rem 0; border-bottom: 1px solid var(--line); font-size: .85rem; }
.plain-list li:last-child { border-bottom: none; }

.card.narrow, .narrow {
  max-width: 420px; margin: 3rem auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.6rem;
}
.narrow h1 { margin-bottom: .3rem; }
.narrow .muted, .muted { color: var(--muted); }
.small { font-size: .78rem; }
.block { display: block; width: 100%; text-align: center; margin-top: .8rem; }
.list { list-style: none; padding: 0; margin: .5rem 0; }
.list li { padding: .45rem 0; border-bottom: 1px solid var(--line); }
.stack { display: flex; flex-direction: column; gap: .4rem; margin-top: 1.2rem; }

.good { color: var(--good); }
.bad { color: var(--bad); }
strong.good, .stat-value.good { color: var(--good); }
strong.bad, .stat-value.bad { color: var(--bad); }

.saving { opacity: .5; transition: opacity .15s; }
.flash-saved { animation: flash .9s ease-out; }
@keyframes flash { 0% { box-shadow: 0 0 0 3px var(--good); } 100% { box-shadow: none; } }

/* Bottom tab bar -- the phone's primary navigation. Desktop keeps the
   topbar tabs; below 720px those hide and this takes over. */
.bottomnav { display: none; }
@media (max-width: 720px) {
  .mainnav { display: none; }
  .bottomnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--surface); border-top: 1px solid var(--line);
    padding: .3rem 0 calc(.3rem + env(safe-area-inset-bottom));
  }
  .bottomnav a {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    gap: 2px; padding: .25rem 0; text-decoration: none;
    color: var(--faint); font-size: .62rem; font-weight: 600; letter-spacing: .02em;
  }
  .bottomnav a svg {
    width: 21px; height: 21px; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  .bottomnav a.active { color: var(--accent); }
}

/* Mobile quickbar: the two decision numbers, always visible. */
.quickbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; gap: 1.6rem; align-items: center;
  padding: .5rem 1.1rem calc(.5rem + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--line);
}
.qb-item { display: flex; flex-direction: column; line-height: 1.15; }
.qb-item span {
  font-size: .64rem; color: var(--faint);
  text-transform: uppercase; letter-spacing: .06em;
}
.qb-item strong { font-size: 1.05rem; color: var(--bright); font-variant-numeric: tabular-nums; }
.qb-item strong.good { color: var(--good); }
.qb-item strong.bad { color: var(--bad); }
@media (min-width: 980px) { .quickbar { display: none; } }

/* ---------------------------------------------------------------- shows */

.stat-cards.wide { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .stat-cards.wide { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .stat-cards.wide { grid-template-columns: repeat(6, 1fr); } }
.stat-sub em { font-style: normal; color: var(--faint); }

.sales-chart { width: 100%; height: auto; display: block; }
.sales-chart .actual { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round; }
.sales-chart .obs-dot { fill: var(--accent); }
.sales-chart .path { fill: none; stroke-width: 1.4; }
.sales-chart .path.so { stroke: var(--faint); }
.sales-chart .path.safe { stroke: var(--muted); stroke-dasharray: 5 4; }
.sales-chart .path.be { stroke: var(--good); stroke-dasharray: 5 4; }
.sales-chart .path.projection { stroke: var(--accent); stroke-dasharray: 2 4; opacity: .7; }
.sales-chart .today { stroke: var(--line-strong); stroke-width: 1; }
.sales-chart .cap-line { stroke: var(--line); stroke-width: 1; }
.sales-chart .axis { fill: var(--faint); font-size: 11px; }
.sales-chart .axis.end { text-anchor: end; }
.sales-chart .axis.ylab { text-anchor: end; font-variant-numeric: tabular-nums; }
.sales-chart .axis.xlab { text-anchor: middle; }
.sales-chart .tick { stroke: var(--line); stroke-width: 1; opacity: .55; }
.sales-chart .axis-line { stroke: var(--line-strong); stroke-width: 1; }

.line-i {
  display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--faint);
  margin-right: .35rem; vertical-align: middle;
}
.line-i.actual-i { border-color: var(--accent); }
.line-i.be-i { border-top-style: dashed; border-color: var(--good); }
.line-i.safe-i { border-top-style: dashed; border-color: var(--muted); }
.line-i.so-i { border-color: var(--faint); }
.line-i.proj-i { border-top-style: dotted; border-color: var(--accent); }

.obs-entry {
  display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap;
  margin-bottom: .6rem;
}
.obs-entry label { flex: 1 1 130px; max-width: 180px; }
.obs-entry button { flex: 0 0 auto; }

.paste-box { margin: .4rem 0 .8rem; }
.paste-box summary { cursor: pointer; font-size: .8rem; color: var(--muted); }
.paste-box textarea {
  width: 100%; margin: .5rem 0; padding: .5rem .6rem;
  font: 13px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  color: var(--ink); background: var(--sunken);
  border: 1px solid var(--line-strong); border-radius: var(--radius-s);
  resize: vertical;
}
.paste-box textarea:focus { outline: none; border-color: var(--accent); }

table.data.compact { font-size: .78rem; }
table.data.compact th, table.data.compact td { padding: .35rem .5rem; }
.x-obs {
  min-height: 26px; min-width: 26px; padding: 0;
  border: none; background: none; color: var(--faint); font-size: 1rem;
}
.x-obs:hover { color: var(--bad); background: none; }

/* Track-sales popover on the booking page */
details.promote { position: relative; }
details.promote > summary {
  list-style: none; cursor: pointer;
  min-height: var(--tap); display: inline-flex; align-items: center;
  padding: .45rem 1rem; font-size: .85rem; font-weight: 600;
  border: 1px solid var(--line-strong); border-radius: var(--radius-s);
  color: var(--ink); background: var(--surface);
}
details.promote > summary:hover { background: var(--raised); }
details.promote[open] > summary { border-color: var(--accent); }
.promote-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
  width: 240px; padding: .8rem;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  display: flex; flex-direction: column; gap: .5rem;
}
.ghost-link { color: var(--accent); border: 1px solid var(--line-strong); background: transparent; }

/* ---------------------------------------------------------------- about */

.about { max-width: 920px; margin: 0 auto; }

.eyebrow {
  display: block; font-size: .7rem; font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  text-transform: uppercase; letter-spacing: .3em;
  color: var(--accent); margin-bottom: .9rem;
}

.about-hero { position: relative; padding: 3rem 0 2.6rem; text-align: center; }
/* Engineering-paper dot grid behind the hero, faded at the edges. Painted on a
   pseudo-element so the text sits above it in paint order. */
.about-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(var(--line-strong) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 68% 85% at 50% 42%, #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse 68% 85% at 50% 42%, #000 15%, transparent 72%);
  opacity: .55;
}
.about-hero > * { position: relative; }
.about-hero .eyebrow { margin-bottom: 1.1rem; }
.about-hero h1 {
  font-size: clamp(2.2rem, 6vw, 3.4rem); font-weight: 800;
  letter-spacing: -.035em; line-height: 1.06; margin-bottom: 1.2rem;
}
/* Emphasis = one solid signal color with an annotation-style underline.
   Deliberately NOT a gradient: gradients read soft, a plotted line reads exact. */
.about-hero h1 em {
  font-style: normal; color: var(--accent);
  text-decoration: underline; text-decoration-thickness: 3px;
  text-underline-offset: .18em;
  text-decoration-color: rgba(79, 209, 197, .45);
}
.about-lede {
  font-size: clamp(.98rem, 2.4vw, 1.12rem); color: var(--muted);
  max-width: 620px; margin: 0 auto; line-height: 1.7;
}
.about-lede strong { color: var(--bright); font-weight: 600; }

.feature-grid {
  display: grid; grid-template-columns: 1fr; gap: .8rem; margin-bottom: 2.4rem;
}
@media (min-width: 700px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
.feature-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.3rem 1.2rem 1.2rem;
  transition: border-color .15s ease;
}
.feature-card:hover { border-color: var(--line-strong); }
.feature-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 1.6rem;
}
.feature-glyph { width: 30px; height: 30px; fill: var(--accent); stroke: var(--accent); }
.feature-num {
  font-size: .74rem; font-weight: 600; letter-spacing: .18em;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  color: var(--faint); font-variant-numeric: tabular-nums;
}
.feature-card h3 {
  font-size: 1.06rem; font-weight: 700; letter-spacing: -.015em;
  color: var(--bright); margin: 0 0 .45rem;
}
.feature-card p { font-size: .86rem; color: var(--muted); line-height: 1.6; margin: 0; }

.about-chart-panel { padding: 1.4rem 1.3rem 1rem; margin-bottom: 1rem; }
.chart-head { margin-bottom: 1.1rem; }
.chart-head .eyebrow { margin-bottom: .4rem; }
.chart-head h2 {
  font-size: clamp(1.2rem, 3.4vw, 1.55rem); font-weight: 800;
  letter-spacing: -.025em; color: var(--bright); margin: 0;
}
.about-chart { width: 100%; height: auto; display: block; }
.about-chart .curve-club { fill: none; stroke: var(--accent); stroke-width: 2.6; }
.about-chart .curve-head { fill: none; stroke: var(--ms); stroke-width: 2.6; }
.about-chart .naive { stroke: var(--faint); stroke-width: 1.2; stroke-dasharray: 6 5; }
.about-chart .gridline { stroke: var(--line); stroke-width: 1; }
.about-chart .axis { fill: var(--faint); font-size: 11px; }
.about-chart .axis.end { text-anchor: end; }
.about-legend { margin-top: .7rem; }
.about-caption { color: var(--faint); font-size: .8rem; margin-top: .55rem; line-height: 1.55; }

.heuristic-strip {
  text-align: center; padding: 2.4rem 1rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin: 1.6rem 0;
}
/* Dictionary-entry treatment: says "we built a precise instrument" without
   exposing any of the actual (proprietary) math. */
.dict-word {
  display: block;
  font: 700 clamp(1.3rem, 4.2vw, 1.9rem)/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
  color: var(--bright); letter-spacing: -.01em; margin-bottom: .15rem;
}
.dict-word em { font-style: italic; font-weight: 400; font-size: .55em; color: var(--faint); }
.dict-def {
  display: block; font-size: .92rem; font-style: italic;
  color: var(--muted); margin-bottom: 1rem;
}
.heuristic-copy {
  font-size: .86rem; color: var(--muted);
  max-width: 540px; margin: 0 auto; line-height: 1.7;
}
.heuristic-copy strong { color: var(--bright); }

.heuristic-steps {
  display: flex; align-items: center; justify-content: center;
  gap: 1.1rem; flex-wrap: wrap; margin-top: 1.7rem;
}
.hstep { display: flex; flex-direction: column; align-items: center; gap: .32rem; min-width: 150px; }
.hstep-glyph { width: 26px; height: 26px; fill: var(--accent); stroke: var(--accent); margin-bottom: .15rem; }
.hstep-name {
  font: 600 .72rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-transform: uppercase; letter-spacing: .22em; color: var(--bright);
}
.hstep-sub { font-size: .72rem; color: var(--faint); }
.hstep-arrow { color: var(--faint); font-size: 1.15rem; padding-bottom: 1.4rem; }
@media (max-width: 620px) { .hstep-arrow { display: none; } }

.principles {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
  padding-bottom: 2.2rem;
}
.principles .pill {
  font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  color: var(--muted); background: var(--sunken);
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: .38rem .85rem;
}


/* ------------------------------------------------------------ phone layout
   One breakpoint, real changes: nav moves to the bottom bar (above), the
   builder head stacks with uniform full-width fields, tier rows drop the
   derived all-in column, and dense tables shed their trailing columns. */
@media (max-width: 720px) {
  body { font-size: 15px; }
  main { padding: .75rem .75rem calc(70px + env(safe-area-inset-bottom)); }
  main.builder { padding-bottom: calc(70px + 58px + env(safe-area-inset-bottom)); }
  .quickbar { bottom: calc(53px + env(safe-area-inset-bottom)); padding-bottom: .5rem; }

  .page-head { flex-direction: column; }
  .head-actions { width: 100%; }
  .head-actions [data-action="save"] { flex: 1; }
  .head-sub { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .head-sub input { max-width: none; width: 100%; }
  .head-sub #f-venue { grid-column: 1 / -1; }

  .row .allin { display: none; }
  .row .amt { flex: 0 0 86px; }

  .panel-foot { flex-wrap: wrap; }
  .panel-foot select { flex: 1 1 100%; }
  .panel-foot input { flex: 1 1 auto; }

  .page-head h1 { font-size: 1.15rem; }
  table.data th:nth-child(n+7), table.data td:nth-child(n+7) { display: none; }
}


/* --------------------------------------------------------------- send offer */
.offer-actions { display: flex; align-items: center; gap: .5rem; }
.send-pop { width: min(340px, 86vw); right: 0; left: auto; }
.send-pop label { margin-top: .5rem; }
.send-pop .send-two { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.send-pop textarea {
  width: 100%; margin-top: .15rem; padding: .45rem .55rem;
  font: inherit; font-size: .82rem; color: var(--ink);
  background: var(--sunken); border: 1px solid var(--line-strong);
  border-radius: var(--radius-s); resize: vertical;
}
.send-pop textarea:focus { outline: none; border-color: var(--accent); }
.send-pop .primary { width: 100%; margin-top: .6rem; }


/* -------------------------------------------------------------- deals tab */
.inbox-search { display: flex; gap: .4rem; }
.inbox-search input { width: 220px; min-height: 32px; font-size: .8rem; margin-top: 0; }
.inbox-search button { min-height: 32px; font-size: .78rem; padding: .2rem .8rem; }
.track-btn { min-height: 28px; font-size: .74rem; padding: .15rem .7rem; }
.track-pick { display: inline-flex; gap: .3rem; align-items: center; }
.track-pick select { width: 200px; min-height: 30px; font-size: .76rem; margin-top: 0; }
.track-pick button { min-height: 30px; font-size: .74rem; padding: .15rem .6rem; }
.pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: .8rem; }

/* AI status chips reuse the pipeline palette */
.ai-offer_sent { border-color: var(--accent); color: var(--accent); }
.ai-negotiating { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.ai-confirmed { background: var(--good-soft); color: var(--good); border-color: transparent; }
.ai-rejected { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.ai-unclear { color: var(--faint); }

.ai-read .ai-summary { color: var(--ink); font-size: .95rem; line-height: 1.55; margin: .5rem 0 .2rem; }

.msg-list { display: flex; flex-direction: column; gap: .6rem; }
.msg { border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .8rem; background: var(--sunken); }
.msg.out { border-left: 3px solid var(--accent); }
.msg-head { display: flex; justify-content: space-between; gap: .8rem; margin-bottom: .3rem; }
.msg-body {
  margin: 0; font: .82rem/1.5 inherit; font-family: inherit;
  white-space: pre-wrap; word-break: break-word; color: var(--muted);
  max-height: 340px; overflow-y: auto;
}
@media (max-width: 720px) {
  .inbox-search input { width: 130px; }
  #deals-page table.data th:nth-child(n+7), #deals-page table.data td:nth-child(n+7) { display: revert; }
}