/* ==========================================================================
   TERMINAL — components
   Panels, tables, controls, meters, charts, overlays.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Panel — the single container primitive. Everything on every page is one of
   these. Flat, hairline-bordered, square-ish: no drop shadows, because floating
   cards belong to marketing sites, not instruments.
   -------------------------------------------------------------------------- */

.panel {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.panel-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  background: var(--raised-2);
  min-height: 38px;
  flex-shrink: 0;
}

.panel-head .label { flex-shrink: 0; }
.panel-head-spacer { flex: 1; }

.panel-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-hi);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Grow, never shrink: when a panel is stretched to match a taller neighbour the
   body takes the slack, so the footer sits on the bottom edge rather than
   floating with dead space beneath it. */
.panel-body { padding: var(--s4); min-width: 0; flex: 1 0 auto; }
/* A flush body holding a scroll pane has to be allowed to shrink,
   or the pane grows past the panel instead of scrolling inside it. */
.panel-body.fill { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.panel-body.fill > .tbl-wrap,
.panel-body.fill > .chart { flex: 1; min-height: 0; }
.panel-body.flush { padding: 0; }
.panel-body.tight { padding: var(--s3); }

.panel-foot {
  padding: var(--s2) var(--s4);
  border-top: 1px solid var(--line);
  background: var(--raised-2);
  font-size: var(--fs-tiny);
  color: var(--text-lo);
  display: flex;
  align-items: center;
  gap: var(--s3);
}

/* --------------------------------------------------------------------------
   Grid helpers
   -------------------------------------------------------------------------- */

/* Panels sitting side by side share a height. Letting each stop where its own
   content ends leaves a ragged hole beside the taller one, which reads as a
   rendering fault rather than as a short panel. Use .grid.ragged where the
   natural heights genuinely differ and stretching would look worse. */
.grid { display: grid; gap: var(--s4); min-width: 0; align-items: stretch; }
.grid.ragged { align-items: start; }
/* Takes the leftover height of the page, so its panels reach the bottom. */
.grid.fill, .panel.fill { flex: 1; min-height: 0; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.g-main { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
.g-side { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); }

.row { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.row.wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.spacer { flex: 1; }

@media (max-width: 1400px) {
  .g-4, .g-5, .g-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-main, .g-side { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  .g-3, .g-4, .g-5, .g-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Stat — the KPI readout. Label above, big tabular figure, delta below.
   -------------------------------------------------------------------------- */

.stat { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }

.stat-value {
  font-family: var(--f-num);
  /* Scales with the window rather than sitting at 26px regardless. A six-cell
     strip on a 1280 screen gives each figure about 175px, and "+£28,406.63" at
     the full size needs more than that -- it ran into the cell beside it and
     the two numbers read as one. Capped at the design size, so nothing changes
     on a wide screen. */
  font-size: clamp(18px, 1.6vw, var(--fs-2xl));
  font-weight: 500;
  color: var(--text-hi);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  line-height: 1.1;
  white-space: nowrap;
}

.stat-value.sm { font-size: var(--fs-lg); }
.stat-value.lg { font-size: var(--fs-3xl); }

.stat-meta {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  font-family: var(--f-num);
  font-size: var(--fs-tiny);
  font-variant-numeric: tabular-nums;
}

.stat-cell {
  padding: var(--s4);
  border-right: 1px solid var(--line);
  min-width: 0;
}
.stat-cell:last-child { border-right: 0; }

.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
}

/* A handful of stats side by side, without the strip's cell borders. Used where
   the figures are a readout rather than the headline of a screen -- the
   workspace's focus panel. Wraps rather than compressing, because two numbers
   squeezed into one column read as one number. */
.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
  min-width: 0;
}

/* A sentence explaining what a panel is, above the panel's content. Five
   screens used this and it had no rule, so each rendered at body size in body
   colour -- indistinguishable from the data underneath, which is the one thing
   an explanatory line must not be. */
.note {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-lo);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line-soft);
}
.panel-body > .note:first-child { padding-top: 0; }

/* --------------------------------------------------------------------------
   Tables — dense by default. This is where a trading UI is won or lost.
   -------------------------------------------------------------------------- */

.tbl-wrap { overflow: auto; min-width: 0; }

/* A long list should stop where the window does, not at a pixel figure someone
   guessed on a 1080p laptop. Capping in viewport units keeps the scrollbar
   inside the panel and the panel inside the screen on any monitor, and stops a
   short list from leaving a band of empty page underneath it. */
.tbl-wrap.viewport { max-height: calc(100vh - 19rem); min-height: 20rem; }

table.tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-sm);
}

table.tbl thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--raised-2);
  border-bottom: 1px solid var(--line);
  padding: var(--s2) var(--row-pad-x);
  text-align: left;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-lo);
  font-variation-settings: "wdth" 92;
  white-space: nowrap;
  user-select: none;
}

table.tbl thead th.sortable { cursor: pointer; }
table.tbl thead th.sortable:hover { color: var(--text); }
table.tbl thead th[aria-sort] { color: var(--accent); }
table.tbl thead th[aria-sort="ascending"]::after { content: " \2191"; }
table.tbl thead th[aria-sort="descending"]::after { content: " \2193"; }

table.tbl tbody td {
  padding: var(--row-pad-y) var(--row-pad-x);
  border-bottom: 1px solid var(--line-soft);
  height: var(--row-h);
  color: var(--text);
  white-space: nowrap;
  vertical-align: middle;
}

/* Optional columns: context rather than the basis of a decision. A book with
   thirteen columns cannot fit a 1440 laptop, and the columns that fall off the
   right-hand edge are chosen by column order rather than by importance --
   which is how the sparkline survived and the return did not. Marking the
   dispensable ones lets the narrow case drop those instead. */
@media (max-width: 1500px) {
  table.tbl th.opt,
  table.tbl td.opt { display: none; }
}

/* Prose columns wrap instead of running off the edge. A remedy truncated
   mid-sentence -- "set TELEGRAM_CHAT_" -- is one nobody can act on, and these
   cells exist precisely to be acted on. */
table.tbl td.wrap,
table.tbl th.wrap {
  white-space: normal;
  min-width: 22ch;
  line-height: 1.45;
}

table.tbl tbody tr:hover td { background: var(--raised-2); }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl tbody tr.selected td { background: var(--accent-wash); }

table.tbl th.r, table.tbl td.r { text-align: right; }
table.tbl th.c, table.tbl td.c { text-align: center; }

table.tbl td.num {
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

table.tbl td.sym {
  font-family: var(--f-num);
  font-weight: 600;
  color: var(--text-hi);
  letter-spacing: -0.01em;
}

/* Ticker over company name in one cell. Two lines cost a few pixels of row
   height and buy back a whole column, which is what lets the wide books fit
   without a horizontal scrollbar. */
table.tbl td .sub {
  display: block;
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: var(--fs-micro);
  color: var(--text-lo);
  letter-spacing: 0;
  margin-top: 1px;
}

table.tbl td.name {
  color: var(--text-lo);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Truncate long prose so it cannot push the columns after it off the edge.
   An ellipsis is honest about there being more; a column that has silently
   fallen off the right of the table is not. */
table.tbl td.clip {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Zebra is off by default; a hairline per row is enough at this density. */
table.tbl.zebra tbody tr:nth-child(even) td { background: rgba(255,255,255,0.012); }

.tbl-empty {
  padding: var(--s10) var(--s4);
  text-align: center;
  color: var(--text-dim);
  font-size: var(--fs-sm);
}
.tbl-empty strong { display: block; color: var(--text-lo); margin-bottom: var(--s1); font-weight: 600; }

/* --------------------------------------------------------------------------
   Chips, pills, badges
   -------------------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: var(--inset);
  font-family: var(--f-num);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-lo);
  white-space: nowrap;
}

.chip.pos  { color: var(--pos); border-color: var(--pos); background: var(--pos-wash); }
.chip.neg  { color: var(--neg); border-color: var(--neg); background: var(--neg-wash); }
.chip.warn { color: var(--warn); border-color: var(--accent-edge); background: var(--accent-wash); }
.chip.info { color: var(--info); border-color: var(--info); background: var(--info-wash); }
.chip.llm  { color: var(--llm); border-color: var(--llm); background: var(--llm-wash); }
.chip.mute { color: var(--text-dim); border-color: var(--line); }
.chip.solid { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

.chip-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.kbd {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  background: var(--raised-2);
  font-family: var(--f-num);
  font-size: 9px;
  color: var(--text-lo);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  height: 28px;
  padding: 0 var(--s3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--raised-2);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.btn svg { width: 13px; height: 13px; stroke-width: 1.8; }
.btn:hover { background: var(--overlay); border-color: var(--text-dim); color: var(--text-hi); }
.btn:active { transform: translateY(0.5px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}
.btn.primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: var(--accent-text); }

.btn.buy  { background: var(--pos-wash); border-color: var(--pos); color: var(--pos); font-weight: 600; }
.btn.buy:hover { background: var(--pos); color: var(--void); }
.btn.sell { background: var(--neg-wash); border-color: var(--neg); color: var(--neg); font-weight: 600; }
.btn.sell:hover { background: var(--neg); color: var(--void); }

.btn.danger { border-color: var(--neg); color: var(--neg); }
.btn.danger:hover { background: var(--neg); color: var(--void); border-color: var(--neg); }

.btn.ghost { background: transparent; border-color: transparent; color: var(--text-lo); }
.btn.ghost:hover { background: var(--raised-2); color: var(--text-hi); }

.btn.sm { height: 22px; padding: 0 var(--s2); font-size: var(--fs-tiny); }
.btn.icon { width: 28px; padding: 0; }
.btn.icon.sm { width: 22px; }
.btn.block { width: 100%; }

/* Segmented control — timeframe pickers, view switches. */
.seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--inset);
  overflow: hidden;
}
.seg button {
  height: 24px;
  padding: 0 var(--s3);
  border: 0;
  background: transparent;
  color: var(--text-lo);
  font-family: var(--f-num);
  font-size: var(--fs-tiny);
  font-weight: 500;
  cursor: pointer;
  border-right: 1px solid var(--line);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.seg button:last-child { border-right: 0; }
.seg button:hover { color: var(--text-hi); background: var(--raised-2); }
.seg button[aria-pressed="true"] { background: var(--accent-wash); color: var(--accent); }

/* --------------------------------------------------------------------------
   Form controls
   -------------------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

/* The line under an input that says what the value means or what is allowed.
   Dim and small: it is there when read for, not competing with the label. */
.field-hint {
  font-size: var(--fs-micro);
  color: var(--text-dim);
  line-height: 1.4;
}
.field-hint.warn { color: var(--warn); }

.input, .select, textarea.input {
  height: 28px;
  padding: 0 var(--s3);
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text-hi);
  font-size: var(--fs-sm);
  width: 100%;
  transition: border-color var(--t-fast) var(--ease);
}

.input.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; text-align: right; }
textarea.input { height: auto; padding: var(--s2) var(--s3); resize: vertical; line-height: 1.5; }

.input:focus, .select:focus { outline: none; border-color: var(--accent); }
.input::placeholder { color: var(--text-dim); }

.select {
  appearance: none;
  padding-right: var(--s6);
  background-image: linear-gradient(45deg, transparent 50%, var(--text-lo) 50%),
                    linear-gradient(135deg, var(--text-lo) 50%, transparent 50%);
  background-position: calc(100% - 14px) 12px, calc(100% - 9px) 12px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* Switch — used for arming, enabling, kill switch. */
.switch {
  position: relative;
  display: inline-block;
  width: 32px; height: 18px;
  border-radius: 9px;
  background: var(--inset);
  border: 1px solid var(--line-strong);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: transform var(--t) var(--ease), background var(--t) var(--ease);
}
.switch[aria-checked="true"] { background: var(--accent-wash); border-color: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(14px); background: var(--accent); }
.switch.danger[aria-checked="true"] { background: var(--neg-wash); border-color: var(--neg); }
.switch.danger[aria-checked="true"]::after { background: var(--neg); }

/* --------------------------------------------------------------------------
   Meters — risk utilisation, allocation, progress
   -------------------------------------------------------------------------- */

.meter {
  height: 4px;
  background: var(--inset);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.meter > i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width var(--t) var(--ease);
}
.meter.ok > i     { background: var(--pos); }
.meter.watch > i  { background: var(--warn); }
.meter.breach > i { background: var(--neg); }
.meter.tall { height: 6px; }

/* Allocation bar — one stacked strip showing the whole book at a glance. */
.alloc {
  display: flex;
  height: 8px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--inset);
  gap: 1px;
}
.alloc > i { display: block; height: 100%; transition: flex-grow var(--t) var(--ease); }

/* --------------------------------------------------------------------------
   Charts
   -------------------------------------------------------------------------- */

.chart { width: 100%; position: relative; }
.chart canvas { display: block; width: 100%; }

.spark { width: 68px; height: 20px; display: block; }

.chart-legend {
  display: flex;
  gap: var(--s4);
  font-size: var(--fs-tiny);
  color: var(--text-lo);
  font-family: var(--f-num);
}
.chart-legend i {
  display: inline-block;
  width: 8px; height: 2px;
  margin-right: 5px;
  vertical-align: middle;
}

/* Heatmap cell used by the monthly-returns grid and the correlation matrix. */
.heat {
  display: grid;
  place-items: center;
  height: 26px;
  border-radius: var(--r-sm);
  font-family: var(--f-num);
  font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums;
  color: var(--text-hi);
}

/* --------------------------------------------------------------------------
   Overlays — command palette, drawer, modal, toast
   -------------------------------------------------------------------------- */

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(3, 5, 8, 0.72);
  backdrop-filter: blur(2px);
  z-index: 90;
}

.palette {
  position: fixed;
  top: 14vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(620px, calc(100vw - 32px));
  background: var(--overlay);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  z-index: 91;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.55);
}

.palette-input {
  width: 100%;
  height: 44px;
  padding: 0 var(--s4);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-hi);
  font-size: var(--fs-md);
}
.palette-input:focus { outline: none; }
.palette-input::placeholder { color: var(--text-dim); }

.palette-list { max-height: 46vh; overflow-y: auto; padding: var(--s2); }

.palette-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  height: 32px;
  padding: 0 var(--s3);
  border-radius: var(--r);
  color: var(--text);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.palette-item svg { width: 14px; height: 14px; color: var(--text-dim); }
.palette-item[data-active="true"] { background: var(--accent-wash); color: var(--accent); }
.palette-item[data-active="true"] svg { color: var(--accent); }
.palette-item .spacer + .chip { flex-shrink: 0; }

.palette-foot {
  border-top: 1px solid var(--line);
  padding: var(--s2) var(--s4);
  display: flex;
  gap: var(--s4);
  font-size: var(--fs-micro);
  color: var(--text-dim);
}

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: var(--statusbar-h);
  width: min(520px, 92vw);
  background: var(--base);
  border-left: 1px solid var(--line-strong);
  z-index: 91;
  display: flex;
  flex-direction: column;
  box-shadow: -24px 0 64px rgba(0,0,0,0.45);
}

.drawer-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.drawer-body { flex: 1; overflow-y: auto; padding: var(--s4); display: flex; flex-direction: column; gap: var(--s4); }
.drawer-foot { padding: var(--s3) var(--s4); border-top: 1px solid var(--line); display: flex; gap: var(--s2); flex-shrink: 0; }

.toasts {
  position: fixed;
  right: var(--s4);
  bottom: calc(var(--statusbar-h) + var(--s4));
  z-index: 95;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  width: 320px;
}

.toast {
  background: var(--overlay);
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--accent);
  border-radius: var(--r);
  padding: var(--s3);
  font-size: var(--fs-sm);
  animation: toast-in var(--t) var(--ease);
}
.toast.pos { border-left-color: var(--pos); }
.toast.neg { border-left-color: var(--neg); }
.toast-title { font-weight: 600; color: var(--text-hi); margin-bottom: 2px; }
.toast-body { color: var(--text-lo); font-size: var(--fs-tiny); }

@keyframes toast-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   Callouts
   -------------------------------------------------------------------------- */

.callout {
  display: flex;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-left-width: 2px;
  border-left-color: var(--accent);
  border-radius: var(--r);
  background: var(--accent-wash);
  font-size: var(--fs-sm);
  color: var(--text);
}
.callout.neg  { border-left-color: var(--neg); background: var(--neg-wash); }
/* Amber, and never the accent: eight screens ask for `.callout warn` and every
   one of them got the default periwinkle, because this rule did not exist.
   Amber is reserved for warnings here precisely so that one is distinguishable
   from ordinary emphasis -- and never red, which means money lost. */
.callout.warn { border-left-color: var(--warn); background: var(--warn-wash); }
.callout.warn svg { color: var(--warn); }
.callout.pos  { border-left-color: var(--pos); background: var(--pos-wash); }
.callout.info { border-left-color: var(--info); background: var(--info-wash); }
.callout svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.callout strong { color: var(--text-hi); font-weight: 600; }

/* Timeline — audit trail, work log, order lifecycle. */
.timeline { display: flex; flex-direction: column; }
.tl-item {
  display: grid;
  grid-template-columns: 68px 12px 1fr;
  gap: var(--s3);
  padding: var(--s2) 0;
  font-size: var(--fs-sm);
}
.tl-time { font-family: var(--f-num); font-size: var(--fs-micro); color: var(--text-dim); padding-top: 3px; text-align: right; }
.tl-mark { position: relative; }
.tl-mark::before {
  content: "";
  position: absolute;
  left: 4px; top: 6px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--text-dim);
  z-index: 1;
}
.tl-item:not(:last-child) .tl-mark::after {
  content: "";
  position: absolute;
  left: 6px; top: 12px; bottom: -10px;
  width: 1px;
  background: var(--line);
}
.tl-item.pos .tl-mark::before { background: var(--pos); }
.tl-item.neg .tl-mark::before { background: var(--neg); }
.tl-item.warn .tl-mark::before { background: var(--warn); }
.tl-body { min-width: 0; }
.tl-title { color: var(--text-hi); }
.tl-sub { color: var(--text-dim); font-size: var(--fs-tiny); }

/* Run log — a disclosure rather than a wall of text. The summary carries the
   last line, which is the reason a cycle stopped; the rest is on demand. */
.run-log { margin-top: var(--s1); }
.run-log > summary {
  cursor: pointer;
  color: var(--text-dim);
  font-size: var(--fs-tiny);
  font-family: var(--font-mono);
  list-style: none;
  padding: 2px 0;
}
.run-log > summary::-webkit-details-marker { display: none; }
.run-log > summary::before {
  content: "+ ";
  color: var(--accent);
}
.run-log[open] > summary::before { content: "− "; }
.run-log > summary:hover { color: var(--text-hi); }
.run-log > pre {
  margin: var(--s1) 0 0;
  padding: var(--s2);
  background: var(--inset);
  border: 1px solid var(--line);
  font-size: var(--fs-tiny);
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 260px;
  overflow-y: auto;
}

/* Large optional workflows should not push the thing being managed below the
   fold. The strategy comparison opens itself only while an experiment exists. */
.workflow-disclosure > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.workflow-disclosure > summary::-webkit-details-marker { display: none; }
.workflow-disclosure[open] > summary { border-bottom: 1px solid var(--line); }
.workflow-disclosure > form { min-width: 0; }
.workflow-chevron {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  border: 1px solid var(--line-strong);
}
.workflow-disclosure[open] .workflow-chevron { transform: rotate(45deg); }
@media (max-width: 1000px) {
  .workflow-disclosure > summary > .dim { display: none; }
}

.broker-ip-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s4);
  padding: var(--s3);
  background: var(--accent-wash);
  border: 1px solid var(--accent-edge);
}
.broker-ip-strip .input { width: 150px; color: var(--text-hi); }
@media (max-width: 1000px) {
  .broker-ip-strip { align-items: stretch; flex-direction: column; }
  .broker-ip-strip .input { flex: 1; width: auto; }
}

/* Depth / book ladder — background bar encodes size behind the number. */
.ladder-row { position: relative; }
.ladder-row > .fill {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  background: var(--pos-wash);
  z-index: 0;
}
.ladder-row.ask > .fill { background: var(--neg-wash); left: 0; right: auto; }
.ladder-row > * { position: relative; z-index: 1; }


/* --------------------------------------------------------------------------
   Flash messages
   -------------------------------------------------------------------------- */

/* Above the page content rather than floating over it: these report what an
   action did, and a toast that fades is the wrong shape for "your order was
   refused". They stay until the next navigation. */
.flash-stack {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-bottom: var(--s4);
}


/* --------------------------------------------------------------------------
   Correlation grid
   -------------------------------------------------------------------------- */

/* Shaded by how alike two holdings have been. Deliberately not green/red: a
   high correlation is not a loss, and those two hues stay reserved for money.
   The scale runs from the page's own surface up through amber, so the eye
   finds the duplication without being told a number is bad. */
.tbl.corr th[scope="row"] { text-align: left; color: var(--text-lo); font-weight: 500; }
.tbl.corr td { font-variant-numeric: tabular-nums; }

.corr-self { color: var(--text-dim); }
.corr-low  { color: var(--text-lo); }
.corr-mid  { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--text-hi); }
.corr-high { background: color-mix(in srgb, var(--warn) 28%, transparent); color: var(--text-hi); font-weight: 600; }
/* A hedge is the opposite of the problem, so it reads as the accent rather
   than as another shade of warning. */
.corr-hedge { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text-hi); }
.corr-none { color: var(--text-dim); }


/* --------------------------------------------------------------------------
   Danger zone — a destructive form that stays folded away until asked for.

   The People panel carries one per person. Rendering them all open turns a list
   of twenty into twenty stacked delete forms, and puts an irreversible control
   permanently in front of somebody who came to read a number. `:target` opens
   the one whose anchor was clicked and needs no JavaScript, so the control
   cannot end up half-wired the way a scripted toggle can.
   -------------------------------------------------------------------------- */

.danger-zone { display: none; }
.danger-zone:target { display: flex; }