/* ---------- tokens ---------- */
:root {
  --paper: #E4DFD3;
  --paper-raised: #F7F4EC;
  --ink: #21261F;
  --ink-soft: #52584C;
  --line: #C7C0AC;
  --pine: #3B6255;
  --pine-soft: #E4EBE6;
  --brick: #9C4B3F;
  --brick-soft: #F3E4E1;
  --muted: #837C69;

  /* gains / losses: brighter and more saturated than pine/brick so they
     stand out on the tiles (all >= 4.5:1 contrast on page and tiles) */
  --up: #11693F;
  --down: #AE3326;

  /* top navigation bar: same color as the page, no dividing line */
  --nav-bg: var(--paper);
  --nav-ink: var(--ink);
  --nav-ink-soft: var(--ink-soft);
  --nav-accent: var(--pine);

  /* asset allocation bars */
  --alloc-bar: #2a78d6;
  --alloc-other: #A8A290;
  /* simplified allocation bar, by rank (validated for color-blind separation) */
  --alloc-1: #3D6CA6;
  --alloc-2: #C45C3A;
  --alloc-3: #0E9470;
  --alloc-4: #CB9A2A;
  --alloc-5: #98578C;
  /* slots 6-8: only the Statements page uses more than five. Chosen (with
     slot 4) so every pair of the eight stays distinguishable, not just
     neighbors in the bar; they differ from 1-5 mainly in lightness. */
  --alloc-6: #8FC1E3;
  --alloc-7: #E8A0B4;
  --alloc-8: #7A1F3D;
  /* Full Breakdown's metric lines over the price chart (validated together,
     all pairs, for color-blind separation; each also has its own dash). */
  --metric-1: #3D6CA6;
  --metric-2: #C45C3A;
  --metric-3: #0E9470;

  --font-serif: 'Source Serif 4', Georgia, serif;
  --font-sans: 'IBM Plex Sans', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
}

* { box-sizing: border-box; }

html { scroll-padding-top: env(safe-area-inset-top, 0px); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ---------- top nav ---------- */
.site-nav {
  background: var(--nav-bg);
  padding: 0 24px;
}

/* Same content width as .page (960px minus its 24px side padding), so the
   links line up with the page content at every screen size. */
.site-nav-row {
  max-width: 912px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
  height: 56px;
}

.site-nav-links {
  display: flex;
  align-self: stretch;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
}
/* Side padding (cancelled by the negative margin, so links stay aligned with
   the page) leaves room for the active underline to reach past the word
   without being clipped by the scroll container. */
.site-nav-links { padding: 0 5px; margin: 0 -5px; }
.site-nav-links li { display: flex; }

.site-nav-links a {
  text-decoration: none;
  font-size: 0.92rem;
  color: var(--nav-ink-soft);
  /* Full bar height, so nothing gets clipped by the scroll container. */
  position: relative;
  display: flex;
  align-items: center;
  padding: 0;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.site-nav-links a:hover { color: var(--nav-ink); }

.site-nav-links a.active {
  color: var(--nav-ink);
  font-weight: 500;
}
/* Underline a little below the word, reaching slightly past it on each side. */
.site-nav-links a.active::after {
  content: '';
  position: absolute;
  top: calc(50% + 0.95em);
  left: -3px;
  right: -3px;
  height: 2px;
  border-radius: 1px;
  background: var(--nav-accent);
}

/* ---------- generic page shell ---------- */
.page {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

.page-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.6vw, 1.9rem);
  margin: 0 0 22px;
}

.section-label {
  font-size: 0.78rem;
  text-transform: none;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin: 0 0 4px;
}

/* ---------- search bar (home) ---------- */
.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  background: var(--paper-raised);
  border-radius: 4px;
  padding: 10px 14px;
  margin-bottom: 32px;
}

.search-bar svg { flex-shrink: 0; color: var(--muted); }

.search-bar input {
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--ink);
  width: 100%;
}

.search-bar input::placeholder { color: var(--muted); }

.search-bar input:disabled { cursor: not-allowed; }

/* ---------- timeframe segmented control ---------- */
.timeframe-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0 0 20px;
  flex-wrap: wrap;
  gap: 10px;
}

.page-asof {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 36px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.segmented {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.segmented button {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-soft);
  background: var(--paper-raised);
  border: 0;
  padding: 7px 14px;
  cursor: pointer;
}

.segmented button + button { border-left: 1px solid var(--line); }

.segmented button.active {
  background: var(--pine);
  color: var(--paper-raised);
  font-weight: 600;
}

/* ---------- market cards ---------- */
.card-grid {
  display: grid;
  grid-auto-flow: row dense;  /* other cards backfill around an expanded one */
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 40px;
}

.metric-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 14px 16px;
}

/* Cards expand on click to span two columns with extra detail. */
.metric-card { cursor: pointer; transition: border-color 0.15s ease; }
.metric-card:hover { border-color: var(--muted); }
.metric-card:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.metric-card.is-expanded { grid-column: span 2; border-color: var(--pine); }
/* On wide screens the card next to an open one stretches to its height:
   any extra space goes 1/3 above its chart and 2/3 below, so the chart sits
   level with the open card's chart. (Cards that don't stretch are unchanged.) */
.metric-card[data-key]:not(.is-expanded) { display: flex; flex-direction: column; }
.metric-card[data-key]:not(.is-expanded)::before { content: ''; order: 1; flex: 1 1 0; }
.metric-card[data-key]:not(.is-expanded) > .metric-spark { order: 2; flex: none; }
.metric-card[data-key]:not(.is-expanded)::after { content: ''; order: 3; flex: 2 1 0; }
/* Blank card that evens out a phone row next to an expanded card (phones only). */
.metric-card-filler { display: none; cursor: default; opacity: 0.45; }
.metric-card-filler:hover { border-color: var(--line); }
.metric-spark-large { display: block; width: 100%; height: 120px; margin: 6px 0 4px; }
/* Expanded chart: drag a finger (or the mouse) across it to read each point. */
.metric-scrub { position: relative; margin: 6px 0 4px; touch-action: none; cursor: crosshair; -webkit-user-select: none; user-select: none; }
.metric-scrub .metric-spark-large { margin: 0; }
/* Taller than the mini charts on every screen (the phone rule for .metric-spark doesn't apply). */
.metric-spark.metric-spark-large { height: 120px; }
.metric-scrub-line { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--muted); transform: translateX(-0.5px); pointer-events: none; }
.metric-scrub-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--paper-raised);
  transform: translateY(-50%);
  pointer-events: none;
}
.metric-scrub-line[hidden],
.metric-scrub-dot[hidden] { display: none; }
.metric-scrub-readout {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  min-height: 1.3em;
  margin: 0 0 4px;
  font: 400 0.76rem var(--font-mono);
  color: var(--ink-soft);
}
.metric-scrub-readout strong { color: var(--ink); font-weight: 600; }
/* Expanded card stats: rows of three that line up in columns (current,
   low, high; then 5-year high, drop, rebound). */
.metric-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: space-between;
  gap: 14px 14px;
  margin-top: 10px;
  padding: 13px 0 3px;
  border-top: 1px solid var(--line);
}
.metric-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 400 0.88rem var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  white-space: nowrap;
}

.metric-stat-value { color: var(--ink); }
/* A stat's name: on hover, or briefly after a tap (showStatTip in home.js). */
.metric-stat[data-tip] { position: relative; cursor: default; }
.metric-stat[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper-raised);
  color: var(--ink);
  font: 500 0.72rem var(--font-sans);
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 3;
}
/* Left and right columns: keep the bubble inside the card. */
.metric-stat[data-tip]:nth-child(3n + 1)::after { left: 0; transform: none; }
.metric-stat[data-tip]:nth-child(3n)::after { left: auto; right: 0; transform: none; }
.metric-stat[data-tip].is-tip-shown::after { opacity: 1; }
@media (hover: hover) {
  .metric-stat[data-tip]:hover::after { opacity: 1; }
}
.metric-stat-diff { color: var(--ink-soft); }
.metric-stat-change.up { color: var(--up); }
.metric-stat-change.down { color: var(--down); }
.metric-stat-change.flat { color: var(--muted); }
.metric-extreme-mark { width: 11px; height: 8px; fill: var(--ink-soft); }

/* Open card: "−" in the top right closes it. */
.metric-card.is-expanded { position: relative; cursor: default; }
/* Open card: the name turns white. */
.metric-card.is-expanded .metric-label { color: var(--ink); }
.metric-collapse {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper-raised);
  color: var(--ink-soft);
  font: 500 1.05rem/1 var(--font-sans);
  cursor: pointer;
}
.metric-collapse:hover { color: var(--ink); border-color: var(--muted); }
.metric-collapse:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.metric-icon { width: 16px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.metric-icon.metric-icon-fill { width: 15px; height: 15px; fill: currentColor; stroke: none; }

.metric-label {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 6px;
}

.metric-value-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}

.metric-value {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.metric-delta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 1px 6px;
  border-radius: 3px;
}

.metric-delta.up { color: var(--up); background: var(--pine-soft); }
.metric-delta.down { color: var(--down); background: var(--brick-soft); }
.metric-delta.flat { color: var(--muted); background: transparent; }

.metric-asof {
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: 8px;
}

.metric-spark {
  display: block;
  width: 100%;
  height: 36px;
}

.metric-skeleton {
  width: 100%;
  height: 36px;
  border-radius: 2px;
  background: var(--pine-soft);
  animation: metric-loading 1.1s ease-in-out infinite alternate;
}

.metric-skeleton-failed { animation: none; opacity: 0.5; }

@keyframes metric-loading {
  from { opacity: 0.45; }
  to { opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .metric-skeleton { animation: none; opacity: 0.65; }
}

/* ---------- portfolio title switcher ---------- */
.portfolio-head { margin-bottom: 8px; }
.portfolio-risk {
  font: 400 0.84rem var(--font-sans);
  color: var(--ink-soft);
}
.portfolio-updated {
  margin: 0;
  font: 400 0.72rem var(--font-sans);
  color: var(--muted);
}
.portfolio-updated-below { margin-top: 10px; }

.portfolio-switcher {
  position: relative;
  z-index: 2;
  display: block;
}

/* The title is a bordered button that opens the portfolio menu. */
.portfolio-name-btn {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: 100%;
  padding: 8px 20px 11px 16px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-raised);
  box-shadow: 0 1px 2px rgba(33, 38, 31, 0.06);
  cursor: pointer;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.2;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
button.portfolio-name-btn:hover,
.portfolio-name-btn[aria-expanded="true"] {
  border-color: var(--muted);
  box-shadow: 0 2px 8px rgba(33, 38, 31, 0.12);
}
.portfolio-name-btn:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.portfolio-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
#portfolioTitle { flex: none; white-space: nowrap; }
.title-card-name { margin: 0; font: inherit; white-space: nowrap; }

.portfolio-caret {
  flex: none;
  width: 13px;
  height: 9px;
  margin-top: 3px;
  fill: var(--muted);
  transition: transform 0.2s ease, fill 0.15s ease;
}
.portfolio-name-btn:hover .portfolio-caret { fill: var(--ink); }
.portfolio-name-btn[aria-expanded="true"] .portfolio-caret { transform: rotate(180deg); }

.portfolio-options {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 3;
  list-style: none;
  margin: 0;
  padding: 0;
  width: min(320px, calc(100vw - 48px));
  max-height: min(360px, 55vh);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper-raised);
  box-shadow: 0 12px 28px rgba(33, 38, 31, 0.16);
}

.portfolio-options[hidden] { display: none; }
.portfolio-options:not([hidden]) { animation: portfolio-menu-in 0.18s ease-out both; }
.portfolio-options li + li { border-top: 1px solid var(--line); }

@keyframes portfolio-menu-in {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-options:not([hidden]) { animation: none; }
  .portfolio-caret { transition: none; }
}

.portfolio-options button {
  position: relative;
  width: 100%;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  padding: 12px 16px 12px 40px;
  cursor: pointer;
}

.portfolio-options button:hover,
.portfolio-options button:focus-visible {
  background: var(--pine-soft);
  outline: none;
}

.portfolio-options button[aria-selected="true"] {
  color: var(--pine);
  font-weight: 600;
  background: var(--pine-soft);
}

.portfolio-options button[aria-selected="true"]::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--pine);
  border-bottom: 2px solid var(--pine);
  transform: translateY(-65%) rotate(45deg);
}

/* ---------- summary strip (portfolio page) ---------- */
/* Title box and summary share one width: the wider of the two, but at least
   wide enough for the longest portfolio name and typical figures, so the
   edges line up and don't jump between portfolios. */
.portfolio-headline {
  display: inline-grid;
  min-width: min(30rem, 100%);
  max-width: 100%;
}
.summary {
  margin: 20px 0 0;
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: space-between;
  gap: 12px 24px;
}
/* Labels left-aligned over their numbers; the numbers stay flush with the box edges. */
.summary-figure { text-align: left; }

/* ---------- asset allocation ---------- */
/* Statements uses a brighter yellow for slot 4, chosen together with slots
   6-8 so all eight of its colors stay distinct; Portfolios keeps the ochre.
   Set on the Statements <main> so the section tiles pick it up too. */
.allocation-statement { --alloc-4: #E0BE4E; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .allocation-statement { --alloc-4: #E8CF6A; }
}
:root[data-theme="dark"] .allocation-statement { --alloc-4: #E8CF6A; }
:root[data-theme="midnight"] .allocation-statement { --alloc-4: #E8CF6A; }
.allocation { margin-top: 22px; max-width: 640px; }
.allocation-title {
  margin: 0 0 8px;
  font: 500 0.78rem var(--font-sans);
  color: var(--muted);
}
.allocation-bar { display: flex; gap: 2px; height: 14px; }
/* Donut replaces the bar on phones (see small-screen rules). */
.allocation-donut { display: none; width: 112px; height: 112px; transform: rotate(-90deg); }
.allocation-donut circle { fill: none; stroke-width: 15; transition: opacity 0.15s ease; }
.allocation-segment { min-width: 3px; transition: opacity 0.15s ease; }
.allocation-segment:first-child { border-radius: 4px 0 0 4px; }
.allocation-segment:last-child { border-radius: 0 4px 4px 0; }
.allocation-segment:only-child { border-radius: 4px; }
.allocation-legend {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.allocation-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--ink);
  transition: opacity 0.15s ease;
}
.allocation-swatch { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.allocation-key-percent { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.allocation .is-dimmed { opacity: 0.35; }

.allocation-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0 -6px;
  padding: 3px 6px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--muted);
  font: 500 0.74rem var(--font-sans);
  cursor: pointer;
}
.allocation-toggle:hover { color: var(--ink); }
.allocation-toggle:focus-visible { outline: 2px solid var(--pine); outline-offset: 1px; }
.allocation-caret { width: 9px; height: 7px; fill: currentColor; transform: rotate(180deg); transition: transform 0.3s ease; }
.allocation.is-expanded .allocation-caret { transform: none; }
.allocation-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.allocation.is-expanded .allocation-detail { grid-template-rows: 1fr; }
.allocation-detail-inner { min-height: 0; overflow: hidden; }
.allocation-detail .allocation-list { padding-top: 8px; }
@media (prefers-reduced-motion: reduce) {
  .allocation-caret,
  .allocation-detail { transition: none; }
}

.allocation-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.allocation-row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 11rem) minmax(0, 1fr) 3.6rem 6.5rem;
  align-items: center;
  gap: 2px 12px;
  font-size: 0.8rem;
  color: var(--ink);
}
.allocation-track { display: block; height: 8px; }
.allocation-fill {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 0 4px 4px 0;
  background: var(--alloc-bar);
}
.allocation-other .allocation-fill { background: var(--alloc-other); }
.allocation-percent,
.allocation-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.allocation-value { color: var(--muted); }

.summary-figure { display: flex; flex-direction: column; gap: 2px; }

/* Bottom-of-page Summary: current vs. value if everything returned to its 5YH. */
.rebound-summary {
  margin-top: 48px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.rebound-summary-title {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
}
.rebound-figures {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  gap: 16px 24px;
}

/* Assess: the grid icon picks which charts show. */
.statement-overview { position: relative; }
/* On the Net Worth / Today / % Change line, at its right end. */
.summary.summary-with-charts { grid-template-columns: repeat(3, auto) auto; }
.statement-charts { position: relative; z-index: 7; align-self: center; }
.statement-charts .large-menu-panel { right: 0; }
/* Phones: centered over the chart's ☰ below it. */
@media (max-width: 560px) { .statement-charts { margin-right: 3px; } }
.statement-charts-btn { display: grid; place-items: center; width: 38px; height: 36px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.statement-charts-btn svg { width: 24px; height: 24px; fill: currentColor; }
/* Settings > Chart Menu Icon: 9 squares (standard) or 3 stacked (vertical). */
.statement-charts-btn .chart-icon-three { display: none; }
:root[data-chart-icon="vertical"] .statement-charts-btn .chart-icon-nine { display: none; }
:root[data-chart-icon="vertical"] .statement-charts-btn .chart-icon-three { display: block; }
.chart-icon-choices button { display: inline-flex; align-items: center; gap: 8px; }
.chart-icon-choices button svg { width: 15px; height: 15px; fill: currentColor; }
.statement-charts-btn[aria-expanded="true"] { color: var(--ink); }
.statement-charts-btn:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
@media (hover: hover) { .statement-charts-btn:hover { color: var(--ink); } }
/* As wide as its longest label (the shared menu style is a fixed 160px). */
.large-menu-panel.statement-charts-panel { width: max-content; white-space: nowrap; }
.statement-charts-option { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 5px; font-size: 0.88rem; color: var(--ink); cursor: pointer; }
.statement-charts-option input { accent-color: var(--pine); }
@media (hover: hover) { .statement-charts-option:hover { background: var(--pine-soft); } }
[data-chart][hidden] { display: none !important; }

/* Assess: Value Change, Liquidity Breakdown, then Asset Allocation.
   The two breakdowns hide/show from their title (with a triangle). */
.statement-overview { display: grid; gap: 18px; max-width: 760px; }
.statement-panel-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.statement-panel-toggle .allocation-title { margin: 0; }
.statement-panel-caret { width: 9px; height: 6px; fill: var(--muted); transition: transform 0.2s ease; }
.statement-panel-toggle[aria-expanded="false"] .statement-panel-caret { transform: rotate(-90deg); }
.statement-panel-toggle:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; }
@media (hover: hover) {
  .statement-panel-toggle:hover .allocation-title { color: var(--ink); }
  .statement-panel-toggle:hover .statement-panel-caret { fill: var(--ink); }
}
.statement-panel-body[hidden] { display: none; }
/* Net Worth chart card. */
.networth-card { padding-top: 12px; }
/* Build: below Asset Allocation, the page's width for charts. */
.build-networth { margin-top: 18px; max-width: 760px; }
.networth-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.networth-head .networth-timeframe { margin-left: auto; }
.full-analysis-title { margin: 0 0 10px; text-align: center; font: 600 1.08rem var(--font-serif); color: var(--ink-soft); }
.full-analysis-head { flex-wrap: nowrap; }
#fullAnalysisAccount { max-width: 260px; margin: 0; padding: 6px 28px 6px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-raised); color: var(--ink); font: inherit; }
.full-analysis-head .networth-timeframe { margin-left: auto; }
.full-analysis-method { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 4px 0 8px; color: var(--muted); font-size: 0.78rem; }
.full-analysis-method button { padding: 5px 9px; border: 1px solid var(--line); border-radius: 6px; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.full-analysis-method button.active { border-color: transparent; background: color-mix(in srgb, var(--muted) 28%, var(--paper-raised)); color: var(--ink); }
.full-analysis-method button:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.full-analysis-stats { display: flex; flex-wrap: wrap; gap: 20px 34px; padding: 9px 2px 4px; }
.full-analysis-stat { display: grid; gap: 2px; min-width: 170px; }
.full-analysis-stat > span { color: var(--muted); font-size: 0.76rem; }
.full-analysis-stat strong { font: 600 1.04rem var(--font-mono); }
.full-analysis-stat small { color: var(--muted); font-size: 0.7rem; }
#fullAnalysisChart { touch-action: pan-y; cursor: crosshair; }
/* The ☰ menu's chart type: a bar-chart and a line-chart icon; the chosen
   one sits on a quiet gray. */
.networth-view { display: flex; gap: 6px; padding: 4px 4px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.large-menu-panel .networth-view button { display: grid; place-items: center; width: 40px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.large-menu-panel .networth-view button svg { width: 18px; height: 18px; fill: currentColor; }
.large-menu-panel .networth-view button.active { background: color-mix(in srgb, var(--muted) 35%, var(--paper-raised)); color: var(--ink); border-color: transparent; }
.large-menu-panel .networth-view button:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.networth-menu { position: relative; z-index: 6; margin-right: -6px; }
.networth-menu .large-menu-panel { width: 170px; }
.networth-swatch { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; background: var(--series-color); }
.growth-bar.is-series { fill: var(--series-color); }
/* Bars: gains green above zero, losses red below. */
.growth-bar.is-up { fill: var(--up); }
.growth-bar.is-down { fill: var(--down); }
.growth-bar { opacity: 0.8; }
.growth-bar.is-active { opacity: 1; }
.networth-timeframe button { padding: 5px 10px; font-size: 0.74rem; }
.networth-legend { gap: 10px; flex-wrap: wrap; }
.networth-value { font: 600 1.05rem var(--font-mono); color: var(--ink); }
.networth-tf { font: 400 0.76rem var(--font-mono); color: var(--muted); }
#networthReadout .is-up { color: var(--up); }
#networthReadout .is-down { color: var(--down); }
@media (max-width: 560px) {
  #networthLegend .compare-change { display: inline; }
  /* Phones: the timeframes across the card, ☰ at the end of the same line. */
  .networth-head .networth-timeframe { display: flex; flex: 1; margin-left: 0; }
  .networth-timeframe button { flex: 1; padding: 6px 0; }
  .full-analysis-head { flex-wrap: wrap; }
  #fullAnalysisAccount { flex: 1 1 100%; max-width: none; }
  #fullAnalysisTimeframe { flex: 1; margin-left: 0; }
}

/* One bar, most to least liquid: segments sized by share of net worth, in
   one color (the 6th allocation color) fading with each less liquid tier. */
.liquidity-bar { display: flex; gap: 2px; height: 14px; }
.liquidity-segment { min-width: 3px; background: color-mix(in srgb, var(--alloc-6) calc(var(--shade) * 100%), transparent); }
.liquidity-segment:first-child { border-radius: 4px 0 0 4px; }
.liquidity-segment:last-child { border-radius: 0 4px 4px 0; }
.liquidity-segment:only-child { border-radius: 4px; }
.liquidity-ends { display: flex; justify-content: space-between; margin: 6px 0 14px; font-size: 0.7rem; color: var(--muted); }
/* A tile per tier: four across, two by two on phones. */
.liquidity-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.liquidity-tile {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-raised);
}
.liquidity-tile-head { display: flex; align-items: center; gap: 7px; font: 600 0.84rem var(--font-sans); color: var(--ink); }
.liquidity-swatch { flex: none; width: 10px; height: 10px; border-radius: 2px; background: color-mix(in srgb, var(--alloc-6) calc(var(--shade) * 100%), transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--alloc-6) 35%, transparent); }
.liquidity-tile-figures { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.liquidity-tile-percent { font: 600 1.05rem var(--font-mono); color: var(--ink); }
.liquidity-tile-value { font: 400 0.8rem var(--font-mono); color: var(--ink-soft); }
.liquidity-tile small { font-size: 0.7rem; line-height: 1.35; color: var(--muted); }
.summary-label { font-size: 0.78rem; color: var(--muted); }
.summary-value {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.summary-value.up { color: var(--up); }
.summary-value.down { color: var(--down); }

/* Portfolios controls. Wide screens: the timeframe buttons, then Arrange
   and View, in one row; phones stack them (see the small-screen rules).
   Labels sit inside the dropdowns as small captions. */
.portfolio-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  /* Even space above the controls and between them and the first category. */
  margin: 28px 0 0;
}
#categories > :first-child { margin-top: 28px; }
/* Wide screens: two fixed-width dropdowns at the right end of the row. */
.portfolio-controls { justify-content: space-between; }
.portfolio-controls .view-bar { grid-template-columns: repeat(2, 170px); }
.portfolio-controls .view-bar-label { display: none; }
#portfolioTimeframeControl { border-radius: 6px; }
#portfolioTimeframeControl button { height: 44px; background: var(--paper-raised); }
#portfolioTimeframeControl button.active { background: var(--pine); }
.portfolio-controls .select-wrap[data-label]::before {
  content: attr(data-label);
  position: absolute;
  top: 6px;
  left: 12px;
  font: 600 0.6rem var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
}
.portfolio-controls .view-bar select {
  height: 44px;
  padding: 15px 30px 0 12px;
  border-radius: 6px;
  background: var(--paper-raised);
  font-size: 0.86rem;
}

/* Organize + View side by side, each with its label centered below. Every
   control (timeframe included) is a .view-bar-item, so their tops and labels
   line up. */
.view-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* both dropdowns as wide as the wider one */
  gap: 12px;
}
.view-bar-item { display: flex; flex-direction: column; gap: 4px; }
.view-bar-label {
  color: var(--muted);
  font-size: 0.72rem;
  text-align: center;
  cursor: pointer;
}
span.view-bar-label { cursor: default; }

/* Dropdowns size to their longest option; the native arrow is replaced by a
   solid triangle drawn on the wrapper. */
.select-wrap { position: relative; display: block; }
.select-wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 12px;
  width: 9px;
  height: 7px;
  margin-top: -3px;
  background: var(--muted);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  pointer-events: none;
}
.select-wrap:hover::after { background: var(--ink); }
.view-bar select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  cursor: pointer;
  height: 33px;  /* same height as the timeframe buttons, so labels line up */
  padding: 0 32px 0 12px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink);
  background: var(--paper-raised);
  font: 500 0.82rem var(--font-sans);
  transition: border-color 0.15s ease;
}
.view-bar select:hover { border-color: var(--muted); }
.view-bar select:focus-visible { outline: 2px solid var(--pine); outline-offset: 1px; }

/* ---------- category sheets / holdings tables ---------- */
/* Shared right-hand columns for category headers and holding tiles, so the
   % changes line up with each other and the $ values/changes start at the
   same left edge. --tile-inset is a tile's border + side padding: headers
   are pushed in by the same amount so their columns match the tiles'. */
#categories {
  --pct-col: 4.6rem;
  --val-col: 7rem;
  --col-gap: 4.5rem;
  --tile-inset: 15px;
}
.category { margin-top: 40px; }

.category-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  justify-content: space-between;
  gap: 4px 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  margin-bottom: 4px;
}

.category-name {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
}
.category-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 0 -4px;
  padding: 0 4px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.category-toggle:focus-visible { outline: 2px solid var(--pine); outline-offset: 1px; }
.category-caret {
  width: 10px;
  height: 7px;
  fill: var(--muted);
  transition: transform 0.3s ease, fill 0.15s ease;
}
.category-toggle:hover .category-caret { fill: var(--ink); }
.category.is-collapsed .category-caret { transform: rotate(180deg); }
/* Holdings slide up/down by animating the grid track between 1fr and 0fr. */
.category-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.3s ease;
}
.category.is-collapsed .category-body { grid-template-rows: 0fr; }
.category-inner { min-height: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .category-caret,
  .category-body { transition: none; }
}

/* Condensed view: one line per holding. */
/* Condensed: ticker | price | % | spacer | value. Only the %→value gap uses
   the wide shared --col-gap (10px + spacer + 10px); the others stay tight. */
.holding-row.is-condensed {
  grid-template-columns: 4.2rem minmax(0, 1fr) var(--pct-col) calc(var(--col-gap) - 20px) var(--val-col);
  align-items: baseline;
  column-gap: 10px;
  margin: 5px 0;
  padding: 8px 14px;
}

.holding-row.is-condensed > .holding-value { grid-column: 5; }
.holding-value:has(.holding-sort-metric) { display: grid; justify-items: start; gap: 2px; }
.holding-sort-metric { color: var(--muted); font-size: 0.72rem; font-weight: 400; }
.holding-sort-metric.up { color: var(--up); }
.holding-sort-metric.down { color: var(--down); }

/* min-width 0 + nowrap: on phones a long name runs into the empty space
   beside the value instead of wrapping onto a second line. */
.category-heading { display: grid; gap: 2px; min-width: 0; }
.category-toggle { white-space: nowrap; }
.category-weight { color: var(--muted); font-size: 0.74rem; }
.subcategory-name {
  margin: 8px 0 0;
  line-height: 1;
  text-align: center;
}
.subcategory-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 8px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--muted);
  font: 500 0.7rem var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.subcategory-toggle:hover { color: var(--ink); }
.subcategory-toggle:focus-visible { outline: 2px solid var(--pine); outline-offset: 1px; }
.subcategory-caret {
  width: 9px;
  height: 7px;
  fill: currentColor;
  transition: transform 0.3s ease;
}
.subgroup.is-collapsed .subcategory-caret { transform: rotate(180deg); }
/* Rows slide up/down by animating the grid track between 1fr and 0fr. */
.subgroup-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.3s ease;
}
.subgroup.is-collapsed .subgroup-body { grid-template-rows: 0fr; }
.subgroup-inner { min-height: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .subcategory-caret,
  .subgroup-body { transition: none; }
}
/* Value on top; the $ change directly beneath it (same left edge) with the
   % change to its left. The % is hidden in Standard view only. */
.category-totals {
  display: grid;
  grid-template-columns: var(--pct-col) var(--val-col);
  grid-template-areas:
    ".   value"
    "pct amt";
  justify-items: start;
  column-gap: var(--col-gap);
  row-gap: 2px;
  padding-right: var(--tile-inset);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.category-value { grid-area: value; font-size: 0.9rem; font-weight: 500; }
.category-change-pct { grid-area: pct; }
.category-change-amt { grid-area: amt; }
.category-change-pct,
.category-change-amt { color: var(--muted); font-size: 0.72rem; white-space: nowrap; }
.category-change-pct.up,
.category-change-amt.up { color: var(--up); }
.category-change-pct.down,
.category-change-amt.down { color: var(--down); }

.table-scroll { overflow-x: auto; }

.holding-row {
  display: grid;
  gap: 7px;
  margin: 8px 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper-raised);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.holding-row:hover { border-color: var(--pine); }
.holding-row:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.holding-primary {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) var(--val-col);
  align-items: baseline;
  gap: 14px;
}

.holding-ticker {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}

.holding-name {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.holding-value {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  white-space: nowrap;
}

.holding-performance,
.holding-high {
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.holding-detail {
  display: grid;
  gap: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  cursor: default;
}

.holding-detail-loading { color: var(--muted); font-size: 0.78rem; }
.range-chart { display: block; width: 100%; height: 62px; overflow: visible; }
.range-points { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.range-points > span { font: 0.76rem var(--font-mono); font-variant-numeric: tabular-nums; }
.range-points small { color: var(--muted); font-size: inherit; }
.range-points > .range-divider { color: var(--line); }

.technical-detail {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px 14px;
}

.technical-metric { display: grid; gap: 3px; min-width: 0; }
.technical-metric span { color: var(--muted); font-size: 0.7rem; }
.technical-metric strong {
  overflow: hidden;
  font: 0.78rem var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
}

/* Price (or the 5-year-high date) on the left; % and $ figures in the
   shared columns. */
.holding-row:not(.is-condensed) > .holding-performance,
.holding-row:not(.is-condensed) > .holding-high {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--pct-col) var(--val-col);
  column-gap: var(--col-gap);
}
.holding-performance { color: var(--ink-soft); }
.holding-performance.up { color: var(--up); }
.holding-performance.down { color: var(--down); }

.holding-high {
  color: var(--muted);
  font-size: 0.75rem;
}
.holding-high-date { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.high-marker { width: 9px; height: 7px; fill: currentColor; align-self: center; }

/* ---------- statements ---------- */
/* Each statement section is a tile, like the holding tiles on Portfolios. */
#statementSections { margin-top: 30px; }
.statement-section {
  margin: 0 0 18px;
  padding: 16px 20px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-raised);
  box-shadow: 0 1px 2px rgba(33, 38, 31, 0.06);
}

.statement-section-head,
.statement-account-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.statement-section-head {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

/* The heading area toggles the whole tile (▼ open, ▲ collapsed). */
.statement-section-head { cursor: pointer; transition: border-color 0.3s ease, padding 0.3s ease; }
.statement-section-head:focus-visible { outline: 2px solid var(--pine); outline-offset: 4px; border-radius: 2px; }
.statement-section-caret {
  width: 10px;
  height: 7px;
  margin: 0 0 3px 10px;
  fill: var(--muted);
  vertical-align: middle;
  transition: transform 0.3s ease, fill 0.15s ease;
}
.statement-section-head:hover .statement-section-caret { fill: var(--ink); }
.statement-section.is-collapsed .statement-section-caret { transform: rotate(180deg); }
.statement-section.is-collapsed .statement-section-head { border-bottom-color: transparent; padding-bottom: 4px; }
.statement-section-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.3s ease;
}
.statement-section.is-collapsed .statement-section-body { grid-template-rows: 0fr; }
.statement-section-inner { min-height: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .statement-section-head,
  .statement-section-caret,
  .statement-section-body { transition: none; }
}

.statement-section h2 {
  white-space: nowrap;
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
}
/* Color-coded to the section's Asset Allocation color (--section-color). */
.statement-section { border-left: 4px solid var(--section-color, var(--line)); }
.statement-share { display: block; margin-top: 2px; color: var(--muted); font-size: 0.74rem; }

.statement-total,
.statement-account-head strong {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.statement-account {
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--line);
}
.statement-account:last-child { border-bottom: 0; }

.statement-account-head h3 {
  margin: 0 0 3px;
  font-size: 0.96rem;
  font-weight: 600;
}

.statement-account-head span,
.statement-account-note,
.statement-empty {
  color: var(--muted);
  font-size: 0.82rem;
}

.statement-account-note,
.statement-empty { margin: 12px 0 10px; }

/* Equal-width columns so Shares / Price / Value line up across every table;
   first and last columns sit flush with the tile's edges. */
.statement-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.86rem;
}
.statement-table td {
  padding: 9px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.statement-table td:first-child { padding-left: 0; text-align: left; }
.statement-table td:last-child { padding-right: 0; }
.statement-table tr:last-child td { border-bottom: none; }

/* Retirement: one block per person, with Standard/Roth groups inside. */
.statement-owner + .statement-owner { border-top: 1px solid var(--line); }
.statement-owner-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
}
.statement-owner-head h3 { margin: 0; font-size: 0.96rem; font-weight: 600; }
.statement-owner-head span { font-family: var(--font-mono); font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.statement-owner .statement-subsection + .statement-subsection { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }

/* Groups inside Taxable Equities (Metal Funds, ...) and Retirement. */
.statement-subsection { padding: 12px 0; }
.statement-subsection + .statement-subsection { border-top: 1px solid var(--line); }
.statement-subhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  color: var(--ink-soft);
}
.statement-subhead h3 {
  margin: 0;
  font: 600 0.72rem var(--font-sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.statement-subhead > span {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.statement-group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 0 -4px;
  padding: 2px 4px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.statement-group-toggle:hover { color: var(--ink); }
.statement-group-toggle:focus-visible { outline: 2px solid var(--pine); outline-offset: 1px; }
/* Up while collapsed, flips down when open (same as the Portfolios toggles). */
.statement-group-caret { width: 9px; height: 7px; fill: currentColor; transform: rotate(180deg); transition: transform 0.3s ease; }
.statement-subsection.is-open .statement-group-caret { transform: none; }
.statement-group-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.statement-subsection.is-open .statement-group-body { grid-template-rows: 1fr; }
.statement-group-inner { min-height: 0; overflow: hidden; }
.statement-subsection.is-open .statement-group-inner { padding-top: 4px; }
@media (prefers-reduced-motion: reduce) {
  .statement-group-caret,
  .statement-group-body { transition: none; }
}

/* ---------- materials tables ---------- */
.materials-table-wrap {
  margin-bottom: 40px;
}

.materials-table-wrap h2 {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 4px;
}

.materials-subtitle {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0 0 14px;
}

table.materials {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

table.materials th {
  text-align: left;
  font-weight: 500;
  color: var(--muted);
  font-size: 0.78rem;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}

table.materials td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

table.materials td:first-child { font-family: var(--font-sans); }

table.materials tr:last-child td { border-bottom: none; }

/* Learn > Semiconductor Development: a players table, numbered cards per
   country, a who-does-what chain, then who's "winning". */
.learn-article { max-width: 760px; }
.learn-players td { vertical-align: top; line-height: 1.4; }
.learn-players td:first-child { font-weight: 600; min-width: 8.5rem; }
table.materials.learn-players td { font-family: var(--font-sans); }
.learn-players td:last-child { color: var(--ink-soft); }
.learn-card,
.learn-rank {
  margin: 0 0 16px;
  padding: 16px 18px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-raised);
}
.learn-card h3,
.learn-rank h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 600 1.05rem/1.3 var(--font-serif); color: var(--ink); }
.learn-number {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--pine-soft);
  color: var(--pine);
  font: 600 0.82rem var(--font-mono);
}
.learn-card p,
.learn-rank p { margin: 0 0 9px; font-size: 0.92rem; line-height: 1.55; color: var(--ink-soft); }
.learn-card strong { color: var(--ink); }
/* A short standout line. */
.learn-card .learn-callout,
.learn-rank .learn-callout { padding-left: 12px; border-left: 2px solid var(--pine); color: var(--ink); font-weight: 500; }
/* Something said or asked, set apart. */
.learn-card .learn-quote { font: italic 600 1rem var(--font-serif); color: var(--ink); text-align: center; margin: 12px 0; }
.learn-list { margin: 2px 0 12px; padding-left: 20px; font-size: 0.9rem; line-height: 1.6; color: var(--ink-soft); }
.learn-list-columns { columns: 2; column-gap: 28px; }
.learn-roles { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; padding: 0; }
.learn-roles li { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-size: 0.86rem; color: var(--ink-soft); }
/* Nvidia -> TSMC -> ASML: each step under the last, joined by an arrow. */
.learn-chain { list-style: none; margin: 6px 0 14px; padding: 0; display: grid; gap: 22px; max-width: 360px; }
.learn-chain li { position: relative; display: grid; gap: 2px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.learn-chain li + li::before { content: '↓'; position: absolute; top: -21px; left: 18px; color: var(--muted); font-size: 0.9rem; }
.learn-chain-name { font: 600 0.92rem var(--font-sans); color: var(--ink); }
.learn-chain-role { font-size: 0.8rem; color: var(--muted); }
.learn-winners { margin-top: 28px; }
.learn-rank-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.learn-rank { margin: 0; }
.learn-rank-grid .learn-rank:first-child { grid-row: span 2; }
.learn-medal { font-size: 1.2rem; }
.learn-rank-lead { font-weight: 600; color: var(--ink) !important; }
@media (max-width: 560px) {
  .learn-card,
  .learn-rank { padding: 14px 14px 10px; }
  .learn-list-columns { columns: 1; }
  /* Phones: each country stacked (name, strength, companies) instead of columns. */
  .learn-players thead { display: none; }
  .learn-players,
  .learn-players tbody,
  .learn-players tr,
  .learn-players td { display: block; width: auto; }
  .learn-players tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  table.materials.learn-players td { padding: 2px 0; border: 0; white-space: normal; }
  .learn-players td:first-child { font-size: 0.95rem; }
  .learn-players td:nth-child(2) { color: var(--ink); }
  .learn-players td:last-child { font-size: 0.84rem; }
  .learn-rank-grid { grid-template-columns: 1fr; }
  .learn-rank-grid .learn-rank:first-child { grid-row: auto; }
}

/* Major Tech Companies: rank, ticker, company, then the numbers right-aligned. */
.mega-table th:nth-child(n+4),
.mega-table td:nth-child(n+4) { text-align: right; }
table.materials.mega-table td { padding: 9px 10px; }
table.materials.mega-table th { padding: 8px 10px; }
.mega-table .mega-rank { width: 1%; padding-left: 0; color: var(--muted); text-align: right; }
table.materials.mega-table td.mega-rank { font-family: var(--font-mono); }
.mega-table .mega-ticker { font: 600 0.86rem var(--font-mono); white-space: nowrap; }
/* The ticker stays on screen when the table scrolls sideways (phones). */
.mega-table th:nth-child(2),
.mega-table td.mega-ticker { position: sticky; left: 0; z-index: 1; background: var(--paper); }
.mega-table .mega-ticker a { color: var(--pine); text-decoration: none; }
.mega-table .mega-ticker a:hover { text-decoration: underline; }
.mega-table .mega-company { font-family: var(--font-sans); color: var(--ink-soft); }
.mega-table .is-nm { color: var(--muted); }
/* Sortable headings: the whole heading is a button; an arrow marks the sort. */
.mega-sort { display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; }
.mega-sort:hover { color: var(--ink); }
.mega-sort:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.mega-sort-arrow { font-size: 0.6rem; color: var(--pine); }
.mega-table th[aria-sort="ascending"] .mega-sort,
.mega-table th[aria-sort="descending"] .mega-sort { color: var(--ink); }
.mega-table td.mega-plain { color: var(--ink-soft); }
.mega-table th .large-icon { width: 15px; height: 13px; vertical-align: -2px; }
.mega-table td.is-up { color: var(--up); }
.mega-table td.is-down { color: var(--down); }
@media (max-width: 560px) {
  table.materials.mega-table { font-size: 0.8rem; }
  table.materials.mega-table th,
  table.materials.mega-table td { padding-left: 6px; padding-right: 6px; }
  .mega-table .mega-ticker { font-size: 0.76rem; }
}

/* ---------- empty state ---------- */
.empty-note {
  font-size: 0.9rem;
  color: var(--muted);
  padding-top: 30px;
}

/* ---------- theme awareness ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #141712; --paper-raised: #22241F; --ink: #EDEAE0; --ink-soft: #B9B4A2;
    --up: #5CCB8A; --down: #F2786B;
    --line: #3B3E33; --pine: #7FAE9A; --pine-soft: #263029; --brick: #D08A7C;
    --brick-soft: #332320; --muted: #8B8875;
    --alloc-bar: #3987e5; --alloc-other: #6E6B5E;
    --alloc-1: #5B8CC6; --alloc-2: #D2714F; --alloc-3: #3FA383; --alloc-4: #B48A29; --alloc-5: #B676A8; --alloc-6: #A9D4F0; --alloc-7: #F7C9D6; --alloc-8: #8A5A3C;
    --metric-1: #5B8CC6; --metric-2: #D2714F; --metric-3: #3C9E6E;
  }
}
:root[data-theme="dark"] {
  --paper: #141712; --paper-raised: #22241F; --ink: #EDEAE0; --ink-soft: #B9B4A2;
  --up: #5CCB8A; --down: #F2786B;
  --line: #3B3E33; --pine: #7FAE9A; --pine-soft: #263029; --brick: #D08A7C;
  --brick-soft: #332320; --muted: #8B8875;
  --alloc-bar: #3987e5; --alloc-other: #6E6B5E;
  --alloc-1: #5B8CC6; --alloc-2: #D2714F; --alloc-3: #3FA383; --alloc-4: #B48A29; --alloc-5: #B676A8; --alloc-6: #A9D4F0; --alloc-7: #F7C9D6; --alloc-8: #8A5A3C;
    --metric-1: #5B8CC6; --metric-2: #D2714F; --metric-3: #3C9E6E;
}

/* Midnight: an extra theme (chosen on Manage > Settings). Deep navy with a
   sky-blue accent in place of pine; gains/losses and chart colors match
   Dark. Light and Dark are unchanged. */
:root[data-theme="midnight"] {
  color-scheme: dark;
  --paper: #0E1420; --paper-raised: #172033; --ink: #E6EBF5; --ink-soft: #AEB8CC;
  --up: #5CCB8A; --down: #F2786B;
  --line: #2A3650; --pine: #7AA7E0; --pine-soft: #1C2A44; --brick: #E08A8A;
  --brick-soft: #3A2230; --muted: #8391AB;
  --alloc-bar: #7AA7E0; --alloc-other: #5B6780;
  --alloc-1: #5B8CC6; --alloc-2: #D2714F; --alloc-3: #3FA383; --alloc-4: #B48A29; --alloc-5: #B676A8; --alloc-6: #A9D4F0; --alloc-7: #F7C9D6; --alloc-8: #8A5A3C;
    --metric-1: #5B8CC6; --metric-2: #D2714F; --metric-3: #3C9E6E;
}

/* ---------- small screens ---------- */
@media (max-width: 560px) {
  .page { padding: 22px 16px 60px; }
  .site-nav { padding: 0 16px; }
  /* Home: two market cards per row, scaled down to fit. */
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 30px; }
  .timeframe-row { justify-content: center; }
  /* Phones: top bar shows Explore, Analyze, Monitor and Build only (Assess and
     Learn are in the ☰ menu, as Alerts and Manage always are), and no search button. */
  .site-nav-links .nav-wide { display: none; }
  .site-menu .site-search-btn { display: none; }
  /* Spread the four links and the ☰ button evenly across the bar: the list
     "dissolves" so its links and the menu share one row. */
  .site-nav-row { justify-content: space-between; gap: 12px; padding: 0 6px; }
  .site-nav-links { display: contents; }
  .site-nav-links a { font-size: 0.98rem; }
  .site-nav-row .site-menu { margin-left: 0; }
  :root[data-nav="menu"] .site-nav-row .site-menu { margin-left: auto; }
  .metric-card-filler { display: block; }
  .metric-card { padding: 11px 12px; }
  .metric-label { font-size: 0.72rem; margin-bottom: 4px; }
  .metric-value-row { flex-wrap: wrap; gap: 2px 6px; }
  .metric-value { font-size: 1.08rem; }
  .metric-delta { font-size: 0.68rem; padding: 1px 5px; }
  .metric-asof { font-size: 0.66rem; margin-bottom: 6px; }
  .metric-spark,
  .metric-skeleton { height: 28px; }
  .metric-collapse { width: 32px; height: 32px; top: 6px; right: 8px; font-size: 1.3rem; }
  .metric-stat { font-size: 0.82rem; gap: 5px; }
  .portfolio-headline { display: grid; min-width: 0; }
  .summary { gap: 10px 14px; }
  .summary-value { font-size: 1.12rem; }
  .rebound-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .liquidity-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .liquidity-tile { padding: 9px 10px; }
  .statement-section { padding: 14px 14px 6px; }
  .statement-table { font-size: 0.8rem; }
  .statement-table td { padding-left: 6px; padding-right: 6px; }
  .holding-name { display: none; }
  /* Keep the value in the right-hand column (under the category totals)
     instead of sliding into the hidden name's spot next to the ticker. */
  .holding-primary .holding-value { grid-column: 3; }
  #categories { --pct-col: 3.9rem; --val-col: 5.7rem; --col-gap: 2.2rem; --tile-inset: 11px; }
  .holding-performance,
  .holding-high { gap: 12px; font-size: 0.74rem; }
  .technical-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-head { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; }
  .category-change-pct,
  .category-change-amt { font-size: 0.66rem; }
  .allocation-row { grid-template-columns: minmax(6rem, 8.5rem) minmax(0, 1fr) 3.2rem; font-size: 0.74rem; }
  .allocation-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px; }
  .allocation-bar { display: none; }
  .allocation-donut { display: block; }
  .allocation-legend { margin: 0; flex-direction: column; gap: 6px; }
  .allocation-value { display: none; }
  .holding-row { padding: 11px 10px; }
  .holding-row.is-condensed { padding: 8px 10px; grid-template-columns: 3.3rem minmax(0, 1fr) var(--pct-col) calc(var(--col-gap) - 20px) var(--val-col); }
  .holding-primary { gap: 8px; }
  .holding-value { font-size: 0.78rem; }
}

/* Very narrow phones (e.g. 320px): shrink category names so long ones like
   "Aerospace & Defense" stay clear of the value column. */
@media (max-width: 370px) {
  .category-name { font-size: 1rem; }
  .category-toggle { gap: 6px; }
}

/* Materials: space between the title box and the first topic's tables. */
.materials-headline { margin-bottom: 26px; }

/* ---------- materials: treasury bond funds ---------- */
.bond-moves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bond-move {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-raised);
}
.bond-move-cause { color: var(--muted); font-size: 0.78rem; }
.bond-move-effect { font-weight: 600; font-size: 0.98rem; }
.bond-move-effect.up { color: var(--up); }
.bond-move-effect.down { color: var(--down); }
.bond-move-why { color: var(--ink-soft); font-size: 0.8rem; }
.bond-takeaway { margin: 14px 0 0; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.5; }
.bond-takeaway strong { color: var(--ink); }

.bond-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.bond-card {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-raised);
  box-shadow: 0 1px 2px rgba(33, 38, 31, 0.06);
}
.bond-card-head { display: grid; gap: 2px; }
.bond-card-head h3 { margin: 0; font: 600 1.15rem var(--font-mono); letter-spacing: 0.02em; }
.bond-think { color: var(--ink-soft); font-size: 0.82rem; font-style: italic; }
.bond-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 0; }
.bond-stats div { display: grid; gap: 1px; }
.bond-stats dt { color: var(--muted); font-size: 0.7rem; }
.bond-stats dd { margin: 0; font: 500 0.95rem var(--font-mono); font-variant-numeric: tabular-nums; }
/* Rate-sensitivity meter: 5 steps, filled in one color (an ordered scale). */
.bond-meter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.78rem; }
.bond-meter-label { color: var(--muted); font-size: 0.7rem; }
.bond-meter-steps { display: inline-flex; gap: 3px; }
.bond-meter-step { width: 18px; height: 7px; border-radius: 2px; background: var(--line); }
.bond-meter-step.is-on { background: var(--pine); }
.bond-meter-value { font-weight: 600; }
.bond-points { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 0.84rem; color: var(--ink-soft); line-height: 1.4; }

@media (max-width: 560px) {
  .bond-moves { grid-template-columns: 1fr; gap: 8px; }
  .bond-grid { grid-template-columns: 1fr; }
}

/* ---------- site menu (three-line button, far right of the top bar) ---------- */
.site-menu { position: relative; margin-left: auto; display: flex; align-items: center; gap: 4px; }
/* Search: a magnifying glass just left of the menu button. */
.site-search-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--nav-ink-soft);
  cursor: pointer;
}
.site-search-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.site-search-btn:hover,
.site-search-btn[aria-expanded="true"] { color: var(--nav-ink); }
.site-search-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--nav-ink) 12%, transparent); }
.site-search-btn:focus-visible { outline: 2px solid var(--pine); outline-offset: 1px; }
/* The search bar drops down under the top bar, at its right edge. */
.site-nav-row { position: relative; }
.site-search {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 21;
  width: min(440px, 100%);
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-raised);
  box-shadow: 0 12px 28px rgba(33, 38, 31, 0.18);
}
.site-search[hidden] { display: none; }
.site-search-form { display: flex; align-items: center; gap: 8px; }
.site-search-input {
  flex: 1;
  min-width: 0;
  height: 38px;
  box-sizing: border-box;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: 400 0.95rem var(--font-sans);
}
.site-search-input::placeholder { color: var(--muted); }
.site-search-input:focus-visible { outline: 2px solid var(--pine); outline-offset: 1px; }
.site-search-go {
  flex: none;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--pine);
  border-radius: 6px;
  background: var(--pine);
  color: var(--paper-raised);
  font: 600 0.88rem var(--font-sans);
  cursor: pointer;
}
.site-search-go:hover { filter: brightness(1.08); }
.site-search-go:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.site-search-results { list-style: none; margin: 8px 0 0; padding: 0; }
.site-search-results[hidden] { display: none; }
.site-search-results li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  padding: 8px 8px;
  border-radius: 5px;
  cursor: pointer;
}
.site-search-results li:hover,
.site-search-results li[aria-selected="true"] { background: var(--pine-soft); }
.site-search-ticker { font: 600 0.88rem var(--font-mono); color: var(--ink); }
.site-search-name { overflow: hidden; font-size: 0.84rem; color: var(--ink-soft); white-space: nowrap; text-overflow: ellipsis; }
.site-search-type { font-size: 0.72rem; color: var(--muted); }
.site-search-note { margin: 8px 4px 2px; font-size: 0.84rem; color: var(--ink-soft); }
.site-search-note[hidden] { display: none; }
.site-menu-btn {
  display: grid;
  align-content: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  margin-right: -8px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  cursor: pointer;
}
.site-menu-btn span {
  display: block;
  height: 2px;
  border-radius: 1px;
  background: var(--nav-ink-soft);
  transition: transform 0.2s ease, opacity 0.2s ease, background 0.15s ease;
}
.site-menu-btn:hover span { background: var(--nav-ink); }
.site-menu-btn:focus-visible { outline: 2px solid var(--pine); outline-offset: 1px; }
/* Turns into an X while open. */
.site-menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.site-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: -8px;
  z-index: 20;
  width: 220px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-raised);
  box-shadow: 0 12px 28px rgba(33, 38, 31, 0.18);
}
/* Slide + fade in/out (nav.js toggles .is-open). */
.site-menu-panel {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.site-menu-panel.is-open { opacity: 1; transform: none; }
.site-menu-backdrop { display: none; }
.site-menu-links { list-style: none; margin: 0; padding: 0; }
.site-menu-links a {
  display: block;
  padding: 9px 10px;
  border-radius: 5px;
  color: var(--ink);
  font-size: 0.92rem;
  text-decoration: none;
}
/* Hover colors only with a mouse or trackpad: on touch screens a tapped
   row would otherwise stay "hovered" (green) after the tap. */
@media (hover: hover) {
  .site-menu-links a:hover { background: var(--pine-soft); }
}
@media (prefers-reduced-motion: reduce) {
  .site-menu-btn span { transition: none; }
  .site-menu-panel,
  .site-menu-backdrop { transition: none; }
}

/* ---------- sign-in page ---------- */
.login-page { display: grid; place-items: start center; padding-top: 12vh; }
.login-card {
  display: grid;
  gap: 14px;
  width: min(360px, 100%);
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-raised);
  box-shadow: 0 12px 28px rgba(33, 38, 31, 0.14);
}
.login-card h1 { margin: 0; font: 600 1.5rem var(--font-serif); }
.login-card p { margin: 0; color: var(--ink-soft); font-size: 0.86rem; line-height: 1.45; }
.login-card label { display: grid; gap: 6px; color: var(--muted); font-size: 0.78rem; }
.login-card input[type="password"] {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: 1rem var(--font-sans);
}
.login-card input[type="password"]:focus-visible { outline: 2px solid var(--pine); outline-offset: 1px; }
.login-card button {
  padding: 10px 12px;
  border: 0;
  border-radius: 6px;
  background: var(--pine);
  color: var(--paper-raised);
  font: 600 0.95rem var(--font-sans);
  cursor: pointer;
}
.login-card .login-error { color: var(--down); }
.login-back { color: var(--muted); font-size: 0.8rem; text-align: center; }

/* ---------- manage: access, active profile, settings ---------- */
.title-card { cursor: default; }
/* Title box spans the same width as the cards below so their edges line up. */
.manage-headline { display: grid; min-width: 0; max-width: 560px; margin-bottom: 24px; }
.manage-card {
  max-width: 560px;
  margin: 0 0 16px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-raised);
  box-shadow: 0 1px 2px rgba(33, 38, 31, 0.06);
}
.manage-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.manage-card h2 { margin: 0; font: 600 1.1rem var(--font-serif); }
.manage-status { color: var(--muted); font-size: 0.82rem; font-weight: 600; }
.manage-status.is-on { color: var(--up); }
.manage-note { margin: 8px 0 12px; color: var(--ink-soft); font-size: 0.86rem; line-height: 1.45; }
.manage-button {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 6px;
  background: var(--pine);
  color: var(--paper-raised);
  font: 600 0.88rem var(--font-sans);
  text-decoration: none;
}
.manage-button[hidden] { display: none; }
.manage-choices { display: flex; flex-wrap: wrap; gap: 8px; }
/* Choices straight under a heading (no description between). */
.manage-card-head + .manage-choices { margin-top: 14px; }
.manage-choices button {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: 500 0.88rem var(--font-sans);
  cursor: pointer;
}
.manage-choices button:hover { border-color: var(--muted); }
.manage-choices button.active { border-color: var(--pine); background: var(--pine); color: var(--paper-raised); }
.manage-choices button:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }

/* Manage > Accounting: read-only account data. */
.acct-picker { position: relative; margin-top: 12px; }
.acct-picker select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 42px;
  padding: 0 36px 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: 500 0.95rem var(--font-sans);
  cursor: pointer;
}
.acct-picker select:hover { border-color: var(--muted); }
.acct-picker select:focus-visible { outline: 2px solid var(--pine); outline-offset: 1px; }
.acct-picker::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 14px;
  width: 10px;
  height: 7px;
  margin-top: -3px;
  background: var(--muted);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  pointer-events: none;
}
#acctTitle label { cursor: inherit; }
.acct-card summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.acct-card summary::-webkit-details-marker { display: none; }
.acct-card summary h2::after { content: ' ▾'; font-size: 0.8rem; color: var(--muted); }
.acct-card:not([open]) summary h2::after { content: ' ▸'; }
.acct-meta { font: 400 0.84rem var(--font-mono); color: var(--ink-soft); white-space: nowrap; }
.acct-body { margin-top: 10px; }
.acct-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 12px; font-size: 0.88rem; }
.acct-facts dt { color: var(--muted); }
.acct-facts dd { margin: 0; color: var(--ink); }
.profile-settings-form { display: grid; gap: 12px; }
.profile-settings-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.profile-settings-form > .manage-button { justify-self: start; cursor: pointer; }
.profile-settings-message { margin: 0; color: var(--ink-soft); font-size: 0.84rem; }
.cash-shortfall-warning { padding: 0; background: transparent !important; color: var(--down) !important; font-weight: 600; }
.acct-table { width: 100%; border-collapse: collapse; font: 400 0.84rem var(--font-mono); }
.acct-table th,
.acct-table td { padding: 7px 0 7px 12px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.acct-table th:first-child,
.acct-table td:first-child { padding-left: 0; text-align: left; }
.acct-table thead th { font: 500 0.72rem var(--font-sans); color: var(--muted); }
.acct-table tbody th { font-weight: 600; color: var(--ink); }
.acct-table td { color: var(--ink-soft); }
.acct-table .acct-name-col { text-align: left; font: 400 0.8rem var(--font-sans); color: var(--muted); }
.acct-summary { max-width: 420px; }
.acct-summary tbody th { font: 400 0.86rem var(--font-sans); color: var(--ink-soft); }
.acct-summary td { color: var(--ink); }
.acct-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; max-width: 556px; margin: 26px 2px 10px; }
.acct-group-head h3 { margin: 0; font: 600 1.15rem var(--font-serif); color: var(--ink); }
.acct-group-actions { display: flex; align-items: center; gap: 12px; }
.acct-cash-dropdown { max-width: 556px; margin: 0 2px 10px; color: var(--ink-soft); font-size: 0.84rem; }
.acct-cash-dropdown > summary { display: flex; align-items: center; gap: 7px; width: fit-content; cursor: pointer; list-style: none; }
.acct-cash-dropdown > summary::-webkit-details-marker { display: none; }
.acct-cash-dropdown > summary::before { content: ''; width: 0; height: 0; border: 4px solid transparent; border-top-color: var(--muted); transform: translateY(2px); }
.acct-cash-dropdown[open] > summary::before { border-top-color: transparent; border-bottom-color: var(--muted); transform: translateY(-2px); }
.acct-cash-dropdown > summary strong { color: var(--ink); font: 500 0.84rem var(--font-mono); }
.acct-cash-breakdown { display: grid; gap: 5px; max-width: 420px; padding: 8px 0 2px 12px; }
.acct-cash-breakdown > div { display: flex; justify-content: space-between; gap: 16px; }
.acct-cash-breakdown strong { color: var(--ink); font: 400 0.82rem var(--font-mono); }
.acct-add-button { padding: 3px 0; border: 0; background: transparent; color: var(--pine); font: 500 0.8rem var(--font-sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
.acct-add-button:hover { color: var(--ink); }
.acct-account-card summary { align-items: center; }
.acct-account-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acct-account-card summary h2 { font: 600 1rem var(--font-mono); }
.acct-account-sub { font-size: 0.78rem; color: var(--muted); }
/* Update Record form. */
.record-card { border-color: color-mix(in srgb, var(--pine) 45%, var(--line)); }
.record-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
.record-field { display: grid; gap: 5px; font-size: 0.78rem; color: var(--ink-soft); }
.record-field.is-wide,
.record-fields .is-wide { grid-column: 1 / -1; }
.record-field select,
.record-field input {
  width: 100%;
  box-sizing: border-box;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: 400 0.9rem var(--font-sans);
}
.record-field select:focus-visible,
.record-field input:focus-visible { outline: 2px solid var(--pine); outline-offset: 1px; }
.record-currency-input { display: flex; align-items: center; width: 100%; min-width: 0; height: 38px; box-sizing: border-box; padding-left: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--muted); }
.record-currency-input > span { flex: 0 0 auto; color: var(--muted); font-size: 0.85rem; }
.record-field .record-currency-input input { flex: 1 1 auto; width: 0; min-width: 0; height: 100%; padding: 0 10px 0 6px; border: 0; background: transparent; color: var(--ink); }
.purchase-editor { display: grid; gap: 10px; }
.purchase-row { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
.purchase-row-head { display: flex; align-items: center; justify-content: space-between; color: var(--ink); font-size: 0.8rem; }
.purchase-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.number-stepper { display: flex; align-items: stretch; width: 100%; min-width: 0; height: 38px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--paper); }
.number-stepper button { flex: 0 0 32px; padding: 0; border: 0; background: transparent; color: var(--muted); font: 400 1.35rem var(--font-sans); line-height: 1; cursor: pointer; }
.number-stepper button:hover { color: var(--pine); background: color-mix(in srgb, var(--pine) 8%, transparent); }
.number-stepper-currency { flex: 0 0 auto; align-self: center; color: var(--muted); font-size: 0.82rem; }
.record-field .number-stepper input,
.lot-cell .number-stepper input { flex: 1 1 auto; width: 0; min-width: 0; height: auto; padding: 0 4px; border: 0; border-radius: 0; background: transparent; text-align: center; }
.number-stepper input::-webkit-inner-spin-button,
.number-stepper input::-webkit-outer-spin-button { appearance: none; -webkit-appearance: none; margin: 0; }
.number-stepper:focus-within { outline: 2px solid var(--pine); outline-offset: 1px; }
.purchase-date-control,
.record-date-control { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; box-sizing: border-box; }
.record-date-label { flex: 0 0 auto; color: var(--muted); font-size: 0.78rem; }
.purchase-total-value,
.record-transaction-total { margin: 0; color: var(--ink-soft); font: 400 0.8rem var(--font-mono); }
.purchase-total-value { padding-left: 42px; }
.record-transaction-total { margin-top: -5px; }
.record-date-add { padding: 5px 0; border: 0; background: transparent; color: var(--pine); font: inherit; text-decoration: underline; cursor: pointer; }
.record-date-clear { flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--muted); font-size: 1.15rem; line-height: 1; cursor: pointer; }
.purchase-values input.is-estimated { background: var(--paper); color: #c49a00; }
.purchase-remove { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--muted); font-size: 1.1rem; cursor: pointer; }
/* Dropdowns: the same look as Profile Selection (the site's triangle, not the browser's arrow). */
.record-select { position: relative; display: block; min-width: 0; }
.record-field .record-select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  cursor: pointer;
}
.record-field .record-select select:hover { border-color: var(--muted); }
.record-select::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 13px;
  width: 10px;
  height: 7px;
  margin-top: -3px;
  background: var(--muted);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  pointer-events: none;
}
.record-check { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--ink-soft); }
.record-check input { accent-color: var(--pine); }
.record-message { margin: 12px 0 0; padding: 9px 12px; border-radius: 6px; font-size: 0.84rem; line-height: 1.45; }
.record-message.is-preview,
.record-message.is-info { background: color-mix(in srgb, var(--pine) 12%, transparent); color: var(--ink); }
.record-message.is-success { background: color-mix(in srgb, var(--up) 15%, transparent); color: var(--ink); }
.record-message.is-error { background: color-mix(in srgb, var(--down) 15%, transparent); color: var(--ink); }
.record-available-cash { margin: 8px 0 -4px; color: #78aef8; font-size: 0.74rem; }
.record-current-status { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--muted) 5%, var(--paper)); font-size: 0.78rem; }
.record-current-status > strong { color: var(--ink); font-weight: 600; }
.record-current-status > div { display: grid; grid-template-columns: 1fr auto; gap: 5px 14px; }
.record-current-status span { color: var(--muted); }
.record-current-status b { color: var(--ink); font: 400 0.78rem var(--font-mono); text-align: right; }
.record-actions { display: flex; gap: 10px; margin-top: 14px; }
.record-actions .manage-button { border: 1px solid var(--pine); cursor: pointer; }
.record-actions { align-items: center; flex-wrap: wrap; }
.record-actions .manage-button[disabled] { opacity: 0.45; cursor: not-allowed; }
.record-preview { background: transparent; color: var(--ink); border: 1px solid var(--line); }
/* Dates: scrollable year, month and day choices. */
.date-input { display: flex; align-items: center; gap: 6px; min-width: 0; }
.date-select-wrap { position: relative; display: inline-flex; min-width: 0; }
.record-date-control > .date-input,
.purchase-date-control > .date-input { flex: 1 1 0; width: 0; }
.record-field .date-select-wrap select,
.record-date-control .date-select-wrap select,
.lot-row .date-select-wrap select,
.purchase-date-control .date-select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 0;
  height: 38px;
  box-sizing: border-box;
  padding: 0 36px 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: 400 0.84rem var(--font-mono);
}
.date-input.is-auto .date-select-wrap select { color: #c49a00; }
.date-select-wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 12px;
  width: 10px;
  height: 7px;
  margin-top: -3px;
  background: var(--muted);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  pointer-events: none;
}
.date-input .is-year { flex: 1.6; }
.date-input .is-month,
.date-input .is-day { flex: 1; }
.date-input select:focus-visible { outline: 2px solid var(--pine); outline-offset: 1px; }
/* Tax lot editor: one row per lot. */
.lot-editor { display: grid; gap: 8px; }
.lot-head,
.lot-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) 30px; gap: 8px; align-items: center; }
.lot-head { font-size: 0.72rem; color: var(--muted); }
.lot-input {
  width: 100%;
  height: 38px;
  box-sizing: border-box;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: 400 0.9rem var(--font-sans);
}
.lot-cell { display: grid; gap: 4px; min-width: 0; }
.lot-cell-label { display: none; font-size: 0.72rem; color: var(--muted); }
.lot-input:focus-visible { outline: 2px solid var(--pine); outline-offset: 1px; }
.lot-remove { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 1.2rem; cursor: pointer; }
.lot-remove:hover { color: var(--down); background: color-mix(in srgb, var(--down) 12%, transparent); }
.lot-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lot-add { padding: 7px 12px; border: 1px dashed var(--muted); border-radius: 6px; background: none; color: var(--ink); font: 500 0.82rem var(--font-sans); cursor: pointer; }
.lot-add:hover { border-color: var(--pine); color: var(--pine); }
.lot-total { font-size: 0.8rem; color: var(--ink-soft); }
.lot-total.is-over { color: var(--down); font-weight: 600; }
.lot-editor .manage-note { margin: 0; }
/* Accounting: tax lots listed under their holding. */
.acct-table .acct-lot-row th,
.acct-table .acct-lot-row td { padding-top: 4px; padding-bottom: 4px; font-size: 0.76rem; color: var(--muted); }
.acct-table .acct-lot-row th { padding-left: 12px; font-weight: 400; }
.acct-table .acct-lot-row .acct-lot-gain.is-up { color: var(--up); }
.acct-table .acct-lot-row .acct-lot-gain.is-down { color: var(--down); }
.acct-table .acct-lot-row.is-untracked th { font-style: italic; }
.tax-lot-term { display: inline-flex; align-items: center; gap: 5px; }
.tax-lot-status-dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; }
.tax-lot-term.is-long .tax-lot-status-dot { background: var(--up); }
.tax-lot-term.is-short .tax-lot-status-dot { background: var(--down); }
/* Desktop accounting panels share the page content width, aligned with the
   right edge of the navigation row (including its menu button). */
@media (min-width: 561px) {
  .manage-topic[data-topic="Accounting"] > .manage-card,
  #acctView > .manage-card { max-width: none; }
  #acctView .acct-group-head { max-width: none; }
  #acctView .acct-cash-dropdown { max-width: none; }
}
@media (max-width: 560px) {
  .record-fields { grid-template-columns: 1fr; }
  .profile-settings-fields { grid-template-columns: 1fr; }
  .acct-group-head { align-items: flex-start; flex-direction: column; }
  .acct-group-actions { width: 100%; justify-content: space-between; flex-wrap: wrap; }
  .acct-cash-dropdown { margin-left: 2px; }
  /* Phones: each lot's date on its own line, shares, price and x below. */
  .lot-head { display: none; }
  .lot-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 30px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .lot-row .date-input { grid-column: 1 / -1; }
  .lot-cell-label { display: block; }
  .lot-row .lot-remove { align-self: end; margin-bottom: 4px; }
}
/* Accounting rows that open the asset editor (signed in). */
.acct-table tr.acct-editable { cursor: pointer; }
.acct-table tr.acct-editable:hover th,
.acct-table tr.acct-editable:hover td { background: color-mix(in srgb, var(--pine) 10%, transparent); }
.acct-table tr.acct-editable:focus-visible { outline: 2px solid var(--pine); outline-offset: -2px; }
/* Asset editor popup. */
.asset-dialog {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  box-sizing: border-box;
  padding: 18px 20px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-raised);
  color: var(--ink);
  overflow-y: auto;
}
.asset-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.asset-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.asset-dialog-head h2 { margin: 0; font: 600 1.2rem var(--font-serif); }
.asset-dialog-sub { margin: 3px 0 0; font-size: 0.8rem; line-height: 1.4; color: var(--muted); }
.asset-dialog-close { flex: none; width: 32px; height: 32px; margin: -4px -6px 0 0; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.asset-dialog-close:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
@media (max-width: 560px) {
  .asset-dialog { padding: 16px 14px 16px; }
}
/* Account Activity: transaction ledger, grouped by year and (when busy) month. */
.acct-activity-scroll { overflow-x: auto; }
.acct-activity { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 0.82rem; }
.acct-activity th, .acct-activity td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.acct-activity thead th { color: var(--muted); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.acct-activity td:nth-child(1), .acct-activity td:nth-child(3) { white-space: nowrap; }
.acct-activity td:nth-child(3) { font-family: var(--font-mono); }
.acct-activity-period th { padding: 13px 10px 5px; border-bottom: 0; color: var(--ink); font: 600 1rem var(--font-serif); }
.acct-activity-month th { padding-top: 8px; color: var(--muted); font: 600 0.82rem var(--font-sans); }
.acct-activity-tools { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.acct-missing-help { margin: -4px 0 12px; font-size: 0.76rem; }
.acct-activity-tools label { display: grid; gap: 4px; color: var(--muted); font-size: 0.74rem; }
.acct-activity-tools input, .acct-activity-tools select { min-width: 130px; height: 36px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); font: 400 0.84rem var(--font-sans); }
.acct-activity-tools input:focus-visible, .acct-activity-tools select:focus-visible { outline: 2px solid var(--pine); outline-offset: 1px; }
.acct-activity tr.is-missing-date { color: var(--muted); opacity: 0.62; }
.acct-activity tr[data-activity-date-edit],
.acct-activity tr[data-activity-purchase-date-edit],
.acct-activity tr[data-activity-sale-date-edit],
.acct-activity tr[data-baseline-date] { cursor: pointer; }
.acct-activity tr[data-activity-date-edit]:hover,
.acct-activity tr[data-activity-purchase-date-edit]:hover,
.acct-activity tr[data-activity-sale-date-edit]:hover,
.acct-activity tr[data-baseline-date]:hover { opacity: 1; background: color-mix(in srgb, var(--muted) 8%, transparent); }
.acct-missing-date { font-size: 0.72rem; font-style: italic; }
.acct-activity tr.is-preview td { background: color-mix(in srgb, #f0c64f 32%, var(--paper-raised)); color: var(--ink); font-weight: 600; }
.acct-activity tr.is-preview td:first-child { border-left: 3px solid #d39b19; }
.record-dialog { box-sizing: border-box; width: min(360px, calc(100vw - 32px)); padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-raised); color: var(--ink); }
.record-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.record-dialog h2 { margin: 0 0 4px; font: 600 1.2rem var(--font-serif); }
.record-code-dots { display: flex; justify-content: center; gap: 14px; margin: 16px 0; }
.record-code-dots span { width: 13px; height: 13px; border: 1px solid var(--muted); border-radius: 50%; }
.record-code-dots span.is-filled { background: var(--pine); border-color: var(--pine); }
.record-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.record-keypad button { min-height: 48px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font: 500 1.1rem var(--font-sans); cursor: pointer; }
.record-keypad button:hover, .record-keypad button:focus-visible { border-color: var(--pine); background: var(--pine-soft); }
.record-keypad button:last-child { grid-column: 2; }
.record-code-cancel { width: 100%; margin-top: 10px; }
.record-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.acct-footnote { margin: 10px 0 0; font-size: 0.78rem; line-height: 1.45; color: var(--muted); }
.acct-account { margin: 14px 0 6px; }
.acct-account:first-child { margin-top: 0; }
.acct-account-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; font-size: 0.9rem; }
.acct-account-head span { color: var(--muted); font-size: 0.8rem; }
.acct-account-head .acct-account-value { margin-left: auto; font: 500 0.88rem var(--font-mono); color: var(--ink); }
@media (max-width: 560px) {
  .acct-table .acct-name-col { display: none; }
  /* Phones: tighter columns, and names (e.g. "Primary Home") may wrap, so
     the four-column tables fit without scrolling sideways. */
  .acct-table { font-size: 0.78rem; }
  .acct-table th,
  .acct-table td { padding-left: 8px; }
  .acct-table tbody th:first-child { white-space: normal; }
}
@media (max-width: 380px) {
  .acct-table { font-size: 0.72rem; }
  .acct-table th,
  .acct-table td { padding-left: 6px; }
}

/* Settings > Mobile Search Bar: on phones, a search bar replaces the top
   bar's page links (the menu button stays), and Explore's and Market
   Explore's own search bars are hidden. Hidden everywhere else. */
.site-nav-search { display: none; }
@media (max-width: 560px) {
  :root[data-mobile-search="on"] .site-nav-links { display: none; }
  :root[data-mobile-search="on"] .site-nav-search { display: block; position: relative; flex: 1; min-width: 0; }
  :root[data-mobile-search="on"] #homeSearch,
  :root[data-mobile-search="on"] #exploreSearch { display: none; }
  :root[data-mobile-search="on"] .home-toolbar { margin-bottom: 0; }
  .site-nav-search .site-search-form { gap: 6px; }
  .site-nav-search .site-search-input { height: 36px; background: var(--paper-raised); }
  .site-nav-search .site-search-go { height: 36px; padding: 0 12px; }
  /* Suggestions (or a note) drop down under the bar. */
  .site-nav-search .site-search-results,
  .site-nav-search .site-search-note {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    z-index: 21;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper-raised);
    box-shadow: 0 12px 28px rgba(33, 38, 31, 0.18);
  }
  .site-nav-search .site-search-note { padding: 10px 12px; }
}

/* Settings > Navigation > Menu only: hide the top-bar page links. */
:root[data-nav="menu"] .site-nav-links { display: none; }

/* Menu icons (Bootstrap Icons) beside each page link; nav.js adds them. */
.site-menu-links a { display: flex; align-items: center; gap: 11px; }
.site-menu-icon { flex: none; width: 15px; height: 15px; fill: currentColor; color: var(--muted); }
/* Hover (mouse or trackpad only): the page name and its icon both turn green. */
@media (hover: hover) {
  .site-menu-links a:hover,
  .site-menu-links a:hover .site-menu-icon { color: var(--pine); }
  .site-menu-links a:hover .site-menu-caret { fill: var(--pine); }
  .site-menu-links .site-menu-sub a:hover { color: var(--pine); }
}
.site-menu-top,
.site-menu-logo { display: none; }
/* The WA logo (icons/logo.svg, no background) in the current text color:
   the SVG is used as a mask over a block of that color. */
.wa-logo {
  display: block;
  background: currentColor;
  -webkit-mask: url(/icons/logo.svg) center / contain no-repeat;
  mask: url(/icons/logo.svg) center / contain no-repeat;
}
/* Manage: the whole row opens its three sections beneath (the triangle at
   the right turns over while open). */
.site-menu-caret { flex: none; width: 10px; height: 7px; margin-left: auto; fill: var(--muted); transition: transform 0.2s ease; }
.site-menu-links a[aria-expanded="true"] .site-menu-caret { transform: rotate(180deg); }
.site-menu-sub { list-style: none; margin: 0 0 4px; padding: 0 0 0 26px; }
.site-menu-sub[hidden] { display: none; }
/* Clipped while it slides open or closed (nav.js animates its height). */
.site-menu-sub { overflow: hidden; }
.site-menu-links .site-menu-sub a { padding: 7px 10px; font-size: 0.86rem; color: var(--ink-soft); }

/* Phones: the menu is a drawer that slides in from the right edge, about
   four-fifths of the screen wide and the full height, over a dimmed page.
   The menu button stays on top of it (as an X) to close it. */
@media (max-width: 560px) {
  .site-menu-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    width: min(80vw, 360px);
    height: 100dvh;
    box-sizing: border-box;
    padding: 0 18px calc(20px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
    box-shadow: -18px 0 40px rgba(0, 0, 0, 0.32);
    opacity: 1;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.22, 0.8, 0.24, 1);
  }
  .site-menu-panel.is-open { transform: none; }
  /* Dark themes: the drawer is almost black (Midnight: almost-black navy). */
  :root[data-theme="dark"] .site-menu-panel { background: #0A0B09; }
  :root[data-theme="midnight"] .site-menu-panel { background: #080C15; }
  /* The drawer is a column: the strip at the top (level with the top bar,
     the X sits at its right), the links, then the logo at the bottom. */
  .site-menu-panel:not([hidden]) { display: flex; flex-direction: column; }
  .site-menu-top {
    display: block;
    flex: none;
    height: 56px;
    margin: 0 -18px 8px;
    padding-top: env(safe-area-inset-top, 0px);
    border-bottom: 1px solid var(--line);
  }
  .site-menu-logo {
    display: flex;
    justify-content: center;
    margin-top: auto;
    padding: 28px 0 8px;
  }
  .site-menu-logo .wa-logo { width: 100px; height: 100px; color: var(--muted); opacity: 0.7; }
  .site-menu-btn { position: relative; z-index: 41; }
  .site-menu-btn[aria-expanded="true"] span { background: var(--ink); }
  .site-menu-links > li + li { border-top: 1px solid var(--line); }
  /* A line under the last section too (Manage), like the ones between. */
  .site-menu-links > li:last-child { border-bottom: 1px solid var(--line); }
  .site-menu-caret { margin-right: 10px; }
  .site-menu-sub { margin: -4px 0 8px; padding-left: 32px; }
  .site-menu-links .site-menu-sub a { padding: 10px 4px; font-size: 0.98rem; }
  .site-menu-links a {
    gap: 14px;
    padding: 15px 4px;
    border-radius: 0;
    font-size: 1.05rem;
  }
  .site-menu-icon { width: 18px; height: 18px; }
  .site-menu-links a:hover { background: none; }
  .site-menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 39;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .site-menu-backdrop.is-open { opacity: 1; }
  .site-menu-backdrop[hidden] { display: none; }
  /* The page behind doesn't scroll while the drawer is open. */
  :root.site-menu-open,
  :root.site-menu-open body { overflow: hidden; }
}
/* Auto (no saved theme) on a device in dark mode: the same almost-black drawer. */
@media (max-width: 560px) and (prefers-color-scheme: dark) {
  :root:not([data-theme]) .site-menu-panel { background: #0A0B09; }
}
@media (prefers-reduced-motion: reduce) {
  .site-menu-panel,
  .site-menu-backdrop { transition: none !important; }
}

/* ---------- manage: market data (js/market-admin.js) ---------- */
.market-table-card { max-width: 760px; }
.market-facts { display: grid; gap: 8px; margin: 12px 0 0; font-size: 0.86rem; line-height: 1.4; }
.market-facts div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; }
.market-facts dt { color: var(--muted); }
.market-facts dd { margin: 0; color: var(--ink); }
.market-facts a { color: inherit; }
.market-actions { margin-top: 14px; }
.market-actions .manage-button,
.market-add .manage-button { border: 1px solid var(--pine); cursor: pointer; }
.market-actions .manage-button[disabled],
.market-add .manage-button[disabled] { opacity: 0.45; cursor: wait; }
.market-add { display: flex; align-items: flex-end; gap: 10px; margin-top: 12px; }
.market-add .record-field { flex: 1 1 auto; max-width: 260px; }
.market-add .manage-button { height: 38px; }
.market-table-wrap { margin-top: 12px; overflow-x: auto; }
.market-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.market-table th {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.market-table td {
  padding: 7px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  white-space: nowrap;
}
.market-table th:first-child,
.market-table td:first-child { padding-left: 0; }
.market-table tr:last-child td { border-bottom: none; }
.market-ticker { font: 600 0.84rem var(--font-mono); }
.market-ticker .market-muted { display: block; font: 400 0.72rem var(--font-sans); }
.market-muted { color: var(--muted); }
.market-tag {
  padding: 1px 5px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--up) 15%, transparent);
  color: var(--up);
  font-size: 0.7rem;
  font-weight: 600;
}
.market-switch {
  min-width: 44px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
  font: 600 0.74rem var(--font-sans);
  cursor: pointer;
}
.market-switch.is-on { border-color: var(--pine); background: color-mix(in srgb, var(--pine) 14%, transparent); color: var(--ink); }
.market-remove { padding: 0 6px; border: 0; background: none; color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.market-remove:hover { color: var(--down); }
.market-switch[disabled],
.market-remove[disabled] { opacity: 0.45; cursor: wait; }
@media (max-width: 560px) {
  .market-facts div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ---------- manage: alerts (js/alerts-admin.js) ---------- */
.alert-intro { max-width: 560px; margin: 0 0 16px; }
.alert-condition { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; font-size: 0.88rem; color: var(--ink-soft); }
.alert-direction.acct-picker { display: inline-block; margin-top: 0; }
.alert-direction.acct-picker select { height: 34px; padding-top: 0; padding-bottom: 0; }
.alert-threshold { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); }
.alert-threshold input {
  width: 4.8em;
  height: 34px;
  box-sizing: border-box;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: 500 0.9rem var(--font-sans);
  text-align: right;
}
.alert-threshold input:focus-visible,
.alert-add-item input:focus-visible { outline: 2px solid var(--pine); outline-offset: 1px; }
.alert-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; font-size: 0.84rem; }
.alert-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 2px 3px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: 600 0.8rem var(--font-mono);
  white-space: nowrap;
}
.alert-chip.is-missing { color: var(--muted); text-decoration: line-through; }
.alert-email-chip { white-space: normal; overflow-wrap: anywhere; font: 500 0.84rem var(--font-sans); }
.alert-chip button {
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.alert-chip button:hover { color: var(--down); }
.alert-add-item { display: flex; gap: 8px; margin-top: 14px; }
.alert-add-item input {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 240px;
  height: 36px;
  box-sizing: border-box;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: 400 0.9rem var(--font-sans);
}
.alert-add-item .manage-button { border: 1px solid var(--pine); cursor: pointer; }
.alert-quick { margin-top: 10px; }
.alert-step-note { margin: 6px 0 0; font-size: 0.8rem; color: var(--muted); }
/* Where an alert goes: Email, Phone, Site, each on or off. */
.alert-send { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 0.82rem; }
.alert-send .market-muted { margin-right: 2px; }
.alert-send-option { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font: 500 0.8rem var(--font-sans); cursor: pointer; }
.alert-send-option:hover { border-color: var(--muted); }
.alert-send-option.is-on { border-color: var(--pine); background: color-mix(in srgb, var(--pine) 20%, transparent); color: var(--ink); }
.alert-send-option:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.alert-quick button { padding: 6px 11px; font-size: 0.8rem; cursor: pointer; }
.alert-quick [data-clear] { color: var(--down); }
.alert-save-bar {
  position: sticky;
  bottom: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  max-width: 560px;
  margin: 0 0 16px;
}
.alert-save-bar .record-message { margin: 0; }
.alert-save-bar .manage-button { border: 1px solid var(--pine); cursor: pointer; box-shadow: 0 2px 8px rgba(33, 38, 31, 0.18); }
.alert-save-bar .manage-button[disabled] { opacity: 0.45; cursor: default; box-shadow: none; }
.alert-delivery { display: grid; gap: 12px; margin-top: 12px; }
.alert-delivery-row { display: flex; align-items: center; gap: 10px; }
.alert-delivery-text { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; font-size: 0.88rem; }
.alert-delivery-text b { font-weight: 600; color: var(--ink); }
.alert-delivery-text span { color: var(--ink-soft); font-size: 0.78rem; line-height: 1.4; }
.alert-picker.acct-picker { flex: 0 0 auto; margin-top: 0; }
.alert-picker.acct-picker select { height: 34px; padding-top: 0; padding-bottom: 0; }
.alert-picker select[disabled] { opacity: 0.5; }
.alert-card-actions { display: inline-flex; align-items: center; gap: 6px; }
.alert-card.is-urgent { border-color: color-mix(in srgb, var(--down) 55%, var(--line)); }
.alert-card .market-switch[data-urgent].is-on { border-color: var(--down); background: color-mix(in srgb, var(--down) 14%, transparent); }
@media (max-width: 560px) {
  .alert-delivery-row { flex-wrap: wrap; }
  .alert-delivery-text { flex-basis: 100%; }
}
.alert-recent { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 0.84rem; }
.alert-recent li { display: grid; gap: 2px; }

/* ---------- Explore (one stock or fund) ---------- */
.explore-headline { width: min(34rem, 100%); margin-bottom: 22px; }
.explore-title {
  display: grid;
  gap: 4px;
  padding: 8px 20px 11px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-raised);
  box-shadow: 0 1px 2px rgba(33, 38, 31, 0.06);
  font: 600 clamp(1.5rem, 4vw, 2rem)/1.2 var(--font-serif);
  color: var(--ink);
}
.explore-title-row,
.explore-sub-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 20px; }
.explore-sub-row { flex-wrap: wrap; }
.explore-price { font: 500 clamp(1.1rem, 3vw, 1.35rem) var(--font-mono); color: var(--ink); }
.explore-day { font: 500 0.84rem var(--font-mono); }
.explore-day.is-up { color: var(--up); }
.explore-day.is-down { color: var(--down); }
/* The search bar on Explore: suggestions drop over the page below it. */
.explore-search { position: relative; z-index: 5; max-width: 34rem; margin: -8px 0 18px; }
.explore-search .site-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-raised);
  box-shadow: 0 12px 28px rgba(33, 38, 31, 0.18);
}
.explore-search .site-search-input { background: var(--paper-raised); }
/* Explore (home): Market Pulse (stocks, metals, dollar on one chart). */
/* 1D: the stock market's open and close. */
.pulse-session { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.7; }
.market-pulse { margin-bottom: 26px; }
@media (max-width: 560px) {
  .market-pulse .compare-legend .compare-change { display: inline; }
  .market-pulse .compare-legend { gap: 6px 16px; }
  .market-pulse .compare-legend-item { font-size: 0.86rem; }
}

/* Explore (home)'s toolbar: the search bar and the timeframe buttons in one row,
   the same height (stacked on phones). */
.home-toolbar { display: flex; align-items: center; gap: 24px; margin-bottom: 24px; }
.explore-search.home-search { flex: 1; min-width: 0; max-width: none; margin: 0; }
.home-toolbar .timeframe-row { margin: 0; }
.home-timeframe .segmented { height: 38px; border-radius: 6px; }
.home-timeframe .segmented button { padding: 0 13px; }
@media (max-width: 560px) {
  .home-toolbar { display: block; margin-bottom: 16px; }
  /* Under the Market Pulse chart, full width; 16px between each box and bar down to the market sections. */
  .market-pulse + .home-timeframe { margin: -10px 0 16px; }
  .home-timeframe .segmented button { padding: 0; }
}
.explore-search .site-search-note { margin: 8px 2px 0; }
.explore-empty-chart { position: relative; }
.explore-empty-grid { stroke: var(--muted); opacity: 0.3; }
.explore-empty-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(115px, 28%, 190px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  color: var(--muted);
  opacity: 0.6;
}
.explore-period.is-empty { cursor: default; }
.explore-period.is-empty:hover { border-color: var(--line); }
.explore-legend-tf { font: 400 0.78rem var(--font-mono); color: var(--muted); }
#exploreReadout .is-up { color: var(--up); }
#exploreReadout .is-down { color: var(--down); }
.explore-card-title { margin: 4px 0 12px; font: 600 1.05rem var(--font-serif); color: var(--ink-soft); }
.explore-performance { margin-top: 14px; padding-bottom: 14px; }
.explore-periods { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.explore-period {
  display: grid;
  gap: 4px;
  padding: 9px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  text-align: center;
  cursor: pointer;
}
.explore-period:hover { border-color: var(--muted); }
.explore-period.active { border-color: var(--pine); box-shadow: inset 0 0 0 1px var(--pine); }
.explore-period:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.explore-period-label { font: 500 0.74rem var(--font-mono); color: var(--muted); }
.explore-period-value { font: 600 0.92rem var(--font-mono); color: var(--ink); }
.explore-period-value.is-up { color: var(--up); }
.explore-period-value.is-down { color: var(--down); }
.explore-facts { margin-top: 14px; padding-top: 12px; }
/* Long values (e.g. "Semiconductors · Individual Stocks") wrap instead of
   widening the table past the screen. */
.compare-stats.explore-facts-table td { white-space: normal; }
.compare-stats.explore-facts-table th[scope="row"] { padding-right: 12px; }
.explore-facts-table td.is-up { color: var(--up); }
.explore-facts-table td.is-down { color: var(--down); }
.explore-fact-date { display: block; margin-top: 2px; font: 400 0.72rem var(--font-sans); color: var(--muted); }
.explore-compare { position: relative; z-index: 4; margin-top: 14px; padding-bottom: 16px; }
.explore-compare-note { margin: -4px 0 12px; font-size: 0.84rem; color: var(--ink-soft); }
.explore-search.explore-compare-search { max-width: none; margin: 0; }
.explore-compare-search .site-search-input { background: var(--paper); }
.explore-links { margin-top: 14px; padding-bottom: 14px; }
.explore-link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.explore-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: 500 0.9rem var(--font-sans);
  text-decoration: none;
}
.explore-link:hover { border-color: var(--pine); color: var(--pine); }
.explore-link:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.explore-link-ticker { margin-left: 8px; font: 400 0.8rem var(--font-mono); color: var(--muted); }
.explore-link svg { flex: none; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 560px) {
  .explore-periods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* One line, so its change stays in the key on phones (Analysis hides it). */
  #exploreLegend .compare-change { display: inline; }
}

/* ---------- Analysis: Compare ---------- */
.compare-headline { margin-bottom: 22px; min-width: min(34rem, 100%); }
/* "Compare Across Equity Types" is long: let it wrap on phones. */
#compareTitle { white-space: normal; }
.compare-headline .portfolio-name-row { gap: 20px; }
.compare-swatch {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--series-color);
}
.compare-timeframe { justify-content: flex-start; }

.compare-card {
  padding: 14px 16px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-raised);
}
.compare-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 10px; }
.compare-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 0.95rem var(--font-mono);
  color: var(--ink);
}
.compare-change { font-weight: 500; }
.compare-change.is-up { color: var(--up); }
.compare-change.is-down { color: var(--down); }
.compare-market-card { margin-top: 14px; }
.compare-large.compare-custom-card { margin-top: 14px; padding-bottom: 16px; }
/* Small, quiet heading inside the top box. */
.compare-card .large-title-inside { margin: 10px 0 10px; font: 600 1.08rem var(--font-serif); color: var(--ink-soft); }
/* Heading row: the title centered, the table menu (☰) at the right. */
.large-title-row { position: relative; }
.large-menu {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 6;
  transform: translateY(-50%);
}
.large-menu-btn {
  display: grid;
  align-content: center;
  gap: 4px;
  width: 34px;
  height: 31px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  cursor: pointer;
}
.large-menu-btn span { display: block; height: 2px; border-radius: 1px; background: var(--ink-soft); }
.large-menu-btn[aria-expanded="true"] span { background: var(--ink); }
.large-menu-btn:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
@media (hover: hover) {
  .large-menu-btn:hover span { background: var(--ink); }
}
.large-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 160px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-raised);
  box-shadow: 0 12px 28px rgba(33, 38, 31, 0.18);
}
.large-menu-panel[hidden] { display: none; }
.large-menu-label { margin: 4px 8px 6px; font: 500 0.72rem var(--font-sans); color: var(--muted); }
.large-menu-panel button {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--ink);
  font: 400 0.9rem var(--font-sans);
  text-align: left;
  cursor: pointer;
}
.large-menu-panel button.active { color: var(--pine); font-weight: 600; }
.large-menu-panel button:focus-visible { outline: 2px solid var(--pine); outline-offset: -2px; }
@media (hover: hover) {
  .large-menu-panel button:hover { background: var(--pine-soft); }
}
/* Larger text: bigger type and taller rows in both tables. */
.compare-large.is-large-text .large-table { font-size: 0.98rem; }
.compare-large.is-large-text .large-table th,
.compare-large.is-large-text .large-table td { padding-top: 11px; padding-bottom: 11px; }
.compare-large.is-large-text .large-table thead th { font-size: 0.82rem; }
.compare-large.is-large-text .large-icon { width: 18px; height: 16px; }
.compare-large.is-large-text .large-category th { font-size: 1.12rem !important; }
.compare-large.is-large-text .large-table .large-graph-divider td { padding: 0; }
.large-title { margin: 28px 0 10px; font: 600 1.15rem var(--font-serif); color: var(--ink); text-align: center; }
/* Market Comparison: one table, category and subcategory rows between tickers. */
.compare-large { padding: 4px 16px 10px; }
.large-table {
  width: 100%;
  border-collapse: collapse;
  font: 400 0.84rem var(--font-mono);
  /* iPhone Safari enlarges text in wide rows (like the full-width subcategory
     rows); keep every size exactly as set. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Each column keeps at least 18px between numbers: when the screen is too
   narrow for that, the table scrolls sideways instead of squeezing them. */
.large-table th,
.large-table td { padding: 7px 0 7px 18px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
.large-table th:first-child,
.large-table td:first-child { padding-left: 0; text-align: left; }
.large-table thead th { padding-top: 10px; font: 500 0.74rem var(--font-sans); color: var(--muted); vertical-align: bottom; }
.large-table thead th span { display: inline-block; }
.large-table tbody th[scope="row"] { font-weight: 600; color: var(--ink); cursor: default; }
.large-table td { color: var(--ink); }
.large-table td.is-up { color: var(--up); }
.large-table td.is-down { color: var(--down); }
.large-table .large-drop,
.large-table .large-rebound,
.large-table .large-plain { color: var(--ink-soft); }
/* The ticker column stays put while the table scrolls sideways on phones. */
.large-table th:first-child { position: sticky; left: 0; z-index: 1; background: var(--paper-raised); padding-right: 6px; }
.large-category th {
  padding-top: 18px;
  font: 600 1rem var(--font-serif) !important;
  color: var(--ink) !important;
  text-align: left !important;
}
/* Custom Comparison: a color dot on each graphed pick, a plain dashed line
   between graphed and not-graphed picks, and empty "—" rows to drop into. */
.large-empty td { padding: 18px 0 !important; text-align: center !important; color: var(--muted) !important; font: 400 0.84rem var(--font-sans); white-space: normal !important; }
.large-graph-swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  vertical-align: 1px;
}
.large-table .large-graph-divider td { padding: 0; height: 0; border-bottom: 1px dashed var(--muted); }
.large-table .large-slot td { color: var(--muted); opacity: 0.6; }

/* Collapsible category groups: the name and a triangle; collapsed hides the rows. */
.large-group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.large-group-toggle:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.large-group-caret { width: 10px; height: 7px; fill: var(--muted); transition: transform 0.2s ease; }
.large-group-toggle:hover .large-group-caret { fill: var(--ink); }
tbody.is-collapsed .large-group-caret { transform: rotate(-90deg); }
tbody.is-collapsed tr:not(.large-category) { display: none; }
.large-subcategory th {
  padding-top: 10px;
  font: 600 0.68rem var(--font-sans) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted) !important;
  text-align: left !important;
}
/* Custom Comparison: click a row to pick it; picks get a drag handle and an x. */
.large-pick-row { cursor: pointer; }
/* A ticker already in Custom Comparison: grayed, with its name instead of numbers. */
.large-table .large-pick-row.is-picked th,
.large-table .large-pick-row.is-picked td { color: var(--muted); opacity: 0.7; }
.large-table .large-picked-name { text-align: left !important; padding-left: var(--picked-indent, 14px); font: 400 0.8rem var(--font-sans); }
.large-pick-row:hover th,
.large-pick-row:hover td { background: color-mix(in srgb, var(--ink) 5%, var(--paper-raised)); }
.large-custom-row.is-dragging th,
.large-custom-row.is-dragging td { background: color-mix(in srgb, var(--pine) 16%, var(--paper-raised)); }
.large-handle {
  display: inline-flex;
  align-items: center;
  margin-right: 7px;
  padding: 4px 2px;
  color: var(--muted);
  cursor: grab;
  touch-action: none;
  vertical-align: middle;
}
.large-custom-row.is-dragging .large-handle { cursor: grabbing; }
.large-handle-icon { width: 12px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
/* The x column stays pinned at the right edge while the table scrolls sideways. */
.large-table .large-remove-cell { width: 1%; padding-left: 10px; position: sticky; right: 0; background: var(--paper-raised); }
.large-pick-row:hover .large-remove-cell { background: color-mix(in srgb, var(--ink) 5%, var(--paper-raised)); }
.large-remove {
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--muted);
  font: 400 1.05rem/1 var(--font-sans);
  cursor: pointer;
}
.large-remove:hover { color: var(--down); }
.large-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 50;
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-raised);
  color: var(--ink);
  font: 500 0.85rem var(--font-sans);
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.large-toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* Column headers sort the table into one list (see analysis.js). */
.large-sort {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.large-sort:hover,
.large-sort.is-active { color: var(--ink); }
.large-sort:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.large-sort-arrow { font-size: 0.6rem; }
/* REVERT: plain yellow text, no button box (darker yellow on the light theme). */
.large-revert {
  padding: 0;
  border: 0;
  background: none;
  color: #A87B0A;
  font: 600 0.72rem var(--font-sans);
  letter-spacing: 0.06em;
  cursor: pointer;
}
:root[data-theme="dark"] .large-revert,
:root[data-theme="midnight"] .large-revert { color: #E8CF6A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .large-revert { color: #E8CF6A; }
}
.large-revert:hover { text-decoration: underline; }
.large-revert:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.large-icon {
  width: 16px;
  height: 14px;
  margin-right: 0;
  vertical-align: -1px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Phones: dragging on the chart only moves the hover line. No scrolling,
   zooming, text selection or long-press menu while touching it. */
.compare-chart { touch-action: none; }
.compare-card:not(.compare-stats-card) {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.compare-svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.compare-grid { stroke: var(--line); stroke-width: 1; opacity: 0.6; }
.compare-zero { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; }
.compare-axis { font: 400 11px var(--font-mono); fill: var(--muted); }
.compare-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.compare-cursor { stroke: var(--muted); stroke-width: 1; }
.compare-dot { stroke: var(--paper-raised); stroke-width: 2; }
.compare-readout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  min-height: 1.4em;
  margin: 6px 0 0;
  font: 400 0.8rem var(--font-mono);
  color: var(--ink-soft);
}
.compare-readout > span { display: inline-flex; align-items: center; gap: 6px; }
.compare-readout-date { color: var(--muted); }
@media (max-width: 560px) {
  .compare-card { padding: 12px 10px 8px; }
  /* Phones: the graph's key shows just the tickers (the % is in the table below). */
  .compare-legend .compare-change { display: none; }
  /* Market Comparison: tighter columns. */
  .compare-large { padding: 2px 7px 8px; }
  .compare-large.compare-custom-card { padding-bottom: 14px; }
  .large-table { font-size: 0.72rem; }
  .compare-large.is-large-text .large-table { font-size: 0.86rem; }
  .compare-large.is-large-text .large-table th,
  .compare-large.is-large-text .large-table td { padding-top: 12px; padding-bottom: 12px; }
  .compare-large.is-large-text .large-table .large-graph-divider td { padding: 0; }
  .large-table th,
  .large-table td { padding-left: 14px; }
  .large-revert { font-size: 0.64rem; }
  .large-subcategory th { padding-top: 8px; font-size: 0.6rem !important; }
  /* All six timeframe buttons share the full width (Analysis and Explore). */
  .compare-timeframe .segmented,
  .timeframe-row-full .segmented { display: flex; width: 100%; }
  .compare-timeframe .segmented button,
  .timeframe-row-full .segmented button,
  #portfolioTimeframeControl button { flex: 1; padding: 7px 0; }
  /* Portfolios on phones: the timeframe buttons stack on top of Arrange / View. */
  .portfolio-controls { gap: 10px; }
  .portfolio-controls > .view-bar-item,
  .portfolio-controls .view-bar { width: 100%; }
  .portfolio-controls .view-bar { gap: 10px; grid-template-columns: 1fr 1fr; }
  #portfolioTimeframeControl { display: flex; width: 100%; }
  #portfolioTimeframeControl button { height: 36px; }
}
.compare-stats-card { margin-top: 14px; padding: 6px 16px; }
.compare-stats { width: 100%; border-collapse: collapse; font: 400 0.86rem var(--font-mono); }
.compare-stats th,
.compare-stats td { padding: 8px 0; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.compare-stats tr:last-child th,
.compare-stats tr:last-child td { border-bottom: 0; }
.compare-stats thead th { font-weight: 600; color: var(--ink); }
.compare-stats thead th .compare-swatch { display: inline-block; margin-right: 6px; vertical-align: -1px; }
.compare-stats th[scope="row"] { text-align: left; font: 400 0.82rem var(--font-sans); color: var(--ink-soft); }
.compare-stats td { color: var(--ink); }
/* Label column first, then the tickers share the rest equally (2-4 of them). */
.compare-stats { table-layout: fixed; }
.compare-stats thead th:first-child { width: 30%; }
.compare-stats th:not(:first-child),
.compare-stats td { padding-left: 12px; }
.compare-stats td.is-up { color: var(--up); }
.compare-stats td.is-down { color: var(--down); }
@media (max-width: 560px) {
  .compare-stats-card { padding: 4px 10px; }
  .compare-stats { font-size: 0.8rem; }
  /* Phones: columns size to their contents; with 4 tickers the table scrolls sideways. */
  .compare-stats { table-layout: auto; }
  .compare-stats thead th:first-child { width: auto; }
  .compare-stats th:not(:first-child),
  .compare-stats td { padding-left: 8px; }
}

/* ---------- Future Net Worth Calculator ---------- */
.calc-link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 36px auto 0;
  padding: 13px 26px;
  /* Subtle tint of the theme green. */
  border: 1px solid color-mix(in srgb, var(--pine) 22%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--pine) 7%, var(--paper-raised));
  color: var(--ink);
  text-decoration: none;
  font: 600 1.05rem var(--font-serif);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.calc-link:hover {
  border-color: color-mix(in srgb, var(--pine) 45%, var(--line));
  background: color-mix(in srgb, var(--pine) 12%, var(--paper-raised));
}
/* Same width as the cards below it. */
.calc-headline { display: block; max-width: 40rem; margin-bottom: 14px; }
.calc-title-card { cursor: default; }
#calcBody { display: grid; gap: 14px; max-width: 40rem; }
.calc-card {
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-raised);
}
.calc-card-title { margin: 0 0 10px; font: 600 1.1rem var(--font-serif); color: var(--ink); }
.calc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 12px; margin-bottom: 10px; }
.calc-field { display: grid; gap: 5px; margin-bottom: 10px; }
.calc-fields .calc-field { margin-bottom: 0; }
.calc-label { font: 500 0.78rem var(--font-sans); color: var(--ink-soft); }
.calc-input {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}
.calc-input:focus-within { border-color: var(--pine); }
.calc-input input {
  flex: 1;
  min-width: 0;
  padding: 9px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 500 1rem var(--font-mono);
  outline: none;
}
.calc-affix { font: 400 0.85rem var(--font-mono); color: var(--muted); white-space: nowrap; }
.calc-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.calc-row span:last-child { font-family: var(--font-mono); color: var(--ink); text-align: right; }
.calc-row-strong { font-weight: 600; color: var(--ink); }
.calc-row-strong span:last-child { font-weight: 600; }
.calc-row .down { color: var(--down); }
.calc-details { border-top: 1px solid var(--line); font-size: 0.88rem; }
.calc-details summary { cursor: pointer; padding: 8px 0; color: var(--ink-soft); }
.calc-details summary:hover { color: var(--ink); }
.calc-field-after { margin: 10px 0 0; }
.calc-slider { display: flex; align-items: center; gap: 14px; }
.calc-slider input[type="range"] { flex: 1; min-width: 0; accent-color: var(--pine); cursor: pointer; touch-action: pan-y; }
.calc-slider output { min-width: 3.2rem; text-align: right; font: 600 1.05rem var(--font-mono); color: var(--ink); }
.calc-slider-scale { display: flex; justify-content: space-between; margin-right: calc(3.2rem + 14px); font: 400 0.72rem var(--font-mono); color: var(--muted); }
.calc-field .segmented { justify-self: start; }
.calc-results { border-color: var(--pine); }
.calc-result { margin: 4px 0 12px; font-size: 1rem; color: var(--ink); line-height: 1.5; }
.calc-result:last-child { margin: 12px 0 4px; }
.calc-big { font: 600 1.3rem var(--font-mono); white-space: nowrap; }
.calc-when { color: var(--muted); font-size: 0.85rem; }
.calc-note { margin: 0; font-size: 0.76rem; line-height: 1.5; color: var(--muted); max-width: 40rem; }
.calc-card .calc-note { margin-top: -4px; }
.calc-reset {
  margin-left: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pine);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.calc-back { margin-top: 26px; font-size: 0.85rem; }
.calc-back a { color: var(--ink-soft); }
@media (max-width: 560px) {
  .calc-card { padding: 12px 14px; }
}

/* ---------- opening animation (Explore, the home page) ---------- */
.splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 17px;
  /* Lifts the logo and name a little above the exact middle, which reads as centered. */
  padding-bottom: 12vh;
  box-sizing: border-box;
  /* Black, to match the logo's own background. */
  background: #000;
  animation: splash-out 0.35s ease 1.25s forwards;
}
.splash-logo {
  width: 180px;
  height: 180px;
  color: #fff;
  animation: splash-logo-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.splash-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  animation: splash-name-in 0.45s ease 0.18s both;
}
/* Wordmark: "WiseApe" in Playfair Display (a high-contrast serif, like the
   WA logo); "FINANCE" in bold, widely spaced capitals beneath. */
.splash-brand {
  font: 600 2.05rem/1.05 'Playfair Display', 'Source Serif 4', Georgia, serif;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
}
.splash-sub {
  font: 700 0.74rem 'Montserrat', 'IBM Plex Sans', sans-serif;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
  padding-left: 0.42em; /* balance the trailing letter space so it centers */
}
@keyframes splash-logo-in {
  from { opacity: 0; transform: scale(0.86); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes splash-name-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes splash-out {
  to { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .splash { display: none; }
}

/* Touch screens: iPhones zoom the page in when a text box or dropdown with
   text under 16px is tapped (and the page then scrolls sideways), so every
   one is at least 16px there. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea { font-size: 16px !important; }
}
/* Tapping buttons, links and fields quickly doesn't count as a double tap,
   which iPhones would otherwise use to zoom in. Pinch zoom still works. */
a, button, input, select, textarea, label, summary, [role="button"], tr[data-edit] { touch-action: manipulation; }

/* Trend Analysis (/trends): one ticker's trend lines and volatility, absolute
   or vs VTI, then each window and every ticker. Nothing here is wider than a
   phone: the controls stack, the figures are a grid, and the tables shorten
   their headings (All Stocks & Funds shows one group of columns at a time
   below 960px). */
.trend-card,
.trend-table-card { margin-top: 14px; }
.trend-table-card { padding-top: 4px; }
.trend-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
#trendTicker { flex: 1 1 220px; min-width: 0; max-width: 340px; margin: 0; padding: 6px 28px 6px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-raised); color: var(--ink); font: inherit; text-overflow: ellipsis; }
.trend-toggles { display: flex; gap: 8px; margin-left: auto; }
.trend-mode button,
.trend-span button,
.trend-all-groups button { padding: 5px 12px; font-size: 0.78rem; }
.trend-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 20px; margin-bottom: 4px; }
.trend-stats .full-analysis-stat { min-width: 0; }
.trend-stats .is-up { color: var(--up); }
.trend-stats .is-down { color: var(--down); }
#trendLegend { margin-top: 10px; }
#trendLegend:empty { display: none; }
.trend-legend-relative .compare-swatch { background: repeating-linear-gradient(90deg, var(--series-color) 0 4px, transparent 4px 6px); }
.trend-line { stroke: var(--ink-soft); stroke-width: 1.5; opacity: 0.5; }
.trend-line.is-layered { opacity: 0.75; }
.trend-segment { stroke-width: 2.5; stroke-linecap: round; opacity: 0.85; }
.trend-segment.is-up { stroke: var(--up); }
.trend-segment.is-down { stroke: var(--down); }
.trend-segment.is-active { stroke-width: 4; opacity: 1; }
.trend-segment-relative { stroke-dasharray: 6 4; }
.trend-divider { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.7; }
.trend-dot { fill: var(--ink-soft); }
#trendReadout b { font-weight: 500; }
#trendReadout .is-up { color: var(--up); }
#trendReadout .is-down { color: var(--down); }
.trend-months thead th:first-child,
.trend-all thead th:first-child { text-align: left; }
.trend-short { display: none; }
.trend-note { margin: 8px 0 4px; color: var(--muted); font-size: 0.74rem; line-height: 1.45; }
.trend-all-groups { display: none; }
.compare-stats.trend-all { table-layout: auto; }
.compare-stats.trend-all thead th:first-child { width: auto; }
.trend-all tbody tr { cursor: pointer; }
.trend-all tbody tr:hover th,
.trend-all tbody tr:hover td { background: color-mix(in srgb, var(--muted) 10%, transparent); }
.trend-all tr.is-selected th,
.trend-all tr.is-selected td { background: color-mix(in srgb, var(--muted) 20%, transparent); }
.trend-all th[scope="row"] { font: 600 0.84rem var(--font-mono); color: var(--ink); }
.trend-sort { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.trend-sort.is-active { color: var(--ink); }
.trend-sort:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.trend-loading { text-align: center !important; color: var(--muted) !important; }
@media (max-width: 560px) {
  /* Ticker on its own line; the two toggles share the next. */
  #trendTicker { flex: 1 1 100%; max-width: none; }
  .trend-toggles { flex: 1 1 100%; margin-left: 0; }
  .trend-mode { display: flex; flex: 1; }
  .trend-span { display: flex; flex: 0 0 92px; }
  .trend-mode button,
  .trend-span button,
  .trend-all-groups button { flex: 1; padding: 7px 0; }
  .trend-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
  .trend-stats .full-analysis-stat strong { font-size: 0.95rem; }
  /* By Month: short headings and two-line dates. */
  .trend-long { display: none; }
  .trend-short { display: inline; }
  .compare-stats.trend-months { table-layout: auto; font-size: 0.76rem; }
  .compare-stats.trend-months thead th:first-child { width: auto; }
  .compare-stats.trend-months th[scope="row"] { font-size: 0.72rem; line-height: 1.3; }
  .compare-stats.trend-months th:not(:first-child),
  .compare-stats.trend-months td { padding-left: 6px; }
  .trend-all-groups { display: flex; }
}
/* All Stocks & Funds below 960px: Volatility, Trend or vs VTI columns. */
@media (max-width: 960px) {
  .trend-all-groups { display: inline-flex; margin: 0 0 6px; }
  .trend-all.show-vol [data-group]:not([data-group="vol"]),
  .trend-all.show-trend [data-group]:not([data-group="trend"]),
  .trend-all.show-relative [data-group]:not([data-group="relative"]) { display: none; }
}

/* ---------- Correlation Analysis (correlation.js) ---------- */
/* Bars: blue for positive correlation, orange for negative (the allocation
   palette's first two slots; validated for color-blind separation in both
   themes). Shift highlights use a third, neutral-meaning hue. */
.corr-card { margin-bottom: 14px; }
.corr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
#corrSubject { flex: 1 1 220px; min-width: 0; max-width: 340px; margin: 0; padding: 6px 28px 6px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-raised); color: var(--ink); font: inherit; text-overflow: ellipsis; }
.corr-basis { margin-left: auto; }
.corr-basis button,
.corr-filter button { padding: 5px 12px; font-size: 0.78rem; }
.corr-filter { margin-bottom: 4px; }
.corr-shifts-card,
.corr-table-card { margin-bottom: 14px; }
.corr-shifts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-bottom: 6px; }
.corr-shift-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--alloc-4) 70%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--alloc-4) 14%, var(--paper-raised));
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.corr-shift-entry:hover { background: color-mix(in srgb, var(--alloc-4) 24%, var(--paper-raised)); }
.corr-shift-name { font: 600 0.9rem var(--font-mono); }
.corr-shift-detail { grid-column: 1; color: var(--ink-soft); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.corr-shift-change { grid-row: 1 / span 2; grid-column: 2; align-self: center; font: 600 0.9rem var(--font-mono); }
.corr-empty { margin: 4px 0 8px; color: var(--muted); font-size: 0.84rem; }
.corr-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.corr-table th,
.corr-table td { padding: 6px 6px; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); text-align: right; white-space: nowrap; }
.corr-table thead th { color: var(--muted); font-size: 0.74rem; font-weight: 600; border-bottom-color: var(--line); }
.corr-table tbody tr { cursor: pointer; }
.corr-table tbody tr:hover { background: color-mix(in srgb, var(--pine) 8%, transparent); }
.corr-table .corr-name { padding-left: 0; text-align: left; font-weight: 400; }
.corr-label { display: block; color: var(--ink); font: 600 0.82rem var(--font-mono); }
.corr-sub { display: block; max-width: 13em; overflow: hidden; color: var(--muted); font-size: 0.7rem; text-overflow: ellipsis; }
.corr-bar-cell { width: 30%; min-width: 80px; }
.corr-bar { position: relative; display: block; height: 10px; }
.corr-bar::before { content: ''; position: absolute; top: -3px; bottom: -3px; left: 50%; border-left: 1px solid var(--line); }
.corr-fill { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.corr-fill.is-positive { background: var(--alloc-1); border-radius: 0 4px 4px 0; }
.corr-fill.is-negative { background: var(--alloc-2); border-radius: 4px 0 0 4px; }
.corr-axis { display: flex; justify-content: space-between; font-weight: 500; }
.corr-long { color: var(--ink); font-weight: 600; }
.corr-short { color: var(--ink-soft); }
.corr-pill { display: inline-flex; align-items: center; gap: 2px; padding: 1px 5px; border: 1px solid transparent; border-radius: 4px; }
.corr-short.is-notable .corr-pill { border-color: var(--alloc-4); color: var(--ink); }
.corr-short.is-major .corr-pill { border-color: var(--alloc-4); background: color-mix(in srgb, var(--alloc-4) 30%, transparent); color: var(--ink); font-weight: 600; }
.corr-pill span { font-size: 0.66rem; }
.corr-shift-key { padding: 0 4px; border: 1px solid var(--alloc-4); border-radius: 3px; color: var(--ink-soft); }
.corr-shift-key.is-major { background: color-mix(in srgb, var(--alloc-4) 30%, transparent); }
@media (max-width: 560px) {
  .corr-filter { display: flex; width: 100%; }
  .corr-filter button { flex: 1 1 0; padding: 5px 2px; font-size: 0.72rem; }
  /* Phones: every column fits. The full name (under the ticker) goes, the bar narrows. */
  .corr-table { font-size: 0.74rem; }
  .corr-table th,
  .corr-table td { padding: 6px 2px; }
  .corr-table thead th { font-size: 0.68rem; }
  .corr-sub { display: none; }
  .corr-label { font-size: 0.76rem; }
  .corr-table .corr-name { max-width: 6.2em; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
  .corr-bar-cell { width: 16%; min-width: 34px; }
  .corr-axis span:nth-child(2) { display: none; }
  .corr-pill { gap: 1px; padding: 1px 2px; }
  .corr-pill span { font-size: 0.56rem; }
}
/* The chosen item and a clicked one charted together; the gap between them shaded. */
.corr-pair-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.corr-pair-close { padding: 0 6px; border: 0; background: none; color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.corr-pair-close:hover { color: var(--ink); }
.corr-pair-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 8px; }
.corr-span button { padding: 5px 14px; font-size: 0.78rem; }
.corr-pair-swap { padding: 0; border: 0; background: none; color: var(--pine); font: 500 0.8rem var(--font-sans); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.corr-pair-stat { margin: 0 0 8px; color: var(--ink-soft); font-size: 0.86rem; }
.corr-pair-stat b { color: var(--ink); font-variant-numeric: tabular-nums; }
.corr-muted { color: var(--muted); }
.corr-gap { fill: var(--muted); opacity: 0.16; stroke: none; }

/* ---------- Full Breakdown (breakdown.js) ---------- */
.breakdown-switcher { margin-bottom: 14px; }
.breakdown-chart-card { margin-top: 14px; }
.breakdown-timeframe { margin: 0 0 10px; }
.breakdown-views { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 12px; }
.breakdown-views button {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-raised);
  color: var(--ink-soft);
  font: 600 0.84rem var(--font-sans);
  cursor: pointer;
}
.breakdown-views button.active { border-color: var(--pine); background: var(--pine); color: var(--paper-raised); }
.breakdown-card { margin-bottom: 14px; }
.breakdown-card .explore-card-title { margin-bottom: 10px; }
/* The four measures in one row (fits a phone); the stock's own is tagged Auto. */
.breakdown-methods {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.breakdown-methods button {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1px;
  min-height: 42px;
  padding: 5px 2px;
  border: 0;
  background: var(--paper-raised);
  color: var(--ink-soft);
  font: 500 0.8rem var(--font-mono);
  cursor: pointer;
}
.breakdown-methods button + button { border-left: 1px solid var(--line); }
.breakdown-methods button.active { background: var(--pine); color: var(--paper-raised); font-weight: 600; }
.breakdown-methods button:focus-visible { outline: 2px solid var(--pine); outline-offset: -3px; }
.breakdown-auto { font: 700 0.58rem var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
@media (max-width: 560px) {
  .breakdown-methods button { font-size: 0.72rem; }
}
.breakdown-note { margin: 6px 0 10px; color: var(--ink-soft); font-size: 0.84rem; line-height: 1.45; }
.breakdown-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.breakdown-tile { display: grid; align-content: start; gap: 3px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.breakdown-tile-label { color: var(--muted); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.breakdown-tile-value { color: var(--ink); font: 600 1.45rem var(--font-mono); font-variant-numeric: tabular-nums; }
.breakdown-tile-note { color: var(--ink-soft); font-size: 0.76rem; line-height: 1.4; }
.breakdown-tile.is-up .breakdown-tile-value,
.breakdown-tile.is-good .breakdown-tile-value { color: var(--up); }
.breakdown-tile.is-down .breakdown-tile-value,
.breakdown-tile.is-bad .breakdown-tile-value { color: var(--down); }
.breakdown-subtitle { margin: 12px 0 2px; color: var(--ink-soft); font: 600 0.82rem var(--font-sans); }
.breakdown-history-dot { fill: var(--alloc-1); stroke: var(--paper-raised); stroke-width: 2; }
.breakdown-history-dot.is-now { fill: var(--paper-raised); stroke: var(--alloc-1); stroke-width: 2.5; }
.breakdown-history-value { font: 500 11px var(--font-mono); fill: var(--ink-soft); }
.compare-axis.is-now { fill: var(--ink-soft); font-weight: 600; }
.breakdown-bar.is-up { fill: var(--up); }
.breakdown-bar.is-down { fill: var(--down); }
.breakdown-bar.is-now { opacity: 0.6; }
.breakdown-median { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.8; }
.breakdown-peers { touch-action: manipulation; }
.breakdown-peer { cursor: pointer; }
.breakdown-peer circle:not(.breakdown-peer-hit) { fill: var(--alloc-1); fill-opacity: 0.7; stroke: var(--paper-raised); stroke-width: 1.5; }
.breakdown-peer.is-other circle:not(.breakdown-peer-hit) { fill: var(--muted); fill-opacity: 0.55; }
.breakdown-peer.is-outside circle:not(.breakdown-peer-hit) { fill: var(--paper-raised); fill-opacity: 1; stroke: var(--alloc-1); stroke-width: 2; }
.breakdown-peer.is-other.is-outside circle:not(.breakdown-peer-hit) { stroke: var(--muted); }
.breakdown-peer.is-chosen circle:not(.breakdown-peer-hit) { fill: var(--alloc-2); fill-opacity: 1; stroke: var(--paper-raised); stroke-width: 2; }
.breakdown-peer:hover circle:not(.breakdown-peer-hit) { fill-opacity: 1; }
.breakdown-peer-hit { fill: transparent; stroke: none; }
.breakdown-peer-label { font: 600 12px var(--font-mono); fill: var(--ink); paint-order: stroke; stroke: var(--paper-raised); stroke-width: 3px; }
.breakdown-peer-tip { min-height: 1.4em; }
@media (max-width: 560px) {
  .breakdown-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .breakdown-tile-value { font-size: 1.2rem; }
}
/* The price chart's lines: the price and its key metrics, each a switch. */
.breakdown-legend { gap: 6px 8px; }
.breakdown-series {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
  font: 600 0.82rem var(--font-mono);
  cursor: pointer;
}
.breakdown-series.is-on { border-color: color-mix(in srgb, var(--series-color) 60%, var(--line)); background: var(--paper-raised); color: var(--ink); }
.breakdown-series[disabled] { opacity: 0.45; cursor: default; }
.breakdown-series .compare-change { font-weight: 500; }
.breakdown-series-swatch { width: 22px; height: 8px; }
.breakdown-series-swatch line { stroke: var(--series-color); stroke-width: 2.5; stroke-linecap: round; }
.breakdown-series:not(.is-on) .breakdown-series-swatch line { stroke: var(--muted); }
.breakdown-metric-note { margin: 0 0 6px; color: var(--muted); font-size: 0.76rem; }
.breakdown-metric-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.breakdown-metric-dot { stroke: var(--paper-raised); stroke-width: 1.5; }
.breakdown-end-label { font: 600 11px var(--font-mono); paint-order: stroke; stroke: var(--paper-raised); stroke-width: 3px; }
/* Cash & Debt: the price, then cash, debt and net cash, on the same years. */
.breakdown-balance-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 2px 0 2px; font: 600 0.8rem var(--font-mono); color: var(--ink-soft); }
.breakdown-balance-key { display: inline-flex; align-items: center; gap: 6px; }
.breakdown-year-line { opacity: 0.35; }

/* ---------- Market Explore: Key Facts fold, and Full Report ---------- */
.explore-fold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.explore-fold-caret { width: 10px; height: 7px; fill: var(--muted); transition: transform 0.15s ease; }
.explore-fold[aria-expanded="false"] .explore-fold-caret { transform: rotate(-90deg); }
.explore-fold:focus-visible,
.explore-more:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; border-radius: 4px; }
.explore-facts h2.explore-card-title:has(.explore-fold[aria-expanded="false"]) { margin-bottom: 4px; }
.explore-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pine);
  font: 600 0.84rem var(--font-sans);
  cursor: pointer;
}
.explore-more .explore-fold-caret { fill: currentColor; }
.explore-more[aria-expanded="true"] .explore-fold-caret { transform: rotate(180deg); }
.explore-more[hidden] { display: none; }
.explore-report { margin-top: 28px; }
.explore-report-title { margin: 0 0 12px; font: 600 1.3rem var(--font-serif); color: var(--ink); }
.explore-report .breakdown-chart-card { margin-top: 0; }

/* ---------- Monitor (monitor.js; formerly Track); its cards are reused by Alerts (alerts.js) ---------- */
.monitor-headline { margin-bottom: 14px; }
.monitor-tabs { display: flex; width: 100%; max-width: 360px; margin-bottom: 14px; }
.monitor-tabs button { flex: 1 1 0; padding: 8px 12px; font-size: 0.86rem; }
.monitor-card { margin-bottom: 14px; }
.monitor-note { margin: 4px 2px 0; color: var(--muted); font-size: 0.76rem; line-height: 1.45; }
.monitor-sub { display: block; color: var(--muted); font-size: 0.74rem; line-height: 1.35; }
.monitor-ticker { font: 600 0.86rem var(--font-mono); color: var(--ink); }
.monitor-ticker.is-tracked { color: var(--up); }
a:has(> .monitor-ticker) { text-decoration: none; }
a:has(> .monitor-ticker):hover .monitor-ticker { text-decoration: underline; }
.monitor-name { font-weight: 600; color: var(--ink); font-size: 0.84rem; }
.is-buy { color: var(--up); }
.is-sell { color: var(--down); }
.monitor-hot { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.monitor-hot-item {
  display: grid; gap: 2px; padding: 8px 10px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font: inherit;
}
.monitor-hot-item:hover { border-color: var(--pine); }
.monitor-hot-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; font-size: 0.74rem; font-weight: 600; }
.monitor-hot-counts { font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.monitor-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin-bottom: 12px; }
.monitor-card-head .explore-card-title { margin: 0; }
.monitor-period button { padding: 4px 10px; font-size: 0.74rem; }
.monitor-hot-members { color: var(--muted); font-size: 0.72rem; }
.monitor-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.monitor-seg button { padding: 5px 10px; font-size: 0.76rem; }
.monitor-search {
  flex: 1 1 160px; min-width: 0; height: 32px; padding: 0 10px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); font: 400 0.86rem var(--font-sans);
}
.monitor-search:focus-visible { outline: 2px solid var(--pine); outline-offset: 1px; }
.monitor-check { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 0.8rem; }
.monitor-count { margin: 4px 0 6px; color: var(--muted); font-size: 0.76rem; }
.monitor-trades { display: grid; grid-template-columns: minmax(0, 1fr); }
.monitor-trade { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 2px; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.monitor-trade:last-child { border-bottom: 0; }
.monitor-trade-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.monitor-tx { font-size: 0.8rem; font-weight: 600; }
.monitor-amount { margin-left: auto; font: 500 0.82rem var(--font-mono); color: var(--ink); }
.monitor-trade-sub { color: var(--ink-soft); font-size: 0.76rem; line-height: 1.4; }
.monitor-trade-sub a { color: var(--pine); }
.monitor-asset { display: block; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.monitor-who { font-weight: 600; color: var(--ink); }
.monitor-party { font-weight: 700; }
.monitor-party.is-d { color: var(--alloc-1); }
.monitor-party.is-r { color: var(--alloc-2); }
.monitor-more { margin-top: 10px; border: 1px solid var(--pine); cursor: pointer; }
.monitor-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.monitor-table th { padding: 6px 6px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.72rem; font-weight: 600; text-align: left; white-space: nowrap; }
.monitor-table td { padding: 7px 6px; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); vertical-align: top; }
.monitor-table th:first-child, .monitor-table td:first-child { padding-left: 0; }
.monitor-table tr.is-clickable { cursor: pointer; }
.monitor-table tr.is-clickable:hover { background: color-mix(in srgb, var(--pine) 8%, transparent); }
.monitor-bar { display: block; width: 70px; height: 6px; margin: 4px 0 3px; border-radius: 3px; background: color-mix(in srgb, var(--line) 60%, transparent); overflow: hidden; }
.monitor-bar span { display: block; height: 100%; background: var(--alloc-1); }
.monitor-move { font-weight: 600; font-size: 0.78rem; white-space: nowrap; }
.monitor-fund-head select {
  width: 100%; max-width: 420px; margin: 0 0 10px; padding: 7px 28px 7px 10px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--paper-raised); color: var(--ink); font: inherit;
}
/* Eight quarters: an even 4 × 2 grid. */
.monitor-quarters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 12px; }
.monitor-quarters button { padding: 6px 2px; font-size: 0.74rem; }
.monitor-quarters button:nth-child(4n + 1) { border-left: 0; }
.monitor-quarters button:nth-child(n + 5) { border-top: 1px solid var(--line); }
.monitor-tiles .breakdown-tile-value { font-size: 1.25rem; }
.monitor-changes, .monitor-across { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 18px; }
.monitor-change-title { margin: 0 0 6px; font: 600 0.86rem var(--font-sans); color: var(--ink); }
.monitor-change-title span { color: var(--muted); font-weight: 500; }
.monitor-change-group ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.monitor-history { display: grid; gap: 6px; }
.monitor-history-row {
  display: grid; gap: 3px; padding: 8px 10px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font: inherit;
}
.monitor-history-row.is-on { border-color: var(--pine); background: color-mix(in srgb, var(--pine) 10%, var(--paper)); }
.monitor-history-head { font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.monitor-history-head .is-up { color: var(--up); }
.monitor-history-head .is-down { color: var(--down); }
.monitor-history-moves { color: var(--ink-soft); font-size: 0.76rem; line-height: 1.4; }
@media (max-width: 560px) {
  .monitor-hot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .monitor-filters .segmented { flex: 1 1 auto; }
  .monitor-filters .segmented button { flex: 1 1 0; }
}
div.monitor-hot-item { cursor: default; }
div.monitor-hot-item:hover { border-color: var(--line); }
.monitor-card-note { margin: -4px 0 10px; }

/* ---------- Alerts: alerts and movers (alerts.js) ---------- */
.alerts-list { display: grid; gap: 8px; }
.mv-alert { display: grid; gap: 3px; padding: 9px 11px; border: 1px solid var(--line); border-left-width: 3px; border-radius: 8px; background: var(--paper); }
.mv-alert.is-up { border-left-color: var(--up); }
.mv-alert.is-down { border-left-color: var(--down); }
.mv-alert-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; color: var(--ink); font-size: 0.9rem; font-weight: 600; }
.mv-alert-detail { color: var(--ink-soft); font-size: 0.8rem; line-height: 1.45; }
.mv-alert-compare { color: var(--muted); font-size: 0.74rem; line-height: 1.4; }
.mv-alert-group { display: grid; gap: 6px; margin-top: 8px; }
.mv-alert-head { margin: 4px 0 0; color: var(--ink); font: 600 0.86rem var(--font-sans); }
.mv-alert-head span { color: var(--muted); font-weight: 500; }
.mv-alert-group .explore-more { margin-top: 2px; }
.mv-ticker { font: 600 0.86rem var(--font-mono); color: var(--ink); text-decoration: none; }
a.mv-ticker:hover { text-decoration: underline; }
.movers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mv-column-head { margin: 0 0 6px; font: 600 0.84rem var(--font-sans); }
.mv-column-head.is-up { color: var(--up); }
.mv-column-head.is-down { color: var(--down); }
.mv-movers { display: grid; margin: 0; padding: 0; list-style: none; }
.mv-mover {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; align-items: baseline;
  padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.mv-mover:last-child { border-bottom: 0; }
.mv-mover-name { grid-column: 1; grid-row: 2; overflow: hidden; color: var(--muted); font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; }
.mv-mover-change { grid-column: 2; grid-row: 1; font: 600 0.84rem var(--font-mono); text-align: right; }
.mv-mover-change.is-up { color: var(--up); }
.mv-mover-change.is-down { color: var(--down); }
.mv-mover-price { grid-column: 2; grid-row: 2; color: var(--muted); font: 400 0.7rem var(--font-mono); text-align: right; }
/* One movers box: Daily / Weekly tabs on top, See more and when the figures are from at the bottom. */
.movers-tabs { display: flex; width: 100%; margin-bottom: 12px; }
.movers-tabs button { flex: 1 1 0; padding: 7px 8px; font-size: 0.8rem; }
.movers-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 8px; }
.movers-foot .movers-more { margin: 0; }
.movers-foot .monitor-sub { margin-left: auto; text-align: right; }
.home-movers { margin: 14px 0 34px; }
/* Each market section's heading, with its own small timeframe dropdown on the right. */
.home-cards-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.home-cards-title { margin: 0; font: 500 1.05rem var(--font-serif); color: var(--ink-soft); }
.home-tf-picker.acct-picker { margin-top: 0; flex: 0 0 auto; }
.home-tf-picker.acct-picker select { height: 28px; padding: 0 24px 0 9px; font-size: 0.78rem; }
.home-tf-picker.acct-picker::after { right: 9px; width: 8px; height: 6px; }
.movers-card .explore-card-title { text-align: center; font-weight: 400; color: var(--muted); }
@media (max-width: 560px) {
  .home-movers { margin: 16px 0 28px; }
  .home-cards-head { margin-bottom: 10px; }
}