/* ============================================================================
   The Cockpit — left rail, status strip, and the firm lanes.

   The lanes are the hero. Everything above them is evidence you read once and
   then stop looking at; everything below a lane is one click away. The rail
   takes as little visual ownership as navigation can while still being
   obvious, because the Cockpit is what you are here to look at.
   ========================================================================= */

.app{ height:100dvh; display:grid; grid-template-columns:var(--w-rail) 1fr; overflow:hidden; }
/* The page runs edge to edge under a notch and a home indicator, so the two
   things that live on those edges keep clear of them. */
@supports (padding:env(safe-area-inset-bottom)){
  .rail{ padding-left:calc(8px + env(safe-area-inset-left)); }
  .tape{ padding-bottom:env(safe-area-inset-bottom); }
  .work-in{ padding-right:calc(var(--pad-x) + env(safe-area-inset-right)); }
}

/* ---- left rail ---------------------------------------------------------
   It sits on the page ground, not on a slab: the work surface is white and
   comes forward, the navigation stays behind it.                          */
.rail{
  display:flex; flex-direction:column; min-height:0;
  background:var(--bg); border-right:1px solid var(--line); padding:0 10px 12px;
}
.rail-brand{ height:var(--h-mast); display:flex; align-items:center; gap:9px; padding:0 8px; flex:none; }
.rail-brand img{ height:15px; width:auto; display:block; }
.rail-brand .mark-tile{ display:none; border-radius:var(--r2); }
.rail-brand:hover{ text-decoration:none; opacity:.75; }
.rail-demo{
  font-size:9.5px; font-weight:700; letter-spacing:.1em; color:var(--ink-4);
  border:1px solid var(--line-2); border-radius:var(--r1); padding:1px 4px; cursor:help;
}

.rail-nav{ display:flex; flex-direction:column; gap:1px; margin-top:6px; }
.rail-item{
  display:flex; align-items:center; gap:10px; height:34px; padding:0 10px;
  border-radius:var(--r2); color:var(--ink-3); font-size:13.5px; font-weight:500;
  position:relative; text-align:left; width:100%;
}
.rail-item svg{ width:16px; height:16px; flex:none; color:var(--ink-4); }
.rail-item:hover{ background:var(--surface-2); color:var(--ink-2); text-decoration:none; }
.rail-item:hover svg{ color:var(--ink-3); }
.rail-item[aria-current]{
  background:var(--surface); color:var(--ink); font-weight:600;
  box-shadow:var(--lift-1), inset 0 0 0 1px var(--line);
}
.rail-item[aria-current] svg{ color:var(--blue); }
.rail-item[aria-current]::before{
  content:''; position:absolute; left:0; top:9px; bottom:9px; width:2px;
  border-radius:1px; background:var(--blue);
}
.rail-item .count{ margin-left:auto; font-size:11.5px; color:var(--ink-4); font-weight:500; }
.rail-item[aria-current] .count{ color:var(--ink-3); }

.rail-sep{ height:1px; background:var(--line); margin:10px 8px; }
.rail-foot{ margin-top:auto; padding-top:12px; }
.rail-user{ display:flex; align-items:center; gap:9px; width:100%; padding:7px 8px;
  border-radius:var(--r2); text-align:left; }
.rail-user:hover{ background:var(--surface-2); }
.rail-user .avatar{ width:26px; height:26px; border-radius:50%; background:var(--ink); color:#fff;
  font-size:10.5px; font-weight:600; display:flex; align-items:center; justify-content:center; flex:none; }
.rail-user .who{ min-width:0; }
.rail-user .who b{ display:block; font-size:12.5px; font-weight:600; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rail-user .who span{ display:block; font-size:11px; color:var(--ink-4); }

/* ---- the work column --------------------------------------------------- */
.main{ min-width:0; min-height:0; display:flex; flex-direction:column; background:var(--surface); }
.work{ flex:1 1 auto; min-height:0; overflow:auto; }
.work-in{ padding:var(--s5) var(--pad-x) var(--s6); }

/* ---- dry run: never a chip -------------------------------------------- */
.dry-bar{
  flex:none; display:flex; align-items:center; gap:10px; justify-content:center;
  padding:9px var(--pad-x); background:var(--violet); color:#fff;
  font-size:13px; font-weight:600; letter-spacing:.01em;
}
.dry-bar svg{ width:16px; height:16px; }
.dry-bar .sub{ font-weight:400; color:rgba(255,255,255,.82); }

/* ---- status strip ------------------------------------------------------
   One verdict, then the evidence for it. Not five equal chips to decode.   */
.status{
  flex:none; padding:9px var(--pad-x) 7px;
  display:grid; grid-template-columns:minmax(250px,auto) 1fr auto; gap:var(--s6);
  align-items:center;
}
.verdict{ display:flex; align-items:flex-start; gap:11px; min-width:0; }
.verdict .beacon{ width:9px; height:9px; border-radius:50%; background:var(--ink-5);
  flex:none; margin-top:6px; }
.verdict.live .beacon{ background:var(--green-400); animation:beat 2.6s var(--ease) infinite; }
.verdict.warn .beacon{ background:var(--amber-400); }
.verdict.crit .beacon{ background:var(--red); }
.verdict.dry  .beacon{ background:var(--violet); }
@keyframes beat{ 0%,72%,100%{ opacity:1 } 84%{ opacity:.28 } }
@media (prefers-reduced-motion:reduce){ .verdict.live .beacon{ animation:none } }
.verdict h1{ font-size:18px; font-weight:600; letter-spacing:-.028em; line-height:1.15;
  display:flex; align-items:center; gap:9px; }
/* A marked word, not a red field. Live trading is normal; an emergency is not. */
.exec{
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:2px 6px; border-radius:var(--r1); border:1px solid currentColor;
  line-height:1.4;
}
.exec.live{ color:var(--red); }
.exec.live:hover{ background:var(--red-50); }
.exec.dry{ color:var(--violet); }
.exec.dry:hover{ background:var(--violet-50); }
.verdict .sub{ margin-top:1px; font-size:12px; color:var(--ink-3); }
.verdict.crit h1{ color:var(--red-900); }

.evidence{ display:flex; gap:var(--s5); flex-wrap:wrap; }
.ev{ display:flex; flex-direction:column; gap:0; min-width:0; }
.ev .k{ font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-4); font-weight:600; }
.ev .v{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--ink-2); }
.ev .v .sig{ width:6px; height:6px; }
.ev .n{ font-size:11px; color:var(--ink-4); font-weight:400; }
.ev.bad .v{ color:var(--red); }
.ev.warn .v{ color:var(--amber-900); }

.status-right{ display:flex; align-items:center; gap:var(--s4); justify-self:end; }
.applied{
  display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 9px;
  border-radius:var(--r2); font-size:12px; font-weight:500;
  background:var(--green-50); color:var(--green-900);
}
.applied svg{ width:14px; height:14px; color:var(--green); }
.applied .fp{ font-size:10px; color:var(--green-900); opacity:.65; margin-left:2px; }
.applied.pending .fp{ display:none; }
.applied.pending{ background:var(--amber-50); color:var(--amber-900); }
.applied.pending svg{ color:var(--amber); }
.applied:hover{ filter:brightness(.97); }
.freshness{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-4); white-space:nowrap; }
.freshness .pulse{ width:6px; height:6px; border-radius:50%; background:var(--green-400); }
.freshness.stale{ color:var(--amber-900); }
.freshness.stale .pulse{ background:var(--amber-400); }

/* ---- the command bar --------------------------------------------------- */
.commands{
  flex:none; display:flex; align-items:center; gap:var(--s5);
  padding:2px var(--pad-x) 9px; border-bottom:1px solid var(--line);
}
.money-row{ display:flex; align-items:baseline; gap:var(--s6); flex-wrap:wrap; }
.fig{ display:flex; flex-direction:column; gap:0; }
.fig .k{ font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-4); font-weight:600; }
.fig .v{ font-size:18px; font-weight:600; letter-spacing:-.03em; line-height:1.1; }
.fig .v.sm{ font-size:15px; }
.fig .v .of{ font-size:13px; font-weight:500; color:var(--ink-4); }

.cmds{ margin-left:auto; display:flex; align-items:center; gap:7px; }
.cmds .sep{ width:1px; height:20px; background:var(--line-2); margin:0 3px; }
.btn--engine{ background:var(--plate); color:var(--plate-tx); border-color:var(--plate); font-weight:500; }
.btn--engine:hover{ background:var(--plate-3); color:#fff; }
.btn--engine svg{ color:var(--plate-blue); }

/* =========================================================================
   THE LAST BAR — proof the strategy is alive even when it is quiet
   ====================================================================== */
.lastbar{
  display:flex; align-items:center; gap:6px; margin-top:3px;
  font-size:11.5px; color:var(--ink-4); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.lastbar b{ color:var(--ink-2); font-weight:600; }
.lastbar .d{ color:var(--ink-4); }
.lastbar .ago{ color:var(--ink-4); }
.lastbar .tick{
  width:5px; height:5px; border-radius:50%; background:var(--ink-5); flex:none;
}
.lastbar.live .tick{ background:var(--green-400); animation:beat 2.6s var(--ease) infinite; }
.lastbar.live b{ color:var(--green-900); }
.lastbar.warn .tick{ background:var(--amber-400); }
.lastbar.warn b{ color:var(--amber-900); }

/* =========================================================================
   DEFAULT SETTINGS — a reminder of what a firm falls back to
   ====================================================================== */
.defsum{
  flex:none; display:flex; align-items:center; gap:0 22px;
  padding:5px var(--pad-x) 6px; border-bottom:1px solid var(--line); background:var(--bg);
}
.defsum-k{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; flex:none; }
.defsum-k > span{
  font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-4);
}
.defsum-edit{ height:22px; padding:0 7px; font-size:11px; }
.defsum-edit svg{ width:12px; height:12px; }
.defsum-grid{ display:grid; gap:1px 18px; align-items:baseline; min-width:0; }
.defsum-grid .dh{ font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-4);
  font-weight:600; white-space:nowrap; }
.defsum-grid .dv{ font-size:11.5px; font-weight:600; color:var(--ink-2); white-space:nowrap; }
.defsum-grid .dv.pend{ color:var(--amber-900); text-decoration:underline dotted; text-underline-offset:3px; }
.ds-kind{
  font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  padding:1px 6px; border-radius:var(--r1); color:var(--blue-900); background:var(--blue-50);
  display:inline-flex; align-items:center; gap:5px; justify-self:start;
}
.ds-kind.funded{ color:var(--green-900); background:var(--green-50); }
.ds-kind i{ font-style:normal; font-weight:600; opacity:.7; letter-spacing:0; }
.defsum-pend{ margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:11px;
  color:var(--amber-900); font-weight:500; white-space:nowrap; }
.defsum-pend svg{ width:13px; height:13px; color:var(--amber); }

/* Rotate and copy are the one setting a misreading is expensive on, so copy
   is the only mode that takes a colour. */
.mode{
  font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); background:var(--surface-2); padding:2px 6px; border-radius:var(--r1);
  white-space:nowrap;
}
.mode.copy{ color:#fff; background:var(--violet); }

/* =========================================================================
   NEEDS YOU — red only ever appears beside its own fix
   ====================================================================== */
.needs{ flex:none; display:flex; flex-direction:column; }
.need{
  display:flex; align-items:center; gap:10px; padding:8px var(--pad-x);
  font-size:12.5px; border-bottom:1px solid var(--line);
}
.need svg{ width:15px; height:15px; flex:none; }
.need > span{ flex:1; min-width:0; }
.need .btn{ flex:none; }
.need.crit{ background:var(--red-50); color:var(--red-900); }
.need.crit svg{ color:var(--red); }
.need.warn{ background:var(--amber-50); color:var(--amber-900); }
.need.warn svg{ color:var(--amber); }

/* =========================================================================
   THE FIRM BOARD

   A board, not a row of cards: one continuous surface ruled into columns.
   Hairlines carry the structure so no shadow has to, and the columns stretch
   to a common height, which keeps every balance, every queue and every
   footer on the same line across the whole fleet.
   ====================================================================== */
:root{ --col-w:292px; --col-gap:0px; }

.board-sec{ margin-bottom:var(--s6); }
.board-sec:last-child{ margin-bottom:var(--s4); }

.board-head{
  display:flex; align-items:baseline; gap:10px; margin-bottom:9px;
}
.board-head h2{
  font-size:12px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-2);
}
.board-note{ font-size:11.5px; color:var(--ink-4); min-width:0; }
.board-nav{ margin-left:auto; display:flex; gap:4px; }
.nav-arrow{
  width:26px; height:24px; display:grid; place-items:center; border-radius:var(--r2);
  border:1px solid var(--line-2); color:var(--ink-3); background:var(--surface);
}
.nav-arrow svg{ width:13px; height:13px; }
.nav-arrow:hover:not(:disabled){ background:var(--surface-2); color:var(--ink); }
.nav-arrow:disabled{ opacity:.3; }

/* ---- the frame, and the light that runs around it ---------------------
   The frame does not scroll and does not clip, so the light is whole on all
   four sides while the firms move inside it. Construction ported from
   Buildy's border beam: one continuous one-hue gradient, clipped to the
   border by a ring mask (mask-composite: exclude), which is what carries it
   around the corners at constant thickness. */
.board-frame{ position:relative; border-radius:var(--r3); }

.beam{ position:absolute; inset:0; pointer-events:none; z-index:3; border-radius:inherit; }
.beam i{ display:block; }

/* The ring: everything outside a 2px border is masked away, so whatever
   shape the light is, only the border sees it. */
.beam-ring{
  position:absolute; inset:0; border-radius:inherit; padding:2px;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
/* The band: the same mask, 6px wider on the outside and a little inside, so
   the halo can bleed a few pixels past the edge and no further. */
.beam-band{
  position:absolute; inset:-6px; border-radius:calc(var(--r3) + 6px); padding:13px;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}

/* THE LIGHT — one object with a head, a body and a long tail. A single hue,
   varied only in alpha and luminance, exactly as Buildy builds its wedge:
   the eye must never be able to count separate blues. The element rotates
   with the path, so "toward 100%" is the direction of travel: a long tail
   behind, the luminous head near the front, and a short fade off the nose. */
.beam-light{
  position:absolute; top:0; left:0;
  offset-rotate:auto;
  animation:beam-travel 24s linear infinite;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(10,124,255,.06) 14%,
    rgba(10,124,255,.20) 38%,
    rgba(10,124,255,.48) 62%,
    rgba(10,124,255,.85) 80%,
    var(--rnk-rapid-blue-hot) 88%,
    rgba(10,124,255,.55) 96%,
    transparent 100%);
}
.beam-core{
  width:320px; height:14px; border-radius:7px;
  offset-path:inset(1px round 6px);
}
.beam-halo{
  width:360px; height:26px; border-radius:13px;
  offset-path:inset(6px round 12px);
  filter:blur(6px); opacity:.55;
}
@keyframes beam-travel{ from{ offset-distance:0% } to{ offset-distance:100% } }

/* Reduced motion keeps a settled Rapid Blue accent and loses the travel. */
@media (prefers-reduced-motion:reduce){
  .beam .beam-light{ display:none; }
  .beam .beam-ring{ background:rgba(10,124,255,.30); }
  .beam .beam-band{ display:none; }
}

/* ---- the scroller: the ONLY thing on the page that moves sideways ------ */
.board{
  overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity; scrollbar-width:thin;
  scrollbar-color:var(--line-2) transparent;
  border:1px solid var(--line); border-radius:var(--r3); background:var(--surface);
}
.board::-webkit-scrollbar{ height:8px; }
.board::-webkit-scrollbar-track{ background:transparent; }
.board::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:4px; }
.board::-webkit-scrollbar-thumb:hover{ background:var(--line-3); }
.board:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.board.is-grabbing{ cursor:grabbing; scroll-snap-type:none; }
.board.is-grabbing .acct{ pointer-events:none; }

/* The fade is drawn only on an edge that actually has more board behind it. */
.board[data-at="start"]{ -webkit-mask-image:var(--fade-r); mask-image:var(--fade-r); }
.board[data-at="end"]{ -webkit-mask-image:var(--fade-l); mask-image:var(--fade-l); }
.board[data-at="mid"]{ -webkit-mask-image:var(--fade-b); mask-image:var(--fade-b); }
:root{
  --fade-r:linear-gradient(90deg,#000 calc(100% - 44px),transparent);
  --fade-l:linear-gradient(90deg,transparent,#000 44px);
  --fade-b:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent);
}

.board-track{
  display:grid; grid-auto-flow:column; grid-auto-columns:var(--col-w);
  align-items:stretch; column-gap:var(--col-gap); min-width:min-content;
}

/* ---- one firm lane ----------------------------------------------------- */
.col{
  display:flex; flex-direction:column; min-width:0;
  border-left:1px solid var(--line); scroll-snap-align:start;
  transition:background var(--t-fast) var(--ease);
}
.col:first-child{ border-left:0; }
.col:hover{ background:#fbfcfe; }
.col.is-down{ background:var(--red-50); }

.col-head{ position:relative; padding:9px 14px 9px; }
/* The actions sit out of the flow so the firm's own name always gets the
   same width, whether or not that firm happens to hold a position. */
.col-title{ display:flex; align-items:center; gap:7px; min-width:0; min-height:24px; }
.col-title .sig{ width:7px; height:7px; flex:none; }
.col-title .sig.dry{ background:var(--violet); }
.col-title h3{
  flex:1 1 auto; font-size:13px; font-weight:600; letter-spacing:-.02em; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.col-acts{ margin-left:auto; display:flex; align-items:center; gap:3px; flex:none; }
/* Settings is a named control, at the top of the ticket it configures. */
.col-acts .col-settings{ padding:0 9px; height:24px; font-size:11px; gap:4px; flex:none; }
.col-acts .col-settings svg{ width:12px; height:12px; }

/* ---- the firm's own flatten, named ------------------------------------- */
/* A firm holding a position always offers a way to close it, but red is
   reserved for the moment money actually moves — so the control is outlined
   at rest and fills only when the pointer is on it. */
.btn--redline{ color:var(--red); border-color:var(--red-400); background:transparent; }
.btn--redline:hover:not(:disabled){ background:var(--red); color:#fff; border-color:var(--red); }
.btn--redline svg{ color:currentColor; }
.col-flat{ gap:5px; padding:0 8px; height:24px; font-size:11px; align-self:center; }
.col-flat b{ font-weight:700; }
.rbtn.red{ color:var(--red); border-color:var(--red-400); background:var(--red-50); }
.rbtn.red:hover{ background:var(--red); color:#fff; border-color:var(--red); }
.cbtn{
  height:22px; min-width:22px; padding:0 5px; display:inline-flex; align-items:center; gap:3px;
  justify-content:center; border-radius:var(--r1); color:var(--ink-4); opacity:.5;
  transition:opacity var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.cbtn svg{ width:13px; height:13px; }
.cbtn b{ font-size:11px; font-weight:600; }
.cbtn:hover{ background:var(--surface-2); color:var(--ink); opacity:1; }
.cbtn:focus-visible{ opacity:1; }
.col:hover .cbtn{ opacity:1; }
/* A firm with an open position always offers a way to close it, but red is
   reserved for the moment money actually moves — so it arrives on hover and
   focus, not as ambient colour across a healthy board. */
.cbtn--red{ color:var(--ink-3); opacity:1; }
.cbtn--red:hover, .cbtn--red:focus-visible{ background:var(--red-50); color:var(--red); }

.col-bal{
  margin-top:5px; font-size:19px; font-weight:600; letter-spacing:-.035em;
  line-height:1.05; color:var(--ink);
}
.col-sub{ display:flex; align-items:center; gap:6px; margin-top:3px;
  font-size:10.5px; color:var(--ink-4); }
.col-sub-n{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* The account carrying the firm. Fixed height, so the rule under every
   column lands on the same line whatever the lane is doing. */
.col-active{ margin-top:7px; min-height:30px; }
.col-active b{
  display:block; font-size:11.5px; font-weight:500; color:var(--ink-2);
  letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.col-active b.mono{ font-family:var(--mono); font-size:11px; }
.col-active b.phrase{ color:var(--ink-3); }
.col-active-k{
  display:flex; align-items:center; gap:4px; margin-top:2px;
  font-size:10.5px; color:var(--ink-4); white-space:nowrap; overflow:hidden;
}
.col-active-k i{ font-style:normal; color:var(--ink-4); }
.col-active.live b{ color:var(--green-900); font-weight:600; }
.col-active.live .col-active-k{ color:var(--green); font-weight:500; }
.col-active.info b{ color:var(--blue-900); }
.col-active.info .col-active-k{ color:var(--blue); }

.col-rules{
  display:flex; flex-direction:column; gap:2px; margin-top:7px;
  padding-top:7px; border-top:1px dashed var(--line-2);
}
.col-rules .rl{ display:flex; align-items:baseline; gap:5px; white-space:nowrap; min-height:15px; }
.col-rules .rl i.gap{ margin-left:8px; }
.col-rules i{ font-style:normal; font-size:10px; color:var(--ink-4); }
.col-rules b{ font-size:11px; font-weight:600; color:var(--ink-2); }
.col-rules b em{ font-style:normal; color:var(--ink-4); font-weight:400; }
/* where the numbers come from — the first thing under the rule, in two words */
.col-src{
  font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-4); margin-bottom:1px;
}
.col-src.custom{ color:var(--violet); }

.col-alert{
  display:flex; align-items:center; gap:6px; margin:0 10px 8px; padding:5px 7px;
  border-radius:var(--r2); font-size:10.5px; line-height:1.3;
}
.col-alert svg{ width:12px; height:12px; flex:none; }
.col-alert span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.col-alert.crit{ background:var(--red-50); color:var(--red-900); }
.col-alert.warn{ background:var(--amber-50); color:var(--amber-900); }
.col-alert .elink{ margin-left:auto; flex:none; }

.col-cols{
  display:grid; grid-template-columns:minmax(0,1fr) 44px 46px 58px; column-gap:7px;
  padding:0 12px 4px 14px;
  font-size:9.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-4); border-bottom:1px solid var(--line); text-align:right;
}
.col-cols .c1{ text-align:left; }

/* ---- the queue ---------------------------------------------------------
   The row is the account. The handle and the controls sit outside the button
   so a drag is never a click and a click is never a drag. */
.col-queue{ flex:1 1 auto; padding:3px 0; }
.acct-row{
  position:relative; display:grid; grid-template-columns:14px minmax(0,1fr);
  align-items:stretch; border-left:2px solid transparent;
  transition:background var(--t-fast) var(--ease);
}
.acct-row:hover{ background:var(--surface-2); }
/* The account trading now is marked, not filled: a thin accent, its dot and
   the word. A whole row lit green reads as "selected", which it is not. */
.acct-row.is-trading{ border-left-color:var(--green-400); }
.acct-row.is-next{ border-left-color:var(--blue-100); }

.grip{
  display:grid; place-items:center; cursor:grab; color:var(--ink-5);
  opacity:0; transition:opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
/* A firm's grip is part of its header, so it is always there — it simply
   sharpens when you go near it. An account's grip appears with the row's
   other controls, in space that is always reserved for it. */
.firm-grip{ opacity:1; color:var(--ink-5); }
.col:hover .firm-grip, .col:focus-within .firm-grip{ color:var(--ink-3); }
.grip svg{ width:11px; height:11px; }
.acct-row:hover .grip, .acct-row:focus-within .grip,
.col-title:hover .grip, .col:focus-within .firm-grip{ opacity:1; }
.grip:active{ cursor:grabbing; }
.firm-grip{ width:20px; height:22px; flex:none; border-radius:var(--r1); }
.firm-grip:hover{ background:var(--surface-2); color:var(--ink-3); }

.acct{
  width:100%; display:grid; grid-template-columns:11px minmax(0,1fr) 44px 46px 58px;
  column-gap:7px; row-gap:1px; align-items:center; padding:6px 12px 6px 0; text-align:left;
}
.acct:focus-visible{ outline:2px solid var(--blue); outline-offset:-2px; }
.acct .pip{ grid-row:1; justify-self:center; }
.acct-id{
  grid-row:1; font-family:var(--mono); font-size:10.5px; letter-spacing:-.03em;
  color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.acct-risk, .acct-tp{
  grid-row:1; font-size:11px; font-weight:500; color:var(--ink-3); text-align:right;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.acct-bal{
  grid-row:1; font-size:11.5px; font-weight:600; color:var(--ink); text-align:right;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.acct-row.is-out .acct-risk, .acct-row.is-out .acct-tp{ color:var(--ink-4); }
.acct-state{
  grid-row:2; grid-column:2 / -1; display:flex; align-items:center; gap:6px;
  font-size:10.5px; color:var(--ink-4); white-space:nowrap; overflow:hidden;
}
.acct-state em{ font-style:normal; color:var(--ink-4); }
.acct-state.live{ color:var(--green); font-weight:600; }
.acct-state.info{ color:var(--blue); font-weight:500; }
.acct-state.warn{ color:var(--amber-900); }
.acct-state.crit{ color:var(--red); font-weight:500; }
.acct-state .custom{
  font-size:9.5px; font-weight:600; color:var(--violet); background:var(--violet-50);
  padding:1px 5px; border-radius:var(--r1);
}
.acct-row.is-out .acct-id{ color:var(--ink-4); }
.acct-row.is-out .acct-bal{ color:var(--ink-3); font-weight:500; }
.col-empty{ padding:14px; font-size:11px; color:var(--ink-4); }

/* ---- STARTS HERE --------------------------------------------------------
   The queue begins somewhere and that is a decision, so it gets the one warm
   colour in the product — and one deliberate sweep when it changes, never a
   permanent animation. */
.acct-row.is-start{ box-shadow:inset 2px 0 0 var(--gold); }
.acct-state .starts{
  display:inline-flex; align-items:center; gap:3px; font-size:9.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--gold-ink);
  background:var(--gold-bg); padding:1px 5px 1px 4px; border-radius:var(--r1);
}
.acct-state .starts svg{ width:10px; height:10px; }
@keyframes goldsweep{
  0%   { box-shadow:inset 2px 0 0 var(--gold); background:var(--surface); }
  35%  { box-shadow:inset 3px 0 0 var(--gold), inset 0 0 0 1px var(--gold-line); background:var(--gold-bg); }
  100% { box-shadow:inset 2px 0 0 var(--gold); background:transparent; }
}
.acct-row.just-started{ animation:goldsweep 820ms var(--ease-out) 1; }

/* ---- what you can do to an account without leaving the board ---------- */
.acct-acts{
  position:absolute; right:8px; bottom:4px; display:flex; align-items:center; gap:2px;
  opacity:0; pointer-events:none; transition:opacity var(--t-fast) var(--ease);
  background:linear-gradient(90deg,transparent,var(--surface-2) 14px);
  padding-left:18px;
}
.acct-row:hover .acct-acts, .acct-row:focus-within .acct-acts{ opacity:1; pointer-events:auto; }

.rbtn{
  height:20px; display:inline-flex; align-items:center; gap:4px; padding:0 5px;
  border-radius:var(--r1); font-size:10px; font-weight:600; color:var(--ink-3);
  border:1px solid var(--line-2); background:var(--surface);
}
.rbtn svg{ width:11px; height:11px; }
.rbtn:hover:not(:disabled){ background:var(--ink); color:#fff; border-color:var(--ink); }
.rbtn:disabled{ opacity:.32; }
.rbtn.ghost{ border-color:transparent; background:transparent; padding:0 3px; }
.rbtn.ghost:hover:not(:disabled){ background:var(--ink); color:#fff; }
.rbtn.ghost.x:hover:not(:disabled){ background:var(--red); border-color:var(--red); }
/* the routing state is a word, never a colour on its own */
.rbtn i{ width:6px; height:6px; border-radius:50%; background:var(--ink-5); flex:none; }
.rbtn.copy{ color:var(--blue-900); border-color:var(--blue-100); background:var(--blue-50); }
.rbtn.copy i{ background:var(--blue); box-shadow:0 0 0 2px var(--blue-100); }
.rbtn.queue i{ background:var(--ink-4); }
.rbtn.dormant{ color:var(--ink-4); }
.rbtn.dormant i{ background:transparent; border:1.5px solid var(--ink-5); }

/* ---- the day, in two figures ------------------------------------------ */
.col-foot{
  margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:8px 14px 9px; border-top:1px solid var(--line);
}
.ffig{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.ffig.r{ text-align:right; }
.ffig .k{
  font-size:9.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-4);
}
.ffig .v{ font-size:13px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.ffig .v .of{ font-size:11px; font-weight:500; color:var(--ink-4); }

.elink{ font-size:10.5px; color:var(--ink-4); text-decoration:underline;
  text-underline-offset:2px; padding:3px 2px; margin:-3px 0; }
.elink:hover{ color:var(--ink); }

.flatbar{ border-radius:0; padding:11px var(--pad-x); }

/* =========================================================================
   THE QUEUE PIP — the same mark in the legend and on every row

   Fill and weight before hue, so the queue survives monochrome: solid ink is
   an account that has had its turn, a ringed disc is the one trading now, a
   ring is next up, hollow is queued, green is passed, faded is retired.
   ====================================================================== */
.pip{ width:11px; height:11px; display:inline-grid; place-items:center; flex:none; }
.pip > i{ width:7px; height:7px; border-radius:50%; display:block;
  border:var(--lane-w) solid var(--lane-queued); background:transparent; }
.pip > i.trading{ border-color:var(--lane); background:var(--lane);
  box-shadow:0 0 0 2px var(--blue-100); }
.pip > i.next{ border-color:var(--lane); background:var(--surface); }
.pip > i.queued{ border-color:var(--lane-queued); background:transparent; }
.pip > i.done{ border-color:var(--lane-done); background:var(--lane-done); }
.pip > i.waiting{ border-color:var(--amber-400); background:transparent; }
.pip > i.paused{ border-color:var(--amber-400); background:var(--amber-400); }
.pip > i.passed{ border-color:var(--lane-passed); background:var(--lane-passed); }
.pip > i.retired{ border-color:var(--lane-retired); background:var(--lane-retired); opacity:.55; }


/* =========================================================================
   ACCOUNT DETAIL — this is where density belongs
   ====================================================================== */
.sheet-scrim{ position:fixed; inset:0; z-index:120; background:rgba(11,21,39,.28);
  display:flex; justify-content:flex-end; animation:fade var(--t-fast) var(--ease); }
.sheet{ width:min(600px,100%); height:100%; background:var(--surface); box-shadow:var(--lift-3);
  display:flex; flex-direction:column; animation:slide var(--t-mid) var(--ease-out); }
.sheet-head{ padding:16px 22px 14px; border-bottom:1px solid var(--line); flex:none; }
.sheet-head .row1{ display:flex; align-items:flex-start; gap:12px; }
.sheet-head h2{ font-family:var(--mono); font-size:15px; font-weight:500; letter-spacing:-.02em; }
.sheet-head .sub{ margin-top:4px; color:var(--ink-3); font-size:12.5px;
  display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.sheet-body{ flex:1 1 auto; min-height:0; overflow:auto; }
.sheet-sec{ padding:16px 22px; border-bottom:1px solid var(--line); }
.sheet-sec > .kick{ margin-bottom:11px; }
.sheet-foot{ flex:none; padding:12px 22px; border-top:1px solid var(--line);
  background:var(--surface-2); display:flex; gap:8px; align-items:center; }

.pairs{ display:grid; grid-template-columns:repeat(3,1fr); gap:13px 18px; }
.pairs.two{ grid-template-columns:repeat(2,1fr); }
.pair .k{ font-size:11px; color:var(--ink-4); margin-bottom:1px; }
.pair .v{ font-size:14px; font-weight:600; letter-spacing:-.02em; }
.pair .v.sm{ font-size:13px; font-weight:500; }
.pair .v.mono{ font-family:var(--mono); font-weight:500; }
.pair .src{ font-size:10.5px; color:var(--ink-4); margin-top:1px; }
.pair .src.own{ color:var(--violet); }

.side{ display:inline-flex; align-items:baseline; gap:5px; font-size:13px; }
.side .m{ font-size:11px; }
.side.long{ color:var(--green); }
.side.short{ color:var(--red); }
.side.flat{ color:var(--ink-4); }

.exec{ display:grid; grid-template-columns:1fr auto auto auto; gap:0 14px; font-size:12.5px; }
.exec .h{ font-size:10.5px; letter-spacing:.075em; text-transform:uppercase; color:var(--ink-4);
  font-weight:600; padding-bottom:5px; border-bottom:1px solid var(--line); }
.exec .h.r,.exec .c.r{ text-align:right; }
.exec .c{ padding:6px 0; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }
.exec .c.mono{ font-family:var(--mono); font-size:12px; }
.exec .c small{ display:block; font-size:11px; color:var(--ink-4); }

.bars{ display:flex; flex-direction:column; gap:9px; }
.bar{ display:grid; grid-template-columns:132px 1fr auto; gap:11px; align-items:center; font-size:12px; }
.bar .track{ display:block; height:5px; border-radius:3px; background:var(--surface-3); overflow:hidden; }
.bar .fill{ display:block; height:100%; border-radius:3px; background:var(--blue); }
.bar .fill.warn{ background:var(--amber-400); }
.bar .fill.crit{ background:var(--red); }
.bar .fill.ok{ background:var(--green-400); }
.bar .n{ text-align:right; color:var(--ink-2); font-variant-numeric:tabular-nums; min-width:134px; }
.bar .k{ color:var(--ink-3); }

/* ---- generic pages ----------------------------------------------------- */
.page{ flex:1 1 auto; min-height:0; overflow:auto; }
.page-in{ padding:var(--s5) var(--pad-x) var(--s9); max-width:1560px; }

.panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r3);
  overflow:hidden; margin-bottom:var(--s5); }

.grid{ width:100%; }
.grid th{ text-align:left; padding:9px 14px; font-size:10.5px; font-weight:600;
  letter-spacing:.075em; text-transform:uppercase; color:var(--ink-4);
  border-bottom:1px solid var(--line); white-space:nowrap; }
.grid th.r{ text-align:right; }
.grid td{ padding:9px 14px; border-bottom:1px solid var(--line); vertical-align:middle; white-space:nowrap; }
.grid td.wrap{ white-space:normal; }
.grid tr:last-child td{ border-bottom:0; }
.grid tbody tr:hover td{ background:var(--surface-2); }
.grid td.r{ text-align:right; }


/* ---- the tape ---------------------------------------------------------- */
.tape{ flex:none; background:var(--surface); border-top:1px solid var(--line-2);
  display:flex; flex-direction:column; max-height:44vh; }
.tape-bar{ height:34px; flex:none; display:flex; align-items:center; gap:10px;
  padding:0 var(--pad-x); font-size:12px; }
.tape-bar .kick{ flex:none; }
.tape-bar .last{ color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tape-bar .last .t{ font-family:var(--mono); font-size:11px; color:var(--ink-4); margin-right:8px; }
.tape-bar .grow{ margin-left:auto; display:flex; align-items:center; gap:10px; flex:none; }
.tape-list{ overflow:auto; border-top:1px solid var(--line); padding:4px 0 8px; }
.ev-row{ display:grid; grid-template-columns:62px 16px 1fr auto; gap:10px; align-items:baseline;
  padding:5px var(--pad-x); font-size:12.5px; color:var(--ink-2); }
.ev-row:hover{ background:var(--surface-2); }
.ev-row .t{ font-family:var(--mono); font-size:11px; color:var(--ink-4); }
.ev-row .i{ color:var(--ink-4); }
.ev-row .i svg{ width:13px; height:13px; }
.ev-row.sev-warn .i{ color:var(--amber); }
.ev-row.sev-crit .i{ color:var(--red); }
.ev-row.sev-ok .i{ color:var(--green); }
.ev-row .who{ font-family:var(--mono); font-size:11px; color:var(--ink-4); }
.ev-row.fresh{ animation:freshen var(--t-slow) var(--ease); }
@keyframes freshen{ from{ background:var(--blue-50) } }

/* ---- responsive --------------------------------------------------------
   The Cockpit is desktop software. What narrows is not the lane but the job:
   at full width it is an operating console, and below the lane grid's honest
   minimum it becomes a monitor — the verdict, the money, the lanes, and the
   control that stops all of it.
   ---------------------------------------------------------------------- */

@media (max-width:1440px){ :root{ --pad-x:var(--s5); } }
@media (max-width:1240px){
  .status{ grid-template-columns:1fr auto; row-gap:12px; }
  .evidence{ grid-column:1 / -1; order:3; }
  .status-right{ order:2; }
}
@media (max-width:1080px){
  :root{ --w-rail:60px; }
  .rail{ padding:0 8px 12px; align-items:center; }
  .rail-brand{ padding:0; justify-content:center; }
  .rail-demo, .rail-item span, .rail-item .count, .rail-user .who{ display:none; }
  .rail-brand .mark-wide{ display:none; }
  .rail-brand .mark-tile{ display:block; height:24px; width:24px; }
  .rail-item{ justify-content:center; padding:0; width:42px; }
  .rail-item[aria-current]::before{ left:-8px; }
  .rail-user{ justify-content:center; padding:7px 0; }
  .cmds .btn{ padding:0 10px; }
}
@media (max-width:1240px){
  :root{ --col-w:280px; }
  .col-title h3{ font-size:12.5px; }
  .col-acts .col-settings{ padding:0 7px; }
  .firm-grip{ width:16px; }
}
@media (max-width:900px){
  .commands{ flex-wrap:wrap; row-gap:12px; }
  .cmds{ margin-left:0; width:100%; }
  .legend{ gap:5px 12px; }
  .tape{ display:none; }

  /* A finger, not a trackpad: the board keeps scrolling sideways but the
     columns get wide enough to stay readable one at a time. */
  :root{ --col-w:286px; }
  .board{ scroll-snap-type:x mandatory; }
}
@media (max-width:640px){
  :root{ --pad-x:14px; --col-w:274px; }
  /* The phone is for checking: the verdict, the money, the danger control,
     then the lanes. One column, sentences that wrap, and no control that is
     only a glyph. */
  .status{ grid-template-columns:minmax(0,1fr); row-gap:8px; padding-bottom:6px; }
  .verdict{ flex-wrap:nowrap; }
  .verdict .beacon{ margin-top:5px; }
  .verdict h1{ flex-wrap:wrap; font-size:17px; }
  .lastbar{ flex-wrap:wrap; white-space:normal; }
  .status-right{ order:2; justify-self:start; gap:10px; }
  .evidence{ order:3; gap:8px 14px; }
  .ev .k{ font-size:9.5px; }
  .ev .v{ font-size:12px; }
  .ev .n{ display:none; }
  .commands{ flex-wrap:wrap; row-gap:10px; padding-top:2px; }
  .money-row{ gap:8px 18px; width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fig .v{ font-size:16px; }
  .fig .v .of{ font-size:11px; }
  .cmds{ margin-left:0; width:100%; display:grid; grid-template-columns:1fr 1fr; gap:6px; }
  .cmds .sep{ display:none; }
  .cmds .btn{ padding:0 8px; justify-content:center; height:34px; }
  .cmds .label{ display:inline; font-size:12px; }
  .btn--engine{ order:4; }
  /* the defaults table keeps its columns and scrolls sideways under a finger */
  .defsum{ flex-wrap:wrap; gap:6px 12px; }
  .defsum-k{ flex-direction:row; align-items:center; gap:10px; width:100%; }
  .defsum-grid{ width:100%; overflow-x:auto; padding-bottom:2px; }
  .defsum-pend{ margin-left:0; }
  .sheet{ width:100%; }
  .pairs{ grid-template-columns:repeat(2,1fr); }
  .board-note{ display:none; }
  .tape{ display:none; }
  /* a thumb-width column shows risk and balance; take profit is one tap away */
  .acct{ grid-template-columns:11px minmax(0,1fr) 44px 58px; }
  .col-cols{ grid-template-columns:minmax(0,1fr) 44px 58px; }
  .acct-tp, .col-cols span:nth-child(3){ display:none; }
}

/* =========================================================================
   TOUCH

   The visual design is sized for a pointer. A finger needs more, so on a
   coarse pointer small controls grow a hit area around themselves.

   Only controls that stand ALONE get the invisible kind. Two icon buttons
   sitting 2px apart cannot both claim 44px without one of them swallowing
   taps aimed at the other — which is worse than a small target, because the
   wrong thing happens instead of nothing. Clustered controls grow for real,
   and the space around them grows with them.
   ====================================================================== */
@media (pointer:coarse){
  :root{ --col-w:286px; }
  .nav-arrow, .elink, .btn--sm, .exec, .applied{ position:relative; }
  .nav-arrow::after, .elink::after, .btn--sm::after, .exec::after, .applied::after{
    content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:max(100%, 44px); height:max(100%, 44px);
  }
  /* clustered: real size, real gaps — and the column widens to pay for them,
     so a firm's name never loses room to a finger. */
  .col-acts{ gap:6px; top:8px; right:8px; }
  .cbtn{ height:30px; min-width:30px; opacity:1; }
  .col-acts .col-settings{ height:30px; padding:0 10px; }
  .firm-grip{ width:30px; height:30px; }
  /* Finger-sized controls will not share a line with a firm's name on a
     phone, and the name is not what gives way. Every ticket wraps the same,
     so the headers still line up across the board. */
  .col-title{ flex-wrap:wrap; }
  .col-acts{ width:100%; justify-content:flex-end; margin:4px 0 0; }
  .col-title h3{ font-size:13px; }
  .qmove{ width:30px; height:30px; }

  /* The board is scrolled by dragging it, so a press must not start a text
     selection instead. */
  .board{ -webkit-user-select:none; user-select:none; }
  .acct{ padding-top:9px; padding-bottom:9px; }
}

/* A firm column being dragged past shows where it would land. */
.col.drop-here{ box-shadow:inset 3px 0 0 var(--blue); background:var(--blue-50); }

/* =========================================================================
   TURNING A FIRM TICKET OVER

   The card is one physical object with two faces. Its footprint never
   changes, so turning one over never moves the board. The rotation is driven
   from JavaScript with the Web Animations API and only when the flip state
   actually changes — a repaint re-renders the card already turned, so the
   simulation can tick all it likes and the card stays where it is.
   ====================================================================== */
.col{ perspective:1500px; }
.col-card{
  position:relative; flex:1 1 auto; min-height:0; display:flex;
  transform-style:preserve-3d; will-change:transform;
}
.col-card.is-flipped{ transform:rotateY(180deg); }
.face{
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  display:flex; flex-direction:column; min-width:0; width:100%;
}
.face.front{ position:relative; }
.face.back{
  position:absolute; inset:0; transform:rotateY(180deg);
  background:var(--surface); overflow:hidden;
}
/* While a card is turning, the board must not clip it into a flat rectangle. */
.board.is-turning{ overflow:visible; }
.col.is-flipped{ z-index:2; }

/* ---- the back --------------------------------------------------------- */
.back-head{
  flex:none; display:flex; align-items:flex-start; gap:9px; padding:12px 14px 10px;
  border-bottom:1px solid var(--line);
}
.back-x{ flex:none; padding:0 8px 0 5px; }
.back-x svg{ width:12px; height:12px; }
.back-tt{ min-width:0; }
.back-tt b{ display:block; font-size:13.5px; font-weight:600; letter-spacing:-.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.back-tt b.mono{ font-family:var(--mono); font-size:11.5px; letter-spacing:-.03em; }
.back-tt span{ display:flex; align-items:center; gap:5px; margin-top:2px;
  font-size:10.5px; color:var(--ink-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.back-body{ flex:1 1 auto; min-height:0; overflow:auto; padding:10px 14px 14px; }
.bkick{
  font-size:9.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-4); margin:12px 0 7px;
}
.bkick:first-child{ margin-top:2px; }
.bkick .dim{ font-weight:500; letter-spacing:0; text-transform:none; font-size:10.5px; }

.bmodes{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.bmodes.three{ grid-template-columns:1fr 1fr 1fr; }
.bmode{
  text-align:left; padding:8px 10px; border:1px solid var(--line-2); border-radius:var(--r2);
  background:var(--surface);
}
.bmode b{ display:flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; color:var(--ink-2); }
.bmode span{ display:block; margin-top:3px; font-size:10px; color:var(--ink-4); line-height:1.45; }
.bmode:hover{ background:var(--surface-2); }
.bmode.on{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.bmode.on b{ color:var(--ink); }
.bmode.copy.on{ border-color:var(--violet); box-shadow:inset 0 0 0 1px var(--violet); }
.bmode.copy.on b{ color:var(--violet); }
.bmode.r-copy.on{ border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue); }
.bmodes.three .bmode{ padding:7px 8px; }
.bmodes.three .bmode b{ font-size:10.5px; }

.bgrid{ display:grid; grid-template-columns:1fr 1fr; gap:9px 10px; }
.bfield{ min-width:0; }
.blbl{ display:block; font-size:10.5px; color:var(--ink-3); margin-bottom:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bfield .inp{ width:100%; height:29px; font-size:12px; }
.bfield.own .inp{ border-color:var(--violet); background:#faf9ff; }
.bsrc{ display:flex; align-items:center; gap:5px; margin-top:2px; font-size:9.5px; flex-wrap:wrap; }
.bsrc .inherit{ color:var(--ink-4); }
.bsrc b{ color:var(--violet); font-weight:600; }
.bsrc span{ color:var(--ink-4); }

/* trades before advancing: five explicit choices, not a number box */
.tsel{ display:flex; gap:3px; }
.tbtn{
  flex:none; height:29px; min-width:26px; padding:0 6px; border-radius:var(--r1);
  border:1px solid var(--line-2); font-size:11px; font-weight:600; color:var(--ink-3);
  background:var(--surface);
}
.tbtn:last-child{ flex:1; font-weight:500; font-size:10px; }
.tbtn:hover{ background:var(--surface-2); color:var(--ink); }
.tbtn.on{ background:var(--ink); color:#fff; border-color:var(--ink); }

.bnote{ margin-top:8px; font-size:10.5px; color:var(--ink-4); line-height:1.5; }
.bseq{ display:flex; gap:7px; align-items:flex-start; margin:0 0 8px; padding:7px 9px; border-radius:var(--r2);
  background:var(--violet-50); font-size:10.5px; color:var(--ink-3); line-height:1.45; }
.bseq svg{ width:13px; height:13px; color:var(--violet); flex:none; margin-top:1px; }
.bseq b{ color:var(--violet); }
.bnote b{ color:var(--ink-2); }
.btoggle{ display:flex; align-items:flex-start; gap:8px; margin-top:12px; font-size:11px;
  color:var(--ink-3); line-height:1.45; cursor:pointer; }
.btoggle input{ margin-top:1px; accent-color:var(--blue); width:14px; height:14px; flex:none; }
.btoggle b{ color:var(--ink-2); }
.badv{ display:inline-flex; align-items:center; gap:3px; margin-top:12px; font-size:11px; }
.badv svg{ width:11px; height:11px; }

.bsave{
  flex:none; display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:9px 12px; border-top:1px solid var(--line); background:var(--bg);
}
.bsave-tx{ flex:1; min-width:96px; }
.bsave-tx b{ display:flex; align-items:center; gap:4px; font-size:10.5px; font-weight:600; }
.bsave-tx svg{ width:12px; height:12px; }
.bsave-tx .dirty{ color:var(--violet); }
.bsave-tx .done{ color:var(--green-900); }
.bsave-tx .idle{ color:var(--ink-4); font-weight:500; }
.bsave-tx .warnline{ font-size:10px; }
.bsave .btn{ flex:none; }
/* the receipt, after a save, before the card turns back */
.bsave.just-saved{ background:var(--green-50); }
.bsave.just-saved .done{ color:var(--green); }

/* =========================================================================
   PICKING SOMETHING UP AND PUTTING IT DOWN

   Drag starts from a handle and nowhere else, so a swipe anywhere on the
   board still scrolls the board. What you picked up lifts; where it will
   land is drawn before you let go; the things in between move out of the
   way; and when it lands it says so.
   ====================================================================== */
.grip{ cursor:grab; touch-action:none; }
.grip:active{ cursor:grabbing; }
body.is-dragging, body.is-dragging *{ cursor:grabbing !important; user-select:none; }

/* Where it came from reads as an empty slot, not a ghost of itself — a
   neighbour sliding over a half-visible copy is unreadable mush. */
.acct-row.is-lifted, .col.is-lifted{ position:relative; }
.acct-row.is-lifted > *, .col.is-lifted > *{ visibility:hidden; }
.acct-row.is-lifted::after, .col.is-lifted::after{
  content:''; position:absolute; inset:2px; border-radius:var(--r2);
  background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line-2);
}
.acct-row, .col{ transition:transform 170ms var(--ease-out); }
body.is-dragging .acct-row, body.is-dragging .col{ transition:transform 170ms var(--ease-out); }

/* the thing under the cursor */
.drag-ghost{
  position:fixed; z-index:400; pointer-events:none; top:0; left:0;
  padding:8px 11px; border-radius:var(--r3); background:var(--surface);
  border:1px solid var(--line-2); box-shadow:var(--lift-3);
  transform:scale(1.02); transform-origin:8px 12px;
  animation:lift 140ms var(--ease-out);
}
@keyframes lift{ from{ transform:scale(.98); opacity:.5 } to{ transform:scale(1.02); opacity:1 } }
.drag-ghost b{ display:block; font-size:11.5px; font-weight:600; color:var(--ink); }
.drag-ghost b.mono{ font-family:var(--mono); font-size:11px; letter-spacing:-.03em; }
.drag-ghost span{ display:block; margin-top:1px; font-size:10.5px; color:var(--ink-4); }

/* where it will land */
.drop-line{
  position:fixed; z-index:390; pointer-events:none;
  display:flex; align-items:center; gap:6px;
}
/* The label sits at the head of the line, not its middle, so the ghost under
   the cursor never covers the one word that says what will happen. */
.drop-line::before{ content:''; flex:0 0 10px; height:2px; background:var(--blue); border-radius:1px; }
.drop-line::after{ content:''; flex:1; height:2px; background:var(--blue); border-radius:1px; }
.drop-line b{
  font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:var(--blue); padding:2px 6px; border-radius:var(--r1); white-space:nowrap;
}
.drop-line.vertical{ flex-direction:column; }
.drop-line.vertical::before{ flex:0 0 10px; width:2px; height:auto; }
.drop-line.vertical::after{ width:2px; height:auto; flex:1; }

/* it landed */
@keyframes settled{
  0%   { box-shadow:inset 0 0 0 2px var(--blue), inset 0 0 0 999px var(--blue-50); }
  100% { box-shadow:inset 0 0 0 2px transparent, inset 0 0 0 999px transparent; }
}
.acct-row.just-moved, .col.just-moved{ animation:settled 620ms var(--ease) 1; }
.acct-row.is-start.just-moved{ animation:goldsweep 820ms var(--ease-out) 1; }

/* the queue position, which is the thing that changes when you move a row */
.qn{
  display:grid; place-items:center; font-size:9.5px; font-weight:600; color:var(--ink-4);
  font-variant-numeric:tabular-nums;
}
.acct-row{ grid-template-columns:14px 14px minmax(0,1fr); }
.acct-row.is-trading .qn{ color:var(--green-900); font-weight:700; }

/* the explicit Settings control on a row and in a footer */
.col-settings{ margin-left:auto; }
.rbtn svg + span{ margin-left:1px; }

@media (prefers-reduced-motion:reduce){
  .col-card, .acct-row, .col{ transition:none !important; }
  .drag-ghost{ animation:none; }
  .acct-row.just-moved, .col.just-moved{ animation:none;
    outline:2px solid var(--blue); outline-offset:-2px; }
}
.bfield.wide{ grid-column:1 / -1; }