/* Deskbox — live trading.
   Deliberately not the paper platform's cyan. This screen spends real money and
   should not be mistaken for the one that does not. */
:root {
  --bg:#0A0F1A; --surface:#141B29; --surface-2:#1A2235; --surface-3:#232D42;
  --border:#1E2839; --border-2:#2C3852;
  --text:#FFFFFF; --text-2:#8BA3CB; --muted:#7184A2;
  --accent:#F5B841; --accent-ink:#1A1204;          /* amber: attention, not comfort */
  --accent-dim:rgba(245,184,65,.14);
  --up:#10B981; --down:#EF4444;
  --live:#EF4444; --live-dim:rgba(239,68,68,.13);
  --r-sm:9px; --r:12px; --r-lg:18px;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.22,.72,.28,1);
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body { background:var(--bg); color:var(--text); font-family:var(--sans);
  font-size:15px; line-height:1.5; -webkit-text-size-adjust:100%; }
.hide { display:none !important; }
.muted { color:var(--muted); }

.auth-wrap { min-height:100vh; display:grid; place-items:center; padding:20px; }
.auth { width:100%; max-width:400px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:750;
  font-size:1.15rem; letter-spacing:-.02em; }
.brand .mark { display:grid; place-items:center; width:32px; height:32px;
  border-radius:10px; background:var(--accent); color:var(--accent-ink);
  font-weight:800; }
.tag { font-size:.78rem; color:var(--muted); margin:6px 0 22px; }
.tag.live { color:var(--live); font-weight:650; letter-spacing:.02em; }
h1 { font-size:1.25rem; margin:0 0 6px; letter-spacing:-.02em; }
.hint { color:var(--muted); font-size:.82rem; margin:0 0 18px; }

.field { margin-bottom:14px; }
label { display:block; margin-bottom:5px; font-size:.75rem; font-weight:650;
  text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
input,select { width:100%; background:var(--surface); color:var(--text);
  border:1px solid var(--border-2); border-radius:var(--r-sm);
  padding:12px 13px; font:inherit; font-size:16px; }
input:focus,select:focus { outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-dim); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:0 18px; border:1px solid transparent;
  border-radius:var(--r-sm); background:var(--accent); color:var(--accent-ink);
  font:inherit; font-weight:700; cursor:pointer;
  transition:filter .15s var(--ease); }
.btn:hover { filter:brightness(1.06); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn.wide { width:100%; margin-top:6px; }
.btn.ghost { background:none; color:var(--text-2); border-color:var(--border-2); }

.alert { padding:12px 14px; border-radius:var(--r-sm); font-size:.86rem;
  margin-bottom:16px; border:1px solid transparent; }
.alert.err { background:rgba(239,68,68,.12); color:#FCA5A5;
  border-color:rgba(239,68,68,.3); }
.alert.ok { background:rgba(16,185,129,.12); color:#6EE7B7;
  border-color:rgba(16,185,129,.3); }
.alert.warn { background:var(--accent-dim); color:var(--accent);
  border-color:rgba(245,184,65,.3); }

.codes { display:grid; grid-template-columns:repeat(2,1fr); gap:8px;
  margin:14px 0; }
.codes code { background:var(--surface); border:1px solid var(--border-2);
  border-radius:var(--r-sm); padding:10px; text-align:center;
  font-family:var(--mono); font-size:.9rem; letter-spacing:.04em; }

/* ------------------------------------------------------------- terminal */
.bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 16px; background:var(--surface);
  border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10; }
.bar .spacer { flex:1; }
.pill { font-size:.72rem; font-weight:700; letter-spacing:.04em;
  padding:5px 10px; border-radius:999px; background:var(--surface-2);
  color:var(--muted); border:1px solid var(--border-2); white-space:nowrap; }
.pill.ok { color:var(--up); border-color:rgba(16,185,129,.3); }
.pill.warn { color:var(--accent); border-color:rgba(245,184,65,.3); }
.pill.safe { color:var(--up); border-color:rgba(16,185,129,.3); }
/* Armed is the one state that should be impossible to miss. */
.pill.armed, .live-pill { color:#fff; background:var(--live);
  border-color:var(--live); }
.btn.sm { min-height:34px; padding:0 12px; font-size:.78rem; }

.wrap { max-width:1100px; margin:0 auto; padding:18px 16px 60px; }
.tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  margin-bottom:16px; }
.tile { background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); padding:13px 14px; }
.tile .k { display:block; font-size:.63rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted); }
.tile .v { display:block; font-size:1.3rem; font-weight:700; margin-top:4px;
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  letter-spacing:-.02em; }
.tile .v.up { color:var(--up); } .tile .v.down { color:var(--down); }
.tile .s { display:block; font-size:.63rem; color:var(--muted); margin-top:3px; }

.card { background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); margin-bottom:16px; overflow:hidden; }
.card-head { display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:13px 15px; border-bottom:1px solid var(--border); }
.card-head h2 { margin:0; font-size:.92rem; display:flex; align-items:center;
  gap:9px; }
.card-head h2::before { content:""; width:3px; height:14px; border-radius:2px;
  background:var(--accent); }
.card-head .muted { font-size:.72rem; }

.row { display:flex; align-items:center; gap:12px; padding:12px 15px;
  border-bottom:1px solid var(--border); }
.row:last-child { border-bottom:0; }
.row .main { flex:1; min-width:0; }
.row .sym { font-size:.88rem; font-weight:620; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.row .meta { font-size:.73rem; color:var(--muted); margin-top:2px; }
.row .right { font-family:var(--mono); font-weight:680;
  font-variant-numeric:tabular-nums; flex:0 0 auto; }
.row .right.up { color:var(--up); } .row .right.down { color:var(--down); }
.tag { display:inline-block; padding:1px 6px; border-radius:5px;
  font-size:.62rem; font-weight:750; letter-spacing:.04em; }
.tag.buy { background:rgba(16,185,129,.15); color:var(--up); }
.tag.sell { background:rgba(239,68,68,.15); color:var(--down); }
.badge { font-size:.66rem; font-weight:700; padding:3px 8px; border-radius:6px;
  background:var(--surface-3); color:var(--text-2); }
.badge.bad { background:rgba(239,68,68,.15); color:var(--down); }
.warnmsg { color:var(--accent); }
.empty { padding:26px 16px; text-align:center; color:var(--muted);
  font-size:.85rem; }
@media (max-width:760px) { .tiles { grid-template-columns:repeat(2,1fr); } }

/* -------------------------------------------------- arming and the ticket */
/* Every one of these blocks is toggled with the hidden attribute, and several
   of them set display -- which would win. */
[hidden] { display:none !important; }

.armbox { padding:14px 15px; }
.armtext { margin:0 0 12px; font-size:.86rem; color:var(--text-2); }
.armrow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.armrow .in { width:auto; flex:0 0 130px; margin:0; }
.armrow .in.grow { flex:1 1 220px; }
.armrow .muted { font-size:.76rem; }
.btn.danger { background:var(--live); color:#fff; }
.btn.primary { background:var(--accent); color:var(--accent-ink); }
.err { color:var(--down); font-size:.8rem; margin:10px 0 0; }

.ticket { padding:14px 15px; }
.fld { margin-bottom:12px; position:relative; }
.fld label { display:block; font-size:.66rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  margin-bottom:5px; }
.ticket .in { margin:0; }
.hint { display:block; font-size:.7rem; color:var(--muted); margin:5px 0 0; }
.grid2 { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }

.results { position:absolute; z-index:20; left:0; right:0; top:100%;
  margin-top:4px; background:var(--surface-2); border:1px solid var(--border-2);
  border-radius:var(--r-sm); max-height:260px; overflow-y:auto; }
.res { display:flex; justify-content:space-between; align-items:center;
  gap:10px; width:100%; text-align:left; background:none; border:0;
  color:var(--text); padding:9px 12px; font-size:.82rem; cursor:pointer;
  border-bottom:1px solid var(--border); }
.res:last-child { border-bottom:0; }
.res:hover { background:var(--surface-3); }
.res .seg, .picked .seg { font-size:.64rem; color:var(--muted);
  font-family:var(--mono); }
.picked { display:flex; align-items:center; gap:9px; padding:9px 12px;
  background:var(--surface-2); border:1px solid var(--border-2);
  border-radius:var(--r-sm); font-size:.85rem; }
.picked .x { margin-left:auto; background:none; border:0; color:var(--accent);
  font-size:.74rem; cursor:pointer; }

.sidetoggle { display:flex; gap:0; }
.segbtn { flex:1; min-height:42px; background:var(--surface);
  border:1px solid var(--border-2); color:var(--text-2); font-weight:650;
  font-size:.85rem; cursor:pointer; }
.segbtn:first-child { border-radius:var(--r-sm) 0 0 var(--r-sm); }
.segbtn:last-child { border-radius:0 var(--r-sm) var(--r-sm) 0;
  border-left:0; }
.segbtn.buy.on { background:rgba(16,185,129,.16); color:var(--up);
  border-color:var(--up); }
.segbtn.sell.on { background:rgba(239,68,68,.16); color:var(--down);
  border-color:var(--down); }

/* The confirmation is the last thing between a tap and a real order, so it is
   given room rather than being squeezed into a toast. */
.confirm { margin-top:14px; padding:14px; border-radius:var(--r-sm);
  background:var(--live-dim); border:1px solid var(--live); }
.csentence { margin:0; font-size:1rem; font-weight:700; }
.cmeta { margin:6px 0 12px; font-size:.8rem; color:var(--text-2);
  font-family:var(--mono); }
.crow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.crow .muted { font-size:.75rem; font-variant-numeric:tabular-nums; }

.sent { margin-top:12px; padding:11px 13px; border-radius:var(--r-sm);
  font-size:.84rem; }
.sent.ok { background:rgba(16,185,129,.12); color:var(--up); }
.sent.bad { background:rgba(239,68,68,.12); color:var(--down); }

@media (max-width:560px) { .grid2 { grid-template-columns:1fr; } }

.check { display:flex; align-items:center; gap:9px; font-size:.86rem;
  color:var(--text-2); margin:0 0 14px; cursor:pointer; }
.check input { width:auto; margin:0; }

.alert.setup { display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px; flex-wrap:wrap; }
.todo { margin:8px 0 0; padding-left:18px; }
.todo li { margin:3px 0; }

.row .right .x { margin-left:10px; background:none; border:1px solid var(--border-2);
  color:var(--text-2); border-radius:6px; padding:2px 8px; font-size:.68rem;
  cursor:pointer; font-family:var(--sans); font-weight:600; }
.row .right .x:hover { color:var(--text); border-color:var(--accent); }
.row .right .x:disabled { opacity:.5; cursor:not-allowed; }

/* An order mirrored in from the Dhan app, rather than sent from here. Worth
   distinguishing: only the platform's own orders count against its ceiling. */
.elsewhere { color: var(--muted); }

/* =============================================================== app shell
   A fixed left rail instead of one long scrolling page. The rail is the only
   navigation; the top strip carries STATE (clock, feed, armed) and nothing
   clickable except the mobile menu, so the two never compete. */
.app { display:grid; grid-template-columns:236px 1fr; min-height:100vh; }

.side { grid-column:1; display:flex; flex-direction:column;
  background:var(--surface); border-right:1px solid var(--border);
  position:sticky; top:0; height:100vh; }
.side-top { padding:16px 16px 12px; border-bottom:1px solid var(--border); }
.side-sub { font-size:.68rem; margin-top:6px; letter-spacing:.05em;
  text-transform:uppercase; font-weight:700; color:var(--muted); }
.side-sub.live { color:var(--live); }

.nav { flex:1; overflow-y:auto; padding:12px 10px; }
.nav-label { font-size:.6rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); padding:12px 8px 6px; }
.nav-label:first-child { padding-top:2px; }
.nav-item { display:flex; align-items:center; gap:11px; padding:10px 10px;
  border-radius:var(--r-sm); color:var(--text-2); text-decoration:none;
  font-size:.88rem; font-weight:600; border:1px solid transparent;
  transition:background .13s var(--ease), color .13s var(--ease); }
.nav-item:hover { background:var(--surface-2); color:var(--text); }
.nav-item .ic { display:grid; place-items:center; width:20px; flex:0 0 20px;
  font-size:.95rem; color:var(--muted); }
/* The current page is marked by a filled block and an accent spine, not colour
   alone -- the palette already spends colour on buy/sell and armed. */
.nav-item.on { background:var(--surface-3); color:var(--text);
  border-color:var(--border-2); position:relative; }
.nav-item.on::before { content:""; position:absolute; left:-10px; top:9px;
  bottom:9px; width:3px; border-radius:0 3px 3px 0; background:var(--accent); }
.nav-item.on .ic { color:var(--accent); }
.nav-item .count { margin-left:auto; font-family:var(--mono); font-size:.7rem;
  font-weight:700; color:var(--muted); background:var(--surface-2);
  border:1px solid var(--border-2); border-radius:999px; padding:1px 7px; }

.side-foot { padding:12px 14px; border-top:1px solid var(--border);
  font-size:.72rem; }
.side-foot .who { color:var(--muted); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.side-state { display:flex; align-items:center; gap:7px; margin-top:7px;
  font-weight:700; letter-spacing:.03em; color:var(--up); }
.side-state .dot { width:7px; height:7px; border-radius:50%;
  background:var(--up); flex:0 0 7px; }
.side-state.is-armed { color:var(--live); }
.side-state.is-armed .dot { background:var(--live); }

.content { grid-column:2; min-width:0; display:flex; flex-direction:column; }
.topbar { display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:11px 20px; background:var(--surface); position:sticky; top:0;
  z-index:10; border-bottom:1px solid var(--border); }
.topbar h1 { font-size:.98rem; margin:0; letter-spacing:-.01em; }
.topbar .spacer { flex:1; }
.burger { display:none; background:var(--surface-2); color:var(--text);
  border:1px solid var(--border-2); border-radius:var(--r-sm);
  width:36px; height:36px; font-size:1rem; cursor:pointer; }

.page { max-width:1120px; width:100%; margin:0 auto; padding:18px 24px 64px; }
/* Views are swapped with a class, not [hidden] -- the ticket, the confirm box
   and the arm rows already own the hidden attribute inside these sections. */
.view { display:none; }
.view.on { display:block; }

.side-scrim { display:none; }

@media (max-width:900px) {
  .app { grid-template-columns:1fr; }
  .side { position:fixed; left:0; top:0; z-index:40; width:250px;
    transform:translateX(-100%); transition:transform .2s var(--ease); }
  .side.open { transform:none; box-shadow:0 0 40px rgba(0,0,0,.5); }
  .content { grid-column:1; }
  .burger { display:grid; place-items:center; }
  .side-scrim:not([hidden]) { display:block; position:fixed; inset:0;
    z-index:30; background:rgba(4,7,13,.6); }
  .page { padding:16px 14px 60px; }
  .topbar { padding:10px 14px; }
}
@media (prefers-reduced-motion:reduce) { .side { transition:none; } }

/* Settings reads as a document, not a dashboard: one column, section rules. */
.settings-page { max-width:620px; }
.settings-page .sec { font-size:1.02rem; margin:30px 0 6px; letter-spacing:-.01em;
  display:flex; align-items:center; gap:9px; }
.settings-page .sec:first-of-type { margin-top:4px; }
.settings-page .sec::before { content:""; width:3px; height:15px;
  border-radius:2px; background:var(--accent); }

/* ------------------------------------------------------------- dashboard */
/* A 6-column bed. Cards claim 2, 3 or 4 of it, so a 2/3 + 1/3 row and a
   half-and-half row live in the SAME grid and their edges line up -- which two
   separate grids could never guarantee. */
.dash-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px;
  align-items:stretch; }
.dash-grid .card { margin-bottom:0; grid-column:span 6;
  display:flex; flex-direction:column; }
.dash-grid .sp2 { grid-column:span 2; }
.dash-grid .sp3 { grid-column:span 3; }
.dash-grid .sp4 { grid-column:span 4; }
.dash-grid .span2, .dash-grid .span2of3 { grid-column:span 6; }
/* Cards in one row are the same height, so the body must take the slack --
   otherwise the panel floats and the card bottoms disagree. */
.dash-grid .card > .panel, .dash-grid .card > div:last-child { flex:1; }
/* Every heading in a row sits on one line, whatever is beside it. */
.card-head { min-height:50px; }
.panel { padding:14px 15px; }
.panel .big { font-family:var(--mono); font-size:1.6rem; font-weight:700;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin-bottom:10px; }
.panel .big.up { color:var(--up); } .panel .big.down { color:var(--down); }

.kv { display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; padding:7px 0; border-bottom:1px solid var(--border);
  font-size:.83rem; }
.kv:last-child { border-bottom:0; padding-bottom:0; }
.kv span { color:var(--muted); }
.kv b { font-family:var(--mono); font-weight:680;
  font-variant-numeric:tabular-nums; text-align:right; }
.kv b.up { color:var(--up); } .kv b.down { color:var(--down); }
.kv b.ok-txt { color:var(--up); }
.kv b.warn-txt { color:var(--accent); }
.kv b.live-txt { color:var(--live); }

/* Deployed capital. Amber, not green or red: a high number is neither good
   nor bad on its own, it is just how much is committed. */
.meter { height:8px; border-radius:99px; background:var(--surface-3);
  overflow:hidden; margin-bottom:8px; }
.meter span { display:block; height:100%; background:var(--accent);
  border-radius:99px; transition:width .3s var(--ease); }
.meter-note { font-size:.8rem; color:var(--muted); margin-bottom:6px; }
.meter-note b { color:var(--text); font-family:var(--mono); }
@media (prefers-reduced-motion:reduce) { .meter span { transition:none; } }

.card-head .jump { text-decoration:none; font-size:.74rem; }
.card-head .jump:hover { color:var(--accent); }

@media (max-width:1000px) {
  .dash-grid .sp2, .dash-grid .sp3, .dash-grid .sp4 { grid-column:span 3; }
}
@media (max-width:700px) {
  .dash-grid .sp2, .dash-grid .sp3, .dash-grid .sp4 { grid-column:span 6; }
}

/* Sign out sits at the foot of the rail, away from the pages -- it is not a
   destination and should not read like one. */
.side-foot .signout { padding:8px 6px; margin:0 0 10px; font-size:.83rem; }
.side-foot .signout:hover { color:var(--down); background:rgba(239,68,68,.1); }

/* ------------------------------------------------------- journal dashboard */
.toolbar { display:flex; align-items:center; gap:10px; margin-bottom:16px;
  flex-wrap:wrap; }
.toolbar .spacer { flex:1; }
.in.slim { width:auto; min-width:150px; padding:8px 11px; font-size:.83rem; }
.head-tools { display:flex; gap:8px; }

.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  margin-bottom:16px; }
.kpi { background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); padding:14px 15px;
  display:flex; flex-direction:column; }
.kpi-head { display:flex; align-items:flex-start; justify-content:space-between;
  gap:10px; }
.kpi .k { font-size:.63rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted); min-height:2.1em;
  display:block; padding-right:6px; }
.kpi .v { font-size:1.55rem; font-weight:750; margin:6px 0 4px;
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  letter-spacing:-.03em; }
.kpi .v.up { color:var(--up); } .kpi .v.down { color:var(--down); }
.kpi-ic { display:grid; place-items:center; width:30px; height:30px; flex:0 0 30px;
  border-radius:9px; font-size:.85rem; }
.kpi-ic.green { background:rgba(16,185,129,.14); color:var(--up); }
.kpi-ic.blue { background:rgba(91,140,255,.14); color:#7FA6FF; }
.kpi-ic.violet { background:rgba(167,139,250,.14); color:#A78BFA; }
.kpi-ic.amber { background:var(--accent-dim); color:var(--accent); }
.kpi-delta { font-size:.7rem; color:var(--muted); margin:0 0 9px;
  margin-top:auto; }
.kpi-delta b { font-family:var(--mono); font-weight:700; }
.kpi-delta b.up { color:var(--up); } .kpi-delta b.down { color:var(--down); }
.kpi-delta b.flat { color:var(--muted); }
.meter.thin { height:5px; margin:0; }
.meter span.pos { background:var(--up); } .meter span.neg { background:var(--down); }
.meter span.up { background:var(--up); } .meter span.down { background:var(--down); }
.meter span.flat { background:var(--muted); }

/* Confidence is a self-rating, so it gets the one place on this screen where a
   red-to-green ramp is honest: low really is worse than high. */
.confbar { display:flex; align-items:center; gap:11px; }
.confbar .lo { color:var(--down); font-size:.7rem; font-weight:700; }
.confbar .hi { color:var(--up); font-size:.7rem; font-weight:700; }
.conftrack { position:relative; flex:1; height:8px; border-radius:99px;
  background:linear-gradient(90deg,#EF4444,#F5B841,#10B981); }
.conftrack i { position:absolute; top:50%; width:14px; height:14px;
  margin:-7px 0 0 -7px; border-radius:50%; background:var(--text);
  border:2px solid var(--surface); box-shadow:0 0 0 1px var(--border-2); }
.mid { text-align:center; margin:12px 0 0; font-size:.82rem; }

.dash-grid .span2of3 { grid-column:1 / -1; }
.chart { width:100%; height:200px; display:block; }
.chart-foot { display:flex; justify-content:space-between; align-items:center;
  gap:10px; margin-top:8px; font-size:.7rem; color:var(--muted);
  font-family:var(--mono); }
.chart-foot .up { color:var(--up); } .chart-foot .down { color:var(--down); }

.bars { display:flex; align-items:flex-end; gap:3px; height:150px; }
.bar-slot { flex:1; height:100%; display:flex; align-items:flex-end;
  min-width:3px; }
.bar { width:100%; border-radius:3px 3px 0 0; }
.bar.pos { background:var(--up); } .bar.neg { background:var(--down); }

.split { margin-bottom:12px; }
.seg-row { display:grid; grid-template-columns:78px 1fr 84px; align-items:center;
  gap:10px; font-size:.78rem; margin-bottom:8px; }
.seg-row span { color:var(--muted); }
.seg-row b { font-family:var(--mono); font-size:.76rem; text-align:right; }

.hbar { margin-bottom:13px; }
.hbar:last-child { margin-bottom:0; }
.hbar-top { display:flex; justify-content:space-between; gap:10px;
  font-size:.81rem; margin-bottom:5px; }
.hbar-top b { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.hbar-top b.up { color:var(--up); } .hbar-top b.down { color:var(--down); }
.hbar-sub { font-size:.68rem; color:var(--muted); margin-top:4px; }

/* --------------------------------------------------------- trade history */
.tablewrap { overflow-x:auto; }
.tbl { width:100%; border-collapse:collapse; font-size:.81rem; }
.tbl th { text-align:left; font-size:.62rem; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted); padding:10px 14px;
  border-bottom:1px solid var(--border); white-space:nowrap; }
.tbl td { padding:11px 14px; border-bottom:1px solid var(--border);
  white-space:nowrap; }
.tbl tr:last-child td { border-bottom:0; }
.tbl td.sym { font-weight:650; }
.tbl td.mono, .tbl .mono { font-family:var(--mono); color:var(--text-2);
  font-variant-numeric:tabular-nums; }
/* Figures line up under their own headings -- both move, not just the cells. */
.tbl th.num, .tbl td.num { text-align:right;
  font-variant-numeric:tabular-nums; }
.tbl td.num { font-family:var(--mono); font-weight:680; }
.tbl td.num.up { color:var(--up); } .tbl td.num.down { color:var(--down); }
.tbl tbody tr:hover { background:var(--surface-2); }
.tbl .x { background:none; border:1px solid var(--border-2); color:var(--text-2);
  border-radius:6px; padding:3px 9px; font-size:.68rem; cursor:pointer;
  font-family:var(--sans); font-weight:600; }
.tbl .x:hover { color:var(--down); border-color:var(--down); }
.tfoot { display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:11px 15px; border-top:1px solid var(--border);
  font-size:.76rem; }
.pager { display:flex; gap:8px; }

/* ------------------------------------------------------------------ modal */
.modal { position:fixed; inset:0; z-index:60; background:rgba(4,7,13,.7);
  display:flex; align-items:flex-start; justify-content:center;
  padding:24px 16px; overflow-y:auto; }
.modal-card { width:100%; max-width:620px; background:var(--surface);
  border:1px solid var(--border-2); border-radius:var(--r-lg);
  box-shadow:0 24px 60px rgba(0,0,0,.5); }
.modal-head { display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:15px 18px; border-bottom:1px solid var(--border); }
.modal-head h2 { margin:0; font-size:1rem; }
.modal-head .close { background:none; border:0; color:var(--muted);
  font-size:1rem; cursor:pointer; padding:4px 6px; }
.modal-head .close:hover { color:var(--text); }
.modal-body { padding:16px 18px; }
.modal-foot { display:flex; justify-content:flex-end; gap:10px;
  padding:14px 18px; border-top:1px solid var(--border); }

.chips { display:flex; flex-wrap:wrap; gap:7px; }
.chip { background:var(--surface-2); border:1px solid var(--border-2);
  color:var(--text-2); border-radius:99px; padding:6px 12px; font:inherit;
  font-size:.76rem; font-weight:600; cursor:pointer; }
.chip:hover { border-color:var(--muted); }
.chip.on { background:rgba(239,68,68,.14); border-color:var(--down);
  color:#FCA5A5; }

.seg { display:flex; }
.seg .segbtn { min-height:30px; padding:0 13px; font-size:.75rem; flex:0 0 auto; }
.seg .segbtn:first-child { border-radius:var(--r-sm) 0 0 var(--r-sm); }
.seg .segbtn:last-child { border-radius:0 var(--r-sm) var(--r-sm) 0;
  border-left:0; }
.seg .segbtn.on { background:var(--accent-dim); color:var(--accent);
  border-color:var(--accent); }

@media (max-width:900px) { .kpis { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .kpis { grid-template-columns:1fr; }
  .seg-row { grid-template-columns:66px 1fr 70px; } }

/* --------------------------------------------------------------- the rules */
.rule { padding:14px 0; border-bottom:1px solid var(--border); }
.rule:first-of-type { padding-top:0; }
.rule .check { margin:0 0 10px; }
.rule-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rule-row .in.slim { width:120px; min-width:0; }
.rule-row .unit { font-size:.76rem; color:var(--muted); }
.rule .hint { margin-top:9px; }

.preview-box { margin-top:16px; padding:13px 14px; border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid var(--border-2); }
.in.tiny { width:92px; min-width:0; padding:5px 9px; font-size:.8rem;
  text-align:right; }
.preview-box .kv b { display:flex; justify-content:flex-end; align-items:center; }

.rule-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px 16px; }
.rule-grid .fld { margin-bottom:0; }
.statline { font-family:var(--mono); font-weight:700; font-size:1rem;
  padding:11px 0 0; }
.statline.warn { color:var(--accent); } .statline.down { color:var(--down); }
.rule-actions { display:flex; align-items:center; gap:12px; margin-top:18px; }
.rule-actions .muted { font-size:.78rem; color:var(--up); }
@media (max-width:620px) { .rule-grid { grid-template-columns:1fr; } }

/* ===========================================================================
   MODERN PASS — 2026-09-09, after looking at the real pages in a browser.
   Three of these are bug fixes, not taste: the label rule was shouting inside
   checkboxes, card headings in one row sat at three different heights, and the
   surfaces had no elevation so nothing read as foreground.
   ======================================================================== */

/* Depth. One light source, top-left, expressed as a hairline highlight on the
   card and a soft shadow under it -- not a border colour change, which reads
   as a state on this screen (armed, up, down all use border colour). */
:root {
  --r-sm:10px; --r:14px; --r-lg:20px;
  --shadow:0 1px 2px rgba(0,0,0,.32), 0 6px 20px -8px rgba(0,0,0,.5);
  --shadow-lg:0 2px 4px rgba(0,0,0,.3), 0 18px 42px -14px rgba(0,0,0,.62);
  --edge:inset 0 1px 0 rgba(255,255,255,.045);
  --surface-grad:linear-gradient(180deg,#161E2E 0%,#131A28 100%);
}

body { font-size:15px; letter-spacing:-.005em; }

.card, .kpi, .tile, .modal-card, .preview-box {
  background:var(--surface-grad);
  box-shadow:var(--shadow), var(--edge);
}
.card, .kpi, .tile { transition:transform .16s var(--ease),
  box-shadow .16s var(--ease), border-color .16s var(--ease); }
.dash-grid .card:hover, .kpi:hover, .tiles .tile:hover {
  transform:translateY(-2px); box-shadow:var(--shadow-lg), var(--edge);
  border-color:var(--border-2); }
@media (prefers-reduced-motion:reduce) {
  .card, .kpi, .tile { transition:none; }
  .dash-grid .card:hover, .kpi:hover, .tiles .tile:hover { transform:none; }
}

/* FIX: `label { text-transform:uppercase }` is right for a field caption and
   wrong for a sentence beside a checkbox -- "Automatic target" was rendering
   as AUTOMATIC TARGET. Scope the shouting to captions only. */
.check, .check span, .check b { text-transform:none; letter-spacing:normal;
  font-size:.9rem; font-weight:600; color:var(--text); }
.check b { color:var(--accent); font-weight:750; }
.check input[type=checkbox] { appearance:none; width:19px; height:19px;
  flex:0 0 19px; border:1.5px solid var(--border-2); border-radius:6px;
  background:var(--surface-2); cursor:pointer; display:grid; place-items:center;
  transition:background .13s var(--ease), border-color .13s var(--ease); }
.check input[type=checkbox]:checked { background:var(--accent);
  border-color:var(--accent); }
.check input[type=checkbox]:checked::after { content:"✓"; color:var(--accent-ink);
  font-size:.72rem; font-weight:900; line-height:1; }
.check input[type=checkbox]:focus-visible { outline:none;
  box-shadow:0 0 0 3px var(--accent-dim); }

/* FIX: heads in one row measured 50, 57 and 64px, so sibling titles sat at
   three different heights. One height, contents centred in it. */
.card-head { min-height:56px; padding:0 16px; align-items:center; }
.card-head h2 { font-size:.95rem; font-weight:700; letter-spacing:-.01em; }
.card-head h2::before { height:15px; width:3px;
  background:linear-gradient(180deg,var(--accent),rgba(245,184,65,.35)); }
.card-head .seg .segbtn { min-height:28px; padding:0 11px; font-size:.72rem; }

/* Empty states carry the page when there is no data yet, which on a new
   journal is most of the time. A dashed well reads as "room for something",
   where a bare grey line read as "broken". */
.empty { padding:30px 20px; text-align:center; color:var(--muted);
  font-size:.85rem; line-height:1.55; }
.panel > .empty:only-child, .card > div > .empty:only-child,
#j-top > .empty, #d-top > .empty, #d-recent > .empty {
  margin:14px; padding:26px 18px; border:1px dashed var(--border-2);
  border-radius:var(--r); background:rgba(255,255,255,.012); }
.empty::before { content:"◇"; display:block; font-size:1.5rem; opacity:.35;
  margin-bottom:9px; color:var(--accent); }
.tbl .empty::before { display:none; }
.tbl .empty { border:0; margin:0; background:none; }

/* Views arrive rather than snapping in. 140ms is under the threshold where a
   transition starts to feel like waiting. */
.view.on { animation:rise .14s var(--ease) both; }
@keyframes rise { from { opacity:0; transform:translateY(5px); } }
@media (prefers-reduced-motion:reduce) {
  .view.on { animation:none; } }

/* Top strip floats over the content it scrolls under. */
.topbar { background:rgba(20,27,41,.82); backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px solid var(--border); padding:0 22px; min-height:54px; }
.topbar h1 { font-size:1.02rem; font-weight:700; }
.pill { font-size:.7rem; padding:5px 11px; }

/* Rail: the active item gets a filled gradient pill, so it reads as selected
   at a glance and not only by its accent spine. */
.side { background:linear-gradient(180deg,#151D2C 0%,#111825 100%); }
.side-top { padding:18px 16px 14px; }
.brand .mark { border-radius:11px;
  background:linear-gradient(145deg,#FFD277,var(--accent));
  box-shadow:0 2px 10px rgba(245,184,65,.28); }
.nav-item { padding:10px 11px; margin-bottom:2px; }
.nav-item.on { background:linear-gradient(90deg,rgba(245,184,65,.16),
  rgba(245,184,65,.05)); border-color:rgba(245,184,65,.22); }
.nav-item.on::before { left:-11px; }

/* KPI figures are the first thing read on the page; give them the size. */
.kpi { padding:16px 17px; }
.kpi .v { font-size:1.72rem; letter-spacing:-.035em; }
.kpi-ic { border-radius:10px; }
.meter { background:rgba(255,255,255,.055); }
.meter span { box-shadow:0 0 10px -2px currentColor; }

/* Inputs: a visible resting border, an accent ring on focus. */
input,select { background:var(--surface-2); border-radius:var(--r-sm);
  transition:border-color .13s var(--ease), box-shadow .13s var(--ease); }
input::placeholder { color:#63758F; }
.btn { border-radius:var(--r-sm); font-weight:700; letter-spacing:-.01em; }
.btn.primary { background:linear-gradient(145deg,#FFD277,var(--accent));
  box-shadow:0 2px 12px -2px rgba(245,184,65,.4); }
.btn.danger { background:linear-gradient(145deg,#F26565,var(--live));
  box-shadow:0 2px 12px -2px rgba(239,68,68,.4); }
.btn:focus-visible, .nav-item:focus-visible, .segbtn:focus-visible,
.chip:focus-visible { outline:none; box-shadow:0 0 0 3px var(--accent-dim); }

/* Table rows lift on hover and the head sticks while a long history scrolls. */
.tbl thead th { position:sticky; top:0; background:var(--surface);
  z-index:1; }
.tbl tbody tr { transition:background .12s var(--ease); }
.tbl tbody tr:hover { background:rgba(255,255,255,.03); }
.tablewrap { max-height:520px; overflow-y:auto; }

.toolbar { padding:12px 14px; background:var(--surface-grad);
  border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--shadow), var(--edge); }

/* The rail's armed dot pulses only when it is ARMED -- a live account moving
   is the one thing on this screen worth an animation. */
.side-state.is-armed .dot { animation:beat 1.6s ease-in-out infinite; }
@keyframes beat { 50% { opacity:.35; transform:scale(.82); } }
@media (prefers-reduced-motion:reduce) {
  .side-state.is-armed .dot { animation:none; } }

/* Seen in the browser: the entry form is tall enough that Save sat below the
   fold, so the last thing you do was the one thing you had to hunt for. Body
   scrolls, head and foot stay put. */
.modal-card { max-height:calc(100vh - 48px); display:flex; flex-direction:column; }
.modal-body { overflow-y:auto; flex:1; }
.modal-head, .modal-foot { flex:0 0 auto; }

/* ---------------------------------------------- options chain & strike finder */
.picks { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.pick { padding:14px 15px; border-radius:var(--r);
  border:1px solid var(--border-2); background:var(--surface-2); }
.pick.ce { border-left:3px solid var(--up); }
.pick.pe { border-left:3px solid var(--down); }
.pick.empty-pick { color:var(--muted); font-size:.83rem; border-style:dashed; }
.pick-top { display:flex; align-items:center; gap:9px; }
.pick-top b { font-family:var(--mono); font-size:1.15rem; letter-spacing:-.02em; }
.pick-price { font-family:var(--mono); font-size:1.35rem; font-weight:700;
  margin:7px 0 6px; letter-spacing:-.02em; }
.pick-why { font-size:.78rem; color:var(--text-2); line-height:1.5; }
.pick-figs { display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  margin-top:11px; padding-top:11px; border-top:1px solid var(--border); }
.pick-fig span { display:block; font-size:.6rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); }
.pick-fig b { font-family:var(--mono); font-size:.86rem;
  font-variant-numeric:tabular-nums; }

.tbl.chain td, .tbl.chain th { padding:9px 12px; }
.tbl.chain .strike { text-align:center; font-family:var(--mono); font-weight:750;
  background:rgba(255,255,255,.03); }
.tbl.chain th.strike { text-align:center; }
.tbl.chain tr.atm-row { background:var(--accent-dim); }
.tbl.chain tr.atm-row .strike { background:rgba(245,184,65,.2); color:var(--accent); }
.tbl.chain td.num.warnc { color:var(--accent); }
.tbl.chain td.pickcell { position:relative; color:var(--text); font-weight:750;
  box-shadow:inset 0 0 0 1px var(--accent); border-radius:6px; }
@media (max-width:760px) { .picks { grid-template-columns:1fr; } }

/* Live P&L: the one number on this platform that moves on its own. */
#live-card .big { font-size:2rem; }
#live-card .row:first-child { border-top:1px solid var(--border); }

/* A link inside an empty state was inheriting the browser's default blue, which
   on this ground was very nearly invisible. */
.empty a, .empty .jump { color:var(--accent); text-decoration:none;
  font-weight:650; }
.empty a:hover, .empty .jump:hover { text-decoration:underline; }
.pick-act { margin:11px 0 2px; }
.tbl .buyleg { margin-left:8px; border-color:var(--border-2); }
.tbl .buyleg:hover { color:var(--accent); border-color:var(--accent); }
.tfoot .pager .muted { align-self:center; font-family:var(--mono); }

/* Same default-blue link problem as in the empty states — a link is a link
   wherever it sits, so give them all the accent rather than patching one
   container at a time. */
.panel a, .hint a, .armtext a, .card a:not(.btn):not(.nav-item) {
  color:var(--accent); text-decoration:none; font-weight:650; }
.panel a:hover, .hint a:hover, .armtext a:hover { text-decoration:underline; }

/* The order ticket, opened over whatever page the decision was made on. */
.om-inst { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:11px 13px; margin-bottom:14px; border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid var(--border-2); }
.om-inst b { font-size:1.02rem; letter-spacing:-.01em; }
.om-inst .muted { font-size:.74rem; font-family:var(--mono); }
.om-arm { padding:13px 14px; margin-bottom:15px; border-radius:var(--r-sm);
  background:var(--live-dim); border:1px solid var(--live); }
.om-arm .armtext { margin:0 0 11px; color:var(--text); font-size:.85rem; }
.om-arm .armrow { align-items:flex-end; }
#om-review:disabled { opacity:.45; cursor:not-allowed; }

/* Super Order: the exits are part of the order, so they get the weight of
   fields rather than the weight of a footnote. */
.superbox { padding:13px 14px; margin:4px 0 14px; border-radius:var(--r-sm);
  background:rgba(16,185,129,.06); border:1px solid rgba(16,185,129,.32); }
.superhead { margin-bottom:11px; }
.superhead b { display:block; font-size:.86rem; color:var(--up); }
.superhead .muted { font-size:.72rem; line-height:1.5; }
.badge.super { background:rgba(16,185,129,.16); color:var(--up);
  border:1px solid rgba(16,185,129,.35); }

/* Affordability. A recommendation the account cannot fund is not one. */
.afford { font-size:.74rem; margin-top:8px; padding:7px 9px; border-radius:7px;
  line-height:1.45; }
.afford.ok { background:rgba(16,185,129,.1); color:#6EE7B7; }
.afford.no { background:rgba(239,68,68,.1); color:#FCA5A5; }
.afford.note { background:var(--surface-3); color:var(--muted); }
.tbl.chain td.unaff { opacity:.42; }
.marginbox { margin-top:14px; padding:11px 13px; border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid var(--border-2); }

/* The charge rate table: many small numbers, so it wraps rather than scrolls. */
.rate-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:12px 14px; margin:14px 0 4px; }
.rate-fld { margin-bottom:0; }
.rate-fld label { text-transform:none; letter-spacing:normal; font-size:.72rem;
  font-weight:600; color:var(--text-2); min-height:2.4em; }
.rate-fld .in { padding:8px 10px; font-size:.85rem; }
.rate-actions .muted { color:var(--up); }

/* ===========================================================================
   LAYOUT RULES — 2026-09-10. Loaded last so it wins. Five rules, every page:
   1 no fixed heights on anything holding text (min-height only)
   2 structure is flex/grid with gap; absolute/fixed is kept ONLY for overlays
     (search dropdown, modal, mobile drawer, decorative markers)
   3 text wraps inside its box -- long symbols, IDs and numbers never spill
   4 sections push the next one down: no negative margins, flow-root clearing
   5 border-box everywhere, pseudo-elements included
   ======================================================================== */

/* 5 — box sizing, including ::before/::after (the card-head spine, nav pill). */
*, *::before, *::after { box-sizing:border-box; }

/* 3 — fluid text. Any flex/grid child may shrink below its content width, and
   words break rather than push the card wider than the screen. */
body { overflow-wrap:break-word; }
h1, h2, h3, p, li, label, .hint, .armtext, .pick-why, .alert, .empty,
.meta, .kv span, .hbar-top, .csentence, .cmeta, .superhead, .afford,
.meter-note, .chart-foot, .tfoot, .mid, .side-sub, .om-inst {
  overflow-wrap:anywhere; word-break:normal; }
.card, .kpi, .tile, .panel, .pick, .fld, .field, .rule, .modal-card,
.card-head > *, .kpi-head > *, .row > *, .kv > *, .hbar-top > *,
.armrow > *, .rule-row > *, .crow > *, .toolbar > *, .topbar > *,
.dash-grid > *, .kpis > *, .tiles > *, .picks > *, .grid2 > *,
.rule-grid > *, .rate-grid > *, .pick-figs > *, .seg-row > * { min-width:0; }

/* Headline figures scale with the viewport instead of one size that
   overflows a narrow KPI tile. */
.kpi .v       { font-size:clamp(1.2rem, 1rem + 1.1vw, 1.72rem); overflow-wrap:anywhere; }
.tile .v      { font-size:clamp(1.05rem, .9rem + .8vw, 1.3rem); overflow-wrap:anywhere; }
.panel .big   { font-size:clamp(1.25rem, 1rem + 1.2vw, 1.6rem); overflow-wrap:anywhere; }
#live-card .big { font-size:clamp(1.4rem, 1rem + 2vw, 2rem); }
.pick-price   { font-size:clamp(1.1rem, .95rem + .9vw, 1.35rem); }
.kv b, .hbar-top b, .seg-row b { overflow-wrap:anywhere; }

/* Card heads: title wraps, tools drop to their own line rather than colliding. */
.card-head { flex-wrap:wrap; row-gap:8px; padding-top:10px; padding-bottom:10px; }
.card-head h2 { flex:1 1 auto; }
.head-tools { flex-wrap:wrap; }

/* Pills and badges stay one line but may not exceed their row. */
.pill, .badge, .tag { max-width:100%; overflow:hidden; text-overflow:ellipsis; }

/* 2 — grids: minmax(0,1fr), not 1fr. A plain 1fr track has an automatic
   minimum of its content, so one long symbol widens a column and shoves its
   neighbours off the card. */
.tiles     { grid-template-columns:repeat(4, minmax(0,1fr)); }
.kpis      { grid-template-columns:repeat(4, minmax(0,1fr)); }
.dash-grid { grid-template-columns:repeat(6, minmax(0,1fr)); }
.grid2, .rule-grid, .picks, .codes { grid-template-columns:repeat(2, minmax(0,1fr)); }
.pick-figs { grid-template-columns:repeat(auto-fit, minmax(72px,1fr)); }
.rate-grid { grid-template-columns:repeat(auto-fill, minmax(min(240px,100%),1fr)); }
.seg-row   { grid-template-columns:minmax(56px,auto) minmax(0,1fr) minmax(64px,auto); }
@media (max-width:900px) { .kpis { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:760px) { .tiles { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .picks { grid-template-columns:minmax(0,1fr); } }
@media (max-width:620px) { .rule-grid { grid-template-columns:minmax(0,1fr); } }
@media (max-width:560px) { .grid2, .kpis { grid-template-columns:minmax(0,1fr); } }

/* The ARM caption row and rule rows wrap instead of squeezing inputs. */
.armrow .in { flex:1 1 130px; max-width:100%; }
.rule-row .in.slim { flex:0 1 120px; }

/* 1 — no fixed heights on text containers. */
.btn, .segbtn, .burger, .brand .mark, .kpi-ic, .nav-item, .chip, .res {
  height:auto; }
.burger     { width:auto; min-width:36px; min-height:36px; height:auto; }
.brand .mark { width:auto; min-width:32px; min-height:32px; height:auto; padding:0 6px; }
.kpi-ic     { width:auto; min-width:30px; min-height:30px; height:auto; }
.btn        { min-height:44px; padding-top:6px; padding-bottom:6px; text-align:center;
  flex-wrap:wrap; line-height:1.25; }
.btn.sm     { min-height:34px; padding-top:4px; padding-bottom:4px; }
.segbtn     { min-height:42px; padding-top:6px; padding-bottom:6px; line-height:1.25; }
.seg .segbtn { min-height:30px; }
.kpi .k     { min-height:2.1em; }
/* The rail is a sticky column. It is never shorter than the screen and never
   taller -- the nav inside scrolls, so a long menu cannot run off the bottom. */
.side { height:auto; min-height:100vh; min-height:100dvh; max-height:100vh;
  max-height:100dvh; align-self:start; }
@media (max-width:900px) { .side { min-height:100dvh; } }

/* 4 — auto-flow. Every section clears its own children and spaces the next
   one with its own margin, so a card that grows pushes the rest down. */
.view.on, .card, .panel, .page, .modal-body, .settings-page { display:flow-root; }
.dash-grid .card { display:flex; }
.view.on > * + * { margin-top:0; }
.view.on > :last-child { margin-bottom:0; }
.dash-grid, .kpis, .tiles, .toolbar, .picks { margin-bottom:16px; }
.page { padding-bottom:max(64px, env(safe-area-inset-bottom)); }
/* Content stacks in a column under the sticky topbar and grows with it. */
.content { min-height:100vh; }
.page { flex:1 0 auto; }