/* ============================================================================
   /kook-enhance 2026-05-12 — editorial section wrapper for Individual Stock
   2026-05-27 redesign: REMOVED the 3-act verdict panel (THE MONEY / WHAT IF /
   RISK + STORY). Replaced with a single horizontal 10-card row above the
   chart's lower divider. See updateStatsDisplay() in individualStock.js.
============================================================================ */

.fl-section.is-section {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--fl-rule);
  box-shadow: none;
  border-radius: 0;
  padding: var(--fl-section-pad-y) var(--fl-section-pad-x);
  margin: var(--fl-section-margin) 0;
}

.is-section .fl-section-head {
  margin-bottom: var(--fl-space-20);
}

/* Ticker picker — kicker label + grid of stockButton tiles */
.is-ticker-picker {
  margin: var(--fl-space-8) 0 var(--fl-space-20);
  padding: var(--fl-space-12) 0 var(--fl-space-16);
  border-top: 1px solid var(--fl-rule);
  border-bottom: 1px solid var(--fl-rule);
}
.is-ticker-picker > .fl-chip-group__label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--fl-text-faint);
  margin: 0 0 var(--fl-space-12);
}

/* Controls row — pickup from .perf-controls already, but add light tweaks */
.is-controls.perf-controls {
  margin-top: var(--fl-space-12);
  margin-bottom: var(--fl-space-16);
  padding: var(--fl-space-12) 0 var(--fl-space-16);
}

/* Chart wrap — editorial transparent, no white box border */
.is-chart-wrap {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0 0 var(--fl-space-16);
  box-shadow: none;
  position: relative;
}
body.dark-mode .is-chart-wrap {
  background: transparent;
}

/* Fixed-height box around the canvas (2026-05-27 runaway-growth fix).
   Chart.js with responsive:true + maintainAspectRatio:false sets
   canvas.style.height = parent.clientHeight on every resize tick. If the
   chart's parent's height depends on the canvas (auto height + flow
   layout), the canvas keeps adding ~the subheader's height per tick and
   grows to 2000px+. Forcing a fixed-height position:relative box +
   absolute canvas decouples the two. See commit 3d0bc3d for the original
   pattern (after-tax panel charts). */
.is-chart-canvas-box {
  position: relative;
  height: 400px;
  width: 100%;
}
.is-chart-canvas-box canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}
@media (max-width: 767px) {
  .is-chart-canvas-box { height: 320px; }
}
@media (max-width: 430px) {
  .is-chart-canvas-box { height: 280px; }
}

/* Subheader (kicker only) — sits above the canvas as a chart title.
   Moved out of the stats panel below the chart per 2026-05-27 redesign,
   matched in styling to .is-stats-kicker (the original location). */
.is-chart-subheader {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 10px;
  min-height: 16px;
}
.is-chart-subheader-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--is-text-faint, #94a3b8);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.is-chart-subheader-rule {
  flex: 1;
  height: 1px;
  background: var(--is-rule, rgba(176, 200, 244, 0.06));
  margin-left: 4px;
  min-width: 24px;
}

/* Semantic value colors — maps to theme-aware --fl-* tokens */
.is-section {
  --is-pos:    var(--fl-pos);
  --is-neg:    var(--fl-neg);
  --is-flat:   var(--fl-text-muted);
  --is-accent: var(--fl-accent);
}

/* Legacy classes still emitted by older code paths */
.is-stats-pos { color: var(--is-pos); }
.is-stats-neg { color: var(--is-neg); }
.is-stats-flat { color: var(--is-flat); }

/* --- Empty / loading / error states --- */
.is-stats-empty,
.is-stats-loading,
.is-stats-error {
  padding: 24px 0;
  text-align: center;
  font-size: 12px;
  color: var(--is-text-muted);
  letter-spacing: 0.005em;
}
.is-stats-error {
  color: var(--is-neg);
}

/* ============================================================================
   Mobile selector strip — for #stockButtonGrid on small viewports.
   Horizontal scroll strip (vs wrap to 8 rows).
============================================================================ */
@media (max-width: 640px) {
  #stockButtonGrid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    gap: 6px;
  }
  #stockButtonGrid .stock-button {
    flex: 0 0 auto;
    min-width: 100px;
    scroll-snap-align: start;
  }
  #stockButtonGrid::-webkit-scrollbar { height: 4px; }
  #stockButtonGrid::-webkit-scrollbar-thumb {
    background: var(--is-rule, rgba(15,23,42,0.10));
    border-radius: 2px;
  }
}

/* ============================================================================
/* ============================================================================
   CARD ROW — single horizontal row of 10 stat cards below the chart.
   (2026-05-27 minimalist rewrite per owner feedback: original NET-P&L-card
   styling, NO box backgrounds, NO borders, NO chunky padding. Just tight
   typography. All 10 cards fit in one row at >=1280px.)

   Three groups, distinguished by spacing only (no chrome between):
     LEFT  4 metric cards  (Volatility, Sharpe, M^2, + Metric picker)
     MID   3 comparison    (vs SPY, vs VT, vs Holding picker)
     RIGHT 3 hero          (Worth Now, Return, Net P&L)

   Interactive cards (picker + vs-cards) get a subtle hover background
   that disappears at rest — no permanent visual chrome.
============================================================================ */

.is-stats { padding: 0; margin: 0; }

.is-cardrow {
  display: flex;
  align-items: flex-start;
  gap: 14px 14px;
  margin: 6px 0 22px;
  flex-wrap: wrap;
}
.is-cardgroup {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  flex-wrap: nowrap;
  min-width: 0;
}
/* Group separators via auto-margins. With auto-margins on BOTH vs and
   main, free row space distributes between them: in 1-row layout the
   3 groups are evenly spaced; on wrap, the wrapped group keeps its
   right-alignment. */
.is-cardgroup-vs   { margin-left: auto; }
.is-cardgroup-main { margin-left: auto; }

/* ───── Card baseline — minimalist (no background, no border) ───── */
.is-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  min-width: 0;
  position: relative;
}

.is-card-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--is-text-faint, #94a3b8);
  font-variant-numeric: tabular-nums;
  margin: 0 0 4px;
  white-space: nowrap;
}
.is-card-value {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  color: var(--is-text, #f1f5f9);
  line-height: 1.05;
  margin: 0;
  white-space: nowrap;
}
/* Suffix inside a big value (e.g. "/yr" on M²) — keep the number prominent,
   make the suffix discreet and neutral so the eye lands on the number. */
.is-card-value-suffix {
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--is-text-faint, #94a3b8) !important;  /* override tier color */
  margin-left: 1px;
  vertical-align: 1px;
}
.is-card-sub {
  font-size: 9.5px;
  font-weight: 400;
  color: var(--is-text-faint, #94a3b8);
  line-height: 1.4;
  letter-spacing: 0.005em;
  margin: 3px 0 0;
}
.is-card-aux {
  font-size: 12.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--is-text-soft, #cbd5e1);
  letter-spacing: -0.005em;
  margin: 5px 0 0;
  line-height: 1.1;
  white-space: nowrap;
}
.is-card-aux-label {
  font-size: 9px;
  font-weight: 400;
  color: var(--is-text-faint, #94a3b8);
  letter-spacing: 0.005em;
  margin: 1px 0 0;
  line-height: 1.3;
}

/* Sign coloring */
.is-card-value.is-card-pos { color: var(--is-pos, #10b981); }
.is-card-value.is-card-neg { color: var(--is-neg, #ef4444); }
.is-card-aux.is-card-pos   { color: var(--is-pos, #10b981); }
.is-card-aux.is-card-neg   { color: var(--is-neg, #ef4444); }

/* Quantile tier coloring on metric cards (left group) */
.is-card-metric[data-tier="excellent"] .is-card-value { color: #10b981; }
.is-card-metric[data-tier="good"]      .is-card-value { color: #22c55e; }
.is-card-metric[data-tier="average"]   .is-card-value { color: #f59e0b; }
.is-card-metric[data-tier="below-avg"] .is-card-value { color: #f97316; }
.is-card-metric[data-tier="poor"]      .is-card-value { color: #ef4444; }
.is-card-metric[data-tier="na"]        .is-card-value { color: var(--is-text-faint, #94a3b8); }

/* ───── Interactive cards — subtle hover affordance only ────────── */
.is-card-clickable {
  cursor: pointer;
  border-radius: 6px;
  padding: 4px 8px;
  margin: -4px -8px;
  transition: background 0.15s ease;
}
.is-card-clickable:hover {
  background: rgba(176, 200, 244, 0.045);
}
body:not(.dark-mode) .is-card-clickable:hover {
  background: rgba(15, 23, 42, 0.04);
}
.is-card-clickable:focus-visible {
  outline: 2px solid var(--is-accent, #6366f1);
  outline-offset: 2px;
}
.is-card-flash {
  animation: is-card-flash-anim 0.6s ease-out;
}
@keyframes is-card-flash-anim {
  0%   { background: rgba(99, 102, 241, 0.18); }
  100% { background: transparent; }
}

/* ───── Picker card (4th metric) — default = no metric chosen ──── */
.is-card-metric-picker .is-card-value-placeholder {
  font-size: 13px;
  font-weight: 500;
  color: var(--is-text-soft, #cbd5e1);
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.005em;
}
.is-card-metric-picker .is-card-prompt-hint {
  font-size: 9.5px;
  font-weight: 400;
  color: var(--is-text-faint, #94a3b8);
  margin: 3px 0 0;
  line-height: 1.4;
  letter-spacing: 0.005em;
  max-width: 130px;
}
.is-card-picker-chevron {
  display: inline-block;
  margin-left: 4px;
  font-size: 9px;
  opacity: 0.6;
  vertical-align: 1px;
}

/* ───── vs cards mini line chart ───────────────────────────────── */
.is-card-vs .is-card-mini {
  display: block;
  margin: 4px 0 2px;
  shape-rendering: geometricPrecision;
  width: 90px;
  height: 22px;
}
.is-card-vs-sub {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: nowrap;
  margin: 2px 0 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
}
.is-card-vs-pct {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.is-card-vs-pct.is-card-pos { color: var(--is-pos, #10b981); }
.is-card-vs-pct.is-card-neg { color: var(--is-neg, #ef4444); }
.is-card-vs-pct.is-card-flat { color: var(--is-text-faint, #94a3b8); }
.is-card-vs-text {
  font-size: 9.5px;
  font-weight: 400;
  color: var(--is-text-faint, #94a3b8);
  letter-spacing: 0.005em;
}
.is-card-vs-prompt {
  font-size: 10px;
  font-weight: 400;
  color: var(--is-text-faint, #94a3b8);
  line-height: 1.4;
  letter-spacing: 0.005em;
  margin: 2px 0 0;
  max-width: 110px;
}
.is-card-vs-inactive .is-card-value,
.is-card-vs-inactive .is-card-mini,
.is-card-vs-inactive .is-card-vs-sub { display: none; }
.is-card-vs-active .is-card-vs-prompt { display: none; }

.is-card-vs.is-card-vs-picker .is-card-value-placeholder {
  font-size: 13px;
  font-weight: 500;
  color: var(--is-text-soft, #cbd5e1);
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.005em;
}

/* ───── Net P&L card sparkline ─────────────────────────────────── */
.is-card-pnl .fl-pnl-sparkline {
  display: block;
  margin: 4px 0 2px;
  opacity: 0.92;
  shape-rendering: geometricPrecision;
  width: 90px !important;
  height: 22px !important;
}

/* ───── Picker dropdown panel (metric chooser) ─────────────────── */
/* 2026-05-27 expansion: categorized layout, ~60 metrics across 7 groups.
   Sticky search at top, scrollable item list with sticky group headers
   inside. Each item shows label + tier dot + live value preview. */
.is-card-picker-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  background: var(--is-bg-elevated, rgba(15, 23, 42, 0.97));
  border: 1px solid var(--is-card-border-hover, rgba(255,255,255,0.18));
  border-radius: 10px;
  box-shadow: 0 18px 40px -14px rgba(0,0,0,0.55);
  padding: 6px;
  width: 360px;
  max-width: calc(100vw - 24px);
  max-height: 460px;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(8px);
}
body:not(.dark-mode) .is-card-picker-panel {
  background: rgba(255, 255, 255, 0.99);
  border-color: rgba(15, 23, 42, 0.14);
  box-shadow: 0 22px 44px -14px rgba(15, 23, 42, 0.22);
}
.is-card-picker-scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Subtle scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,0.32) transparent;
}
.is-card-picker-scroll::-webkit-scrollbar { width: 6px; }
.is-card-picker-scroll::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,0.32); border-radius: 3px;
}
.is-card-picker-list { list-style: none; padding: 0; margin: 0; }

/* Sticky category headers within the scrolling list. */
.is-card-picker-group-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--is-bg-elevated, rgba(15, 23, 42, 0.97));
  padding: 8px 9px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--is-text-faint, #94a3b8);
  border-bottom: 1px solid var(--is-rule, rgba(176, 200, 244, 0.06));
}
body:not(.dark-mode) .is-card-picker-group-header {
  background: rgba(255, 255, 255, 0.99);
  border-bottom-color: rgba(15, 23, 42, 0.08);
}
/* First group header has no top border (sits flush under search) */
.is-card-picker-group-header:first-of-type {
  padding-top: 6px;
}

.is-card-picker-item {
  display: flex; align-items: center;
  gap: 8px; padding: 7px 9px; border-radius: 6px; cursor: pointer;
  font-size: 12px; color: var(--is-text, #e2e8f0); font-weight: 500;
  letter-spacing: 0.005em; transition: background 0.12s ease;
}
.is-card-picker-item:hover { background: rgba(99, 102, 241, 0.12); }
.is-card-picker-item.is-current { color: var(--is-accent, #6366f1); font-weight: 700; }
.is-card-picker-item.is-clear-item {
  border-bottom: 1px solid var(--is-rule, rgba(176, 200, 244, 0.06));
  border-radius: 0;
  margin-bottom: 4px;
  font-style: italic;
  color: var(--is-text-faint, #94a3b8);
}
.is-card-picker-item.is-clear-item:hover { color: var(--is-neg, #ef4444); }

/* Tier-colored dot on the left — same palette as the metric cards */
.is-card-picker-item-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--is-tier-na, rgba(148,163,184,0.5));
}
.is-card-picker-item[data-tier="excellent"] .is-card-picker-item-dot { background: #10b981; }
.is-card-picker-item[data-tier="good"]      .is-card-picker-item-dot { background: #22c55e; }
.is-card-picker-item[data-tier="average"]   .is-card-picker-item-dot { background: #f59e0b; }
.is-card-picker-item[data-tier="below-avg"] .is-card-picker-item-dot { background: #f97316; }
.is-card-picker-item[data-tier="poor"]      .is-card-picker-item-dot { background: #ef4444; }

.is-card-picker-item-label {
  flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.is-card-picker-item-preview {
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--is-text-faint, #94a3b8);
  flex-shrink: 0;
  padding-left: 8px;
}
.is-card-picker-item.is-current .is-card-picker-item-preview {
  color: var(--is-accent, #6366f1);
}

.is-card-picker-empty {
  padding: 14px; text-align: center; font-size: 11px;
  color: var(--is-text-faint, #94a3b8);
}
.is-card-picker-search {
  width: 100%; padding: 7px 9px; margin: 0 0 6px 0;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--is-card-border, rgba(176, 200, 244, 0.12));
  border-radius: 6px; color: var(--is-text, #e2e8f0);
  font-size: 12px; font-family: inherit; outline: none;
  letter-spacing: 0.005em;
  box-sizing: border-box;
}
.is-card-picker-search:focus {
  border-color: var(--is-accent, #6366f1);
  box-shadow: 0 0 0 2px rgba(99,102,241,0.12);
}
body:not(.dark-mode) .is-card-picker-search {
  border-color: rgba(15, 23, 42, 0.18);
  color: #0f172a;
}

/* Mobile: panel takes most of the viewport width with a small gutter */
@media (max-width: 767px) {
  .is-card-picker-panel {
    width: calc(100vw - 24px);
    max-height: 70vh;
    /* Right-anchor on mobile so it doesn't fall off the viewport */
    left: auto;
    right: 0;
  }
}

/* ═════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS — minimalist cards shrink rather than wrap
   wherever possible. Wrap only when 3 groups can no longer fit.
   ═════════════════════════════════════════════════════════════════ */
@media (max-width: 1279px) {
  .is-cardrow { gap: 16px 22px; }
  .is-cardgroup { gap: 18px; }
  .is-card-value { font-size: 17px; }
  .is-card-aux { font-size: 11.5px; }
  .is-card-vs .is-card-mini { width: 80px; }
  .is-card-pnl .fl-pnl-sparkline { width: 80px !important; }
}
@media (max-width: 1099px) {
  .is-cardgroup-metrics { flex-basis: 100%; flex: 0 0 100%; }
  .is-cardgroup-vs   { margin-left: 0; }
  .is-cardgroup-main { margin-left: auto; }
}
@media (max-width: 767px) {
  .is-cardrow {
    gap: 18px;
    flex-direction: column;
  }
  .is-cardgroup {
    flex-basis: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
  }
  .is-cardgroup-main { margin-left: 0; }
  .is-card-value { font-size: 19px; }
  .is-card-aux { font-size: 12.5px; }
}
@media (max-width: 359px) {
  .is-cardgroup { grid-template-columns: 1fr; }
}

/* ───── Theme tokens — light/dark fallbacks ────────────────────── */
:root {
  --is-text-soft: #475569;
  --is-text-faint: #64748b;
  --is-text-muted: #64748b;
  --is-text: #1e293b;
  --is-rule: rgba(15, 23, 42, 0.08);
  --is-bg-elevated: rgba(255, 255, 255, 0.99);
  --is-card-border: rgba(15, 23, 42, 0.08);
  --is-card-border-hover: rgba(15, 23, 42, 0.16);
}
body.dark-mode {
  --is-text-soft: #cbd5e1;
  --is-text-faint: #94a3b8;
  --is-text-muted: #94a3b8;
  --is-text: #f1f5f9;
  --is-rule: rgba(255, 255, 255, 0.07);
  --is-bg-elevated: rgba(15, 23, 42, 0.97);
  --is-card-border: rgba(176, 200, 244, 0.07);
  --is-card-border-hover: rgba(255, 255, 255, 0.18);
}
.is-stats:not(.is-stats-light) {
  --is-text-soft: #cbd5e1;
}

/* ───── Net P&L generic sparkline (legacy class) ──────────────── */
.fl-pnl-sparkline {
  display: block;
  margin: 4px 0 0;
  opacity: 0.92;
  shape-rendering: geometricPrecision;
}
@media (max-width: 640px) {
  .fl-pnl-sparkline {
    width: 80px !important;
    height: 20px !important;
  }
}