/* ============================================================================
   09-desk.css — the tiered-AI desk page. Builds on the .bp-* design system
   (06-bot-page.css) + the global tokens (01-tokens.css). Everything here is
   namespaced .dk-* so it never collides with the bot pages.
   ========================================================================== */

/* ---- shared bits -------------------------------------------------------- */
.dk-eyebrow {
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.dk-tier-tag {
  display: inline-flex; align-items: center; gap: .35em;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent-secondary);
  border: 1px solid rgba(95, 76, 254, .35);
}
.dk-lean { font-weight: 600; }
.dk-lean--long  { color: var(--up-bright); }
.dk-lean--short { color: var(--down-bright); }
.dk-lean--neutral { color: var(--text-tertiary); }

/* ====================================================================== */
/* 1. THE THINKING BRAIN — hero box                                        */
/* ====================================================================== */
.dk-brain {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(95, 76, 254, .14) 0%, rgba(95, 76, 254, 0) 42%),
    linear-gradient(180deg, #16151f 0%, var(--bg-surface) 60%);
  border: 1px solid rgba(95, 76, 254, .32);
  box-shadow: 0 0 0 1px rgba(95, 76, 254, .05), 0 18px 50px -28px rgba(95, 76, 254, .55);
  margin-bottom: 16px;
}
.dk-brain__rail {                       /* animated accent rail at the very top */
  height: 2px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent-secondary) 50%, var(--accent) 70%, transparent);
  background-size: 200% 100%; animation: dk-rail 4.5s linear infinite;
}
@keyframes dk-rail { to { background-position: -200% 0; } }

.dk-brain__head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px 10px;
}
.dk-brain__icon {
  width: 34px; height: 34px; display: grid; place-items: center; flex: none;
  border-radius: 9px; font-size: 18px;
  background: var(--accent-soft); border: 1px solid rgba(95, 76, 254, .35);
  box-shadow: 0 0 18px -4px var(--accent-glow);
}
.dk-brain__title { font-size: 15px; font-weight: 500; color: var(--text-primary); }
.dk-brain__title .dk-brain__sub { font-size: 11.5px; color: var(--text-tertiary); font-weight: 350; }
.dk-brain__meta { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dk-brain__chip {
  font-size: 11px; font-family: var(--font-mono); color: var(--text-secondary);
  background: var(--bg-inset); border: 1px solid var(--border-subtle);
  padding: 2px 9px; border-radius: var(--radius-pill);
}
.dk-brain__chip b { color: var(--text-primary); font-weight: 600; }
.dk-live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--up); box-shadow: 0 0 0 0 rgba(38, 166, 154, .6); animation: dk-pulse 2s infinite;
}
@keyframes dk-pulse { 70% { box-shadow: 0 0 0 6px rgba(38, 166, 154, 0); } 100% { box-shadow: 0 0 0 0 rgba(38, 166, 154, 0); } }

.dk-brain__body { padding: 4px 18px 16px; }
.dk-brain__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; }
@media (max-width: 900px) { .dk-brain__grid { grid-template-columns: 1fr; } }

.dk-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 7px;
}

/* the reasoning prose */
.dk-think {
  font-size: 13.5px; line-height: 1.62; color: var(--text-secondary);
  white-space: pre-wrap; border-left: 2px solid rgba(95, 76, 254, .5);
  padding: 2px 0 2px 13px;
}
.dk-think--empty { color: var(--text-muted); font-style: italic; border-left-color: var(--border-default); }

/* the decision summary block */
.dk-decision { display: flex; flex-direction: column; gap: 10px; }
.dk-dec-row { font-size: 12.5px; }
.dk-dec-row .dk-dec-k { color: var(--text-tertiary); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: 3px; }
.dk-dec-row .dk-dec-v { color: var(--text-secondary); line-height: 1.5; }
.dk-pick {
  display: inline-flex; align-items: center; gap: .3em; margin: 2px 4px 2px 0;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  padding: 2px 9px; border-radius: var(--radius-sm);
  background: var(--up-soft); color: var(--up-bright); border: 1px solid rgba(38, 166, 154, .3);
}
.dk-pick--drop,
.dk-pick--short { background: var(--down-softer); color: var(--down-bright); border-color: rgba(239, 83, 80, .28); }

/* ---- the tool-call investigation trace (terminal-ish) ------------------ */
.dk-tools { margin-top: 14px; }
.dk-tool {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--bg-inset); margin-bottom: 6px; overflow: hidden;
}
.dk-tool__head {
  display: flex; align-items: center; gap: 9px; padding: 7px 11px;
  font-family: var(--font-mono); font-size: 11.5px;
}
.dk-tool__n { color: var(--text-muted); font-size: 10px; min-width: 16px; }
.dk-tool__name {
  color: var(--accent-secondary); font-weight: 600;
  background: var(--accent-softer); padding: 1px 7px; border-radius: var(--radius-sm);
}
.dk-tool__args { color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
/* collapsed-by-default tool rows: <details>/<summary>, click the head to expand */
details.dk-tool > summary { cursor: pointer; list-style: none; user-select: none; }
details.dk-tool > summary::-webkit-details-marker { display: none; }
.dk-tool__chev { margin-left: auto; color: var(--text-muted); font-size: 9px; flex: none; transition: transform .15s ease; }
details.dk-tool[open] .dk-tool__chev { transform: rotate(90deg); }
details.dk-tool > summary:hover { background: var(--bg-surface-strong); }
.dk-tool__args-full {
  padding: 8px 12px 2px; border-top: 1px dashed var(--border-subtle);
  font-family: var(--font-mono); font-size: 11px; line-height: 1.5;
  color: var(--text-tertiary); white-space: pre-wrap; word-break: break-all;
}
.dk-tool__out {
  padding: 8px 12px 10px; border-top: 1px dashed var(--border-subtle);
  font-family: var(--font-mono); font-size: 11px; line-height: 1.55; color: var(--text-secondary);
  white-space: pre-wrap; max-height: 200px; overflow: auto;
}
/* ---- the stepper timeline ---------------------------------------------- */
.dk-stepper {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--border-subtle);
}
.dk-stepper__track { display: flex; gap: 5px; overflow-x: auto; flex: 1; padding-bottom: 2px; }
.dk-step {
  flex: none; cursor: pointer; min-width: 58px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  background: var(--bg-surface); padding: 5px 8px; text-align: center;
  transition: border-color .2s var(--ease-out), background .2s var(--ease-out);
}
.dk-step:hover { border-color: var(--border-strong); background: var(--bg-surface-raised); }
.dk-step.is-active { border-color: var(--accent); background: var(--accent-softer); box-shadow: inset 0 0 0 1px rgba(95,76,254,.35); }
/* FULL-session opens get a faint accent border so they stand out from pulses */
.dk-step--open { border-color: rgba(95,76,254,.32); }
.dk-step__t { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); font-weight: 600; white-space: nowrap; }
.dk-step__utc { font-size: 8.5px; color: var(--text-muted); font-weight: 400; }
.dk-step__s { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.dk-step--open .dk-step__s { color: var(--accent-secondary); }
.dk-step__dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-top: 3px; }
.dk-step__dot--select { background: var(--accent); }
.dk-step__dot--manage { background: var(--warning); }
.dk-step-arrow {
  flex: none; width: 26px; height: 26px; border-radius: var(--radius-sm); cursor: pointer;
  display: grid; place-items: center; color: var(--text-secondary);
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
}
.dk-step-arrow:hover { border-color: var(--accent); color: var(--text-primary); }

.dk-brain__empty { padding: 26px 20px 30px; text-align: center; color: var(--text-tertiary); }
.dk-brain__empty .dk-be-icon { font-size: 30px; opacity: .5; }
.dk-brain__empty h4 { margin: 10px 0 5px; font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.dk-brain__empty p { font-size: 12.5px; max-width: 460px; margin: 0 auto; line-height: 1.55; }

/* ====================================================================== */
/* 2. DECISION CASCADE — the tiers                                         */
/* ====================================================================== */
.dk-cascade__sesshead {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}
.dk-cascade__theme { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }

.dk-tier { position: relative; padding-left: 18px; margin-bottom: 14px; }
.dk-tier::before {                         /* the vertical spine connecting tiers */
  content: ""; position: absolute; left: 5px; top: 4px; bottom: -14px; width: 2px;
  background: linear-gradient(180deg, var(--accent) 0%, rgba(95,76,254,.15) 100%);
}
.dk-tier:last-child::before { display: none; }
.dk-tier::after {
  content: ""; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg-surface); border: 2px solid var(--accent);
}
.dk-tier__head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 8px; }
.dk-tier__num { font-size: 11px; font-weight: 700; color: var(--accent-secondary); letter-spacing: .04em; }
.dk-tier__name { font-size: 13.5px; font-weight: 500; color: var(--text-primary); }
.dk-tier__hint { font-size: 11px; color: var(--text-muted); margin-left: auto; }

/* ---- Tier-2 brief cards ------------------------------------------------ */
/* compact selectable cards (master) — never grow tall; the detail is a separate drawer */
.dk-briefs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 7px; }
.dk-brief {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--bg-surface); cursor: pointer; transition: border-color .15s var(--ease-out), background .15s var(--ease-out);
}
.dk-brief:hover { border-color: var(--border-default); background: var(--bg-surface-raised); }
.dk-brief.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px rgba(95,76,254,.3); }
.dk-brief__head { display: flex; align-items: center; gap: 7px; padding: 8px 10px 4px; }
.dk-brief__sym { font-family: var(--font-mono); font-weight: 600; font-size: 12.5px; color: var(--text-primary); }
.dk-brief__prop { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); padding: 0 10px 8px; }

/* full-width detail drawer (detail) — bull/bear SIDE BY SIDE so it's wide, not tall */
.dk-brief-detail { margin-top: 9px; }
.dk-bdetail {
  border: 1px solid var(--accent); border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(95,76,254,.05), var(--bg-inset) 60%);
  padding: 11px 13px; margin-top: 2px;
}
.dk-bdetail__head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 10px; }
.dk-bdetail__close {
  margin-left: auto; cursor: pointer; background: var(--bg-surface); color: var(--text-tertiary);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); width: 24px; height: 22px; font-size: 11px;
}
.dk-bdetail__close:hover { border-color: var(--down); color: var(--down-bright); }
.dk-bdetail__cases { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 9px; }
@media (max-width: 720px) { .dk-bdetail__cases { grid-template-columns: 1fr; } }
.dk-case { font-size: 12.5px; line-height: 1.55; }
.dk-case__k { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; }
.dk-case--bull .dk-case__k { color: var(--up-bright); }
.dk-case--bear .dk-case__k { color: var(--down-bright); }
.dk-case__v { color: var(--text-secondary); }
.dk-brief__extra { font-size: 11.5px; color: var(--text-tertiary); line-height: 1.5; border-top: 1px dashed var(--border-subtle); padding-top: 7px; margin-top: 7px; }
.dk-brief__extra b { color: var(--text-secondary); font-weight: 600; }

/* the conviction meter */
.dk-conv { display: inline-flex; align-items: center; gap: 5px; }
.dk-conv__bar { width: 46px; height: 5px; border-radius: 3px; background: var(--bg-inset); overflow: hidden; }
.dk-conv__fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-secondary)); }
.dk-conv__n { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); }

/* ---- Tier-1 bull/bear bars (inline accordion) -------------------------- */
.dk-bb { display: flex; flex-direction: column; gap: 4px; }
.dk-bb__item { border-radius: var(--radius-sm); }
.dk-bb__item.is-open { background: var(--bg-inset); box-shadow: inset 2px 0 0 var(--accent); }
.dk-bb__row {
  display: grid; grid-template-columns: 96px 1fr 92px; align-items: center; gap: 10px;
  padding: 5px 8px; border-radius: var(--radius-sm); cursor: pointer;
  transition: background .15s var(--ease-out);
}
.dk-bb__row:hover { background: var(--bg-surface-raised); }
.dk-bb__chev { color: var(--text-muted); font-size: 10px; display: inline-block; transition: transform .2s var(--ease-out); }
.dk-bb__item.is-open .dk-bb__chev { transform: rotate(90deg); color: var(--accent-secondary); }
.dk-bb__detail { padding: 2px 8px 8px; }
.dk-bb__sym { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.dk-bb__bar { display: flex; height: 16px; border-radius: 4px; overflow: hidden; background: var(--bg-inset); }
.dk-bb__seg { display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700; font-family: var(--font-mono); transition: width .4s var(--ease-out); min-width: 0; }
/* muted/translucent fills so the bars sit at the same intensity as the chips
   and tiles elsewhere on the page (was solid --up/--down, too neon) */
.dk-bb__seg--bull { background: rgba(38, 166, 154, .42); color: var(--text-primary); }
.dk-bb__seg--neutral { background: rgba(255,255,255,.10); color: var(--text-tertiary); }
.dk-bb__seg--bear { background: rgba(239, 83, 80, .40); color: var(--text-primary); }
.dk-bb__tally { font-family: var(--font-mono); font-size: 11px; text-align: right; white-space: nowrap; }
.dk-bb__tally .up { color: var(--up); } .dk-bb__tally .down { color: var(--down); }
.dk-bb__tally .up, .dk-bb__tally .down { letter-spacing: .12em; }   /* breathe between count + arrow */

/* the per-symbol panel drill */
.dk-panel { margin-top: 8px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-inset); padding: 10px 12px; }
.dk-panel__title { font-family: var(--font-mono); font-weight: 600; font-size: 12.5px; color: var(--text-primary); margin-bottom: 8px; }
.dk-deskcard { border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-surface); margin-bottom: 6px; padding: 8px 10px; }
.dk-deskcard__head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.dk-deskcard__name { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.dk-deskcard__read { font-size: 11.5px; color: var(--text-tertiary); line-height: 1.45; margin-bottom: 6px; }
.dk-votes { display: flex; flex-wrap: wrap; gap: 5px; }
.dk-vote {
  display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 10px;
  padding: 2px 7px; border-radius: var(--radius-pill); border: 1px solid var(--border-subtle); background: var(--bg-inset);
}
.dk-vote__m { color: var(--text-muted); }
.dk-vote--long  { border-color: rgba(38,166,154,.4); } .dk-vote--long .dk-vote__l { color: var(--up-bright); }
.dk-vote--short { border-color: rgba(239,83,80,.4); }  .dk-vote--short .dk-vote__l { color: var(--down-bright); }
.dk-vote--neutral .dk-vote__l { color: var(--text-tertiary); }
.dk-agree { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }

/* ====================================================================== */
/* 3. LOWER-PANEL TABLES — Live book / Recent closed / Brain edge          */
/*    .dk-tbl rides ALONGSIDE .data-table (so the existing .dk-table-scroll */
/*    mobile rules in this file still match `table.data-table`). It reskins */
/*    those three generic tables into the .dk-* card idiom: framed on       */
/*    --bg-inset, uppercase accent-muted header, mono numerics, hover rows, */
/*    and the same muted green/red intensity used by the bull/bear bars.    */
/* ====================================================================== */
.dk-tbl { width: 100%; border-collapse: separate; border-spacing: 0; }

/* header — flat caps treatment matching .dk-section-label / .dk-tier__num */
.dk-tbl > thead > tr > th {
  position: sticky; top: 0; z-index: 1;
  padding: 8px 12px;
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border-default);
  text-align: left; white-space: nowrap;
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted);
}
.dk-tbl > thead > tr > th.num { text-align: right; }

/* body — rows on the card surface; framed by the wrapper, hairline dividers */
.dk-tbl > tbody > tr {
  transition: background .12s var(--ease-out);
}
.dk-tbl > tbody > tr:hover { background: var(--bg-surface-raised); }
.dk-tbl > tbody > tr:nth-child(even) { background: rgba(255, 255, 255, .012); }
.dk-tbl > tbody > tr:nth-child(even):hover { background: var(--bg-surface-raised); }
.dk-tbl > tbody > tr > td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.dk-tbl > tbody > tr:last-child > td { border-bottom: none; }
.dk-tbl > tbody > tr > td.num {
  text-align: right; font-family: var(--font-mono);
}
.dk-tbl td.dim  { color: var(--text-tertiary); }
.dk-tbl td.mono { font-family: var(--font-mono); }

/* directional numerics — MUTED (not the neon --up-bright/--down-bright); the
   R column reads as a soft chip at the same intensity as the bull/bear bars */
.dk-tbl td.num.up,
.dk-tbl td.dk-r--pos { color: var(--up); }
.dk-tbl td.num.down,
.dk-tbl td.dk-r--neg { color: var(--down); }
.dk-tbl td.dk-r--pos,
.dk-tbl td.dk-r--neg {
  font-weight: 600;
}
/* the soft R cell — a faint tinted background so wins/losses scan at a glance
   without shouting (mirrors .dk-pick / .dk-vote translucency) */
.dk-tbl td.dk-r {
  font-family: var(--font-mono); text-align: right; font-weight: 600;
}
.dk-tbl td.dk-r .dk-r__chip {
  display: inline-block; min-width: 48px; text-align: right;
  padding: 1px 7px; border-radius: var(--radius-sm);
  border: 1px solid transparent;
}
.dk-tbl td.dk-r--pos .dk-r__chip {
  background: var(--up-soft); border-color: rgba(38, 166, 154, .28); color: var(--up-bright);
}
.dk-tbl td.dk-r--neg .dk-r__chip {
  background: var(--down-softer); border-color: rgba(239, 83, 80, .26); color: var(--down-bright);
}

/* symbol cell — promote it slightly like the brief/panel symbol tokens */
.dk-tbl td .bp-sym { font-weight: 600; }

/* Live-book Dir pill sits in table column 2 and would otherwise inherit the
   bot-status "uniform State pill" sizing (06-bot-page.css:1898 — min-width:110px,
   font-size:10.5px) that stretches the compact ▲ LONG / ▼ SHORT label. Opt the
   Dir cell out so it matches the compact bp-pill idiom used by the IDENTICAL
   pill in _trade_mgmt.html (rendered in a div, so naturally compact). The
   06-bot-page rule is `.bp-panel table.data-table td:nth-child(2) .bp-pill`
   (0,4,2) so we match its scope and add .dk-dir to outscore it (0,5,2). */
.bp-panel table.data-table td:nth-child(2).dk-dir .bp-pill {
  min-width: 0;
  padding: 2px 8px;
  font-size: 11px;
}

/* thesis / overflow text cell stays subdued and clipped */
.dk-tbl td.dk-tbl__note {
  color: var(--text-tertiary); font-size: 12px; line-height: 1.4;
  max-width: 320px;
}

/* the framed wrapper — gives every desk table a consistent inset border &
   radius so it matches .dk-tool / .dk-panel rather than sitting flush-edge.
   Sits on the existing .bp-table-scroll/.dk-table-scroll wrapper. */
.dk-tbl-frame {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  overflow: hidden;
}
.dk-tbl-frame.bp-table-scroll { overflow-x: auto; }

/* empty state inside a dk table */
.dk-tbl__empty {
  text-align: center; padding: 18px 14px !important;
  color: var(--text-tertiary); font-size: 12px;
}

/* ====================================================================== */
/* 4. RUN CONTROLS — jack-only pause/resume of desk order placement        */
/*    Card lives outside #desk-body (no auto-refresh wipe); the toggle     */
/*    view re-renders just #dk-controls in place via HTMX.                  */
/* ====================================================================== */
.dk-controls { display: flex; flex-direction: column; gap: 12px; }
.dk-controls__status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dk-controls__label {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-muted);
}
.dk-controls__badge {
  font-family: var(--font-mono); font-weight: 600; letter-spacing: .02em;
  text-transform: none; padding: 3px 10px; border-radius: var(--radius-pill);
}
.dk-controls__badge--on  { background: var(--up-soft); color: var(--up-bright); border: 1px solid rgba(38,166,154,.32); }
.dk-controls__badge--off { background: var(--warning-soft); color: var(--warning); border: 1px solid rgba(247,185,85,.32); }

/* which broker accounts the toggle affects */
.dk-controls__accts { display: flex; flex-wrap: wrap; gap: 10px; }
.dk-controls__acct {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle); background: var(--bg-inset);
}
.dk-controls__acct-key { font-size: 11.5px; color: var(--text-secondary); }
.dk-controls__tag {
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 1px 6px; border-radius: var(--radius-xs);
}
.dk-controls__tag--primary { background: rgba(146,137,254,.16); color: var(--accent-secondary); }
.dk-controls__tag--mirror  { background: rgba(255,255,255,.06); color: var(--text-tertiary); }
.dk-controls__tag--live    { background: var(--down-softer); color: var(--down-bright); border: 1px solid rgba(239,83,80,.32); }
.dk-controls__tag--demo    { background: rgba(255,255,255,.05); color: var(--text-muted); }

.dk-controls__buttons { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dk-controls__btn--pause  { border-color: rgba(247,185,85,.45); color: var(--warning); }
.dk-controls__btn--pause:hover  { background: var(--warning-soft); border-color: var(--warning); }
.dk-controls__btn--resume { border-color: rgba(38,166,154,.45); color: var(--up-bright); }
.dk-controls__btn--resume:hover { background: var(--up-soft); border-color: var(--up); }

.dk-controls__result {
  display: flex; flex-direction: column; gap: 4px;
  padding: 9px 12px; border-radius: var(--radius-md); font-size: 12px;
}
.dk-controls__result--fail { background: var(--down-softer); border: 1px solid rgba(239,83,80,.32); color: var(--down-bright); }
.dk-controls__result strong { font-weight: 600; }
.dk-controls__err { color: var(--text-secondary); font-family: var(--font-mono); font-size: 11px; line-height: 1.5; }

/* ====================================================================== */
/* TRADE MANAGEMENT (jack-only): margin table + mirror parity + closes.    */
/*    Re-rendered in place (#dk-trade-mgmt) by the close endpoints. Rides   */
/*    the .dk-* idiom (tags, tbl-frame, bp-pill).                           */
/* ====================================================================== */
.dk-tm { display: flex; flex-direction: column; gap: 16px; }
.dk-tm__section { display: flex; flex-direction: column; gap: 8px; }
.dk-tm__section-title {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-secondary);
}
.dk-tm__section-title .muted { font-weight: 400; text-transform: none; letter-spacing: 0; }
.dk-tm__hint { font-size: 11.5px; line-height: 1.5; }
.dk-tm__hint code {
  font-family: var(--font-mono); font-size: 11px;
  background: var(--bg-inset); padding: 1px 4px; border-radius: var(--radius-xs);
}

/* result banner (close ok/fail) */
.dk-tm__result {
  display: flex; flex-direction: column; gap: 6px;
  padding: 9px 12px; border-radius: var(--radius-md); font-size: 12px;
}
.dk-tm__result.is-ok   { background: var(--up-soft);    border: 1px solid rgba(38,166,154,.32); color: var(--up-bright); }
.dk-tm__result.is-fail { background: var(--down-softer); border: 1px solid rgba(239,83,80,.32); color: var(--down-bright); }
.dk-tm__result strong { font-weight: 600; }
.dk-tm__tail {
  margin: 0; font-family: var(--font-mono); font-size: 11px; line-height: 1.55;
  color: var(--text-secondary); white-space: pre-wrap; overflow-wrap: anywhere;
}

/* accounts table — closeout hot flag */
.dk-tm-accts td.num .dk-tm-hot { color: var(--down-bright); font-weight: 700; }

/* open-position cards */
.dk-tm__positions { display: flex; flex-direction: column; gap: 8px; }
.dk-tm-pos {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--bg-inset); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.dk-tm-pos.is-gap { border-color: rgba(247,185,85,.45); background: var(--warning-soft); }
.dk-tm-pos__head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.dk-tm-pos__sym { font-size: 13px; }
.dk-tm-pos__count { font-size: 11px; }
.dk-tm-flag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 1px 7px; border-radius: var(--radius-pill);
}
.dk-tm-flag--gap { background: var(--warning-soft); color: var(--warning); border: 1px solid rgba(247,185,85,.4); }

/* per-account presence badges (each carries an inline close form when present) */
.dk-tm-pos__accts { display: flex; flex-wrap: wrap; gap: 7px; }
.dk-tm-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; padding: 3px 8px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle); background: var(--bg-surface);
}
.dk-tm-badge.is-on  { border-color: rgba(38,166,154,.4);  color: var(--text-primary); }
.dk-tm-badge.is-off { border-color: rgba(239,83,80,.28); color: var(--text-tertiary); opacity: .82; }
.dk-tm-badge__dot { font-weight: 700; }
.dk-tm-badge.is-on  .dk-tm-badge__dot { color: var(--up-bright); }
.dk-tm-badge.is-off .dk-tm-badge__dot { color: var(--down-bright); }
.dk-tm-badge__name { font-size: 11px; }
.dk-tm-badge__live {
  font-size: 8.5px; font-weight: 700; letter-spacing: .05em;
  padding: 0 4px; border-radius: var(--radius-xs);
  background: var(--down-softer); color: var(--down-bright); border: 1px solid rgba(239,83,80,.32);
}
.dk-tm-badge__pend { font-size: 10px; }
.dk-tm-badge__form { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.dk-tm-badge__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0; line-height: 1;
  font-size: 11px; font-weight: 700; cursor: pointer;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(239,83,80,.4); background: var(--down-softer); color: var(--down-bright);
}
.dk-tm-badge__close:hover { background: var(--down); color: #fff; border-color: var(--down); }

/* per-account close-all row */
.dk-tm__closeall {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--border-subtle);
}
.dk-tm__closeall-lbl { font-size: 11px; flex-basis: 100%; }
.dk-tm__closeall-form { display: inline-flex; align-items: center; gap: 7px; margin: 0; }
.dk-tm__closeall-btn {
  border-color: rgba(239,83,80,.4); color: var(--down-bright);
}
.dk-tm__closeall-btn:hover { background: var(--down-softer); border-color: var(--down); }
.dk-tm__closeall-btn--live { border-color: rgba(239,83,80,.6); font-weight: 600; }
.dk-tm__closeall-btn--live:hover { background: var(--down); color: #fff; }
/* per-symbol "close all accounts" pill in the position header */
.dk-tm-pos__closeall-form { display: inline-flex; margin: 0; }
.dk-tm-pos__closeall {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; cursor: pointer;
  padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap;
  background: var(--down-softer); color: var(--down-bright);
  border: 1px solid rgba(239,83,80,.4);
}
.dk-tm-pos__closeall:hover { background: var(--down); color: #fff; border-color: var(--down); }

/* ====================================================================== */
/* MOBILE — responsive additions only (≤760 / ≤640 / ≤480).               */
/* Desktop layout above is untouched; everything here is additive.        */
/* ====================================================================== */

/* The brain-edge table in _body.html is wrapped in .bp-table-scroll for
   mobile scrolling; neutralise that wrapper's desktop min-width:640px
   (06-bot-page.css) so the half-grid desktop cell doesn't grow a
   scrollbar it never had. Same specificity, later file → wins.
   The Recent-closed table sits in the SAME grid--2 row (each half-grid
   cell is <640px on a ~1280px laptop) so it gets the identical override
   to avoid a spurious horizontal scrollbar on its 6 short columns. The
   ≤760 dk-table-scroll rules below re-assert a sensible mobile min-width. */
.dk-edge-scroll   > .data-table,
.dk-closed-scroll > .data-table { min-width: 0; }

@media (max-width: 760px) {
  /* -- desk tables opt OUT of the shared ≤760 card-flip ----------------
     06-bot-page.css:966ff hides thead and stacks cells as unlabeled
     blocks, which makes Units/Entry/Stop/Target/Conv indistinguishable
     bare numbers on the LIVE BOOK. Mirror the .bp-mfe precedent
     (06-bot-page.css:1115ff): keep real tables with their header row and
     scroll horizontally inside the card.
       .dk-table-scroll        — on the .bp-table-scroll wrapper
       .dk-table-scroll--wide  — 10-col live book needs more room
       .dk-table-scroll--fit   — narrow 4-col brain-edge table            */
  .bp-panel .bp-table-scroll.dk-table-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .bp-panel .dk-table-scroll > table.data-table {
    display: table !important;
    width: 100%;
    min-width: 560px !important;
  }
  .bp-panel .dk-table-scroll--wide > table.data-table { min-width: 760px !important; }
  .bp-panel .dk-table-scroll--fit  > table.data-table { min-width: 380px !important; }
  .bp-panel .dk-table-scroll > table.data-table thead { display: table-header-group !important; }
  .bp-panel .dk-table-scroll > table.data-table tbody { display: table-row-group !important; }
  .bp-panel .dk-table-scroll > table.data-table tr {
    display: table-row !important;
    padding: 0 !important; margin: 0 !important;
    border: 0 !important; background: transparent !important; border-radius: 0 !important;
  }
  .bp-panel .dk-table-scroll > table.data-table td {
    display: table-cell !important;
    width: auto !important;
    padding: 6px 10px !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* the session drill-down table is class bp-table (never card-flipped);
     it only needs its scroll container back + intrinsic width to lay out */
  .bp-panel .dk-table-scroll > table.bp-table { min-width: 640px; }

  /* -- tap targets ≥40px on touch ------------------------------------- */
  .dk-tool__head { min-height: 40px; padding-top: 9px; padding-bottom: 9px; }
  .dk-step { min-width: 64px; min-height: 44px; padding: 7px 10px; }
  .dk-step-arrow { width: 40px; height: 40px; }
  .dk-bb__row { min-height: 44px; }
  .dk-bdetail__close { width: 44px; height: 40px; font-size: 13px; }
  .dk-refresh { min-height: 40px; }

  /* -- stepper timeline: momentum scroll + snap ------------------------ */
  .dk-stepper__track {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }
  .dk-step { scroll-snap-align: center; }

  /* -- long mono/prose strings (args, hashes, theses, model output)
        must never push the viewport wider: break anywhere once a single
        token can't fit its column ------------------------------------- */
  .dk-think,
  .dk-dec-v,
  .dk-tool__out,
  .dk-tool__args-full,
  .dk-case__v,
  .dk-brief__extra,
  .dk-deskcard__read,
  .dk-cascade__theme { overflow-wrap: anywhere; }
}

@media (max-width: 640px) {
  /* -- brain hero: tighter chrome, chips flow left under the title ----- */
  .dk-brain__head { padding: 12px 14px 8px; gap: 10px; }
  .dk-brain__body { padding: 4px 14px 14px; }
  .dk-brain__meta { margin-left: 0; width: 100%; }
  .dk-brain__chip {
    display: inline-block; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    vertical-align: middle;
  }
  .dk-think { font-size: 13px; padding-left: 11px; }

  /* -- tier heads: the hint drops to its own line instead of squeezing
        the tier name on narrow screens -------------------------------- */
  .dk-tier__head { flex-wrap: wrap; row-gap: 2px; }
  .dk-tier__hint { margin-left: 0; flex-basis: 100%; }

  /* -- tier-1 bull/bear rows: re-flow from [sym|bar|tally] columns to
        sym + tally on top, full-width bar below ----------------------- */
  .dk-bb__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "sym tally" "bar bar";
    row-gap: 6px; padding: 8px;
  }
  .dk-bb__sym   { grid-area: sym; }
  .dk-bb__bar   { grid-area: bar; width: 100%; }
  .dk-bb__tally { grid-area: tally; }

  /* -- per-symbol panel drill: heads may wrap, lighter padding --------- */
  .dk-deskcard__head { flex-wrap: wrap; row-gap: 3px; }
  .dk-panel { padding: 9px 10px; }

  /* -- brief detail drawer ---------------------------------------------*/
  .dk-bdetail { padding: 10px 11px; }
  .dk-bdetail__head { row-gap: 4px; }
}

@media (max-width: 480px) {
  /* deterministic single-column briefs on the narrowest phones */
  .dk-briefs { grid-template-columns: 1fr; }
  .dk-tier { padding-left: 15px; }
  .dk-brain__icon { width: 30px; height: 30px; font-size: 16px; }
}

/* ====================================================================== */
/* TRADE CHART — Lightweight Charts panel (lives OUTSIDE #desk-body so the
   120s htmx auto-refresh never wipes the <canvas>). Namespaced .dk-chart-* */
/* ====================================================================== */
.dk-chart-card { margin-bottom: 14px; }

/* selector: two stacked rows (Open / Recent closed), each a scrollable strip */
.dk-chart-sel { display: flex; flex-direction: column; gap: 4px; margin: 0 0 6px; }
.dk-chart-selrow {
  display: flex; gap: 7px; flex-wrap: nowrap; overflow-x: auto; align-items: center;
  padding: 3px 2px; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.dk-chart-selrow--closed { opacity: .92; }
.dk-chart-selrow::-webkit-scrollbar { height: 6px; }
.dk-chart-selrow::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: var(--radius-pill);
}
.dk-chart-selrow__lbl {
  flex: 0 0 auto; font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted); padding-right: 4px;
  min-width: 78px;
}
.dk-chart-chip__sess {
  font-size: 9.5px; font-weight: 600; letter-spacing: .03em;
  padding: 1px 5px; border-radius: var(--radius-sm);
  background: var(--bg-surface-strong); color: var(--text-tertiary);
}
.dk-chart-chip--closed { background: var(--bg-surface); }
.dk-chart-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; cursor: pointer; white-space: nowrap;
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.2;
  color: var(--text-secondary);
  background: var(--bg-inset); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill); transition: border-color .12s, background .12s, color .12s;
}
.dk-chart-chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
.dk-chart-chip.is-active {
  background: var(--accent-soft); border-color: rgba(95, 76, 254, .5);
  color: var(--accent-secondary);
}
.dk-chart-chip__sym { font-weight: 600; }
.dk-chart-chip__dir--long  { color: var(--up-bright); }
.dk-chart-chip__dir--short { color: var(--down-bright); }
.dk-chart-chip__status {
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 1px 5px; border-radius: var(--radius-pill);
  background: var(--bg-surface-strong); color: var(--text-tertiary);
}
.dk-chart-chip__status--open    { background: var(--accent-soft); color: var(--accent-secondary); }
.dk-chart-chip__status--pending { background: var(--warning-soft); color: var(--warning); }
.dk-chart-chip__pnl.up   { color: var(--up-bright); }
.dk-chart-chip__pnl.down { color: var(--down-bright); }

/* readout: symbol/dir/entry/SL/TP/pnl/status row above the canvas */
.dk-chart-readout {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  padding: 8px 2px 10px; font-family: var(--font-mono); font-size: 12px;
  color: var(--text-secondary); min-height: 20px;
  border-bottom: 1px solid var(--border-faint);   /* anchor the metrics band above the canvas */
  margin-bottom: 8px;
}
.dk-chart-ro__item { display: inline-flex; align-items: baseline; gap: 5px; }
.dk-chart-ro__k {
  font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.dk-chart-ro__v { color: var(--text-primary); }
.dk-chart-ro__v.up   { color: var(--up-bright); }
.dk-chart-ro__v.down { color: var(--down-bright); }
.dk-chart-ro__sym { font-weight: 700; font-size: 13px; color: var(--text-primary); }
.dk-chart-ro__sl { color: var(--down-bright); }
.dk-chart-ro__tp { color: var(--up-bright); }
.dk-chart-ro__status {
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 1px 7px; border-radius: var(--radius-pill);
  background: var(--bg-surface-strong); color: var(--text-tertiary);
}
.dk-chart-ro__status--open    { background: var(--accent-soft); color: var(--accent-secondary); }
.dk-chart-ro__status--pending { background: var(--warning-soft); color: var(--warning); }
.dk-chart-ro__status--closed  { background: var(--bg-surface-strong); color: var(--text-tertiary); }

/* the canvas host — fixed height, LightweightCharts paints into it */
.dk-chart-host {
  position: relative; width: 100%; height: 360px;
  background: var(--bg-inset); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); overflow: hidden;
}
/* (chart wrapper corners are clipped by the host's overflow:hidden + radius) */
.dk-chart-msg {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 1rem; font-size: 12.5px; color: var(--text-tertiary);
  pointer-events: none;
}
.dk-chart-msg[hidden] { display: none; }

/* small inline legend of the overlay line styles */
.dk-chart-legend {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  padding: 8px 2px 2px; font-size: 10.5px; color: var(--text-tertiary);
  font-family: var(--font-mono);
}
.dk-chart-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.dk-chart-legend__swatch {
  width: 18px; height: 0; border-top-width: 2px; border-top-style: dashed; display: inline-block;
}
.dk-chart-legend__swatch--sl { border-top-color: var(--down-bright); }
.dk-chart-legend__swatch--tp { border-top-color: var(--up-bright); }
.dk-chart-empty {
  padding: 22px 14px; text-align: center; font-size: 12.5px; color: var(--text-tertiary);
}

@media (max-width: 640px) {
  .dk-chart-host { height: 260px; }
  .dk-chart-readout { gap: 5px 12px; font-size: 11.5px; }
}

/* ── $ equity + daily-P&L widget (shared: desk/midas/pluto) ─────────────────── */
.dk-eq-stats {
  display: flex; flex-wrap: wrap; gap: 8px 26px; padding: 2px 2px 12px;
  font-family: var(--font-mono);
}
.dk-eq-stat { display: inline-flex; flex-direction: column; gap: 2px; }
.dk-eq-stat__k { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); }
.dk-eq-stat__v { font-size: 16px; font-weight: 600; color: var(--text-secondary); }
.dk-eq-stat__v.up { color: var(--up-bright); }
.dk-eq-stat__v.down { color: var(--down-bright); }
.dk-eq-grid { gap: 14px; }
.dk-eq-block { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dk-eq-lbl {
  font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-tertiary); font-family: var(--font-mono); padding-left: 2px;
}
.dk-eq-host {
  position: relative; width: 100%; height: 230px;
  background: var(--bg-inset); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); overflow: hidden;
}
.dk-eq-msg {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 1rem; font-size: 12px; color: var(--text-tertiary); pointer-events: none;
}
.dk-eq-msg[hidden] { display: none; }
@media (max-width: 760px) { .dk-eq-host { height: 200px; } }

/* ── brain-edge bars (server-rendered; replaced the Plotly bar charts 2026-06-11) ── */
.dk-ebars { display: flex; flex-direction: column; gap: 7px; padding: 4px 2px 8px; }
.dk-ebar { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); }
.dk-ebar__lbl {
  flex: 0 0 148px; text-align: left; font-size: 11px; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dk-ebar__track {
  flex: 1 1 auto; height: 14px; background: var(--bg-inset);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); overflow: hidden;
}
.dk-ebar__fill { display: block; height: 100%; border-radius: inherit; }
.dk-ebar__fill--up { background: linear-gradient(90deg, rgba(38,166,154,.25), rgba(38,166,154,.65)); }
.dk-ebar__fill--down { background: linear-gradient(90deg, rgba(239,83,80,.25), rgba(239,83,80,.6)); }
.dk-ebar__val { flex: 0 0 64px; text-align: right; font-size: 11.5px; font-weight: 600; }
.dk-ebar__meta { flex: 0 0 86px; font-size: 10px; color: var(--text-tertiary); text-align: right; }
@media (max-width: 640px) { .dk-ebar__lbl { flex-basis: 110px; } .dk-ebar__meta { display: none; } }

/* ── RobBot strategy charts ─────────────────────────────────────────────── */
.rb-chart-host {
  position: relative; width: 100%; height: 400px;
  background: var(--bg-inset); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); overflow: hidden;
}
/* M15 trend panel: shorter context chart stacked above the M5 entry chart (Rob's view) */
.rb-chart-host--trend { height: 230px; }
.rb-tf-label { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; padding: 0 2px 4px; }
.rb-readout { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px 9px; min-height: 26px; }
.rb-chip {
  font-size: 10.5px; padding: 2px 9px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle); background: var(--bg-inset); color: var(--text-secondary);
}
.rb-chip.up { color: var(--up-bright); border-color: rgba(38,166,154,.35); }
.rb-chip.down { color: var(--down-bright); border-color: rgba(239,83,80,.35); }
.rb-chip.warn { color: #e8c552; border-color: rgba(232,197,82,.4); }
.rb-chip.win { color: var(--up-bright); }
.rb-chip.dim { color: var(--text-tertiary); }
.rb-chip.strong { font-weight: 700; }
@media (max-width: 900px) { .rb-chart-host { height: 320px; } }
.rb-len { display: inline-flex; gap: 2px; }
.rb-len-btn.is-active { border-color: var(--accent); color: var(--accent-secondary); }
/* robbot trigger log: clickable rows (HTMX-load the summons into the brain panel) + wrapping why cell */
.rb-trig { cursor: pointer; }
.rb-trig:hover td { background: var(--bg-inset); }
.rb-trig__why {
  max-width: 380px; white-space: normal; font-size: 11.5px; line-height: 1.45;
  color: var(--text-secondary);
}