/* frontend/css/value-compass.css
 *
 * Value Compass tab styles. Theme tokens ONLY (no hex literals) so light/dark
 * both render correctly — mirrors the app.css token set (--surface/--text/
 * --text2/--text3/--border/--accent/--pos/--neg/--yellow/--purple). Reuses the
 * canonical .btn/.btn-primary control classes (defined in app.css) for the
 * upgrade CTA — see the impl-note Class Reuse Audit. BEM-ish vc-* classes; no
 * IDs for styling.
 */

.vc-page {
  max-width: 980px;
  margin: 0 auto;
  padding: 8px 4px 40px;
}

.vc-head {
  margin-bottom: 16px;
}

.vc-title {
  font-size: 1.4rem;
  color: var(--text);
  margin: 0 0 4px;
}

.vc-sub {
  color: var(--text2);
  margin: 0;
  font-size: 0.95rem;
}

.vc-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.vc-selector-label {
  color: var(--text2);
  font-size: 0.9rem;
}

.vc-selector {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.95rem;
  min-width: 160px;
}

.vc-status {
  color: var(--text2);
  font-size: 0.9rem;
  min-height: 1.2em;
  margin-bottom: 8px;
}

/* ── Reading card ─────────────────────────────────────────────────────────── */

.vc-reading {
  margin-bottom: 14px;
}

.vc-reading-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 10px;
  padding: 14px 16px;
}

.vc-tone-add { border-left-color: var(--pos); }
.vc-tone-trim { border-left-color: var(--yellow); }
.vc-tone-fair { border-left-color: var(--purple); }

.vc-reading-headline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.vc-reading-symbol {
  font-weight: 700;
  color: var(--text);
  font-size: 1.05rem;
}

.vc-reading-label {
  color: var(--text);
  font-size: 1.05rem;
}

.vc-reading-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px 16px;
  margin: 0;
}

.vc-reading-stats div { margin: 0; }

.vc-reading-stats dt {
  color: var(--text3);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.vc-reading-stats dd {
  color: var(--text);
  margin: 2px 0 0;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.vc-reading-msg {
  color: var(--text2);
  margin: 0;
}

/* ── Chart host ───────────────────────────────────────────────────────────── */

.vc-chart-host {
  margin-bottom: 14px;
}

.vc-chart-container {
  position: relative;   /* anchors the absolutely-positioned hover balloon */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
}

/* Legend slot (Defect 2): a dedicated, non-stacking host inside the chart
   container; ChartLegend renders INTO it (ownHost:false → idempotent REPLACE,
   never appends a fresh legend each setModel). diq-chart-legend supplies the
   shared flex layout; this only adds breathing room below the chart. */
.vc-chart-legend-slot {
  margin-top: 4px;
}

/* ── Chart tools (Reset Zoom) ─────────────────────────────────────────────── */

.vc-chart-tools {
  position: relative;   /* FIX-3: local stacking context so the Reset Zoom button
                           paints above the in-flow chart layers when present */
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 6px 0 14px;
}

/* FIX-3: the `display: flex` above out-specifies the UA `[hidden]{display:none}`
   rule (equal specificity, author sheet wins), so the hidden attribute alone
   would NOT hide the tools. Make the hidden state explicit so the Reset Zoom
   control is truly removed from layout when no chart is rendered. */
.vc-chart-tools[hidden] {
  display: none;
}

/* ── Mobile-touch scrub discipline (vc-mobile-touch) ──────────────────────────
   Both VC charts use the canonical window.ChartScrub state machine for finger
   scrub. Root svg = pan-y so one-finger vertical drag scrolls the page; the
   full-width invisible hover-rect = none so a drag ON the plot is captured for
   scrub (preventDefault). The inline attrs (svg touch-action="pan-y", rect inline
   style="touch-action:none") are the authoritative owners (app.css §loupe note);
   these CSS rules belt-and-brace them and match the .mcc-/.tk- chart precedent. */
.vc-chart-svg,
.vc-cmp-svg {
  touch-action: pan-y;
}

.vc-hover,
.vc-cmp-hover {
  touch-action: none;
}

/* ── Hover card (mouse-scrub / keyboard-cursor read-out) ──────────────────────
   Reuses the canonical .mc-chart-tooltip balloon (app.css) for the floating
   shell + positioning; these rules style only the INNER content. Token-only. */

.vc-hover-card {
  min-width: 150px;
  font-size: 0.82rem;
  line-height: 1.35;
}

.vc-hover-label {
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.vc-hover-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.vc-hover-k { color: var(--text2); }

.vc-hover-v {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Price-freshness disclosure under the reading stats. */
.vc-reading-asof {
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: var(--text3);
}

.vc-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.vc-chart-empty-msg {
  color: var(--text2);
}

/* ── X-axis date labels + legend (Phase 1.6) ─────────────────────────────────
   The chart inserts the shared .diq-chart-legend as a sibling AFTER .vc-chart-host
   (above the Reset Zoom tools). Center it and give it breathing room; the legend
   glyph/colors come from the shared component (token-driven). */
.vc-xlabel {
  font-variant-numeric: tabular-nums;
}

.vc-chart-host + .diq-chart-legend {
  margin: 8px 0 2px;
}

/* ── Yield-on-cost callout ────────────────────────────────────────────────── */

.vc-yoc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.vc-yoc-title {
  margin: 0 0 10px;
  font-size: 1rem;
  color: var(--text);
}

/* ── How-it-works ─────────────────────────────────────────────────────────── */

.vc-hiw {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 14px;
  margin-top: 8px;
}

.vc-hiw-summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 600;
  padding: 8px 0;
}

.vc-hiw-body {
  color: var(--text2);
  padding-bottom: 10px;
}

.vc-hiw-scale {
  list-style: none;
  padding: 0;
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vc-hiw-scale li {
  color: var(--text2);
  font-size: 0.9rem;
}

.vc-chip {
  display: inline-block;
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 0.78rem;
  font-weight: 600;
  margin-right: 6px;
  color: var(--bg);
}

.vc-chip-add { background: var(--pos); }
.vc-chip-fair { background: var(--purple); }
.vc-chip-trim { background: var(--yellow); }

.vc-hiw-note {
  font-size: 0.85rem;
  color: var(--text3);
}

/* ── Tier gate (tease: shown, never hidden) ──────────────────────────────── */

.vc-gate {
  margin-bottom: 14px;
}

.vc-gate-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  min-height: 220px;
}

.vc-gate-blur {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--neg), transparent 60%),
    linear-gradient(0deg, var(--pos), transparent 60%),
    var(--surface);
  opacity: 0.25;
  filter: blur(6px);
}

.vc-gate-overlay {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 32px 16px;
}

.vc-gate-msg {
  color: var(--text);
  font-size: 1.05rem;
  margin: 0;
}

.vc-gate-hint {
  color: var(--text2);
  font-size: 0.9rem;
  margin: 0;
}

.vc-gate-cta {
  margin-top: 8px;
}

@media (max-width: 640px) {
  .vc-controls { flex-wrap: wrap; }
  .vc-selector { min-width: 0; flex: 1; }
}

/* ── Phase 2: backtest comparison panel ─────────────────────────────────────
   Three equity curves, threshold sliders, signal-history tables, ex-div toggle.
   Token-only; reuses .btn/.btn-primary for the upgrade CTA and .diq-info ⓘ. */

.vc-bt {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.vc-bt-title {
  margin: 0 0 10px;
  font-size: 1rem;
  color: var(--text);
}

.vc-bt-controls {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 12px;
}

.vc-bt-slabel {
  color: var(--text2);
  font-size: 0.88rem;
}

.vc-bt-slider {
  width: 100%;
  accent-color: var(--accent);
}

.vc-bt-slider:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.vc-bt-sval {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-size: 0.88rem;
  min-width: 3ch;
  text-align: right;
}

.vc-cmp-host {
  margin-bottom: 8px;
}

.vc-cmp-container {
  position: relative;
}

/* BUG-2: the hover tooltip (.mc-chart-tooltip) is appended INTO .vc-cmp-body;
   it must be the positioned ancestor so the balloon clamps to the chart, not
   the page. Mirrors .vc-chart-container's relative anchoring. */
.vc-cmp-body {
  position: relative;
}

.vc-cmp-svg.vc-cmp-tease {
  opacity: 0.4;
  filter: blur(1px);
}

.vc-cmp-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
}

.vc-cmp-empty-msg { color: var(--text2); }

/* ── Signal-history tables ─────────────────────────────────────────────────── */

.vc-bt-tables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 6px;
}

.vc-bt-tables-blur {
  filter: blur(5px);
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}

.vc-sig-title {
  margin: 0 0 6px;
  font-size: 0.92rem;
  color: var(--text);
}

.vc-sig {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.vc-sig th {
  text-align: left;
  color: var(--text3);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  padding: 4px 6px;
}

.vc-sig td {
  color: var(--text);
  padding: 3px 6px;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--border);
}

.vc-sig-empty {
  color: var(--text3);
  font-size: 0.85rem;
}

/* ── Backtest upgrade CTA (tease) ──────────────────────────────────────────── */

.vc-bt-cta {
  text-align: center;
  padding: 12px 0 2px;
}

.vc-bt-cta-msg {
  color: var(--text2);
  font-size: 0.9rem;
  margin: 0 0 8px;
}

/* ── Ex-dividend legend toggle (clickable; greyed-disabled for free) ───────── */

.vc-legend-toggle {
  cursor: pointer;
}

.vc-legend-toggle.vc-legend-locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.vc-legend-toggle[aria-pressed="false"] .diq-legend-swatch {
  opacity: 0.45;
}

@media (max-width: 640px) {
  .vc-bt-controls { grid-template-columns: 1fr auto; }
  .vc-bt-tables { grid-template-columns: 1fr; }
}