/* CoreIndex desk — deep emerald. Flat panels, hairline rules, dense rows, one accent. */
:root {
  --bg: #0f1517;
  --surface: #161d20;
  --surface-2: #1c2428;
  --line: #2b373c;
  --line-soft: #222c30;
  --text: #dfe8e9;
  --dim: #8fa2a6;
  --dimmer: #65797d;
  --accent: #2ecc8f;
  --amber: var(--accent);
  --amber-soft: rgba(46, 204, 143, 0.13);
  --gold: #d0a94f;
  --up: #2ecc8f;
  --down: #e0655a;
  --radius: 3px;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 13px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.up { color: var(--up); }
.down { color: var(--down); }
.dim { color: var(--dim); }
.cap { font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--dim); }

button, input, select, textarea { font: inherit; color: inherit; }
/* `.field { display: flex }` outranks the browser's own [hidden] rule, so the one-time-code
   box sat on the login card for every account — including the ones with no 2FA — and asked
   visitors for six digits they do not have. `hidden` now means hidden everywhere. */
[hidden] { display: none !important; }
a { color: inherit; }

/* ---------- frame ---------- */
.shell { display: grid; grid-template-columns: 188px 1fr; grid-template-rows: 44px 1fr 22px; height: 100vh; }
.topbar {
  grid-column: 1 / 3; display: flex; align-items: center; gap: 14px;
  border-bottom: 1px solid var(--line); background: var(--surface); padding: 0 14px;
}
.brand { display: flex; align-items: center; gap: 8px; }
.brand svg { width: 15px; height: 15px; stroke: var(--amber); }
.brand b { font-size: 12.5px; font-weight: 650; letter-spacing: 0.03em; }
.brand span {
  display: block; font-size: 10px; color: var(--dimmer); letter-spacing: 0.1em;
  text-transform: uppercase; margin-top: 1px;
}
.brand i { font-style: normal; font-size: 10px; color: var(--dimmer); letter-spacing: 0.1em; text-transform: uppercase; border-left: 1px solid var(--line); padding-left: 8px; }
.topbar .sep { width: 1px; height: 18px; background: var(--line); }
.topbar .right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.rail {
  border-right: 1px solid var(--line); background: var(--surface);
  padding: 10px 0; overflow-y: auto; display: flex; flex-direction: column;
}
.rail .grp { padding: 12px 14px 5px; font-size: 9.5px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--dimmer); }
.nav { display: flex; flex-direction: column; }
.nav button {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: none; border: 0; border-left: 2px solid transparent;
  padding: 7px 14px; color: var(--dim); font-size: 12.5px; cursor: pointer;
}
.nav button:hover { background: var(--surface-2); color: var(--text); }
.nav button.on { background: var(--amber-soft); border-left-color: var(--amber); color: var(--text); font-weight: 600; }
.nav button .n { margin-left: auto; font-size: 10.5px; color: var(--dimmer); font-family: var(--mono); }
.nav button.on .n { color: var(--amber); }
.rail .foot { margin-top: auto; padding: 12px 14px; font-size: 10.5px; color: var(--dimmer); line-height: 1.5; }

main { overflow-y: auto; padding: 14px 16px 22px; display: flex; flex-direction: column; gap: 12px; }
.footstrip {
  grid-column: 1 / 3; border-top: 1px solid var(--line); background: var(--surface);
  display: flex; align-items: center; gap: 16px; padding: 0 14px; font-size: 10.5px; color: var(--dim);
  font-family: var(--mono);
}
.footstrip b { color: var(--text); font-weight: 500; }

/* ---------- atoms ---------- */
.state { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--up); }
.dot.off { background: var(--down); }
.dot.idle { background: var(--dimmer); }

.pill {
  display: inline-block; padding: 1px 6px; border-radius: 2px; font-size: 10px;
  letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600;
  border: 1px solid var(--line); color: var(--dim); background: var(--surface-2);
}
.pill.ok { color: var(--up); border-color: rgba(28, 122, 79, 0.4); background: rgba(28, 122, 79, 0.08); }
.pill.warn { color: var(--amber); border-color: rgba(154, 111, 36, 0.4); background: var(--amber-soft); }
.pill.bad { color: var(--down); border-color: rgba(181, 56, 44, 0.4); background: rgba(181, 56, 44, 0.07); }

.btn {
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  border-radius: 2px; padding: 5px 11px; cursor: pointer; font-size: 12px;
}
.btn:hover { background: var(--surface-2); border-color: #3a474d; }
.btn:active { transform: translateY(1px); }
.btn.prim { background: var(--amber); border-color: var(--amber); color: #06180f; font-weight: 650; }
.btn.prim:hover { background: #3ad99c; border-color: #3ad99c; }
.btn.buy { color: var(--up); border-color: rgba(28, 122, 79, 0.45); background: rgba(28, 122, 79, 0.07); }
.btn.sell { color: var(--down); border-color: rgba(181, 56, 44, 0.45); background: rgba(181, 56, 44, 0.07); }
.btn.danger { color: var(--down); border-color: rgba(181, 56, 44, 0.45); }
.btn.xs { padding: 2px 7px; font-size: 11px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.ghost { background: none; border-color: transparent; color: var(--dim); }
.btn.ghost:hover { color: var(--text); background: var(--surface-2); }
/* the desk's own Back, sitting where the topbar's right-hand group begins */
.topbar .backbtn { margin-left: auto; color: var(--dim); }
.topbar .backbtn + .right { margin-left: 0; }

input, select {
  background: var(--surface); border: 1px solid var(--line); border-radius: 2px;
  padding: 5px 8px; outline: none; width: 100%; font-size: 12.5px;
}
input:focus, select:focus { border-color: var(--amber); }
input::placeholder { color: var(--dimmer); }
.field { display: flex; flex-direction: column; gap: 4px; }
.field > span { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1 1 150px; }

/* ---------- panels ---------- */
.panel { border: 1px solid var(--line); background: var(--surface); }
.panel > header {
  display: flex; align-items: center; gap: 10px; padding: 7px 11px;
  border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.panel > header h2 { font-size: 11.5px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dim); }
.panel > header .right { margin-left: auto; display: flex; gap: 7px; align-items: center; }
.panel .body { padding: 11px; }
.panel .flush { padding: 0; }

/* kpi strip */
.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); border: 1px solid var(--line); background: var(--surface); }
.kpi div { padding: 8px 12px; border-right: 1px solid var(--line-soft); }
.kpi div:last-child { border-right: 0; }
.kpi .k { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dimmer); }
.kpi .v { font-size: 17px; font-family: var(--mono); font-variant-numeric: tabular-nums; margin-top: 2px; }
.kpi .s { font-size: 10.5px; color: var(--dim); }

/* tables */
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th {
  text-align: left; font-size: 9.5px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--dimmer); font-weight: 600; padding: 6px 10px; border-bottom: 1px solid var(--line);
  background: var(--surface-2); position: sticky; top: 0;
}
td { padding: 5px 10px; border-bottom: 1px solid var(--line-soft); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
tbody tr.sel { background: var(--amber-soft); }
td.r, th.r { text-align: right; }
td.act { text-align: right; white-space: nowrap; }
tr.click { cursor: pointer; }
.empty { padding: 18px 12px; color: var(--dimmer); font-size: 12px; text-align: left; }
.scroll { max-height: 340px; overflow-y: auto; }

/* rates rail */
.rates { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.rate { border: 1px solid var(--line); background: var(--surface); padding: 8px 10px; cursor: pointer; }
.rate.on { border-color: var(--amber); background: var(--amber-soft); }
.rate .sym { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.05em; font-weight: 650; }
.rate .px { font-size: 18px; font-family: var(--mono); margin: 3px 0 1px; transition: color 420ms ease; }
.rate.flash-up .px { color: var(--up); }
.rate.flash-down .px { color: var(--down); }
.rate .chg { font-size: 10.5px; font-family: var(--mono); }

/* layout helpers */
.split { display: grid; grid-template-columns: 1fr 320px; gap: 12px; align-items: start; }
.split.wide { grid-template-columns: 1.5fr 1fr; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 12px; }
.kv dt { color: var(--dimmer); }
.kv dd { font-family: var(--mono); text-align: right; }

/* chart */
.chart-wrap { position: relative; }
canvas { display: block; width: 100%; }
.chart-head { display: flex; align-items: baseline; gap: 12px; padding: 9px 11px; border-bottom: 1px solid var(--line-soft); }
.chart-head .p { font-size: 22px; font-family: var(--mono); }
.chart-head .c { font-size: 12px; font-family: var(--mono); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.seg button { background: none; border: 0; color: var(--dim); padding: 3px 9px; font-size: 11px; cursor: pointer; }
.seg button.on { background: var(--amber-soft); color: var(--amber); font-weight: 600; }

/* drawer */
.drawer {
  position: fixed; top: 44px; right: 0; bottom: 22px; width: 520px; z-index: 30;
  border-left: 1px solid var(--line); background: var(--surface);
  transform: translateX(100%); transition: transform 160ms ease; display: flex; flex-direction: column;
}
.drawer.open { transform: none; }
.drawer > header { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.drawer > header h2 { font-size: 14px; font-weight: 650; }
.drawer .body { overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; }

/* login */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: var(--bg); }
.auth-box { width: 100%; max-width: 320px; }
.auth-box .brand { margin-bottom: 10px; }
.auth-card { border: 1px solid var(--line); background: var(--surface); padding: 18px; display: flex; flex-direction: column; gap: 11px; }
.auth-card h1 { font-size: 13px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dim); }
.auth-card .note { font-size: 12px; color: var(--dim); }
.err { border: 1px solid rgba(181, 56, 44, 0.45); background: rgba(181, 56, 44, 0.07); color: #96271c; padding: 6px 9px; font-size: 12px; }
.demo { margin-top: 12px; font-size: 10.5px; color: var(--dimmer); font-family: var(--mono); text-align: center; line-height: 1.7; }
.demo code { color: var(--dim); }

/* toast */
.toast {
  position: fixed; right: 14px; bottom: 32px; z-index: 40; max-width: 330px;
  border: 1px solid var(--line); border-left: 2px solid var(--amber); background: var(--surface);
  padding: 8px 12px; font-size: 12px;
  opacity: 0; transform: translateY(6px); transition: opacity 150ms ease, transform 150ms ease; pointer-events: none;
}
.toast.show { opacity: 1; transform: none; }
.toast.bad { border-left-color: var(--down); }

/* ---------- motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes flashUp { from { background: rgba(46, 204, 143, 0.28); } to { background: transparent; } }
@keyframes flashDown { from { background: rgba(224, 101, 90, 0.24); } to { background: transparent; } }
@keyframes ping { 0% { transform: scale(.55); opacity: .85; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: none; } }

main > section:not([hidden]) > * { animation: rise .3s cubic-bezier(.22,.7,.28,1) both; }
main > section:not([hidden]) > *:nth-child(2) { animation-delay: .05s; }
main > section:not([hidden]) > *:nth-child(3) { animation-delay: .1s; }
main > section:not([hidden]) > *:nth-child(4) { animation-delay: .15s; }
main > section:not([hidden]) > *:nth-child(5) { animation-delay: .2s; }

tbody tr { animation: fadeIn .22s ease both; }
td.f-up { animation: flashUp .75s ease-out; }
td.f-down { animation: flashDown .75s ease-out; }

.dot { position: relative; }
.dot::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 1px solid var(--up); animation: ping 1.9s cubic-bezier(.2,.6,.3,1) infinite;
}
.dot.off::after { border-color: var(--down); }

.drawer.open { animation: slideIn .17s cubic-bezier(.2,.8,.2,1); }
.seg button, .nav button { transition: background .15s ease, color .15s ease, border-color .15s ease; }
.pill, .rate, .btn { transition: background .16s ease, color .16s ease, border-color .16s ease, transform .1s ease; }
input:focus, select:focus { box-shadow: 0 0 0 3px var(--amber-soft); }
canvas { cursor: crosshair; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}

@media (max-width: 1180px) {
  .split, .split.wide, .cols2 { grid-template-columns: 1fr; }
  .drawer { width: 100%; }
}

/* two-factor prompt — the same flat panels and hairlines as the rest of the desk */
.otp-modal {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: rgba(6, 10, 11, .74); animation: fadeIn .16s ease-out;
}
.otp-card {
  width: 336px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; animation: rise .18s ease-out;
}
.otp-card .t { font-size: 12px; line-height: 1.45; color: var(--text); margin-bottom: 11px; }
.otp-card input {
  width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 2px; color: var(--text);
  font-family: var(--mono); font-size: 19px; letter-spacing: .3em; text-align: center; padding: 9px 4px 9px 12px;
}
.otp-card input:focus { outline: none; border-color: var(--accent); }
.otp-card .r { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }

/* ---------- borrowed view (the super desk sitting in someone's chair) ---------- */
.borrowed {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px; padding: 4px 12px; font-size: 11.5px;
  background: rgba(208, 169, 79, 0.13); border-bottom: 1px solid rgba(208, 169, 79, 0.45);
  border-top: 2px solid var(--gold); color: var(--text);
}
.borrowed b { color: var(--gold); font-weight: 600; }
.borrowed span { color: var(--dim); }
.borrowed span.num { font-size: 11px; }
.borrowed a {
  margin-left: auto; color: var(--text); text-decoration: none; font-size: 11px;
  border: 1px solid rgba(208, 169, 79, 0.45); padding: 2px 9px; border-radius: var(--radius);
}
.borrowed a:hover { background: rgba(208, 169, 79, 0.16); }
body.borrowed-on .shell { margin-top: var(--borrow-h, 26px); height: calc(100vh - var(--borrow-h, 26px)); }

/* ---------- market book on the order ticket ---------- */
.book { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border: 1px solid var(--line-soft);
  background: var(--surface-2); padding: 7px 9px; }
.book .bh { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--dimmer); margin-bottom: 3px; }
.book .bh.buy { color: var(--up); }
.book .bh.sell { color: var(--down); }
.book .brow { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11.5px; line-height: 1.6; }
.book .brow .lv { color: var(--dimmer); }
.book .brow .pr.buy { color: var(--up); }
.book .brow .pr.sell { color: var(--down); }
.book .none { color: var(--dimmer); font-size: 11px; }

/* ---------- indicator chips above the chart ---------- */
.inds { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 8px 5px; }
.inds .seg { overflow-x: auto; scrollbar-width: none; }
.inds .seg::-webkit-scrollbar { display: none; }
.inds .seg button { padding: 4px 9px; font-size: 11.5px; white-space: nowrap; }

/* ---------- two charts side by side ---------- */
.twoUp { display: grid; grid-template-columns: 1fr; gap: 12px; }
.twoUp.on { grid-template-columns: 1fr 1fr; }
.twoUp .tcol { min-width: 0; }
.twoUp canvas { width: 100%; display: block; }
.chart-head select.symPick {
  background: var(--bg); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius); font-size: 12px; padding: 2px 6px; max-width: 190px;
}
@media (max-width: 1180px) { .twoUp.on { grid-template-columns: 1fr; } }

/* ---------- the phone dock ----------
   Built by tabs() out of the desk's own rail, so all three desks get it from one place.
   Hidden above 860px: on a laptop the rail is the better instrument, and it is already there. */
.dock { display: none; }
.sheet {
  position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end;
  background: rgba(6, 10, 11, .72); animation: fadeIn .14s ease-out;
}
.sheetin {
  width: 100%; max-height: 78dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--surface); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  animation: riseSheet .22s cubic-bezier(.22, .7, .28, 1);
}
.sheetin header {
  position: sticky; top: 0; display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--dim);
}
.sheetin header b { font-weight: 650; }
.sheetin header .btn { margin-left: auto; }
.sheetgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-soft); }
.sheetgrid button {
  display: flex; align-items: center; gap: 7px; text-align: left; padding: 13px 12px; cursor: pointer;
  background: var(--surface); border: 0; color: var(--dim); font-size: 12.5px;
}
.sheetgrid button i { font-style: normal; overflow-wrap: anywhere; }
.sheetgrid button small { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--amber); }
.sheetgrid button.on { background: var(--amber-soft); color: var(--text); font-weight: 600; }
@keyframes riseSheet { from { transform: translateY(22px); } to { transform: none; } }

/* ---------- flick rows and the heat board ----------
   Both are the phone's instruments, but the markup is the desk's own table, so the styles stay
   in one place and a laptop simply never sees a row move. */
.swipeable { position: relative; }
.swipeable tbody tr { touch-action: pan-y; }
.swipeable tbody tr.dragging { position: relative; z-index: 2; background: var(--surface); transition: none; }
.flickhint {
  position: absolute; z-index: 1; display: flex; flex-direction: column; justify-content: center;
  gap: 2px; padding: 0 14px; opacity: 0; pointer-events: none; transition: opacity .1s;
  font-size: 11px; letter-spacing: .05em; overflow: hidden; white-space: nowrap;
}
/* a drag to the right uncovers the left edge, and the other way round */
.flickhint.right { left: 0; color: var(--up); background: rgba(46, 204, 143, .13); border-left: 2px solid var(--up); }
.flickhint.left { right: 0; align-items: flex-end; text-align: right; color: var(--gold); background: rgba(208, 169, 79, .12); border-right: 2px solid var(--gold); }
.flickhint b { font-weight: 650; text-transform: uppercase; font-size: 10.5px; }
.flickhint span { font-family: var(--mono); font-size: 9.5px; color: var(--dim); }

.tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  grid-auto-flow: row dense; gap: 1px; background: var(--line-soft); border-bottom: 1px solid var(--line);
}
.tile {
  display: flex; flex-direction: column; gap: 1px; min-height: 76px; padding: 8px 9px; cursor: pointer;
  background: var(--surface); border: 0; color: var(--text); text-align: left;
  transition: background .16s ease, transform .08s ease;
}
.tile:hover { background: var(--surface-2); }
.tile:active { transform: scale(.985); }
.tile b { font-size: 11.5px; font-weight: 650; letter-spacing: .03em; }
.tile i { font-style: normal; font-family: var(--mono); font-size: 8.5px; color: var(--dimmer); }
.tile .px { font-size: 14.5px; margin-top: auto; }
.tile em { font-style: normal; font-size: 10px; font-family: var(--mono); }
.tile.big { grid-column: span 2; }
.tile.big b { font-size: 14px; }
.tile.big .px { font-size: 21px; }
.tile.held { box-shadow: inset 0 0 0 1px var(--gold); }
.tiles .empty { grid-column: 1 / -1; background: var(--surface); padding: 16px 12px; }
.tile.held b::after {
  content: 'HELD'; margin-left: 6px; font-size: 8px; letter-spacing: .06em; color: var(--gold);
  border: 1px solid rgba(208, 169, 79, .5); border-radius: 2px; padding: 1px 3px; vertical-align: 2px;
}

/* ---------- a phone ----------
   The desk is a back-office screen, but a client watches it on a phone between trades, so
   below 860px the rail retires and a bottom dock takes over, the columns stack, wide tables
   scroll sideways instead of being cut off, and inputs go to 16px because iOS Safari zooms
   the whole page into an unreadable state when a smaller field takes focus. */
@media (max-width: 860px) {
  html { -webkit-text-size-adjust: 100%; }
  .shell { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; height: auto; min-height: 100dvh; }
  /* the desktop spans the topbar and the footer to column line 3; with one column that
     reference creates an implicit track and the rail's own column collapses to nothing */
  .topbar, .footstrip { grid-column: 1; }
  /* body.borrowed-on .shell sets a viewport height, and it outranks the rule above on
     specificity — a media query does not win by being later in the file */
  body.borrowed-on .shell { height: auto; min-height: calc(100dvh - var(--borrow-h, 26px)); }
  .borrowed { gap: 8px; padding: 3px 8px; font-size: 10.5px; }

  .topbar {
    position: sticky; top: 0; z-index: 5; flex-wrap: wrap; gap: 6px 10px;
    padding: 6px 10px; min-height: 42px;
  }
  .topbar .sep { display: none; }
  .brand i { display: none; }

  .rail { display: none; }

  /* five cells, four screens and More, all inside thumb reach. The rail stays in the document —
     the desk scripts still toggle its .on class and hold the live count nodes — it is simply not
     the thing a phone visitor is asked to read. */
  .dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: calc(56px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--surface); border-top: 1px solid var(--line);
  }
  .dock button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    background: none; border: 0; border-top: 2px solid transparent; cursor: pointer;
    color: var(--dimmer); font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase;
    padding: 0 4px; overflow: hidden;
  }
  .dock button i { font-style: normal; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dock button small { font-family: var(--mono); font-size: 10px; line-height: 1; color: var(--amber); min-height: 10px; }
  .dock button.on { color: var(--text); border-top-color: var(--amber); background: var(--amber-soft); }
  .dock button:active { background: var(--surface-2); }

  main { padding-bottom: calc(56px + 30px + env(safe-area-inset-bottom) + 14px); }
  /* the status strip is worth the one line it takes: it is the only place a phone visitor can
     see whether the feed is alive, so it sits above the dock instead of at the end of the page */
  .footstrip {
    position: fixed; left: 0; right: 0; z-index: 29; flex-wrap: nowrap;
    bottom: calc(56px + env(safe-area-inset-bottom));
    padding: 5px 10px; height: auto; gap: 14px; overflow-x: auto; scrollbar-width: none;
    border-top: 1px solid var(--line); font-size: 10px;
  }
  .footstrip::-webkit-scrollbar { display: none; }
  .drawer { bottom: calc(56px + env(safe-area-inset-bottom)); }
  .toast { right: 10px; left: 10px; max-width: none; bottom: calc(96px + env(safe-area-inset-bottom)); }

  main { overflow: visible; min-width: 0; padding-left: 10px; padding-right: 10px; gap: 10px; }
  /* a grid or flex track defaults to min-width:auto, so one wide table was enough to blow
     the whole column past the edge of the screen instead of scrolling inside its own panel */
  main > *, .split > *, .stack > *, .cols2 > * { min-width: 0; }
  .footstrip > * { flex: none; white-space: nowrap; }

  .cols2 { grid-template-columns: 1fr; }
  /* minmax(0,…) rather than 1fr: a plain 1fr cell refuses to shrink below its content's
     minimum width, so a label like "available for new orders" pushed the second column of
     the KPI strip off the edge of a phone screen */
  .kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi div { border-right: 0; border-bottom: 1px solid var(--line-soft); overflow-wrap: anywhere; }
  .kpi .v { font-size: 15px; }

  .panel > header { flex-wrap: wrap; gap: 6px 10px; }
  .panel > header .right { margin-left: 0; width: 100%; flex-wrap: wrap; }

  /* every table in a panel scrolls sideways on its own — including one wrapped by the flick
     helper or the board toggle, which is no longer a direct child of the panel */
  .panel table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th, td { white-space: nowrap; }
  .row > * { flex: 1 1 100%; }

  input, select, textarea { font-size: 16px; }
  .btn { padding: 8px 13px; }
  .btn.xs { padding: 6px 10px; font-size: 11.5px; }
  /* the watch board is fifteen columns wide. On a phone the spread, the previous close and
     the tick/lot bookkeeping are the ones a thumb can live without, and dropping them pulls
     the day's range back on screen instead of behind a sideways scroll */
  section[data-pane="watch"] :is(th, td):nth-child(6),
  section[data-pane="watch"] :is(th, td):nth-child(10),
  section[data-pane="watch"] :is(th, td):nth-child(13),
  section[data-pane="watch"] :is(th, td):nth-child(14) { display: none; }
  .seg { max-width: 100%; }
  .seg button { flex: none; padding: 7px 10px; }
  /* the overlay and pane pickers are wider than a phone: one row each, and each row scrolls */
  .inds { flex-direction: column; align-items: stretch; gap: 6px; }
  .inds .seg { display: flex; width: 100%; overflow-x: auto; }
  .chart-head { flex-wrap: wrap; gap: 4px 10px; }
  .chart-head .p { font-size: 19px; }
  #chart, #chart2 { height: 210px !important; }
  .twoUp .tcol + .tcol { border-top: 1px solid var(--line); padding-top: 10px; }
}