:root {
  --sp5-surface: #FFFFFF;
  --sp5-surface-alt: #EEF0F5;
  --sp5-surface-hover: #E6E9F1;
  --sp5-border: #DDE1EA;
  --sp5-ink: #161A22;
  --sp5-ink-muted: #626B7D;
  --sp5-ink-faint: #8890A0;
  --sp5-accent: #33447D;
  --sp5-accent-strong: #24325E;
  --sp5-accent-soft: #E4E8F5;
  --sp5-positive: #1D7A44;
  --sp5-positive-soft: #E4F5EA;
  --sp5-negative: #C13A3A;
  --sp5-negative-soft: #FBE6E6;
  --sp5-shadow: 0 1px 2px rgba(22, 26, 34, 0.06), 0 1px 1px rgba(22, 26, 34, 0.04);

  /* Heat scale: diverging, gray "purgatory" midpoint (-1%..+1%, not actionable
     either direction), 5 monotone steps per arm out to 5%+. Ink flips to white
     only on the most saturated step (g5/r5) to hold 4.5:1 contrast. Shared
     across tabs -- Performance's Gain/Loss by Ticker uses the same bands. */
  --sp5-heat-0: #A6ACBA;  --sp5-heat-0-ink: #161A22;
  --sp5-heat-g1: #D9F2E2; --sp5-heat-g1-ink: #161A22;
  --sp5-heat-g2: #B8E8CB; --sp5-heat-g2-ink: #161A22;
  --sp5-heat-g3: #8AD8A9; --sp5-heat-g3-ink: #161A22;
  --sp5-heat-g4: #4FB876; --sp5-heat-g4-ink: #161A22;
  --sp5-heat-g5: #1D7A44; --sp5-heat-g5-ink: #FFFFFF;
  --sp5-heat-r1: #F9DCDC; --sp5-heat-r1-ink: #161A22;
  --sp5-heat-r2: #F3BFBF; --sp5-heat-r2-ink: #161A22;
  --sp5-heat-r3: #E89696; --sp5-heat-r3-ink: #161A22;
  --sp5-heat-r4: #D66363; --sp5-heat-r4-ink: #161A22;
  --sp5-heat-r5: #C13A3A; --sp5-heat-r5-ink: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sp5-surface: #171B26;
    --sp5-surface-alt: #1D2230;
    --sp5-surface-hover: #242A3B;
    --sp5-border: #2B3244;
    --sp5-ink: #E7E9F0;
    --sp5-ink-muted: #A0A8BC;
    --sp5-ink-faint: #6E7690;
    --sp5-accent: #8B9BE8;
    --sp5-accent-strong: #AAB7F0;
    --sp5-accent-soft: #232B4A;
    --sp5-positive: #3FBE72;
    --sp5-positive-soft: #16301F;
    --sp5-negative: #E56A6A;
    --sp5-negative-soft: #3A1E1E;
    --sp5-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.2);

    --sp5-heat-0: #454E63;  --sp5-heat-0-ink: #E7E9F0;
    --sp5-heat-g1: #1B2F22; --sp5-heat-g1-ink: #E7E9F0;
    --sp5-heat-g2: #204A31; --sp5-heat-g2-ink: #E7E9F0;
    --sp5-heat-g3: #2B6E42; --sp5-heat-g3-ink: #E7E9F0;
    --sp5-heat-g4: #379F5C; --sp5-heat-g4-ink: #0B0D12;
    --sp5-heat-g5: #3FBE72; --sp5-heat-g5-ink: #0B0D12;
    --sp5-heat-r1: #331F1F; --sp5-heat-r1-ink: #E7E9F0;
    --sp5-heat-r2: #4A2626; --sp5-heat-r2-ink: #E7E9F0;
    --sp5-heat-r3: #6B2F2F; --sp5-heat-r3-ink: #E7E9F0;
    --sp5-heat-r4: #9C3F3F; --sp5-heat-r4-ink: #E7E9F0;
    --sp5-heat-r5: #E56A6A; --sp5-heat-r5-ink: #0B0D12;
  }
}

/* --- Page chrome ---
   The site body is a fixed black background everywhere (navigation.css),
   not adaptive to light/dark preference. Anything sitting directly on the
   bare page (not inside a card) needs its own surface to stay legible in
   both branches of our light/dark tokens -- hence .sp5-masthead below,
   same pattern as .sp5-stat-card / .sp5-accordion. */
.sp5-page { text-align: left; }
.sp5-masthead {
  background: var(--sp5-surface);
  border: 1px solid var(--sp5-border);
  border-radius: 10px;
  box-shadow: var(--sp5-shadow);
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.25rem;
}
.sp5-eyebrow {
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--sp5-accent);
}
.sp5-page h1 { font-size: 2rem; font-weight: 800; margin: 0.2rem 0 0.35rem; letter-spacing: -0.01em; }
.sp5-page h3 {
  margin: 0; font-size: 0.88rem; font-weight: 700;
  letter-spacing: -0.005em; color: var(--sp5-ink-muted);
}
.sp5-as-of { color: var(--sp5-ink-muted); font-size: 0.9rem; margin: 0; }

/* --- Stat strip --- */
.sp5-stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.sp5-stat-card {
  background: var(--sp5-surface);
  border: 1px solid var(--sp5-border);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.sp5-stat-card__label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--sp5-ink-faint);
}
.sp5-stat-card__value {
  font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--sp5-ink);
}
.sp5-stat-card__caption { font-size: 0.78rem; color: var(--sp5-ink-muted); }
.sp5-stat-card__subvalue { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Distinguishes live-read cards (e.g. today's cash) from ones derived off the
   snapshot history further back than "right now" -- shared across tabs. */
.sp5-stat-card--live { background: var(--sp5-accent-soft); }

/* --- Tab nav between sp5's separate pages (Holdings, Performance, ...) --- */
.sp5-tabbar {
  display: flex; justify-content: center; gap: 0.4rem; border-bottom: 1px solid var(--sp5-border);
  padding-bottom: 0.6rem; margin-bottom: 1.25rem;
}
.sp5-tab {
  appearance: none; background: transparent; border: 1.5px solid transparent; border-radius: 999px;
  padding: 0.5rem 1.15rem; font-weight: 600; font-size: 0.9rem; color: var(--sp5-ink-muted);
  text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.sp5-tab:not(.sp5-tab--disabled):not(.sp5-tab--active):hover { background: var(--sp5-accent-soft); color: var(--sp5-accent); }
.sp5-tab:focus-visible { outline: 2px solid var(--sp5-accent); outline-offset: 2px; }
.sp5-tab--active { background: var(--sp5-accent); border-color: var(--sp5-accent); color: #fff; }
.sp5-tab--disabled { cursor: default; color: var(--sp5-ink-faint); }
.sp5-soon {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--sp5-surface-alt); color: var(--sp5-ink-faint); padding: 0.05rem 0.35rem; border-radius: 4px;
}

.sp5-tick { font-weight: 700; }
.sp5-tick--up { color: var(--sp5-positive); }
.sp5-tick--down { color: var(--sp5-negative); }

/* --- Accordions --- */
.sp5-accordion {
  background: var(--sp5-surface);
  border: 1px solid var(--sp5-border);
  border-radius: 10px;
  box-shadow: var(--sp5-shadow);
  padding: 1rem;
  margin-bottom: 0.75rem;
}
.sp5-accordion-summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  font-size: 1rem; font-weight: 700; letter-spacing: -0.005em;
  padding: 0.3rem 0.4rem; margin: -0.3rem -0.4rem; border-radius: 8px;
}
.sp5-accordion-summary:hover { background: var(--sp5-surface-alt); }
.sp5-accordion-summary::-webkit-details-marker { display: none; }
.sp5-accordion-summary::after {
  content: '▾'; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--sp5-accent-soft); color: var(--sp5-accent); border: 1.5px solid var(--sp5-accent);
  font-size: 0.85rem; transform: rotate(-90deg);
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), background 150ms ease, color 150ms ease;
}
details[open] > .sp5-accordion-summary::after { transform: rotate(0deg); }
.sp5-accordion-summary:hover::after { background: var(--sp5-accent); color: #fff; }
.sp5-accordion-summary:focus-visible { outline: 2px solid var(--sp5-accent); outline-offset: 2px; }
.sp5-accordion-summary .sp5-accordion-hint { font-size: 0.78rem; font-weight: 400; color: var(--sp5-ink-faint); }
.sp5-accordion-body { margin-top: 0.85rem; display: flex; flex-direction: column; gap: 0.75rem; }

.sp5-panel__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap;
}
.sp5-panel__hint { font-size: 0.76rem; color: var(--sp5-ink-faint); }

.sp5-sort-toggle {
  appearance: none; border: 1px solid var(--sp5-border); background: var(--sp5-surface-alt);
  color: var(--sp5-ink-muted); font: inherit; font-size: 0.72rem; font-weight: 600;
  padding: 0.2rem 0.55rem; border-radius: 999px; cursor: pointer;
}
.sp5-sort-toggle:hover { background: var(--sp5-surface-hover); }
.sp5-sort-toggle:focus-visible { outline: 2px solid var(--sp5-accent); outline-offset: 2px; }

/* --- Filter chips + search (reused by any sortable/filterable table) --- */
.sp5-filter-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.sp5-chip {
  appearance: none; border: 1px solid var(--sp5-border); background: var(--sp5-surface);
  color: var(--sp5-ink-muted); font: inherit; font-size: 0.78rem; font-weight: 600;
  padding: 0.32rem 0.7rem; border-radius: 999px; cursor: pointer;
}
.sp5-chip:focus-visible { outline: 2px solid var(--sp5-accent); outline-offset: 2px; }
.sp5-chip.is-active { background: var(--sp5-accent); border-color: var(--sp5-accent); color: #fff; }
.sp5-search-input {
  appearance: none; border: 1px solid var(--sp5-border); background: var(--sp5-surface); color: var(--sp5-ink);
  font: inherit; font-size: 0.85rem; padding: 0.35rem 0.65rem; border-radius: 7px; width: 160px; margin-left: auto;
}
.sp5-search-input:focus-visible { outline: 2px solid var(--sp5-accent); outline-offset: 1px; }
.sp5-result-count { font-size: 0.76rem; color: var(--sp5-ink-faint); }

/* --- Generic sortable table skeleton -- tab CSS supplies colgroup widths + row content --- */
.sp5-table-wrap { overflow-x: auto; }
.sp5-sortable-table { width: 100%; border-collapse: collapse; min-width: 900px; table-layout: fixed; background: var(--sp5-surface); }
.sp5-sortable-table thead th {
  text-align: center; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--sp5-ink-faint);
  border-bottom: 1px solid var(--sp5-border); padding: 0 0.4rem 0.3rem;
  position: sticky; top: 0; background: var(--sp5-surface);
}
.sp5-th-btn {
  appearance: none; background: transparent; border: none; font: inherit; font-weight: inherit;
  letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer;
  padding: 0.25rem 0; display: inline-flex; align-items: center; gap: 0.3rem;
}
.sp5-th-btn:focus-visible { outline: 2px solid var(--sp5-accent); outline-offset: 2px; }
.sp5-sort-icon { font-size: 0.6rem; color: var(--sp5-accent); min-width: 0.7em; display: inline-block; }
.sp5-sortable-table tbody td {
  padding: 0.25rem 0.4rem; text-align: center; border-bottom: 1px solid var(--sp5-border);
  font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--sp5-ink);
}
.sp5-sortable-table tbody tr:nth-child(even) { background: var(--sp5-surface-alt); }
.sp5-sortable-table tbody tr:hover { 
  background: var(--sp5-surface-hover); 
}

.sp5-sortable-table tbody tr{
  height: 34px;
}
.sp5-heat-pill { display: inline-flex; align-items: center; padding: 0.12rem 0.4rem; border-radius: 4px; font-weight: 600; }

/* Ticker symbol + sector/industry color coding -- shared by Holdings'
   Ledger (a table) and Performance's Gain/Loss by Ticker (a CSS grid), so
   it lives here rather than in either tab's own CSS. .sp5-sym is one single
   plain span containing its own text (e.g. "AAPL / 1"), not a wrapper
   around separately-styled children -- a wrapper span containing
   separately-styled children never landed at the same vertical center as
   its siblings, off by a couple px no combination of vertical-align/
   height/position fixes on the wrapper closed.

   No display:inline-flex here -- do not add it back. .sp5-sym is a direct
   child of a CSS grid row on Performance, and grid blockifies in-flow
   children regardless of their own specified display (inline -> block,
   inline-flex -> flex). That distinction matters: a blockified plain span
   still honors text-align on it for centering its own content, but a
   blockified flex container ignores text-align entirely -- its content is
   positioned by justify-content (default flex-start, i.e. pinned left)
   instead. display:inline-flex was silently fighting the horizontal
   text-align:center fix on Performance's ticker column this exact way; it
   wasn't a harmless no-op, it was actively wrong. Plain inline content
   already centers correctly on its own: vertically via a table cell's
   vertical-align:middle (verified directly against plain text in the same
   cell) or the grid row's own align-items:center, and horizontally via
   text-align:center on the containing cell/column.

   No font-family override (deliberately) -- a monospace stack here vs
   sibling cells' plain inherited font means two different fonts' own
   ascent/descent metrics, which can visibly render off-center in a way
   that varies by which font actually resolves per OS/browser. Matching
   the surrounding font removes that mismatch instead of compensating. */
.sp5-sym {
  align-items: center;
  font-weight: 700; letter-spacing: 0.01em;
}
/* Sector/industry color coding -- classes themselves (e.g. "technology-
   software-application" for the pill, "technology-sector" for the tip) come
   from metrics_colors.css (loaded globally in base.html, same palette the
   micro tab's ticker links use). This just adds the pill shape, the tip's
   position, and the hover trigger -- background/text color on both come
   from those classes, not from here. */
.sp5-sym--industry {
  position: relative;
  padding: 0.12rem 0.4rem; border-radius: 4px;
}
/* Opens to the right, matching micro's ticker-link tooltip. text-align is
   explicit (not left to inherit from an ancestor's own text-align, e.g. the
   Ledger table's centered cells) since this is shared across a table
   (Holdings) and a CSS-grid row (Performance), which don't share a default. */
.sp5-sym--industry .sp5-tip {
  position: absolute; top: 50%; left: calc(100% + 8px); transform: translateY(-50%);
  font-size: 0.72rem; padding: 0.3rem 0.5rem; text-align: center;
  border-radius: 5px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 120ms ease; z-index: 4;
}
.sp5-sym--industry:hover .sp5-tip, .sp5-sym--industry:focus-visible .sp5-tip { opacity: 1; }
.sp5-tip-company { display: block; font-weight: 700; margin-bottom: 0.15rem; }

.sp5-badge {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: 4px; padding: 0.05rem 0.32rem; white-space: nowrap;
}
.sp5-badge--sell { background: var(--sp5-positive-soft); color: var(--sp5-positive); }
.sp5-badge--buy { background: var(--sp5-accent-soft); color: var(--sp5-accent); }

/* Was performance.css-only; Trade History needs it too. */
.sp5-num-positive, .sp5-num-negative { font-weight: 600; }
.sp5-num-positive { color: var(--sp5-positive); }
.sp5-num-negative { color: var(--sp5-negative); }