/* ============================================================================
   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-rows:var(--h-top) minmax(0,1fr); grid-template-columns:minmax(0,1fr); overflow:hidden; }
/* The page runs edge to edge under a notch and a home indicator, so the
   things that live on those edges keep clear of them. */
@supports (padding:env(safe-area-inset-bottom)){
  .topbar{ padding-left:calc(var(--pad-x) + env(safe-area-inset-left)); padding-right:calc(var(--pad-x) + env(safe-area-inset-right)); }
  .tape{ padding-bottom:env(safe-area-inset-bottom); }
  .work-in{ padding-right:calc(var(--pad-x) + env(safe-area-inset-right)); }
}

/* ---- the top bar --------------------------------------------------------
   Identity on the left, the four rooms in the middle, the person's controls
   on the right. It sits on the page ground, one hairline above the work. */
.topbar{
  grid-row:1; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--s5);
  height:var(--h-top); padding:0 var(--pad-x); background:var(--bg); border-bottom:1px solid var(--line);
  position:relative; z-index:20;
}
/* The lockup: the exact symbol for the theme, then the wordmark as text —
   "Trade" in the symbol's own ink, "Seq" in its blue. Inter SemiBold, tight. */
.brand{ display:flex; align-items:center; gap:10px; justify-self:start; padding:4px 2px; border-radius:var(--r2); }
.brand .mark{ height:30px; width:auto; display:block; flex:none; }
.brand .mark-dark{ display:none; }
:root[data-theme="dark"] .brand .mark-light{ display:none; }
:root[data-theme="dark"] .brand .mark-dark{ display:block; }
.brand:hover{ text-decoration:none; opacity:.85; }
.wordmark{ font-family:var(--brand-sans); font-weight:700; font-size:21px; letter-spacing:-.03em; line-height:1; white-space:nowrap; }
.wordmark .t{ color:var(--tradeseq-ink); } .wordmark .s{ color:var(--tradeseq-blue); }

.topnav{ display:flex; align-items:stretch; gap:2px; height:var(--h-top); }
.topnav-item{
  position:relative; display:flex; align-items:center; gap:8px; padding:0 14px;
  color:var(--ink-3); font-size:14px; font-weight:500; border-radius:var(--r2) var(--r2) 0 0;
}
.topnav-item svg{ width:16px; height:16px; color:var(--ink-4); }
.topnav-item:hover{ color:var(--ink); text-decoration:none; background:var(--tint); }
.topnav-item:hover svg{ color:var(--ink-3); }
.topnav-item[aria-current]{ color:var(--ink); font-weight:600; }
.topnav-item[aria-current] svg{ color:var(--blue); }
/* the active room: a short blue rule on the bar's bottom edge, nothing else */
.topnav-item[aria-current]::after{
  content:''; position:absolute; left:12px; right:12px; bottom:-1px; height:2px; border-radius:1px; background:var(--blue);
}
.topnav-item .count{ font-size:11px; color:var(--ink-4); font-weight:500; font-variant-numeric:tabular-nums; }
.topnav-item[aria-current] .count{ color:var(--ink-3); }

.topright{ display:flex; align-items:center; gap:4px; justify-self:end; }
.topright .source{ font-size:11px; color:var(--ink-4); margin-right:8px; cursor:help; }
.tbar-btn{
  position:relative; width:36px; height:36px; display:grid; place-items:center; border-radius:var(--r2);
  color:var(--ink-3);
}
.tbar-btn svg{ width:17px; height:17px; }
.tbar-btn:hover{ background:var(--surface-2); color:var(--ink); }
.tbar-btn .badge{
  position:absolute; top:5px; right:4px; min-width:15px; height:15px; padding:0 4px; border-radius:8px;
  background:var(--red); color:#fff; font-size:9.5px; font-weight:700; display:grid; place-items:center;
  border:2px solid var(--bg); box-sizing:content-box; line-height:1;
}
.tbar-user{ margin-left:4px; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; }
.tbar-user:hover{ background:var(--surface-2); }
.tbar-user .avatar{ width:28px; height:28px; border-radius:50%; background:var(--ink); color:var(--on-ink);
  font-size:11px; font-weight:600; display:flex; align-items:center; justify-content:center; }

/* ---- the bottom tab bar: phones only ------------------------------------ */
.tabbar{ display:none; }

/* ---- 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-fill); 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:var(--plate-tx); }
.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-fill); }

/* =========================================================================
   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. The light is an SVG stroke on a
   rounded rect the size of the frame: the dash is the light, and a stroke
   follows the corners itself (see beam() in cockpit.js). The static border
   stays neutral; only the moving dash is blue. */
.board-frame{ position:relative; border-radius:var(--r3); }

.beam{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3; overflow:visible;
  --beam-hue:1,100,253; --beam-t:26s; }
.beam-s{
  x:0; y:0; width:100%; height:100%; rx:var(--r3);
  fill:none; stroke:rgb(var(--beam-hue)); stroke-linecap:round; stroke-linejoin:round;
  animation:beam-run-t1 var(--beam-t) linear infinite;
  vector-effect:non-scaling-stroke;
}
/* Each layer is a dash of length L ending at the head: dasharray "L 1-L",
   offset running from L to L-1 over one loop (the path is 1 long, so the
   loop is seamless). Lengths are fractions of the perimeter. Five tail
   layers at the same low alpha and stepped lengths sum to a ramp: 1 layer
   deep at the far tail, 5 deep at the head. The keyframes are written out
   per layer: a var() inside a keyframe does not animate. */
.beam-glow{ stroke-opacity:.09; filter:blur(6px); }
.beam-g1{ stroke-width:16px; stroke-dasharray:.14 .86; animation-name:beam-run-g1; }
.beam-g2{ stroke-width:9px;  stroke-dasharray:.06 .94; animation-name:beam-run-g2; stroke-opacity:.14; filter:blur(3px); }
.beam-tail, .beam-body{ stroke-width:2px; stroke-opacity:.15; }
.beam-t1{ stroke-dasharray:.24 .76; animation-name:beam-run-t1; }
.beam-t2{ stroke-dasharray:.17 .83; animation-name:beam-run-t2; }
.beam-t3{ stroke-dasharray:.11 .89; animation-name:beam-run-t3; }
.beam-t4{ stroke-dasharray:.065 .935; animation-name:beam-run-t4; }
.beam-t5{ stroke-dasharray:.03 .97; animation-name:beam-run-t5; stroke-opacity:.22; }
.beam-head{ stroke-width:2px; stroke:var(--beam-blue-hot); stroke-opacity:.95; stroke-dasharray:.012 .988; animation-name:beam-run-head;
  filter:drop-shadow(0 0 2px rgba(var(--beam-hue),.7)); }
@keyframes beam-run-g1{ from{ stroke-dashoffset:.14 }  to{ stroke-dashoffset:-.86 } }
@keyframes beam-run-g2{ from{ stroke-dashoffset:.06 }  to{ stroke-dashoffset:-.94 } }
@keyframes beam-run-t1{ from{ stroke-dashoffset:.24 }  to{ stroke-dashoffset:-.76 } }
@keyframes beam-run-t2{ from{ stroke-dashoffset:.17 }  to{ stroke-dashoffset:-.83 } }
@keyframes beam-run-t3{ from{ stroke-dashoffset:.11 }  to{ stroke-dashoffset:-.89 } }
@keyframes beam-run-t4{ from{ stroke-dashoffset:.065 } to{ stroke-dashoffset:-.935 } }
@keyframes beam-run-t5{ from{ stroke-dashoffset:.03 }  to{ stroke-dashoffset:-.97 } }
@keyframes beam-run-head{ from{ stroke-dashoffset:.012 } to{ stroke-dashoffset:-.988 } }

/* Reduced motion keeps a settled Rapid Blue accent and loses the travel. */
@media (prefers-reduced-motion:reduce){
  .beam-s{ animation:none; }
  .beam-glow, .beam-tail, .beam-head{ display:none; }
  .beam-body{ stroke-dasharray:none; stroke-opacity:.28; stroke-width:1.5px; filter: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:var(--tint); }
.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-fill); color:#fff; border-color:var(--red-fill); }
.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-fill); color:#fff; border-color:var(--red-fill); }
.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-top:1px solid var(--line);
  transition:background var(--t-fast) var(--ease);
}
.acct-row:first-child{ border-top:0; }
.acct-row:hover{ background:var(--surface-2); }
/* Every row has the same geometry. State is the dot, the word and the badge
   — never a coloured bar down the side. The account trading now gets the
   quietest possible tint so the eye lands on it, and nothing moves. */
.acct-row.is-trading{ background:color-mix(in srgb, var(--green) 6%, transparent); }
.acct-row.is-trading:hover{ background:color-mix(in srgb, var(--green) 10%, transparent); }

.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-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%   { background:var(--surface); }
  35%  { box-shadow:inset 0 0 0 1px var(--gold-line); background:var(--gold-bg); }
  100% { 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:var(--on-ink); 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:var(--on-ink); }
.rbtn.ghost.x:hover:not(:disabled){ background:var(--red-fill); border-color:var(--red-fill); }
/* 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); }
.flatbar .rstate{ flex:none; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:2px 7px; border-radius:var(--r1); background:rgba(11,21,39,.08); align-self:center; }

/* =========================================================================
   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:var(--scrim);
  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){
  .cmds .btn{ padding:0 10px; }
  .topnav-item{ padding:0 11px; font-size:13.5px; }
  .topnav-item .count{ display:none; }
  .topright .source{ display:none; }
}
/* A phone is an app: identity and controls stay on top, the four rooms move
   to a bottom tab bar under the thumb. */
@media (max-width:760px){
  :root{ --h-top:54px; --h-tab:56px; }
  .app{ grid-template-rows:var(--h-top) minmax(0,1fr); }
  .topbar{ grid-template-columns:auto 1fr; gap:8px; }
  .topnav{ display:none; }
  .brand .mark{ height:26px; }
  .wordmark{ font-size:19px; }
  .main{ padding-bottom:calc(var(--h-tab) + env(safe-area-inset-bottom, 0px)); }
  .tabbar{
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); position:fixed; left:0; right:0; bottom:0; z-index:30;
    height:calc(var(--h-tab) + env(safe-area-inset-bottom, 0px)); padding:0 6px env(safe-area-inset-bottom, 0px);
    background:var(--bg); border-top:1px solid var(--line);
  }
  .tab{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--ink-4); font-size:10.5px; font-weight:500; border-radius:var(--r2); position:relative; }
  .tab svg{ width:20px; height:20px; }
  .tab:hover{ text-decoration:none; }
  .tab[aria-current]{ color:var(--blue); font-weight:600; }
  .tab .count{ display:none; }
}
@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:var(--violet-50); }
.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:var(--on-ink); 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; }