/* Alphinity Performance — every colour a var() from shell.css's :root, so the
   tab re-themes with the rest of the app. The one visual rule that carries
   meaning: an UNSUPPORTED metric is rendered dim and italic, never as a
   figure, so a reader cannot mistake a sample warning for a measurement. */

/* The page is as wide as the screen; its BLOCKS are as wide as they should be.
   Capping `#perf` itself was the same rule for prose and for evidence, and the
   evidence lost: three columns of chart do not fit in a reading measure. So the
   measure moves down onto the blocks that are text (60-90 characters, where it
   belongs) and `.perf-wide` opts a block out. Done here rather than with a
   negative-margin break-out on the committee, because `#perf` scrolls — any
   child wider than its content box would have given the page a horizontal
   scrollbar of its own. */
#perf {
  padding: 20px 24px 60px;
  overflow-y: auto;
  height: 100%;
}

/* The one width the wide blocks share. A custom property rather than the
   literal twice, so the committee's content and the controls above it cannot
   drift apart by someone editing one of them. */
:root {
  --perf-wide: 2200px;
}

#perf-head,
#range,
.perf-block {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.perf-block.perf-wide {
  max-width: var(--perf-wide);
}

/* On `/committee` the page IS the wide block — there is no prose column left
   for the reading measure to serve, so the header and the period filter take
   the same width as the content they govern. A 1100px filter centred above a
   2200px table reads as a control belonging to some other page, and the eye
   has to travel to find which trades it just filtered. */
#perf.is-committee #perf-head,
#perf.is-committee #range {
  max-width: var(--perf-wide);
}

#perf-head h1 {
  font-size: 18px;
  letter-spacing: 0.05em;
  margin: 0 0 6px 0;
}

.broker-ok, .broker-down {
  margin: 0;
  color: var(--text-dim);
}

.broker-down {
  color: var(--sell);
}

.venue {
  padding: 1px 8px;
  margin-left: 6px;
  border-radius: 3px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #12161c;
  background: var(--hold);
}

.venue-live {
  background: var(--sell);
  color: #ffffff;
}

/* ── The range filter ──────────────────────────────────────────────────────
   A plain GET form, so the selected period is a shareable URL and the page
   needs no JavaScript to filter itself. */

#range {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
}

#range label {
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 0.04em;
}

#range input[type="date"] {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 4px 8px;
  font: inherit;
  color-scheme: dark;
}

#range button {
  background: var(--selected);
  color: #12161c;
  border: none;
  border-radius: 3px;
  padding: 5px 14px;
  font: inherit;
  cursor: pointer;
}

.range-presets {
  display: flex;
  gap: 4px;
  margin-left: 6px;
}

.range-presets a {
  color: var(--text-dim);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 4px 9px;
}

.range-presets a:hover, .range-presets a:focus-visible {
  color: var(--text);
  border-color: var(--selected);
  outline: none;
}

.range-span {
  margin-left: auto;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* ── The equity curve ──────────────────────────────────────────────────── */

.curve {
  margin: 0;
}

.curve svg {
  width: 100%;
  height: 260px;
}

/* The 100 line: where both curves started, so "above or below this" is the
   whole question the chart answers. */
.cv-base {
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}

.cv-desk, .cv-bench {
  fill: none;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}

.cv-desk {
  stroke: var(--selected);
}

.cv-bench {
  stroke: var(--text-dim);
  stroke-dasharray: 5 4;
}

.cv-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
  color: var(--text-dim);
  font-size: 11px;
}

.cv-swatch {
  width: 16px;
  height: 2px;
  display: inline-block;
}

.sw-desk { background: var(--selected); }
.sw-bench { background: var(--text-dim); }

.cv-gap {
  padding-left: 14px;
  border-left: 1px solid var(--border);
}

.cv-legend strong {
  font-variant-numeric: tabular-nums;
}

/* ── The timeline ──────────────────────────────────────────────────────── */

.timeline {
  margin: 0;
}

.timeline svg {
  width: 100%;
  height: 120px;
}

.tl-axis {
  stroke: var(--border);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* Thin and dim: on a 30-day view there are hundreds, and at full strength
   they stop being a texture and become a wall. */
.tl-crossing {
  stroke: var(--text-dim);
  stroke-width: 1;
  opacity: 0.45;
  vector-effect: non-scaling-stroke;
}

.tl-tick {
  fill: var(--hold);
}

.tl-tick.tl-abstain {
  fill: var(--abstain);
}

.tl-trade {
  stroke: var(--bg);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.tl-buy { fill: var(--buy); }
.tl-sell { fill: var(--sell); }

.tl-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
  color: var(--text-dim);
  font-size: 11px;
}

.tl-key {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.tl-swatch {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.sw-crossing {
  width: 2px;
  height: 12px;
  border-radius: 0;
  background: var(--text-dim);
}

.sw-tick { background: var(--hold); }
.sw-buy { background: var(--buy); }
.sw-sell { background: var(--sell); }

.tl-ends {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.perf-block {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.perf-block h2 {
  font-size: 13px;
  letter-spacing: 0.04em;
  margin: 0 0 10px 0;
}

.perf-block p {
  color: var(--text-dim);
  margin: 0 0 10px 0;
}

.sample-note {
  color: var(--text) !important;
}

.perf-empty {
  color: var(--text-dim);
}

/* ── Metrics ───────────────────────────────────────────────────────────── */

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}

.metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
}

.metric-label {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}

.metric-value {
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}

.metric-n {
  font-size: 11px;
  color: var(--text-dim);
}

/* The load-bearing style on this page. */
.metric.is-empty {
  border-style: dashed;
}

.metric-none {
  font-size: 13px;
  font-style: italic;
  color: var(--text-dim);
}

/* ── The decision mix ──────────────────────────────────────────────────── */

.mix-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mix-row {
  display: grid;
  grid-template-columns: 80px 1fr 40px;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.mix-label {
  color: var(--text-dim);
  font-size: 11px;
  text-transform: uppercase;
}

.mix-track {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  height: 14px;
  overflow: hidden;
}

.mix-bar {
  display: block;
  height: 100%;
}

.bar-buy { background: var(--buy); }
.bar-sell { background: var(--sell); }
.bar-hold { background: var(--hold); }
.bar-abstain { background: var(--abstain); }

.mix-count {
  text-align: right;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* ── The committee ─────────────────────────────────────────────────────── */

/* The list on the left, the selected trade's development on the right.
   Selection is a LINK carrying `?trade=`, so it needs no JavaScript, survives
   a reload and can be sent to someone else. */
/* The block is wide; its own prose is not. */
.perf-wide > h2,
.perf-wide > p {
  max-width: 1100px;
}

/* Three columns: WHICH trade, WHAT it did, WHAT the desk was looking at. The
   third earns its place by being the only one a reader cannot reconstruct from
   the other two, so it is given at least as much room as the trade itself. */
.committee {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 16px;
  align-items: start;
}

/* Below ~1500px the third column would squeeze the path chart into a strip, so
   the evidence drops under the pair at full width instead of being crushed
   beside them. Below ~1000px everything stacks. */
@media (max-width: 1500px) {
  .committee {
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  }
  .evidence {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1000px) {
  .committee {
    grid-template-columns: minmax(0, 1fr);
  }
}

.trade-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.trade-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 12px;
  margin-bottom: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  /* The left edge is the SYSTEM's, not the selection's: which version took
     this trade is a property of the row, and selection is a property of the
     session. Set per row from the version registry's own colour; transparent
     when no version claims the instant, which reads as unattributed rather
     than as some other version. The legend is the Docs sidebar. */
  border-left: 3px solid var(--system-color, transparent);
  border-radius: 4px;
  color: var(--text);
  text-decoration: none;
}

/* Hover and selection restate the left edge so neither can repaint it — the
   version colour must survive every interaction state, or the page tells a
   different story depending on where the mouse is. */
.trade-row:hover, .trade-row:focus-visible {
  border-color: var(--selected);
  border-left-color: var(--system-color, transparent);
  outline: none;
}

.trade-row.is-selected {
  background: var(--border);
  box-shadow: inset 0 0 0 1px var(--selected);
}

.trade-when {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.trade-trigger {
  color: var(--text-dim);
  font-size: 11px;
}

.trade-pnl {
  width: 100%;
  color: var(--text-dim);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.trade-detail {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px 14px;
}

/* ── The trade's own development ───────────────────────────────────────── */

.path {
  margin: 10px 0 0 0;
}

.path svg {
  width: 100%;
  height: 300px;
}

/* Candles, not a close line. The WICK is the load-bearing mark here: a level is
   reached inside a bar, so a close line draws price stopping short of a target
   the trade demonstrably hit — which is what a reader sees as the chart
   contradicting the outcome printed beside it.

   `vector-effect` on the wick because the SVG is stretched with
   `preserveAspectRatio="none"`; without it the strokes scale with the box and a
   wide window draws hairlines while a narrow one draws slabs. */
.ck-wick {
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.ck-up .ck-wick, .ck-up .ck-body { stroke: var(--buy); }
.ck-down .ck-wick, .ck-down .ck-body { stroke: var(--sell); }

/* Filled up, hollow down: the same convention a trader already reads without
   being told, and it keeps a down-candle's body from hiding its own wick. */
.ck-up .ck-body { fill: var(--buy); }
.ck-down .ck-body { fill: var(--bg); stroke-width: 1; }

/* The three roles a level plays, so the chart reads without a legend. */
.pl {
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.pl-entry { stroke: var(--selected); }
.pl-risk { stroke: var(--sell); stroke-dasharray: 5 4; }
.pl-reward { stroke: var(--buy); stroke-dasharray: 5 4; }

.pl-label {
  font-size: 9px;
  fill: var(--text-dim);
}

.pl-entry-t { fill: var(--selected); }
.pl-risk-t { fill: var(--sell); }
.pl-reward-t { fill: var(--buy); }

.pt-open, .pt-close {
  stroke: var(--text-dim);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}

.path-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
  color: var(--text-dim);
  font-size: 11px;
}

.path-legend strong {
  font-variant-numeric: tabular-nums;
}

/* ── The trade, as recorded ────────────────────────────────────────────── */

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0 16px;
  margin: 0;
}

.plan-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}

.plan-row dt {
  color: var(--text-dim);
  font-size: 11px;
}

.plan-row dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* What the venue actually did, set apart from what the desk planned. */
.plan-fill dt, .plan-fill dd {
  color: var(--selected);
}

/* Shown only where the plan and the position genuinely disagree — a `sell`
   tick on a long-only venue. Better said out loud than silently drawn. */
.path-caveat {
  margin: 8px 0 0 0 !important;
  padding: 7px 10px;
  border-left: 2px solid var(--incomplete);
  background: var(--bg);
  font-size: 11px;
}

.review-meta {
  margin: 10px 0 0 0;
  color: var(--text-dim);
  font-size: 11px;
}

.review-meta a {
  color: var(--selected);
}

/* A trade the table carries but no local trace explains. Stated plainly rather
   than left blank: the reader must know WHY there is no reasoning below, or
   they will read the absence as the desk having had none. */
.no-trace {
  padding: 0 5px;
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--text-dim);
  font-style: italic;
}

/* The answer to "was it a winner?", readable without opening the row. */
.outcome {
  margin-left: auto;
  padding: 1px 9px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.outcome-win { background: var(--buy); color: #12161c; }
.outcome-loss { background: var(--sell); color: #12161c; }
.outcome-flat { background: var(--hold); color: #12161c; }
.outcome-pending {
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-weight: 400;
}

.verdict-h {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 12px 0 6px 0;
}

.verdict-note {
  margin: 8px 0 0 0 !important;
  font-size: 11px;
}

.review-when {
  font-variant-numeric: tabular-nums;
}

.chip {
  padding: 1px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #12161c;
}

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

.review-trigger, .review-status, .review-role {
  color: var(--text-dim);
  font-size: 11px;
}

.status-open { color: var(--selected); }
.status-no-fill { color: var(--incomplete); }

.review-pnl {
  font-variant-numeric: tabular-nums;
}

.pnl-up { color: var(--buy); }
.pnl-down { color: var(--sell); }

.review-prices {
  margin: 6px 0 0 0;
  font-variant-numeric: tabular-nums;
}

.verdicts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}

/* A chip is now the control that switches the picture beside it, so it is a
   real <button> — but it keeps the scored border and mark it always had. The
   colour still says whether the lens was right; the fill says which one you
   are looking at. Two different facts, two different channels. */
.verdict {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 11px;
  font-family: inherit;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.verdict:hover {
  background: var(--bg);
}

.verdict.is-on {
  background: var(--bg);
  box-shadow: inset 0 0 0 1px currentColor;
}

.verdict:focus-visible {
  outline: 2px solid var(--selected);
  outline-offset: 1px;
}

/* A lens that left no picture is still worth clicking — its panel says WHY,
   and that is an answer. Dimmed so the eye goes to the ones that show. */
.verdict.is-blind .verdict-lens {
  color: var(--text-dim);
}

.verdict-lens {
  color: var(--text);
}

.verdict-flag {
  color: var(--text-dim);
}

.v-right { border-color: var(--buy); }
.v-right .verdict-mark { color: var(--buy); }
.v-wrong { border-color: var(--sell); }
.v-wrong .verdict-mark { color: var(--sell); }
.v-none .verdict-mark { color: var(--text-dim); }

/* ── Column three: what each lens saw ──────────────────────────────────────
   Only the artifact. No prose beside it and no second chart underneath — the
   question the column answers is "what was in front of this lens", and every
   pixel that is not that picture is an answer to a different one. */

.evidence {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px 14px;
  position: sticky;
  top: 12px;
}

@media (max-width: 1500px) {
  .evidence {
    position: static;
  }
}

.evidence .verdict-h {
  margin-top: 0;
}

.ev-lede {
  margin: 0 0 8px 0 !important;
  font-size: 11px;
}

.ev-panel {
  margin-top: 10px;
}

.ev-panel[hidden] {
  display: none;
}

.ev-shot {
  margin: 0;
}

.ev-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg);
  cursor: zoom-in;
}

.ev-shot figcaption {
  margin-top: 3px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* The structural lens is handed FOUR composites, so four is what it saw. */
.ev-shots.ev-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ev-blind {
  margin: 0 !important;
  padding: 14px 12px;
  border: 1px dashed var(--border);
  border-radius: 3px;
  font-size: 11px;
  line-height: 1.5;
}

/* ── The picture at full size ─────────────────────────────────────────────── */

#ev-zoom {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  background: rgba(0, 0, 0, 0.88);
  cursor: zoom-out;
}

#ev-zoom[hidden] {
  display: none;
}

#ev-zoom img {
  max-width: 100%;
  max-height: calc(100% - 32px);
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 3px;
}

#ev-zoom p {
  margin: 0;
  font-size: 11px;
  color: var(--text-dim);
}

.open-list {
  margin: 0;
  padding-left: 20px;
}

.open-list li {
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}

/* The qualifier on a "never in profit" reading — smaller than the number it
   explains, so the finding leads and the caveat follows. */
.tl-note {
  color: var(--text-dim);
  font-style: italic;
}