/* Winston V3 — Trading Desk (Power mode). Operator command surface. */

#screen-desk .desk-statusbar { margin: var(--space-3) 0 var(--space-4); }

/* ── #099 per-sleeve chips replacing the global run-on line ──────── */
#screen-desk .desk-sleeve-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);   /* all five engines on one row */
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
/* Narrow desktop / tablet: two rows before falling back to the phone grid. */
@media (max-width: 1100px) {
  #screen-desk .desk-sleeve-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  #screen-desk .desk-sleeve-strip { grid-template-columns: repeat(2, 1fr); }
}
#screen-desk .desk-sleeve-chip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
}
#screen-desk .desk-sleeve-chip-name {
  font-size: var(--type-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--ink-muted);
  font-weight: var(--weight-bold);
}
#screen-desk .desk-sleeve-chip-cash {
  font-size: var(--type-md);
  font-weight: var(--weight-bold);
}
#screen-desk .desk-sleeve-chip-cap {
  font-size: var(--type-xs);
}

/* Per-sleeve color accent on the left edge — uses existing sleeve tokens. */
#screen-desk .desk-sleeve-chip[data-sleeve="swing"]    { box-shadow: inset 3px 0 0 var(--sleeve-swing); }
#screen-desk .desk-sleeve-chip[data-sleeve="scalp"]    { box-shadow: inset 3px 0 0 var(--sleeve-scalp); }   /* Intraday */
#screen-desk .desk-sleeve-chip[data-sleeve="rotation"] { box-shadow: inset 3px 0 0 var(--sleeve-rotation); }
#screen-desk .desk-sleeve-chip[data-sleeve="short"]    { box-shadow: inset 3px 0 0 var(--sleeve-short); }
#screen-desk .desk-sleeve-chip[data-sleeve="options"]  { box-shadow: inset 3px 0 0 var(--sleeve-options); }
#screen-desk .desk-sleeve-chip[data-sleeve="reversion"]{ box-shadow: inset 3px 0 0 var(--sleeve-reversion); }
#screen-desk .desk-sleeve-chip[data-sleeve="trend"]    { box-shadow: inset 3px 0 0 var(--sleeve-trend); }
#screen-desk .desk-sleeve-chip[data-sleeve="income"]   { box-shadow: inset 3px 0 0 var(--sleeve-income); }
#screen-desk .desk-sleeve-chip[data-sleeve="pead"]     { box-shadow: inset 3px 0 0 var(--sleeve-pead); }
#screen-desk .desk-sleeve-chip[data-sleeve="cta"]     { box-shadow: inset 3px 0 0 var(--sleeve-cta); }
#screen-desk .desk-sleeve-chip[data-sleeve="momentum"] { box-shadow: inset 3px 0 0 var(--sleeve-momentum); }

/* Three-state engine corral (matches Operations Agents card) ────────
   armed  = engine on + sleeve can fund a position (live color)
   staged = engine on but cash below per-position cap (amber)
   off    = engine disabled (grey, dim)

   Tracker #121: all three states carry an explicit text suffix so the
   chip never reads as just "SWING" — ambiguous between armed and a
   placeholder. Operations renders these as "ON · ARMED" / "ON · STAGED"
   / "OFF"; the Desk chip uses the shorter "· ARMED" / "· STAGED" /
   "· OFF" to fit the tighter strip layout. Same labels, same logic. */
#screen-desk .desk-sleeve-chip[data-state="armed"] .desk-sleeve-chip-name::after {
  content: ' · ARMED';
  color: var(--ok, var(--money-up));
  font-weight: var(--weight-bold);
}
/* L2 (UAT Stream F): solid amber outline + left bar for staged so it
   reads as "configured-but-waiting"; off keeps the muted/dashed look so
   the two states can never collapse into the same amber-grey band. */
#screen-desk .desk-sleeve-chip[data-state="staged"] {
  background: var(--warn-soft);
  border-color: var(--warn);
  box-shadow: inset 3px 0 0 var(--warn), inset -1px 0 0 var(--warn-soft);
}
#screen-desk .desk-sleeve-chip[data-state="staged"] .desk-sleeve-chip-name::after {
  content: ' · STAGED';
  color: var(--warn);
  font-weight: var(--weight-bold);
}
#screen-desk .desk-sleeve-chip[data-state="off"] {
  opacity: 0.55;
  background: var(--surface-2, var(--surface));
  border-style: dashed;
}
#screen-desk .desk-sleeve-chip[data-state="off"] .desk-sleeve-chip-name::after {
  content: ' · OFF';
  color: var(--ink-muted);
  font-weight: var(--weight-bold);
}

/* Below the per-sleeve strip: small global P&L + position-count row. */
#screen-desk .desk-globals {
  display: flex;
  flex-wrap: wrap;   /* phone: the nowrap cells would otherwise force ~430px page overflow */
  gap: var(--space-2) var(--space-4);
  font-size: var(--type-sm);
  color: var(--ink-muted);
  padding: 0 var(--space-1);
}
#screen-desk .desk-globals-cell { white-space: nowrap; }
#screen-desk .desk-globals-cell.up   { color: var(--money-up); }
#screen-desk .desk-globals-cell.down { color: var(--money-down); }

/* Position row keyboard-focus state — F hotkey target visibility (#100). */
#screen-desk .desk-table tbody tr[tabindex="0"]:focus {
  outline: 2px solid var(--ai);
  outline-offset: -2px;
  background: var(--ai-soft);
}

#screen-desk .desk-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-4);
}
@media (max-width: 1100px) {
  #screen-desk .desk-layout { grid-template-columns: 1fr; }
}
#screen-desk .desk-main { min-width: 0; }
#screen-desk .desk-ticket {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  align-self: start;
  position: sticky;
  top: calc(var(--top-bar-h) + var(--space-3));
}
@media (max-width: 1100px) {
  #screen-desk .desk-ticket { position: static; }
}
/* Tracker #141 H5 — collapse ticket. Header strip stays visible so the
   operator can re-expand; body (`[data-role="ticket-body"]`) hides. */
#screen-desk .desk-ticket .ticket-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
#screen-desk .desk-ticket[data-collapsed="true"] [data-role="ticket-body"] {
  display: none;
}
#screen-desk .desk-ticket[data-collapsed="true"] .ticket-header {
  margin-bottom: 0;
}
#screen-desk .desk-ticket[data-collapsed="true"] {
  padding: var(--space-3) var(--space-4);
}

/* ── Sub-tabs with counts ──────────────────────────────────────── */
#screen-desk .desk-subtab-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  border-bottom: 1px solid var(--border);
  margin: 0 0 var(--space-3);
}
#screen-desk .desk-subtab-row .desk-subtabs {
  border-bottom: none;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
#screen-desk .desk-subtab-refresh {
  flex-shrink: 0;
  padding-bottom: var(--space-2);
}
#screen-desk .desk-subtabs {
  display: flex;
  gap: var(--space-1);
  margin: 0 0 var(--space-3);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  overflow-y: hidden;  /* horizontal-only strip — block the coerced vertical scrollbar */
}
#screen-desk .desk-subtab {
  padding: var(--space-2) var(--space-4);
  border: none;
  background: transparent;
  color: var(--ink-muted);
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  flex-shrink: 0;
}
#screen-desk .desk-subtab:hover { color: var(--ink); }
#screen-desk .desk-subtab.is-active {
  color: var(--ai);
  border-bottom-color: var(--ai);
  font-weight: var(--weight-semi);
}
#screen-desk .desk-subtab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: var(--weight-semi);
  font-variant-numeric: tabular-nums;
}
#screen-desk .desk-subtab.is-active .desk-subtab-count {
  background: var(--ai);
  color: var(--ink-inverse);
}

/* ── Operator table primitive ──────────────────────────────────── */
#screen-desk .desk-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow-x: auto;
}
#screen-desk .desk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--type-sm);
  font-variant-numeric: tabular-nums;
}
#screen-desk .desk-table thead th {
  background: var(--surface-2);
  color: var(--ink-muted);
  font-weight: var(--weight-semi);
  font-size: var(--type-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
}
#screen-desk .desk-table th.num, #screen-desk .desk-table td.num {
  text-align: right;
  font-family: var(--font-mono);
}
#screen-desk .desk-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--hairline);
}
#screen-desk .desk-table tbody tr:hover td { background: var(--surface-hover); }
#screen-desk .desk-table td.up   { color: var(--money-up); font-weight: var(--weight-semi); }
#screen-desk .desk-table td.down { color: var(--money-down); font-weight: var(--weight-semi); }

#screen-desk .side-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
#screen-desk .side-pill[data-side="buy"]  { background: var(--money-up-soft);   color: var(--money-up); }
#screen-desk .side-pill[data-side="sell"] { background: var(--money-down-soft); color: var(--money-down); }

/* Engine (sleeve) pill on the Orders / Positions / Fills tables — which
   engine owns the row. Color-keyed off the shared --sleeve-* tokens so the
   engine reads at a glance and matches the statusbar sleeve chips + Money
   sleeve cards. Falls back to neutral surface for an unknown sleeve. */
#screen-desk .engine-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wide);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink-muted);
}
#screen-desk .engine-pill[data-engine="swing"]    { background: var(--sleeve-swing-soft);    color: var(--sleeve-swing);    border-color: transparent; }
#screen-desk .engine-pill[data-engine="scalp"]    { background: var(--sleeve-scalp-soft);    color: var(--sleeve-scalp);    border-color: transparent; }
#screen-desk .engine-pill[data-engine="rotation"] { background: var(--sleeve-rotation-soft); color: var(--sleeve-rotation); border-color: transparent; }
#screen-desk .engine-pill[data-engine="short"]    { background: var(--sleeve-short-soft);    color: var(--sleeve-short);    border-color: transparent; }
#screen-desk .engine-pill[data-engine="options"]  { background: var(--sleeve-options-soft);  color: var(--sleeve-options);  border-color: transparent; }
#screen-desk .engine-pill[data-engine="reversion"]{ background: var(--sleeve-reversion-soft); color: var(--sleeve-reversion); border-color: transparent; }
#screen-desk .engine-pill[data-engine="trend"]    { background: var(--sleeve-trend-soft);    color: var(--sleeve-trend);    border-color: transparent; }
#screen-desk .engine-pill[data-engine="income"]   { background: var(--sleeve-income-soft);   color: var(--sleeve-income);   border-color: transparent; }
#screen-desk .engine-pill[data-engine="pead"]     { background: var(--sleeve-pead-soft);     color: var(--sleeve-pead);     border-color: transparent; }
#screen-desk .engine-pill[data-engine="cta"]     { background: var(--sleeve-cta-soft);     color: var(--sleeve-cta);     border-color: transparent; }
#screen-desk .engine-pill[data-engine="momentum"] { background: var(--sleeve-momentum-soft); color: var(--sleeve-momentum); border-color: transparent; }

/* #110 — Order-status badge. Color + glyph + label so each Alpaca
   status reads at a glance instead of as undifferentiated muted text. */
#screen-desk .order-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--type-xs);
  font-weight: var(--weight-semi);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: 1.6;
}
#screen-desk .order-status-glyph {
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  line-height: 1;
}
/* Tones map to existing semantic tokens — done=money-up, error=money-down,
   partial+suspended=warn, dead+progress+live=muted grey shades. */
#screen-desk .order-status-pill[data-tone="done"]     { background: var(--money-up-soft);   color: var(--money-up); }
#screen-desk .order-status-pill[data-tone="partial"]  { background: var(--warn-soft);       color: var(--warn); }
#screen-desk .order-status-pill[data-tone="error"]    { background: var(--money-down-soft); color: var(--money-down); }
#screen-desk .order-status-pill[data-tone="live"]     { background: var(--ai-soft);         color: var(--ai); }
#screen-desk .order-status-pill[data-tone="progress"] { background: var(--surface-2);       color: var(--ink-muted); }
#screen-desk .order-status-pill[data-tone="dead"]     { background: var(--surface-2);       color: var(--ink-muted); opacity: 0.7; }

#screen-desk .bracket-chip {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
}
#screen-desk .bracket-chip[data-kind="stop"] { background: var(--money-down-soft); color: var(--money-down); }
#screen-desk .bracket-chip[data-kind="tp"]   { background: var(--money-up-soft);   color: var(--money-up); }

#screen-desk .outcome-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-bold);
  background: var(--surface-3);
  color: var(--ink-2);
}
#screen-desk .outcome-pill[data-outcome="tp_hit"],
#screen-desk .outcome-pill[data-outcome="trail_tp_hit"] { background: var(--money-up-soft); color: var(--money-up); }
#screen-desk .outcome-pill[data-outcome="stop_hit"]    { background: var(--money-down-soft); color: var(--money-down); }

/* ── Funnel (Pipeline) ─────────────────────────────────────────── */
#screen-desk .desk-funnel {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-2);
}
@media (max-width: 900px) {
  #screen-desk .desk-funnel { grid-template-columns: repeat(2, 1fr); }
}
#screen-desk .desk-funnel-stage {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  font: inherit;
  color: inherit;
}
/* #129 — clickable wired stages get a hover affordance + cursor. Stubbed
   stages stay inert (no border tint, no cursor). */
button.desk-funnel-stage[data-stub="0"] { cursor: pointer; transition: border-color 120ms ease, background 120ms ease; }
button.desk-funnel-stage[data-stub="0"]:hover { border-color: var(--ai); background: var(--ai-soft); }
button.desk-funnel-stage[data-stub="0"]:focus-visible { outline: 2px solid var(--ai); outline-offset: 2px; }
#screen-desk .desk-funnel-eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--ink-muted);
  font-weight: var(--weight-bold);
}
#screen-desk .desk-funnel-count {
  font-family: var(--font-mono);
  font-size: var(--type-2xl);
  font-weight: var(--weight-bold);
  color: var(--ink);
  letter-spacing: var(--tracking-tight);
}
/* #129 — Distinguish a stubbed em-dash (endpoint not wired) from a real
   0 (endpoint wired, list legitimately empty). Stub renders in faint
   color + dashed underline; an empty wired count stays in normal ink. */
#screen-desk .desk-funnel-count[data-stub="1"] {
  color: var(--ink-faint);
  text-decoration: underline dashed;
  text-underline-offset: 3px;
}
#screen-desk .desk-funnel-count[data-empty="1"] { color: var(--ink-muted); }
#screen-desk .desk-funnel-sub { font-size: var(--type-xs); }
/* #134 — staleness pill above the funnel. Two states: "stale" (data
   present but >24h old) tinted amber; "not_yet" (screener hasn't run)
   neutral muted. Same visual register as the resolved-universe pill on
   the Universe screen. */
.desk-funnel-stale {
  display: inline-block;
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--type-xs);
  font-weight: var(--weight-semi);
}
.desk-funnel-stale[data-state="stale"] {
  background: var(--money-up-soft);
  color: var(--money-up);
}
.desk-funnel-stale[data-state="not_yet"] {
  background: var(--surface-2);
  color: var(--ink-muted);
}

/* ── Manual ticket ─────────────────────────────────────────────── */
#screen-desk .desk-ticket-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
#screen-desk .ticket-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* #162 — `hidden` attribute must override the flex display. Used by the
   bracket-preview row + the breaker selector row (which only shows on a
   thesis-breaker prefill). Without this, [hidden] is a no-op on flex elements. */
#screen-desk .ticket-row[hidden] { display: none; }
#screen-desk .ticket-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--ink-muted);
  font-weight: var(--weight-bold);
}
#screen-desk .ticket-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--type-md);
  background: var(--surface);
}
#screen-desk .ticket-input:focus {
  outline: 2px solid var(--ai-soft);
  border-color: var(--ai);
}
#screen-desk .ticket-input.mono { font-family: var(--font-mono); }
#screen-desk .ticket-estimate {
  background: var(--surface-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--type-sm);
}

/* ── Inline position-row expansion (Positions sub-tab) ──────────────
   Clicking a held position row expands it in place to show the shared symbol
   detail (.symbol-drawer / .sd-*) plus the Position Analytics card (.thx-*).
   See screens/desk.js → toggleExpand / injectDetail / renderSymbolDetail. */
#screen-desk .desk-pos-row { cursor: pointer; }
#screen-desk .desk-pos-row:hover td { background: var(--surface-hover); }
#screen-desk .desk-pos-row.is-expanded td { background: var(--surface-2); }
#screen-desk .desk-pos-chev {
  display: inline-block;
  width: 0.9em;
  margin-right: var(--space-1);
  color: var(--ink-muted);
  font-size: var(--type-xs);
  transition: transform 0.12s ease;
}
#screen-desk .desk-pos-row.is-expanded .desk-pos-chev {
  transform: rotate(90deg);
  color: var(--ai);
}

#screen-desk .desk-pos-detail-row > td {
  padding: 0;
  background: var(--surface-2);
  border-bottom: 2px solid var(--border-strong);
}
#screen-desk .desk-pos-detail {
  padding: var(--space-4) var(--space-5);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-6);
  align-items: start;
}
/* Hero + Position Analytics span the full row; the four detail sections
   (position · orders · events · chart) tile two-up so the reused key/value
   tables don't stretch the full table width. */
#screen-desk .desk-pos-detail > [data-role="hero"],
#screen-desk .desk-pos-detail > [data-role="analytics-context"] { grid-column: 1 / -1; }
#screen-desk .desk-pos-detail .sd-section:first-of-type { margin-top: var(--space-3); }
/* Position Analytics card sits flush at the bottom of the panel. */
#screen-desk .desk-pos-detail .thx-card { margin-bottom: 0; }
@media (max-width: 720px) {
  #screen-desk .desk-pos-detail { grid-template-columns: 1fr; }
}