/* Layout for the live desk. The brand tokens come from brand.css untouched —
   the accent, the weight-300 headings, the hairline rules, the dark ground.
   Only the arrangement is new: chart left, the notes that are the actual
   product on the right, always visible. */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: #050810; color: var(--text);
  font-size: 13px; overflow: hidden;
  display: flex; flex-direction: column; height: 100%;
}

/* ── top bar ─────────────────────────────────────────────────────── */
.top {
  display: flex; align-items: center; gap: 22px;
  padding: 0 16px; height: 52px; flex: none;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.015);
}
.brand b { font-weight: 600; letter-spacing: 0.06em; }
.brand span { color: var(--text3); font-weight: 300; margin-left: 6px; }

.tfs, .tools { display: flex; gap: 4px; }
.tfbtn, .tool {
  background: transparent; border: 1px solid var(--border);
  color: var(--text2); border-radius: var(--radius-sm);
  padding: 5px 10px; cursor: pointer; font: inherit; line-height: 1;
}
.tool { font-size: 15px; min-width: 32px; }
.tfbtn:hover, .tool:hover { border-color: var(--border2); color: var(--text); }
.tfbtn.on, .tool.on {
  border-color: var(--amber); color: var(--amber); background: var(--amberBg);
}
.tool.danger:hover { border-color: #ff4560; color: #ff4560; }

.stat { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.me { color: var(--text3); font-weight: 300; }
.me b { font-family: var(--mono); font-weight: 600; }

.livepill {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; color: var(--text2);
}
.livepill.up { color: #00d48a; } .livepill.down { color: #ff4560; }
.livepill.off { color: var(--text3); }
.dotlive {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  animation: pulse 2s infinite;
}
@keyframes pulse { 50% { opacity: 0.25; } }

.presence { display: flex; gap: 10px; font-weight: 300; }
.presence .alone { color: var(--text3); }
.presence .who { display: inline-flex; align-items: center; gap: 5px; }
.presence .who i {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; animation: pulse 2s infinite;
}

.syncerr {
  flex: none;
  padding: 7px 16px; background: rgba(255,69,96,0.12);
  border-bottom: 1px solid rgba(255,69,96,0.3); color: #ff8fa0;
}

/* ── main split ──────────────────────────────────────────────────── */
.layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-rows: minmax(0, 1fr);      /* or the chart pushes the page */
  flex: 1; min-height: 0;
}
.chartwrap { position: relative; min-width: 0; }
#chart { position: absolute; inset: 0; }
#overlay {
  position: absolute; inset: 0;
  z-index: 2;                 /* Lightweight Charts paints its canvas at 1 */
  pointer-events: none;
}
#overlay.drawing { pointer-events: auto; cursor: crosshair; }
.hint {
  position: absolute; left: 12px; bottom: 12px; z-index: 3;
  color: var(--text2); background: rgba(5,8,16,0.8);
  padding: 5px 9px; border-radius: var(--radius-sm); font-weight: 300;
}

/* ── notes ───────────────────────────────────────────────────────── */
.side {
  border-left: 1px solid var(--border); display: flex; flex-direction: column;
  min-height: 0; background: rgba(255,255,255,0.012);
}
.sidehead {
  display: flex; align-items: baseline; gap: 10px;
  padding: 14px 16px 0; flex: none;
}
.sidehead h2 { margin: 0; font-size: 17px; font-weight: 300; }
.count { color: var(--text3); font-family: var(--mono); font-size: 11px; }
.sidesub {
  margin: 6px 16px 12px; color: var(--text3); font-weight: 300;
  line-height: 1.5; flex: none;
}
.notes { overflow-y: auto; padding: 0 16px 16px; min-height: 0; }
.empty { color: var(--text3); font-weight: 300; line-height: 1.6; }

.note {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 12px; margin-bottom: 8px; cursor: pointer;
  transition: border-color .15s;
}
.note:hover { border-color: var(--border2); }
.note header {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.note .pat { font-weight: 400; }
.note .tf, .note .st {
  font-family: var(--mono); font-size: 10px; color: var(--text3);
  border: 1px solid var(--border); border-radius: 3px; padding: 1px 4px;
}
.note .dir {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  padding: 1px 5px; border-radius: 3px;
}
.note .dir.long { color: #00d48a; background: rgba(0,212,138,0.12); }
.note .dir.short { color: #ff4560; background: rgba(255,69,96,0.12); }
.st-won { color: #00d48a !important; border-color: rgba(0,212,138,0.4) !important; }
.st-lost { color: #ff4560 !important; border-color: rgba(255,69,96,0.4) !important; }
.st-triggered { color: var(--amber) !important; border-color: var(--amber) !important; }

.rails {
  font-family: var(--mono); font-size: 11px; color: var(--text2);
  margin-bottom: 5px;
}
.wf, .iv { font-weight: 300; line-height: 1.5; margin-bottom: 3px; }
.wf span, .iv span {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.05em; margin-right: 5px;
}
.wf span { color: var(--amber); }
.iv span { color: #ff8fa0; }
.nt { margin: 5px 0 0; color: var(--text3); font-weight: 300; line-height: 1.5; }

/* ── the note form ───────────────────────────────────────────────── */
.annot {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: rgba(2,4,9,0.72); backdrop-filter: blur(3px);
}
.annot[hidden] { display: none !important; }
.annbox {
  width: min(560px, calc(100vw - 32px)); max-height: 90vh; overflow-y: auto;
  background: #0a0f1a; border: 1px solid var(--border2);
  border-radius: var(--radius); padding: 22px 24px;
}
.annbox h3 { margin: 0 0 4px; font-size: 20px; font-weight: 300; }
.annsub { margin: 0 0 16px; color: var(--text3); font-weight: 300; line-height: 1.55; }

.annbox label {
  display: block; margin-bottom: 11px; color: var(--text2); font-weight: 300;
}
.annbox input, .annbox textarea {
  display: block; width: 100%; margin-top: 4px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text);
  padding: 7px 9px; font: inherit;
}
.annbox select {
  display: block; width: 100%; margin-top: 4px;
  background: #0a0f1a; border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text);
  padding: 7px 9px; font: inherit;
}
.annbox input:focus, .annbox select:focus, .annbox textarea:focus {
  outline: none; border-color: var(--amber);
}
.annbox input[name="entry"], .annbox input[name="stop"],
.annbox input[name="target"] { font-family: var(--mono); }
.grid2 { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.annbox .status { margin-top: 4px; }
.annwarn { color: #ff8fa0; min-height: 16px; margin: 4px 0; font-weight: 300; }

.annrow { display: flex; gap: 8px; justify-content: flex-end; }
.annrow button {
  border-radius: var(--radius-sm); padding: 8px 16px; cursor: pointer;
  font: inherit; border: 1px solid var(--border2);
}
.ghost { background: transparent; color: var(--text2); }
.ghost:hover { color: var(--text); }
.primary { background: var(--amber); border-color: var(--amber); color: #04121a; font-weight: 600; }
.primary span { opacity: 0.6; font-weight: 400; margin-left: 6px; font-size: 11px; }

/* ── who are you ─────────────────────────────────────────────────── */
.whobox {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: #050810;
}
.whobox[hidden] { display: none !important; }
.whocard {
  width: min(420px, calc(100vw - 32px)); text-align: center;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 32px;
}
.whocard h1 { font-size: 24px; font-weight: 300; margin: 0 0 8px; }
.whocard p { color: var(--text3); font-weight: 300; line-height: 1.6; margin: 0 0 20px; }
.whorow { display: flex; gap: 10px; margin-bottom: 18px; }
.wbtn {
  flex: 1; padding: 12px; border-radius: var(--radius-sm); cursor: pointer;
  background: transparent; border: 1px solid var(--border2);
  color: var(--text); font: inherit; font-size: 15px;
}
.wbtn.pascal:hover { border-color: #35baf2; color: #35baf2; }
.wbtn.marco:hover  { border-color: #f5a623; color: #f5a623; }
.klab { display: block; text-align: left; color: var(--text3); font-weight: 300; }
.klab span { opacity: 0.7; }
.klab input {
  width: 100%; margin-top: 5px; padding: 7px 9px; font: inherit;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text);
}

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; grid-template-rows: 55% 45%; }
  .side { border-left: none; border-top: 1px solid var(--border); }
}

/* ── locked out, and the way back ────────────────────────────────── */

/* The identity label is a button now, not a caption: picking a name used to
   be a one-way door, with no route back to the key prompt. */
button.me {
  background: transparent; border: 1px solid transparent; font: inherit;
  color: var(--text3); cursor: pointer; padding: 4px 8px;
  border-radius: var(--radius-sm);
}
button.me:hover { border-color: var(--border2); }
button.me b { font-family: var(--mono); font-weight: 600; }

.whowarn {
  margin: 0 0 16px !important; padding: 9px 11px; text-align: left;
  color: #ff8fa0; background: rgba(255,69,96,0.10);
  border: 1px solid rgba(255,69,96,0.28); border-radius: var(--radius-sm);
  line-height: 1.5;
}
.whowarn[hidden] { display: none !important; }

/* Whoever this browser already was, so re-entering a key is one click. */
.wbtn.known { border-color: var(--border2); background: rgba(255,255,255,0.04); }
.wbtn.pascal.known { border-color: #35baf2; color: #35baf2; }
.wbtn.marco.known  { border-color: #f5a623; color: #f5a623; }
.kfoot {
  margin: 8px 0 0 !important; text-align: left; color: var(--text3);
  font-weight: 300; line-height: 1.5; font-size: 12px;
}
.wbtn:disabled, .klab input:disabled { opacity: 0.5; cursor: default; }

/* ── patterns ────────────────────────────────────────────────────── */
.groupbtn {
  background: transparent; border: 1px solid var(--border2);
  color: var(--text2); border-radius: var(--radius-sm);
  padding: 5px 12px; cursor: pointer; font: inherit; line-height: 1;
}
.groupbtn:hover { color: var(--text); border-color: var(--text3); }
.groupbtn.open {
  border-color: var(--amber); color: var(--amber); background: var(--amberBg);
}

/* One card per setup, not per line. */
.pat-card { border-color: var(--border2); }
.pat-card .members {
  font-family: var(--mono); font-size: 10px; color: var(--text3);
  margin-top: 6px;
}
.note .who-dot {
  width: 7px; height: 7px; border-radius: 50%; display: inline-block;
  background: currentColor; flex: none;
}
.ungrouped-head {
  color: var(--text3); font-weight: 300; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: 14px 0 7px; padding-top: 10px; border-top: 1px solid var(--border);
}

/* ── indicators ──────────────────────────────────────────────────── */
.inds { display: flex; gap: 4px; }
.ind {
  background: transparent; border: 1px solid var(--border);
  color: var(--text3); border-radius: var(--radius-sm);
  padding: 5px 9px; cursor: pointer; font: inherit; line-height: 1;
  font-size: 12px;
}
.ind:hover { color: var(--text2); border-color: var(--border2); }
.ind.on {
  color: var(--ink); border-color: var(--ink);
  background: color-mix(in srgb, var(--ink) 10%, transparent);
}

/* ── pattern card controls ───────────────────────────────────────── */
.sidehead #newGroup { margin-left: auto; }
.note.is-hidden { opacity: 0.45; }
.note .by {
  margin-left: auto; color: var(--text3); font-family: var(--mono);
  font-size: 10px;
}
.ctl { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 8px; }
.cbtn {
  background: transparent; border: 1px solid var(--border);
  color: var(--text3); border-radius: var(--radius-sm);
  padding: 3px 7px; cursor: pointer; font: inherit; font-size: 11px; line-height: 1.3;
}
.cbtn:hover { color: var(--text); border-color: var(--border2); }
.cbtn.danger:hover { color: #ff4560; border-color: rgba(255,69,96,0.5); }
.cclr {
  width: 26px; height: 22px; padding: 0; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: transparent; cursor: pointer;
}
.tfrow, .grprow {
  display: flex; flex-wrap: wrap; gap: 3px; align-items: center; margin-top: 6px;
}
.tfrow > span, .grprow > span {
  font-family: var(--mono); font-size: 9.5px; color: var(--text3);
  text-transform: uppercase; letter-spacing: 0.05em; margin-right: 3px;
}
.tfchip {
  background: transparent; border: 1px solid var(--border); color: var(--text3);
  border-radius: 3px; padding: 1px 5px; cursor: pointer;
  font-family: var(--mono); font-size: 9.5px; line-height: 1.5;
}
.tfchip.on { color: var(--amber); border-color: var(--amber); background: var(--amberBg); }
.grprow select {
  background: #0a0f1a; border: 1px solid var(--border);
  color: var(--text2); border-radius: var(--radius-sm); padding: 2px 5px;
  font: inherit; font-size: 11px;
}

/* ── groups of patterns ──────────────────────────────────────────── */
.grp { border-left: 2px solid var(--border2); padding-left: 8px; margin-bottom: 10px; }
.grp-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.grp-head b { font-weight: 400; }
.grp-eye, .grp-x {
  background: transparent; border: none; color: var(--text3);
  cursor: pointer; font: inherit; font-size: 11px; padding: 2px 4px;
}
.grp-eye:hover { color: var(--text); }
.grp-x:hover { color: #ff4560; }
.grp-n { font-family: var(--mono); font-size: 10px; color: var(--text3); }

/* ── tabs ────────────────────────────────────────────────────────
   A strip of browser tabs directly under the toolbar. It governs the chart AND
   the notes, so it spans the whole desk rather than sitting over one half. */
.tabs {
  flex: none; display: flex; gap: 1px; align-items: stretch;
  padding: 0 10px; background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--border); overflow-x: auto;
  min-height: 34px;
}
.tab {
  background: transparent; border: 1px solid transparent; border-bottom: none;
  color: var(--text3); cursor: pointer; font: inherit; font-size: 12px;
  padding: 6px 10px 5px; margin-top: 3px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  max-width: 200px;
}
.tab:hover { color: var(--text2); background: rgba(255,255,255,0.04); }
.tab.on {
  color: var(--text); background: #050810;
  border-color: var(--border2); border-bottom-color: #050810;
  margin-bottom: -1px;                    /* sit ON the rule, like a real tab */
}
.tab-n { font-family: var(--mono); font-size: 9.5px; opacity: 0.55; }
.tab-x {
  opacity: 0; font-size: 11px; padding: 0 3px; border-radius: 3px;
  line-height: 1;
}
.tab:hover .tab-x, .tab.on .tab-x { opacity: 0.5; }
.tab-x:hover { opacity: 1; color: #ff4560; background: rgba(255,69,96,0.15); }
.tab-add {
  font-size: 15px; padding: 4px 11px; color: var(--text3);
  align-self: center; margin-top: 0;
}
.tab-add:hover { color: var(--amber); }

/* ── groups: foldable, droppable, and visible when empty ─────────── */
.grp {
  border: 1px solid transparent; border-radius: var(--radius);
  padding: 2px 6px 2px; margin-bottom: 8px; transition: border-color .12s, background .12s;
}
.grp:not(.bare) { border-color: var(--border); background: rgba(255,255,255,0.015); }
.grp.over { border-color: var(--amber); background: var(--amberBg); }
.grp.shut .grp-body { display: none; }
.grp.bare { padding-left: 0; padding-right: 0; }

.grp-head {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 2px; margin-bottom: 2px;
}
.grp-head.bare-head { color: var(--text3); }
.grp-fold {
  background: transparent; border: none; color: var(--text3);
  cursor: pointer; font: inherit; font-size: 11px; padding: 0 2px;
}
.grp-fold:hover { color: var(--text); }
.grp-name { font-weight: 400; cursor: text; }
.grp-name:hover { color: var(--amber); }
.grp-n {
  font-family: var(--mono); font-size: 10px; color: var(--text3);
  border: 1px solid var(--border); border-radius: 3px; padding: 0 4px;
}
.grp-eye, .grp-x {
  background: transparent; border: 1px solid transparent; color: var(--text3);
  cursor: pointer; font: inherit; font-size: 11px; padding: 2px 5px;
  border-radius: var(--radius-sm);
}
.grp-eye { margin-left: auto; }
.grp-eye:hover { color: var(--text); border-color: var(--border2); }
.grp-x:hover { color: #ff4560; border-color: rgba(255,69,96,0.5); }
.grp-empty {
  color: var(--text3); font-weight: 300; font-size: 12px;
  border: 1px dashed var(--border2); border-radius: var(--radius-sm);
  padding: 10px; text-align: center; margin: 0 0 6px;
}
.note[draggable] { cursor: grab; }
.note.dragging { opacity: 0.4; }

/* ── minimal cards ───────────────────────────────────────────────── */

/* The swatch is the colour picker. Native input, stripped to a square. */

/* Who drew it, as a chip in their own colour rather than grey text. */
.who-chip {
  margin-left: auto; color: #050810; font-family: var(--mono);
  font-size: 9.5px; font-weight: 600; padding: 1px 6px; border-radius: 9px;
  letter-spacing: 0.02em;
}

.note .pat { outline: none; border-radius: 3px; padding: 0 2px; }
.note .pat:hover { background: rgba(255,255,255,0.05); }
.note .pat:focus {
  background: rgba(53,186,242,0.12); box-shadow: 0 0 0 1px var(--amber);
}

.ctl { gap: 2px; margin-top: 7px; align-items: center; }
.ctl .members {
  font-family: var(--mono); font-size: 10px; color: var(--text3);
  margin-right: auto;
}
.ico {
  background: transparent; border: 1px solid transparent; color: var(--text3);
  border-radius: var(--radius-sm); cursor: pointer;
  font: inherit; font-size: 12px; line-height: 1; padding: 4px 6px;
}
.ico:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.ico.danger:hover { color: #ff4560; background: rgba(255,69,96,0.12); }

/* Timeframes, group and tab live behind the gear rather than on every card. */
.more {
  margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--border);
}
.more .tfrow, .more .grprow { margin-top: 4px; }

/* dragging a tab along the strip */
.tab.dragging { opacity: 0.4; }
.tab.drop-left  { box-shadow: inset 2px 0 0 var(--amber); }
.tab.drop-right { box-shadow: inset -2px 0 0 var(--amber); }
.tab[draggable] { cursor: grab; }

/* ── renaming in place, wherever a name is ───────────────────────── */
.grp-name, .tab-name {
  outline: none; border-radius: 3px; padding: 0 3px;
}
.grp-name:hover { background: rgba(255,255,255,0.05); }
.grp-name:focus, .tab-name[contenteditable="true"] {
  background: rgba(53,186,242,0.12); box-shadow: 0 0 0 1px var(--amber);
  cursor: text;
}
.tab-name[contenteditable="true"] { min-width: 30px; }

/* ── the colour dot ──────────────────────────────────────────────── */
/* 12px round, but an 18px target. The padding pushes the native swatch in,
   so the dot you see is 12px while the area you can hit is half again as
   large — the box was fiddly to click at 11px square. */
.swatch {
  width: 18px; height: 18px; padding: 3px;
  border: none; border-radius: 50%; background: transparent;
  flex: none; cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
.swatch::-webkit-color-swatch-wrapper { padding: 0; }
.swatch::-webkit-color-swatch { border: none; border-radius: 50%; }
.swatch::-moz-color-swatch { border: none; border-radius: 50%; }
.swatch:hover { transform: none; background: rgba(255,255,255,0.08); }
.swatch.flat {
  width: 12px; height: 12px; padding: 0; margin: 0 3px;
  cursor: default; border-radius: 50%;
}
.swatch.flat:hover { background: inherit; }

.note header { gap: 4px; }

/* ── the eye ─────────────────────────────────────────────────────── */
.eyebtn { padding: 2px 3px; line-height: 0; }
.eye {
  width: 15px; height: 15px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
}
/* The slash is drawn over the eye, so it needs the card's own background
   behind it or the two shapes muddle into a smear at this size. */
.eye .slash { stroke-width: 1.5; }
.eyebtn:hover .eye { stroke: var(--text); }
.note.is-hidden .eyebtn { color: var(--text2); }

/* Timeframes live on the card now, so they sit quieter. */
.note > .tfrow { margin-top: 7px; opacity: 0.85; }
.note > .tfrow:hover { opacity: 1; }

/* ── native controls ─────────────────────────────────────────────── */
/* The <select> box was styled, but the list it opens is drawn by the browser,
   not by us, so it stayed white. `color-scheme` is what tells the browser the
   page is dark — it fixes the dropdown popup, scrollbars, focus rings and the
   colour picker's own dialog in one line, none of which CSS can reach. */
:root { color-scheme: dark; }

/* Firefox draws options from the page's own styles rather than the theme. */
select { background: #0a0f1a; color: var(--text); }
select option, select optgroup {
  background: #0a0f1a; color: var(--text);
}

/* The pattern currently being drawn into. */
.note.is-open {
  border-color: var(--amber);
  background: var(--amberBg);
  box-shadow: 0 0 0 1px var(--amber) inset;
}
.note.is-open .pat { color: var(--amber); }
.pat-card { cursor: pointer; }

/* Every dropdown, opaque. Chrome paints the popup list from the select's own
   background colour, so a translucent one composites against white and the
   list comes out white no matter what color-scheme says. */
select, select option, select optgroup {
  background-color: #0a0f1a !important;
  color: var(--text);
}

/* ── armed deletes ───────────────────────────────────────────────── */
/* A button waiting for its second click says so loudly. It is the only red
   fill on the desk, so it cannot be mistaken for anything else. */
.armed {
  color: #fff !important; background: #c02a3d !important;
  border-color: #c02a3d !important;
  font-size: 10px !important; letter-spacing: 0.02em;
  padding: 3px 7px !important; width: auto !important;
  opacity: 1 !important;
}
.tab .armed, .grp-head .armed { border-radius: 3px; }

/* The open pattern's card is never dimmed either, even if it is hidden. */
.note.is-open.is-hidden { opacity: 1; }

/* ── dragging a group into position ──────────────────────────────── */
.grp-head[draggable] { cursor: grab; }
.grp-head .grip {
  color: var(--text3); font-size: 12px; line-height: 1; opacity: 0;
  transition: opacity .12s;
}
.grp:hover .grp-head .grip { opacity: 0.6; }
.grp.dragging { opacity: 0.45; }
.grp.over-above { box-shadow: 0 -2px 0 var(--amber); }
.grp.over-below { box-shadow: 0 2px 0 var(--amber); }

/* The paint confirmation carries the chosen colour, so you can see what you
   are about to apply before you apply it. */
[data-paintok] { color: #050810 !important; font-weight: 600; }

/* ── our own colour palette ──────────────────────────────────────── */
/* Replaces <input type="color">, which is an OS popup this page cannot keep
   open. Plain HTML in the card: it closes when we say, and nothing outside
   the page can dismiss it. */
button.swatch {
  width: 18px; height: 18px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22); cursor: pointer; flex: none;
}
button.swatch:hover { box-shadow: 0 0 0 2px rgba(255,255,255,0.18); }

.palette {
  display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
  margin-top: 8px; padding: 9px 10px;
  background: var(--raised, #101728); border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
}
.pal-label {
  width: 100%; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text3);
  margin-bottom: 2px;
}
.pal {
  width: 20px; height: 20px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 1px solid rgba(255,255,255,0.18);
}
.pal:hover { transform: scale(1.18); box-shadow: 0 0 0 2px rgba(255,255,255,0.25); }

/* A tab left open is not a person paying attention. */
.presence .who.idle {
  color: var(--text3); font-weight: 300;
}
.presence .who.idle i { display: none; }


/* Who is on which tab. A strip along the bottom edge, split equally between
   everyone looking at it — two people give the exact 50:50 split Marco asked
   for, three make it thirds. Kept out of the tab's background so the name stays
   readable whoever is standing on it. */
.tab { position: relative; }
.tab-here {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  display: flex; overflow: hidden; pointer-events: none;
  border-radius: 0 0 2px 2px;
}
.tab-here b { flex: 1 1 0; display: block; }
.tab-name[contenteditable="true"] { cursor: text; }

/* The Sunport mark, the same single path the company logo uses, cropped to its
   own bounding box: the logo's viewBox carries the gap that separates mark from
   wordmark, and keeping that gap made the star render small and pushed left.
   White, as on sunport.group. */
.brand .mark {
  height: 16px; width: auto; flex: none;
  color: #ffffff; display: block;
}
.brand { display: flex; align-items: center; gap: 9px; }


/* The tab's right-click menu. Sits on the page rather than inside the tab strip
   so it is never clipped by the strip's own horizontal scrolling. */
.tabmenu {
  position: fixed; z-index: 400; min-width: 150px;
  background: #0a0f1c; border: 1px solid var(--border2);
  border-radius: var(--radius-sm); padding: 4px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  display: flex; flex-direction: column;
}
.tabmenu button {
  background: none; border: 0; color: var(--text2);
  font: inherit; font-size: 12px; text-align: left;
  padding: 7px 10px; border-radius: 4px; cursor: pointer;
}
.tabmenu button:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }


.tabmenu button.danger { color: #ff8095; }
.tabmenu button.danger:hover { background: rgba(255, 69, 96, 0.14); color: #ff4560; }
.tabmenu button.armed {
  background: rgba(255, 69, 96, 0.18); color: #ff4560; font-weight: 600;
}


/* The armed x grows into a word. It stops being an icon for those four seconds
   on purpose: an icon you click twice is a slip waiting to happen, a sentence
   is a decision. */
.tab-x.armed {
  opacity: 1; font-size: 10px; padding: 2px 6px; font-weight: 600;
  background: rgba(255, 69, 96, 0.18); color: #ff4560;
  border-radius: 3px; letter-spacing: 0.02em;
}


/* The close x, weighted to match the + that makes a new tab.
   They are the same kind of control -- one adds a tab, one takes it away -- so
   they should read as a pair rather than as a button and an afterthought.
   Always visible, like the +, instead of appearing on hover: a control you have
   to discover is one that gets clicked by accident when it finally shows up. */
.tab-x {
  opacity: 1;
  font-size: 15px; line-height: 1; font-weight: 400;
  padding: 1px 3px 3px; margin-left: 1px;
  color: var(--text3); background: none; border: 0;
  border-radius: 3px; cursor: pointer; font-family: inherit;
}
.tab:hover .tab-x, .tab.on .tab-x { opacity: 1; color: var(--text3); }
.tab-x:hover, .tab:hover .tab-x:hover, .tab.on .tab-x:hover {
  color: #ff4560; background: rgba(255, 69, 96, 0.15); opacity: 1;
}


/* The volume profile sits under the cursors and over the chart: it must not
   swallow a click meant for a drawing. */
.vpcanvas {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
}
.vpbtn {
  background: none; border: 1px solid var(--border2); color: var(--text3);
  font: inherit; font-size: 10.5px; font-family: var(--mono); font-weight: 600;
  letter-spacing: 0.04em; padding: 3px 8px; border-radius: var(--radius-sm);
  cursor: pointer;
}
.vpbtn:hover { color: var(--text2); border-color: var(--text3); }
.vpbtn.on {
  color: #050810; background: var(--amber); border-color: var(--amber);
}


/* Tabs: shrink, then scroll — and never vertically.
 *
 * `overflow-x: auto` alone was the bug. Per spec, setting one axis to something
 * other than `visible` promotes the OTHER axis from `visible` to `auto`, so the
 * strip grew a vertical scrollbar the moment its content was a pixel taller
 * than it. Both axes are now stated outright.
 *
 * What happens with more tabs than fit: they shrink to a floor of ~72px with
 * the name ellipsised — the same thing a browser does — and only once every tab
 * is at that floor does the strip scroll. The + button lives outside the
 * scroller so it is always reachable. */
.tabs { overflow: hidden; gap: 0; }
.tabstrip {
  /* 0 1 auto, not 1 1 auto: the strip takes the width its tabs need and no
     more, so the + sits directly after the last tab instead of being pushed to
     the far edge of the screen. It still SHRINKS when the tabs outgrow the bar,
     which is when + does end up at the right — the same as any browser. */
  flex: 0 1 auto; min-width: 0;
  display: flex; gap: 1px; align-items: stretch;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;                 /* Firefox */
  -ms-overflow-style: none;
}
.tabstrip::-webkit-scrollbar { display: none; }
.tab { flex: 0 1 auto; min-width: 72px; }
.tab-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.tab-add { flex: none; margin-left: 2px; }


/* One pixel of headroom, and it is load-bearing.
   The active tab uses `margin-bottom: -1px` to sit ON the rule below rather
   than above it — that overlap is what makes it read as a tab. Now that the
   strip clips instead of scrolling, that pixel was being cut off. */
.tabs { min-height: 35px; }
.tabstrip { align-items: flex-end; }


/* The tab you are on stays readable.
   Browsers shrink the tabs you are not using and leave the current one at a
   size you can actually read — otherwise the one tab whose name matters is the
   one reduced to "Volumen…". It refuses to shrink and is allowed to run wider
   than the rest; everything else gives up the room. */
.tab.on {
  flex: 0 0 auto;
  max-width: 300px;
  min-width: 0;
}


/* ═══ Trading mode ═══════════════════════════════════════════════════════
   The chart keeps its place; the panel beside it takes half the room, because
   in this mode the reasoning is as much the subject as the chart is. */
body.trading .layout { grid-template-columns: 1fr 1fr; }
.tradecanvas { position: absolute; inset: 0; pointer-events: none; z-index: 4; }

.modes { display: flex; gap: 0; border: 1px solid var(--border2); border-radius: var(--radius-sm); overflow: hidden; }
.mode {
  background: none; border: 0; color: var(--text3); font: inherit; font-size: 11px;
  padding: 4px 11px; cursor: pointer; letter-spacing: 0.02em;
}
.mode:hover { color: var(--text2); }
.mode.on { background: var(--amber); color: #050810; font-weight: 600; }

.tradepanel { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; }
.tp-head { display: flex; gap: 8px; align-items: center; }
.tp-pick {
  flex: 1 1 auto; min-width: 0; background: #0a0f1c; color: var(--text);
  border: 1px solid var(--border2); border-radius: var(--radius-sm);
  padding: 7px 9px; font: inherit; font-size: 12.5px;
}
.tp-magic {
  flex: none; background: var(--amber); color: #050810; border: 0; font: inherit;
  font-weight: 600; font-size: 12.5px; padding: 8px 14px;
  border-radius: var(--radius-sm); cursor: pointer;
}
.tp-magic:disabled { opacity: 0.55; cursor: default; }

.tp-cards { display: flex; flex-direction: column; gap: 8px; }

/* A trade card. Four of these, always, in the same order — the screen's shape
   never changes, so the eye can learn where things are. */
.tcard {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 11px; cursor: pointer; background: rgba(255,255,255,0.015);
}
.tcard:hover { border-color: var(--border2); }
.tcard.picked { border-color: var(--amber); background: rgba(53,186,242,0.06); }
.tcard.lead { border-left: 2px solid var(--amber); }
.tcard.live { border-color: #f5a623; background: rgba(245,166,35,0.10); }

.tcard header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tcard header b { font-size: 13px; font-weight: 600; }
.tdir { font-family: var(--mono); font-size: 9px; font-weight: 700; padding: 2px 5px; border-radius: 3px; }
.tdir.long { background: rgba(0,212,138,0.18); color: #00d48a; }
.tdir.short { background: rgba(255,69,96,0.18); color: #ff4560; }
.tlead { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--amber); }
.tlive {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
  background: #f5a623; color: #050810; padding: 2px 6px; border-radius: 3px;
}
.tscore { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--text3); }

.tlevels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tl { display: flex; flex-direction: column; gap: 1px; }
.tl i { font-style: normal; font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.05em; }
.tl b { font-family: var(--mono); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }

.twhy {
  margin-top: 8px; background: none; border: 0; color: var(--text3);
  font: inherit; font-size: 10.5px; padding: 0; cursor: pointer; text-decoration: underline;
}
.twhy:hover { color: var(--text2); }
.twhybody { margin-top: 8px; font-size: 11.5px; color: var(--text2); line-height: 1.5; }
.twhybody p { margin: 0 0 4px; }
.thint { color: var(--text3); font-style: italic; }

.tcheck { display: flex; flex-direction: column; gap: 3px; margin-top: 7px; }
.tcheck span { font-size: 11px; display: flex; gap: 6px; align-items: baseline; }
.tcheck i { font-style: normal; width: 10px; flex: none; }
.tcheck em { font-style: normal; color: var(--text3); font-family: var(--mono); font-size: 10px; }
.tcheck .yes i { color: #00d48a; }
.tcheck .no i { color: #ff4560; }
.tcheck .unknown { color: var(--text3); }
.tnote { color: var(--text3); font-size: 10.5px; margin-top: 4px; }


/* An edited level is marked, so the desk's numbers and yours are never
   mistaken for one another. */
.tl b[contenteditable="true"] { cursor: text; border-bottom: 1px dotted var(--border2); }
.tl b[contenteditable="true"]:focus {
  outline: none; border-bottom-color: var(--amber); color: var(--amber);
}
.tl.edited b { color: var(--amber); }
.tl.edited i::after { content: ' \00b7'; color: var(--amber); }

/* What a trade is waiting for. An armed breakout that explains itself is doing
   its job; one that sits silent looks broken. */
.twait {
  margin: 8px 0 0; font-size: 10.5px; color: var(--text3);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
}
.twait span { font-family: var(--mono); font-size: 10px; }
.twait .ok { color: #00d48a; }
.twait b { color: var(--text2); font-family: var(--mono); }

.tnote-in {
  width: 100%; margin-top: 8px; background: #0a0f1c; color: var(--text);
  border: 1px solid var(--border2); border-radius: var(--radius-sm);
  padding: 7px 8px; font: inherit; font-size: 11.5px; resize: vertical;
}
.tnote-in:focus { outline: none; border-color: var(--amber); }

.tlearn {
  margin: 4px 0 0; font-size: 11px; color: var(--text2); line-height: 1.5;
  border-top: 1px solid var(--border); padding-top: 9px;
}
.tlearn.quiet { color: var(--text3); }
.tlearn b { color: var(--amber); font-family: var(--mono); }


/* ── A trading tab ───────────────────────────────────────────────────────
   Armed: a quiet dot — this tab is watching something.
   Live:  a slow sheen drifting across it — this tab has money in the market.

   Violet through blue and back, moving slowly enough to read as ambient rather
   than urgent: nine seconds for one pass. A fast pulse says "act now", which is
   wrong — a live trade is being watched, not screamed about. It is also the
   desk's only animation, so it cannot be mistaken for decoration.

   The hues are the desk's own: the violet already carries CVD, the blue is the
   accent everything else leans on. Nothing new was invented to make this feel
   like a different product. */
.tab-trade {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--text3); display: block; margin-left: 1px;
}
.tab-trade.live {
  background: linear-gradient(120deg, #b06cf5, #35baf2, #7b5cf5);
  background-size: 260% 260%;
  animation: aidrift 9s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(150, 120, 245, 0.85);
}

.tab.is-armed .tab-name { color: var(--text2); }

.tab.is-live {
  background-image: linear-gradient(100deg,
    rgba(176, 108, 245, 0.04) 0%,
    rgba(176, 108, 245, 0.26) 18%,
    rgba(53, 186, 242, 0.30) 38%,
    rgba(123, 92, 245, 0.26) 58%,
    rgba(176, 108, 245, 0.04) 78%);
  background-size: 240% 100%;
  animation: aisheen 9s linear infinite;
  box-shadow: inset 0 -2px 0 #8f7bf7;
}
.tab.is-live .tab-name { color: #e2d6ff; }
.tab.is-live.on { box-shadow: inset 0 -2px 0 #b06cf5; }

@keyframes aisheen {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}
@keyframes aidrift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Asked for less movement: keep the colour, drop the drift. The information is
   in the hue; the motion only makes it findable across a wide strip. */
@media (prefers-reduced-motion: reduce) {
  .tab-trade.live, .tab.is-live { animation: none; }
  .tab.is-live { background-position: 40% 0; }
}


/* A trade that is in the market, reporting itself.
   R is given more weight than percent on purpose: percent says what the price
   did, R says what the decision did. */
.tlive-stats { margin-top: 9px; display: flex; flex-direction: column; gap: 5px; }
.tlive-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tlive-row.quiet { font-size: 10px; color: var(--text3); font-family: var(--mono); }
.tlive-pnl { font-family: var(--mono); font-size: 13px; font-weight: 600; }
.tlive-pnl b { font-size: 15px; }
.tlive-pnl.up { color: #00d48a; }
.tlive-pnl.down { color: #ff4560; }
.tlive-at { font-family: var(--mono); font-size: 10px; color: var(--text3); }
.tlive-safe {
  margin-left: auto; font-size: 9.5px; letter-spacing: 0.04em;
  background: rgba(0, 212, 138, 0.16); color: #00d48a;
  padding: 2px 6px; border-radius: 3px;
}
.tlive-bar {
  height: 3px; background: rgba(255, 255, 255, 0.07); border-radius: 2px; overflow: hidden;
}
.tlive-bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, #35baf2, #00d48a);
}


/* ── A trade that is in the market ───────────────────────────────────────
   The same signal as the tab it belongs to: a gradient running slowly around
   its edge. Drawn as a masked ring rather than a border, because a border
   cannot hold a gradient that moves — the pseudo-element is filled with the
   sweep and then everything except a 1.5px rim is masked away.

   It shares the tab's nine-second pass, so a live tab and its live card drift
   together rather than beating against each other. Inside the card nothing
   changes: the P&L stays green or red, because that is the market talking. */
.tcard.live {
  position: relative;
  border-color: transparent;
  background-color: rgba(176, 108, 245, 0.08);
  box-shadow: 0 0 26px rgba(176, 108, 245, 0.18);
}
.tcard.live::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(115deg, #b06cf5, #35baf2, #7b5cf5, #b06cf5);
  background-size: 280% 100%;
  animation: aisheen 9s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* The badge on it wears the spectrum too, so the card announces itself once
   rather than twice in two different accents. */
.tcard.live .tlive {
  background-image: linear-gradient(115deg, #b06cf5, #35baf2);
  color: #14081f;
}

@media (prefers-reduced-motion: reduce) {
  .tcard.live::before { animation: none; background-position: 40% 0; }
}


/* `hidden` has to actually hide.
   The attribute only sets display:none through the user-agent stylesheet, which
   any class rule setting a display beats — so .sidehead { display: flex } left
   the Pattern-notes heading painted underneath the trading panel while the
   element was, as far as the DOM was concerned, hidden. Stating it here settles
   it for every element on the desk rather than one at a time. */
[hidden] { display: none !important; }


/* 50:50 means 50:50.
   `1fr` is shorthand for `minmax(auto, 1fr)`, and that `auto` floor is the
   column's MIN-CONTENT width — so a panel full of labels that must not wrap
   cannot shrink, and it pushes the chart out instead. The trading split was
   coming out 357px of chart to 1179px of panel for exactly that reason.
   `minmax(0, 1fr)` removes the floor and the two halves are finally halves. */
body.trading .layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }


/* ── Folding the panel away ──────────────────────────────────────────────
   The handle sits on the seam between chart and panel and stays put when the
   panel goes, so the way back is exactly where the way out was. */
.collapse {
  position: absolute; top: 50%; right: 340px;
  transform: translate(50%, -50%);
  z-index: 20;
  width: 18px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border2); border-right: 0;
  border-radius: 6px 0 0 6px;
  color: var(--text3); font: inherit; font-size: 13px; line-height: 1;
  cursor: pointer;
  transition: right 0.24s ease, background-color 0.14s ease, color 0.14s ease;
}
.collapse:hover { background: rgba(255, 255, 255, 0.09); color: var(--text); }

body.folded .layout { grid-template-columns: minmax(0, 1fr) 0px; }
body.folded .side { opacity: 0; pointer-events: none; }


.layout { transition: grid-template-columns 0.24s ease; }
.side { transition: opacity 0.18s ease; }

@media (prefers-reduced-motion: reduce) {
  .layout, .side, .collapse { transition: none; }
}


/* ── Faces, not labels ───────────────────────────────────────────────────
   You and whoever else is here are the same object: a circle with an initial
   in that person's colour. Amber is Marco, blue is Pascal, the same as the
   cursors and the pattern chips — so the face, the arrow on the chart and the
   author on a card are visibly one person.

   Present and moving gets full colour. Idle or long gone keeps the face and
   loses the colour, because "Pascal is here" and "Pascal's browser is open"
   are different facts and the desk has been wrong about that before. */
.avatar {
  width: 26px; height: 26px; flex: none; padding: 0;
  border-radius: 50%; border: 0; cursor: default;
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 11px; font-weight: 700; color: #06060f;
  background-image: none;
  box-shadow: none;
}
.avatar b { font-weight: 700; }
.me.avatar { cursor: pointer; }
.peer.away { filter: grayscale(1); opacity: 0.45; }
.peer.here { animation: none; }

/* The sidebar's own actions. They matter, so they look like it — and they sit
   under the description on the same margins as everything else. */
.sideacts { display: flex; gap: 8px; padding: 0 16px 12px; flex: none; flex-wrap: wrap; }
.act {
  flex: 0 1 auto;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border2); background: rgba(255, 255, 255, 0.03);
  color: var(--text2); font: inherit; font-size: 12px; cursor: pointer;
  white-space: nowrap;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.act:hover { color: var(--text); border-color: var(--text3); }

/* The group's delete sits in its corner, where a close control belongs. */
.grp-head { position: relative; padding-right: 26px; }
.grp-x { position: absolute; top: 4px; right: 4px; }

/* The two "selected" actions were overlapping the count and each other. A row
   with a gap, the count pushed left, the actions kept together on the right. */
.ctl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ctl .members { margin-right: auto; }
.ctl .ico {
  width: auto; height: auto; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border2); background: transparent;
  font-size: 10.5px; white-space: nowrap; line-height: 1.5;
}
.ctl .ico:hover { background: rgba(255, 255, 255, 0.07); color: var(--text); }

/* A select's arrow needs room to sit inside a rounded end. */
select { padding-right: 30px; background-position: right 12px center; }

/* ── The collapse handle ─────────────────────────────────────────────────
   On the sidebar's own edge, pointing the way it will move, and saying which
   way that is in letters small enough to ignore once you know. */
.collapse {
  position: absolute; top: 50%; right: var(--panelW);
  transform: translateY(-50%);
  z-index: 20;
  width: 22px; min-height: 64px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border2); border-right: 0;
  border-radius: 8px 0 0 8px;
  color: var(--text3); font: inherit; cursor: pointer;
  transition: right .24s ease, background-color .14s ease, color .14s ease;
}
.collapse i { font-style: normal; font-size: 13px; line-height: 1; }
.collapse em {
  font-style: normal; font-size: 7.5px; letter-spacing: .06em;
  text-transform: uppercase; writing-mode: vertical-rl; text-orientation: mixed;
}
.collapse:hover { background: rgba(255, 255, 255, 0.10); color: var(--text); }



/* The handle follows the panel, by asking the panel how wide it is.
   It used to be positioned by a rule per state — 340px normally, 50% in
   trading, 0 when folded — and those rules then fought on specificity. Folding
   while in trading mode lost that fight and left the handle stranded in the
   middle of the chart. One variable, set where the width is decided, and there
   is nothing left to win. */
:root { --panelW: 340px; }
body.trading { --panelW: 50%; }
body.folded  { --panelW: 0px; }

/* ── ladder ────────────────────────────────────────────────────────
   Same quiet controls as the rest of the panel. Numbers stay in the
   text colour: green and red are for the lines on the chart. */
.ladder {
  margin: 0 16px 12px;
  padding: 12px;
  border: 1px solid var(--desk-line, var(--border));
  border-radius: var(--desk-radius-sm, 12px);
  background: var(--desk-face, rgba(255, 255, 255, 0.04));
  color: var(--desk-text, var(--text));
  flex: none;
  min-height: 0;
  max-height: min(320px, 46vh);
  overflow: auto;
}
.ladder[hidden] { display: none !important; }
.ladder-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.ladder-top h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 22px;
}
.ladder-x, .ladder-text, .ladder-mini {
  background: transparent;
  border: 0;
  color: var(--desk-text-2, var(--text2));
  font: inherit;
  cursor: pointer;
}
.ladder-x {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  font-size: 18px;
  line-height: 1;
}
.ladder-x:hover, .ladder-text:hover, .ladder-mini:hover {
  background: var(--desk-hover, rgba(255, 255, 255, 0.06));
  color: var(--desk-text, var(--text));
}
.ladder-advice, .ladder-note, .ladder-status, .ladder-empty {
  margin: 0 0 8px;
  color: var(--desk-text-3, var(--text3));
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}
.ladder-status:empty { display: none; }
.ladder-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  min-width: 0;
  color: var(--desk-text-2, var(--text2));
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}
.ladder-fees {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.ladder input {
  width: 100%;
  box-sizing: border-box;
  height: 32px;
  margin: 0;
  padding: 0 8px;
  border-radius: 12px;
  border: 1px solid var(--desk-line, var(--border));
  background: rgba(0, 2, 36, 0.45);
  color: var(--desk-text, var(--text));
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  text-align: end;
}
.ladder input:focus {
  outline: none;
  border-color: var(--desk-accent, #b06cf5);
}
.ladder-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "name price x" "fig fig fig";
  gap: 4px 8px;
  align-items: center;
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px solid var(--desk-line-quiet, var(--border));
}
.ladder-name { grid-area: name; font-size: 13px; white-space: nowrap; }
.ladder-name::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-inline-end: 6px;
  border-radius: 999px;
  background: #35baf2;
  vertical-align: middle;
}
.ladder-row[data-role="stop"] .ladder-name::before { background: #ff4560; }
.ladder-row[data-role="target"] .ladder-name::before { background: #00d48a; }
.ladder-row input { grid-area: price; }
.ladder-mini {
  grid-area: x;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  font-size: 16px;
}
.ladder-fig { grid-area: fig; min-width: 0; }
.ladder-fig b, .ladder-sum b {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--desk-text, var(--text));
}
.ladder-fig small, .ladder-sum small {
  display: block;
  margin-top: 2px;
  color: var(--desk-text-3, var(--text3));
  font-size: 12px;
  line-height: 16px;
}
.ladder-sum {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--desk-line-quiet, var(--border));
}
.ladder-sum .ladder-stat {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 18px;
}
.ladder-sum .ladder-stat span { color: var(--desk-text-3, var(--text3)); }
.ladder-sum p {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 18px;
}
.ladder-sum .ladder-note {
  display: block;
  margin-top: 8px;
  color: var(--desk-text-3, var(--text3));
}
.ladder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 8px;
}
.ladder-text {
  min-height: 32px;
  padding: 0;
  font-size: 13px;
}
.lgrip {
  position: absolute;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 2px 0 8px;
  height: 22px;
  border-radius: 999px;
  font: 500 12px/22px var(--desk-sans, inherit);
  color: #000224;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  cursor: ns-resize;
}
.lgrip.on { outline: 1px solid #fff; outline-offset: 1px; }
.lgrip-x {
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #000224;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
a.ladder-text { display: inline-flex; align-items: center; text-decoration: none; min-height: 32px; }
.lshield {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: transparent;
  cursor: ns-resize;
  touch-action: none;
}
.lshield[hidden] { display: none !important; }
@media (max-width: 720px) {
  html.desk-demo .ladder { margin: 0 0 12px; max-height: none; }
}