/* ============================================================================
 * JagSim Holdings — restyle pass 1 (design lab, isolated)
 * Loads AFTER portfolio.html's inline <style>. Same material/type system as the
 * hub restyle so switching tabs feels seamless. No structural changes.
 * ========================================================================== */

:root {
  --rs-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --rs-shadow-md: 0 2px 4px rgba(16, 24, 40, 0.05), 0 8px 24px rgba(16, 24, 40, 0.08);
  --rs-radius: 12px;
  --rs-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── One material system ─────────────────────────────────────────────────── */
.summary,
.panel,
.stats-grid,
.recon,
.first-run {
  border-radius: var(--rs-radius);
  box-shadow: var(--rs-shadow-sm);
  border-color: #e6eaf0;
}

/* ── Section headers: give the page real rhythm ──────────────────────────── */
.sec-head { margin: 26px 0 11px; align-items: center; }
.sec-head h2 {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  position: relative;
  padding-left: 11px;
}
/* Brand accent bar so each section reads as a distinct block */
.sec-head h2::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 15px;
  border-radius: 2px;
  background: var(--link);
}
.sec-sub { font-size: 12px; }

/* ── Account summary strip ───────────────────────────────────────────────── */
.summary { margin-bottom: 20px; }
.sum-cell { padding: 15px 18px; }
.sum-k { font-size: 10px; letter-spacing: 0.07em; margin-bottom: 6px; }
.sum-v { letter-spacing: -0.02em; }
.sum-cell.lead .sum-v { font-size: 28px; }

/* ── Range period % beside timeframe chips ───────────────────────────────── */
.range-period-pct { letter-spacing: -0.02em; }

/* ── Tables: quieter grid, clearer hover, tabular figures ────────────────── */
thead th {
  font-size: 10px;
  letter-spacing: 0.07em;
  background: linear-gradient(180deg, #f9fbfd 0%, #f5f8fb 100%);
}
tbody td { font-variant-numeric: tabular-nums; }
tbody tr.clickable { transition: background 0.12s var(--rs-ease); }
tbody tr.clickable:hover td { background: #f4f8fd; }
/* subtle zebra for long tables */
tbody tr:nth-child(even) td { background: #fcfdfe; }
tbody tr.clickable:nth-child(even):hover td { background: #f4f8fd; }
.h-symbol { letter-spacing: -0.01em; }

/* ── Analytics cards ─────────────────────────────────────────────────────── */
.ac-card { border-radius: var(--rs-radius); }
.ac-title { font-size: 11px; letter-spacing: 0.07em; margin-bottom: 15px; }
.sct-track { height: 7px; }
.sct-fill { transition: width 0.6s var(--rs-ease); }
.alloc-legend .lg-dot { box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(16,24,40,.06); }

/* ── Trading-performance / risk stat grids ──────────────────────────────── */
.st-cell { padding: 15px 18px; transition: background 0.12s var(--rs-ease); }
.st-cell:hover { background: #fbfcfe; }
.st-k { font-size: 10px; letter-spacing: 0.07em; margin-bottom: 6px; }
.st-v { font-size: 21px; letter-spacing: -0.02em; }

/* ── P&L reconciliation strip ────────────────────────────────────────────── */
.recon { border-radius: var(--rs-radius); padding: 13px 18px; }
.recon-item b { letter-spacing: -0.01em; }

/* ── Watchlist rail ──────────────────────────────────────────────────────── */
.wl-panel { border-radius: var(--rs-radius); box-shadow: var(--rs-shadow-sm); }
.wl-trade-btn { transition: background 0.15s var(--rs-ease); }

/* ── Equity chart panel ──────────────────────────────────────────────────── */
.chart-range-toggle button { transition: background 0.14s var(--rs-ease), color 0.14s var(--rs-ease); }
.spy-bench-toggle { transition: background 0.14s var(--rs-ease), border-color 0.14s var(--rs-ease), color 0.14s var(--rs-ease); }
.bh-badge { border-radius: 6px; }

/* ── First-run / empty states ────────────────────────────────────────────── */
.first-run { border-radius: 14px; }
.fr-h { letter-spacing: -0.02em; }

/* ── Position drawer ─────────────────────────────────────────────────────── */
.pos-drawer { border-top-left-radius: 14px; border-bottom-left-radius: 14px; }
.pd-trade { border-radius: 9px; transition: background 0.15s var(--rs-ease), transform 0.12s var(--rs-ease); }
.pd-trade:hover { transform: translateY(-1px); }