/* THE DESK PAGE'S LAYOUT (R18e, Kevin's pick: Option H, with I, G, E and the Bots panel).
   Header across the top (account dropdown, platform nav, SPY, clock); the left rail (P/L,
   Positions, Log, Closed); the chart or the watch grid in the center; the right tab bar and
   its drawer (rightbar.css, restyled here). Palette and font are tokens.css's. Under 860px
   the nav's own top bar returns, this header steps aside and the rail folds under the
   chart. No em dashes in this file. */

.n { font-variant-numeric: tabular-nums; }
.up { color: var(--long); } .dn { color: var(--short); }
.flat, .na { color: var(--muted); }

/* ------------------------------------------------------------ the grid */
/* R31 B42 part 3 (Kevin: "one left bar everywhere"): the desk page's own rail
   (_drail.html) duplicated the account switcher and showed Positions, Closed and Log
   a second time, which already show in the page body's own Positions and Totals tabs
   (panel-poscards, panel-day). nav.ikrail (_nav.html, every other page's own bar) is
   the one left bar now, same wide, narrow or fully hidden state and the same saved
   choice (nav.js's "ikedig.nav" key) as everywhere else; #drail stays in the DOM
   (desk_rail.js's loadRail still paints into it: window.ikedigDeskRail is read by the
   Positions tab's cards and the phone app) but is never shown. */
@media (min-width:861px) {
  body.dshell #app {
    grid-template-columns: var(--navw, 280px) minmax(0, 1fr); grid-template-rows: auto 1fr;
  }
  html.narrownav body.dshell #app { grid-template-columns: 56px minmax(0, 1fr); }
  html.hiddennav body.dshell #app { grid-template-columns: 0 minmax(0, 1fr); }
  /* B50 part 2 (Kevin 2026-10-02): THE RAIL SCROLLS ON ITS OWN. It used to grow with the page
     (a grid cell as tall as the main column), so Long-Term, Manual and the groups under them
     sat below the fold and only the page's own scroll reached them. Sticky under the 42px
     header, exactly one viewport tall, its own overflow: the page and the rail scroll apart,
     the way base.html's fixed rail already does. The grip (nav.css, absolute inside the rail)
     and the narrow and hidden states are untouched. */
  body.dshell #app > .ikrail {
    display: block; grid-column: 1; grid-row: 2; overflow-y: auto;
    position: sticky; top: 42px; align-self: start; height: calc(100vh - 42px);
  }
  html.hiddennav body.dshell #app > .ikrail { display: none; }
  html.hiddennav body.dshell .navreopen {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 56px; left: 0; z-index: 20; width: 22px; height: 40px;
    padding: 0; background: var(--panel); color: var(--muted);
    border: 1px solid var(--line); border-left: 0; border-radius: 0 var(--radius) var(--radius) 0;
    cursor: pointer; font-size: 16px; line-height: 1;
  }
  html.hiddennav body.dshell .navreopen:hover { color: var(--text); border-color: var(--cyan); }
  body.dshell #app > #drail { display: none; }
  body.dshell #app > main { grid-column: 2; grid-row: 2; padding: 0 14px 20px; }
}
body.dshell .deskgrid { grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
body.dshell .deskgrid > .sidestack { display: none; }
/* The roster rides in the BOTS tab and the models shelf is the Models page's. */
body.dshell .stack > .rostermodels { display: none; }
body.dshell #board { height: calc(100vh - 200px); min-height: 420px; }
/* The old top bar keeps its state stamps; the figures moved to the rail and the header. */
body.dshell .topbar { padding: 6px 0; gap: 10px; }
body.dshell .topbar h1 { font-size: 13px; color: var(--muted); font-weight: 600; }
body.dshell .topbar #modepill, body.dshell .topbar #hdr-equity, body.dshell .topbar #hdr-sizing,
body.dshell .topbar #hdr-dayr,
body.dshell .topbar #hdr-daypl, body.dshell .topbar #daypnl { display: none; }

/* ------------------------------------------------------------ the header */
.dhead {
  grid-column: 1 / -1; grid-row: 1; position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; height: 42px; box-sizing: border-box;
  background: var(--panel); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.dh-acct { flex: 0 0 260px; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 0 8px; position: relative; }
/* R31 B44: a static label, no dropdown. */
.dacct { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px 0 10px;
  background: var(--panel2); border: 1px solid var(--line2); border-radius: 4px; }
.dacct-name { font-size: 14px; font-weight: 700; }
.dacct-eq { font-size: 13px; }
.dacct-sz { font-size: 12px; color: var(--muted); }  /* R31 B22: the sizing equity */
.dacct-over { color: var(--muted); font-size: 12px; }
.dtag { font-style: normal; font-size: 11px; padding: 0 5px; border: 1px solid var(--line2); border-radius: 3px; color: var(--muted); }
.dnav { display: flex; align-items: center; height: 100%; }
.dnav > a, .dnav-dd > summary {
  display: inline-flex; align-items: center; gap: 5px; height: 41px; box-sizing: border-box; padding: 0 13px;
  color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; list-style: none;
}
.dnav > a:hover, .dnav-dd > summary:hover { color: var(--text); }
.dnav-dd > summary { color: var(--text); box-shadow: inset 0 -2px 0 var(--cyan); }
.dnav-dd > summary::-webkit-details-marker { display: none; }
.dnav-dd { position: relative; }
.dnav-menu {
  position: absolute; top: 41px; left: 0; min-width: 180px; padding: 4px 0; z-index: 50;
  background: var(--panel); border: 1px solid var(--line2); border-radius: 4px; box-shadow: var(--shadow);
}
.dnav-menu a { display: block; padding: 7px 14px; color: var(--text); text-decoration: none; font-size: 13px; }
.dnav-menu a:hover { background: var(--panel2); }
.dnav-menu a.on { box-shadow: inset 2px 0 0 var(--cyan); font-weight: 700; }
.dh-fill { flex: 1; }
.dh-spy { display: inline-flex; gap: 6px; align-items: baseline; font-size: 13px; padding: 0 12px; }
.dh-spy span { color: var(--muted); font-weight: 700; }
.dh-spy i { font-style: normal; font-size: 12px; }
.dh-clock { font-size: 13px; color: var(--muted); padding: 0 14px 0 4px; }

/* ------------------------------------------------------------ the left rail */
.drail {
  grid-column: 1; grid-row: 2; position: sticky; top: 42px; align-self: start;
  height: calc(100vh - 46px); overflow-y: auto; box-sizing: border-box;
  background: var(--panel); border-right: 1px solid var(--line); font-size: 13px;
}
.dr-sec { margin: 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.dr-sec.dr-last { border-bottom: 0; }
.dr-sec h2 {
  margin: 0; display: flex; align-items: center; gap: 6px; height: 32px; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.dr-count {
  margin-left: auto; min-width: 18px; height: 18px; box-sizing: border-box; padding: 0 5px; border-radius: 9px;
  background: var(--panel2); font-size: 12px; font-weight: 400; letter-spacing: 0; line-height: 18px; text-align: center; color: var(--text);
}
.dr-scope { font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.dr-kv { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 0; }
.dr-kv span { color: var(--muted); font-size: 12px; }
.dr-kv b { font-size: 14px; font-weight: 600; }
.dr-kv.dr-big b { font-size: 20px; }
.dr-kv.dr-mid b { font-size: 16px; }
.dr-kv b.dr-plain { color: var(--text); }
.dr-row { display: grid; column-gap: 6px; align-items: center; min-height: 34px; color: var(--text); text-decoration: none; }
.dr-pos .dr-row { grid-template-columns: 44px 30px 1fr 72px; }
.dr-closed .dr-row { grid-template-columns: 44px 30px 1fr 1fr 72px; }
/* B12: a name longer than the 44px column (an option's "IWM $272 PUT Nov 6", a pair) takes
   its own line across the row; qty, size and P/L sit beneath in their own columns. */
.dr-pos .dr-row.dr-long > .dr-sym { grid-column: 1 / -1; padding-top: 4px; }
.dr-pos .dr-row.dr-long > span:nth-child(2) { grid-column: 2; }
.dr-row > span:not(:first-child) { text-align: right; }
.dr-head { min-height: 22px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); }
.dr-row.dr-click, a.dr-row { cursor: pointer; }
.dr-row.dr-click:hover, a.dr-row:hover { background: var(--panel2); }
/* R31 B42 part 3: a crypto qty (0.01923456) or an option's short name with no room
   left ran into its neighbor with no ellipsis at all here; every cell gets one, title
   carries the full value where the row's own title does not already (posRow). */
.dr-sym { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* R31 B128 part 6: the company name on a small line under the ticker, so the ticker never yields. */
.dr-sym .aname { display: block; margin-left: 0; font-size: 10px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; }
.dr-sym em { font-style: normal; font-size: 11px; }
.dr-sym a.dr-cc { font-size: 11px; font-weight: 700; color: var(--cyan); text-decoration: none;
  padding: 2px 4px; border: 1px solid currentColor; border-radius: 4px; }
.dr-soft { color: var(--muted); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-pl2 { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; min-width: 0; }
.dr-pl2 b { font-weight: 600; font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-pl2 i { font-style: normal; font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* R31 B42: the residual momentum basket row, collapsed by default (Kevin 2026-10-01). */
.dr-basket-head .dr-sym::after { content: "\25B8"; display: inline-block; margin-left: 4px;
  color: var(--muted); font-size: 11px; transition: transform .15s; }
.dr-basket.open .dr-basket-head .dr-sym::after { transform: rotate(90deg); }
.dr-basket-body { border-left: 2px solid var(--line2); margin-left: 4px; padding-left: 4px; }
.dr-closed .dr-total { grid-template-columns: 1fr auto; margin-top: 4px; border-top: 1px solid var(--line); font-weight: 700; }
.dr-empty { color: var(--muted); font-size: 12px; padding: 8px 0; }
.dr-log { display: flex; flex-direction: column; }
.dr-logrow { display: grid; grid-template-columns: 40px 12px 1fr; align-items: center; min-height: 24px; font-size: 12.5px; }
.dr-logrow > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-dot { width: 8px; height: 8px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--cyan); background: var(--panel); }
.dr-logrow.newest .dr-dot, .dr-logrow.open .dr-dot { background: var(--accent); }
.dr-fold { display: none; }

/* ------------------------------------------------------------ the chart head */
.chartpanel.gridmode { display: none; }
.symbox { width: 84px; height: 26px; box-sizing: border-box; padding: 0 8px; text-transform: uppercase;
  background: var(--panel2); border: 1px solid var(--line2); border-radius: 3px; color: var(--text); font: 600 13px var(--font); }
.chartwhy { font-size: 12px; color: var(--muted); }
.backgrid {
  margin-left: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px;
  padding: 0 10px; background: var(--panel2); border: 1px solid var(--accent); border-radius: 3px; color: var(--accent-ink);
  font: 600 12px var(--font); cursor: pointer; white-space: nowrap;
}
.backgrid:hover { background: var(--accent); color: var(--on-accent); }
.backgrid[hidden] { display: none; }

/* ------------------------------------------------------------ status colours */
.wt-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); flex: 0 0 auto; }
.st-qualified .wt-dot, .st-breakout .wt-dot, .st-rsi2 .wt-dot, .st-double7 .wt-dot { background: var(--gold); }
.st-traded .wt-dot, .st-above .wt-dot { background: var(--green); }
.st-held .wt-dot { background: var(--accent); }
.st-exit .wt-dot, .st-refused .wt-dot, .st-below .wt-dot { background: var(--loss); }
.st-stale .wt-dot, .st-watch .wt-dot, .st-note .wt-dot { background: var(--muted); }

/* ------------------------------------------------------------ the watch grid */
.wgrid { padding: 4px 0 12px; }
.wgrid[hidden] { display: none; }
.wg-head { display: flex; align-items: center; gap: 10px; min-height: 36px; flex-wrap: wrap; }
.wg-head h2 { margin: 0; font-size: 14px; font-weight: 700; }
.wg-count, .wg-tf { font-size: 12px; padding: 0 6px; border-radius: 9px; background: var(--panel2); line-height: 18px; }
.wg-legend { display: flex; gap: 12px; font-size: 12px; color: var(--muted); }
.wg-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.wg-fill { flex: 1; }
.wg-asof { font-size: 12px; color: var(--muted); }
.wg-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 8px; }
.wtile {
  box-sizing: border-box; padding: 8px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 4px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.wtile:hover, .wtile:focus:not(:focus-visible) { border-color: var(--line2); background: var(--panel2); outline: none; }
.wtile.st-qualified, .wtile.st-breakout, .wtile.st-rsi2, .wtile.st-double7 { border-color: var(--gold); }
.wtile.st-traded { border-color: var(--green); }
.wtile.st-held { border-color: var(--cyan); }
.wtile.st-exit, .wtile.st-refused { border-color: var(--loss); }
.wtile.st-filtered { opacity: .6; }
.wt-head { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.wt-head b { font-size: 14px; }
.wt-exp {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px;
  padding: 0; background: transparent; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); cursor: pointer;
}
.wt-exp:hover { color: var(--text); border-color: var(--muted); }
.wtile svg.cs { width: 100%; height: 92px; display: block; }
.wt-why { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.wt-st { font-weight: 700; }
.wt-line { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rvbar { margin-left: auto; }
.wstrip { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 2px; }
.wstrip[hidden] { display: none; }
.ws-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; font-size: 12px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 14px; color: var(--text); cursor: pointer;
}
.ws-chip:hover { border-color: var(--cyan); }

/* ------------------------------------------------------------ the right tab bar */
/* B50 part 3: the same look on base.html's document pages (body.railed), which carry the bar too.
   R31 B55 (Kevin 2026-10-02): the bar reads --sidebar (tokens.css: the Card colour unless the
   Side bar picker in Settings sets it), the same token the left rail reads. The three tab rules
   below used to be grouped as "body.dshell #rbar, body.railed #rbar .rtab", which gave the WHOLE
   bar on the desk page the active tab's accent tint: the grayish orange bar Kevin saw there and
   not on /settings/. Each names the tab on both chromes now. */
body.dshell #rbar, body.railed #rbar { background: var(--sidebar); border-left: 1px solid var(--line); padding: 0; gap: 0; }
body.dshell #rbar .rtab, body.railed #rbar .rtab {
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent;
  color: var(--muted); min-height: 104px; letter-spacing: .08em; font-size: 12px;
}
body.dshell #rbar .rtab:hover, body.railed #rbar .rtab:hover { color: var(--text); }
body.dshell #rbar .rtab.on, body.railed #rbar .rtab.on { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset -2px 0 0 var(--cyan); color: var(--cyan); }

/* ------------------------------------------------------------ the drawer panes */
.dpane .dp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dpane .dp-head h3 { margin: 0; padding: 0; border: 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.dp-count { font-size: 12px; padding: 0 6px; border-radius: 9px; background: var(--panel2); line-height: 18px; }
.dp-tag { margin-left: auto; font-size: 12px; color: var(--muted); }
.dp-foot { display: flex; gap: 10px; align-items: baseline; padding-top: 8px; border-top: 1px solid var(--line); font-size: 13px; }
.dp-foot:empty { display: none; }
.dp-foot span:first-child { color: var(--muted); margin-right: auto; }
/* The watch list's older cards give way to the grid's rows; its add box stays. */
#rtab-host #panel-mylist > h3, #rtab-host #panel-mylist #mylistbody, #rtab-host #panel-mylist #mynote { display: none; }
#rtab-host > .dpane + .panel { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
/* Under the position cards the day panel keeps its R meter and the halt box; its closed
   list and totals are the rail's CLOSED now. */
#rtab-host #panel-day > h3, #rtab-host #panel-day #wl, #rtab-host #panel-day #realised,
#rtab-host #panel-day #trades, #rtab-host #panel-day #totals,
#rtab-host #panel-day #rmeter .wlwrap, #rtab-host #panel-day #rmeter .finenote,
#rtab-host #panel-day #rmeter .kv[style*="margin-top:8px"] { display: none; }
.pw-row {
  display: grid; grid-template-columns: 10px 52px 1fr 64px 26px; column-gap: 6px; align-items: center;
  padding: 5px 0; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 13px;
}
.pw-row > .n { text-align: right; }
.pw-row:hover { background: var(--panel2); }
.pw-row > .pw-why { text-align: left; }
.pw-why { grid-column: 2 / -1; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-x { width: 24px; height: 22px; padding: 0; background: transparent; border: 1px solid var(--line2); border-radius: 3px; color: var(--muted); cursor: pointer; }
.pw-x:hover { color: var(--short); border-color: var(--short); }

/* Research */
.rs-card { padding: 10px; margin-bottom: 10px; background: var(--panel2); border-radius: 4px; }
.rs-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rs-top b { font-size: 15px; }
.rs-name { color: var(--muted); font-size: 12px; }
.rs-tested { margin-left: auto; font-size: 12px; color: var(--muted); }
.rs-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 6px; margin: 8px 0; }
.rs-kpis span, .pc-kpis span { display: block; font-size: 11px; color: var(--muted); }
.rs-kpis b, .pc-kpis b { font-size: 15px; font-weight: 600; }
.rs-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.rs-rules li { font-size: 12px; padding: 1px 7px; border: 1px solid var(--line2); border-radius: 10px; }
.rs-what { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.rs-sec { padding: 8px 0; border-top: 1px solid var(--line); }
.rs-sec h4, .bt-sec h4 { margin: 0 0 6px; display: flex; gap: 8px; align-items: baseline; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rs-sec h4 span, .bt-sec h4 span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.bias-long { color: var(--long); font-weight: 700 !important; }
.bias-short { color: var(--short); font-weight: 700 !important; }
.bias-both { color: var(--gold); font-weight: 700 !important; }
.sc-cells { display: flex; gap: 2px; }
.sc-cell { flex: 1; height: 8px; border-radius: 1.5px; background: var(--line2); }
.sc-cell.st-qualified, .sc-cell.st-breakout { background: var(--gold); }
.sc-cell.st-traded { background: var(--green); }
.sc-cell.st-refused { background: var(--loss); }
.rs-plan { padding: 4px 0; }
.rs-plan > span { margin-left: 8px; font-size: 12px; color: var(--muted); }
.rs-act { display: flex; justify-content: space-between; font-size: 12.5px; padding: 2px 0 2px 10px; }
.t-green { color: var(--green) !important; } .t-amber { color: var(--gold) !important; } .t-red { color: var(--loss) !important; }
.rs-bias { display: grid; grid-template-columns: 1fr auto 70px; gap: 8px; align-items: center; font-size: 13px; padding: 2px 0; }
.rs-bias > span:last-child { text-align: right; color: var(--muted); font-size: 12px; }
.rs-bias .ok { color: var(--green); font-weight: 700; }
.rs-news { list-style: none; margin: 0; padding: 0; }
.rs-news li { display: grid; grid-template-columns: 40px 1fr; gap: 6px; font-size: 12.5px; padding: 4px 0; }
.rs-news li > span:first-child { color: var(--muted); }
.rs-news a { color: var(--text); }
.rs-news em { font-style: normal; font-size: 11px; padding: 0 5px; border-radius: 3px; background: var(--panel2); color: var(--muted); }
.rs-news em.tag-held { color: var(--cyan); }

/* Position cards */
.pcard { padding: 12px; margin-bottom: 8px; background: var(--panel2); border-radius: 4px; cursor: pointer; }
.pcard.pending { opacity: .75; }
.pc-top { display: flex; align-items: baseline; gap: 8px; }
.pc-top b { font-size: 15px; }
.pc-model { font-size: 12px; color: var(--muted); }
/* B180: a close is working on the trade (floor/closing.py). */
.pc-closing { font-size: 12px; font-weight: 600; color: var(--accent-ink); padding: 1px 6px; border-radius: var(--r-pill); background: var(--info-bg); }
.pc-exitnote { font-size: 12px; color: var(--down); }
.pcard.is-closing .pc-btn[disabled] { opacity: .4; }
.pc-pl { margin-left: auto; font-size: 15px; font-weight: 600; }
.pc-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0; }
.pc-lv { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.pc-lv > span:last-child { margin-left: auto; }
.pc-bar { position: relative; height: 6px; margin: 10px 0 8px; }
.pc-red { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px 0 0 3px; background: color-mix(in srgb, var(--down) 55%, transparent); }
.pc-green { position: absolute; right: 0; top: 0; bottom: 0; border-radius: 0 3px 3px 0; background: color-mix(in srgb, var(--up) 30%, transparent); }
.pc-entry { position: absolute; top: -3px; width: 2px; height: 12px; margin-left: -1px; background: var(--gold); }
.pc-last { position: absolute; top: -5px; width: 3px; height: 16px; margin-left: -1.5px; border-radius: 1px; background: var(--text); box-shadow: 0 0 0 1px var(--ground); }
.pc-act { display: flex; align-items: center; gap: 6px; }
.pc-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 28px; padding: 0; border: 0; border-radius: 3px; background: var(--panel); color: var(--text); cursor: pointer; }
.pc-btn[disabled] { opacity: .4; cursor: not-allowed; }
.pc-btn[aria-pressed="true"] { background: var(--warn); color: var(--panel); }
.pc-hold { font-size: 11px; color: var(--warn); white-space: nowrap; }
/* R31 B89: the extended-hours change on a position card, outside regular hours only. */
.pc-ext { font-size: 11px; white-space: nowrap; }
.pc-ext.up { color: var(--up); } .pc-ext.dn { color: var(--down); }
.pc-risk { margin-left: auto; font-size: 12px; color: var(--muted); }
.pc-risk b { color: var(--text); }

/* Wake hooks (round 6, mockup tab 5): a position's own hooks, listed on its card. */
.pc-hooks { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.pc-hooks-h { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700;
              text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pc-hook-add { margin-left: auto; padding: 2px 9px; border: 1px solid var(--line2); border-radius: 3px;
               background: var(--panel); color: var(--cyan); font-weight: 700; font-size: 12px; cursor: pointer; }
.pc-hook { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12px; }
.pc-hook .hk-line { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pc-hook .hk-fired { color: var(--muted); }
.pc-hook-del { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
               width: 22px; height: 22px; border: 0; border-radius: 3px; background: none;
               color: var(--loss); cursor: pointer; }
.pc-hooks-empty { font-size: 12px; color: var(--muted); padding: 4px 0; }
/* R31 B75 part 6h: the hooks fold to one line ("2 wake hooks"); the line is the click. */
.pc-hooks-fold { flex: 1 1 auto; padding: 2px 0; border: 0; background: none; color: inherit; font: inherit;
                 letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: pointer; }
.pc-hooks-fold::after { content: " \25B8"; }
.pc-hooks.open .pc-hooks-fold::after { content: " \25BE"; }
.pc-hookscrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 60; }
.pc-hookpop { position: fixed; z-index: 61; top: 50%; left: 50%; transform: translate(-50%, -50%);
              width: min(320px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto;
              background: var(--panel); border: 1px solid var(--line2); border-radius: var(--radius);
              padding: 14px; box-shadow: var(--shadow); }
.pc-hookpop h4 { margin: 0 0 10px; font-size: 14px; }
.pc-hookpop label { display: block; font-size: 11px; color: var(--muted); margin-top: 8px; }
.pc-hookpop .hp-err { color: var(--loss); font-size: 12px; margin-top: 8px; min-height: 16px; }
.pc-hookpop .hp-act { display: flex; gap: 8px; margin-top: 12px; }
.pc-hookpop .hp-act button { flex: 1; min-height: 40px; border-radius: 4px; font-weight: 700; cursor: pointer; }
.pc-hookpop .hp-save { border: 0; background: var(--accent); color: var(--on-accent); }
.pc-hookpop .hp-cancel { border: 1px solid var(--line2); background: var(--panel2); color: var(--text); }

/* Bots */
.bt-sum { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 13px; margin-bottom: 8px; }
.bt-sum > span { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.bt-sum b { color: var(--text); }
.bt-next { margin-left: auto; }
.bt-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); flex: 0 0 auto; }
.bt-dot.s-ok, .hp-green .bt-dot { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--up) 20%, transparent); }
.bt-dot.s-late, .hp-amber .bt-dot { background: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 20%, transparent); }
.bt-dot.s-off, .hp-gray .bt-dot { background: var(--dim); }
.hp-red .bt-dot { background: var(--loss); }
.bt-health { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
/* R31 B84 (audit item 17): a health chip is a 40px target. */
.bt-health .hp { min-height: 40px; display: inline-flex; align-items: center; }
.hp { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid var(--line2); border-radius: 12px; font-size: 12px; color: var(--muted); text-decoration: none; }
.hp b { color: var(--text); font-weight: 600; }
.hp-red { border-color: var(--loss); }
.bt-sec { padding: 8px 0; border-top: 1px solid var(--line); }
.bt-row { display: grid; grid-template-columns: 1fr 58px 88px; gap: 8px; align-items: center; padding: 4px 0; font-size: 13px; }
.bt-row > span:not(:first-child) { text-align: right; }
.bt-h { font-size: 12px; color: var(--muted); }
.bt-h em { font-style: normal; font-size: 11px; padding: 0 5px; border-radius: 3px; background: var(--panel2); }
.bt-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bt-name > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.bt-name i, .bt-row i { font-style: normal; font-size: 11px; color: var(--muted); display: block; }
.bt-res { font-size: 12px; }

/* ------------------------------------------------------------ under 860px: a phone */
@media (max-width:860px) {
  body.dshell #app, html.narrownav body.dshell #app { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  body.dshell #app > .ikrail { display: block; order: 0; }
  #dhead { display: none; }
  body.dshell #app > main { grid-column: 1; grid-row: auto; order: 2; padding: 0 12px 12px; }
  #drail { order: 3; grid-column: 1; grid-row: auto; position: static; height: auto; overflow: visible; border-right: 0; border-top: 1px solid var(--line); }
  #drail-pl { display: none; }
  .dr-fold {
    display: flex; width: 100%; min-height: 44px; align-items: center; gap: 16px; padding: 0 12px;
    background: var(--panel); border: 0; color: var(--text); font: 600 13px var(--font); cursor: pointer;
  }
  .dr-fold .dr-caret { margin-left: auto; color: var(--muted); }
  #drail .dr-body { display: none; }
  #drail.unfolded .dr-body { display: block; }
  #drail.unfolded .dr-caret { transform: rotate(180deg); }
  body.dshell .deskgrid > .sidestack { display: block; }
  body.dshell .sidestack > #panel-money, body.dshell .sidestack > .dpane { display: none; }
  body.dshell #board { height: 320px; min-height: 0; }
  .dr-row { min-height: 44px; }
  .pw-row { min-height: 44px; }
  .pw-x, .pc-btn, .backgrid { min-width: 40px; min-height: 40px; }
  .pc-hook-add, .pc-hook-del { min-width: 40px; min-height: 40px; }
  .iklegend .ikl-toggle { height: 32px; }
  .iklegend .ikl-btn { width: 36px; height: 32px; }
  .dr-logrow, .rs-news li, .bt-row, .dr-kv span { font-size: 12px; }
}

/* ------------------------------------------------------------ R18n: WHO TRADES IT
   Each watch tile and row says who trades the name (the model and when it acts, or hand
   only), and Trade opens the Manual desk's ticket with the symbol. desk_panels.js whoHtml. */
.wt-who, .pw-who { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11px; line-height: 14px; color: var(--muted); }
.wt-who > span, .pw-who > span {
  flex: 1 1 auto; min-width: 0; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
}
.who-model > span { color: var(--text); }
.pw-who { grid-column: 2 / -1; padding-top: 2px; }
.wt-trade, .pw-trade {
  flex: 0 0 auto; padding: 2px 8px; border: 1px solid var(--line2); border-radius: 3px;
  color: var(--cyan); font-size: 11px; font-weight: 700; text-decoration: none;
}
.wt-trade:hover, .pw-trade:hover, .wt-trade:focus:not(:focus-visible), .pw-trade:focus:not(:focus-visible) { border-color: var(--cyan); outline: none; }
@media (max-width:860px) {
  .wt-trade, .pw-trade { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; }
}
/* R18n END */

/* ------------------------------------------------------------ R18q: ALL ACCOUNTS FIRST
   The account dropdown's All accounts row is the first choice now, a link to /desks/all/
   (templates/floor/_dhead.html): its rule sits under it instead of over it. */
/* R18q END */

/* ------------------------------------------------------------ R31: THE EMPTY CHART SAYS WHY
   Kevin's rule (round 6): no empty charts. shell.js puts this panel over the board when
   there are no bars: why, what to do, and a link when there is somewhere to go. */
#board { position: relative; z-index: 0; }
/* R31 B44: the chart canvas stays black in every theme. */
#board { background: var(--chart-bg); }
.chartempty { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center;
  background: var(--ground); color: var(--muted); font-size: 13px; }
.chartempty[hidden] { display: none; }
.chartempty b { color: var(--text); font-size: 15px; font-weight: 600; max-width: 520px; }
.chartempty span { max-width: 520px; }
.chartempty a { color: var(--accent-ink); font-weight: 600; }
/* R31 B84 (audit item 2): one line, a short reason, a "?" and one button. */
.chartempty .ce-line { display: flex; align-items: center; gap: 8px; }
.chartempty .ce-short { font-style: normal; }
.chartempty .ce-q { width: 40px; height: 40px; margin: -8px 0; padding: 0; border: 1px solid var(--line2); border-radius: 50%;
  background: none; color: var(--muted); font: 700 13px var(--font); cursor: pointer; }
.chartempty .ce-long { max-width: 420px; font-size: 12px; color: var(--muted); }
.chartempty .ce-long[hidden] { display: none; }
.chartempty .ce-acts { display: flex; gap: 10px; align-items: center; }
.chartempty .ce-day { min-height: 44px; padding: 0 18px; border: 1px solid var(--line2); border-radius: var(--r-ctl, 8px);
  background: var(--panel); color: var(--text); font: 700 14px var(--font); cursor: pointer; }

/* R31 END */

/* ------------------------------------------------------------ R31 item 6: THE MANUAL
   DESK'S OWN TILE (mockups.html tab 2): editable entry, stop and target, a live sizing
   line, and Adjust on chart / Trade. desk_panels.js manualTileHtml, manualSizing. */
.mtile .chip {
  flex: 0 0 auto; padding: 1px 7px; border-radius: 3px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .04em; border: 1px solid var(--line2);
}
.mtile .chip.long { color: var(--long); border-color: var(--long); }
.mtile .chip.short { color: var(--short); border-color: var(--short); }
.mtile .chip.crypto { color: var(--gold); border-color: var(--gold); }
.mt-levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 6px; }
.mt-levels small { display: block; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mt-levels input {
  width: 100%; box-sizing: border-box; padding: 3px 4px; font-size: 12px; background: var(--panel2);
  border: 1px solid var(--line2); border-radius: 3px; color: var(--text); font-variant-numeric: tabular-nums;
}
.mt-levels input.neg { color: var(--short); } .mt-levels input.pos { color: var(--long); }
.mt-levels input[disabled] { opacity: .55; }
.mt-levels .n { font-weight: 700; }
.mt-size { margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.mt-size.dn { color: var(--short); }
.mt-pending {
  margin-top: 6px; padding: 4px 8px; border: 1px solid var(--gold); border-radius: 3px;
  color: var(--gold); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.mt-pending button { padding: 1px 8px; font-size: 11px; }
.mt-acts { display: flex; gap: 6px; margin-top: 8px; }
.mt-acts button { flex: 1 1 0; font-size: 12px; padding: 5px 6px; }
.mt-acts .mt-trade.buy { border-color: var(--long); color: var(--long); }
.mt-acts .mt-trade.sell { border-color: var(--short); color: var(--short); }
.mt-why { white-space: normal; overflow: visible; text-overflow: initial; margin-top: 4px; }
@media (max-width:860px) {
  .mt-levels input, .mt-acts button, .mt-pending button { min-height: 40px; }
}

/* ------------------------------------------------------------ B50 part 8: THE MODEL CHIPS
   (Kevin 2026-10-02, replacing R31 item 10's sleeve cards): one line of compact chips under
   the chart, each the model's short name, its timeframe and one state tag; the live state
   is the dot's colour; the long words are the title; a tap opens the model popup.
   desk_panels.js sleeveChipHtml, loadSleeves; the phone's Crypto models card draws the same. */
.modelchips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 4px; }
/* R31 B74: the winter call, one line over the crypto chips (desk and phone). */
.wintercall { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 0 0; font-size: 13px; }
.wintercall b { font-weight: 700; color: var(--green); }
.mp-card > .wintercall { padding: 4px 14px 0; }
.wintercall.winter b { color: var(--cyan); }
.wintercall .mtag { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .06em; padding: 0 5px;
  border: 1px solid var(--gold); color: var(--gold); border-radius: 3px; }
.mchip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px 0 8px;
  background: var(--panel2); border: 1px solid var(--line2); border-radius: 14px; color: var(--text);
  font: 600 12px var(--font); cursor: pointer; white-space: nowrap;
}
.mchip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); flex: none; }
.mchip.st-watching::before { background: var(--muted); }
.mchip.st-signal::before { background: var(--gold); }
.mchip.st-intrade::before { background: var(--green); }
.mchip:hover, .mchip:focus-visible { border-color: var(--cyan); }
.mchip b { font-weight: 700; }
.mchip small { font-size: 11px; color: var(--muted); }
.mchip .mtag { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; padding: 0 5px;
  border-radius: 8px; line-height: 15px; color: var(--muted); background: var(--panel); border: 1px solid var(--line); }
.mchip .mtag.on { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.mchip .mtag.tracked { color: var(--cyan); border-color: var(--cyan); }
@media (max-width:860px) { .mchip { min-height: 40px; padding: 0 12px 0 10px; } }

/* ------------------------------------------------------------ ROUND 6 B26: THE MODELS
   BELOW THE CHART (Kevin, 2026-09-29 20:48 ET). The crypto models, the learning sleeves'
   full pills and the sleeve cards live here now, under the chart instead of pushing it below
   the fold; open by default so nothing that showed before is hidden by default. */
.modelsbelow { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 8px; }
.modelsbelow > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
  min-height: 28px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); }
.modelsbelow > summary::-webkit-details-marker { display: none; }
.modelsbelow > summary::before { content: "\25B8"; display: inline-block; font-size: 10px; transition: transform .15s; }
.modelsbelow[open] > summary::before { transform: rotate(90deg); }
.learningpills { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 2px; }
.learningpills .pill { white-space: normal; }

/* ---------------------------------------------------- round 6 B25: SAVED CHART LAYOUTS.
   A plain centered modal, Kevin's UX rule (COMMON.md 9): settings open in a popup,
   nothing extra beside the chart. Built once by static/floor/chart_layouts.js. */
.layoutpopup[hidden] { display: none; }
.layoutpopup { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100vw; height: 100vh; z-index: 650; }
.layoutscrim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .6); }
.layoutsheet { position: relative; max-width: 420px; width: calc(100vw - 32px);
  margin: 12vh auto 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card, 10px);
  box-shadow: var(--shadow); max-height: 72vh; overflow-y: auto; }
.layouthead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.layouthead h2 { margin: 0; font-size: 15px; }
.layoutclosebtn { margin-left: auto; width: 32px; height: 32px; padding: 0; background: none;
  border: none; color: var(--muted); font-size: 15px; cursor: pointer; }
.layoutrow { display: flex; align-items: center; gap: 6px; padding: 7px 2px; min-height: 40px;
  border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.layoutname { flex: 1 1 140px; font-weight: 700; font-size: 13px; }
.layouttag { display: block; font-weight: 400; font-size: 11px; color: var(--cyan); }
.layoutrow button { min-height: 32px; padding: 3px 8px; font-size: 12px; }
.layoutdel { color: var(--short); border-color: var(--short); }
.layoutsaverow { display: flex; gap: 6px; margin-top: 10px; }
.layoutsaverow input { flex: 1 1 auto; }
.layoutnote { margin: 6px 0 0; font-size: 11px; color: var(--muted); min-height: 14px; }
@media (max-width:640px) { .layoutsheet { margin-top: 8vh; max-height: 80vh; } }