/* ════════════════════════════════════════════════════════════════════
   whiteboard.css — Conversational Charting template library (Research
   build #4). PORT of the design handoff research/whiteboard.css; tokens
   resolve against the v3 set in redesign.css. The craft surface (spec
   Component 2 + 4): disciplined simplicity — Tufte, not dashboard.
   Monochrome navy, tabular figures, hairline grid; the insight is the
   only loud thing.
   ════════════════════════════════════════════════════════════════════ */

/* R3 v2 §12 fonts callout: figures read in the sans face with tabular
   numerals — chart chrome uses --font-num (falls back to the sans stack). */
:root { --font-num: var(--font-sans, "DM Sans", ui-sans-serif, sans-serif); }


/* ── Chart frame (the fixed honesty surface — every template wears it) */
.wb-chart { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; overflow: hidden; }
.wb-head { display: flex; align-items: flex-start; gap: 14px; padding: 15px 18px 12px; }
.wb-title { min-width: 0; flex: 1; }
.wb-title .t { font-size: 14.5px; font-weight: 650; letter-spacing: -0.008em; color: var(--ink-1); }
.wb-title .sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); margin-top: 4px; letter-spacing: .01em; }
.wb-last { text-align: right; white-space: nowrap; flex: 0 0 auto; }
.wb-last .v { font-family: var(--font-num, var(--font-sans, "DM Sans", sans-serif)); font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 500; letter-spacing: -0.018em; color: var(--ink-1); }
.wb-last .c { font-family: var(--font-num, var(--font-sans, "DM Sans", sans-serif)); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600; margin-top: 3px; }
.wb-last .c.pos { color: var(--pos-600); } .wb-last .c.neg { color: var(--red-600); }

.wb-plot { padding: 2px 14px 6px; }
.wb-plot svg { display: block; width: 100%; height: auto; }

/* legend (compare / MA) */
.wb-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 4px 18px 12px; }
.wb-leg { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-2); }
.wb-leg .sw { width: 16px; height: 0; border-top-width: 2px; border-top-style: solid; flex: 0 0 auto; }
.wb-leg .sw.dash { border-top-style: dashed; }
.wb-leg .vv { font-family: var(--font-num, var(--font-sans, "DM Sans", sans-serif)); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-1); }
.wb-leg .vv.pos { color: var(--pos-600); } .wb-leg .vv.neg { color: var(--red-600); }

/* footer = the honesty line (source · timeframe · computed) */
.wb-foot { display: flex; align-items: center; gap: 8px; padding: 9px 18px; border-top: 1px solid var(--border); background: var(--surface-2); }
.wb-foot .src { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); letter-spacing: .02em; }
.wb-foot .src b { color: var(--ink-2); font-weight: 600; }
.wb-foot .computed { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-4); text-transform: uppercase; letter-spacing: .06em; }

/* partial-series flag (honest degradation, on-chart) */
.wb-partial { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; background: var(--warn-50); color: var(--warn-ink); border: 1px solid var(--warn-100); }
.wb-partial .d { width: 5px; height: 5px; border-radius: 50%; background: var(--warn-500); }

/* normalization notes (window clamps / snaps) — the chart never quietly
   differs from the ask */
.wb-notes { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); margin: 6px 4px 0; }

/* ── Single-leg payoff (options template) ─────────────────────── */
.wb-payoff-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border-top: 1px solid var(--border); }
.wb-pstat { background: var(--surface); padding: 11px 16px; }
.wb-pstat .k { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.wb-pstat .v { font-family: var(--font-num, var(--font-sans, "DM Sans", sans-serif)); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; color: var(--ink-1); letter-spacing: -0.01em; }
.wb-pstat .v.pos { color: var(--pos-600); } .wb-pstat .v.neg { color: var(--red-600); }
.wb-pstat .v .inf { font-size: 17px; }
.wb-theta-note { padding: 10px 18px; border-top: 1px solid var(--border); font-size: 12px; color: var(--ink-2); }
.wb-theta-note .tok { font-family: var(--font-mono); font-weight: 600; color: var(--ink-1); }

/* ── Honest states (whole-chart) ──────────────────────────────── */
.wb-degrade { padding: 30px 22px; text-align: center; }
.wb-degrade .g { width: 42px; height: 42px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 13px; }
.wb-degrade .g svg { width: 21px; height: 21px; stroke: var(--ink-4); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wb-degrade .h { font-size: 13.5px; font-weight: 650; color: var(--ink-1); margin-bottom: 5px; }
.wb-degrade .d { font-size: 12.5px; color: var(--ink-2); max-width: 300px; margin: 0 auto; line-height: 1.45; }

/* ── The whiteboard page (input + drop stream) ────────────────── */
.wb-page { max-width: 680px; margin: 0 auto; padding: 26px 20px 60px; }
.wb-invite { font-size: 13px; color: var(--ink-3); margin-bottom: 14px; line-height: 1.5; }
.wb-invite b { color: var(--ink-1); font-weight: 600; }
.wb-form { display: flex; gap: 9px; margin-bottom: 22px; }
.wb-input { flex: 1; padding: 12px 14px; border: 1px solid var(--border-2); border-radius: 11px; background: var(--surface); font-family: var(--font-sans); font-size: 14px; color: var(--ink-1); }
.wb-input:focus { outline: none; border-color: var(--blue-500); }
.wb-send { padding: 0 20px; border: none; border-radius: 11px; background: var(--ink-1); color: #fff; font-family: var(--font-sans); font-size: 14px; font-weight: 600; cursor: pointer; }
.wb-send:disabled { opacity: .5; cursor: default; }
.wb-ask { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin: 0 2px 8px; }
.wb-ask b { color: var(--ink-2); font-weight: 600; }
.wb-stamp { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-4); margin: 6px 4px 0; }
.wb-sys { font-size: 12.5px; color: var(--ink-3); text-align: center; padding: 14px; }

/* the calm "resolve in" — fast settle, not a slot-machine reveal.
   Base state is VISIBLE; animation only plays when JS adds .is-dropping,
   so reduced-motion / no-JS always show the finished chart. */
.wb-drop { margin-bottom: 26px; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes wb-settle { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .wb-drop.is-dropping .wb-chart { animation: wb-settle .42s cubic-bezier(0.2, 0.7, 0.2, 1); }
  @keyframes wb-draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
  .wb-drop.is-dropping .wb-trace { stroke-dasharray: var(--len); animation: wb-draw .7s ease-out .15s both; }
}

/* Horizontal reference-level labels (52-week high/low, period high/low,
   prior close). The <text> carries inline fill/font-size from the renderer,
   but the class needs a real rule: the label sits ON the chart, so it has
   to stay legible over the price trace and the shaded area beneath it.

   Caught by test_js_injected_classes_have_styles — the same contract test
   that found the deleted .df-stage-* stylesheet flagged this class the
   moment it was introduced with no CSS behind it. */
.wb-lvl {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: .02em;
  paint-order: stroke fill;      /* halo behind the glyphs, not over them */
  stroke: var(--surface, #fff);
  stroke-width: 2.5px;
  stroke-linejoin: round;
}