/* Bulk Trader 2.0 — right-hand workspace panel.

   The LAYOUT, order, copy and behaviour replicate the reference Bulk Trader
   one-for-one (see backend/strategies/bulk_trader_2/SPEC.md): selectors row, scan
   row, analysis input, current tick, ten-digit barrier picker, Smart Pair
   card, matching-digits strip, 18-glyph sequence, purchase row, the two
   tap-to-buy sides, run bar, status line — in exactly that order, with no
   heading above them, because the reference has none.

   The PALETTE is the house one, the same call already made for El Chappo and
   X Trader: warm gold identity, warm hairlines, green reserved for live
   semantics, tabular numerals on every figure, no emoji. The reference's
   teal/blue/red/yellow digit tones map onto gold-bright / gold / red / amber
   so a member reads the same four ranks without the vendor's cold colours.

   The SIZING is fluid and this file carries NO layout breakpoints (owner
   report, 2026-09-13: "let the mobile layout and the desktop layout look the
   same on every device"). Two selectors, ten digit cells, three purchase
   fields, two buy sides and four Results tallies keep their desktop column
   count at every width down to a 320px phone; clamp() shrinks type, padding
   and gaps instead of re-flowing the tracks — the same call already made for
   .hero-tiers in mobile.css. A member who learns the shape on a laptop reads
   the identical shape on a phone, and the four tallies stay directly
   comparable side by side instead of turning into a 2x2 block.

   Two things make the shrink safe rather than an overflow: every grid child
   carries `min-width: 0` (a `1fr` track otherwise refuses to go below its
   item's min-content width and pushes the card past the viewport), and the
   cells whose text is a live figure clip rather than push. The tightest case
   is NOT a 320px phone — it is a ~769px laptop, where .workspace-right is a
   385px column (46%/1fr split inside a 780px .container) while vw units are
   still large, so every clamp() upper bound is chosen to fit that column. The
   column only ever reaches 396px, because .container caps at --max-w 780px. */

.bt2-workspace { display: none; flex-direction: column; gap: 9px; min-width: 0; }

/* A class that sets `display` outranks the UA's `[hidden] { display: none }`,
   so the run bar stayed on screen with no batch running. Every element this
   module toggles with `el.hidden` needs this to actually disappear. */
.bt2-workspace [hidden] { display: none !important; }

.bt2-card {
  background: linear-gradient(160deg, rgba(28, 22, 11, .85), rgba(13, 10, 5, .94));
  border: 1px solid rgba(226, 182, 104, .22);
  border-radius: 16px;
  padding: clamp(10px, 2.4vw, 14px) clamp(9px, 2.6vw, 15px);
  box-shadow: inset 0 1px 0 rgba(255, 226, 168, .06), 0 10px 26px rgba(0, 0, 0, .34);
  min-width: 0;
}

/* ── header ─────────────────────────────────────────────────────────────── */
.bt2-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bt2-head-left { display: flex; align-items: center; gap: clamp(7px, 2.4vw, 11px); min-width: 0; }
.bt2-logo {
  width: clamp(32px, 9vw, 40px); height: clamp(32px, 9vw, 40px);
  flex: 0 0 clamp(32px, 9vw, 40px); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #f9c750, #b8862a);
  color: #1a1204; font-size: clamp(11px, 3vw, 13px); font-weight: 900; letter-spacing: -.02em;
  box-shadow: 0 0 16px rgba(226, 166, 58, .3);
}
.bt2-title { font-size: clamp(13px, 3.4vw, 15px); font-weight: 800; color: #ffe9b0; letter-spacing: .01em; }
.bt2-sub   { font-size: clamp(9px, 2.4vw, 10px); color: rgba(208, 180, 136, .72); margin-top: 2px; }
.bt2-state {
  font-size: clamp(9px, 2.4vw, 10px); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px clamp(7px, 2.4vw, 11px); border-radius: 999px; white-space: nowrap;
  background: rgba(120, 100, 65, .18); border: 1px solid rgba(140, 115, 70, .3);
  color: rgba(200, 175, 130, .72); font-variant-numeric: tabular-nums;
}
.bt2-state.live {
  background: rgba(16, 185, 129, .16); border-color: rgba(16, 185, 129, .4); color: #4ade80;
}
.bt2-state.busy {
  background: rgba(226, 166, 58, .14); border-color: rgba(226, 166, 58, .38);
  color: #f0c674; animation: bt2-pulse 1.8s ease-in-out infinite;
}
@keyframes bt2-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .bt2-state.busy { animation: none; } }

/* ── 1. selectors row ───────────────────────────────────────────────────── */
.bt2-selectors { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(6px, 2vw, 10px); }
.bt2-select-card { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
/* The caption is what breaks a fluid field first: "No of Trades" needs ~70px
   and a third of a 320px card is ~90px. It scales down and, as a hard stop,
   truncates on one line — a caption that wraps changes the row's height and
   with it the shape the member learned on desktop. */
.bt2-select-card > span {
  font-size: clamp(8px, 2.2vw, 10px); font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: rgba(208, 180, 136, .66);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bt2-input, .bt2-select {
  width: 100%; min-width: 0; font-family: inherit;
  font-size: clamp(11px, 2.8vw, 13px); font-weight: 700;
  color: #fdf4e2; background: rgba(0, 0, 0, .34);
  border: 1px solid rgba(226, 182, 104, .26); border-radius: 10px;
  padding: clamp(7px, 2vw, 9px) clamp(7px, 2.2vw, 10px); font-variant-numeric: tabular-nums;
}
.bt2-select { appearance: none; cursor: pointer; padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, rgba(226, 182, 104, .8) 50%),
                    linear-gradient(135deg, rgba(226, 182, 104, .8) 50%, transparent 50%);
  background-position: calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.bt2-input:focus, .bt2-select:focus { outline: none; border-color: rgba(249, 199, 80, .7); }
.bt2-input:disabled, .bt2-select:disabled { opacity: .5; cursor: not-allowed; }

/* ── 2. scan row ────────────────────────────────────────────────────────── */
.bt2-scan-row { display: flex; align-items: center; gap: clamp(7px, 2.2vw, 10px); margin-top: 11px; }
.bt2-scan-button {
  font-family: inherit; font-size: clamp(10px, 2.6vw, 11px); font-weight: 900; letter-spacing: .08em;
  cursor: pointer; white-space: nowrap; flex: 0 0 auto;
  padding: clamp(8px, 2vw, 9px) clamp(11px, 3.4vw, 16px); border-radius: 10px;
  color: #1a1204; border: none;
  background: linear-gradient(135deg, #f9c750, #c68c2c);
}
.bt2-scan-button:hover:not(:disabled) { filter: brightness(1.07); }
.bt2-scan-button:disabled { opacity: .5; cursor: not-allowed; }
.bt2-scan-progress {
  flex: 1 1 auto; height: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(0, 0, 0, .45); border: 1px solid rgba(226, 182, 104, .2);
}
.bt2-scan-progress-fill {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #c68c2c, #f9c750);
  transition: width .25s ease;
}
.bt2-scan-note {
  margin-top: 7px; font-size: clamp(9.5px, 2.4vw, 10.5px); line-height: 1.5;
  color: rgba(208, 180, 136, .7); overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;   /* it carries a live 3/7 counter */
}

/* ── 3. analysis input + history status ─────────────────────────────────── */
/* Field beside status, never stacked: the basis shrinks so a 320px card still
   leaves the status line a readable measure next to it. */
.bt2-analysis-inputs {
  display: flex; align-items: flex-end; gap: clamp(7px, 2.4vw, 11px); margin-top: 11px;
}
.bt2-analysis-inputs .bt2-select-card { flex: 0 0 clamp(104px, 34vw, 150px); }
.bt2-history-status {
  flex: 1 1 auto; min-width: 0; font-size: clamp(9.5px, 2.4vw, 10.5px);
  line-height: 1.45; padding-bottom: clamp(7px, 2vw, 9px);
  color: rgba(208, 180, 136, .6); overflow-wrap: anywhere;
}
.bt2-history-status.warn { color: #f0c674; }

/* ── 4. current tick ────────────────────────────────────────────────────── */
.bt2-current-tick {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: 11px; padding: 9px clamp(9px, 2.8vw, 12px); border-radius: 11px;
  background: rgba(0, 0, 0, .3); border: 1px solid rgba(226, 182, 104, .18);
}
.bt2-current-tick > span {
  font-size: clamp(8.5px, 2.4vw, 10px); font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: rgba(208, 180, 136, .66); white-space: nowrap;
}
.bt2-current-tick > strong {
  font-size: clamp(15px, 4.2vw, 19px); font-weight: 900; color: #ffe9b0;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── 5. the ten-digit barrier picker ────────────────────────────────────── */
/* ONE row of ten at every width. Ten cells in a 320px phone card is ~26px a
   cell, so the cell shrinks instead of the row folding to five. `min-width: 0`
   plus `overflow: hidden` are what let a `1fr` track go below its min-content
   width — without them the track floors at the width of "20.00%" and the card
   pushes the page sideways. */
.bt2-digits {
  display: grid; grid-template-columns: repeat(10, 1fr);
  gap: clamp(2px, .55vw, 4px); margin-top: 11px; min-width: 0;
}
/* Side padding is a flat 1px at every width: nine gaps plus twenty side
   paddings are 38px of the ~385px laptop column, and that budget is better
   spent on the figure inside the cell than on air around it. */
.bt2-digit {
  font-family: inherit; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: 2px; border-radius: 9px;
  padding: clamp(6px, 1.8vw, 8px) 1px clamp(5px, 1.6vw, 7px);
  min-width: 0; overflow: hidden;
  background: rgba(0, 0, 0, .34); border: 1px solid rgba(226, 182, 104, .16);
  color: #fdf4e2; transition: border-color .12s ease, background .12s ease;
}
.bt2-digit b {
  font-size: clamp(11px, 3vw, 14px); font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* The upper bound is set by the LAPTOP, not the phone. Measured at a 769px
   viewport — where .workspace-right snaps back to the 46%/1fr split and is a
   ~385px column while vw units are still large — each cell has ~28px of
   content box and a six-character "10.20%" measures ~26px at 6.8px. The old
   8.5px needed ~33px there and was being clipped silently. */
.bt2-digit i {
  font-style: normal; font-size: clamp(5.8px, 1.75vw, 6.8px); font-weight: 700; line-height: 1;
  color: rgba(208, 180, 136, .62); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bt2-digit:hover:not(:disabled) { border-color: rgba(226, 182, 104, .45); }
.bt2-digit:disabled { opacity: .5; cursor: not-allowed; }
.bt2-digit.sel {
  border-color: rgba(249, 199, 80, .95); background: rgba(226, 166, 58, .2);
  box-shadow: 0 0 12px rgba(226, 166, 58, .26);
}
/* the four ranks — the reference's teal / blue / red / yellow, in house tones */
.bt2-digit.hi     b { color: #f9c750; }
.bt2-digit.hi2    b { color: #d9a441; }
.bt2-digit.lo     b { color: #f87171; }
.bt2-digit.lo2    b { color: #e8b264; }
.bt2-digit.win    { border-color: rgba(16, 185, 129, .38); }

/* ── 6. Smart Pair card ─────────────────────────────────────────────────── */
.bt2-smart-pair {
  margin-top: 11px; padding: clamp(9px, 2.4vw, 11px) clamp(9px, 2.8vw, 12px); border-radius: 12px;
  background: rgba(226, 166, 58, .08); border: 1px solid rgba(249, 199, 80, .4);
  min-width: 0;
}
.bt2-sp-title {
  font-size: clamp(8.5px, 2.4vw, 10px); font-weight: 900; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(208, 180, 136, .7);
}
.bt2-sp-line {
  margin-top: 4px; font-size: clamp(11px, 2.9vw, 13px); font-weight: 800;
  color: #ffe9b0; overflow-wrap: anywhere;
}
.bt2-sp-line b { color: #f9c750; }
.bt2-sp-stats {
  margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px clamp(9px, 3vw, 14px);
  font-size: clamp(9.5px, 2.4vw, 10.5px); color: rgba(208, 180, 136, .78);
  font-variant-numeric: tabular-nums;
}
.bt2-sp-stats b { color: #fdf4e2; font-weight: 800; }
.bt2-sp-note {
  margin-top: 6px; font-size: clamp(9px, 2.4vw, 10px); line-height: 1.5;
  color: rgba(208, 180, 136, .5); overflow-wrap: anywhere;
}

/* ── 7. matching digits for the barrier ─────────────────────────────────── */
.bt2-under-matches {
  margin-top: 11px; padding: clamp(8px, 2.2vw, 10px) clamp(9px, 2.8vw, 12px); border-radius: 12px;
  background: rgba(0, 0, 0, .28); border: 1px solid rgba(226, 182, 104, .18);
  min-width: 0;
}
.bt2-um-title {
  font-size: clamp(8.5px, 2.4vw, 10px); font-weight: 900; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(208, 180, 136, .7);
}
.bt2-um-digits { margin-top: 7px; display: flex; flex-wrap: wrap; gap: clamp(3px, 1.2vw, 5px); }
.bt2-um-digit {
  min-width: clamp(20px, 5.6vw, 25px); text-align: center;
  padding: 4px clamp(4px, 1.6vw, 6px); border-radius: 7px;
  font-size: clamp(10.5px, 2.8vw, 12px); font-weight: 900; font-variant-numeric: tabular-nums;
  color: #ffe9b0; background: rgba(226, 166, 58, .16);
  border: 1px solid rgba(226, 182, 104, .34);
}
.bt2-um-empty { margin-top: 6px; font-size: clamp(10px, 2.6vw, 11px); color: rgba(208, 180, 136, .6); }
.bt2-um-hits { margin-top: 7px; font-size: clamp(9.5px, 2.4vw, 10.5px); color: rgba(208, 180, 136, .72);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bt2-um-hits b { color: #fdf4e2; font-weight: 800; }

/* ── 8. the 18-glyph sequence ───────────────────────────────────────────── */
.bt2-pattern-wrap { margin-top: 11px; min-width: 0; }
.bt2-sequence { display: flex; flex-wrap: wrap; gap: clamp(3px, 1vw, 4px); }
/* Glyph + gap scale together so the strip breaks after the same count on a
   phone as it does in the laptop column — 14 per line either way. */
.bt2-seq {
  width: clamp(17px, 4.4vw, 22px); height: clamp(17px, 4.4vw, 22px);
  flex: 0 0 auto; border-radius: 6px; display: flex;
  align-items: center; justify-content: center;
  font-size: clamp(8.5px, 2.2vw, 10.5px); font-weight: 900; font-variant-numeric: tabular-nums;
  background: rgba(0, 0, 0, .34); border: 1px solid rgba(226, 182, 104, .16);
  color: rgba(236, 213, 176, .8);
}
.bt2-seq.green { color: #4ade80; border-color: rgba(16, 185, 129, .38); background: rgba(16, 185, 129, .1); }
.bt2-seq.red   { color: #f87171; border-color: rgba(248, 113, 113, .34); background: rgba(248, 113, 113, .08); }
.bt2-seq.last  { box-shadow: 0 0 0 1px rgba(249, 199, 80, .85); }
.bt2-seq-note { margin-top: 7px; font-size: clamp(9px, 2.4vw, 10px); line-height: 1.5;
  color: rgba(208, 180, 136, .45); overflow-wrap: anywhere; }

/* ── 9. purchase row ────────────────────────────────────────────────────── */
/* Three fields in one row at every width — Ticks, Stake and No of Trades are
   read together, so none of them drops to a line of its own. */
.bt2-purchase-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(6px, 2vw, 10px); margin-top: 11px; min-width: 0;
}

/* ── 10. the two tap-to-buy sides ───────────────────────────────────────── */
.bt2-actions {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(6px, 2vw, 10px); margin-top: 11px; min-width: 0;
}
.bt2-buy {
  position: relative; font-family: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: clamp(11px, 2.8vw, 13px) clamp(6px, 2.2vw, 10px);
  border-radius: 12px; border: 1px solid transparent;
  color: #1a1204; font-variant-numeric: tabular-nums;
  /* min-width only — NOT overflow:hidden, which would clip .bt2-buy-badge,
     the Recommended pill that deliberately sits at top:-7px outside the box. */
  min-width: 0;
}
.bt2-buy strong {
  font-size: clamp(12px, 3.2vw, 14px); font-weight: 900; letter-spacing: .03em;
  white-space: nowrap;
}
.bt2-buy em {
  font-style: normal; font-size: clamp(9.5px, 2.6vw, 11px); font-weight: 800;
  opacity: .82; white-space: nowrap;
}
.bt2-buy.green { background: linear-gradient(135deg, #f9c750, #c68c2c); }
.bt2-buy.red   { background: linear-gradient(135deg, #e8ac52, #a8641f); }
.bt2-buy:hover:not(:disabled) { filter: brightness(1.07); }
.bt2-buy:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.3); }
.bt2-buy-badge {
  position: absolute; top: -7px; right: 8px; padding: 2px 7px; border-radius: 999px;
  font-size: 8.5px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
  background: #1a1204; color: #f9c750; border: 1px solid rgba(249, 199, 80, .7);
}

.bt2-actions-note {
  margin-top: 8px; padding: 8px clamp(8px, 2.6vw, 11px); border-radius: 9px;
  font-size: clamp(10px, 2.6vw, 11px); line-height: 1.5; color: #f0c674;
  background: rgba(226, 166, 58, .1); border: 1px solid rgba(226, 166, 58, .32);
  overflow-wrap: anywhere;
}

/* ── 11. run bar ────────────────────────────────────────────────────────── */
.bt2-runbar { margin-top: 11px; display: flex; align-items: center; gap: clamp(7px, 2.2vw, 10px); }
.bt2-progress {
  flex: 1 1 auto; min-width: 0; font-size: clamp(10.5px, 2.6vw, 11.5px);
  font-weight: 800; color: #ffe9b0;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.bt2-stop {
  font-family: inherit; font-size: clamp(10px, 2.6vw, 11px); font-weight: 900; letter-spacing: .04em;
  cursor: pointer; flex: 0 0 auto; white-space: nowrap;
  padding: 8px clamp(10px, 3vw, 14px); border-radius: 9px; color: #ffd9d9;
  background: rgba(248, 113, 113, .14); border: 1px solid rgba(248, 113, 113, .42);
}
.bt2-stop:hover { filter: brightness(1.1); }

/* ── 12. status line ────────────────────────────────────────────────────── */
.bt2-status {
  margin-top: 11px; font-size: clamp(10.5px, 2.6vw, 11.5px); line-height: 1.5;
  color: rgba(236, 213, 176, .85); overflow-wrap: anywhere;
}
.bt2-status.err { color: #f87171; }

/* ── results (a house addition — see the JS header) ─────────────────────── */
.bt2-card-title {
  font-size: clamp(11px, 3vw, 12.5px); font-weight: 800; color: #f0c75e; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: clamp(7px, 2.2vw, 10px);
}
.bt2-clear {
  font-family: inherit; font-size: clamp(9px, 2.4vw, 10px); font-weight: 800; letter-spacing: .04em;
  cursor: pointer; flex: 0 0 auto; white-space: nowrap;
  padding: 4px clamp(7px, 2.4vw, 10px); border-radius: 7px; color: rgba(208, 180, 136, .8);
  background: rgba(0, 0, 0, .3); border: 1px solid rgba(226, 182, 104, .26);
}
.bt2-clear:hover { color: #ffe9b0; border-color: rgba(249, 199, 80, .6); }
.bt2-clear:disabled { opacity: .45; cursor: not-allowed; }
/* FOUR across at every width. These four figures are read against each other —
   batch against session, won against lost — so folding them into a 2x2 block
   on a phone (the owner's screenshot, 2026-09-13) broke the comparison and
   made the panel a different product on each device. The caption is the part
   that runs out of room first ("Session P/L" is the long one), so it scales
   and, as a hard stop, truncates on one line rather than wrapping the tile. */
.bt2-tallies {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(4px, 1.3vw, 7px); margin-bottom: 10px; min-width: 0;
}
.bt2-tally {
  padding: clamp(6px, 1.8vw, 8px) clamp(3px, 1.3vw, 5px); border-radius: 10px; text-align: center;
  background: rgba(0, 0, 0, .3); border: 1px solid rgba(226, 182, 104, .16);
  min-width: 0; overflow: hidden;
}
.bt2-tally span {
  display: block; font-size: clamp(6.5px, 2vw, 8px); font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: rgba(208, 180, 136, .58);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bt2-tally b {
  display: block; margin-top: 3px; font-size: clamp(10.5px, 2.9vw, 13px);
  font-weight: 900; color: #fdf4e2; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bt2-tally b.up { color: #4ade80; }
.bt2-tally b.down { color: #f87171; }
/* The session list holds up to 400 trades. Left to grow it stretched the card
   hundreds of screens down and pushed everything under it out of reach, so it
   gets a fixed window and scrolls inside itself. The cap is the smaller of a
   pixel height and a slice of the viewport, so a short phone does not hand the
   whole screen to the list. */
.bt2-rows {
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
  max-height: min(340px, 46vh);
  overflow-y: auto;
  overscroll-behavior: contain;   /* hitting the end must not scroll the page */
  -webkit-overflow-scrolling: touch;
  /* room for the scrollbar so it never sits on top of a P/L figure */
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(226, 182, 104, .42) transparent;
}
/* The default chrome scrollbar is a pale slab against a near-black card. */
.bt2-rows::-webkit-scrollbar { width: 7px; }
.bt2-rows::-webkit-scrollbar-track { background: transparent; }
.bt2-rows::-webkit-scrollbar-thumb {
  background: rgba(226, 182, 104, .34); border-radius: 999px;
  border: 2px solid transparent; background-clip: content-box;
}
.bt2-rows::-webkit-scrollbar-thumb:hover { background: rgba(249, 199, 80, .6);
  border: 2px solid transparent; background-clip: content-box; }
.bt2-row {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center;
  gap: clamp(5px, 2vw, 9px);
  padding: 7px clamp(7px, 2.4vw, 10px); border-radius: 9px;
  font-size: clamp(10px, 2.6vw, 11.5px);
  background: rgba(0, 0, 0, .3); border: 1px solid rgba(226, 182, 104, .14);
  font-variant-numeric: tabular-nums; min-width: 0;
}
/* The three `auto` tracks hold a label, a stake and a P/L. Without this they
   floor at min-content and a long "not placed" pushes the card off screen. */
.bt2-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt2-row.win  { border-color: rgba(16, 185, 129, .38); }
.bt2-row.loss { border-color: rgba(248, 113, 113, .3); }
.bt2-row.failed { border-color: rgba(226, 182, 104, .3); opacity: .78; }
.bt2-row-l { font-weight: 900; color: #ffe9b0; }
.bt2-row-m { color: rgba(208, 180, 136, .74); font-size: 10.5px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt2-row-s { color: rgba(208, 180, 136, .8); }
.bt2-row-p { font-weight: 900; }
.bt2-row.win  .bt2-row-p { color: #4ade80; }
.bt2-row.loss .bt2-row-p { color: #f87171; }
.bt2-empty { font-size: clamp(10px, 2.6vw, 11px); color: rgba(208, 180, 136, .55);
  text-align: center; padding: 12px 0; }
.bt2-hint { margin-top: 9px; font-size: clamp(9px, 2.4vw, 10px); line-height: 1.55;
  color: rgba(208, 180, 136, .45); overflow-wrap: anywhere; }

/* ── narrow screens ─────────────────────────────────────────────────────────
   There are deliberately NO layout breakpoints here. Two rules that used to
   live at this spot were removed on 2026-09-13:

     @media (max-width: 1024px) — folded the ten-digit grid to 5 x 2
     @media (max-width: 560px)  — one-column selectors, 2-up purchase row,
                                  stacked analysis inputs, 2 x 2 tallies

   Both re-flowed the panel into a different shape than the one on the laptop,
   which is exactly what the owner reported. Every one of those rows now keeps
   its desktop column count all the way down to a 320px viewport; the clamp()
   bounds in the rules above do the work instead.

   The one structural guard that stays is this: the workspace must never be
   able to widen the page. Anything that would has already been given
   `min-width: 0` on its grid track and `overflow: hidden` on the cell, so the
   worst case is a clipped character inside a tile, never a sideways scroll. */
.bt2-workspace, .bt2-workspace * { max-width: 100%; }

/* ── the strategy-row logo (index.html #bt2-row, right under X Trader) ─────
   A real mark, not a bare label: on a phone the row icon collapses to a
   circle, and an icon with nothing drawn in it reads as a rendering bug. */
.strategy-icon-bt2 {
  background: linear-gradient(150deg, rgba(245, 207, 107, .2), rgba(150, 104, 26, .16));
  border: 1px solid rgba(232, 168, 50, .45);
}
.strategy-mark-bt2 {
  display: flex; align-items: baseline; justify-content: center; gap: 1px;
  width: 100%; height: 100%; padding-top: 1px;
  font-size: 8.5px; font-weight: 900; letter-spacing: .02em;
  color: #ffd479; text-shadow: 0 0 10px rgba(210, 152, 48, .5);
}
.strategy-mark-bt2 b { font-size: 14px; font-weight: 900; letter-spacing: -.01em; }

/* ── the floating 1–2–3 Auto widget ─────────────────────────────────────────
   A port of the reference's own widget rules: same pill, same 1.4rem steps,
   same .5rem light, same 2rem minimum touch targets, same .56 resting opacity
   rising to 1 on hover or while dragging, same grab/grabbing cursors and the
   same `touch-action: none` on the handle so a finger drags the widget instead
   of scrolling the page.

   The PALETTE is the house one. The reference's navy shell, blue Skip AI, mint
   Green and amber Double become: gold for the active step and for Auto-on,
   bronze for Skip AI, honey for Green, amber for Double and for the Match/Diff
   button, red for Stop. The one near-green left in the widget is the lit
   completion light, and it earns it — it only lights on the tick a batch
   fires.

   The width is pinned to 330px because 330 and 170 are the reference's own
   clamp constants (30.pretty.js 18985-18986): the drag clamp in
   bulk_trader_2.js assumes that box, so the box has to be real. 330 plus the
   8px margins fits a 360px phone. The house disclosure line takes a row of its
   own under the controls, which is why the radius is 18px rather than a full
   pill — at one row the two are indistinguishable, at two rows 999px is not. */
.bt2-floating-tick-cycle {
  position: fixed; z-index: 1000; box-sizing: border-box;
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: .22rem;
  width: 330px; max-width: calc(100vw - 1rem); min-height: 2.5rem;
  padding: .12rem .22rem .12rem .32rem;
  border-radius: 18px;
  border: 1px solid rgba(226, 182, 104, .32);
  background: linear-gradient(160deg, rgba(28, 22, 11, .94), rgba(10, 8, 4, .96));
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .48);
  opacity: .56;
  transition: opacity .16s ease, box-shadow .16s ease;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.bt2-floating-tick-cycle:hover,
.bt2-floating-tick-cycle:focus-within,
.bt2-floating-tick-cycle--dragging {
  opacity: 1; box-shadow: 0 .7rem 1.8rem rgba(0, 0, 0, .64);
}
/* A touch device never hovers, so the dimmed resting state was permanent
   there — including on Stop, which is the one control a member reaches for in
   a hurry. Full strength on anything without a fine pointer. */
@media (hover: none), (pointer: coarse) {
  .bt2-floating-tick-cycle { opacity: 1; }
}
/* The widget lives on document.body, outside .bt2-workspace, so it needs its
   own copy of the rule that makes `el.hidden` beat `display: inline-flex`. */
.bt2-floating-tick-cycle [hidden] { display: none !important; }

.bt2-floating-tick-cycle-drag-handle {
  display: inline-flex; cursor: grab; touch-action: none;
}
.bt2-floating-tick-cycle--dragging .bt2-floating-tick-cycle-drag-handle { cursor: grabbing; }
/* the counter is a drag surface, not a control */
.bt2-floating-tick-cycle .bt2-tick-cycle { pointer-events: none; }

.bt2-tick-cycle {
  display: inline-flex; align-items: center; gap: .2rem; vertical-align: top;
  padding: .2rem .32rem; border-radius: 999px;
  background: rgba(0, 0, 0, .4); border: 1px solid rgba(226, 182, 104, .26);
}
.bt2-tick-cycle-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  font-size: .76rem; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: rgba(208, 180, 136, .6);
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.bt2-tick-cycle-step--active {
  color: #1a1204; background: linear-gradient(150deg, #f9c750, #c68c2c);
  transform: scale(1.06);
}
.bt2-tick-cycle-light {
  width: .5rem; height: .5rem; margin-left: .06rem; border-radius: 50%;
  background: rgba(208, 180, 136, .26);
  transition: background .16s ease, box-shadow .16s ease;
}
/* 180ms, and only on the tick that fired — the one place a green reading is
   the truth rather than decoration. */
.bt2-tick-cycle-light--active {
  background: #a9d472; box-shadow: 0 0 .6rem rgba(169, 212, 114, .8);
}
@media (prefers-reduced-motion: reduce) {
  .bt2-tick-cycle-step, .bt2-tick-cycle-light, .bt2-floating-tick-cycle { transition: none; }
  .bt2-tick-cycle-step--active { transform: none; }
}

.bt2-tick-cycle-auto-toggle {
  display: inline-flex; align-items: center; gap: .2rem;
  min-width: 3.2rem; min-height: 2rem; padding: .18rem .34rem;
  border-radius: 999px; font: inherit; font-size: .66rem; font-weight: 800;
  line-height: 1; letter-spacing: .04em; cursor: pointer;
  touch-action: manipulation;
  color: rgba(208, 180, 136, .82);
  background: rgba(0, 0, 0, .36);
  border: 1px solid rgba(226, 182, 104, .34);
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.bt2-tick-cycle-auto-toggle:disabled { opacity: .46; cursor: not-allowed; }
.bt2-tick-cycle-auto-toggle--on {
  color: #ffe9b0; background: rgba(226, 166, 58, .2); border-color: #f9c750;
}
.bt2-tick-cycle-auto-toggle-knob {
  flex: 0 0 .7rem; width: .7rem; height: .7rem; border-radius: 50%;
  background: rgba(208, 180, 136, .52);
  box-shadow: 0 0 0 .08rem rgba(255, 255, 255, .08);
  transition: background .16s ease, box-shadow .16s ease;
}
.bt2-tick-cycle-auto-toggle--on .bt2-tick-cycle-auto-toggle-knob {
  background: #f9c750; box-shadow: 0 0 .45rem rgba(249, 199, 80, .9);
}
.bt2-tick-cycle-auto-toggle-label { pointer-events: none; white-space: nowrap; }

/* Skip AI — bronze, the dimmest of the four, because it is the owner's switch */
.bt2-tick-cycle-skip-ai-toggle {
  min-width: 4.2rem; color: rgba(222, 205, 172, .88);
  border-color: rgba(208, 180, 136, .5);
}
.bt2-tick-cycle-skip-ai-toggle.bt2-tick-cycle-auto-toggle--on {
  color: #f3e7cd; background: rgba(208, 180, 136, .2); border-color: rgba(228, 210, 171, .95);
}
.bt2-tick-cycle-skip-ai-toggle.bt2-tick-cycle-auto-toggle--on .bt2-tick-cycle-auto-toggle-knob {
  background: #e4d2ab; box-shadow: 0 0 .45rem rgba(228, 210, 171, .8);
}

/* Green trigger — honey. It is named "Green" after the reference's green loss
   digit, so it is deliberately NOT painted green: in this app green means
   live, and the only green thing here is the light that says a batch fired. */
.bt2-tick-cycle-green-trigger-toggle {
  min-width: 4rem; color: rgba(236, 187, 118, .92);
  border-color: rgba(232, 172, 82, .5);
}
.bt2-tick-cycle-green-trigger-toggle.bt2-tick-cycle-auto-toggle--on {
  color: #ffdfae; background: rgba(232, 172, 82, .22); border-color: #e8ac52;
}
.bt2-tick-cycle-green-trigger-toggle.bt2-tick-cycle-auto-toggle--on .bt2-tick-cycle-auto-toggle-knob {
  background: #e8ac52; box-shadow: 0 0 .45rem rgba(232, 172, 82, .85);
}

/* Double Green scan — amber, the reference's own hue for this control */
.bt2-tick-cycle-double-green-toggle {
  min-width: 4.4rem; color: rgba(240, 198, 116, .92);
  border-color: rgba(240, 168, 48, .55);
}
.bt2-tick-cycle-double-green-toggle.bt2-tick-cycle-auto-toggle--on {
  color: #ffe2b0; background: rgba(240, 168, 48, .24); border-color: #f0a830;
}
.bt2-tick-cycle-double-green-toggle.bt2-tick-cycle-auto-toggle--on .bt2-tick-cycle-auto-toggle-knob {
  background: #f0a830; box-shadow: 0 0 .45rem rgba(240, 168, 48, .85);
}

.bt2-tick-cycle-direct-contract {
  min-width: 2.75rem; min-height: 2rem; padding: .18rem .34rem;
  border-radius: 999px; font: inherit; font-size: .62rem; font-weight: 800;
  line-height: 1; letter-spacing: .04em; cursor: pointer;
  touch-action: manipulation;
  color: #ffe6a4; background: rgba(236, 185, 73, .13);
  border: 1px solid rgba(236, 185, 73, .72);
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
/* The reference kills the outline on :focus-visible here. This app does the
   opposite deliberately — polish.css's gold ring is the only keyboard focus
   indicator in the whole product — so the colour change is kept and the ring
   is left alone. */
.bt2-tick-cycle-direct-contract:hover,
.bt2-tick-cycle-direct-contract:focus-visible {
  color: #fff6d5; background: rgba(236, 185, 73, .26); border-color: #ffe6a4;
}

.bt2-tick-cycle-stop {
  min-height: 2rem; padding: .18rem .48rem; border-radius: 999px;
  font: inherit; font-size: .66rem; font-weight: 800; line-height: 1;
  letter-spacing: .04em; cursor: pointer; touch-action: manipulation;
  color: #ffd8df; background: rgba(239, 68, 68, .17);
  border: 1px solid rgba(239, 68, 68, .9);
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.bt2-tick-cycle-stop:hover,
.bt2-tick-cycle-stop:focus-visible {
  color: #fff; background: rgba(239, 68, 68, .32); border-color: #ff7f94;
}

/* The house disclosure, on its own row under the controls. It is the only line
   in the widget that is not the reference's. */
.bt2-floating-tick-cycle .bt2-hint {
  flex: 1 0 100%; margin: 2px 6px 4px; font-size: 9px; line-height: 1.45;
  color: rgba(208, 180, 136, .5);
}