/* signals-desk.css — the blotter, the pre-trade ticket and the entry-gate
   badge (OWNER B).

   Tokens only: every colour here is --pos / --neg / --warn / --accent or a
   color-mix over one, so both themes and the per-strategy paper accent
   (#page-signals[data-sgmode="paper"], set in signals.css) come out right
   without a single hex. Everything is scoped to #page-signals so a class as
   generic as .bk-row can never reach another page.

   The one loud thing on this stylesheet is an unprotected position. Red is
   spent there and almost nowhere else, because a blotter where four things
   are shouting is a blotter where nothing is heard. */

/* ══ Blotter ═══════════════════════════════════════════════════════════ */

/* The alarm. It sits above the table rather than inside it, because the row
   it refers to can be scrolled out of view in a five-row blotter. */
#page-signals .bk-alarm {
  display: flex; flex-direction: column; gap: 3px;
  margin: 10px 20px; padding: 11px 14px;
  border: 1px solid var(--neg-bd); border-left: 3px solid var(--neg);
  border-radius: var(--r); background: var(--neg-bg);
  font-size: 12.5px; line-height: 1.5;
}
#page-signals .bk-alarm b { color: var(--neg); font-size: 13px; font-weight: 650; }
#page-signals .bk-alarm span { color: var(--text-2); }

#page-signals .bk-note { margin: 10px 20px; padding: 9px 12px; border-radius: var(--r); font-size: 12px; background: var(--surface-3); color: var(--muted); }
#page-signals .bk-note.warn { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-bd); }

#page-signals .bk-tbl td { vertical-align: middle; transition: background var(--dur) var(--spring); }
#page-signals .bk-tbl tbody tr:hover td { background: var(--surface-hover); }
#page-signals .bk-tbl tr.naked td { background: color-mix(in srgb, var(--neg) 7%, transparent); }
#page-signals .bk-tbl tr.naked td:first-child { box-shadow: inset 3px 0 0 var(--neg); }
#page-signals .bk-tbl tr.naked:hover td { background: color-mix(in srgb, var(--neg) 11%, transparent); }
#page-signals .bk-tbl tr.confirming td { background: var(--surface-3); }
#page-signals .bk-tbl tr.bk-confirm-row td { padding: 0; height: auto; background: var(--surface-2); }

/* Second-line values (R, age, "wants ₹x") ride under their number. */
#page-signals .bk-tbl td i,
#page-signals .bk-kv i,
#page-signals .bk-card-pnl i {
  display: block; font-style: normal; font-size: 11px; font-weight: 500;
  color: var(--faint); font-variant-numeric: tabular-nums; margin-top: 1px;
}
#page-signals .bk-tbl td i.pos { color: color-mix(in srgb, var(--pos) 78%, var(--faint)); }
#page-signals .bk-tbl td i.neg { color: color-mix(in srgb, var(--neg) 78%, var(--faint)); }

#page-signals .bk-sym { border: none; background: none; padding: 0 3px; margin: 0 -3px; border-radius: var(--r-xs); cursor: pointer; color: inherit; font: inherit; transition: color var(--dur); }
#page-signals .bk-sym:hover .sym { text-decoration: underline; text-underline-offset: 2px; }
#page-signals .bk-sym:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
#page-signals .bk-scaled {
  margin-left: 6px; padding: 0 5px; border-radius: 4px; font-size: 10.5px; font-weight: 600;
  color: var(--warn); background: var(--warn-bg);
}

/* A price that does not exist. Never the entry price in disguise. */
#page-signals .bk-noprice { color: var(--faint); font-variant-numeric: tabular-nums; }
#page-signals .bk-ltp { font-weight: 550; font-variant-numeric: tabular-nums; }
#page-signals .bk-ltp.stale { color: var(--warn); }
#page-signals .bk-dist { font-variant-numeric: tabular-nums; }
#page-signals .bk-dist.neg { color: var(--neg); font-weight: 600; }
#page-signals .bk-dist.pos { color: var(--pos); font-weight: 600; }

/* The stop cell. Four states, and only one of them is quiet. */
#page-signals .bk-stop { display: inline-block; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
#page-signals .bk-stop.ok { color: var(--text-2); }
#page-signals .bk-stop.ok i { color: color-mix(in srgb, var(--pos) 70%, var(--faint)); }
#page-signals .bk-stop.paper { color: var(--muted); font-weight: 500; }
#page-signals .bk-stop.warn { color: var(--warn); }
#page-signals .bk-stop.bad {
  color: var(--neg); letter-spacing: .02em;
  padding: 2px 7px; border-radius: 5px; background: var(--neg-bg); box-shadow: inset 0 0 0 1px var(--neg-bd);
}
#page-signals .bk-stop.bad i { color: var(--neg); opacity: .8; }

/* Scale-out confirm. modals.js has no dialog whose copy fits a partial exit,
   so the confirm is rendered in place — and it has to look like a decision,
   not like a row. */
#page-signals .bk-confirm {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 12px 20px; font-size: 12.5px; line-height: 1.5;
  border-left: 3px solid var(--warn); background: var(--warn-bg);
}
#page-signals .bk-confirm .hint { display: block; margin-top: 2px; }
#page-signals .bk-confirm-act { display: flex; gap: 6px; flex: 0 0 auto; }
#page-signals .bk-card .bk-confirm { margin-top: 10px; border-radius: var(--r); padding: 12px; }

#page-signals .bk-foot { padding: 10px 20px 14px; font-size: 11.5px; color: var(--faint); line-height: 1.5; }

/* The inspector's per-symbol face of the same rows. */
#page-signals .bk-card { border: 1px solid var(--border); border-radius: var(--r); padding: 12px; }
#page-signals .bk-card + .bk-card { margin-top: 10px; }
#page-signals .bk-card.naked { border-color: var(--neg-bd); background: var(--neg-bg); }
#page-signals .bk-card-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
#page-signals .bk-card-top .bk-acct { font-size: 11.5px; color: var(--muted); margin-left: auto; }
#page-signals .bk-card-pnl { margin: 10px 0 6px; font-size: 19px; font-weight: 620; letter-spacing: -0.02em; }
#page-signals .bk-card-pnl .pnl { font-size: inherit; font-weight: inherit; }
#page-signals .bk-card-pnl i { font-size: 12px; }
#page-signals .bk-kv { grid-template-columns: minmax(0, 1fr); }
#page-signals .bk-kv div { padding: 6px 0; }
#page-signals .bk-kv span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
#page-signals .bk-card-act { display: flex; gap: 6px; justify-content: flex-end; margin-top: 10px; flex-wrap: wrap; }

/* ══ Ticket ════════════════════════════════════════════════════════════ */

#page-signals .tk-side { display: flex; width: 100%; margin-bottom: 12px; }
#page-signals .tk-side > button { flex: 1; }
/* -of-type, not -child: segments.js prepends its sliding thumb <i> to every
   .seg, and a :first-child here would then never match the Buy button. */
#page-signals .tk-side > button.active:first-of-type { color: var(--pos); }
#page-signals .tk-side > button.active:last-of-type { color: var(--neg); }

#page-signals .tk-plan { grid-template-columns: minmax(0, 1fr); }
#page-signals .tk-plan div { padding: 6px 0; }
#page-signals .tk-plan span:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 550; }

/* The estimate disclaimer is part of the number, not a footnote under it. */
#page-signals .tk-estimate {
  margin-bottom: 12px; padding: 9px 11px; border-radius: var(--r);
  background: var(--surface-3); color: var(--muted); line-height: 1.55;
}
#page-signals .tk-estimate b { color: var(--text-2); font-weight: 600; }

#page-signals .tk-acct { border: 1px solid var(--border); border-radius: var(--r); padding: 12px; }
#page-signals .tk-acct + .tk-acct { margin-top: 10px; }
#page-signals .tk-acct.ok { border-color: var(--pos-bd); }
#page-signals .tk-acct.warn { border-color: var(--warn-bd); }
#page-signals .tk-acct.bad { border-color: var(--neg-bd); background: color-mix(in srgb, var(--neg) 4%, transparent); }
#page-signals .tk-acct-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; }
#page-signals .tk-acct-head b { font-size: 13px; font-weight: 620; margin-right: auto; }
#page-signals .tk-acct-foot { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border); font-size: 11px; color: var(--faint); line-height: 1.5; }

#page-signals .tk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#page-signals .tk-num { min-width: 0; }
#page-signals .tk-num span { display: block; font-size: 11.5px; color: var(--muted); }
#page-signals .tk-num b { display: block; font-size: 18px; font-weight: 620; letter-spacing: -0.02em; margin-top: 2px; font-variant-numeric: tabular-nums; }
#page-signals .tk-num i { display: block; font-style: normal; font-size: 11px; color: var(--faint); margin-top: 2px; line-height: 1.4; }
#page-signals .tk-num.bad b { color: var(--neg); }
#page-signals .tk-num.bad i { color: var(--neg); opacity: .85; }

/* One gate, one line, one reason. */
#page-signals .tk-gate {
  display: flex; flex-direction: column; gap: 1px;
  margin-top: 8px; padding: 8px 10px; border-radius: var(--r-sm);
  font-size: 12px; line-height: 1.5; background: var(--surface-3); color: var(--text-2);
}
#page-signals .tk-gate b { font-weight: 600; }
#page-signals .tk-gate span { color: var(--muted); font-size: 11.5px; }
#page-signals .tk-gate.ok { background: var(--pos-bg); color: var(--pos); }
#page-signals .tk-gate.warn { background: var(--warn-bg); color: var(--warn); }
#page-signals .tk-gate.warn span { color: color-mix(in srgb, var(--warn) 80%, var(--text-2)); }
#page-signals .tk-gate.bad { background: var(--neg-bg); color: var(--neg); }
#page-signals .tk-gate.bad span { color: color-mix(in srgb, var(--neg) 80%, var(--text-2)); }

#page-signals .tk-steps { margin-top: 10px; }
#page-signals .tk-steps summary { font-size: 11.5px; color: var(--muted); cursor: pointer; border-radius: var(--r-xs); transition: color var(--dur); }
#page-signals .tk-steps summary:hover { color: var(--text); }
#page-signals .tk-steps summary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
#page-signals .tk-steps table { margin-top: 8px; }
#page-signals .tk-steps td { height: 30px; padding: 4px 8px; font-size: 11.5px; }
#page-signals .tk-steps td:first-child { padding-left: 0; }
#page-signals .tk-steps td:last-child { padding-right: 0; }
#page-signals .tk-steps tr.warn td { color: var(--warn); }
#page-signals .tk-steps tr.bad td { color: var(--neg); }

#page-signals .tk-exec .btn.full { height: 40px; font-size: 13.5px; }
#page-signals .tk-exec .hint { margin-top: 8px; line-height: 1.5; }

/* ══ Entry-gate badge ══════════════════════════════════════════════════ */
/* The badge renders INSIDE .wl-sym b, where `.wl-sym span { display: block }`
   (signals.css) outranks the bare `.wl-gate` class on specificity — which
   turned the pill into a full-width block on its own line and pushed every
   gated row taller than its neighbours. The id here wins the argument. Shape
   restated rather than inherited, so it cannot lose it again.
   The two tones are not interchangeable: "cannot be entered at all today" and
   "one account refuses it" must not look the same. */
#page-signals .wl-sym .wl-gate,
#page-signals .wl-gate {
  display: inline-block; width: auto; margin: 0 0 0 5px; padding: 0 4px;
  border-radius: 3px; font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
  vertical-align: 1px; line-height: 1.5;
}
#page-signals .wl-sym .wl-gate.bad, #page-signals .wl-gate.bad { color: var(--neg); background: color-mix(in srgb, var(--neg) 14%, transparent); }
#page-signals .wl-sym .wl-gate.warn, #page-signals .wl-gate.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }

/* ══ Narrow ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* The table keeps every column and scrolls sideways inside .tbl-scroll —
     a blotter that hides the stop column to fit a phone is worse than one
     the operator has to swipe. */
  #page-signals .bk-alarm, #page-signals .bk-note { margin-left: 16px; margin-right: 16px; }
  #page-signals .bk-confirm { padding-left: 16px; padding-right: 16px; }
  #page-signals .tk-grid { grid-template-columns: minmax(0, 1fr); }
}