*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0d0d0d;
  --surface: #1a1a1a;
  --border: #2a2a2a;
  --text: #e0e0e0;
  --muted: #666;
  --accent: #3b82f6;
  --accent-dim: #1d4ed8;
  --error: #ef4444;
  --tool: #f59e0b;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ── Login ── */
#login {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 320px;
  width: calc(100% - 32px);
}

#login h1 {
  font-size: 18px;
  letter-spacing: 0.15em;
  text-align: center;
  margin-bottom: 8px;
}

#login input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  padding: 10px 12px;
  outline: none;
  width: 100%;
}

#login input:focus { border-color: var(--accent); }

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 38px; }
#login #pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 0;
  line-height: 0;
  width: auto;
}
#login #pw-toggle:hover { color: var(--text); }

#login button {
  background: var(--accent);
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  padding: 10px;
  width: 100%;
}

#login button:hover { background: var(--accent-dim); }

#login-error {
  color: var(--error);
  font-size: 10px;
  text-align: center;
  min-height: 16px;
}

/* ── Chyron ── */
#chyron {
  width: 100%;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  height: 24px;
  flex-shrink: 0;
  display: none;
  align-items: center;
}

#chyron-ts {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.06em;
  padding: 0 8px 0 10px;
  border-right: 1px solid var(--border);
  line-height: 24px;
  white-space: nowrap;
}

#chyron-scroll {
  flex: 1;
  overflow: hidden;
  height: 100%;
}

.chyron-track {
  display: inline-block;
  white-space: nowrap;
  font-size: 10px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  letter-spacing: 0.06em;
  padding: 4px 16px;
}

#chyron-inner {
  will-change: transform;
  color: var(--tool);
  animation: chyron-scroll linear infinite;
  animation-duration: 30s;
}

/* Off-screen twin of #chyron-inner, same box metrics (via .chyron-track), used to
   measure a candidate block's width without touching the live, currently-scrolling
   element -- mutating #chyron-inner directly mid-animation is what causes the visual
   snap/blank-gap glitch this element exists to avoid (see _renderChyron in app.js). */
#chyron-measure {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  left: -99999px;
  top: 0;
}

@keyframes chyron-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Scoped to .chyron-track (not #chyron-inner) so #chyron-measure's width-affecting
   rules (.sep's margin, .chg-pct's letter-spacing) match #chyron-inner exactly --
   otherwise the off-screen measurement undercounts width relative to what's rendered
   live, miscalibrating the scroll speed computed from it. */
.chyron-track .chg-pct { font-size: 9px; letter-spacing: 0; }
.chyron-track .chg-pct.pos { color: #86efac; }
.chyron-track .chg-pct.neg { color: #fca5a5; }
.chyron-track .sep { color: var(--border); margin: 0 12px; }
.chyron-track .chyron-news { color: var(--text); cursor: pointer; text-decoration: underline dotted; }
.chyron-track .chyron-news:hover { color: var(--accent); }

/* ── Nav bar ── */
#nav-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  width: 100%;
  gap: 8px;
}

#nav-seg {
  display: flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}

.nav-seg-btn {
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  text-transform: uppercase;
}

.nav-seg-btn.active {
  background: var(--surface);
  color: var(--text);
}

#nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

#nav-evaluate {
  background: none;
  border: 1px solid var(--tool);
  border-radius: 6px;
  color: var(--tool);
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  text-transform: uppercase;
}

#nav-evaluate:hover { background: rgba(245,158,11,0.1); }


#nav-refresh {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  padding: 4px 8px;
  line-height: 1;
}

.ev-model-select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  padding: 4px 6px;
  line-height: 1;
}

.ev-model-select:hover { border-color: var(--accent); color: var(--accent); }

#ev-model-error {
  color: var(--error);
  font-size: 9px;
}

#nav-refresh:hover { border-color: var(--accent); color: var(--accent); }

#nav-refresh.spinning {
  animation: nav-spin 1s linear infinite;
  cursor: default;
}

@keyframes nav-spin {
  to { transform: rotate(360deg); }
}

/* ── Monitor ── */
#monitor {
  display: none;
  flex-direction: column;
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  min-height: 0;
  max-width: 560px;
  width: 100%;
  align-self: center;
}

.mon-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

summary.mon-section-label, summary.mon-section-label-sub {
  cursor: pointer;
}

.mon-gtc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mon-gtc-place-btn-compact {
  background: none;
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accent);
  cursor: pointer;
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  padding: 4px 10px;
}

.mon-gtc-place-btn-compact:hover { background: rgba(59,130,246,0.1); }

.mon-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.mon-card-hdr {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px 10px;
  margin-bottom: 12px;
}

.mon-spread {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
}

.mon-time {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.mon-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}

.mon-metrics.mon-metrics-3 {
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 0;
}

.mon-mlabel {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}

.mon-mval {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.mon-card-note {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.5;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

.mon-empty {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  padding: 12px 0;
}

#mon-as-of {
  font-size: 9px;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.06em;
  margin-top: 16px;
  padding-bottom: 8px;
}

.mon-rag {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  vertical-align: middle;
  margin-left: 2px;
}

.mon-rag-green   { background: #86efac; }
.mon-rag-amber   { background: #fcd34d; }
.mon-rag-red     { background: #fca5a5; }
.mon-rag-unknown { background: var(--muted); }

.mon-badge {
  display: inline-block;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  text-transform: uppercase;
}

.mon-stand { border: 1px solid #86efac; color: #86efac; }
.mon-flag  { border: 1px solid #fcd34d; color: #fcd34d; }

.mon-lh-high    { color: #86efac; }
.mon-lh-medium  { color: #fcd34d; }
.mon-lh-low     { color: #fca5a5; }
.mon-lh-unknown { color: var(--muted); }

.mon-closing-body {
  display: flex;
  gap: 10px;
}

.mon-closing-body .mon-metrics { flex: 1; }

.mon-cancel-order-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--error);
  cursor: pointer;
  font-family: inherit;
  font-size: 9px;
  padding: 4px 14px;
  white-space: nowrap;
}

.mon-cancel-order-btn:disabled { opacity: 0.5; cursor: default; }

/* ── GTC Close Candidates ── */
.mon-gtc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.mon-gtc-row.mon-gtc-done { opacity: 0.5; }

.mon-gtc-row-priority { border-left: 3px solid #fcd34d; }

.mon-section-label-sub {
  font-size: 9px;
  margin-bottom: 8px;
}

.mon-gtc-checkbox {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.mon-gtc-info { flex: 1; min-width: 0; }

.mon-gtc-info-compact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.mon-gtc-info-compact .mon-spread {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mon-gtc-vals-inline {
  font-size: 10px;
  color: var(--muted);
  flex-shrink: 0;
}

.mon-gtc-result {
  font-size: 10px;
  font-weight: 600;
  text-align: right;
  flex-shrink: 0;
}

.mon-gtc-result:not(:empty) {
  flex-basis: 100%;
  text-align: left;
  white-space: normal;
  word-break: break-word;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.mon-gtc-success { color: #86efac; }
.mon-gtc-error   { color: var(--error); }

/* Dynamic list shared by the GTC batch-confirm modal and the single-order cancel modal */
#gtc-modal-list, #cancel-order-label {
  font-size: 10px;
  color: var(--text);
  line-height: 1.6;
  max-height: 160px;
  overflow-y: auto;
}

.gtc-modal-item { padding: 2px 0; border-bottom: 1px solid var(--border); }
.gtc-modal-item:last-child { border-bottom: none; }

.modal-totp-input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  padding: 8px 10px;
  outline: none;
  width: 100%;
  margin-top: 12px;
}

.modal-totp-input:focus { border-color: var(--accent); }


/* ── Positions ── */
#positions {
  display: none;
  flex-direction: column;
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  min-height: 0;
  max-width: 680px;
  width: 100%;
  align-self: center;
}

/* ── Overview ── */
#overview {
  display: none;
  flex-direction: column;
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  min-height: 0;
  max-width: 680px;
  width: 100%;
  align-self: center;
}

/* ── Evaluate Modal ── */
#ev-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 150;
  flex-direction: column;
}

#ev-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

#ev-modal-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 92dvh;
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-radius: 12px 12px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#ev-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}

#ev-modal-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tool);
}

#ev-modal-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 18px;
  padding: 0 4px;
  line-height: 1;
}

#ev-modal-close:hover { color: var(--text); }

/* ── Evaluate ── */
#evaluate {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  min-height: 0;
  gap: 16px;
}

#ev-top-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

#ev-run {
  background: var(--accent);
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  padding: 6px 16px;
}

#ev-run:disabled { background: var(--muted); cursor: default; }
#ev-run:not(:disabled):hover { background: var(--accent-dim); }

#ev-progress {
  color: var(--tool);
  font-size: 11px;
  min-height: 16px;
}

.ev-tranche-id { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; }

.ev-badge {
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 7px;
  text-transform: uppercase;
}

.ev-badge.sell-premium, .ev-badge.approved { background: #14532d; color: #86efac; }
.ev-badge.roll, .ev-badge.roll-out { background: #451a03; color: #fcd34d; }
.ev-badge.no-action { background: #1c1c1c; color: var(--muted); }
.ev-badge.vetoed { background: #450a0a; color: #fca5a5; }
.ev-badge.ta-green { background: #14532d; color: #86efac; }
.ev-badge.ta-amber { background: #451a03; color: #fcd34d; }
.ev-badge.ta-red   { background: #450a0a; color: #fca5a5; }

@keyframes ev-spin { to { transform: rotate(360deg); } }
.ev-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid var(--border);
  border-top-color: var(--muted);
  border-radius: 50%;
  animation: ev-spin 0.8s linear infinite;
  vertical-align: middle;
}

#ev-portfolio-summary {
  color: var(--text);
  font-size: 10px;
  padding: 6px 0;
}

#ev-itm-banner {
  display: none;
  background: #450a0a;
  border: 1px solid #7f1d1d;
  border-radius: 6px;
  color: #fca5a5;
  font-size: 10px;
  font-weight: 600;
  padding: 8px 12px;
}

#ev-no-action-summary, #ev-bankable-summary {
  display: none;
  color: var(--muted);
  font-size: 11px;
  padding: 2px 0;
}
.ev-no-action-header {
  cursor: pointer;
  user-select: none;
}
.ev-no-action-toggle {
  display: inline-block;
  transition: transform 0.15s;
}
#ev-no-action-summary.expanded .ev-no-action-toggle, #ev-bankable-summary.expanded .ev-no-action-toggle { transform: rotate(180deg); }
.ev-no-action-details {
  display: none;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  padding: 8px;
  background: var(--surface);
  border-radius: 4px;
}
#ev-no-action-summary.expanded .ev-no-action-details, #ev-bankable-summary.expanded .ev-no-action-details { display: flex; }
.ev-no-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ev-no-action-tid {
  color: var(--text);
  min-width: 78px;
  flex-shrink: 0;
}
.ev-no-action-reason { color: var(--muted); }

#ev-candidates {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ev-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ev-card:hover { border-color: var(--muted); }

.ev-card-line1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
}

.ev-card-line1-left {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ev-card-line2 {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.ev-bankable {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.03em;
  margin-top: 2px;
  line-height: 1.6;
  flex-basis: 100%;
}

.ev-card.approved {
  background: rgba(20, 83, 45, 0.25);
  border-color: #166534;
}

.ev-card.vetoed {
  background: rgba(69, 10, 10, 0.25);
  border-color: #7f1d1d;
}

#ev-status {
  display: none;
  flex-direction: column;
  gap: 4px;
}

#ev-stages {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ev-stage {
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 10px;
}

.ev-stage.active { border-color: var(--accent); color: var(--accent); }
.ev-stage.done { border-color: #166534; color: #86efac; background: rgba(20,83,45,0.2); }
.ev-stage.error { border-color: #991b1b; color: #fca5a5; background: rgba(127,29,29,0.2); }

.ev-stage-sep { color: var(--muted); font-size: 10px; }

.ev-stage-time { font-weight: 400; letter-spacing: 0; opacity: 0.75; }

#ev-elapsed { color: var(--muted); font-size: 10px; margin-left: 4px; }

#ev-cost-label { color: var(--muted); font-size: 10px; margin-left: 4px; opacity: 0.75; }

#ev-tool-label { color: var(--muted); font-size: 10px; min-height: 14px; }

.ev-muted { color: var(--muted); }

/* ── Rationale Drawer ── */
#ev-rationale-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 160;
}

#ev-rationale-drawer {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70dvh;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 16px;
  z-index: 161;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

#ev-rationale-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

#ev-rationale-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#ev-rationale-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  padding: 0 4px;
}

#ev-rationale-close:hover { color: var(--text); }

#ev-rationale-scroll {
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ev-chain { display: flex; flex-direction: column; }

.ev-chain-phase {
  display: flex;
  gap: 12px;
  padding-bottom: 20px;
}

.ev-chain-phase:last-child { padding-bottom: 0; }

.ev-chain-rail {
  flex-shrink: 0;
  width: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.ev-chain-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
  margin-top: 3px;
  position: relative;
  z-index: 1;
}

.ev-chain-phase:not(:last-child) .ev-chain-rail::after {
  content: '';
  position: absolute;
  top: 12px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: var(--border);
}

.ev-chain-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ev-chain-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}

.ev-rat-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.ev-rat-tranche-header {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 10px 0 4px;
}

.ev-rat-flags {
  list-style: none;
  margin: 0 0 6px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ev-rat-flags li {
  font-size: 10px;
  color: var(--text);
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.ev-rat-flags li::before {
  content: '•';
  color: var(--muted);
  flex-shrink: 0;
}

.ev-rat-text {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.ev-rat-summary {
  font-size: 10px;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 4px;
}

.ev-rat-details {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ev-rat-details li {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.ev-rat-details li::before {
  content: '–';
  color: var(--muted);
  flex-shrink: 0;
}

.ev-rat-step {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 10px;
  padding: 3px 0;
}

.ev-rat-step-icon {
  flex-shrink: 0;
  width: 14px;
}

.ev-rat-step-icon.pass { color: #86efac; }
.ev-rat-step-icon.fail { color: var(--error); }

.ev-rat-step-label {
  color: var(--muted);
  flex-shrink: 0;
  min-width: 80px;
}

.ev-rat-step-value { color: var(--text); }

/* ── Confirm Modal ── */
#confirm-modal, #gtc-confirm-modal, #cancel-order-modal, #chyron-news-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 200;
  align-items: center;
  justify-content: center;
}

.modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  max-width: 360px;
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-title { font-size: 13px; font-weight: 600; }

.modal-body { font-size: 10px; color: var(--muted); line-height: 1.5; }

.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

.modal-cancel {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  padding: 6px 14px;
}

.modal-confirm {
  background: var(--error);
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  padding: 6px 14px;
}

/* ── Chyron News Modal ── */
#chyron-news-modal .modal-body { display: flex; flex-direction: column; gap: 8px; word-break: break-word; }
#chyron-news-source { font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tool); }
#chyron-news-url { color: var(--accent); }

/* ── Reconcile results ── */
#pos-reconcile-results {
  display: none;
  font-size: 10px;
}

#pos-reconcile-status { font-weight: 600; }
#pos-reconcile-status.clean { color: #86efac; }
#pos-reconcile-status.mismatch, #pos-reconcile-status.partial { color: var(--error); cursor: pointer; text-decoration: underline dotted; }

/* ── Mismatch drawer ── */
#pos-mismatch-drawer {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 40dvh;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 16px;
  z-index: 100;
  flex-direction: column;
  gap: 12px;
}

#pos-mismatch-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

#pos-mismatch-drawer-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#pos-mismatch-drawer-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  padding: 0 4px;
}

#pos-mismatch-drawer-close:hover { color: var(--text); }

#pos-mismatch-drawer-scroll {
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 11px;
}

.mm-tranche { font-weight: 600; color: var(--text); margin-bottom: 4px; }
.mm-leg { color: var(--muted); padding-left: 12px; }

#ov-loading {
  color: var(--muted);
  font-size: 10px;
  margin-bottom: 8px;
}

#ov-error {
  color: var(--error);
  font-size: 10px;
  margin-bottom: 8px;
}

.tbl-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

#ov-portfolio-summary { display: none; }

#ov-portfolio-summary span:not(.chg-pct) { color: var(--text); }

.chg-pct { font-size: 9px; letter-spacing: 0; }
.chg-pct.pos { color: #86efac; }
.chg-pct.neg { color: #fca5a5; }

#ov-table {
  border-collapse: collapse;
  font-size: 10px;
  width: 100%;
}

#ov-table th, #ov-table td {
  border: 1px solid var(--border);
  padding: 5px 10px;
  text-align: center;
  white-space: nowrap;
}

#ov-table th {
  background: var(--surface);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ov-tranche-btn {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  padding: 0;
  text-decoration: none;
}

.ov-tranche-btn:hover { text-decoration: underline; }

.ov-card-inline { display: none; }

@media (max-width: 600px) {
  .tbl-wrap { overflow-x: visible; }
  #ov-table, #ov-table tbody { display: block; }
  #ov-table tbody { display: flex; flex-direction: column; }
  #ov-total-row { order: -1; }
  #ov-table thead { display: none; }

  #ov-table tr {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 8px;
    padding: 8px 10px 6px;
    row-gap: 8px;
  }

  #ov-table td {
    border: none;
    padding: 0;
    white-space: normal;
  }

  /* DTE, Sigmas, % OTM: hidden in portrait (shown via card inline) */
  #ov-table td:nth-child(2),
  #ov-table td:nth-child(6),
  #ov-table td:nth-child(7) { display: none; }

  /* Card header: tranche ID left, support right */
  #ov-table td:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
  }
  #ov-table td:nth-child(8) {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
  }

  /* Greeks row */
  #ov-table td:nth-child(3) { grid-column: 1; grid-row: 2; }
  #ov-table td:nth-child(4) { grid-column: 2; grid-row: 2; text-align: center; }
  #ov-table td:nth-child(5) { grid-column: 3; grid-row: 2; text-align: right; }

  /* P&L row */
  #ov-table td:nth-child(9)  { grid-column: 1; grid-row: 3; }
  #ov-table td:nth-child(10) { grid-column: 2; grid-row: 3; text-align: center; }
  #ov-table td:nth-child(11) { grid-column: 3; grid-row: 3; text-align: right; }

  /* Label above value for data cells */
  #ov-table td:nth-child(n+3):nth-child(-n+5)::before,
  #ov-table td:nth-child(n+9):nth-child(-n+11)::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 2px;
  }

  /* Collapse toggle on tranche button */
  #ov-table tr:not(#ov-total-row) { cursor: pointer; }
  #ov-table tr:not(#ov-total-row) td:nth-child(1) .ov-tranche-btn::after { content: ' ▾'; color: var(--muted); font-size: 10px; }
  #ov-table tr.collapsed td:nth-child(1) .ov-tranche-btn::after { content: ' ▸'; }
  #ov-table tr.collapsed td:nth-child(n+3):nth-child(-n+5),
  #ov-table tr.collapsed td:nth-child(n+9):nth-child(-n+11) { display: none; }

  /* Inline meta (DTE · σ · % OTM) in card header */
  .ov-card-inline {
    display: inline;
    color: var(--muted);
    font-size: 9px;
    letter-spacing: 0.04em;
  }
}

/* ── Overview Bottom Sheet ── */
#ov-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
}

#ov-drawer {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80dvh;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 16px;
  z-index: 100;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex-direction: column;
  gap: 12px;
}

#ov-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}

#ov-drawer-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-right: auto;
}

#ov-drawer-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  padding: 0 4px;
}

#ov-drawer-close:hover { color: var(--text); }

#ov-drawer-loading {
  color: var(--muted);
  font-size: 10px;
}

#ov-drawer-error {
  color: var(--error);
  font-size: 10px;
  margin-bottom: 4px;
}

#ov-drawer-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#ov-drawer-table {
  border-collapse: collapse;
  font-size: 10px;
  min-width: 100%;
}

#ov-drawer-table th, #ov-drawer-table td {
  border: 1px solid var(--border);
  padding: 5px 10px;
  text-align: center;
  white-space: nowrap;
}

#ov-drawer-table th {
  background: var(--bg);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#pos-loading {
  color: var(--muted);
  font-size: 10px;
  margin-bottom: 8px;
}

#pos-error {
  color: var(--error);
  font-size: 10px;
  margin-bottom: 8px;
}

#pos-table {
  border-collapse: collapse;
  font-size: 10px;
  width: 100%;
}

#pos-table th, #pos-table td {
  border: 1px solid var(--border);
  padding: 5px 10px;
  text-align: center;
  white-space: nowrap;
}

#pos-table th {
  background: var(--surface);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#ov-chart-carousel {
  align-self: center;
  position: relative;
  width: 100%;
  max-width: 860px;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.chart-carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Sized for the single-chart panels originally; the two .ov-chart-panel-split
     panels (Wave 3) stack a price chart + RSI chart inside this same height, so
     160/240/120 left both sub-charts cramped. Bumped ~25% across all three
     breakpoints (same ratio preserved) to give the split panels real room —
     #overview scrolls internally (overflow-y: auto, see #overview), so this
     doesn't cost the table any of its own space, it just pushes it further
     down the scroll, per Craig's live-EC2 feedback (agents/vol-chart-ema-rsi/
     plan.md Wave 4). */
  height: 200px;
}

.chart-carousel-track::-webkit-scrollbar { display: none; }

.chart-carousel-panel {
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
  height: 100%;
}

.chart-carousel-panel canvas {
  touch-action: pan-x;
}

/* Zoomable charts (Rich/Cheap, 1Y/5Y IV) own one-finger horizontal drag for
   chartjs-plugin-zoom's pan, which conflicts with the carousel's native
   pan-x swipe-to-next-panel gesture on the same canvases. This touch-action
   is effectively permanent, not just a starting point: Hammer.js's Pinch
   recognizer (needed so touch users can start a zoom at all) unconditionally
   contributes 'none' to the computed touch-action regardless of the Pan
   recognizer's enabled state, and Hammer sets that as an inline style,
   which always beats this class. So carousel navigation over these three
   canvases can't rely on native scroll ever reaching them — it's handled by
   the manual swipe listener in _initCarousel (app.js) instead, gated off
   whenever the touched chart is actually zoomed in (see onPanStart in
   _zoomOptions, app.js) so a real pan-to-explore drag on a zoomed chart
   isn't misread as a swipe. The compound selector here (class+class+type)
   has higher specificity than the general `.chart-carousel-panel canvas`
   rule above regardless of source order, so it reliably wins the cascade
   rather than relying on rule ordering alone. */
.chart-carousel-panel canvas.chart-zoomable {
  touch-action: none;
}

/* 1Y/5Y panels stack a shorter RSI(14) chart directly under the main price/IV chart,
   in the same carousel panel (not a new panel/slide — see agents/vol-chart-ema-rsi/
   plan.md Wave 3). Chart.js sizes each canvas off its own immediate parent, so both
   .ov-chart-main and .ov-chart-rsi need a determinate height of their own; percentage
   flex-basis works here because .chart-carousel-panel's height is itself definite
   (inherited from .chart-carousel-track's fixed height). .chart-carousel-panel stays
   position:relative, so the existing absolutely-positioned title/reset-zoom/empty
   overlays are unaffected by this flex layout. */
.ov-chart-panel-split {
  display: flex;
  flex-direction: column;
}

.ov-chart-main {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.ov-chart-rsi {
  position: relative;
  flex: 0 0 28%;
  min-height: 0;
  margin-top: 4px;
  border-top: 1px solid var(--border);
}

.ov-chart-title {
  position: absolute;
  top: 4px;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 1;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
}

.chart-reset-zoom {
  position: absolute;
  top: 4px;
  right: 0;
  z-index: 1;
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--muted);
  border-radius: 3px;
  padding: 1px 5px;
  cursor: pointer;
}

.chart-reset-zoom:hover {
  color: #999;
  border-color: #999;
}

.chart-carousel-empty {
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 12px;
}

.chart-readout {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 14px;
  margin-top: 6px;
  font: 9px 'SF Mono', 'Fira Code', monospace;
  color: var(--muted);
}

.chart-readout-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.chart-readout-item span:first-child {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.chart-carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 6px;
}

.chart-carousel-dot {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.chart-carousel-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
  transition: background 0.15s, transform 0.15s;
}

.chart-carousel-dot.active::before {
  background: var(--accent);
  transform: scale(1.4);
}

@media (min-width: 640px) {
  .chart-carousel-track { height: 300px; }
}

#ov-drawer-chart-wrap {
  position: relative;
  width: 100%;
  height: 240px;
  margin-bottom: 16px;
}

#ov-drawer-chart {
  touch-action: pan-y;
}

@media (orientation: landscape) and (max-height: 500px) {
  .chart-carousel-track { height: 150px; }
  #ov-drawer-chart-wrap { height: 140px; margin-bottom: 8px; }
}