/* ── v2/styles/v2-report.css ──────────────────────────────────────────────
   Reflection — the performance report: filter bar, KPI tiles, charts, tables.
   Also owns the shared date-range picker (v2/js/components/date-range.js).

   CHART PALETTE — validated, not eyeballed. Every value below was run through
   the dataviz validator against this app's dark surface (#111114):
     --rp-accent #FF1F8F  single-series equity curve — PASS lightness band (dark
                          L 0.48–0.67) + PASS contrast ≥3:1. The brand pink is
                          already the right step; #FF6B1F is not (L 0.703).
     --rp-up     #1f9e57  diverging + arm  — PASS band, chroma, contrast
     --rp-down   #e5484d  diverging − arm  — PASS band, chroma, contrast
   Green↔red collapses under deuteranopia (ΔE ~4–5 at every step of the pair),
   so polarity is NEVER carried by hue alone here: diverging bars grow left/right
   of a zero axis and every bar is labelled with its signed value. Remove the
   color entirely and the charts still read correctly.
   ───────────────────────────────────────────────────────────────────────── */

.rp-page { --rp-accent: #FF1F8F; --rp-up: #1f9e57; --rp-down: #e5484d;
  --rp-grid: rgba(255,255,255,.055); --rp-axis: var(--wot-text-2); }
.rp-page .is-up { color: var(--rp-up); }
.rp-page .is-down { color: var(--rp-down); }
.rp-muted { color: var(--wot-text-2); }

/* ── hero ─────────────────────────────────────────────────────────────── */
.rp-hero { margin: 6px 0 18px; }
.rp-hero-k { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--wot-text-2); display: flex; align-items: center; gap: 7px; }
.rp-hero h1 { margin: 8px 0 6px; font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; letter-spacing: -.02em; }
.rp-hero p { margin: 0; max-width: 72ch; color: var(--wot-text-1); font-size: 14px; line-height: 1.55; }

/* ── filter bar — one row above the charts ────────────────────────────── */
.rp-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 18px; border: 1px solid var(--wot-border); border-radius: 16px;
  background: var(--wot-bg-1); position: sticky; top: 8px; z-index: 30; backdrop-filter: blur(8px); }
.rp-bar-l { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rp-bar-r { font-size: 12.5px; color: var(--wot-text-2); white-space: nowrap; }
.rp-scope-n { font-weight: 800; color: var(--wot-text-0); font-variant-numeric: tabular-nums; }
.rp-reset { appearance: none; background: none; border: none; cursor: pointer; font: inherit; font-size: 12.5px;
  font-weight: 700; color: var(--rp-accent); padding: 6px 4px; }
.rp-reset:hover { text-decoration: underline; }

/* ── the ticker multi-select ──────────────────────────────────────────── */
.rp-drop { position: relative; }
.rp-drop-btn { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px; background: var(--wot-bg-2); border: 1px solid var(--wot-border);
  color: var(--wot-text-1); font: inherit; font-size: 13px; font-weight: 600; }
.rp-drop-btn:hover { color: var(--wot-text-0); border-color: var(--wot-grad-end); }
.rp-drop-btn.is-active { border-color: var(--wot-grad-end); color: var(--wot-text-0); }
.rp-caret { opacity: .55; font-size: 10px; }
.rp-drop-panel { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 240px;
  max-height: 340px; overflow: auto; background: var(--wot-bg-1); border: 1px solid var(--wot-border);
  border-radius: 14px; box-shadow: var(--wot-shadow-card); padding: 6px; display: none; }
.rp-drop.is-open .rp-drop-panel { display: block; }
.rp-drop-all { width: 100%; text-align: left; appearance: none; cursor: pointer; background: none; border: none;
  color: var(--rp-accent); font: inherit; font-size: 12px; font-weight: 700; padding: 8px 10px; }
.rp-drop-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px;
  cursor: pointer; color: var(--wot-text-1); font-size: 13px; }
.rp-drop-item:hover { background: var(--wot-bg-2); }
.rp-drop-item input { accent-color: var(--wot-grad-end); }
.rp-item-n { margin-left: auto; color: var(--wot-text-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.rp-drop-empty { padding: 12px; color: var(--wot-text-2); font-size: 13px; }

/* ── KPI row — stat tiles, not a chart ────────────────────────────────── */
.rp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.rp-kpi { background: var(--wot-bg-1); border: 1px solid var(--wot-border); border-radius: 16px; padding: 14px 16px; }
.rp-kpi-k { font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--wot-text-2); }
.rp-kpi-v { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin-top: 5px; font-variant-numeric: tabular-nums; }
.rp-kpi-s { font-size: 11.5px; color: var(--wot-text-2); margin-top: 3px; }
.rp-kpi.is-hero { grid-column: span 2; background:
  linear-gradient(135deg, rgba(255,31,143,.10), transparent 62%), var(--wot-bg-1); border-color: rgba(255,31,143,.28); }
.rp-kpi.is-hero .rp-kpi-v { font-size: clamp(30px, 4.4vw, 42px); }
@media (max-width: 560px) { .rp-kpi.is-hero { grid-column: span 2; } }

/* ── chart cards ──────────────────────────────────────────────────────── */
.rp-card { background: var(--wot-bg-1); border: 1px solid var(--wot-border); border-radius: 18px;
  padding: 16px 18px 18px; margin-bottom: 14px; }
.rp-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.rp-card-h h3 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.rp-card-note { font-size: 11.5px; color: var(--wot-text-2); }
.rp-2up { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .rp-2up { grid-template-columns: 1fr; } }
.rp-chart-empty { padding: 40px 12px; text-align: center; color: var(--wot-text-2); font-size: 13px; }

/* equity curve */
.rp-svg { display: block; width: 100%; height: auto; overflow: visible; }
/* the chart hosts anchor their own tooltip; the table wrap must not */
.rp-card > div:not(.rp-tablewrap) { position: relative; }
.rp-grid { stroke: var(--rp-grid); stroke-width: 1; }
.rp-zero { stroke: rgba(255,255,255,.20); stroke-width: 1; }
.rp-axis { fill: var(--rp-axis); font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rp-eq-line { fill: none; stroke: var(--rp-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rp-eq-dot { fill: var(--rp-accent); stroke: var(--wot-bg-1); stroke-width: 2; }
.rp-eq-stop0 { stop-color: var(--rp-accent); stop-opacity: .26; }
.rp-eq-stop1 { stop-color: var(--rp-accent); stop-opacity: 0; }
.rp-cross-l { stroke: rgba(255,255,255,.32); stroke-width: 1; stroke-dasharray: 3 3; }
.rp-cross-d { fill: var(--rp-accent); stroke: var(--wot-bg-1); stroke-width: 2; }
.rp-hit { cursor: crosshair; }
.rp-tip { position: absolute; pointer-events: none; z-index: 20; min-width: 140px;
  background: var(--wot-bg-2); border: 1px solid var(--wot-border); border-radius: 10px;
  padding: 8px 10px; font-size: 12px; line-height: 1.5; box-shadow: var(--wot-shadow-card);
  display: flex; flex-direction: column; gap: 1px; color: var(--wot-text-1); }
.rp-tip > b { color: var(--wot-text-0); font-size: 12.5px; }
.rp-tip b { font-variant-numeric: tabular-nums; }

/* diverging bars — direction carries the sign, color only reinforces it */
.rp-dbars { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow-y: auto; }
.rp-dbar { display: grid; grid-template-columns: 92px 1fr 84px; align-items: center; gap: 10px; }
.rp-dbar-l { font-size: 12.5px; font-weight: 700; color: var(--wot-text-1); display: flex; flex-direction: column; }
.rp-dbar-l em { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--wot-text-2); }
.rp-dbar-track { position: relative; height: 18px; }
.rp-dbar-axis { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: rgba(255,255,255,.20); }
.rp-dbar-fill { position: absolute; top: 2px; bottom: 2px; border-radius: 4px; }
.rp-dbar-fill.is-up { background: var(--rp-up); border-radius: 0 4px 4px 0; margin-left: 2px; }
.rp-dbar-fill.is-down { background: var(--rp-down); border-radius: 4px 0 0 4px; margin-right: 2px; }
.rp-dbar-v { font-size: 12.5px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }

/* distribution */
.rp-hist { display: flex; align-items: flex-end; gap: 4px; height: 210px; padding-top: 16px; }
.rp-hist-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.rp-hist-n { font-size: 11px; font-weight: 800; color: var(--wot-text-1); font-variant-numeric: tabular-nums; }
.rp-hist-bar { width: 100%; border-radius: 4px 4px 0 0; min-height: 0; }
.rp-hist-bar.is-up { background: var(--rp-up); }
.rp-hist-bar.is-down { background: var(--rp-down); }
.rp-hist-x { font-size: 10.5px; font-weight: 600; color: var(--wot-text-2); font-variant-numeric: tabular-nums; }
.rp-hist-col { position: relative; }

/* ── tables ───────────────────────────────────────────────────────────── */
.rp-tablewrap { overflow-x: auto; border: 1px solid var(--wot-border); border-radius: 14px; max-height: 620px; overflow-y: auto; }
.rp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.rp-table th { position: sticky; top: 0; z-index: 2; background: var(--wot-bg-2); text-align: left; white-space: nowrap;
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--wot-text-2);
  padding: 11px 12px; border-bottom: 1px solid var(--wot-border); user-select: none; }
.rp-table th[data-sort] { cursor: pointer; }
.rp-table th[data-sort]:hover { color: var(--wot-text-0); }
.rp-table th.is-sorted { color: var(--rp-accent); }
.rp-sort { font-style: normal; font-size: 8px; margin-left: 4px; }
.rp-table td { padding: 10px 12px; border-bottom: 1px solid var(--wot-border); color: var(--wot-text-1); vertical-align: middle; }
.rp-table .num, .rp-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.rp-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.014); }
.rp-table tbody tr:hover td { background: rgba(255,255,255,.045); }
.rp-table tbody tr:last-child td { border-bottom: none; }
.rp-table tfoot td { position: sticky; bottom: 0; background: var(--wot-bg-2); font-weight: 800; color: var(--wot-text-0);
  border-top: 1px solid var(--wot-border); border-bottom: none; }
.rp-sym { font-weight: 800; color: var(--wot-text-0); }
.rp-contract { margin-left: 6px; font-weight: 700; color: var(--wot-text-1); }
.rp-qty { margin-left: 6px; font-size: 11.5px; color: var(--wot-text-2); font-variant-numeric: tabular-nums; }
.rp-date { color: var(--wot-text-2); white-space: nowrap; }
.rp-wl b { font-weight: 800; }
.rp-wl em { font-style: normal; margin-left: 6px; font-size: 11px; color: var(--wot-text-2); }
.rp-legs { min-width: 220px; }
.rp-leg { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 8px; margin: 2px 4px 2px 0;
  border-radius: 999px; background: var(--wot-bg-2); border: 1px solid var(--wot-border); font-size: 11.5px; }
.rp-leg b { font-variant-numeric: tabular-nums; color: var(--wot-text-0); font-weight: 700; }
.rp-leg em { font-style: normal; color: var(--wot-text-2); font-size: 10.5px; }
.rp-leg i { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.rp-pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 800;
  letter-spacing: .06em; background: var(--wot-bg-2); border: 1px solid var(--wot-border); color: var(--wot-text-2); }
.rp-pill.is-up { color: var(--rp-up); border-color: rgba(31,158,87,.45); }
.rp-pill.is-down { color: var(--rp-down); border-color: rgba(229,72,77,.45); }
.rp-pill.is-open { color: var(--wot-text-1); }
.rp-empty { padding: 60px 16px; text-align: center; }
.rp-empty h3 { margin: 0 0 6px; font-size: 17px; }
.rp-empty p { margin: 0; color: var(--wot-text-2); font-size: 13.5px; }

/* ── date-range picker (shared component) ─────────────────────────────── */
.dr-wrap { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.dr-btn { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px; background: var(--wot-bg-2); border: 1px solid var(--wot-border);
  color: var(--wot-text-1); font: inherit; font-size: 13px; font-weight: 600; }
.dr-btn:hover { color: var(--wot-text-0); border-color: var(--wot-grad-end); }
.dr-btn.is-active { border-color: var(--wot-grad-end); color: var(--wot-text-0); }
.dr-ico { opacity: .65; flex: 0 0 auto; }
.dr-caret { opacity: .5; flex: 0 0 auto; }
.dr-clear { appearance: none; cursor: pointer; width: 26px; height: 26px; border-radius: 50%; line-height: 1;
  background: var(--wot-bg-2); border: 1px solid var(--wot-border); color: var(--wot-text-2); font-size: 11px; }
.dr-clear:hover { color: var(--rp-down); border-color: var(--rp-down); }
.dr-pop { position: absolute; z-index: 80; top: calc(100% + 8px); left: 0; display: flex;
  background: var(--wot-bg-1); border: 1px solid var(--wot-border); border-radius: 16px;
  box-shadow: var(--wot-shadow-card); overflow: hidden; }
.dr-cals { display: flex; padding: 16px; gap: 16px; }
.dr-cal { width: 210px; }
.dr-cal + .dr-cal { padding-left: 16px; border-left: 1px solid var(--wot-border); }
.dr-cal-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dr-cal-title { font-size: 13px; font-weight: 800; color: var(--wot-text-0); }
.dr-nav { appearance: none; cursor: pointer; width: 26px; height: 26px; border-radius: 8px; line-height: 1;
  background: none; border: 1px solid var(--wot-border); color: var(--wot-text-1); font-size: 15px; }
.dr-nav:hover { border-color: var(--wot-grad-end); color: var(--wot-text-0); }
.dr-nav-sp { width: 26px; }
.dr-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dr-dow { text-align: center; font-size: 9.5px; font-weight: 800; color: var(--wot-text-2); padding-bottom: 4px; }
.dr-pad { height: 28px; }
.dr-day { appearance: none; cursor: pointer; height: 28px; border: none; background: none; border-radius: 8px;
  color: var(--wot-text-1); font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; }
.dr-day:hover { background: var(--wot-bg-2); color: var(--wot-text-0); }
.dr-day.is-today { font-weight: 800; color: var(--wot-grad-end); }
.dr-day.is-in { background: rgba(255,31,143,.14); border-radius: 0; }
.dr-day.is-start, .dr-day.is-end { background: var(--wot-grad); color: #fff; font-weight: 800; }
.dr-day.is-start.is-in { border-radius: 8px 0 0 8px; }
.dr-day.is-end.is-in { border-radius: 0 8px 8px 0; }
.dr-presets { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px;
  min-width: 156px; border-left: 1px solid var(--wot-border); background: rgba(255,255,255,.015);
  /* the rail is now longer than the calendars — scroll it, don't stretch the popover */
  max-height: 340px; overflow-y: auto; }
.dr-preset { appearance: none; cursor: pointer; text-align: left; white-space: nowrap; background: none;
  border: none; border-radius: 8px; color: var(--wot-text-1); font: inherit; font-size: 12.5px; padding: 7px 11px; }
.dr-preset:hover { background: var(--wot-bg-2); color: var(--wot-text-0); }
.dr-preset.is-on { background: var(--wot-bg-2); color: var(--wot-grad-end); font-weight: 700; }
@media (max-width: 720px) {
  .dr-pop { flex-direction: column-reverse; left: -8px; }
  .dr-cals { flex-direction: column; }
  .dr-cal + .dr-cal { padding-left: 0; border-left: none; padding-top: 14px; border-top: 1px solid var(--wot-border); }
  .dr-presets { flex-direction: row; flex-wrap: wrap; border-left: none; border-bottom: 1px solid var(--wot-border); }
}