/* ==========================================================================
   R31 B96 (W1): THE ROUND 4 SHELL, the frames Kevin approved 2026-10-06
   (Grokbot mockups\Round 4\mockups\<screen>_1366.html and _390.html; their CSS is
   Round 4\scripts\r4_base.py). Loaded by base.html and floor/shell.html after nav.css and
   tabbar.css, so it wins by order over the older rules it restyles.

   The left bar: the lockup alone in its 56px brand row, plain section labels, the desks with
   18px Slate carets, each trade on a plate with its stop / entry / take profit / price bar, and
   the closed trades on a darker plate. The top bar (templates/_topbar.html): the breadcrumb, the
   market chip, search, PAPER / LIVE and the bell. Live: a solid Ember bar with a hatch, an Ember
   edge down the page, LIVE on the page band. The right rail: 34px, five tabs that fit at 900px.
   ========================================================================== */
/* The frames draw no Ember line over the page top: the top bar is the page's edge. */
body.railed > .brandline, body.dshell > .brandline { display: none; }
nav.ikrail .mk { width: 26px; height: 26px; border-radius: 50%; flex: none; display: block; }
nav.ikrail .brand .lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
nav.ikrail .wordmark { font: 800 20px/1 var(--font); letter-spacing: -.02em; color: var(--text); }
nav.ikrail .wordmark b { font-weight: 800; color: var(--accent); }
/* The section labels (DESKS, RESEARCH, REVIEW) and the rows under them. */
nav.ikrail .rg { margin: 14px 20px 4px; font: 800 11px/1.3 var(--font); letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); }
nav.ikrail .rg.rg-gap { margin-top: 10px; }
nav.ikrail .grpbody { display: block; }
nav.ikrail .sub.grpbody { padding: 0 10px; }
nav.ikrail .sub.grpbody a { display: flex; align-items: center; gap: 10px; height: 36px; min-height: 36px;
  padding: 0 10px; border-radius: 8px; border-left: 0; font: 600 14px var(--font); color: var(--warn); }
nav.ikrail .sub.grpbody a:hover { background: var(--band); color: var(--text); }
nav.ikrail .sub.grpbody a.here { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); color: var(--text);
  box-shadow: inset 3px 0 0 var(--accent); }
nav.ikrail .navct { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--muted); }
/* All accounts: a row like the others with today's total at the right. */
nav.ikrail .navall { margin: 8px 10px 0; padding: 0 10px; height: 36px; min-height: 36px; border: 0;
  border-radius: 8px; background: none; font: 600 14px var(--font); color: var(--warn); flex-wrap: nowrap; }
nav.ikrail .navall:hover { background: var(--band); }
nav.ikrail .navall.here { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); box-shadow: inset 3px 0 0 var(--accent); color: var(--text); }
nav.ikrail .navall-v { font-size: 13px; font-weight: 700; }
nav.ikrail .navall-v[hidden] { display: none; }
/* A desk: the row, then (open) its plates. */
nav.ikrail .navcard { margin: 2px 10px; padding: 0; border: 1px solid transparent; border-radius: 8px;
  background: none; overflow: hidden; }
nav.ikrail .navcard.open { background: var(--panel); border-color: var(--line-soft); }
nav.ikrail .navcard.acct { border-color: transparent; }
nav.ikrail .navcard.acct.open { border-color: var(--line-soft); }
nav.ikrail .navcard-h { gap: 8px; height: 36px; min-height: 36px; padding: 0 10px 0 2px; }
nav.ikrail .navdn { font: 700 14px var(--font); color: var(--text); }
nav.ikrail .navdpl { margin-left: auto; font: 700 13px var(--font); white-space: nowrap; }
nav.ikrail .navdpl.up { color: var(--up); } nav.ikrail .navdpl.dn { color: var(--down); }
nav.ikrail .navdpl.na, nav.ikrail .navseason { color: var(--muted); font-weight: 600; }
/* R31 B133: the Solana summer hold's line on the Crypto sleeve card. */
nav.ikrail .ovsol { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0 0; font-size: 12px; }
nav.ikrail .ovsol[hidden] { display: none; }
nav.ikrail .ovsol .k { color: var(--muted); }
nav.ikrail .navdeq { display: none; }
/* THE CARET (Kevin, desk phone: "maybe more noticeable"): an 18px filled Slate chevron. */
nav.ikrail .navcb { order: -1; width: 22px; height: 36px; min-height: 0; margin: 0; padding: 0; display: inline-flex;
  align-items: center; justify-content: center; color: var(--warn); background: none; border: 0; }
nav.ikrail .navcb::before { content: ""; width: 0; height: 0; border-style: solid;
  border-width: 5px 0 5px 7px; border-color: transparent transparent transparent currentColor; }
nav.ikrail .navcb[aria-expanded="true"]::before { border-width: 7px 5px 0 5px;
  border-color: currentColor transparent transparent transparent; }
nav.ikrail .navcb:hover { background: var(--band); color: var(--text); }
nav.ikrail .navcard .sub { margin: 0; border-top: 0; }
nav.ikrail .navcard .sub .navnote { padding: 4px 10px 4px 26px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
/* A TRADE ON ITS OWN PLATE (Kevin, desk desktop: "use shading to separate the positions"):
   alternating white and ground, a hairline between. */
nav.ikrail .navcard .sub a.navrow.plate { display: block; padding: 6px 10px 8px 26px; min-height: 0; border-radius: 0;
  border-top: 1px solid var(--line); background: var(--panel); color: var(--text); white-space: normal; }
nav.ikrail .navcard .sub .navtrades > a.navrow.plate:nth-child(even) { background: var(--bg); }
nav.ikrail .navcard .sub a.navrow.plate:hover { background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }
nav.ikrail .navrow .pl1 { display: flex; align-items: baseline; gap: 6px; font-size: 13px; }
nav.ikrail .navrow .navsym { font-weight: 800; color: var(--text); }
nav.ikrail .navrow .navqty { font-size: 11px; font-weight: 700; color: var(--muted); text-align: left; }
nav.ikrail .navrow .navday { font-size: 12px; font-weight: 700; }
nav.ikrail .navday.up { color: var(--up); } nav.ikrail .navday.dn { color: var(--down); }
nav.ikrail .navrow .navpnl { margin-left: auto; font-weight: 800; }
/* the level bar: stop (crimson tick), take profit (green tick), the entry (ink tick, the anchor)
   and the fill growing from it to the price, whose arrowhead points the way it moved (R31 B153). */
nav.ikrail .lv { position: relative; display: block; height: 16px; margin: 4px 0 0; }
nav.ikrail .lv > i { position: absolute; display: block; }
nav.ikrail .lvtr { left: 0; right: 0; top: 7px; height: 2px; background: var(--line); }
nav.ikrail .lvfill { top: 6px; height: 4px; }
nav.ikrail .lvfill.up { background: var(--up); border-radius: 0 2px 2px 0; }
nav.ikrail .lvfill.dn { background: var(--down); border-radius: 2px 0 0 2px; }
nav.ikrail .lvtk { top: 3px; width: 2px; height: 10px; border-radius: 1px; }
nav.ikrail .lvtk.s { left: 0; background: var(--down); }
nav.ikrail .lvtk.t { right: 0; background: var(--up); }
nav.ikrail .lvtk.e { top: 1px; height: 14px; margin-left: -1px; background: var(--text); }
nav.ikrail .lvcur { top: 2px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
nav.ikrail .lvcur.dn { border-right: 8px solid var(--down); }
nav.ikrail .lvcur.up { margin-left: -8px; border-left: 8px solid var(--up); }
nav.ikrail .lvcur.flat { top: 3px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: var(--text); border: 2px solid var(--panel); box-sizing: border-box; }
nav.ikrail .lvn { display: flex; justify-content: space-between; margin-top: 1px; font-size: 11.5px; color: var(--muted); }
nav.ikrail .lvn .s { color: var(--down); } nav.ikrail .lvn .t { color: var(--up); }
/* R31 B154: no take profit, an open right end: the track fades out, no end cap; the Day desk's
   "flat 15:45" sits where the target would. */
nav.ikrail .lv.open .lvtr { -webkit-mask-image: linear-gradient(to right, black 70%, transparent); mask-image: linear-gradient(to right, black 70%, transparent); }
nav.ikrail .lvn .t.end { color: var(--muted); }
nav.ikrail .navtrades > .navempty, nav.ikrail .navtrades > .navunread { padding: 6px 10px 6px 26px; border-top: 1px solid var(--line); }
nav.ikrail .navtrades > button.navgrow { padding-left: 24px; border-top: 1px solid var(--line); border-radius: 0; }
nav.ikrail .navtrades > .navrow.deep { padding-left: 34px; }
/* CLOSED TODAY under the desk, a shade darker (Kevin, desk phone: "where are the closed for the day"). */
nav.ikrail .navclosed .clh, nav.ikrail .navcard .sub .navclosed .cl2 { display: flex; align-items: center; gap: 6px;
  padding: 0 10px 0 26px; min-height: 0; border-radius: 0; background: color-mix(in srgb, var(--warn) 9%, var(--panel)); }
nav.ikrail .navclosed .clh { height: 24px; border-top: 1px solid var(--line); font: 800 10.5px var(--font);
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
nav.ikrail .navclosed .clh b { margin-left: auto; letter-spacing: 0; font-size: 12px; }
nav.ikrail .navcard .sub .navclosed .cl2 { height: 30px; border-top: 1px solid var(--line-soft); font-size: 12px;
  color: var(--muted); text-decoration: none; }
nav.ikrail .navclosed .cl2 > b:first-child { color: var(--text); font-weight: 800; }
nav.ikrail .navclosed .cl2 .w { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--band); }
nav.ikrail .navclosed .cl2 .w.up { background: var(--ok-bg); color: var(--up); }
nav.ikrail .navclosed .cl2 .w.dn { background: var(--bad-bg); color: var(--down); }
nav.ikrail .navclosed .cl2 .fill { flex: 1; }
nav.ikrail .navclosed .cl2 .r { font-weight: 700; color: var(--muted); }
/* B118 part 6: the whole trade, small, beside the close's part of today */
nav.ikrail .navclosed .cl2 .tr { font-size: 11px; color: var(--muted); white-space: nowrap; }
nav.ikrail .navclosed .up { color: var(--up); } nav.ikrail .navclosed .dn { color: var(--down); }
nav.ikrail .navclosed .na { color: var(--muted); }
nav.ikrail .navlinks { display: flex; flex-wrap: wrap; gap: 0 4px; padding: 2px 6px 4px 20px; border-top: 1px solid var(--line); }
nav.ikrail .navcard .navlinks a { padding: 0 6px; min-height: 30px; font-size: 12px; font-weight: 600; color: var(--accent-ink); }
/* The phone's Desks sheet strip waits for that sheet. */
nav.ikrail .navclosedall { display: none; }
nav.ikrail .navuser { font-size: 12px; }

/* ---------------------------------------------------------------- THE TOP BAR */
.ktop { box-sizing: border-box; display: flex; align-items: center; gap: 14px; height: 56px;
  padding: 0 24px; background: var(--panel); border-bottom: 1px solid var(--line); color: var(--text);
  font: 13px/1.3 var(--font); z-index: 35; }
.ktop .ktop-brand, .ktop .appback, .ktop .apprefresh, html body .ktop .menubtn { display: none; }
.ktop-crumb { display: flex; align-items: center; gap: 6px; flex: none; white-space: nowrap; font-size: 15px; font-weight: 700; }
.ktop-crumb > * { flex: none; }
.ktop-desk, .ktop-mkt { flex: none; }
.ktop-mkt .mkt-s { display: none; }
/* A narrow window keeps the chip to its first words ("Market open"); the close time waits for room. */
@media (max-width: 1240px) { .ktop-mkt .mkt-l { display: none; } .ktop-mkt .mkt-s { display: inline; } }
/* Under 1180px search is its icon (the same box opens on a tap, or "/"), so the switch and the
   bell keep their room beside the right rail. */
@media (min-width: 861px) and (max-width: 1180px) {
  .ktop { gap: 10px; padding: 0 16px; }
  .ktop .ktop-search { width: 40px; padding: 0; justify-content: center; }
  .ktop .ktop-search span, .ktop .ktop-search kbd { display: none; }
}
.ktop-crumb a { color: var(--text); text-decoration: none; }
.ktop-crumb a:hover { color: var(--accent-ink); }
.ktop-crumb i { font-style: normal; color: var(--muted); font-weight: 600; }
.ktop-crumb b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.ktop-floors { position: relative; }
.ktop-floors summary { list-style: none; cursor: pointer; }
.ktop-floors summary::-webkit-details-marker { display: none; }
.ktop-floors summary::after { content: ""; display: inline-block; margin-left: 5px; vertical-align: 2px;
  border-style: solid; border-width: 5px 4px 0 4px; border-color: var(--muted) transparent transparent transparent; }
.ktop-floormenu { position: absolute; top: calc(100% + 8px); left: -8px; z-index: 60; min-width: 160px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; }
.ktop-floormenu a { padding: 8px 10px; border-radius: 6px; font: 600 13px var(--font); color: var(--text); text-decoration: none; }
.ktop-floormenu a:hover, .ktop-floormenu a.on { background: var(--band); }
.ktop-desk { height: 24px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 700; background: var(--band); color: var(--warn); white-space: nowrap; }
.ktop-desk.up { background: var(--ok-bg); color: var(--up); } .ktop-desk.dn { background: var(--bad-bg); color: var(--down); }
.ktop-desk[hidden] { display: none; }
.ktop-mkt { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--warn); white-space: nowrap; }
.ktop-mkt i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.ktop-mkt.open i { background: var(--up); }
.ktop-realm { display: none; }
.ktop-fill { flex: 1 1 auto; }
.ktop .ktop-search { display: flex; align-items: center; gap: 8px; width: 300px; max-width: 26vw; height: 36px; min-height: 36px;
  padding: 0 12px; margin: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
  color: var(--muted); font: 13px var(--font); cursor: text; text-align: left; flex: 0 1 auto; }
.ktop .ktop-search span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ktop .ktop-search kbd { font: 600 11px var(--font); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; background: var(--panel); }
.ktop .ktop-search .qsicon { flex: none; }
/* PAPER / LIVE: one tap, both words shown; the knob's side and colour say which. */
.kmodeform { margin: 0; display: flex; flex: none; }
.ktop .kmode { display: inline-flex; align-items: center; gap: 8px; height: 36px; min-height: 36px; padding: 0 2px; margin: 0;
  border: 0; background: none; box-shadow: none; cursor: pointer; font: 800 12px var(--font); letter-spacing: .06em; color: var(--warn); }
.kmode .kmode-sw { position: relative; width: 44px; height: 24px; border-radius: 12px; background: var(--warn); flex: none; }
.kmode .kmode-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: left .15s; }
.kmode .kmode-l { opacity: .5; }
.kmode[aria-checked="true"] .kmode-p { opacity: .5; } .kmode[aria-checked="true"] .kmode-l { opacity: 1; }
.kmode[aria-checked="true"] .kmode-sw::after { left: 23px; }
.kmode-tag { flex: none; font: 800 12px var(--font); letter-spacing: .06em; color: var(--warn); }
.ktop .ktop-bell { position: relative; flex: none; width: 40px; height: 40px; min-height: 40px; padding: 0; margin: 0;
  border: 1px solid var(--line); border-radius: 50%; background: none; display: inline-flex; align-items: center; justify-content: center; }
.ktop .ktop-bell .alertbadge { position: absolute; top: -3px; right: -3px; left: auto; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; background: var(--warn); color: #fff; font: 700 11px/18px var(--font); text-align: center; box-sizing: border-box; }
.ktop .ktop-bell .alertbadge[hidden] { display: none; }

/* --------------------------------------------------------------- LIVE (html.live)
   R3 and R4 (Grok p28, Kevin: "needs to be more unique"): the whole top bar goes Ember with
   white text and a hatch under it, the brand cell too, an Ember edge runs down the page and the
   page band carries a LIVE stamp. Paper stays the calm white bar. */
html.live .ktop { background: var(--accent); border-bottom-color: #853012; color: #fff; }
html.live .ktop::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; pointer-events: none;
  background: repeating-linear-gradient(-45deg, #853012 0 6px, #36414f 6px 12px); }
html.live .ktop-crumb a, html.live .ktop-crumb i, html.live .ktop-crumb b, html.live .ktop-mkt, html.live .ktop .kmode,
html.live .ktop .ktop-bell, html.live .ktop .wordmark, html.live .ktop .wordmark b { color: #fff; }
html.live .ktop-mkt i { background: #fff; }
html.live .ktop-desk, html.live .ktop-desk.up, html.live .ktop-desk.dn { background: #fff; }
html.live .ktop-floors summary::after { border-top-color: #fff; }
html.live .ktop .ktop-search { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4); color: #fff; }
html.live .ktop .ktop-search kbd { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .4); }
html.live .ktop .ktop-bell { border-color: rgba(255, 255, 255, .55); }
html.live .ktop .ktop-bell .alertbadge { background: #fff; color: #853012; }
html.live .kmode .kmode-sw { background: #fff; } html.live .kmode .kmode-sw::after { background: #853012; }
html.live .ktop-realm { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px;
  background: #fff; color: #853012; font-size: 12px; font-weight: 700; white-space: nowrap; }
html.live nav.ikrail .brand { background: var(--accent); border-bottom-color: #853012; }
html.live nav.ikrail .wordmark, html.live nav.ikrail .wordmark b { color: #fff; }
html.live :is(.research-band, [data-band]) { position: relative; }
html.live :is(.research-band, [data-band])::after { content: "LIVE"; position: absolute; right: 14px; top: 12px; z-index: 3;
  font: 800 11px var(--font); letter-spacing: .16em; color: #fff; background: var(--accent); padding: 4px 10px; border-radius: 4px; }

@media (min-width: 861px) {
  /* the bar: a 56px brand row, then the rows; collapse sits at the foot */
  body.railed > nav.ikrail, body.dshell #app > nav.ikrail { padding: 0 0 14px; display: flex; flex-direction: column; }
  nav.ikrail .brand { height: 56px; min-height: 56px; padding: 0 20px; flex-wrap: nowrap; box-sizing: border-box; flex: none; }
  html.narrownav nav.ikrail .brand { padding: 0; justify-content: center; }
  html.narrownav nav.ikrail .brand .navlive, html.narrownav nav.ikrail .brand .onepill { display: none; }
  nav.ikrail .navrows { order: 1; }
  nav.ikrail .navtog { order: 2; margin: 14px 20px 0; align-self: flex-start; }
  html.narrownav nav.ikrail .navtog { align-self: center; margin: 14px auto 0; }
  nav.ikrail .navuser { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 20px 0;
    padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); }
  nav.ikrail .navuser form { margin: 0; }
  nav.ikrail .navuser button { min-height: 30px; padding: 2px 10px; font-size: 12px; }
  html.narrownav nav.ikrail .navuser, html.narrownav nav.ikrail .rg { display: none; }
  html.narrownav nav.ikrail .navcard { margin: 4px; border-color: var(--line); }
  html.narrownav nav.ikrail .sub.grpbody { padding: 0; }
  /* the top bar runs from the bar to the right rail; the page clears it */
  .ktop { position: fixed; top: 0; left: calc(var(--navw, 280px) + env(safe-area-inset-left)); right: 0; }
  html.hasrbar .ktop { right: calc(34px + env(safe-area-inset-right)); }
  html.narrownav .ktop { left: calc(56px + env(safe-area-inset-left)); }
  html.hiddennav .ktop { left: 0; }
  html.hiddennav body.railed .navreopen, html.hiddennav body.dshell .navreopen { top: 64px; }
  body.railed { padding-top: 76px; }
  /* the Ember edge down the page in Live */
  html.live body.railed::before, html.live body.dshell::before { content: ""; position: fixed; z-index: 30; top: 56px; bottom: 0;
    left: calc(var(--navw, 280px) + env(safe-area-inset-left)); width: 6px; background: var(--accent); }
  html.live.narrownav body::before { left: 56px; } html.live.hiddennav body::before { left: 0; }
  /* THE RIGHT RAIL (round 4, B's idea, Kevin's keeper): 34px, five tabs each 72 to 150px tall, so
     all five sit above the fold at 900px; the page's own tab and an open tab in Ember. */
  #rbar { width: calc(34px + env(safe-area-inset-right)); padding: 0 env(safe-area-inset-right) 0 0; gap: 0;
    background: var(--band); }
  #rbar .rtab { flex: 1 1 0; min-height: 72px; max-height: 150px; padding: 0; border: 0; border-bottom: 1px solid var(--line);
    border-radius: 0; color: var(--muted); font: 800 10px/1 var(--font); letter-spacing: .09em; position: relative; background: none; }
  #rbar .rtab:hover { border-color: var(--line); color: var(--text); background: var(--panel); }
  #rbar .rtab.on, html[data-rr="trade"] #rbar .rtab[data-rtab="trade"], html[data-rr="watchlist"] #rbar .rtab[data-rtab="watchlist"],
  html[data-rr="research"] #rbar .rtab[data-rtab="research"], html[data-rr="positions"] #rbar .rtab[data-rtab="positions"],
  html[data-rr="bots"] #rbar .rtab[data-rtab="bots"] { color: var(--accent); background: var(--panel); border-color: var(--line); }
  #rbar .rtab.on::after, html[data-rr="trade"] #rbar .rtab[data-rtab="trade"]::after, html[data-rr="watchlist"] #rbar .rtab[data-rtab="watchlist"]::after,
  html[data-rr="research"] #rbar .rtab[data-rtab="research"]::after, html[data-rr="positions"] #rbar .rtab[data-rtab="positions"]::after,
  html[data-rr="bots"] #rbar .rtab[data-rtab="bots"]::after { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
    width: 3px; background: var(--accent); border-radius: 0 2px 2px 0; }
  html.hasrbar body.railed { padding-right: calc(34px + 24px + env(safe-area-inset-right)); }
  html.hasrbar.rpanel-open body.railed { padding-right: calc(34px + 24px + env(safe-area-inset-right) + min(420px, 100vw - 100px)); }
  #rpanel { right: calc(34px + env(safe-area-inset-right)); top: 56px; }
  html.hasrbar.rpanel-open .ktop { right: calc(34px + env(safe-area-inset-right) + min(420px, 100vw - 100px)); }
}

/* ------------------------------------------- UNDER 861px: THE TOP BAR IS THE PHONE'S
   The left bar steps aside (the Menu and Desks sheets host it); the top bar is the one row:
   the mark and the wordmark, PAPER / LIVE, search and the bell (round 4, every _390 frame). */
@media (max-width: 860px) {
  body.railed > nav.ikrail, html.narrownav body.railed > nav.ikrail, html body.dshell #app > nav.ikrail { display: none; }
  .ktop { position: fixed; top: 0; left: 0; right: 0; gap: 8px; height: calc(56px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
  .ktop .ktop-brand { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; flex: none; }
  .ktop .ktop-brand .mk { width: 24px; height: 24px; border-radius: 50%; }
  .ktop .wordmark { font: 800 20px/1 var(--font); letter-spacing: -.02em; color: var(--text); }
  .ktop .wordmark b { font-weight: 800; color: var(--accent); }
  .ktop-crumb, .ktop-mkt, .ktop-desk, html.live .ktop-realm { display: none; }
  .ktop .ktop-search { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; border: 0; background: none; order: 3; flex: none; }
  .ktop .ktop-search span, .ktop .ktop-search kbd { display: none; }
  .kmodeform, .kmode-tag { order: 1; } .ktop-fill { order: 2; } .ktop .ktop-bell { order: 4; width: 44px; height: 44px; }
  .ktop .kmode { gap: 6px; font-size: 11px; height: 44px; min-height: 44px; }
  .kmode .kmode-sw { width: 36px; height: 20px; border-radius: 10px; }
  .kmode .kmode-sw::after { top: 2px; left: 2px; width: 16px; height: 16px; }
  .kmode[aria-checked="true"] .kmode-sw::after { left: 18px; }
  .kmode-tag { font-size: 11px; }
  body.railed { padding-top: calc(56px + 12px + env(safe-area-inset-top)); }
  /* Live on a phone: an Ember-tinted bar with an Ember rule at the top, the hatch, an Ember edge. */
  html.live .ktop { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); box-shadow: inset 0 4px 0 var(--accent); color: var(--text); }
  html.live .ktop .wordmark { color: var(--text); } html.live .ktop .wordmark b { color: var(--accent); }
  html.live .ktop .kmode, html.live .ktop .ktop-bell { color: var(--text); }
  html.live .ktop .ktop-bell { border-color: var(--line); }
  html.live .ktop .ktop-bell .alertbadge { background: var(--accent); color: #fff; }
  html.live .kmode .kmode-sw { background: var(--accent); } html.live .kmode .kmode-sw::after { background: #fff; }
  html.live .ktop .ktop-search { background: none; border: 0; color: var(--text); }
  html.live body.railed::before { content: ""; position: fixed; z-index: 30; top: 0; bottom: 0; left: 0; width: 4px; background: var(--accent); }
}

/* Between 768 and 860px there is no left bar and no bottom bar: the top bar's menu icon opens
   the Menu sheet (nav/tabbar.css hides it under 768px, where the bottom bar's Menu tab does). */
@media (min-width: 768px) and (max-width: 860px) {
  html body .ktop .menubtn { display: inline-flex; align-items: center; justify-content: center; order: 5; flex: 0 0 44px;
    width: 44px; height: 44px; min-height: 44px; padding: 0; margin: 0; border: 0; border-radius: 22px; background: none; color: var(--text); }
  .ktop .menubtn .tabico { display: block; width: 24px; height: 24px; background: currentColor;
    -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
    mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E"); }
  .menupanel { bottom: 0; }
}

/* ------------------------------------------------ THE MENU AND DESKS SHEETS (phone)
   The bar moves into the sheet (nav/nav.js ikedigMenu). Each desk is a card there, its row 48px
   with the equity and today's P/L (round 4 desk_390). In the Desks mode the sheet shows the
   "Closed today, all desks" strip and the desks alone. */
.menusheet { background: var(--bg); }
.menusheet nav.ikrail .navcard { margin: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.menusheet nav.ikrail .navcard-h { height: 48px; min-height: 48px; padding: 0 14px 0 4px; }
.menusheet nav.ikrail .navcb { width: 40px; height: 48px; }
.menusheet nav.ikrail .navdn { font-size: 16px; display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.menusheet nav.ikrail .navdeq { display: inline; font-size: 14px; color: var(--muted); margin-right: 10px; }
.menusheet nav.ikrail .navdpl { font-size: 15px; margin-left: 0; }
.menusheet nav.ikrail .navcard .sub a.navrow.plate { padding: 10px 16px; min-height: 44px; }
.menusheet nav.ikrail .navrow .pl1 { font-size: 14px; }
.menusheet nav.ikrail .navclosed .clh, .menusheet nav.ikrail .navcard .sub .navclosed .cl2 { padding-left: 16px; padding-right: 16px; }
.menusheet nav.ikrail .navcard .sub .navclosed .cl2 { height: 40px; }
.menusheet nav.ikrail .navlinks a { min-height: 40px; display: inline-flex; align-items: center; }
.menusheet nav.ikrail .sub.grpbody a { height: 44px; }
.menusheet nav.ikrail .navall { margin: 8px 12px 0; height: 44px; }
.menupanel[data-mode="desks"] .menusheet nav.ikrail .navrows > :not(.navclosedall):not(#grp-desks):not([data-mono="DK"]) { display: none !important; }
.menupanel[data-mode="desks"] .menusheet nav.ikrail .navclosedall:not([hidden]) { display: block; margin: 8px 12px 4px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--band); overflow: hidden; }
.navclosedall .cla-top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.navclosedall .cla-words { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.navclosedall .cla-words b { font-size: 14px; }
.navclosedall .cla-words span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navclosedall .cla-tot { font-size: 22px; font-weight: 800; }
.navclosedall .cla-cells { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.navclosedall .cla-cell { display: flex; flex-direction: column; padding: 8px 16px; font-size: 13px; }
.navclosedall .cla-cell + .cla-cell { border-left: 1px solid var(--line); }
.navclosedall .cla-cell b { font-size: 14px; }
.navclosedall .up { color: var(--up); } .navclosedall .dn { color: var(--down); } .navclosedall .na { color: var(--muted); }

/* ------------------------------------------------ LEFT BAR V2 (R31 B100, Kevin approved 2026-10-06)
   design/leftbar_v2/leftbar_v2.html, drawn at 268px. Day, Swing and Long-Term are full cards: the
   row (dot, name, chips, the open R in Slate, the caret at the right), then always the overview:
   OPEN and TODAY in large type, the P/L, CASH and BUYING PWR strip, the EXPOSURE gauge. The same
   card rides into the phone's Desks sheet (the rail moves there, nav.js ikedigMenu). */
nav.ikrail .navcard[data-card="full"] { margin: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
nav.ikrail .navcard.open[data-card="full"] { border-color: var(--warn); }
nav.ikrail .navcard.acct[data-card="full"] { border-color: var(--line); }
nav.ikrail .navcard.acct.open[data-card="full"] { border-color: var(--warn); }
nav.ikrail .navcard[data-card="full"] .navcard-h { gap: 6px; height: auto; min-height: 30px; padding: 6px 4px 0 10px; }
nav.ikrail .navcard[data-card="full"] .navdn { font: 800 13.5px var(--font); white-space: nowrap; }
nav.ikrail .navcard[data-card="full"] .navcb { order: 10; width: 26px; height: 26px; margin: 0 0 0 -2px; flex: none; }
nav.ikrail .navchips { display: inline-flex; gap: 4px; min-width: 0; overflow: hidden; }
nav.ikrail .navchip2, nav.ikrail .navrchip { white-space: nowrap; font: 800 9.5px/1.5 var(--font); padding: 1px 6px;
  border-radius: 999px; background: var(--band); color: var(--warn); flex: none; }
nav.ikrail .navchip2.bad { background: var(--bad-bg); color: var(--down); }
nav.ikrail .navrchip { background: var(--warn); color: var(--panel); font-variant-numeric: tabular-nums; }
nav.ikrail .navrchip.bad { background: var(--down); color: #fff; }
nav.ikrail .navrchip[hidden], nav.ikrail .navov [hidden] { display: none; }
nav.ikrail .navov { cursor: pointer; padding: 0 10px 8px; font-variant-numeric: tabular-nums; }
nav.ikrail .navov .k { display: block; font: 700 9.5px/1.3 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
nav.ikrail .ovbig { display: flex; justify-content: space-between; align-items: baseline; padding-top: 2px; }
nav.ikrail .ovbig .v { font: 800 17px/1.25 var(--font); letter-spacing: -.01em; color: var(--text); white-space: nowrap; }
nav.ikrail .ovbig .td { text-align: right; }
nav.ikrail .ovbig .v.up, nav.ikrail .ovstats .up { color: var(--up); }
nav.ikrail .ovbig .v.dn, nav.ikrail .ovstats .dn { color: var(--down); }
nav.ikrail .ovbig .v.na { color: var(--muted); font-size: 13px; font-weight: 600; }
nav.ikrail .ovstats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: 6px; border-top: 1px solid var(--line); }
nav.ikrail .ovstats > div { padding: 5px 0 4px; min-width: 0; }
nav.ikrail .ovstats > div:not([hidden]) ~ div:not([hidden]) { border-left: 1px solid var(--line); padding-left: 7px; }
nav.ikrail .ovstats .k { font-size: 9px; letter-spacing: .05em; }
nav.ikrail .ovstats b { display: block; font: 800 11px/1.35 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
nav.ikrail .ovexp { padding-top: 3px; }
nav.ikrail .ovexp .lab { display: flex; justify-content: space-between; font: 700 9.5px/1.3 var(--font); letter-spacing: .04em; color: var(--muted); }
nav.ikrail .ovexp .gauge { position: relative; height: 7px; margin-top: 3px; border-radius: 4px; background: var(--band); overflow: hidden; }
nav.ikrail .ovexp .gauge i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px;
  background: linear-gradient(90deg, var(--warn), var(--accent)); }
nav.ikrail .ovexp .gauge b { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--text); }
nav.ikrail .ovexp.over .lab span:first-child { color: var(--down); }
nav.ikrail .navcard[data-card="full"] .sub { border-top: 1px solid var(--line); }
nav.ikrail .navcard[data-card="full"] .sub a.navrow.plate { padding-left: 10px; }
nav.ikrail .navcard[data-card="full"] .navclosed .clh, nav.ikrail .navcard[data-card="full"] .sub .navclosed .cl2,
nav.ikrail .navcard[data-card="full"] .navtrades > .navempty, nav.ikrail .navcard[data-card="full"] .navtrades > .navunread,
nav.ikrail .navcard[data-card="full"] .sub .navnote { padding-left: 10px; }
nav.ikrail .navcard[data-card="full"] .navlinks { padding-left: 4px; }
html.narrownav nav.ikrail .navcard[data-card="full"] { margin: 4px; border-radius: 6px; }
html.narrownav nav.ikrail .navcard[data-card="full"] .navcard-h { padding: 2px 0 0; min-height: 12px; }
/* The phone's Desks sheet: the same card, thumb sized (a 44px caret, nothing under 11px). */
.menusheet nav.ikrail .navcard[data-card="full"] { margin: 8px 12px; }
.menusheet nav.ikrail .navcard[data-card="full"] .navcard-h { height: auto; min-height: 44px; padding: 2px 0 0 14px; }
.menusheet nav.ikrail .navcard[data-card="full"] .navcb { width: 44px; height: 44px; }
.menusheet nav.ikrail .navcard[data-card="full"] .navdn { font-size: 16px; }
.menusheet nav.ikrail .navchip2, .menusheet nav.ikrail .navrchip { font-size: 11px; padding: 2px 7px; }
.menusheet nav.ikrail .navov { padding: 0 14px 12px; }
.menusheet nav.ikrail .ovbig .v { font-size: 20px; }
.menusheet nav.ikrail .navov .k, .menusheet nav.ikrail .ovexp .lab { font-size: 11px; }
.menusheet nav.ikrail .ovstats b { font-size: 13px; }
.menusheet nav.ikrail .ovexp .gauge { height: 8px; }
.menusheet nav.ikrail .navcard[data-card="full"] .sub a.navrow.plate { padding-left: 14px; padding-right: 14px; }
/* R31 B100: the trade plate's three lines: symbol, qty, price and open P/L; "Today +$279 (+3.1%)";
   the stop / entry / take profit bar with its three prices in small type. */
nav.ikrail .navrow .navpx { font-size: 12px; font-weight: 600; color: var(--muted); }
nav.ikrail .navrow .navval { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 6px; }
nav.ikrail .navrow .pl2 { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1px;
  font-size: 11px; font-variant-numeric: tabular-nums; }
nav.ikrail .navrow .pl2 .k { color: var(--muted); }
nav.ikrail .navrow .pl2 .up { color: var(--up); font-weight: 700; } nav.ikrail .navrow .pl2 .dn { color: var(--down); font-weight: 700; }
nav.ikrail .navrow .lvn { font-size: 10px; }
.menusheet nav.ikrail .navrow .pl2 { font-size: 13px; }
.menusheet nav.ikrail .navrow .navpx { font-size: 13px; }
.menusheet nav.ikrail .navrow .lvn { font-size: 12px; }
/* R31 B100: the group headings (Desks, Research, Review, Settings) collapse like the desks: a
   filled Slate caret before the label; a closed Review shows how many decisions wait. */
nav.ikrail button.rg.rgh { display: flex; align-items: center; justify-content: flex-start; gap: 7px; box-sizing: border-box;
  width: calc(100% - 20px); margin: 10px 10px 2px; padding: 0 10px; min-height: 30px; height: 30px;
  background: none; border: 0; border-radius: 8px; cursor: pointer; text-align: left;
  font: 800 11px/1.3 var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
nav.ikrail button.rg.rgh:hover { background: var(--band); color: var(--text); }
nav.ikrail .rgcar { flex: none; width: 0; height: 0; border-style: solid; border-width: 7px 5px 0 5px;
  border-color: var(--warn) transparent transparent transparent; }
nav.ikrail .rgh[aria-expanded="false"] .rgcar { border-width: 5px 0 5px 7px;
  border-color: transparent transparent transparent var(--warn); }
nav.ikrail .rgct { margin-left: auto; font-size: 12px; font-weight: 700; letter-spacing: 0; color: var(--warn); }
nav.ikrail .rgh[aria-expanded="true"] .rgct { display: none; }
.menusheet nav.ikrail button.rg.rgh { min-height: 44px; height: 44px; font-size: 12px; margin-top: 6px; }
/* R31 B129 part 1: Settings is one plain link under the groups, a little apart from Review. */
nav.ikrail .sub.navset { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
nav.ikrail .sub.navset a { color: var(--text); font-weight: 700; }

/* --------------------------------------------------------------- SHADOW (R31 L4)
   The LIVE view in shadow: one Ember line under the top bar, the live pill beside it, and every
   order control greyed with "Shadow: orders are off" (static/floor/shadow.js). */
.shadowbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 12px; padding: 8px 14px;
  border: 1px solid #853012; border-left-width: 6px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  color: var(--text); font: 600 13px/1.3 var(--font); }
.shadowbar b { color: #853012; letter-spacing: .02em; }
.shadowbar .shadowpill { font-style: normal; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px;
  background: var(--accent); color: #fff; white-space: nowrap; }
html.live .shadow-off, html.live .shadow-off:hover { opacity: .45; cursor: not-allowed; filter: grayscale(.6); }
@media (max-width: 860px) { .shadowbar { margin: 0 12px 10px; font-size: 12px; } }
/* the top bar carries the live pill from 861px; the banner repeats it only on a phone */
@media (min-width: 861px) { .shadowbar .shadowpill { display: none; } }