:root {
  color-scheme: dark;
  --bg: #070d16;
  --panel: #0b1421;
  --panel-soft: #0f1a2a;
  --panel-edge: #1d2b3b;
  --text: #f7fafc;
  --muted: #98a7b8;
  --green: #35d06f;
  --red: #ff5148;
  --yellow: #f5b51b;
  --blue: #4f8dff;
  --purple: #9b5de5;
  --orange: #ff8a2a;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 0%, rgba(59, 130, 246, 0.08), transparent 32%),
    linear-gradient(180deg, #050a12 0%, var(--bg) 42%, #050b13 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.topbar {
  height: 62px;
  display: grid;
  grid-template-columns: 132px 150px minmax(210px, 1fr) 180px 142px 86px auto;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(5, 10, 18, 0.94);
}

.logo-shell {
  height: 42px;
  display: flex;
  align-items: center;
  min-width: 0;
}

.logo-shell img {
  width: 118px;
  max-width: 100%;
  max-height: 38px;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.top-upload,
.symbol-pill,
.badge,
.reset-button {
  border: 1px solid var(--panel-edge);
  border-radius: 7px;
  background: linear-gradient(180deg, #0d1726, #08111e);
}

.top-upload {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text);
  cursor: pointer;
}

.top-upload input {
  display: none;
}

.top-upload span {
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
}

.top-upload strong,
.title-block span {
  font-size: 16px;
  font-weight: 800;
}

.title-block {
  display: grid;
  gap: 3px;
}

.title-block small {
  min-height: 16px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.symbol-pill {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
}

.brand-mark {
  color: var(--green);
  border: 1px solid rgba(74, 222, 128, 0.42);
  border-radius: 5px;
  padding: 1px 4px;
  text-align: center;
}

input,
button {
  font: inherit;
}

.symbol-pill input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-weight: 700;
}

button {
  min-height: 40px;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  color: var(--text);
  font-weight: 800;
}

.run-button {
  background: linear-gradient(180deg, #35bf63, #278f47);
}

.reset-button {
  background: #101b2a;
}

.badge {
  color: var(--green);
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.shell {
  display: grid;
  grid-template-columns: minmax(680px, 1fr) 410px;
  grid-template-rows: auto auto auto auto auto auto auto;
  grid-template-areas:
    "config config"
    "summary details"
    "chart details"
    "lifecycle details"
    "timeline timeline"
    "engine engine"
    "analysis analysis";
  gap: 10px;
  padding: 10px 12px 14px;
}

/* #1190: the Config Change Impact panel is hidden until the user re-runs with
   overrides; only then is its grid row present, so no empty-row gap otherwise. */
.shell.has-config-change {
  grid-template-rows: auto auto auto auto auto auto auto auto;
  grid-template-areas:
    "config config"
    "summary details"
    "chart details"
    "lifecycle details"
    "configchange configchange"
    "timeline timeline"
    "engine engine"
    "analysis analysis";
}

.config-change-analysis {
  grid-area: configchange;
  padding: 14px 16px;
}

.engine-analysis {
  grid-area: engine;
  padding: 14px 16px;
}

.analysis {
  grid-area: analysis;
  padding: 14px 16px;
}

.analysis-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}

.analysis-grid.muted {
  display: block;
}

.analysis-card {
  border: 1px solid var(--panel-edge);
  border-radius: 7px;
  background: rgba(8, 16, 29, 0.6);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.analysis-card.is-corpus-only {
  border-style: dashed;
  opacity: 0.85;
}

.analysis-card-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.analysis-card-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.analysis-card-title strong {
  font-size: 13px;
  color: #eaf1ff;
}

.analysis-card-title .analysis-script {
  font-size: 10px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  color: var(--muted);
  white-space: nowrap;
}

.analysis-subtitle {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.45;
}

.analysis-section {
  border-top: 1px solid rgba(120, 140, 180, 0.14);
  padding-top: 6px;
}

.analysis-section h5 {
  margin: 0 0 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9fd0ff;
}

.analysis-lines {
  margin: 0;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 11px;
  line-height: 1.5;
  color: #d4deee;
  white-space: pre;
  overflow-x: auto;
}

.analysis-note {
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
}

.analysis-note code {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(8, 16, 29, 0.9);
  border: 1px solid var(--panel-edge);
  font-size: 10.5px;
  color: #ffd9a0;
  white-space: pre-wrap;
}

/* #1043: per-panel glossary ("what these readings mean"), collapsed by default. */
.analysis-glossary {
  margin-top: 10px;
  font-size: 11px;
}

.analysis-glossary > summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 700;
}

.analysis-glossary-table {
  margin-top: 8px;
  border-collapse: collapse;
  width: 100%;
}

.analysis-glossary-table th,
.analysis-glossary-table td {
  padding: 3px 8px 3px 0;
  text-align: left;
  vertical-align: top;
  line-height: 1.45;
}

.analysis-glossary-table th {
  white-space: nowrap;
  color: #cdd8e8;
  font-weight: 700;
}

.analysis-glossary-table td {
  color: var(--muted);
}

/* #1043: Engine Analysis panel -- cohort outcome from the committed baseline. */
.engine-analysis-subtitle {
  margin-bottom: 10px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
}

.engine-analysis-body.muted {
  font-size: 12px;
}

.engine-analysis-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}

.engine-analysis-table th,
.engine-analysis-table td {
  padding: 6px 12px 6px 0;
  text-align: left;
  border-bottom: 1px solid var(--panel-edge);
}

.engine-analysis-table th {
  color: var(--muted);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.engine-analysis-table td.num,
.engine-analysis-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.engine-analysis-table .engine-session-row td {
  border-top: 2px solid var(--panel-edge);
  border-bottom: 0;
  font-weight: 800;
}

/* #1062: config-change impact sub-panel (baseline -> changed (delta)). */
.config-change-panel {
  margin-top: 14px;
  border-top: 1px solid var(--panel-edge);
  padding-top: 10px;
}

.config-change-panel > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 8px;
}

.config-change-note {
  font-size: 12px;
}

.config-change-table td.diff-arrow {
  text-align: center;
  color: var(--muted);
  padding: 6px 8px;
}

/* #1043: entry summary box on buy/sell candles, above the full reasoning. */
.entry-summary {
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(53, 208, 111, 0.08);
  border: 1px solid rgba(53, 208, 111, 0.35);
}

.entry-summary-head {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 8px;
}

.entry-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.entry-summary-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.entry-summary-label {
  font-size: 10.5px;
  color: var(--muted);
}

.entry-summary-stat strong {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.config-panel {
  grid-area: config;
  padding: 12px 16px;
}

.config-panel-head {
  gap: 12px;
}

.config-panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.config-disclaimer {
  margin: 6px 0 0;
  font-size: 11px;
  font-style: italic;
  color: var(--muted, #7f8ba3);
}

.config-active-banner {
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 186, 73, 0.55);
  background: rgba(255, 186, 73, 0.12);
  color: #ffd9a0;
  font-size: 12px;
  line-height: 1.5;
}

.config-active-banner code {
  color: #fff2dc;
  font-weight: 600;
}

.config-groups {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px 16px;
}

.config-group h4 {
  margin: 0 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #7f8ba3);
}

.config-key-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}

.config-key-row label {
  font-size: 11px;
  color: #c8d2e6;
  word-break: break-word;
}

.config-key-row input[type="text"] {
  width: 100%;
  padding: 3px 6px;
  font-size: 11px;
  font-family: inherit;
  background: rgba(8, 16, 29, 0.9);
  border: 1px solid var(--panel-edge);
  border-radius: 4px;
  color: #eaf1ff;
}

.config-key-row.is-overridden input[type="text"] {
  border-color: rgba(255, 186, 73, 0.75);
}

.config-key-row.is-overridden label {
  color: #ffd9a0;
}

.config-key-row input[type="checkbox"] {
  justify-self: start;
}

/* #1060: collapsible 2nd-level subgroups (by 2nd prefix) inside each top group. */
.config-subgroup {
  border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.config-subgroup > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #aeb9cc;
}

.config-subgroup > summary::-webkit-details-marker {
  display: none;
}

.config-subgroup > summary::before {
  content: "▸";
  font-size: 9px;
  color: var(--muted, #7f8ba3);
}

.config-subgroup[open] > summary::before {
  content: "▾";
}

.config-subgroup > summary small {
  color: var(--muted, #7f8ba3);
  font-weight: 600;
}

.config-subgroup > .config-key-row {
  padding-left: 12px;
}

.panel {
  background: linear-gradient(180deg, rgba(13, 23, 38, 0.96), rgba(8, 16, 29, 0.96));
  border: 1px solid var(--panel-edge);
  border-radius: 7px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

.summary {
  grid-area: summary;
  padding: 14px 16px;
}

.summary-title,
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 800;
}

/* #1039: expand/collapse toggle for the metric panels below the chart. */
.section-title-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel-collapse {
  min-height: 0;
  padding: 3px 10px;
  background: #101b2a;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  border-radius: 6px;
}

.panel-collapse:hover {
  color: var(--text);
}

.summary-title {
  margin-bottom: 10px;
}

/* #1182: the go.Indicator KPI strip -- a short row of number+delta cards above
   the full summary grid. Fixed height so it reads as a compact header. */
.kpi-chart {
  width: 100%;
  height: 132px;
  margin-bottom: 12px;
}

.kpi-chart[hidden] {
  display: none;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(88px, 1fr));
  gap: 10px;
}

.metric {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.metric label {
  color: var(--muted);
  font-size: 12px;
}

.metric strong {
  font-size: 17px;
}

.good {
  color: var(--green);
}

.bad {
  color: var(--red);
}

.chart-panel {
  grid-area: chart;
  padding: 12px 14px 10px;
}

.chart-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* #1279: the Reset view control, top-right of the chart header. */
.chart-reset-button {
  border: 1px solid var(--panel-edge);
  border-radius: 5px;
  background: #101a28;
  color: var(--text);
  padding: 5px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.chart-reset-button:hover {
  border-color: var(--accent, #4f8dff);
  color: #fff;
}

.timeframe-select {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.timeframe-select select {
  border: 1px solid var(--panel-edge);
  border-radius: 5px;
  background: #101a28;
  color: var(--text);
  padding: 5px 8px;
  font: inherit;
  font-size: 12px;
}

.chart-toolbar {
  display: flex;
  gap: 8px;
  margin: 10px 0 8px;
}

.chart-toolbar button {
  border: 1px solid var(--panel-edge);
  border-radius: 5px;
  background: #101a28;
  color: #d7dee8;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.chart-toolbar button:hover:not(:disabled),
.chart-toolbar button.active {
  border-color: rgba(53, 208, 111, 0.9);
  background: #0f6f3a;
  color: #ffffff;
}

.chart-toolbar button:disabled {
  cursor: not-allowed;
  opacity: 0.32;
}

/* #1279 follow-up: the "All" zoom-out control sits apart from the timeframe
   group on the right, so it doesn't read as another timeframe. */
.chart-toolbar-all {
  margin-left: auto;
}

.chart-stack {
  position: relative;
  /* #1279: match #priceChart's height (820px). At 652px with overflow:hidden the
     bottom ~168px of the figure -- the equity strip AND the shared x-axis time
     labels -- was clipped, so the chart showed no time axis at all. */
  height: 820px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 6px;
  overflow: hidden;
  background: #07111d;
}

/* #1078: the whole multi-pane figure (price / volume / ratio / equity) is one
   Plotly figure rendered into #priceChart, which fills the chart stack
   responsively. #1272: tall enough that the 7%/6%/7% strips under the price
   pane stay legible. */
.plotly-chart,
#priceChart {
  width: 100%;
  height: 820px;
}

/* #1264: the excursion histograms are a compact full-width strip, matched to
   the Engine Analysis panel height instead of inheriting the price chart's. */
#distributionChart {
  height: 180px;
}

#volumeChart,
#ratioChart {
  display: none;
}

.chart-tooltip {
  position: absolute;
  z-index: 5;
  top: 16px;
  right: 70px;
  width: 226px;
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid #2a3a4f;
  border-radius: 6px;
  background: rgba(9, 18, 31, 0.94);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
  font-size: 12px;
}

.chart-tooltip.hidden {
  display: none;
}

.tooltip-title {
  color: var(--text);
  font-weight: 800;
  margin-bottom: 2px;
}

.tooltip-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  color: var(--muted);
}

.tooltip-row strong {
  color: var(--text);
}

/* #789 follow-up: the clicked "why no trade" reason sentence, full width. */
.tooltip-reason {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  max-width: 260px;
  white-space: normal;
}

.details {
  grid-area: details;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px;
  min-width: 360px;
  height: 100%;
  max-height: calc(100vh - 86px);
  min-height: 0;
  align-self: stretch;
  contain: layout paint;
  overflow: hidden;
}

.details-body {
  display: grid;
  align-content: start;
  gap: 10px;
  overflow-y: auto;
  padding-right: 2px;
  font-size: 13px;
}

.decision-header {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.decision-header.locked {
  border-bottom-color: rgba(79, 141, 255, 0.35);
}

.event-chip {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.event-chip.buy {
  background: var(--green);
}

.event-chip.sell {
  background: var(--red);
}

.event-chip.reduce {
  background: var(--yellow);
  color: #1f2937;
}

.event-chip.exit {
  background: var(--purple);
}

.event-chip.stop {
  background: var(--orange);
}

.event-chip.bos {
  width: 34px;
  background: #38bdf8;
  color: #082f49;
  font-size: 10px;
}

.event-chip.choch {
  background: #ec4899;
}

.event-chip.mss {
  background: #a855f7;
}

.event-chip.neutral {
  background: #64748b;
}

/* #1061: momentum/trend lifecycle legend chips (match the chart markers). */
.event-chip.mstart {
  background: #22c55e;
}

.event-chip.mend {
  background: #eab308;
  color: #1f2937;
}

.event-chip.tstart {
  background: #38bdf8;
  color: #082f49;
}

.event-chip.tend {
  background: #a78bfa;
  color: #1e1b4b;
}

.event-chip.large {
  width: 32px;
  height: 32px;
  font-size: 16px;
}

.status-table {
  display: grid;
}

/* #1058: collapsible Decision / Momentum / Trend / SMA groups in the details
   panel. Each group is a <details open> with its own caret header. */
.detail-groups {
  display: flex;
  flex-direction: column;
}

.detail-group {
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.detail-group > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.detail-group > summary::-webkit-details-marker {
  display: none;
}

.detail-group > summary::before {
  content: "▾";
  font-size: 9px;
  transition: transform 0.15s ease;
}

.detail-group:not([open]) > summary::before {
  transform: rotate(-90deg);
}

.status-row {
  display: grid;
  grid-template-columns: minmax(112px, 1fr) minmax(0, auto) 10px;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.10);
}

.status-row span:first-child {
  color: #c4cedb;
}

.detail-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: help;
}

.status-row .detail-value {
  max-width: 190px;
  text-align: right;
  font-weight: 800;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.tone-green {
  color: var(--green);
}

.tone-red {
  color: var(--red);
}

.tone-yellow {
  color: var(--yellow);
}

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

.tone-green .status-dot,
.status-dot.tone-green {
  background: var(--green);
}

.tone-red .status-dot,
.status-dot.tone-red {
  background: var(--red);
}

.tone-yellow .status-dot,
.status-dot.tone-yellow {
  background: var(--yellow);
}

.tone-muted .status-dot,
.status-dot.tone-muted {
  background: #64748b;
}

.analysis-panel {
  display: grid;
  gap: 9px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 7px;
  padding: 10px 12px;
  background: rgba(7, 15, 27, 0.48);
}

.analysis-panel > strong {
  font-size: 13px;
  color: #f8fafc;
}

.analysis-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 12px;
}

.analysis-metric {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.analysis-metric span {
  color: var(--muted);
  font-size: 11px;
}

.analysis-metric .detail-value {
  min-width: 0;
  color: #e2e8f0;
  font-size: 12px;
}

.debug-panel {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 7px;
  padding: 10px 12px;
  background: rgba(7, 15, 27, 0.52);
}

.debug-panel > strong,
.debug-panel summary {
  color: #f8fafc;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  list-style: none;
}

.debug-panel summary::-webkit-details-marker {
  display: none;
}

.debug-list {
  display: grid;
  gap: 8px;
}

.debug-event {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 6px;
  padding: 8px;
  background: rgba(15, 26, 42, 0.72);
}

.debug-time {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.debug-message {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  max-width: 100%;
}

.debug-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.debug-meta span {
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 4px;
  background: rgba(7, 15, 27, 0.72);
  color: #d3dbe6;
  font-size: 11px;
  line-height: 1.25;
  max-width: 100%;
  overflow: hidden;
  padding: 2px 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: help;
}

.debug-meta em {
  color: var(--muted);
  font-style: normal;
  margin-right: 4px;
}

details.reasoning {
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  padding: 10px 0;
}

details.reasoning summary {
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}

details.reasoning summary::-webkit-details-marker {
  display: none;
}

.stage-grid {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.contribution-panel {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.contribution-group {
  display: grid;
  gap: 5px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 6px;
  background: rgba(7, 15, 27, 0.54);
  padding: 8px;
}

.contribution-header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 54px;
  gap: 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.contribution-group > strong {
  color: var(--blue);
  font-size: 12px;
  text-transform: uppercase;
}

.contribution-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 54px;
  align-items: baseline;
  gap: 7px;
  color: #d3dbe6;
  font-size: 12px;
  line-height: 1.35;
}

.contribution-delta {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.contribution-label {
  min-width: 0;
}

.contribution-metric,
.contribution-confidence {
  color: var(--muted);
  font-size: 11px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.contribution-final {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  padding-top: 8px;
  color: #d3dbe6;
  font-size: 12px;
}

.contribution-final strong {
  font-variant-numeric: tabular-nums;
}

.contribution-final.positive strong,
.contribution-final.positive span:last-child {
  color: var(--green);
}

.contribution-final.negative strong,
.contribution-final.negative span:last-child {
  color: var(--red);
}

.stage {
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 6px;
  background: rgba(15, 26, 42, 0.72);
  padding: 9px;
}

.stage strong {
  display: block;
  color: var(--blue);
  margin-bottom: 4px;
}

.stage-lines {
  display: grid;
  gap: 4px;
  color: #d3dbe6;
  line-height: 1.45;
}

.diff-panel {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 7px;
  padding: 12px;
  background: rgba(7, 15, 27, 0.64);
}

.diff-panel > strong {
  font-size: 15px;
}

.diff-events {
  display: grid;
  grid-template-columns: 1fr 18px 1fr;
  align-items: center;
  gap: 8px;
  color: var(--text);
}

.diff-event {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.diff-event span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diff-row {
  display: grid;
  grid-template-columns: 1.05fr 0.8fr 18px 0.8fr auto;
  gap: 8px;
  align-items: baseline;
  min-height: 25px;
}

.diff-row span:first-child {
  color: #c4cedb;
}

.diff-value {
  display: block;
}

.diff-arrow {
  color: var(--muted);
  text-align: center;
}

.diff-delta {
  min-width: 54px;
  text-align: right;
}

.reason-delta {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.side-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  padding-top: 12px;
  gap: 14px;
}

.side-card {
  display: grid;
  align-content: start;
  gap: 7px;
  font-size: 12px;
}

.side-card strong {
  font-size: 13px;
}

.side-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.legend-actions {
  display: inline-flex;
  gap: 5px;
}

.legend-actions button {
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(15, 23, 42, 0.72);
  color: #dbeafe;
  border-radius: 5px;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.legend-actions button:hover {
  border-color: rgba(96, 165, 250, 0.7);
  color: #ffffff;
}

.legend-items {
  display: grid;
  gap: 7px;
}

.legend-item {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  color: #d3dbe6;
}

.legend-item input {
  width: auto;
  accent-color: var(--blue);
}

.legend-item small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.side-card span,
.chart-notes label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #d3dbe6;
}

.chart-notes input {
  width: auto;
  accent-color: var(--blue);
}

.lifecycle {
  grid-area: lifecycle;
  padding: 12px 14px;
}

.lifecycle-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  font-size: 12px;
}

.lifecycle-body.muted {
  display: block;
}

.lifecycle-group h4 {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
}

.lifecycle-group ul {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  gap: 3px;
}

.lifecycle-group li {
  font-family: "SFMono-Regular", Consolas, monospace;
  color: #d3dbe6;
}

/* #1078 part 3: per-run collapsible blocks (default collapsed) grouping the
   momentum/trend lifecycle events between a STARTED and its next ENDED. */
.lifecycle-run {
  margin-bottom: 4px;
}

.lifecycle-run > summary {
  cursor: pointer;
  list-style: none;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  color: #c8d2e6;
  padding: 2px 0;
}

.lifecycle-run > summary::-webkit-details-marker {
  display: none;
}

.lifecycle-run > summary::before {
  content: "▸";
  font-size: 9px;
  color: var(--muted);
  margin-right: 5px;
}

.lifecycle-run[open] > summary::before {
  content: "▾";
}

.lifecycle-run > ul {
  margin-top: 4px;
  padding-left: 12px;
}

.lifecycle-group .lifecycle-ended {
  color: var(--muted);
}

.lifecycle-group .lifecycle-updated {
  color: var(--blue);
}

/* #1037: behavior circle next to Length -- green bullish, red bearish,
   grey unpredictable, yellow continuation. */
.lifecycle-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: middle;
}

.lifecycle-dot-green {
  background: var(--green);
}

.lifecycle-dot-red {
  background: var(--red);
}

.lifecycle-dot-yellow {
  background: var(--yellow);
}

.lifecycle-dot-grey {
  background: #64748b;
}

.lifecycle-summary {
  color: var(--muted);
}

.timeline {
  grid-area: timeline;
  padding: 12px 14px;
}

.timeline-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 14px;
  margin-bottom: 9px;
}

/* #1039: the timeline collapse toggle sits at the panel's top-right, above the
   filter controls (which right-align within their own 1fr column). */
.timeline-collapse {
  justify-self: end;
  align-self: start;
}

.timeline-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 235px;
  font-weight: 900;
}

.timeline-title > span:first-child {
  font-size: 14px;
}

.timeline-title .muted {
  font-size: 13px;
  font-weight: 800;
}

.timeline-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

/* #789: compact HH:MM range filter for the timeline panel. */
.time-range-filter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 5px;
  background: #0e1826;
  padding: 3px 6px;
}

.time-range-label {
  font-size: 10px;
  font-weight: 800;
  color: #9fb0c4;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.time-range-filter input[type="text"] {
  width: 54px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 4px;
  background: #0b1420;
  color: #d8e0eb;
  font-size: 11px;
  text-align: center;
  padding: 2px 4px;
}

/* #1501 follow-up: flag a field the parser rejected. */
.time-range-filter input.invalid {
  border-color: #ef4444;
  color: #fca5a5;
}

/* #1501 follow-up: inline validation message for a bad time or range. */
.time-range-error {
  color: #fca5a5;
  font-size: 10px;
  font-weight: 700;
  max-width: 220px;
  display: none;
}

.time-range-error.visible {
  display: inline;
}

.time-range-dash {
  color: #6b7a8d;
}

.time-range-clear {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 4px;
  background: #0e1826;
  color: #9fb0c4;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 6px;
}

.time-range-clear:hover {
  color: #d8e0eb;
  border-color: rgba(148, 163, 184, 0.4);
}

.toggle-box,
.action-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 5px;
  background: #0e1826;
  color: #d8e0eb;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  padding: 6px 8px;
  white-space: nowrap;
}

.toggle-box input,
.action-filter input {
  width: auto;
  margin: 0;
  accent-color: var(--blue);
}

.action-filters {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  /* #789: cap the filter's footprint so the time-range filter fits on the
     controls row; overflow scrolls rather than pushing other controls out. */
  max-width: 260px;
  max-height: 58px;
  overflow-y: auto;
}

.action-filter.is-buy,
.toggle-box:has(input:checked) {
  border-color: #35d06f;
  background: #137a3f;
  color: #ffffff;
}

.action-filter.is-sell {
  border-color: #ff5148;
  background: #9f1f24;
  color: #ffffff;
}

.action-filter.is-reduce {
  border-color: #f5b51b;
  background: #b17300;
  color: #fff7d6;
}

.action-filter.is-bos {
  border-color: #38bdf8;
  background: #075985;
  color: #e0f2fe;
}

.action-filter.is-choch {
  border-color: #ec4899;
  background: #9d174d;
  color: #fce7f3;
}

.action-filter.is-mss {
  border-color: #a855f7;
  background: #6b21a8;
  color: #f3e8ff;
}

.action-filter.is-wait {
  border-color: #4f8dff;
  background: #1450b8;
  color: #ffffff;
}

.action-filter.is-no-trade,
.action-filter.is-neutral {
  border-color: #94a3b8;
  background: #334155;
  color: #ffffff;
}

.timeline-items {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 88px;
  gap: 10px;
  overflow-x: auto;
  padding: 0 0 2px;
}

.event-card {
  min-height: 82px;
  display: grid;
  align-content: center;
  gap: 3px;
  background: #0f1a29;
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  padding: 7px 8px;
  text-align: center;
}

.event-card.is-buy {
  border-color: #35d06f;
  background: #0f6f3a;
}

.event-card.is-sell {
  border-color: #ff5148;
  background: #8f1d22;
}

.event-card.is-reduce {
  border-color: #f5b51b;
  background: #946100;
}

.event-card.is-bos {
  border-color: #38bdf8;
  background: #075985;
}

.event-card.is-choch {
  border-color: #ec4899;
  background: #8a1245;
}

.event-card.is-mss {
  border-color: #a855f7;
  background: #581c87;
}

.event-card.is-wait {
  border-color: #4f8dff;
  background: #123f8f;
}

.event-card.is-no-trade,
.event-card.is-neutral {
  border-color: #94a3b8;
  background: #334155;
}

.event-card.active {
  border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green) inset, 0 0 24px rgba(53, 208, 111, 0.13);
}

.event-card.locked {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue) inset, 0 0 20px rgba(79, 141, 255, 0.18);
}

.event-card time {
  color: #dbe5f0;
  font-size: 11px;
  font-weight: 900;
}

.event-card strong {
  font-size: 11px;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.event-card .muted {
  color: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  font-weight: 800;
}

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

.error {
  color: var(--red);
}

.hidden {
  display: none;
}

@media (max-width: 1180px) {
  .topbar,
  .shell {
    grid-template-columns: 1fr;
  }

  .topbar {
    height: auto;
    padding: 12px;
  }

  .shell {
    grid-template-areas:
      "summary"
      "chart"
      "lifecycle"
      "timeline"
      "details";
  }

  .shell.has-config-change {
    grid-template-areas:
      "summary"
      "chart"
      "lifecycle"
      "configchange"
      "timeline"
      "details";
  }

  .details {
    max-height: none;
  }

}