:root,
html:not(.dark) .accrual-chart {
  /* Neutral charcoal surfaces, matching utensil-web's dark theme (no blue tint). Semantic hues
     (accent/green/red) are unchanged; only the structural surfaces, borders, and text neutralize. */
  --bg: #161616;
  --panel: #1c1c1c;
  --panel-2: #242424;
  --card: #1e1e1e;
  --card-2: #2a2a2a;
  --pop-bg: #242424;
  --inset: #121212;
  --selected: #2e2e2e;
  --border: #333333;
  --border-soft: #2b2b2b;
  --border-mid: #3a3a3a;
  --border-strong: #4a4a4a;
  --text: #ceccc8;
  --text-bright: #e0ddd8;
  --muted: #8a8884;
  --muted-2: #a3a09a;
  --accent: #4a90e2;
  --green: #74d66a;
  --green-2: #41b980;
  --teal-green: #26a69a;
  --red: #ef5350;
  --market-readiness-danger: #ef5350;
  --red-2: #ff908a;
  --red-3: #e86f6f;
  --red-4: #e06b65;
  --red-5: #d45151;
  --red-6: #ff9b9b;
  --red-pale: #ffd6d6;
  --amber: #e2a455;
  --amber-2: #d59b37;
  --amber-3: #a98b32;
  --gold: #f0b90b;
  --gold-2: #d9b94e;
  --gold-3: #e2c15d;
  --gold-4: #f1c56d;
  --gold-pale: #f0d98a;
  --teal: #63d0c3;
  --teal-2: #58c4b4;
  --teal-3: #4fd1c5;
  --teal-4: #2ec4b6;
  --cyan: #53c5d6;
  --blue: #9db7ff;
  --blue-2: #7c9eff;
  --blue-3: #5b8def;
  --blue-pale: #cfe5ff;
  --purple: #8b7cf6;
  --text-strong: #fff;
  --green-pale: #9ee2bd;
  --tip-bg: rgba(11, 13, 18, 0.96);
  --tip-bg-solid: rgba(11, 13, 18, 0.98);
  --tint-raise: rgba(255, 255, 255, 0.025);
  --tint-raise-2: rgba(255, 255, 255, 0.06);
  --blue-pale-2: #d9e5ff;
  --sky: #6db7ff;
  --sky-2: #8dd0ff;
  --sky-3: #7fb3e6;
  --cyan-2: #93c5db;
  --orange-2: #c8792f;
  --blue-4: #5ba3f6;
  --purple-2: #b08ee5;
  --blue-5: #8fb4d9;
  --green-3: #7fbf7f;
  --teal-pale: #8fd9c7;
  --text-bright-2: #e7edf8;
  --insider-neon: #d7ff59;
  --insider-neon-bg: rgba(215, 255, 89, 0.14);
  --insider-neon-border: rgba(215, 255, 89, 0.44);
  --chart-overlay-bg: rgba(15, 17, 21, 0.72);
  --ink: var(--text);
}
/* Light theme. The price chart follows these tokens and swaps its canvas
   palette in chart.js. The separate accrual mini-chart remains dark. */
html:not(.dark) {
  /* Warm cream surfaces borrowed from utensil.tools so nothing reads as stark
     white (see prd/theme.md). */
  --bg: #fcf6e5;
  --panel: #faf4e0;
  --panel-2: #f0e9d8;
  --card: #faf4e0;
  --card-2: #efe7d3;
  --pop-bg: #fdf9ec;
  --inset: #f0e9d8;
  --selected: #f0e6cd;
  --border: #e0d8c8;
  --border-soft: #e8e0cf;
  --border-mid: #c8bfae;
  --border-strong: #a89e88;
  --text: #23272e;
  --text-bright: #333a45;
  --muted: #6a7180;
  --muted-2: #5c6675;
  --accent: #2f6fd0;
  --green: #2e7d32;
  --green-2: #1f8a5a;
  --teal-green: #00796b;
  --red: #c62828;
  --market-readiness-danger: #c62828;
  --red-2: #c0392b;
  --red-3: #b04442;
  --red-4: #ad403a;
  --red-5: #b23b3b;
  --red-6: #bd3f3f;
  --red-pale: #a53030;
  --amber: #a4650f;
  --amber-2: #93660b;
  --amber-3: #7a641d;
  --gold: #977200;
  --gold-2: #8c7015;
  --gold-3: #8c7015;
  --gold-4: #9a6f1a;
  --gold-pale: #8a6d1a;
  --teal: #0d7a6f;
  --teal-2: #0d7a6f;
  --teal-3: #0b7f73;
  --teal-4: #0e8378;
  --cyan: #15788b;
  --blue: #3a5bd9;
  --blue-2: #3054d6;
  --blue-3: #2f62d6;
  --blue-pale: #23538f;
  --purple: #6144e0;
  --text-strong: #10131a;
  --green-pale: #1e7a4f;
  --tip-bg: rgba(250, 244, 224, 0.97);
  --tip-bg-solid: rgba(250, 244, 224, 0.98);
  --tint-raise: rgba(15, 23, 42, 0.03);
  --blue-pale-2: #2b4aa0;
  --sky: #1e6fbf;
  --sky-2: #1a6dbd;
  --sky-3: #2565ae;
  --cyan-2: #146c80;
  --orange-2: #9c5a17;
  --blue-4: #2c66c9;
  --purple-2: #7440c9;
  --blue-5: #2f6299;
  --green-3: #2e7d32;
  --tint-raise-2: rgba(15, 23, 42, 0.06);
  --teal-pale: #0d7a6f;
  --text-bright-2: #333a45;
  --insider-neon: #577800;
  --insider-neon-bg: rgba(196, 255, 104, 0.34);
  --insider-neon-border: rgba(141, 176, 0, 0.42);
  --chart-overlay-bg: rgba(253, 249, 236, 0.86);
}

/* Optional palette preserved from the first public Utensil Desk prototype. The Stocks theme above
   remains the default. This changes styling only; both deployments keep the shared Stocks layout. */
html.theme-utensildesk {
  --bg: #0f1115;
  --panel: #171a20;
  --panel-2: #111419;
  --card: #171a20;
  --card-2: #222731;
  --pop-bg: #171a20;
  --inset: #111419;
  --selected: #222731;
  --border: #2a2f38;
  --border-soft: #252a33;
  --border-mid: #343a45;
  --border-strong: #4a515d;
  --text: #e8e9ed;
  --text-bright: #f4f5f7;
  --muted: #969ba7;
  --muted-2: #717783;
  --accent: #66c2a3;
  --text-strong: #fff;
  --chart-overlay-bg: rgba(15, 17, 21, 0.82);
}
html.theme-utensildesk:not(.dark) {
  --bg: #f3efe6;
  --panel: #fbf8f1;
  --panel-2: #ebe5da;
  --card: #fbf8f1;
  --card-2: #ebe5d9;
  --pop-bg: #fbf8f1;
  --inset: #ebe5da;
  --selected: #ebe5d9;
  --border: #d8d1c5;
  --border-soft: #e2dcd1;
  --border-mid: #c5bcae;
  --border-strong: #9f978b;
  --text: #22211e;
  --text-bright: #171612;
  --muted: #6f6b63;
  --muted-2: #888278;
  --accent: #14775d;
  --text-strong: #10100e;
  --chart-overlay-bg: rgba(251, 248, 241, 0.86);
}
html.theme-utensildesk body {
  font-family: Arial, Helvetica, sans-serif;
}
html.theme-utensildesk .brand-link {
  font-family: Georgia, "Times New Roman", serif;
}
html.theme-utensildesk .site-nav,
html.theme-utensildesk .ticker-search-hero-input,
html.theme-utensildesk .ticker-hero-link {
  font-family: Arial, Helvetica, sans-serif;
}
html:not(.dark) .accrual-chart {
  background: var(--panel);
  border-radius: 8px;
}

* { box-sizing: border-box; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  transition: background-color 0.2s, color 0.2s;
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Top band: the disclaimer stays centered across the full width; the signed-in email is pinned to
   the right of the same row (position:absolute so it never shifts the disclaimer off-center). */
.site-topbar {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
}
.site-disclaimer-shell {
  position: relative;
  flex: 1;
  min-width: 0;
  text-align: center;
}
.site-disclaimer {
  margin: 0;
  padding: 10px 24px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
}
.site-disclaimer[hidden] { display: none; }
.site-disclaimer:hover,
.site-disclaimer:focus-visible {
  color: var(--text);
}
.site-disclaimer:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
  border-radius: 7px;
}
.site-disclaimer-popover {
  position: absolute;
  z-index: 120;
  top: calc(100% - 2px);
  left: 50%;
  width: min(760px, calc(100vw - 32px));
  padding: 16px 18px;
  transform: translateX(-50%);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--pop-bg);
  color: var(--text-bright);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  font-size: 16px;
  line-height: 1.55;
  text-align: left;
}
.site-disclaimer-popover[hidden] { display: none; }
.site-disclaimer-popover p { margin: 0; }
.site-risk-warning {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--amber) 10%, var(--panel));
  color: var(--text-bright);
  font-size: 15px;
  line-height: 1.55;
}
.site-risk-warning[hidden] { display: none; }
.site-risk-warning p {
  flex: 1;
  max-width: 1120px;
  margin: 0;
}
.site-risk-warning-dismiss {
  flex: 0 0 auto;
  margin-top: 1px;
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.site-risk-warning-dismiss:hover { border-color: var(--muted); }
.site-risk-warning-dismiss:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Email + Sign out, grouped and pinned to the right of the band. The group is absolutely
   positioned so it never shifts the centered disclaimer; the email ellipsizes if long. */
.site-topbar .topbar-identity {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 45%;
}
/* When the full warning owns the disclaimer slot, keep account controls in normal flow so hiding
   the compact disclaimer cannot collapse their row or pull them over the warning. */
.site-topbar.site-disclaimer-hidden .topbar-identity {
  position: static;
  transform: none;
  margin-left: auto;
  padding: 6px 24px;
}
.site-topbar .whoami {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.signout-link {
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px 9px;
  white-space: nowrap;
}
.signout-link:hover { color: var(--text); border-color: var(--muted); }
/* Below ~900px the disclaimer starts wrapping to multiple lines, and an absolutely-positioned
   email would sit over the wrapped text. Stack instead: drop the email onto its own right-aligned
   line so it can never overlap the disclaimer. (Above 900px the disclaimer is a single centered
   line well clear of the right-pinned email.) */
@media (max-width: 900px) {
  .site-topbar { flex-direction: column; align-items: stretch; }
  .site-disclaimer-shell { width: 100%; }
  .site-topbar .topbar-identity {
    position: static;
    transform: none;
    max-width: none;
    align-self: flex-end;
    padding: 0 24px 8px;
  }
  .site-risk-warning {
    flex-direction: column;
    gap: 10px;
    padding: 14px 18px 16px;
  }
  .site-risk-warning-dismiss { align-self: flex-end; }
}

.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
}
.site-header h1 { font-size: 18px; margin: 0; font-weight: 600; }
/* Primary nav (prd/about-page.md): About, SEC Scanner, and a Watchlist shortcut, replacing the
   old "Stocks" wordmark in the top-left (the wordmark now lives on the landing hero). */
.site-nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* Plain text links, by convention (About/SEC Scanner/Watchlist are navigation, not buttons). */
.nav-link {
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.nav-link:hover { color: var(--text); text-decoration: underline; }
.nav-link[hidden] { display: none; }
/* Brand link (prd/refresh-restore.md): the bold "Stocks" wordmark, back in the top-left as a
   tappable route to the ticker-search landing. */
.brand-link { color: var(--text); font-weight: 700; }
.brand-link:hover { text-decoration: none; }
.site-header > .market-regime-button { margin-inline: auto; }
.whoami { color: var(--muted); font-size: 14px; }
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex-wrap: wrap;
}
.scanner-link { color: var(--muted); font-size: 14px; text-decoration: none; border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px; }
.scanner-link:hover { color: var(--text); border-color: var(--muted); }
.market-regime-button {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.market-regime-button[hidden] { display: none; }
.market-regime-button:hover { border-color: var(--muted); }
.market-regime-button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.market-regime-button-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.market-regime-button-state { color: var(--text-strong); font-size: 13px; font-weight: 650; }
.ticker-search {
  position: relative;
  width: clamp(280px, 36vw, 480px);
  max-width: 100%;
}
.ticker-search-input {
  width: 100%;
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  padding: 5px 10px;
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  outline: none;
}
.ticker-search-input::placeholder { color: var(--muted); }
.ticker-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}
.ticker-search-results {
  position: absolute;
  z-index: 120;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  width: 100%;
  max-height: min(430px, 65vh);
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--pop-bg);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28);
  padding: 5px;
}
.ticker-search-result {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  padding: 11px 12px;
  text-align: left;
  cursor: pointer;
}
.ticker-search-result:hover,
.ticker-search-result.active { background: var(--selected); }
.ticker-search-result-main,
.ticker-search-result-meta {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.ticker-search-result-detail {
  display: flex;
  min-width: 0;
  flex: 1 1 68%;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}
.ticker-search-result-meta {
  flex: 1 1 auto;
  align-items: flex-end;
  gap: 2px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  text-align: right;
}
.ticker-search-result-main { flex: 1 1 32%; }
.ticker-search-symbol {
  color: var(--text-bright);
  font-size: 16px;
  font-weight: 750;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.ticker-search-company {
  color: var(--muted-2);
  font-size: 14px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ticker-search-result-context {
  display: flex;
  max-width: 100%;
  align-items: center;
  justify-content: flex-end;
}
.ticker-search-result-classification {
  min-width: 0;
  overflow: hidden;
  color: var(--muted-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ticker-search-status { color: var(--text); white-space: nowrap; }
.ticker-search-result-facts {
  display: flex;
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 3px 12px;
}
.ticker-search-sparkline {
  display: flex;
  width: 104px;
  min-width: 104px;
  flex: 0 0 104px;
  flex-direction: column;
  gap: 1px;
  color: var(--muted-2);
}
.ticker-search-sparkline[data-tone='up'] { color: var(--green); }
.ticker-search-sparkline[data-tone='down'] { color: var(--red-2); }
.ticker-search-sparkline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1;
}
.ticker-search-sparkline-head span:first-child { color: var(--muted); }
.ticker-search-sparkline svg {
  display: block;
  width: 104px;
  height: 28px;
  overflow: visible;
}
.ticker-search-sparkline path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.ticker-search-result.directory-only .ticker-search-status { color: var(--muted-2); }
.ticker-search-message {
  color: var(--muted);
  padding: 10px;
  font-size: 13px;
}
/* Adjacent search (prd/adjacent-search.md): "More in <sector>" label above the same-sector peers. */
.ticker-search-peer-heading {
  color: var(--muted);
  padding: 8px 10px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-top: 1px solid var(--border-soft);
  margin-top: 4px;
}
/* Private-competitor rows: grayed and non-interactive so it is obvious they are not selectable. */
.ticker-search-peer-private {
  cursor: default;
  opacity: 0.6;
}
.ticker-search-peer-private:hover { background: transparent; }
.ticker-search-peer-private .ticker-search-company { color: var(--muted); }
.ticker-search-peer-private-chip {
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Segmented language picker, styled to match the interval toggle below. */
.lang-picker {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.lang-picker button {
  background: var(--card);
  color: var(--ink);
  border: none;
  border-left: 1px solid var(--border);
  padding: 4px 10px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.lang-picker button:first-child { border-left: none; }
.lang-picker button:hover:not(.active) { color: var(--text-strong); }
.lang-picker button.active { background: var(--accent); color: #fff; }
/* Shared binary segmented control with a sliding active pill. Used only for two-state toggles. */
.binary-toggle {
  --binary-toggle-index: 0;
  --binary-toggle-duration: 180ms;
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  isolation: isolate;
}
.binary-toggle::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  bottom: 2px;
  width: calc(50% - 2px);
  border-radius: 999px;
  border: 1px solid rgba(141, 208, 255, 0.18);
  background: rgba(74, 144, 226, 0.22);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
  transform: translateX(calc(var(--binary-toggle-index) * 100%));
  transition: transform var(--binary-toggle-duration) cubic-bezier(0.22, 1, 0.36, 1), background-color var(--binary-toggle-duration) ease, border-color var(--binary-toggle-duration) ease;
  pointer-events: none;
  z-index: 0;
}
.binary-toggle-option {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 7px 16px;
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: color 150ms ease;
}
.binary-toggle-option:hover:not(.active) { color: var(--text-strong); }
.binary-toggle-option.active { color: var(--text); }
.binary-toggle-option:focus-visible { outline: none; }
.binary-toggle:focus-within {
  border-color: rgba(141, 208, 255, 0.38);
  box-shadow: 0 0 0 1px rgba(141, 208, 255, 0.24);
}
@media (prefers-reduced-motion: reduce) {
  .binary-toggle { --binary-toggle-duration: 0ms; }
  .binary-toggle-option { transition-duration: 0ms; }
}
.view-toggle .binary-toggle-option {
  min-width: clamp(5.5rem, 14vw, 6.75rem);
  padding-inline: clamp(14px, 3vw, 22px);
}
/* Header theme toggle, same mechanism as the scanner (prd/theme.md). */
.theme-btn {
  padding: 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  line-height: 0;
}
.theme-btn:hover { color: var(--text); }
.theme-btn svg { width: 18px; height: 18px; }
/* View modes (prd/view-modes.md): the paycheck ladder is investor-only.
   CSS keyed off body[data-view] so it never fights the hidden attribute the
   ladder renderer manages. */
body[data-view='trader'] #ladder-plan { display: none; }
/* Psychological support system (prd/psych-support.md): the plan section is
   Tier 1 coaching, hidden from the first paint while the system is off. */
body[data-psych='off'] #ladder-plan { display: none; }
body[data-psych='off'] #execution-constraints { display: none; }
/* Experimental features are opt-in. These surfaces stay hidden before their JS render guards run. */
body[data-experimental='off'] #ladder-plan { display: none; }
body[data-experimental='off'] #strip-panel { display: none; }
/* Deployment audience (prd/deployment-mode.md): the commercial audience never
   sees Tier 1 coaching (regardless of the psych toggle), the broker-fed
   composition tile, or the broker settings rows. Hidden from the first paint. */
body[data-audience='commercial'] #ladder-plan { display: none; }
body[data-audience='commercial'] #execution-constraints { display: none; }
body[data-audience='commercial'] #composition-section { display: none; }
body[data-audience='commercial'] .settings-broker-row { display: none; }
/* Portfolio charter (prd/portfolio-charter.md): Manager-only, Tier 1, same
   four gates as #ladder-plan; the render-level guard additionally clears its
   content on gate, which #ladder-plan's own guard does not. */
body[data-view='trader'] #portfolio-charter { display: none; }
body[data-psych='off'] #portfolio-charter { display: none; }
body[data-experimental='off'] #portfolio-charter { display: none; }
body[data-audience='commercial'] #portfolio-charter { display: none; }
/* Settings dialog (prd/settings.md), modeled on the regime-map dialog. */
.settings-dialog {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border-mid);
  border-radius: 12px;
  padding: 20px;
  width: min(360px, calc(100vw - 32px));
  color: inherit;
}
.settings-dialog::backdrop {
  background: rgba(4, 6, 10, 0.6);
}
.settings-dialog-close {
  position: absolute;
  top: 6px;
  right: 6px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
}
.settings-dialog-close:hover {
  color: var(--text-strong);
}

/* Iris easter egg (prd/iris-easter-egg.md). Hidden bunny in the header that
   iris-reveals the plumbing.html explainer. Tokens theme-switch automatically;
   motion is gated behind prefers-reduced-motion. */
.site-header { position: relative; }
.iris-egg-bunny {
  position: absolute;
  left: 66.6667%;
  top: 50%;
  transform: translate(-50%, -40%) scale(0.9);
  width: 26px;
  height: 26px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  line-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease, color 150ms ease;
}
.iris-egg-bunny svg { width: 22px; height: 22px; display: block; }
.iris-egg-bunny.is-peeking {
  opacity: 0.85;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.iris-egg-bunny.is-peeking:hover { opacity: 1; color: var(--text); }
.iris-egg-bunny:focus-visible {
  opacity: 1;
  pointer-events: auto;
  color: var(--text);
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.iris-egg-dialog {
  width: min(1080px, 94vw);
  height: min(90vh, 820px);
  max-width: 94vw;
  max-height: 92vh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  color: var(--text);
}
.iris-egg-dialog::backdrop { background: rgba(4, 6, 10, 0.62); }
.iris-egg-stage {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border-mid);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  will-change: clip-path;
}
.iris-egg-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--card);
}
.iris-egg-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.iris-egg-close:hover { color: var(--text-strong); }
.iris-egg-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .iris-egg-bunny { transition: opacity 220ms ease, color 150ms ease; }
}
.settings-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 650;
  color: var(--text-strong);
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
}
.settings-row-stack {
  display: block;
  padding: 10px 0 4px;
}
.settings-label {
  color: var(--muted);
  font-size: 13px;
}
.settings-public {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}
.settings-public-head {
  display: grid;
  gap: 6px;
}
.settings-public-title-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.settings-public-title {
  font-size: 13px;
  font-weight: 650;
  color: var(--text-strong);
}
/* Plain muted label, not a pill that reads as a button (prd/public-com.md). */
.settings-public-badge {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.settings-public-status {
  margin: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}
.settings-public-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.settings-public-field {
  display: grid;
  gap: 6px;
}
.settings-public-field-label {
  color: var(--muted);
  font-size: 12px;
}
.settings-public-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  padding: 9px 10px;
  font: inherit;
}
.settings-public-input:focus-visible {
  outline: none;
  border-color: rgba(141, 208, 255, 0.38);
  box-shadow: 0 0 0 1px rgba(141, 208, 255, 0.24);
}
.settings-public-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.settings-public-button {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  padding: 8px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.settings-public-button.primary {
  border-color: rgba(74, 144, 226, 0.38);
  background: rgba(74, 144, 226, 0.16);
  color: var(--text-strong);
}
.settings-public-button:disabled {
  opacity: 0.55;
  cursor: default;
}
/* Destructive-but-rare actions (Clear): keep them findable, not prominent. */
.settings-public-button.quiet {
  border-color: transparent;
  background: none;
  color: var(--muted);
}
.settings-public-button.quiet:hover:not(:disabled) {
  color: var(--red-2);
  border-color: var(--border);
}
.settings-public-link-button {
  justify-self: start;
  border: none;
  background: none;
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.settings-public-link-button:disabled {
  opacity: 0.55;
  cursor: default;
}
.settings-public-feedback {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}
.settings-public-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.settings-public-section-title {
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 650;
}
.settings-public-account-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}
.settings-public-disclosure {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}
.settings-public-account-item {
  line-height: 1.4;
}
.settings-public-connection-list {
  display: grid;
  gap: 10px;
  margin: 8px 0 12px;
}
.settings-public-connection-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}
.settings-public-connection-copy {
  min-width: 0;
}
.settings-public-connection-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.settings-public-connection-meta {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}
.settings-public-connection-feedback {
  grid-column: 1 / -1;
  margin-top: 2px;
}
.settings-public-actions-inline {
  align-self: start;
  justify-content: flex-end;
}
.settings-public-feedback.tone-success { color: var(--green); }
.settings-public-feedback.tone-error { color: var(--red-2); }
.settings-public-feedback.tone-muted { color: var(--muted); }

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 24px 64px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Section 1: overview tabs (prd/overview-tabs.md). The tab bar reuses the .content-tabs
   underline style; each tab panel is a .lists tile grid. */
.lists {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
/* display: grid would otherwise override the hidden attribute on the inactive tab panel
   (same trap as the holdings-card flip, see prd/holdings.md). */
.lists[hidden] { display: none; }
/* Portfolio tab: the accrual chart and the composition tile sit side by side on wide screens
   and stack at medium widths. */
.lists.lists-portfolio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Screener tab: a single full-width card so the wide metrics table gets the whole row (the
   two-class selector outranks the .lists breakpoint rules, so it stays full width at every size). */
.lists.lists-screener { grid-template-columns: 1fr; }
/* The gated shares-over-time tile spans the full row on any grid except the Portfolio panel,
   where it takes the left column. */
.lists .holdings-section { grid-column: 1 / -1; }
.lists.lists-portfolio .holdings-section { grid-column: auto; }
/* holdings-section is currently unmounted (prd/holdings.md), so composition-section is normally
   the row's only child; give it the full row rather than leaving the second column blank. Reverts
   automatically to a single column if holdings-section returns. */
.lists.lists-portfolio .composition-section:only-child { grid-column: 1 / -1; }
@media (max-width: 1020px) {
  .lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lists.lists-portfolio { grid-template-columns: 1fr; }
  .lists .holdings-section { grid-column: 1 / -1; }
}
.ticker-list-sections {
  display: contents;
}

/* Sale tile (prd/sale-tile.md) */
.sale-tile { position: relative; } /* containing block for the legend popover */
/* Perspective note (prd/curated-watchlists.md): quiet copy at the bottom of the page. */
.watchlist-perspective {
  margin: 8px 2px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.sale-tile .sale-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.sale-tile .sale-head h2 { margin: 0; }
.sale-head-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.sale-tag,
.sale-fundamentals,
.sale-trend {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.sale-tag[data-tag='bullSale'] { color: var(--teal); border-color: var(--teal); }
.sale-tag[data-tag='bull'] { color: var(--teal); }
.sale-tag[data-tag='bear'] { color: var(--red-2); border-color: var(--red-2); }
.sale-fundamentals[data-signal='intact'] { color: var(--teal); border-color: var(--teal); }
.sale-fundamentals[data-signal='watch'] { color: var(--gold); border-color: var(--gold); }
.sale-trend[data-trend='deepening'] { color: var(--red-2); border-color: var(--red-2); }
.sale-trend[data-trend='decelerating'],
.sale-trend[data-trend='weak'] { color: var(--gold); border-color: var(--gold); }
.sale-trend[data-trend='stabilizing'] { color: var(--gold); border-color: var(--gold); }
.sale-trend[data-trend='stabilized'] { color: var(--teal); border-color: var(--teal); }
/* Label-ranking legend: an inline "i" summary beside the live price-state label; the body drops
   as a popover anchored to the card (mirrors the LETF identity popover, but floated so the label
   row keeps its height). */
.sale-state-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sale-legend { display: inline-flex; align-items: center; margin-left: 0; font-size: 12px; font-weight: 400; }
.sale-legend > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  cursor: pointer;
  color: var(--muted);
}
.sale-legend > summary::-webkit-details-marker { display: none; }
.sale-legend > summary:hover { color: var(--text); }
.sale-legend-body {
  position: absolute;
  left: 12px;
  right: 12px;
  z-index: 20;
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--pop-bg);
  font-size: 12px;
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
}
.sale-legend-title { margin: 0 0 6px; font-weight: 600; }
.sale-legend-list { margin: 0; padding-left: 18px; }
.sale-legend-list li { margin: 2px 0; }
.sale-legend-label { font-weight: 600; }
.sale-identity { font-size: 15px; font-weight: 700; margin-top: 10px; }
.sale-identity .muted { font-size: 12px; font-weight: 400; }
.sale-price { font-size: 20px; font-weight: 600; margin: 2px 0 4px; }
.sale-price .muted { font-size: 11px; font-weight: 400; }
.sale-state { font-size: 16px; font-weight: 600; }
.sale-state[data-state='deepDiscount'],
.sale-state[data-state='onSale'] { color: var(--teal); }
.sale-state[data-state='stretched'],
.sale-state[data-state='extended'] { color: var(--gold); }
.sale-sub { font-size: 12px; margin-top: 2px; }
.sale-gate { font-size: 12px; margin: 8px 0 0; }
.sale-stats { font-size: 11px; margin: 8px 0 0; line-height: 1.5; }
.list-card {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.list-card h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0; }
.list-head {
  display: grid;
  gap: 8px;
}
.list-head-title,
.list-head-benchmarks {
  min-width: 0;
}
/* Benchmark pills in the tile header: selectable like rows, visually apart from the company
   grid. They sit on their own line so the watchlist title never competes for width. */
.bench-pills {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 10px;
  row-gap: 8px;
  flex-wrap: wrap;
}
.bench-pill-group {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.bench-pill {
  padding: 2px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.bench-pill-charcoal { background: var(--card-2); }
.bench-pill:hover { border-color: var(--accent); color: var(--text); }
.bench-pill.selected { border-color: var(--accent); color: var(--text); background: rgba(74, 144, 226, 0.12); }

.ticker-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ticker-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 500;
  padding: 4px 8px;
}
.ticker-table th:first-child,
.ticker-table td:first-child {
  width: 88px;
}
.ticker-table th,
.ticker-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ticker-table td { padding: 8px; border-top: 1px solid var(--border); }
.ticker-table tbody tr { cursor: pointer; }
.ticker-table tbody tr:hover { background: var(--panel-2); }
.ticker-table tbody tr.selected { background: var(--selected); }
.ticker-table .sym { font-weight: 700; color: var(--text-strong); }
.ticker-table-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ticker-table-company {
  color: var(--text);
}
.ticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px;
}
.list-card[data-list-section="watchlist"] .ticker-grid {
  margin-top: 4px;
}
.ticker-grid-btn {
  min-width: 0;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}
.ticker-grid-btn:hover {
  background: var(--panel-2);
  border-color: var(--border-mid);
}
.ticker-grid-btn.selected {
  background: var(--selected);
  border-color: var(--accent);
}
.ticker-grid-btn .sym {
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
}
.ticker-grid-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ticker-grid-btn .company {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ticker-grid-shares {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 6px;
  border: 1px solid rgba(91, 141, 239, 0.28);
  border-radius: 999px;
  background: rgba(91, 141, 239, 0.14);
  color: var(--blue-pale-2);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ticker-grid-shares[hidden] { display: none; }
/* Held chip (prd/curated-watchlists.md): authored ownership disclosure on curated sections.
   Muted on purpose: it discloses, it does not highlight. */
.ticker-held-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.ticker-sale-label {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}
.ticker-sale-label[hidden] { display: none; }
.ticker-sale-label[data-state='deepDiscount'],
.ticker-sale-label[data-state='onSale'] { color: var(--teal); }
.ticker-sale-label[data-state='stretched'],
.ticker-sale-label[data-state='extended'] { color: var(--gold); }
.ticker-sale-label[data-state='bearBelowTrend'],
.ticker-sale-label[data-state='bearRally'] { color: var(--red-2); }
.insider-buy-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  padding: 2px 7px;
  border: 1px solid var(--insider-neon-border);
  border-radius: 999px;
  background: var(--insider-neon-bg);
  color: var(--insider-neon);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: middle;
}
.shares-col { width: 88px; text-align: right; }

/* Section 2: chart */
.chart-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.chart-title-group {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.compare-view-toggle:not([hidden]) + .current-ticker {
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.current-ticker {
  flex: 1 1 auto;
  min-width: 0;
  min-height: calc(2 * 1.35em);
  font-weight: 700;
  color: var(--text-strong);
  font-size: 16px;
  line-height: 1.35;
}
.coverage-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
.current-ticker-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.current-ticker .ticker-stats { font-weight: 400; color: var(--text); }
.chart-title-ticker {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: color 0.15s;
}
.chart-title-ticker:hover,
.chart-title-ticker:focus-visible { color: var(--accent); }
.compare-view-toggle {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-top: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font: inherit;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.compare-view-toggle[hidden] {
  display: none;
}
.compare-view-toggle svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.compare-view-toggle:hover {
  border-color: rgba(141, 208, 255, 0.45);
  color: var(--text-strong);
}
.compare-view-toggle.active {
  border-color: var(--sky);
  background: rgba(109, 183, 255, 0.12);
  color: var(--sky-2);
}
.compare-view-toggle:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}
.readout-token {
  cursor: help;
  text-decoration: underline dotted rgba(200, 204, 213, 0.55);
  text-underline-offset: 2px;
}
.readout-token:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.readout-tooltip {
  position: fixed;
  z-index: 1000;
  max-width: min(30rem, calc(100vw - 16px));
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(200, 204, 213, 0.22);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
  font-size: 0.875rem;
  line-height: 1.4;
  pointer-events: none;
}
.readout-tooltip[hidden] { display: none; }
.toolbar-right { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 10px; }
.range-btn { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; cursor: pointer; font: inherit; white-space: nowrap; }
.range-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.cycle-view-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
}
.cycle-view-toggle::after {
  width: 7px;
  height: 7px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background: #8dd0ff;
  box-shadow: 0 0 0 2px rgba(141, 208, 255, 0.18);
  content: '';
  visibility: hidden;
}
.cycle-view-toggle[data-cycle-view='cycles']::after { visibility: visible; }
.cycle-view-toggle:hover { border-color: var(--accent); color: var(--text-strong); }
.cycle-view-toggle.active,
.cycle-view-toggle[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: #fff; }
.cycle-view-toggle:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.cycle-view-toggle[hidden] { display: none; }
.interval-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.interval-btn {
  background: var(--panel);
  color: var(--text);
  border: none;
  padding: 6px 14px;
  cursor: pointer;
  font: inherit;
  border-left: 1px solid var(--border);
}
.interval-btn:first-child { border-left: none; }
.interval-btn.active { background: var(--accent); color: #fff; }
.range-presets { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.range-preset-btn {
  background: var(--panel);
  color: var(--text);
  border: none;
  padding: 6px 12px;
  cursor: pointer;
  font: inherit;
  border-left: 1px solid var(--border);
}
.range-preset-btn:first-child { border-left: none; }
.range-preset-btn.active { background: var(--accent); color: #fff; }
.range-preset-btn:disabled { color: var(--muted); cursor: default; opacity: 0.55; }

.rotation-suggestions {
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}
.rotation-suggestions[hidden] { display: none; }
.notable-insider-buying {
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}
.notable-insider-buying[hidden] { display: none; }
.notable-insider-buying-head h2 {
  margin: 0 0 6px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.notable-insider-buying-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.notable-insider-buying-item + .notable-insider-buying-item {
  border-top: 1px solid var(--border);
}
.notable-insider-buying-link,
.notable-insider-buying-button {
  width: 100%;
  display: grid;
  gap: 3px;
  padding: 8px 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
}
.notable-insider-buying-button { cursor: pointer; }
.notable-insider-buying-link:hover,
.notable-insider-buying-button:hover {
  color: var(--text-strong);
}
.notable-insider-buying-link:focus-visible,
.notable-insider-buying-button:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
.notable-insider-buying-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.notable-insider-buying-ticker {
  color: var(--insider-neon);
  font-weight: 700;
}
.notable-insider-buying-name {
  color: var(--text);
}
.notable-insider-buying-meta {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.rotation-head h2 {
  margin: 0 0 6px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.rotation-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.rotation-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 4px 0;
}
.rotation-row + .rotation-row { border-top: 1px solid var(--border); }
.rotation-sym { font-weight: 600; color: var(--text); }
.rotation-row[data-kind='overextended'] .rotation-sym { color: var(--gold); }
.rotation-row[data-kind='defensive'] .rotation-sym { color: var(--red-2); }
.rotation-targets { display: inline-flex; flex-direction: column; gap: 2px; }
.rotation-into { color: var(--accent); }
.rotation-secondary { color: var(--teal); font-size: 12px; }
.rotation-flow { margin: 8px 0 0; font-size: 12px; line-height: 1.5; }
.rotation-note { margin: 6px 0 0; font-size: 11px; }
.rotation-badge {
  display: inline-block;
  margin-left: 5px;
  font-size: 11px;
  line-height: 1;
  cursor: default;
}
.rotation-badge[data-kind='overextended'] { color: var(--gold); }
.rotation-badge[data-kind='defensive'] { color: var(--red-2); }
.rotation-badge[data-kind='target'] { color: var(--teal); }
.rotation-badge[data-kind='secondary'] { color: var(--accent); }
.regime-chip-cluster {
  display: flex;
  align-items: baseline;
  gap: 5px 6px;
  flex-wrap: wrap;
}
.regime-posture {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.regime-posture-top {
  display: flex;
  align-items: baseline;
  gap: 8px 10px;
  flex-wrap: wrap;
}
.regime-posture-label {
  color: var(--text-strong);
  font-size: 16px;
  font-weight: 700;
}
.regime-posture-budget {
  border: 1px solid var(--border-mid);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--text-bright);
  background: var(--inset);
  font-size: 12px;
  white-space: nowrap;
}
.regime-posture-action {
  color: var(--text);
  font-size: 13px;
}
.regime-posture-caveat {
  color: var(--muted);
  font-size: 12px;
}
.regime-context-row {
  display: flex;
  align-items: baseline;
  gap: 6px 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.regime-context-label {
  color: var(--muted);
}
.regime-context-detail {
  color: var(--text);
}
.regime-interpretation {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.45;
}
.regime-interpretation-copy {
  color: var(--muted);
}
.regime-interpretation.tone-repair .regime-interpretation-copy {
  color: var(--text-bright);
}
.regime-posture.tone-entry .regime-posture-label { color: var(--green); }
.regime-posture.tone-confirmed .regime-posture-label { color: var(--teal-2); }
.regime-posture.tone-caution .regime-posture-label { color: var(--gold-2); }
.regime-posture.tone-stress .regime-posture-label { color: var(--red-3); }
.regime-posture.tone-repair .regime-posture-label { color: var(--blue-2); }
.market-regime-dialog {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border-mid);
  border-radius: 12px;
  padding: 20px;
  width: min(760px, calc(100vw - 32px));
  /* The evidence sections can outgrow a phone viewport; scroll inside the dialog. */
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  color: inherit;
}
.market-regime-dialog::backdrop {
  background: rgba(4, 6, 10, 0.6);
}
.regime-map-dialog-close {
  position: absolute;
  top: 6px;
  right: 6px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
}
.regime-map-dialog-close:hover {
  color: var(--text-strong);
}
.regime-dialog-title { margin: 0 32px 12px 0; color: var(--text-strong); font-size: 16px; font-weight: 650; }
.regime-dialog-summary { display: grid; gap: 8px; }
.regime-dialog-state-row { display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; }
.regime-dialog-overview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.regime-title {
  color: var(--text-strong);
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
}
.regime-summary-chip {
  display: inline-flex;
  align-items: baseline;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 7px;
  color: var(--text);
  background: var(--inset);
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
}
.regime-summary-chip.posture.tone-entry { color: var(--green); }
.regime-summary-chip.posture.tone-confirmed { color: var(--teal-pale); }
.regime-summary-chip.posture.tone-caution { color: var(--gold-3); }
.regime-summary-chip.posture.tone-stress { color: var(--red-pale); border-color: var(--red-5); }
.regime-summary-chip.posture.tone-repair { color: var(--blue); }
.regime-summary-chip.interpretation.tone-caution {
  border-color: var(--amber-3);
  color: var(--gold-pale);
}
.regime-summary-chip.interpretation.tone-repair {
  border-color: #5675d8;
  color: var(--blue-pale-2);
}
.regime-summary-chip.shift {
  border-color: var(--border-strong);
  color: var(--text-bright);
}
.regime-summary-chip.shift.tone-entry { color: var(--green); }
.regime-summary-chip.shift.tone-confirmed { color: var(--teal-2); }
.regime-summary-chip.shift.tone-caution { color: var(--gold-3); }
.regime-summary-chip.shift.tone-stress { color: var(--red-pale); border-color: var(--red-5); }
.regime-summary-chip.shift.tone-repair { color: var(--blue); }
.regime-summary-chip.shift.complete {
  border-color: var(--border);
  color: var(--muted);
}
.regime-summary-chip[class*="warning-"] {
  border-color: var(--amber-3);
  color: var(--gold-pale);
}
.regime-summary-chip.status-headwind,
.regime-summary-chip.status-watch {
  border-color: var(--amber-3);
  color: var(--gold-pale);
}
.regime-summary-chip.status-breaking,
.regime-summary-chip.status-stressed,
.regime-summary-chip.status-stretched,
.regime-summary-chip.status-abovefive,
.regime-summary-chip.status-fallinghard,
.regime-summary-chip.status-leakinghard,
.regime-summary-chip.status-stronglydefensive,
.regime-summary-chip.stress-high,
.regime-summary-chip.stress-extreme {
  border-color: var(--red-5);
  color: var(--red-pale);
}
.regime-summary-chip.more-warnings {
  color: var(--muted);
}
.regime-map-wrap {
  margin-top: 10px;
  max-width: 460px;
}
.regime-map-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.regime-map-edge {
  fill: none;
  stroke: var(--border-mid);
  stroke-width: 1.25;
  opacity: 0.72;
}
.regime-map-edge.outgoing {
  stroke: var(--blue);
  opacity: 1;
}
.regime-map-edge.active-transition {
  opacity: 1;
}
.regime-map-edge.tone-entry { stroke: var(--green); }
.regime-map-edge.tone-confirmed { stroke: var(--teal-2); }
.regime-map-edge.tone-caution { stroke: var(--gold-2); }
.regime-map-edge.tone-stress { stroke: var(--red-3); }
.regime-map-edge.tone-repair { stroke: var(--blue-2); }
.regime-map-node {
  opacity: 0.6;
}
.regime-map-node.current {
  opacity: 1;
}
.regime-map-node .regime-node-box {
  fill: var(--inset);
  stroke: var(--border-mid);
  stroke-width: 1;
}
.regime-map-node.tone-entry .regime-node-box {
  fill: rgba(116, 214, 106, 0.16);
  stroke: var(--green);
}
.regime-map-node.tone-confirmed .regime-node-box {
  fill: rgba(88, 196, 180, 0.14);
  stroke: var(--teal-2);
}
.regime-map-node.tone-caution .regime-node-box {
  fill: rgba(226, 193, 93, 0.15);
  stroke: var(--gold-2);
}
.regime-map-node.tone-stress .regime-node-box {
  fill: rgba(255, 130, 130, 0.14);
  stroke: var(--red-3);
}
.regime-map-node.tone-repair .regime-node-box {
  fill: rgba(118, 157, 255, 0.15);
  stroke: var(--blue-2);
}
.regime-map-node .regime-current-ring {
  display: none;
  fill: none;
  stroke: var(--text-strong);
  stroke-width: 1.5;
  opacity: 0.95;
}
.regime-map-node.current .regime-current-ring {
  display: block;
}
.regime-map-node text {
  fill: var(--text-bright);
  font-size: 9px;
  font-weight: 650;
  text-anchor: middle;
  dominant-baseline: middle;
  letter-spacing: 0;
}
.regime-map-node.current text {
  fill: var(--text-strong);
}
.regime-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
}
.regime-map-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.regime-map-swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: currentColor;
  flex: none;
}
.regime-map-swatch.tone-entry { color: var(--green); }
.regime-map-swatch.tone-confirmed { color: var(--teal-2); }
.regime-map-swatch.tone-caution { color: var(--gold-2); }
.regime-map-swatch.tone-stress { color: var(--red-3); }
.regime-map-swatch.tone-repair { color: var(--blue-2); }

/* Regime dialog evidence panel (condition graph, checklist, what-would-change). */
.regime-dialog-section {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.regime-dialog-heading {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.regime-cond-svg {
  display: block;
  width: 100%;
  height: auto;
}
.regime-cond-quad-bg {
  fill-opacity: 0.08;
}
.regime-cond-frame {
  fill: none;
  stroke: var(--border-soft);
}
.regime-cond-divider {
  stroke: var(--border-soft);
  stroke-dasharray: 3 4;
}
.regime-cond-quad {
  fill: var(--border-strong);
  font-size: 10px;
}
.regime-cond-axis {
  fill: var(--muted);
  font-size: 10px;
}
.regime-cond-trail-line {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1;
  opacity: 0.5;
}
.regime-cond-trail-dot {
  fill: var(--blue);
}
.regime-cond-date {
  fill: var(--muted-2);
  font-size: 10px;
  paint-order: stroke;
  stroke: var(--card);
  stroke-width: 1.5px;
  stroke-linejoin: round;
}
.regime-cond-date.current {
  fill: var(--text);
  font-weight: 600;
}
.regime-cond-dot {
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1;
}
.regime-cond-stress-ring {
  fill: none;
  stroke: var(--red-3);
  stroke-width: 1.6;
}
.regime-evidence-list {
  --regime-glyph-w: 14px;
  --regime-row-gap: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.regime-evidence-row {
  display: flex;
  align-items: baseline;
  gap: 5px var(--regime-row-gap);
  flex-wrap: wrap;
}
.regime-evidence-row .regime-lane-label {
  min-width: 128px;
}
.regime-evidence-glyph {
  flex: none;
  width: var(--regime-glyph-w);
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.regime-evidence-glyph.role-match { color: var(--green); }
.regime-evidence-glyph.role-contradiction { color: var(--red-6); }
.regime-evidence-glyph.role-holdout { color: var(--gold-3); }
.regime-evidence-glyph.role-missing { color: var(--muted); }
.regime-evidence-glyph.role-neutral { color: var(--border-strong); }
.regime-evidence-row.early-warning {
  /* An active leak is a leading warning; tint the row so it reads as a heads-up
     rather than just another status line. */
  background: rgba(212, 81, 81, 0.08);
  border-radius: 6px;
  padding: 3px 6px;
  margin: -3px -6px;
}
.regime-evidence-metrics {
  flex-basis: 100%;
  /* Indent so the wrapped numbers clear the glyph column and align under the label. */
  padding-left: calc(var(--regime-glyph-w) + var(--regime-row-gap));
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.regime-evidence-breakdown {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}
.regime-what-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.regime-what-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
}
.regime-what-target {
  font-weight: 600;
  white-space: nowrap;
}
.regime-what-target.tone-entry { color: var(--green); }
.regime-what-target.tone-confirmed { color: var(--teal-2); }
.regime-what-target.tone-caution { color: var(--gold-2); }
.regime-what-target.tone-stress { color: var(--red-3); }
.regime-what-target.tone-repair { color: var(--blue-2); }
.regime-what-detail {
  color: var(--muted);
}
.regime-history-strip {
  display: flex;
  gap: 1px;
  height: 14px;
  border-radius: 4px;
  overflow: hidden;
}
.regime-history-seg {
  flex-basis: 0;
  min-width: 1px;
  background: var(--border-strong);
}
.regime-history-seg.tone-entry { background: var(--green); }
.regime-history-seg.tone-confirmed { background: var(--teal-2); }
.regime-history-seg.tone-caution { background: var(--gold-2); }
.regime-history-seg.tone-stress { background: var(--red-3); }
.regime-history-seg.tone-repair { background: var(--blue-2); }
.regime-history-caption {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}
.regime-lanes {
  display: flex;
  align-items: baseline;
  gap: 4px 14px;
  flex-wrap: wrap;
}
.regime-lane {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}
.regime-lane-label {
  color: var(--muted);
  font-size: 12px;
}
.regime-lane-status {
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}
.regime-lane.driver .regime-lane-status {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.25);
  text-underline-offset: 3px;
}
.regime-lane-status.status-strong,
.regime-lane-status.status-stable,
.regime-lane-status.status-normal,
.regime-lane-status.status-supportive,
.regime-lane-status.status-calm,
.regime-lane-status.status-rising,
.regime-lane-status.status-attracting,
.regime-lane-status.status-cyclicalled {
  color: var(--teal-pale);
}
.regime-lane-status.status-weakening,
.regime-lane-status.status-elevated,
.regime-lane-status.status-watch,
.regime-lane-status.status-headwind,
.regime-lane-status.status-wakingup,
.regime-lane-status.status-falling,
.regime-lane-status.status-leaking,
.regime-lane-status.status-defensiveled {
  color: var(--gold-3);
}
.regime-lane-status.status-breaking,
.regime-lane-status.status-stressed,
.regime-lane-status.status-stretched,
.regime-lane-status.status-abovefive,
.regime-lane-status.status-fallinghard,
.regime-lane-status.status-leakinghard,
.regime-lane-status.status-stronglydefensive {
  color: var(--red-6);
}
.regime-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 9px;
  color: var(--muted);
  font-size: 12px;
}
.regime-evidence strong {
  color: var(--text);
  font-weight: 600;
}

/* Summary row above the pill row: preset chips on the left, the expander on the right. */
.indicator-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
/* Segmented control: three joined, mutually-exclusive segments. */
.segmented { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: clamp(5.5rem, 24vw, 7.25rem);
  padding: 4px clamp(16px, 5vw, 24px);
  border: none;
  border-left: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  opacity: 0.7;
  white-space: nowrap;
  transition: opacity 0.15s, background 0.15s;
}
.segment:first-child { border-left: none; }
.segment:hover { opacity: 1; }
.segment.active { opacity: 1; background: rgba(74, 144, 226, 0.22); }
/* Reuse the pill dot for a segment past its first state. */
.segment.has-dot::after {
  content: "";
  position: absolute;
  right: 10px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  opacity: 0;
}
.segment.has-dot.dot-on::after { opacity: 1; }
.pills-toggle {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 6px;
  white-space: nowrap;
}
.pills-toggle:hover { color: var(--text); }
.pills-toggle .toggle-chevron { font-size: 20px; line-height: 1; vertical-align: -3px; }
.indicator-toggles.is-collapsed { display: none; }
.indicator-toggles { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; margin-bottom: 8px; }
.ind-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  opacity: 0.5;
  white-space: nowrap;
  transition: opacity 0.15s, border-color 0.15s;
}
.ind-pill.on { opacity: 1; }
.ind-pill.on:not(.disabled) {
  border-color: var(--accent);
  background: rgba(74, 144, 226, 0.12);
}
.ind-pill:hover:not(.disabled) { border-color: var(--accent); }
.ind-pill.disabled { opacity: 0.3; cursor: not-allowed; }
/* Reusable deeper-state dot for multi-state pills that keep the shared affordance
   (Support, Volume, Margin, Insiders, Retail, Earnings). Space is always reserved
   so the dot never shifts layout. */
.ind-pill.has-dot::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  opacity: 0;
  flex: none;
}
.ind-pill.has-dot.dot-on::after { opacity: 1; }
.ind-label-wrap {
  display: inline-grid;
  align-items: center;
}
.ind-label-wrap > * { grid-area: 1 / 1; }
.ind-label-measure {
  display: inline-grid;
  visibility: hidden;
  pointer-events: none;
}
.ind-label-measure-item { grid-area: 1 / 1; }
.ind-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.ind-icon { width: 14px; height: 14px; display: inline-flex; flex: none; align-items: center; justify-content: center; }
.ind-icon.ind-emoji { width: auto; height: auto; font-size: 15px; line-height: 1; }
.ind-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.analyst-target-emoji-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 16px;
}
.analyst-target-emoji-line {
  position: absolute;
  left: 50%;
  bottom: 33%;
  width: 24px;
  height: 2px;
  border-radius: 999px;
  background: #e879b9;
  transform: translateX(-50%);
}
.analyst-target-emoji-mark .ind-icon {
  position: relative;
  z-index: 1;
}
.analyst-target-emoji-mark .ind-icon.ind-emoji {
  transform: translateX(2px);
}
.indicator-tooltip {
  position: fixed;
  z-index: 1100;
  width: min(420px, calc(100vw - 24px));
  min-width: 260px;
  min-height: 86px;
  max-width: calc(100vw - 16px);
  max-height: min(70vh, 430px);
  padding: 12px 14px;
  background: var(--tip-bg-solid);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
  white-space: normal;
  resize: both;
  overflow: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.indicator-tooltip.is-compact {
  width: max-content;
  min-width: 0;
  min-height: 0;
  max-width: min(520px, calc(100vw - 16px));
  max-height: none;
  padding: 6px 9px;
  resize: none;
  overflow: visible;
  white-space: normal;
  pointer-events: none;
}
.indicator-tooltip[hidden] { display: none; }

.insider-buying-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 8px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--insider-neon-border);
  background: var(--insider-neon-bg);
  font-size: 12px;
  line-height: 1.35;
}
.insider-buying-banner[hidden] { display: none; }
.insider-buying-banner-title {
  font-weight: 600;
  color: var(--insider-neon);
}
.insider-buying-banner-text { color: var(--text); }
.insider-buying-banner-link {
  margin-left: auto;
  color: var(--insider-neon);
  font-weight: 600;
  text-decoration: none;
}
.insider-buying-banner-link:hover,
.insider-buying-banner-link:focus-visible {
  text-decoration: underline;
}

.leverage-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 8px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid;
  font-size: 12px;
  line-height: 1.35;
}
.leverage-banner[hidden] { display: none; }
.leverage-banner-title { font-weight: 600; }
.psych-support-cards {
  display: flex;
  flex-wrap: wrap;
  column-gap: 8px;
  align-items: flex-start;
}
.psych-support-card {
  --psych-card-accent: var(--purple-2);
  position: relative;
  flex: 1 1 100%;
  min-width: 0;
  transition: flex-basis 220ms ease, width 220ms ease, min-height 220ms ease,
    padding 220ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.leveraged-etf {
  margin: 0 0 8px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(176, 142, 229, 0.05);
  font-size: 12px;
  line-height: 1.35;
}
.leveraged-etf[hidden] { display: none; }
/* Market-participation self-check (prd/market-participation.md), shared by the
   solo benchmark view and the portfolio-charter explainer. */
.market-participation { margin: 0 0 8px; font-size: 12px; line-height: 1.4; }
.market-participation[hidden] { display: none; }
.market-participation-box {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.market-participation-box > summary { cursor: pointer; font-weight: 600; color: var(--text); }
.market-participation-body { margin-top: 8px; }
.market-readiness-intro { margin: 0 0 8px; }
.market-readiness-list { display: grid; gap: 5px; }
.market-readiness-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 7px 8px;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  background: var(--tint-raise);
}
.market-readiness-item[data-state='clear'] { border-color: var(--green-2); }
.market-readiness-item[data-state='flagged'] { border-color: var(--amber); }
.market-readiness-item[data-market-part-item='discipline'][data-state='flagged'] {
  border-color: var(--market-readiness-danger);
  box-shadow: 0 0 12px rgba(239, 83, 80, 0.35);
}
.market-readiness-copy { flex: 1 1 440px; min-width: 0; }
.market-readiness-question { margin: 0; color: var(--text); }
.market-readiness-note { margin: 3px 0 0; }
.market-readiness-note:empty { margin: 0; }
.market-readiness-guidance { margin: 3px 0 0; color: var(--amber); }
.market-readiness-guidance:empty { margin: 0; }
.market-readiness-actions { display: inline-flex; gap: 4px; }
.market-readiness-answer {
  min-width: 44px;
  min-height: 28px;
  padding: 3px 10px;
  border: 1px solid var(--border-mid);
  border-radius: 999px;
  background: transparent;
  color: var(--muted-2);
  font: inherit;
  cursor: pointer;
}
.market-readiness-answer:hover { border-color: var(--text); color: var(--text); }
.market-readiness-answer:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.market-readiness-item[data-state='clear'] .market-readiness-answer[aria-pressed='true'] {
  border-color: var(--green-2);
  background: rgba(65, 185, 128, 0.15);
  color: var(--green);
}
.market-readiness-item[data-state='flagged'] .market-readiness-answer[aria-pressed='true'] {
  border-color: var(--amber);
  background: rgba(226, 164, 85, 0.12);
  color: var(--amber);
}
.market-readiness-item[data-market-part-item='discipline'][data-state='flagged'] .market-readiness-answer[aria-pressed='true'] {
  border-color: var(--market-readiness-danger);
  background: rgba(239, 83, 80, 0.12);
  color: var(--market-readiness-danger);
}
.market-readiness-item[data-market-part-item='discipline'][data-state='flagged'] .market-readiness-guidance {
  color: var(--market-readiness-danger);
}
.market-readiness-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--border-mid);
  border-radius: 6px;
  color: var(--muted-2);
}
.market-readiness-status-mark {
  display: inline-grid;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-weight: 700;
}
.market-readiness-status-detail { display: block; margin-top: 1px; font-size: 11px; font-weight: 400; }
.market-readiness-status[data-tone='ready'] {
  border-color: var(--green-2);
  background: rgba(65, 185, 128, 0.1);
  color: var(--green);
}
.market-readiness-status[data-tone='review'] {
  border-color: var(--amber);
  background: rgba(226, 164, 85, 0.08);
  color: var(--amber);
}
.market-participation-disclaimer { margin: 6px 0 0; font-style: italic; }
.letf-identity { display: block; font-weight: 600; color: var(--text); }
.letf-what { display: block; margin-top: 6px; font-size: 12px; }
.letf-list { list-style: none; margin: 4px 0 0; padding: 0; }
.letf-evidence { padding-left: 10px; }
.letf-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; padding: 2px 0; }
.letf-sym { font-weight: 600; color: var(--text); }
.letf-conclusion { font-weight: 600; padding: 2px 0; }
.letf-metric { padding: 1px 0; }
.letf-lag { padding: 1px 0; font-size: 11px; }
.letf-froth[data-level='calm'] { color: var(--muted); }
.letf-froth[data-level='elevated'] { color: var(--gold); }
.letf-froth[data-level='hot'] { color: var(--red-2); }
.letf-crowding[data-level='low'] { color: var(--muted); }
.letf-crowding[data-level='elevated'] { color: var(--gold); }
.letf-crowding[data-level='high'] { color: var(--red-2); }
/* Identity-rationale popover: a details element inline after the identity line. */
.letf-info { display: inline; }
.letf-info > summary {
  display: inline;
  list-style: none;
  cursor: pointer;
  color: var(--muted);
  font-weight: 400;
}
.letf-info > summary::-webkit-details-marker { display: none; }
.letf-info > summary:hover { color: var(--text); }
.letf-info-body {
  margin: 6px 0 2px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-weight: 400;
  font-size: 12px;
  color: var(--muted);
}
.letf-info-text { margin: 0; }
.letf-info-ref { margin: 6px 0 0; font-size: 11px; }
.leverage-banner-reasons { color: var(--muted); }
/* Amber caution / red danger, tuned to the chart's existing up/down tones. */
.leverage-banner[data-level='caution'] {
  border-color: #b8860b;
  background: rgba(240, 183, 11, 0.10);
}
.leverage-banner[data-level='caution'] .leverage-banner-title { color: var(--gold); }
.leverage-banner[data-level='danger'] {
  border-color: #e25563;
  background: rgba(226, 85, 99, 0.12);
}
.leverage-banner[data-level='danger'] .leverage-banner-title { color: var(--red-2); }
/* Green third state: margin conditions favorable (conditions, not permission). */
.leverage-banner[data-level='favorable'] {
  border-color: #3d6b45;
  background: rgba(111, 191, 115, 0.10);
}
.leverage-banner[data-level='favorable'] .leverage-banner-title { color: var(--green); }
.leverage-banner-margin {
  flex-basis: 100%;
  color: var(--muted);
}

/* Drawdown context line (below the leverage banner; prd/drawdown-context.md). Calm blue-grey:
   its job is to lower the temperature during a drawdown, not to warn. */
.drawdown-context {
  --psych-card-accent: var(--sky-3);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 8px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #3d5a6b;
  background: rgba(91, 141, 226, 0.08);
  font-size: 12px;
  line-height: 1.35;
}
.drawdown-context[hidden] { display: none; }
.drawdown-context-title { font-weight: 600; color: var(--sky-3); }
.drawdown-context-text { color: var(--muted); }

.volatility-context {
  --psych-card-accent: var(--cyan-2);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 8px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #45636f;
  background: rgba(126, 176, 198, 0.08);
  font-size: 12px;
  line-height: 1.35;
}
.volatility-context[hidden] { display: none; }
.volatility-context-title { font-weight: 600; color: var(--cyan-2); }
.volatility-context-text { color: var(--muted); }

.stretch-readout {
  --psych-card-accent: var(--cyan-2);
  position: relative;
  margin: 0 0 8px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #45636f;
  background: rgba(126, 176, 198, 0.08);
  font-size: 12px;
  line-height: 1.35;
}
.stretch-readout[hidden] { display: none; }
.stretch-readout-title { font-weight: 600; color: var(--cyan-2); margin-right: 8px; }
.stretch-readout-text { color: var(--muted); }
.stretch-readout .psych-card-content-inner { color: var(--muted); }
.stretch-readout-intro { margin: 6px 0 4px; }
.stretch-readout-rows { margin: 0 0 6px; padding-left: 18px; }
.stretch-readout-rows li { margin: 2px 0; }
.stretch-readout-disclaimer { margin: 6px 0 0; font-style: italic; opacity: 0.85; }

/* A card's content collapses without being discarded, so async repaints can keep the user's
   page-session choice. The card itself becomes a color-matched 44px info tile; collapsed siblings
   therefore pack into one row in .psych-support-cards. */
.psych-support-card:not([data-collapsed='true']) {
  padding-right: 40px;
}
.psych-card-content {
  display: grid;
  grid-template-rows: 1fr;
  width: 100%;
  min-width: 0;
  opacity: 1;
  transition: grid-template-rows 220ms ease, opacity 160ms ease;
}
.psych-card-content-inner {
  min-height: 0;
  overflow: hidden;
}
.drawdown-context .psych-card-content-inner,
.volatility-context .psych-card-content-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}
.psych-card-toggle {
  position: absolute;
  z-index: 1;
  top: 5px;
  right: 7px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--psych-card-accent);
  font: inherit;
  cursor: pointer;
  transition: inset 220ms ease, width 220ms ease, height 220ms ease,
    background-color 160ms ease, transform 160ms ease;
}
.psych-card-toggle:hover { background: var(--tint-raise-2); }
.psych-card-toggle:focus-visible {
  outline: 2px solid var(--psych-card-accent);
  outline-offset: -3px;
}
.psych-card-collapse-symbol,
.psych-card-info-symbol {
  grid-area: 1 / 1;
  transition: opacity 140ms ease, transform 180ms ease;
}
.psych-card-collapse-symbol {
  opacity: 1;
  font-size: 20px;
  line-height: 1;
}
.psych-card-info-symbol {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.65);
  font-size: 12px;
  font-weight: 700;
  font-family: Georgia, serif;
  line-height: 1;
}
.psych-support-card[data-collapsed='true'] {
  flex: 0 0 44px;
  width: 44px;
  min-height: 44px;
  padding: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.psych-support-card[data-collapsed='true'] .psych-card-content {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
}
.psych-support-card[data-collapsed='true'] .psych-card-toggle {
  inset: 0;
  width: 100%;
  height: 100%;
}
.psych-support-card[data-collapsed='true'] .psych-card-collapse-symbol {
  opacity: 0;
  transform: rotate(90deg) scale(0.65);
}
.psych-support-card[data-collapsed='true'] .psych-card-info-symbol {
  opacity: 1;
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .psych-support-card,
  .psych-card-content,
  .psych-card-toggle,
  .psych-card-collapse-symbol,
  .psych-card-info-symbol {
    transition: none;
  }
}

/* Deployment schedule (prd/allocation-handoff.md, stage 4). Desk-facing readout in the chart panel,
   styled like the sibling readouts above. Not gated by the Manager-only #ladder-plan rule. */
.deployment-schedule {
  margin: 0 0 8px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #7a5f2e;
  background: rgba(224, 160, 48, 0.08);
  font-size: 12px;
  line-height: 1.4;
}
.deployment-schedule[hidden] { display: none; }
.deployment-schedule-title { font-weight: 600; color: #ffb36b; display: block; margin-bottom: 4px; }
.deploy-summary { margin: 2px 0; }
.deploy-tranches { list-style: none; margin: 4px 0; padding: 0; }
.deploy-tranche { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 2px 0; }
.deploy-totals, .deploy-empty, .deploy-prefill { margin: 4px 0 0; color: var(--muted); }

.execution-constraints {
  margin: 0 0 8px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(126, 176, 198, 0.06);
  font-size: 12px;
  line-height: 1.4;
}
.execution-constraints[hidden] { display: none; }
.execution-constraints-title { font-weight: 600; color: var(--cyan-2); }
.exec-rules { margin: 4px 0 0; padding-left: 18px; }
.exec-rules li { margin: 3px 0; color: var(--muted); }
.exec-status { color: var(--amber-1, #e0a030); font-weight: 600; }
.exec-behavioral { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--border); }
.exec-behavioral-title { margin: 0 0 4px; font-weight: 600; color: var(--cyan-2); }
.exec-quotes { margin: 0; padding-left: 18px; }
.exec-quotes li { margin: 3px 0; color: var(--muted); }
.exec-quote-date { font-size: 11px; opacity: 0.8; }
.deploy-saledate { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--border); }
.deploy-saledate-recorded { margin: 0 0 4px; }
.deploy-saledate-hint { margin: 4px 0 0; color: var(--muted); }
.deploy-badge { font-size: 11px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--border); }
.deploy-proposed { color: var(--muted); }
.deploy-confirmed { color: #ffb36b; border-color: #7a5f2e; }
.deploy-done { color: var(--muted); text-decoration: line-through; }
.deploy-form { margin-top: 6px; }

/* Experimental paycheck plan section at the top of the main page (prd/paycheck-ladder.md). */
.ladder-plan {
  margin: 0;
  padding: 1px 0 7px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.5;
}
.ladder-plan[hidden] { display: none; }
.ladder-plan .muted { color: var(--muted); }
.ladder-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}
.ladder-kicker {
  background: none;
  border: none;
  padding: 0;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.ladder-kicker:hover { color: var(--text); }
.ladder-toggle {
  margin-left: auto;
  background: none;
  border: none;
  padding: 2px 6px;
  color: var(--muted);
  font: inherit;
  line-height: 1;
  font-size: 22px;
  cursor: pointer;
}
.ladder-toggle:hover { color: var(--text); }
.ladder-payday-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 3px 10px;
  border: 1px solid #3d6b45;
  border-radius: 8px;
  background: rgba(111, 191, 115, 0.10);
}
.ladder-payday-pending { color: var(--muted); }
/* Trim rows are the sell side: amber, matching the leverage warning's caution tone. */
.ladder-trim-row {
  border-color: #b8860b;
  background: rgba(240, 183, 11, 0.10);
}
.ladder-trim-block {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}
.ladder-assist-block {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}
.ladder-callsell-block {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}
.ladder-callsell { color: var(--text); }
/* The earnings-gap guard is a caution, so it borrows the amber caution tone. */
.ladder-callsell-earnings { color: var(--amber); }
.ladder-trim-rungs {
  margin: 0 0 6px;
  padding-left: 18px;
}
.ladder-core { color: var(--text); }
.ladder-core-breach { color: var(--amber); }

.ladder-plan-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
/* display:flex would defeat the [hidden] attribute's default display:none. */
.ladder-plan-detail[hidden] { display: none; }
.ladder-invest {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  font-size: 12px;
}
.ladder-invest p { margin: 0 0 6px; }
.ladder-invest-ticker { font-weight: 600; }
.ladder-current { font-size: 13px; }
.ladder-override { color: var(--gold); }
.ladder-ledger summary { cursor: pointer; color: var(--muted); }
.ladder-ledger table {
  margin: 6px 0;
  border-collapse: collapse;
}
.ladder-ledger th,
.ladder-ledger td {
  padding: 2px 10px 2px 0;
  text-align: left;
  font-weight: normal;
  color: var(--muted);
}
.ladder-ledger th { border-bottom: 1px solid var(--border); }
.ladder-ledger-total td {
  border-top: 1px solid var(--border);
  color: var(--text);
}
.ladder-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: end;
  margin: 0 0 6px;
}
.ladder-form label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--muted);
}
.ladder-form input,
.ladder-form select,
.ladder-form button,
.ladder-action {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font: inherit;
}
.ladder-form button,
.ladder-action { cursor: pointer; }
.ladder-form button:hover,
.ladder-action:hover { border-color: var(--accent); }
.planrec-form {
  display: grid;
  gap: 12px;
  align-items: stretch;
}
.planrec-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(138, 143, 152, 0.18);
  border-radius: 8px;
  background: rgba(138, 143, 152, 0.05);
}
.planrec-card-title,
.planrec-summary {
  margin: 0;
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 700;
}
.planrec-disclosure {
  padding: 0;
  overflow: hidden;
}
.planrec-summary {
  cursor: pointer;
  padding: 12px;
}
.planrec-disclosure[open] > .planrec-summary {
  border-bottom: 1px solid rgba(138, 143, 152, 0.16);
}
.planrec-disclosure-body {
  display: grid;
  gap: 12px;
  padding: 12px;
}
.planrec-card-grid,
.planrec-foundation-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.planrec-form .planrec-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.planrec-form .planrec-field > label { color: var(--muted); }
.planrec-form .planrec-field-wide { grid-column: 1 / -1; }
.planrec-form .ladder-hint { margin: 0; }
.planrec-form textarea,
.planrec-form input,
.planrec-form select {
  width: 100%;
  box-sizing: border-box;
}
.planrec-form textarea {
  min-height: 116px;
  line-height: 1.45;
  resize: vertical;
  overflow: hidden;
}
.planrec-starter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.planrec-starter {
  max-width: 100%;
  text-align: left;
  white-space: normal;
  line-height: 1.35;
  font-size: 11px;
}
.planrec-choice {
  min-width: 76px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
}
.planrec-actions {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}
.planrec-card-empty .ladder-hint { margin: 0; }
.planrec-card-empty .planrec-actions { margin-top: 4px; }
.planrec-form textarea[name="thesis-company"] { min-height: 88px; }

/* Volatility expectations (prd/volatility-expectations.md): narrative-first context beside the
   thesis note. Each line owns its matching raw inputs through a collapsed disclosure. */
.vol-expect {
  display: grid;
  gap: 0;
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid rgba(226, 164, 85, 0.24);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(226, 164, 85, 0.08), rgba(138, 143, 152, 0.03));
}
.vol-expect-head { padding: 12px 14px 10px; }
.ladder-invest .vol-expect-title {
  margin: 0;
  color: var(--gold-4);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ladder-invest .vol-expect-intro {
  margin: 3px 0 0;
  font-size: 11px;
  line-height: 1.4;
}
.vol-expect-item {
  border-top: 1px solid rgba(138, 143, 152, 0.16);
}
.vol-expect-item > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 11px 14px;
  list-style: none;
  cursor: pointer;
}
.vol-expect-item > summary::-webkit-details-marker { display: none; }
.vol-expect-item > summary:hover { background: rgba(255, 255, 255, 0.025); }
.vol-expect-narrative {
  color: var(--text);
  line-height: 1.55;
}
.vol-expect-toggle {
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.vol-expect-hide { display: none; }
.vol-expect-item[open] .vol-expect-show { display: none; }
.vol-expect-item[open] .vol-expect-hide { display: inline; }
.vol-expect-raw {
  display: grid;
  gap: 6px;
  margin: 0 14px 12px;
  padding: 10px 12px;
  border: 1px solid rgba(138, 143, 152, 0.16);
  border-radius: 7px;
  background: rgba(7, 10, 15, 0.16);
}
.vol-expect-raw-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  color: var(--muted);
  font-size: 11px;
}
.vol-expect-raw-row strong {
  color: var(--text);
  font-weight: 600;
  text-align: right;
}
.vol-expect-source { color: var(--accent); text-decoration: none; white-space: nowrap; }
.vol-expect-source:hover { text-decoration: underline; }
.vol-expect-case {
  margin: 0;
  padding: 11px 14px 12px;
  border-top: 1px solid rgba(138, 143, 152, 0.16);
}
.vol-expect-case-label {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.ladder-invest .vol-expect-case p { margin: 0; color: var(--muted); line-height: 1.5; }
@media (max-width: 620px) {
  .vol-expect-item > summary { grid-template-columns: 1fr; gap: 6px; }
  .vol-expect-raw-row { grid-template-columns: 1fr; gap: 1px; }
  .vol-expect-raw-row strong { text-align: left; }
}

.chart-wrap {
  --chart-surface-height: clamp(540px, 68vh, 760px);
  position: relative;
}
.chart-panel { overflow-anchor: none; }
#chart {
  position: relative;
  height: var(--chart-surface-height);
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  opacity: 1;
  filter: none;
  transform: translateZ(0);
  transition: opacity 320ms ease, filter 320ms ease;
}
.cycle-chart {
  position: absolute;
  z-index: 6;
  top: 0;
  left: 0;
  height: var(--chart-surface-height);
  min-height: var(--chart-surface-height);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 18px 20px 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateZ(0);
  transition: opacity 320ms ease, visibility 0s linear 320ms;
}
.cycle-chart[hidden] { display: none; }
.chart-panel[data-chart-mode='oscillator'] #chart {
  opacity: 0.42;
  filter: saturate(0.55) brightness(0.82);
}
.chart-panel[data-chart-mode='cycles'] #chart { opacity: 0; }
.chart-panel:is([data-chart-mode='oscillator'], [data-chart-mode='cycles']) .cycle-chart {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.chart-panel[data-chart-mode='oscillator'] .cycle-chart[data-cycle-overlay='true'] {
  padding: 0;
  background: color-mix(in srgb, var(--panel) 18%, transparent);
  border: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue-2) 36%, var(--border));
}
.cycle-chart[data-cycle-overlay='true'] .cycle-chart-head {
  position: absolute;
  z-index: 4;
  top: 12px;
  left: 12px;
  right: 12px;
  align-items: center;
  pointer-events: none;
}
.cycle-chart[data-cycle-overlay='true'] .cycle-chart-copy {
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--blue-2) 28%, var(--border));
  border-radius: 7px;
  background: color-mix(in srgb, var(--tip-bg-solid) 90%, transparent);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
}
.cycle-chart[data-cycle-overlay='true'] .cycle-chart-copy p { display: none; }
.cycle-chart[data-cycle-overlay='true'] .cycle-chart-count {
  background: color-mix(in srgb, var(--tip-bg-solid) 90%, transparent);
  border-color: color-mix(in srgb, var(--blue-2) 28%, var(--border));
  color: var(--text-strong);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
}
.cycle-chart[data-cycle-overlay='true'] .cycle-plot-wrap {
  position: absolute;
  inset: 0;
}
.cycle-chart[data-cycle-overlay='true'] .oscillator-date-guide { opacity: 0.86; }
.cycle-chart[data-cycle-overlay='true'] .oscillator-right-tick { fill: var(--text); }
.chart-panel:is([data-chart-mode='oscillator'], [data-chart-mode='cycles']) .range-presets,
.chart-panel:is([data-chart-mode='oscillator'], [data-chart-mode='cycles']) .indicator-bar,
.chart-panel:is([data-chart-mode='oscillator'], [data-chart-mode='cycles']) #indicators,
.chart-panel:is([data-chart-mode='oscillator'], [data-chart-mode='cycles']) #strip-panel,
.chart-panel:is([data-chart-mode='oscillator'], [data-chart-mode='cycles']) #mcap-legend,
.chart-panel:is([data-chart-mode='oscillator'], [data-chart-mode='cycles']) #chart-msg {
  visibility: hidden;
  pointer-events: none;
}
.chart-panel[data-chart-mode='oscillator'] .interval-toggle {
  visibility: hidden;
  pointer-events: none;
}
.chart-panel:is([data-chart-mode='oscillator'], [data-chart-mode='cycles']) #psychological-support-cards {
  display: none;
}
.chart-panel:is([data-chart-mode='oscillator'], [data-chart-mode='cycles']) #strip-panel { overflow: hidden; }
.cycle-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.cycle-chart-copy { min-width: 0; }
.cycle-chart-head h3 {
  margin: 0;
  color: var(--text-strong);
  font-size: 17px;
  line-height: 1.3;
}
.cycle-chart-head p { margin: 4px 0 0; color: var(--muted-2); font-size: 14px; line-height: 1.4; }
.cycle-chart-head .cycle-chart-note { color: var(--muted); font-size: 13px; }
.cycle-chart-status {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.cycle-chart-count {
  flex: 0 0 auto;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted-2);
  font-size: 13px;
  white-space: nowrap;
}
.cycle-chart-insight { color: var(--text); font-size: 13px; font-weight: 650; white-space: nowrap; }
.cycle-plot-wrap {
  flex: 1 1 auto;
  position: relative;
  min-height: 0;
  overflow: hidden;
}
.cycle-plot { display: block; width: 100%; height: 100%; min-height: 0; overflow: visible; }
.cycle-plot:focus-visible {
  outline: 2px solid var(--blue-2);
  outline-offset: -2px;
}
.cycle-grid-line { stroke: var(--card-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cycle-axis-tick { fill: var(--muted-2); font-size: 13px; }
.cycle-axis-label { fill: var(--text); font-size: 13px; font-weight: 650; letter-spacing: 0.01em; }
.cycle-axis-caption { fill: var(--muted-2); }
.cycle-reference {
  stroke: var(--muted);
  stroke-width: 1.25;
  stroke-dasharray: 5 6;
  opacity: 0.75;
  vector-effect: non-scaling-stroke;
}
.cycle-reference-label { fill: var(--muted-2); font-size: 13px; font-weight: 600; }
.cycle-region-label,
.oscillator-zone-label {
  fill: var(--muted-2);
  font-size: 13px;
  font-weight: 600;
}
.cycle-line {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.3;
  vector-effect: non-scaling-stroke;
}
.cycle-line.is-recent { stroke: var(--blue); stroke-width: 3; opacity: 1; }
.cycle-summary-band { fill: var(--teal); opacity: 0.13; }
.cycle-median-line {
  fill: none;
  stroke: var(--teal);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.oscillator-zone { fill: var(--accent); opacity: 0.045; }
.oscillator-zone.is-low { fill: #ff9f8f; }
.cycle-chart[data-cycle-overlay='true'] .oscillator-zone { opacity: 0.11; }
.cycle-chart[data-cycle-overlay='true'] .oscillator-zone.is-low { opacity: 0.09; }
.oscillator-line {
  fill: none;
  stroke: #8ba7ff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.cycle-chart[data-cycle-overlay='true'] .oscillator-line {
  stroke: #9bb2ff;
  stroke-width: 3.5;
  filter: drop-shadow(0 1px 3px rgba(18, 35, 80, 0.75));
}
.oscillator-endpoint {
  fill: #8ba7ff;
  stroke: var(--panel);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.oscillator-current-label {
  fill: #8ba7ff;
  font-size: 13px;
  font-weight: 700;
}
.cycle-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin: 0;
  padding: 0;
  color: var(--muted-2);
  font-size: 13px;
  list-style: none;
}
.cycle-legend-item { min-width: 0; display: flex; align-items: center; gap: 7px; }
.cycle-legend-item.is-recent { color: var(--text); }
.cycle-legend-swatch {
  flex: 0 0 auto;
  width: 20px;
  height: 3px;
  border-radius: 999px;
  background: var(--muted);
}
.cycle-legend-item.is-range .cycle-legend-swatch { height: 9px; background: color-mix(in srgb, var(--teal) 28%, transparent); }
.cycle-legend-item.is-typical .cycle-legend-swatch { background: var(--teal); }
.cycle-legend-item.is-recent .cycle-legend-swatch { background: var(--blue); }
.cycle-crosshair {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.cycle-crosshair[hidden] { display: none; }
.cycle-crosshair-line {
  position: absolute;
  top: 20px;
  bottom: 36px;
  width: 1px;
  background: rgba(199, 204, 214, 0.75);
}
.cycle-crosshair-marker {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: var(--teal);
  transform: translate(-50%, -50%);
}
.cycle-crosshair-marker.is-secondary { background: var(--blue); }
.cycle-crosshair-readout {
  position: absolute;
  top: 7px;
  left: 78px;
  max-width: calc(100% - 116px);
  padding: 5px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--tip-bg-solid);
  color: var(--text-bright-2);
  font: 650 13px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
}
.cycle-crosshair-axis {
  position: absolute;
  bottom: 0;
  max-width: 180px;
  padding: 3px 6px;
  border-radius: 4px;
  background: #2f62d6;
  color: var(--text-strong);
  font: 650 13px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  white-space: nowrap;
  transform: translateX(-50%);
}
.cycle-crosshair.is-left .cycle-crosshair-axis { transform: none; }
.cycle-crosshair.is-right .cycle-crosshair-axis { transform: translateX(-100%); }
.cycle-chart-empty {
  min-height: clamp(500px, 64vh, 720px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--muted);
  text-align: center;
}
.cycle-chart-empty strong { color: var(--text-strong); font-size: 17px; }
.cycle-chart-empty span { max-width: 34rem; font-size: 14px; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) {
  #chart,
  .cycle-chart { transition: none; }
}
#chart.range-select-active {
  cursor: crosshair;
  touch-action: none;
}
.dash-calendar-grid {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  overflow: hidden;
}
.dash-calendar-grid[hidden],
.dash-calendar-axis[hidden] {
  display: none;
}
.dash-calendar-grid-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-0.5px);
  background: var(--card-2);
}
.dash-calendar-axis {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28px;
  pointer-events: none;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
}
.dash-calendar-axis-label {
  position: absolute;
  bottom: 6px;
  transform: translateX(-50%);
  white-space: nowrap;
  line-height: 1;
}
.dash-calendar-axis-cursor {
  position: absolute;
  bottom: 3px;
  transform: translateX(-50%);
  z-index: 1;
  padding: 3px 7px;
  border: 1px solid var(--border-mid);
  border-radius: 4px;
  background: var(--card-2);
  color: var(--text-strong);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.dash-calendar-axis-cursor::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -7px;
  width: 1px;
  height: 7px;
  transform: translateX(-0.5px);
  background: var(--muted-2);
}
.dash-calendar-axis-cursor[hidden] {
  display: none;
}
.chart-range-selection {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 6;
  border-left: 1px solid rgba(79, 209, 197, 0.95);
  border-right: 1px solid rgba(79, 209, 197, 0.95);
  background: rgba(79, 209, 197, 0.16);
  pointer-events: none;
}
.chart-range-selection[hidden] {
  display: none;
}
.chart-msg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--muted);
}
.chart-delay { color: var(--muted); font-size: 11px; margin: 6px 0 0; }
.mcap-legend { color: var(--muted); font-size: 12px; margin: 0 0 6px; }
/* The candle/market-cap readout overlays the chart's top-left corner instead of taking a layout row.
   z-index 7 sits above the range-selection band (6) and far below the fixed tooltips (1000). */
#mcap-legend {
  position: absolute;
  top: 6px;
  left: 8px;
  right: 8px;
  --chart-readout-date-width: 11ch;
  --chart-readout-price-width: 9ch;
  --chart-readout-volume-width: 6ch;
  z-index: 7;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  pointer-events: none;
  gap: 2px 7px;
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100% - 16px);
  margin: 0;
  padding: 3px 6px;
  background: var(--chart-overlay-bg);
  border-radius: 4px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
#mcap-legend.empty { visibility: hidden; }
#mcap-legend .readout-token { pointer-events: auto; }
.chart-readout-date {
  color: var(--text);
  display: inline-block;
  font-weight: 700;
  white-space: nowrap;
  width: var(--chart-readout-date-width);
}
.chart-readout-field,
.chart-readout-marketcap,
.chart-readout-floor,
.chart-readout-rs,
.chart-readout-analyst-warning {
  white-space: nowrap;
}
.chart-readout-field {
  display: inline-grid;
  align-items: baseline;
  column-gap: 3px;
}
.chart-readout-price { grid-template-columns: var(--chart-readout-price-width) auto; }
.chart-readout-volume { grid-template-columns: var(--chart-readout-volume-width) auto; }
.chart-readout-label { color: var(--muted); font-size: 11px; }
.chart-readout-value {
  color: var(--text-bright);
  justify-self: end;
  text-align: right;
}
.chart-readout-field.up .chart-readout-value { color: var(--teal); }
.chart-readout-field.down .chart-readout-value { color: var(--red-2); }
.chart-readout-analyst-warning {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border: 1px solid rgba(255, 179, 107, 0.42);
  border-radius: 999px;
  background: rgba(255, 179, 107, 0.14);
}
.chart-readout-analyst-warning .readout-token {
  color: var(--amber);
  font-weight: 700;
}
/* Custom hover tooltip for the RSI Floor dot (a canvas dot can't carry a native title). */
.floor-tooltip {
  position: fixed;
  z-index: 1000;
  max-width: 300px;
  padding: 8px 10px;
  background: var(--tip-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.floor-tooltip.floor-tooltip-interactive { pointer-events: auto; }
.floor-tooltip[hidden] { display: none; }
.floor-tooltip-main { margin: 0; }
.floor-tooltip-label {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}
.floor-tooltip-label.positive {
  color: var(--teal);
  background: rgba(99, 208, 195, 0.12);
  border: 1px solid rgba(99, 208, 195, 0.28);
}
.floor-tooltip-label.caution {
  color: var(--orange-2);
  background: rgba(200, 121, 47, 0.16);
  border: 1px solid rgba(200, 121, 47, 0.34);
}
.floor-tooltip-context {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 2px 9px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(138, 143, 152, 0.22);
  font-size: 11px;
}
.floor-tooltip-context-label {
  color: var(--muted);
}
.floor-tooltip-context-value {
  color: var(--text);
  font-weight: 650;
  min-width: 0;
}
.floor-tooltip-context-value.tone-easing,
.floor-tooltip-context-value.tone-supportive {
  color: var(--teal);
}
.floor-tooltip-context-value.tone-mixed {
  color: var(--amber);
}
.floor-tooltip-context-value.tone-hostile {
  color: var(--red-2);
}
.floor-tooltip a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Themed hover tooltip for bars/segments on the Fundamentals tab (see ensureFinBarTip in
   content.js). One reused element, positioned cursor-relative. Mirrors .floor-tooltip. */
.fin-bar-tip {
  position: fixed;
  z-index: 1000;
  max-width: min(260px, calc(100vw - 16px));
  padding: 6px 9px;
  background: var(--tip-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.fin-bar-tip[hidden] { display: none; }
/* Feedback that a bar carries a hover value. */
.fin-mini-bar,
.fin-rev-bar,
.fin-guidance-bar,
.conc-seg,
.customer-mix-seg,
.cashdebt-bar,
.fin-timing-bar { cursor: default; }
.fin-mini-bar:hover,
.fin-rev-bar:hover { opacity: 1; filter: brightness(1.15); }
.conc-seg:hover,
.customer-mix-seg:hover { filter: brightness(1.2); }
.floor-signal-list {
  list-style: none;
  margin: 7px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.floor-signal-item {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
  gap: 6px;
  color: var(--muted);
}
.floor-signal-item.aligned {
  color: var(--text);
  font-weight: 600;
}
.floor-signal-check {
  display: inline-grid;
  place-items: center;
  width: 16px;
  min-height: 1.35em;
  color: var(--accent);
  font-weight: 800;
  line-height: 1;
}
.floor-signal-item:not(.aligned) .floor-signal-check::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 0.38em;
  border-radius: 50%;
  border: 1px solid rgba(138, 143, 152, 0.55);
}
/* Insider tooltip grouping: prominent name (floor-tooltip-main) + trade, then a muted, smaller
   context block set off by a divider, so the tooltip scans instead of reading as a wall of text. */
.insider-tip-role { color: var(--muted); font-size: 11px; }
.insider-tip-trade { margin: 2px 0 0; }
.insider-tip-context { color: var(--muted); font-size: 11px; line-height: 1.35; }
.capital-tip-fact { margin: 2px 0 0; }
.capital-tip-context { color: var(--muted); font-size: 11px; line-height: 1.35; }
/* Divider above the first context line (the one right after the trade line). `:first-of-type`
   would not work: all tooltip children are divs, so it only matches the name line. */
.insider-tip-trade + .insider-tip-context { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.capital-tip-fact + .capital-tip-context { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
/* Secondary/meta lines in chart-overlay tooltips, set off below the main facts. */
.floor-tooltip-warning {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
}
/* Links inside the legends/notes (e.g. the FINRA margin-debt source) need a readable color on the
   dark background; the browser default link blue is too dark. */
.mcap-legend a { color: var(--accent); text-decoration: underline; }

/* Section 3: content */
/* Underline-style tab bar: tabs sit on a shared rail, the active one underlined. */
.content-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
/* display:flex would defeat the [hidden] attribute's default display:none. */
.content-tabs[hidden] { display: none; }
.content-tab {
  background: transparent;
  color: var(--muted);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  padding: 8px 14px;
  cursor: pointer;
  font: inherit;
}
.content-tab:hover { color: var(--text); }
.content-tab.active { color: var(--text-strong); border-bottom-color: var(--accent); }
.tab-badge {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
  margin-left: 2px;
}
.tab-more { color: var(--accent); }
.why-summary { margin: 0; line-height: 1.55; color: var(--text); }
.why-summary + .why-summary { margin-top: 10px; }
.why-date { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.why-risk { margin: 0; line-height: 1.55; color: var(--text); }
/* Thesis register toggle ("My words" / "Plain English"), styled like the lang picker. */
.thesis-register-row {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
}
.thesis-register {
  background: var(--card);
  color: var(--muted);
  border: none;
  border-left: 1px solid var(--border);
  padding: 4px 10px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.thesis-register:first-child { border-left: none; }
.thesis-register:hover:not(.active) { color: var(--text-strong); }
.thesis-register.active { background: var(--accent); color: #fff; }
/* The toggle row precedes the first thesis heading; keep the heading snug under it. */
.thesis-register-row + .group-head { margin-top: 0; }

.content-body {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  min-height: 120px;
}
.ticker-coverage-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: clamp(18px, 3vw, 28px);
  min-height: 220px;
}
.ticker-coverage-card { max-width: 760px; }
.ticker-coverage-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.ticker-coverage-eyebrow {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ticker-coverage-head h2 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  color: var(--text-strong);
  font-size: 22px;
}
.ticker-coverage-head h2:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.ticker-coverage-symbol { letter-spacing: 0.02em; }
.ticker-coverage-company { color: var(--muted); font-size: 16px; font-weight: 500; }
.ticker-coverage-status {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  text-align: right;
}
.ticker-coverage-facts {
  margin: 18px 0 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}
.ticker-coverage-copy {
  margin: 18px 0 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
}
.ticker-coverage-boundary {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.ticker-coverage-back {
  margin-top: 20px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  padding: 7px 11px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.ticker-coverage-back:hover { border-color: var(--muted); background: var(--selected); }
.ticker-coverage-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 560px) {
  .ticker-coverage-head { flex-direction: column; gap: 10px; }
  .ticker-coverage-status { text-align: left; }
}
.link-list { list-style: none; margin: 0; padding: 0; }
.link-list li { padding: 8px 0; border-top: 1px solid var(--border); }
.link-list li:first-child { border-top: none; }
.link-list a { color: var(--accent); text-decoration: none; }
.link-list a:hover { text-decoration: underline; }
.link-list .src, .link-list .date { color: var(--muted); font-size: 12px; margin-left: 8px; }
.link-list .why { color: var(--muted-2); font-size: 13px; margin-top: 3px; }
.customer-risk {
  margin: 0 0 16px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--border);
}
.customer-risk-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}
.customer-risk-head h3 {
  margin: 0;
  color: var(--text-strong);
  font-size: 14px;
  font-weight: 650;
}
.customer-risk-read,
.customer-risk-note {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.customer-risk-method {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.customer-risk-method span,
.customer-risk-subtle {
  color: var(--text-bright);
  font-weight: 700;
}
.customer-risk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 18px;
  margin-top: 14px;
}
.customer-risk-panel {
  min-width: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(138, 143, 152, 0.22);
}
.customer-risk-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.customer-head-list {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 9px 0 0;
  padding: 0;
}
.customer-head-list li {
  display: grid;
  grid-template-columns: minmax(96px, 0.65fr) minmax(150px, 1fr) auto;
  gap: 5px 10px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(138, 143, 152, 0.14);
}
.customer-head-list li:last-child { border-bottom: none; padding-bottom: 0; }
.customer-risk-name {
  min-width: 0;
  color: var(--text-strong);
  font-weight: 700;
}
.customer-risk-meta {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
}
.customer-risk-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}
.customer-risk-chip {
  justify-self: start;
  white-space: nowrap;
  border: 1px solid rgba(65, 185, 128, 0.42);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--green-pale);
  font-size: 11px;
}
.customer-risk-chip.exposure {
  border-color: rgba(74, 144, 226, 0.48);
  color: var(--blue-pale);
}
.customer-risk-note-inline {
  grid-column: 2 / -1;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.customer-mix-block + .customer-mix-block {
  margin-top: 12px;
}
.customer-risk-subtle {
  margin-top: 9px;
  font-size: 11px;
  text-transform: uppercase;
}
.customer-mix-bar {
  display: flex;
  height: 12px;
  margin-top: 10px;
  overflow: hidden;
  background: var(--card-2);
  border: 1px solid rgba(138, 143, 152, 0.2);
  border-radius: 8px;
}
.customer-mix-seg {
  min-width: 7px;
  height: 100%;
}
.customer-mix-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 9px;
  color: var(--muted);
  font-size: 12px;
}
.customer-mix-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.customer-kind-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
}
.customer-mix-seg.kind-strategic-public,
.customer-kind-dot.kind-strategic-public { background: var(--accent); }
.customer-mix-seg.kind-public-durable,
.customer-kind-dot.kind-public-durable { background: var(--green-2); }
.customer-mix-seg.kind-private-opaque,
.customer-kind-dot.kind-private-opaque { background: var(--amber-2); }
.customer-mix-seg.kind-academic,
.customer-kind-dot.kind-academic { background: var(--purple); }
.customer-mix-seg.kind-government,
.customer-kind-dot.kind-government { background: var(--red-4); }
.customer-mix-seg.kind-partner,
.customer-kind-dot.kind-partner { background: var(--cyan); }
.customer-mix-seg.kind-open-source,
.customer-kind-dot.kind-open-source { background: #a6b05b; }
.customer-mix-seg.type-public-company,
.customer-kind-dot.type-public-company,
.customer-mix-seg.credit-investment-grade,
.customer-kind-dot.credit-investment-grade { background: var(--accent); }
.customer-mix-seg.type-private-company,
.customer-kind-dot.type-private-company,
.customer-mix-seg.credit-venture-backed-opaque,
.customer-kind-dot.credit-venture-backed-opaque { background: var(--amber-2); }
.customer-mix-seg.type-academic,
.customer-kind-dot.type-academic,
.customer-mix-seg.credit-institutional,
.customer-kind-dot.credit-institutional { background: var(--purple); }
.customer-mix-seg.type-government,
.customer-kind-dot.type-government,
.customer-mix-seg.credit-public-sector,
.customer-kind-dot.credit-public-sector { background: var(--red-4); }
.customer-mix-seg.type-partner,
.customer-kind-dot.type-partner,
.customer-mix-seg.type-open-source,
.customer-kind-dot.type-open-source,
.customer-mix-seg.credit-ecosystem-noncustomer,
.customer-kind-dot.credit-ecosystem-noncustomer { background: var(--cyan); }
.customer-mix-seg.credit-public-durable,
.customer-kind-dot.credit-public-durable { background: var(--green-2); }
.customer-mix-seg.endMarket-hyperscalers-big-tech,
.customer-kind-dot.endMarket-hyperscalers-big-tech,
.customer-mix-seg.workload-strategic-capacity,
.customer-kind-dot.workload-strategic-capacity { background: var(--accent); }
.customer-mix-seg.endMarket-ai-native-platforms,
.customer-kind-dot.endMarket-ai-native-platforms,
.customer-mix-seg.workload-model-building-and-training,
.customer-kind-dot.workload-model-building-and-training { background: #7aa2f7; }
.customer-mix-seg.endMarket-enterprise-consumer-platforms,
.customer-kind-dot.endMarket-enterprise-consumer-platforms,
.customer-mix-seg.workload-developer-platforms-and-tools,
.customer-kind-dot.workload-developer-platforms-and-tools { background: var(--green-2); }
.customer-mix-seg.endMarket-health-life-sciences,
.customer-kind-dot.endMarket-health-life-sciences,
.customer-mix-seg.workload-scientific-research-compute,
.customer-kind-dot.workload-scientific-research-compute { background: var(--cyan); }
.customer-mix-seg.endMarket-scientific-research,
.customer-kind-dot.endMarket-scientific-research { background: var(--purple); }
.customer-mix-seg.endMarket-robotics-industrial,
.customer-kind-dot.endMarket-robotics-industrial,
.customer-mix-seg.workload-robotics-simulation-and-control,
.customer-kind-dot.workload-robotics-simulation-and-control { background: var(--amber-2); }
.customer-mix-seg.endMarket-public-sector,
.customer-kind-dot.endMarket-public-sector { background: var(--red-4); }
.customer-mix-seg.workload-inference-and-ai-apps,
.customer-kind-dot.workload-inference-and-ai-apps { background: #a6b05b; }
.customer-usecase .customer-risk-panel {
  margin-top: 14px;
}
.customer-quarter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.customer-quarter-chip {
  display: grid;
  gap: 2px;
  min-width: 68px;
  padding: 7px 9px;
  border: 1px solid rgba(138, 143, 152, 0.22);
  border-radius: 8px;
  background: var(--card);
}
.customer-quarter-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.customer-quarter-count {
  color: var(--text-strong);
  font-size: 15px;
  font-weight: 700;
}
.customer-matrix {
  display: grid;
  grid-template-columns: minmax(126px, 0.8fr) repeat(2, minmax(0, 1fr));
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid rgba(138, 143, 152, 0.24);
  border-radius: 8px;
}
.customer-matrix-axis,
.customer-matrix-cell {
  min-width: 0;
  padding: 8px 10px;
  border-left: 1px solid rgba(138, 143, 152, 0.18);
  border-top: 1px solid rgba(138, 143, 152, 0.18);
  font-size: 12px;
  line-height: 1.35;
}
.customer-matrix-axis {
  color: var(--muted);
  background: var(--card);
  font-weight: 700;
}
.customer-matrix-axis:nth-child(-n + 3) { border-top: none; }
.customer-matrix-axis:nth-child(3n + 1) { border-left: none; }
.customer-matrix-cell.strong { color: var(--blue-pale); background: rgba(74, 144, 226, 0.08); }
.customer-matrix-cell.empty { color: var(--green-pale); background: rgba(65, 185, 128, 0.08); }
.customer-matrix-cell.warn { color: var(--gold-4); background: rgba(213, 155, 55, 0.08); }
.customer-list .customer-group-row {
  padding: 0;
}
.customer-group summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  cursor: pointer;
  list-style: none;
}
.customer-group summary::marker { content: ""; }
.customer-group summary::-webkit-details-marker { display: none; }
.customer-main {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 8px;
  min-width: 0;
}
.customer-toggle {
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid var(--muted);
  flex: none;
  transform: translateY(-1px);
  transition: transform 0.15s ease;
}
.customer-group[open] .customer-toggle { transform: translateY(-1px) rotate(90deg); }
.customer-count {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.customer-detail-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0 18px;
  margin: 0 0 8px 22px;
  padding: 0;
}
.customer-detail-list li {
  border-top: 1px solid rgba(138, 143, 152, 0.16);
  padding: 7px 0;
}
.customer-detail-list li:first-child {
  border-top: 1px solid rgba(138, 143, 152, 0.16);
}
@media (max-width: 760px) {
  .customer-risk-grid,
  .customer-head-list li {
    grid-template-columns: 1fr;
  }
  .customer-risk-note-inline {
    grid-column: auto;
  }
  .customer-matrix {
    grid-template-columns: minmax(88px, 0.85fr) repeat(2, minmax(0, 1fr));
  }
  .customer-matrix-axis,
  .customer-matrix-cell {
    padding: 7px;
    font-size: 11px;
  }
}
/* News sentiment: a colored left border marks each item good/bad/mixed/neutral. */
.link-list li.li-sent { border-left: 3px solid transparent; padding-left: 10px; }
.link-list li.li-sent-good { border-left-color: var(--teal-green); }
.link-list li.li-sent-bad { border-left-color: var(--red); }
.link-list li.li-sent-mixed { border-left-color: var(--amber); }
.link-list li.li-sent-neutral { border-left-color: #8a8f98; }
.news-labels { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0 4px 0 6px; vertical-align: middle; }
.news-pill {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 1px 7px;
  border: 1px solid rgba(239, 83, 80, 0.48);
  border-radius: 999px;
  background: rgba(239, 83, 80, 0.14);
  color: var(--red-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}
.news-pill-warning {
  border-color: rgba(226, 164, 85, 0.55);
  background: rgba(226, 164, 85, 0.16);
  color: var(--gold-4);
}
.news-checked { font-size: 12px; margin: 0 0 12px; }
.read-link { display: inline-block; margin-top: 4px; color: var(--accent); text-decoration: none; font-size: 13px; }
.read-link:hover { text-decoration: underline; }
.muted { color: var(--muted); }
.commercial-access-gate { max-width: 540px; padding: 28px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.commercial-access-gate h2 { margin: 0 0 10px; }
.commercial-access-gate p { line-height: 1.5; }
.commercial-access-gate-button { margin-top: 6px; padding: 9px 14px; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent); color: var(--bg); font: inherit; font-weight: 700; cursor: pointer; }
.desc { color: var(--muted); font-size: 13px; }
/* Footer license credit (TradingView Lightweight Charts). Quiet on purpose: the on-chart
   attribution logo is disabled, so this line carries the required credit instead. */
.app-credits { color: var(--muted); font-size: 11px; margin: 24px 0 0; text-align: center; }
.app-credits a { color: inherit; text-decoration: underline; }
/* Section-label headings within a tab, made clearly distinct from the bold item names. */
.group-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  font-weight: 600;
  margin: 20px 0 6px;
}
.group-head:first-child { margin-top: 0; }
.prod-list { list-style: none; margin: 0 0 8px; padding: 0 0 0 16px; }
.prod-list li { padding: 8px 0; border-top: 1px solid var(--border); }
.prod-list li:first-child { border-top: none; }
.prod-list .sym { color: var(--text-strong); font-weight: 700; }
a.person-link { text-decoration: none; }
a.person-link:hover { text-decoration: underline; }
.prod-desc { color: var(--muted); }
.assess { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.assess-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border);
}
.assess-badge.good { background: rgba(38, 166, 154, 0.18); color: var(--teal-3); border-color: var(--teal-green); }
.assess-badge.warn { background: rgba(226, 164, 85, 0.18); color: var(--amber); border-color: var(--amber); }
.assess-badge.bad { background: rgba(239, 83, 80, 0.18); color: var(--red); border-color: var(--red); }
.cite { color: var(--accent); text-decoration: none; font-size: 12px; }
.cite:hover { text-decoration: underline; }

/* Talent-mix stat block (Team tab) */
.workforce {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.wf-stat {
  flex: 1 1 120px;
  min-width: 100px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}
.wf-value { font-size: 20px; font-weight: 700; color: var(--text-strong); }
.wf-label { font-size: 12px; color: var(--muted); margin-top: 2px; }
.wf-approx {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  vertical-align: super;
}
.wf-meta { margin: 0 0 4px; }
.wf-note { margin: 0 0 12px; }

.fundamentals { width: 100%; border-collapse: collapse; }
/* Persistent Fundamentals header: identity (name + sector) on the left, 52-week range + beta stats on
   the right. Sits above the Business/Market/All filter, so it stays visible under every section/lens. */
.fin-fundamentals-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 28px;
  margin: 0 0 14px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--border);
}
.fin-header-identity {
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.fin-header-name {
  color: var(--text-strong);
  font-size: 18px;
  font-weight: 600;
}
.fin-header-classification {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}
.fin-header-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  font-size: 13px;
}
.fin-header-stat-label {
  color: var(--muted);
}
.fin-header-stat-value {
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.fin-header-stat-note {
  color: var(--muted);
}
@media (max-width: 560px) {
  .fin-header-classification { flex-basis: 100%; }
}
.fundamentals-profile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 28px;
  margin: 0 0 16px;
}
.fundamentals-profile-name {
  min-width: 0;
  margin: 0;
  color: var(--text-strong);
  font-size: 18px;
}
.fundamentals-profile-classification {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  text-align: right;
  white-space: nowrap;
}
.fundamentals td { padding: 7px 8px; border-top: 1px solid var(--border); }
.fundamentals td:last-child { text-align: right; color: var(--text-strong); }
.fin-metric-label,
.fin-metric-value,
.fin-metric-period { display: block; }
.fundamentals td:first-child .fin-metric-label,
.fundamentals td:first-child .fin-metric-info-wrap { display: inline-flex; }
.fin-metric-period {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

/* Business-health cards (Fundamentals tab) */
.fin-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin: 2px 0 14px;
}
.fin-section {
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
}
.fin-section-business {
  box-shadow: inset 0 1px 0 rgba(91, 163, 199, 0.08);
}
.fin-section-market {
  box-shadow: inset 0 1px 0 rgba(226, 164, 85, 0.12);
}
.fin-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.fin-section-title {
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fin-section-business .fin-section-title { color: var(--teal-3); }
.fin-section-market .fin-section-title { color: var(--gold-4); }
.fin-section-desc {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
  max-width: 32rem;
  text-align: right;
}
.fin-section .fin-cards {
  margin: 0;
}
@media (min-width: 1180px) {
  .fin-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .fundamentals-profile {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .fundamentals-profile-classification {
    text-align: left;
    white-space: normal;
  }
  .fin-section-head {
    flex-direction: column;
  }
  .fin-section-desc {
    max-width: none;
    text-align: left;
  }
}
.fin-lens-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 12px;
}
.fin-lens .binary-toggle-option {
  min-width: 5.75rem;
  padding-inline: 18px;
}
.fin-section-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.fin-section-nav-link {
  background: none;
  border: none;
  margin: 0;
  padding: 2px 0;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  cursor: pointer;
}
.fin-section-nav-link:hover {
  color: var(--text-strong);
}
.fin-section-nav-link.is-active {
  color: var(--text-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fin-section-nav-sep {
  color: var(--muted);
  font-size: 14px;
  opacity: 0.5;
}
[data-fin-section-active='business'] .fin-section-market {
  display: none;
}
[data-fin-section-active='market'] .fin-section-business {
  display: none;
}
.fin-card {
  background: var(--tint-raise);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  min-width: 0;
}
.fin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.fin-label { color: var(--muted); font-size: 12px; min-width: 0; flex: 1 1 96px; display: inline-flex; align-items: center; gap: 6px; }
.fin-label-text { min-width: 0; }
.fin-delta { font-size: 12px; font-weight: 600; color: var(--muted); }
.fin-delta.good { color: var(--teal-3); }
.fin-delta.bad { color: var(--red); }
.fin-delta.warn { color: var(--amber); }
.fin-head-chips { display: flex; gap: 6px; align-items: baseline; margin-left: auto; justify-content: flex-end; flex-wrap: wrap; max-width: 100%; }
.fin-pulse {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid;
  cursor: default;
  white-space: nowrap;
}
.fin-pulse.warn { background: rgba(226, 164, 85, 0.18); color: var(--amber); border-color: var(--amber); }
.fin-pulse.bad { background: rgba(239, 83, 80, 0.18); color: var(--red); border-color: var(--red); }
.fin-pulse.good { background: rgba(38, 166, 154, 0.18); color: var(--teal-3); border-color: var(--teal-green); }
.fin-pulse:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fin-value { font-size: 19px; font-weight: 650; margin: 2px 0 5px; color: var(--text-strong); }
.fin-value.good { color: var(--teal-3); }
.fin-value.warn { color: var(--amber); }
.fin-value.bad { color: var(--red); }
.fin-value.unavailable { color: var(--muted); font-size: 17px; }
.fin-bars {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 180 / 74;
  margin-top: 3px;
}
.fin-mini-bar { opacity: 0.86; }
.fin-mini-bar.negative { fill: var(--red); opacity: 0.82; }
.fin-mini-bar.projected { opacity: 0.42; }
.fin-bar-grid { stroke: rgba(138, 143, 152, 0.12); stroke-width: 1; }
.fin-bar-zero { stroke: rgba(138, 143, 152, 0.55); stroke-width: 1; }
.fin-bar-ref { stroke: #8a8f98; stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.7; }
.fin-bar-axis {
  fill: var(--muted-2);
  font-size: 9px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.fin-bar-max { opacity: 0.85; }
.fin-ref-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted-2);
  font-size: 11px;
  margin-top: 4px;
}
.fin-ref-swatch {
  width: 18px;
  height: 0;
  border-top: 1px dashed #8a8f98;
  opacity: 0.75;
}
.fin-read { color: var(--muted); font-size: 12px; margin-top: 6px; }
.fin-guide {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
}
.fin-note { color: var(--muted-2); font-size: 11px; margin-top: 6px; }
.fin-price-behavior {
  border-color: rgba(226, 164, 85, 0.3);
  background: linear-gradient(145deg, rgba(226, 164, 85, 0.09), var(--tint-raise));
}
.fin-price-behavior .fin-value {
  font-size: 17px;
  line-height: 1.25;
}
.fin-price-behavior-stats {
  display: grid;
  gap: 3px;
  margin-top: 8px;
}
.fin-price-behavior-stat {
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
}
.fin-note-block { font-size: 12px; color: var(--muted); margin: 6px 0; line-height: 1.5; }
.fin-note-label { color: var(--text); font-weight: 600; }
.fin-model { margin: 2px 0 10px; font-size: 13px; }
.fin-model a { color: var(--accent); text-decoration: none; }
.fin-model a:hover { text-decoration: underline; }
.fin-asof, .fin-sources { font-size: 11px; margin: 4px 0; }
/* Revenue-by-geography pie (Fundamentals tab). */
.fin-geo { margin: 0; }
.fin-geo-head { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.fin-geo-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 10px; }
.fin-pie { width: 92px; height: 92px; flex: none; }
.pie-legend { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.pie-legend li { display: flex; align-items: flex-start; gap: 8px; margin: 3px 0; }
.pie-sw { display: inline-block; width: 11px; height: 11px; border-radius: 2px; flex: none; }
.fin-sources a { color: var(--accent); text-decoration: none; }
.fin-sources a:hover { text-decoration: underline; }

/* Trend-first fundamentals visuals. */
.fin-trajectory {
  margin: 0;
  min-width: 0;
}
.fin-visual-head {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: 8px;
}
.fin-legend, .fin-bar-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 12px;
  color: var(--muted);
  font-size: 11px;
  position: relative;
}
.fin-legend { margin-bottom: 4px; }
.fin-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0;
  position: relative;
}
.fin-leg {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: -1px;
}
.fin-leg.rev { background: var(--blue-3); }
.fin-leg.income { background: var(--teal-3); }
.fin-leg.fcf { background: var(--amber); }
.fin-leg.guidance { background: rgba(226, 164, 85, 0.35); border: 1px solid rgba(226, 164, 85, 0.7); }
.fin-leg.cash { background: var(--blue-3); }
.fin-leg.debt { background: var(--red); }
/* Net balance swatches: green (not the gross-cash teal) so the derived figure reads at a
   glance; net debt stays in the debt red family. */
.fin-leg.net.cash { background: #9ee2bd; }
.fin-leg.net.debt { background: var(--red); }
.fin-info-wrap {
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
}
.fin-card-info-wrap {
  position: relative;
  flex: 0 0 auto;
}
.fin-card-info-wrap .fin-info-popover {
  width: min(280px, calc(100vw - 48px));
}
.fin-metric-info-wrap {
  position: relative;
  vertical-align: middle;
}
.fin-metric-info-wrap .fin-info-popover {
  top: auto;
  bottom: calc(100% + 8px);
  width: min(360px, calc(100vw - 48px));
  text-align: left;
}
.regime-info-wrap {
  position: relative;
  margin-left: 0;
  flex: 0 0 auto;
}
.regime-interpretation .fin-info-trigger {
  margin-top: 1px;
}
.regime-info-popover {
  left: auto;
  right: 0;
  width: min(320px, calc(100vw - 48px));
}
.ratio-info-wrap {
  position: relative;
  margin-left: 2px;
  flex: 0 0 auto;
}
.ratio-info-popover {
  width: min(340px, calc(100vw - 48px));
}
.ratio-info-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 8px;
  color: var(--muted);
}
.ratio-info-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ratio-info-legend-item.primary { color: var(--teal-4); }
.ratio-info-legend-item.compare { color: var(--muted-2); }
.ratio-info-legend-swatch {
  width: 16px;
  height: 0;
  border-top: 2px solid currentColor;
  border-radius: 999px;
}
.ratio-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.ratio-info-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--tint-raise);
  padding: 8px;
}
.ratio-info-card strong {
  margin-bottom: 6px;
}
.ratio-info-diagram {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 8px;
}
.ratio-diagram-axis {
  stroke: rgba(154, 163, 178, 0.26);
  stroke-width: 1;
}
.ratio-diagram-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
}
.ratio-diagram-line.primary { stroke: var(--teal-4); }
.ratio-diagram-line.compare { stroke: var(--muted-2); }
.ratio-info-note {
  margin-top: 8px;
  color: var(--muted);
}
.regime-info-note {
  margin-top: 6px;
  color: var(--muted);
}
.fin-info-trigger {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(154, 163, 178, 0.7);
  border-radius: 50%;
  background: var(--tint-raise-2);
  color: var(--text-bright);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 0;
}
.fin-info-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.fin-info-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  box-sizing: border-box;
  width: min(280px, 100%, calc(100vw - 48px));
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--pop-bg);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  color: var(--text-bright);
  font-size: 12px;
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  visibility: hidden;
}
.fin-info-popover > strong,
.fin-info-popover > span {
  display: block;
}
.fin-info-popover strong {
  color: var(--text-strong);
  margin-bottom: 4px;
}
.fin-info-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.fin-info-list-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px;
  align-items: start;
}
.fin-info-num {
  color: var(--gold-4);
  font-variant-numeric: tabular-nums;
}
.fin-info-text {
  color: var(--text-bright);
}
.fin-info-note {
  margin-top: 6px;
  color: var(--muted);
}
.fin-formula {
  color: var(--gold-4);
  margin-top: 6px;
}
.fin-click-popover .fin-info-popover[hidden] {
  display: none;
}
.fin-click-popover[data-open="true"] .fin-info-popover {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}
.fin-info-wrap:hover .fin-info-popover,
.fin-info-wrap:focus-within .fin-info-popover {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}
.fin-net-balance {
  display: inline-flex;
  align-items: center;
  font-weight: 650;
}
/* Solid color instead of the old white-plus-glow, which read as fuzzy on dark backgrounds. */
.fin-net-balance.cash { color: var(--green-pale); }
.fin-net-balance.debt { color: var(--red); }
.fin-trajectory-chart { overflow: hidden; }
.fin-trajectory-svg { display: block; width: 100%; height: auto; }
.fin-grid { stroke: rgba(138, 143, 152, 0.25); stroke-width: 1; }
.fin-axis-line { stroke: rgba(138, 143, 152, 0.45); stroke-width: 1; }
.fin-axis {
  fill: var(--muted);
  font-size: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.fin-axis-right { fill: var(--muted-2); }
.fin-x-label { fill: var(--muted-2); }
.fin-rev-bar { fill: rgba(91, 141, 239, 0.7); }
.fin-guidance-bar { fill: rgba(226, 164, 85, 0.3); stroke: rgba(226, 164, 85, 0.75); }
.fin-margin-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fin-margin-line.income { stroke: var(--teal-3); }
.fin-margin-line.fcf { stroke: var(--amber); }
.fin-guidance-callout {
  border-top: 1px solid var(--border);
  color: var(--text-bright);
  font-size: 11px;
  margin-top: 6px;
  padding-top: 6px;
}
.fin-visual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin: 0 0 14px;
}
.fin-visual-block {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--tint-raise);
  padding: 10px;
  min-width: 0;
}
.cashdebt-bar {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: center;
  height: 20px;
  margin: 8px 0 6px;
}
.cashdebt-half {
  height: 14px;
  display: flex;
  background: rgba(138, 143, 152, 0.14);
  overflow: hidden;
}
.cashdebt-half.debt { justify-content: flex-end; border-radius: 7px 0 0 7px; }
.cashdebt-half.cash { justify-content: flex-start; border-radius: 0 7px 7px 0; }
.cashdebt-half span { display: block; height: 100%; }
.cashdebt-half.debt span { background: var(--red); }
.cashdebt-half.cash span { background: var(--blue-3); }
.cashdebt-half span.net-fill.cash { background: #9ee2bd; }
.cashdebt-half span.net-fill.debt { background: var(--red); }
.cashdebt-zero { height: 20px; background: #8a8f98; opacity: 0.65; }
.fin-timing {
  margin: 2px 0 14px;
  border-left: 3px solid var(--amber);
}
.fin-timing.bad { border-left-color: var(--red); }
.fin-timing.good { border-left-color: var(--teal-3); }
.fin-timing-top {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
}
.fin-timing-window {
  flex: none;
  border: 1px solid rgba(226, 164, 85, 0.45);
  border-radius: 999px;
  color: var(--gold-4);
  font-size: 11px;
  padding: 2px 8px;
  white-space: nowrap;
}
.fin-timing-summary {
  color: var(--text-bright);
  font-size: 13px;
  line-height: 1.45;
  margin: 0 0 10px;
}
.fin-timing-lenses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.fin-timing-lens {
  border: 1px solid rgba(138, 143, 152, 0.28);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  padding: 8px 10px;
}
.fin-timing-lens span {
  display: block;
  color: var(--text-strong);
  font-weight: 650;
  margin-bottom: 2px;
}
.fin-timing-events {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.fin-timing-events::before {
  background: rgba(138, 143, 152, 0.32);
  bottom: 8px;
  content: "";
  left: 5px;
  position: absolute;
  top: 8px;
  width: 1px;
}
.fin-timing-events li {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 10px;
  margin: 0 0 12px;
  position: relative;
}
.fin-timing-events li:last-child { margin-bottom: 0; }
.fin-timing-dot {
  align-self: start;
  background: var(--amber);
  border-radius: 50%;
  height: 11px;
  margin-top: 4px;
  position: relative;
  width: 11px;
  z-index: 1;
}
.fin-timing-event-head {
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 650;
}
.fin-timing-meta {
  color: var(--gold-4);
  font-size: 12px;
  margin-top: 2px;
}
.fin-timing-bar {
  background: rgba(138, 143, 152, 0.16);
  border-radius: 999px;
  height: 6px;
  margin-top: 7px;
  overflow: hidden;
}
.fin-timing-bar span {
  background: var(--amber);
  display: block;
  height: 100%;
}
.fin-timing-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  margin-top: 5px;
}
.conc-bar {
  display: flex;
  height: 20px;
  margin: 8px 0 6px;
  border-radius: 7px;
  overflow: hidden;
  background: rgba(138, 143, 152, 0.14);
}
.conc-seg { display: block; min-width: 2px; }
.fin-hypcap {
  display: flex;
  flex-direction: column;
  gap: 7px;
  /* The auto-fit fundamentals grid can shrink this card to ~210px at any viewport width, so the
     bar labels need an element query, not a viewport media query. */
  container-type: inline-size;
}
.hypcap-title {
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 600;
}
.hypcap-head {
  align-items: center;
  flex-wrap: nowrap;
}
.hypcap-toggle {
  flex: 0 0 auto;
  margin-left: auto;
}
.hypcap-toggle .binary-toggle-option {
  font-size: clamp(7px, 3.6cqi, 9px);
  padding: 3px clamp(5px, 2.8cqi, 8px);
}
.hypcap-subhead {
  color: var(--text-bright);
  font-size: 11px;
  line-height: 1.35;
}
.hypcap-subhead-line {
  display: block;
}
.hypcap-subhead-line:first-child {
  white-space: nowrap;
}
.hypcap-legend {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: clamp(7px, 3.6cqi, 9px);
  gap: 3px clamp(5px, 3cqi, 8px);
}
.hypcap-legend-item {
  align-items: center;
  display: inline-flex;
  gap: 3px;
  white-space: nowrap;
}
.hypcap-legend-swatch {
  border-radius: 2px;
  display: inline-block;
  height: 7px;
  width: 7px;
}
.hypcap-a11y-table {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.hypcap-chart {
  display: grid;
  grid-template-columns: repeat(var(--hypcap-columns, 4), minmax(0, 1fr));
  gap: clamp(3px, 3.4cqi, 8px);
  /* Anchor columns from the top. Value labels are single-line and the plot area
     is a fixed height, so top-aligning keeps every bar on the same baseline even
     when a longer kind label (e.g. "Consensus") wraps to two lines below it.
     With align-items: end the extra wrapped line lifted that column's bar. */
  align-items: start;
  margin: 2px 0 0;
  width: 100%;
}
.hypcap-col {
  align-items: center;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hypcap-value,
.hypcap-period {
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.hypcap-value {
  font-size: clamp(8.5px, 4.8cqi, 12px);
  font-weight: 650;
  margin-bottom: clamp(2px, 1.8cqi, 4px);
  text-align: center;
  white-space: nowrap;
}
.hypcap-plot {
  align-items: flex-end;
  display: flex;
  height: clamp(60px, 32cqi, 82px);
  justify-content: center;
  width: 100%;
}
.hypcap-bar {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px 8px 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  cursor: default;
  min-height: 12px;
  width: min(100%, clamp(20px, 16cqi, 34px));
}
.hypcap-bar.stacked {
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
}
.hypcap-segment {
  display: block;
  flex: 0 0 auto;
  min-height: 2px;
  width: 100%;
}
.hypcap-bar.actual {
  background: linear-gradient(180deg, rgba(91, 141, 239, 0.95), rgba(91, 141, 239, 0.58));
}
.hypcap-bar.approx {
  background: linear-gradient(180deg, rgba(79, 209, 197, 0.95), rgba(79, 209, 197, 0.58));
}
.hypcap-bar.guide {
  background: linear-gradient(180deg, rgba(226, 164, 85, 0.96), rgba(226, 164, 85, 0.62));
}
.hypcap-bar.consensus {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(154, 163, 178, 0.92) 0,
      rgba(154, 163, 178, 0.92) 7px,
      rgba(80, 92, 110, 0.95) 7px,
      rgba(80, 92, 110, 0.95) 14px
    );
}
.hypcap-bar.stacked {
  background: transparent;
}
.hypcap-period {
  font-size: clamp(7.5px, 4.1cqi, 10px);
  font-weight: 650;
  letter-spacing: 0.03em;
  margin-top: clamp(3px, 2.1cqi, 6px);
  text-align: center;
  white-space: nowrap;
}
.hypcap-kind {
  color: var(--muted);
  font-size: clamp(6.5px, 3.5cqi, 9px);
  line-height: 1.15;
  margin-top: 1px;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
}
.hypcap-note {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.fin-gpurates {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.gpurates-title {
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 600;
}
.gpurates-subhead {
  color: var(--text-bright);
  font-size: 11px;
  line-height: 1.35;
}
.gpurates-subhead-line {
  display: block;
  white-space: nowrap;
}
.gpurates-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gpurates-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gpurates-gen {
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 600;
}
.gpurates-values {
  display: flex;
  flex-wrap: wrap;
  font-size: 11px;
  gap: 3px 10px;
}
/* Experimental tone readout chip (prd/gpu-rental-rates.md, Experimental exposure). Mirrors
   the fin-pulse pill; muted while neutral, tinted when a threshold fires. */
.gpurates-tone-chip {
  border: 1px solid var(--muted);
  border-radius: 999px;
  color: var(--muted);
  cursor: default;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  white-space: nowrap;
}
.gpurates-tone-chip.warn { background: rgba(226, 164, 85, 0.18); color: var(--amber); border-color: var(--amber); }
.gpurates-tone-chip.bad { background: rgba(239, 83, 80, 0.18); color: var(--red); border-color: var(--red); }
/* Decline-only tone on the spot value (prd/gpu-rental-rates.md, Tone). The dotted underline
   is the tooltip affordance so meaning is not conveyed by color alone. */
.gpurates-value strong.warn,
.gpurates-value strong.bad {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: help;
}
.gpurates-value strong.warn {
  color: var(--amber);
}
.gpurates-value strong.bad {
  color: var(--red);
}
.gpurates-note,
.gpurates-attribution {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

/* Locations map (NBIS) */
.map-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.map-note { color: var(--muted); font-size: 12px; }
.map-note.warn { color: var(--amber); display: block; margin-top: 8px; }
.metric-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.metric-btn {
  background: var(--panel);
  color: var(--text);
  border: none;
  border-left: 1px solid var(--border);
  padding: 5px 12px;
  cursor: pointer;
  font: inherit;
}
.metric-btn:first-child { border-left: none; }
.metric-btn.active { background: var(--accent); color: #fff; }
.dc-map {
  height: 420px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.dc-map .leaflet-container { background: var(--bg); }
/* Locations timeline scrubber. */
.dc-scrub {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr) clamp(32ch, 44vw, 78ch);
  align-items: center;
  gap: 12px;
  margin: 8px 0;
}
.scrub-play {
  cursor: pointer; font-size: 12px; padding: 4px 12px;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
}
.scrub-play:hover { border-color: var(--accent); }
.scrub-range { width: 100%; min-width: 0; accent-color: var(--accent); }
.scrub-readout {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.map-legend { display: inline-flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.leg { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.leg .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.leg .dot.ring { background: transparent; border: 1.5px dashed var(--muted); }
.leaflet-tooltip {
  font-size: 12px;
  max-width: min(320px, 80vw);
  white-space: normal;
}

/* Holdings tile */
.holdings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
}
.holdings-section h2 { font-size: 13px; margin: 0; }
/* Single-face card: the composition pie moved to the separate broker-backed tile, so no flip geometry. */
.holdings-card {
  height: 198px;
  width: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
}
.accrual-chart {
  height: 150px;
  width: 100%;
  min-height: 0;
}
.accrual-readout {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.accrual-readout-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  font-size: 14px;
  line-height: 1.25;
}
.accrual-readout-swatch {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
}
.accrual-readout-ticker {
  font-weight: 700;
  letter-spacing: 0.01em;
}
.accrual-readout-value {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 340px) {
  .accrual-readout { gap: 8px; }
  .accrual-readout-chip {
    gap: 8px;
    padding-inline: 10px;
  }
}
.composition-body {
  display: flex;
  justify-content: center;
}
.composition-pie {
  display: block;
  width: 156px;
  max-width: 100%;
  height: auto;
}
.composition-pct {
  fill: #fff;
  stroke: rgba(15, 17, 21, 0.8);
  stroke-width: 3px;
  paint-order: stroke;
  font-size: 12px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
}
.composition-donut-hole { fill: var(--panel); }
.composition-center-count,
.composition-center-label {
  fill: var(--text);
  text-anchor: middle;
  dominant-baseline: middle;
  font-variant-numeric: tabular-nums;
}
.composition-center-count { font-size: 22px; font-weight: 700; }
.composition-center-label {
  fill: var(--muted);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Broker-backed portfolio composition tile (prd/portfolio-composition.md). The donut sits in a fixed
   left column with the position list filling the remaining width; the list is the only place
   ticker/share/price detail appears; the pie contributes just the wedges and percent labels
   instead of a second legend that would repeat it. Stacks vertically once a row that narrow can no
   longer fit both comfortably (matches the .portfolio-row mobile breakpoint below). */
.composition-section {
  display: grid;
  grid-template-columns: minmax(170px, 210px) minmax(0, 1fr);
  align-items: start;
  column-gap: 36px;
}
.composition-section .composition-head,
.composition-section .core-balance,
.composition-section .portfolio-editor {
  grid-column: 1 / -1;
}
.composition-section .portfolio-pie-wrap {
  grid-column: 1;
  padding-top: 22px;
}
.composition-section .portfolio-list {
  grid-column: 2;
  margin-top: 0;
}
@media (max-width: 720px) {
  .chart-wrap { --chart-surface-height: clamp(420px, 62vh, 560px); }
  .composition-section {
    display: block;
  }
  .composition-section .portfolio-list {
    margin-top: 18px;
  }
  .composition-section .portfolio-pie-wrap { padding-top: 0; }
}
.composition-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 16px;
}
.composition-section h2 { font-size: 13px; margin: 0; }
.composition-view-toggle[hidden] { display: none; }
.composition-view-toggle {
  display: inline-flex;
  padding: 2px;
  background: var(--tint-raise);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.composition-view-toggle button {
  min-width: 68px;
  padding: 5px 10px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.composition-view-toggle button:hover { color: var(--text); }
.composition-view-toggle button.active {
  color: var(--text);
  background: var(--panel);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}
.composition-view-toggle button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* Composition wedges render flush with no border so tiny slices do not pick up a seam color. */
.portfolio-pie-wrap .composition-pie path,
.portfolio-pie-wrap .composition-pie circle {
  stroke: none;
  stroke-width: 0;
}
.portfolio-excluded { margin: 8px 0 0; font-size: 12px; }
.portfolio-list {
  display: grid;
}
.portfolio-list-head,
.portfolio-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(100px, auto) minmax(72px, auto);
  column-gap: 20px;
}
.portfolio-list-head {
  padding: 0 0 8px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.portfolio-list-head span:nth-child(n+2) { text-align: right; }
.portfolio-concentration-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  padding: 8px 10px;
  color: var(--text);
  background: rgba(230, 254, 110, 0.05);
  border: 1px solid rgba(230, 254, 110, 0.18);
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.35;
}
.portfolio-concentration-icon {
  display: inline-grid;
  width: 17px;
  height: 17px;
  place-items: center;
  flex: 0 0 auto;
  color: var(--panel);
  background: var(--gold);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}
.portfolio-position {
  padding: 13px 0 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.portfolio-position:last-child { border-bottom: 0; }
.portfolio-row {
  align-items: center;
  row-gap: 9px;
  font-size: 13px;
}
.portfolio-row-holding {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.portfolio-row-button {
  appearance: none;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.portfolio-row-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.portfolio-row-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.portfolio-row-ticker {
  min-width: 0;
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.portfolio-row-ticker-symbol {
  font-weight: 600;
  color: var(--text);
}
.portfolio-row-pct {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.portfolio-row-shares {
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.portfolio-row-shares-unit { display: none; }
.portfolio-row-avg {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  white-space: nowrap;
  text-align: right;
}
.portfolio-row-mobile-label { display: none; }
.portfolio-row-bar {
  grid-column: 1 / -1;
  height: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}
.portfolio-row-bar > span {
  display: block;
  min-width: 3px;
  height: 100%;
  border-radius: inherit;
}
/* Per-row buy preview (prd/portfolio-composition.md): quiet support text below the main row. */
.portfolio-row-extra {
  margin: 9px 0 0;
  font-size: 12px;
}
.portfolio-scenario {
  padding: 0;
}
.portfolio-scenario-summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  cursor: pointer;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  list-style: none;
}
.portfolio-scenario-summary:hover { color: var(--text); border-color: var(--muted); }
.portfolio-scenario-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.portfolio-scenario-summary::-webkit-details-marker {
  display: none;
}
.portfolio-scenario-summary::after {
  content: '›';
  color: var(--accent);
  font-size: 15px;
  line-height: 0.8;
  transform: rotate(90deg);
  transition: transform 120ms ease;
}
.portfolio-scenario[open] .portfolio-scenario-summary::after {
  transform: rotate(-90deg);
}
.portfolio-scenario-body {
  padding-top: 6px;
}
.portfolio-preview { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.portfolio-preview-n {
  /* Wide enough for four digits next to the native number spinner; 52px clipped the value. */
  width: 76px;
  padding: 2px 6px;
  font-size: 12px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-variant-numeric: tabular-nums;
}
.portfolio-preview-n:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(94, 200, 200, 0.25);
}
.portfolio-editor {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.portfolio-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.portfolio-editor-detail { margin-top: 8px; }
.portfolio-editor-detail[hidden] { display: none; }
.portfolio-editor-rows { display: grid; gap: 6px; }
.portfolio-editor-row {
  display: grid;
  grid-template-columns: minmax(64px, 1.1fr) minmax(56px, 1fr) minmax(56px, 1fr) 26px;
  gap: 6px;
  align-items: center;
}
.portfolio-editor-row.has-error .portfolio-input-ticker { border-color: var(--red-2); }
.portfolio-input {
  width: 100%;
  padding: 5px 8px;
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.portfolio-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(94, 200, 200, 0.25);
}
.portfolio-input::placeholder { color: var(--muted); }
.portfolio-row-delete {
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  background: none;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}
.portfolio-row-delete:hover { color: var(--text); border-color: var(--muted); }
.portfolio-row-error {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--red-2);
}
.portfolio-add {
  margin-top: 8px;
  padding: 5px 10px;
  background: none;
  color: var(--accent);
  border: 1px dashed var(--border);
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}
.portfolio-add:hover { border-color: var(--accent); }
.portfolio-privacy-hint { margin: 8px 0 0; font-size: 11px; }
.core-balance {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.core-balance-head {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.core-balance-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.core-balance-windows { display: inline-flex; gap: 4px; flex: none; }
.core-balance-win {
  min-width: 30px;
  padding: 2px 6px;
  font: inherit;
  font-size: 12px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}
.core-balance-win:hover { color: var(--text); border-color: var(--muted); }
.core-balance-win.active { color: var(--text); border-color: var(--accent); }
.core-balance-group + .core-balance-group { margin-top: 10px; }
.core-balance-group-title {
  display: block;
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.core-balance-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}
.core-balance-fig {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--tint-raise);
}
.core-balance-fig-label {
  font-size: 11px;
  line-height: 1.3;
}
.core-balance-amt {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
  line-height: 1.15;
}
.core-balance-primary {
  background: rgba(91, 141, 239, 0.08);
  border-color: rgba(91, 141, 239, 0.3);
}
.core-balance-primary .core-balance-fig-label { color: var(--text-bright); }
.core-balance-primary .core-balance-amt { font-size: 22px; }
.core-balance-pnl.pos { color: var(--teal); }
.core-balance-pnl.neg { color: var(--red-2); }
.core-balance-explain { margin: 8px 0 0; font-size: 12px; line-height: 1.4; }
.core-balance-costs {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.core-balance-cost-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.core-balance-cost-kicker {
  padding: 0;
  border: none;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.core-balance-cost-kicker:hover { color: var(--text); }
.core-balance-cost-kicker:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}
.core-balance-cost-toggle {
  margin-left: auto;
  padding: 2px 6px;
  border: none;
  background: none;
  color: var(--muted);
  font: inherit;
  line-height: 1;
  font-size: 22px; /* match the other section chevrons */
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.core-balance-cost-toggle:hover { color: var(--text); }
.core-balance-cost-toggle:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}
.core-balance-cost-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.core-balance-cost-detail[hidden] { display: none; }
.core-balance-cost-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 10px;
}
.core-balance-cost-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}
.core-balance-cost-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.core-balance-cost-ticker { font-weight: 600; color: var(--text); }
.core-balance-cost-shares { font-size: 11px; }
.core-balance-cost-input {
  width: 100%;
  padding: 7px 9px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.core-balance-cost-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(94, 200, 200, 0.25);
}
.core-balance-cost-input::placeholder { color: var(--muted); }
.core-balance-note { margin: 6px 0 0; font-size: 12px; }

@media (max-width: 720px) {
  .lists { grid-template-columns: 1fr; }
  .chart-toolbar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .toolbar-right {
    display: flex;
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 6px;
  }
  .range-preset-btn { padding: 6px 7px; }
  .interval-btn { padding: 6px 9px; }
  .cycle-view-toggle { padding: 6px 9px; }
  .dc-scrub { grid-template-columns: auto minmax(0, 1fr); }
  .scrub-readout { grid-column: 1 / -1; }
  .fin-geo-row { grid-template-columns: 1fr; }
  .fin-pie { margin: 0 auto; }
  .core-balance-figures { grid-template-columns: 1fr; }
  #chart { height: var(--chart-surface-height); }
  .cycle-chart { height: var(--chart-surface-height); min-height: var(--chart-surface-height); gap: 8px; padding: 14px 12px 10px; }
  .cycle-chart-head { gap: 8px; }
  .cycle-chart-head h3 { font-size: 16px; }
  .cycle-chart-head p { font-size: 13px; }
  .cycle-chart-head .cycle-chart-note { font-size: 12px; }
  .cycle-chart-status { display: none; }
  .cycle-chart[data-cycle-overlay='true'] .cycle-chart-copy,
  .cycle-chart[data-cycle-overlay='true'] .oscillator-date-tick,
  .cycle-chart[data-cycle-overlay='true'] .oscillator-zone-label,
  .cycle-chart[data-cycle-overlay='true'] .cycle-reference-label,
  .cycle-chart[data-cycle-overlay='true'] .oscillator-current-label { display: none; }
  .cycle-plot-wrap,
  .cycle-plot { min-height: 210px; }
  .cycle-axis-tick,
  .cycle-axis-label,
  .cycle-reference-label,
  .cycle-region-label,
  .oscillator-zone-label,
  .oscillator-current-label { font-size: 13px; }
  .cycle-legend { gap: 4px 12px; font-size: 12px; }
  .cycle-legend-item.is-recent { flex-basis: 100%; }
  .cycle-crosshair-readout { left: 58px; max-width: calc(100% - 80px); font-size: 12px; }
  .cycle-crosshair-axis { font-size: 12px; }
  #mcap-legend {
    left: 6px;
    right: 6px;
    max-width: calc(100% - 12px);
    gap: 2px 7px;
    font-size: 11px;
  }
  .chart-readout-label { font-size: 10px; }
}

/* Shareholders tab (prd/shareholders.md) */
.sh-table { table-layout: fixed; }
.sh-table th:first-child,
.sh-table td:first-child { width: 38%; }
.sh-table th:nth-child(2),
.sh-table td:nth-child(2) { width: 14%; }
.sh-table th:nth-child(3),
.sh-table td:nth-child(3) { width: 13%; }
.sh-table th:nth-child(4),
.sh-table td:nth-child(4) { width: 15%; }
.sh-table th:nth-child(5),
.sh-table td:nth-child(5) { width: 10%; }
.sh-table th:nth-child(6),
.sh-table td:nth-child(6) { width: 10%; }
.sh-table tbody tr { cursor: default; }
.sh-table td { padding-top: 10px; padding-bottom: 10px; }
.sh-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.sh-table .sh-name {
  color: var(--text-bright-2);
  font-weight: 700;
  line-height: 1.35;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.sh-table .sh-name .cite {
  color: var(--blue-4);
  font-size: inherit;
  font-weight: inherit;
  text-decoration: none;
  white-space: normal;
}
.sh-name-main {
  display: block;
  overflow-wrap: anywhere;
}
.sh-mobile-meta { display: none; }
.sh-caveat { font-size: 12px; margin: 4px 0 10px; }
.sh-badge {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.sh-badge-13d { border-color: var(--purple-2); color: var(--purple-2); }
.sh-badge-13g { border-color: var(--blue-5); color: var(--blue-5); }
.sh-badge-f4 { border-color: var(--green-3); color: var(--green-3); }

@media (max-width: 560px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .site-header > .market-regime-button { margin-inline: 0; }
  .header-right {
    width: 100%;
    justify-content: flex-start;
  }
  .ticker-search { width: 100%; order: -1; }
  .ticker-search-result { align-items: flex-start; flex-direction: column; gap: 5px; }
  .ticker-search-result-main,
  .ticker-search-result-detail { width: 100%; }
  .ticker-search-result-detail { justify-content: space-between; }
  .ticker-search-result-meta { align-items: flex-start; text-align: left; }
  .ticker-search-result-context,
  .ticker-search-result-facts { justify-content: flex-start; }
  .ticker-search-result-classification { white-space: normal; }
  .composition-head { align-items: flex-start; flex-wrap: wrap; }
  .composition-view-toggle button { min-width: 58px; padding-inline: 8px; }
  .portfolio-list-head { display: none; }
  .portfolio-concentration-note { margin-top: 0; }
  .portfolio-row {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 7px;
  }
  .portfolio-row-holding {
    grid-column: 1;
    grid-row: 1;
  }
  .portfolio-row-shares {
    grid-column: 2;
    grid-row: 1;
  }
  .portfolio-row-shares-unit {
    display: inline;
    margin-left: 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
  }
  .portfolio-row-avg {
    grid-column: 1 / 3;
    grid-row: 2;
    justify-self: end;
  }
  .portfolio-row-mobile-label { display: inline; margin-right: 4px; }
  .portfolio-row-bar { grid-column: 1 / 3; grid-row: 3; }
  .sh-table th:first-child,
  .sh-table td:first-child { width: auto; }
  .sh-table th:nth-child(n+2),
  .sh-table td:nth-child(n+2) { display: none; }
  .sh-table th,
  .sh-table td {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
  .sh-table td { padding: 12px 8px; }
  .sh-mobile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 5px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
  }
  .sh-mobile-badges {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
  }
  .sh-mobile-meta .sh-badge {
    padding: 1px 5px;
    font-size: 9px;
  }
}

/* Screener tab (prd/screener.md): descriptive cross-ticker scan metrics table. */
.screener-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.screener-asof {
  font-size: 11px;
  color: var(--muted);
}
.screener-coverage {
  margin: 0 0 12px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted-2);
}
.screener-coverage a {
  color: var(--accent);
  text-decoration: none;
}
.screener-coverage a:hover {
  text-decoration: underline;
}
.screener-table-wrap {
  overflow-x: auto;
}
.screener-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.screener-table th {
  text-align: right;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 500;
  padding: 6px 8px;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.screener-table th:first-child,
.screener-table td:first-child {
  text-align: left;
}
.screener-table th[data-scan-active="1"] {
  color: var(--text-strong);
}
.screener-table th[aria-sort="ascending"]::after { content: " \2191"; }
.screener-table th[aria-sort="descending"]::after { content: " \2193"; }
.screener-table td {
  text-align: right;
  padding: 6px 8px;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-soft);
  font-variant-numeric: tabular-nums;
}
.screener-table tbody tr:hover td {
  background: var(--surface-2, rgba(127, 140, 170, 0.08));
}
.screener-table td[data-scan-col="ticker"] {
  font-weight: 700;
  color: var(--text-strong);
}
.screener-table td[data-scan-col="insider"],
.screener-table td[data-scan-col="insiderAmount"] {
  color: var(--text-bright);
}
.screener-table tr[data-insider-tone="buy"] td[data-scan-col="insider"],
.screener-table tr[data-insider-tone="buy"] td[data-scan-col="insiderAmount"] {
  color: var(--green-pale);
  font-weight: 600;
}
.screener-table tr[data-insider-tone="sell"] td[data-scan-col="insider"],
.screener-table tr[data-insider-tone="sell"] td[data-scan-col="insiderAmount"] {
  color: var(--muted-2);
}
.screener-table td[data-scan-col="insiderAmount"][title],
.screener-table td[data-scan-col="thirteenF"][title],
.screener-table td[data-scan-col="thirteenG"][title] {
  cursor: help;
}
.screener-table tr[data-sec-standout="buy"] td[data-scan-col="insider"],
.screener-table tr[data-sec-standout="buy"] td[data-scan-col="insiderAmount"],
.screener-table tr[data-sec-standout="1"] td[data-scan-col="insider"],
.screener-table tr[data-sec-standout="1"] td[data-scan-col="insiderAmount"] {
  background: rgba(74, 144, 226, 0.08);
  box-shadow: inset 0 0 0 1px rgba(74, 144, 226, 0.18);
}
.screener-table tr[data-sec-standout="sell"] td[data-scan-col="insider"],
.screener-table tr[data-sec-standout="sell"] td[data-scan-col="insiderAmount"] {
  background: rgba(214, 107, 86, 0.08);
  box-shadow: inset 0 0 0 1px rgba(214, 107, 86, 0.2);
  color: var(--red-pale);
}
.screener-disclaimer,
.screener-empty {
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted);
}

/* Value Screen (prd/value-screen.md): reuses .screener-table; the summary column reads as prose so it
   wraps and left-aligns, and the ticker cell is a drill-in link. */
.value-screen-table td[data-vs-col="summary"] {
  text-align: left;
  white-space: normal;
  min-width: 220px;
  color: var(--muted);
}
.value-screen-table td[data-vs-col="ticker"],
.value-screen-table td[data-vs-col="cheapness"],
.value-screen-table td[data-vs-col="classification"],
.value-screen-table td[data-vs-col="confidence"] {
  text-align: left;
}
.value-screen-table a.vs-ticker {
  font-weight: 600;
  color: var(--accent, #4c8dff);
  text-decoration: none;
}
.value-screen-table a.vs-ticker:hover {
  text-decoration: underline;
}
/* Descriptive classification badges. Distinguished by a tinted background + border rather than a text
   color, so they stay readable and theme-safe in both light and dark (text inherits the cell color).
   The tints read as neutral status, not buy/sell signals. */
.vs-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  color: inherit;
  border: 1px solid transparent;
}
/* Category hues chosen to read as neutral labels, not buy/avoid: teal, slate, amber, gray. No
   green-good / red-bad mapping, consistent with the descriptive-only stance. */
.vs-badge-cyclical-candidate {
  background: rgba(56, 132, 152, 0.18);
  border-color: rgba(56, 132, 152, 0.45);
}
.vs-badge-structural-trap {
  background: rgba(110, 118, 140, 0.2);
  border-color: rgba(110, 118, 140, 0.5);
}
.vs-badge-mixed {
  background: rgba(138, 109, 31, 0.18);
  border-color: rgba(138, 109, 31, 0.45);
}
.vs-badge-unclear {
  background: var(--surface-2, rgba(127, 140, 170, 0.12));
  border-color: var(--border-soft);
}
.rp-links {
  margin: 6px 0 0;
  padding-left: 18px;
}
.rp-links li {
  margin: 2px 0;
}
@media (max-width: 700px) {
  .screener-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}

/* --- Fragility strip bank (prd/fragility-strips.md) --- */
/* Rows synchronized to the chart time scale. Segment colors mirror STRIP_PALETTES in
   docs/js/strip-scale.js and test/strip-scale.test.mjs pins the two against each other.
   body[data-psych='off'] switches restrained -> hot: alarm intensity only, never data presence
   (prd/psych-support.md, Tier 2). The panel lives inside .chart-wrap, which keeps the dark
   palette in both themes. */
.strip-panel {
  margin: 6px 0 2px;
  font-size: 12px;
  color: var(--text);
}
.strip-panel[hidden] { display: none; }
.strip-panel-head {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 2px;
}
.strip-panel-title { font-weight: 600; }
.strip-panel-note { font-size: 11px; }
.strip-labels-toggle {
  margin-left: auto;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted-2);
  font: inherit;
  font-size: 10px;
  line-height: 1.4;
  cursor: pointer;
}
.strip-labels-toggle:hover { color: var(--text); border-color: var(--muted-2); }
.strip-labels-toggle[aria-pressed='true'] { color: var(--text); background: rgba(127, 127, 127, 0.12); }
.strip-labels-toggle:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.strip-group-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* Group header is a full-width toggle: caret, label, worst-of/representative chip. */
.strip-group { margin-top: 6px; }
.strip-group-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 2px 0;
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
}
.strip-group-caret {
  width: 0;
  height: 0;
  align-self: center;
  border-left: 4px solid currentColor;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  transition: transform 0.12s ease;
}
.strip-group[data-expanded='true'] .strip-group-caret { transform: rotate(90deg); }
.strip-group-chip { margin-left: auto; }
/* The section summary doubles as the strip legend. Its swatch follows the same restrained/hot
   palette and freshness treatment as the heatmap cells. */
.strip-group-chip::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 5px;
  border: 1px solid var(--muted-2);
  border-radius: 50%;
  vertical-align: -1px;
}
.strip-group-chip[data-level='calm']::after { background: rgba(94, 110, 130, 0.30); }
.strip-group-chip[data-level='elevated']::after { background: rgba(224, 160, 48, 0.42); }
.strip-group-chip[data-level='high']::after { background: rgba(239, 131, 80, 0.52); }
.strip-group-chip[data-level='extreme']::after { background: rgba(239, 83, 80, 0.62); }
body[data-psych='off'] .strip-group-chip[data-level='calm']::after { background: rgba(94, 110, 130, 0.34); }
body[data-psych='off'] .strip-group-chip[data-level='elevated']::after { background: rgba(224, 160, 48, 0.78); }
body[data-psych='off'] .strip-group-chip[data-level='high']::after { background: rgba(239, 106, 80, 0.88); }
body[data-psych='off'] .strip-group-chip[data-level='extreme']::after { background: rgba(239, 83, 80, 1); }
.strip-group-chip[data-state='overdue-stale']::after { opacity: 0.45; }
.strip-group-chip[data-state='missing']::after { background: transparent; }
/* Collapsed groups hide their member rows; the header chip carries the summary. */
.strip-group[data-expanded='false'] .strip-group-body { display: none; }
.strip-row { margin: 3px 0 5px; }
.strip-row-meta {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 2px;
}
.strip-scope {
  font-size: 10px;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 4px;
  color: var(--muted-2);
}
.strip-chip { font-size: 11px; color: var(--muted-2); }
.strip-chip[data-state='overdue-stale'] { font-style: italic; }
/* Info disclosure (e.g. the leveraged-funds net-short-hedge explainer). ⓘ summary expands an
   inline note; the popover text wraps and stays inside the panel width. */
.strip-info { display: inline; }
.strip-info > summary { cursor: pointer; color: var(--muted-2); font-size: 11px; list-style: none; }
.strip-info > summary::-webkit-details-marker { display: none; }
.strip-info-body {
  margin: 2px 0 4px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
  max-width: 640px;
}
.strip-track {
  position: relative;
  height: 10px;
  background: rgba(127, 127, 127, 0.10);
  border-radius: 2px;
  overflow: hidden;
}
/* Compact mode removes the metadata rows and packs the tracks into one contiguous heatmap. */
.strip-panel[data-labels='hidden'] .strip-group-body {
  display: flex;
  flex-direction: column;
}
.strip-panel[data-labels='hidden'] .strip-group[data-expanded='false'] .strip-group-body { display: none; }
.strip-panel[data-labels='hidden'] .strip-row { margin: 0; }
.strip-panel[data-labels='hidden'] .strip-row-meta { display: none; }
.strip-panel[data-labels='hidden'] .strip-track { border-radius: 0; }
.strip-panel[data-labels='hidden'] .strip-row:first-child .strip-track { border-radius: 2px 2px 0 0; }
.strip-panel[data-labels='hidden'] .strip-row:last-child .strip-track { border-radius: 0 0 2px 2px; }
.strip-seg { position: absolute; top: 0; bottom: 0; }
/* Restrained palette (psychological support on, the default). */
.strip-seg[data-level='calm'] { background: rgba(94, 110, 130, 0.30); }
.strip-seg[data-level='elevated'] { background: rgba(224, 160, 48, 0.42); }
.strip-seg[data-level='high'] { background: rgba(239, 131, 80, 0.52); }
.strip-seg[data-level='extreme'] { background: rgba(239, 83, 80, 0.62); }
/* Hot palette (psychological support off). */
body[data-psych='off'] .strip-seg[data-level='calm'] { background: rgba(94, 110, 130, 0.34); }
body[data-psych='off'] .strip-seg[data-level='elevated'] { background: rgba(224, 160, 48, 0.78); }
body[data-psych='off'] .strip-seg[data-level='high'] { background: rgba(239, 106, 80, 0.88); }
body[data-psych='off'] .strip-seg[data-level='extreme'] { background: rgba(239, 83, 80, 1); }
/* Freshness: overdue-stale carries the level at reduced opacity; missing paints nothing, so the
   track base shows through, visually distinct from calm. */
.strip-seg[data-state='overdue-stale'] { opacity: 0.45; }
.strip-seg[data-state='missing'] { background: transparent; }
.strip-cursor {
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 1px;
  background: rgba(199, 204, 214, 0.65);
  pointer-events: none;
}
/* Screen-reader-only companions (summary table + aria-live readout). */
.strip-a11y-only {
  position: absolute;
  display: block;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  contain: strict;
}

/* --- Ticker search hero (prd/ticker-search-hero.md) --- */
/* Search-first landing atop the Tickers overview: a centered utensil-web-style search field with
   SPX/QQQ (and Watchlist) quick-links beneath it. Geometry mirrors utensil-web (max-width 50rem,
   pill input, generous padding, soft shadow, placed high); colors come from the stocks palette. */
.ticker-search-hero {
  width: 100%;
  padding: clamp(1.5rem, 6vh, 3rem) 0 1.25rem;
}
.ticker-search-hero-inner {
  max-width: 50rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.ticker-search-hero-field {
  position: relative;
  width: 100%;
}
.ticker-search-hero-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--card);
  color: var(--text);
  padding: 1rem 1.5rem;
  font: inherit;
  font-size: 1rem;
  line-height: 1.5rem;
  outline: none;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}
.ticker-search-hero-input::placeholder { color: var(--muted); }
.ticker-search-hero-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent), 0 18px 40px rgba(0, 0, 0, 0.28);
}
/* On the cream page, tint the field just below the canvas and recess it instead of casting the
   dark-theme elevation shadow. Keep the accent ring as the clear interactive/focus affordance. */
html:not(.dark) .ticker-search-hero-input {
  background: color-mix(in srgb, var(--bg) 86%, var(--inset));
  box-shadow: inset 0 2px 4px color-mix(in srgb, var(--text) 11%, transparent);
}
html:not(.dark) .ticker-search-hero-input:focus {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent),
    inset 0 2px 4px color-mix(in srgb, var(--text) 11%, transparent);
}
/* The shared results dropdown, positioned under the wide hero field. */
.ticker-search-hero-results {
  border-radius: 16px;
}
.ticker-search-hero-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.25rem;
}
.ticker-hero-link {
  background: none;
  border: none;
  color: var(--accent);
  font: inherit;
  font-size: 14px;
  padding: 2px 4px;
  cursor: pointer;
  border-radius: 4px;
}
.ticker-hero-link:hover { text-decoration: underline; }
.ticker-hero-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Big centered wordmark above the search, utensil-web style. Only the empty landing shows it; in
   the full app the hero sits atop the ticker list with no title. */
.ticker-search-hero-wordmark {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--text-bright);
}
body[data-landing='full'] .ticker-search-hero-wordmark { display: none; }

/* Empty landing (prd/ticker-search-hero.md): with personal data off the app collapses to a minimal
   search page (centered field + SPX/QQQ links, nothing else), mirroring utensil-web's home. Every
   full-app surface is hidden; body[data-landing='full'] restores them. */
body[data-landing='empty'] #ladder-plan,
body[data-landing='empty'] #portfolio-charter,
body[data-landing='empty'] #rotation-suggestions,
body[data-landing='empty'] #notable-insider-buying-panel,
body[data-landing='empty'] #overview-tabs,
body[data-landing='empty'] #ticker-list-sections,
body[data-landing='empty'] #sale-tile,
body[data-landing='empty'] .content-section,
body[data-landing='empty'] .app-credits,
body[data-landing='empty'] #watchlist-perspective,
body[data-landing='empty'] #brand-home,
body[data-landing='empty'] #ticker-search,
body[data-landing='empty'] #view-toggle,
body[data-landing='empty'] #market-regime-button {
  display: none !important;
}
/* The primary nav (About, SEC Scanner) stays visible on the landing, utensil-web style; the
   Watchlist nav link is hidden by its own JS gate when there is no watchlist. */
/* The tickers panel is a 2-column grid in the full app; in the empty landing the hero is the only
   child and should span the page and center. */
body[data-landing='empty'] #overview-panel-tickers { display: block; }
body[data-landing='empty'] .overview-section { border: none; background: none; padding: 0; }
/* Place the search block in the upper middle of the viewport, utensil-web style. */
body[data-landing='empty'] .ticker-search-hero {
  padding: clamp(3rem, 14vh, 8rem) 1rem 2rem;
}
body[data-landing='empty'] .ticker-search-hero-inner {
  gap: 1.5rem;
}
body[data-landing='empty'] .ticker-hero-link[data-hero-ticker] {
  font-size: 18px;
  padding: 5px 8px;
}

/* The optional Utensil Desk theme preserves the prototype's typography and compact chrome as
   well as its palette. The content structure remains the shared Stocks interface. */
html.theme-utensildesk .site-topbar { min-height: 30px; }
html.theme-utensildesk .site-disclaimer {
  padding: 5px 20px;
  font-size: 0.72rem;
}
html.theme-utensildesk .site-header {
  width: min(1280px, calc(100% - 32px));
  min-height: 66px;
  margin: 0 auto;
  padding: 0;
  align-items: center;
  gap: 20px;
}
html.theme-utensildesk .site-nav { gap: 4px; }
html.theme-utensildesk .nav-link {
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 0.85rem;
}
html.theme-utensildesk .brand-link {
  margin-right: 3px;
  font-size: 1.04rem;
}
html.theme-utensildesk .theme-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 7px;
}
html.theme-utensildesk body[data-landing='empty'] .ticker-search-hero {
  padding: clamp(6rem, 18vh, 11rem) 0 4rem;
}
html.theme-utensildesk body[data-landing='empty'] .ticker-search-hero-inner {
  max-width: 50rem;
  gap: 0.85rem;
}
html.theme-utensildesk .ticker-search-hero-wordmark {
  margin: 0 0 0.75rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.65rem, 7vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 1.15;
}
html.theme-utensildesk body[data-landing='empty'] .ticker-search-hero-links {
  gap: 0.55rem;
  font-size: 0.85rem;
}
html.theme-utensildesk body[data-landing='empty'] .ticker-hero-link[data-hero-ticker] {
  padding: 3px;
  color: var(--muted);
  font-size: 0.85rem;
}
@media (max-width: 760px) {
  html.theme-utensildesk .site-header {
    align-items: flex-start;
    padding: 10px 0;
  }
  html.theme-utensildesk .brand-link {
    width: 100%;
    text-align: left;
  }
}
@media (max-width: 430px) {
  html.theme-utensildesk .ticker-search-hero-wordmark { font-size: 2.75rem; }
}
/* Fresh-account ticker view: the user searched and picked a ticker while personal data is off, so
   show that ticker's content (chart, price tag, tabs) but keep the personal Manager panels and the
   big landing hero hidden. Navigation is via the restored header search. */
body[data-landing='ticker'] #ladder-plan,
body[data-landing='ticker'] #portfolio-charter,
body[data-landing='ticker'] #rotation-suggestions,
body[data-landing='ticker'] #notable-insider-buying-panel,
body[data-landing='ticker'] #ticker-list-sections,
body[data-landing='ticker'] #ticker-search-hero {
  display: none !important;
}

/* --- About page (prd/about-page.md) --- */
.about-wrap {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 5vh, 3rem) 1.25rem 4rem;
}
.about-title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 1.5rem; color: var(--text-bright); }
.about-lead { font-size: 1.125rem; line-height: 1.6; color: var(--text-bright); margin: 0 0 2rem; }
.about-section { margin: 0 0 2rem; }
.about-section h2 { font-size: 1.125rem; font-weight: 600; margin: 0 0 0.5rem; color: var(--text-bright); }
.about-section p { margin: 0 0 0.75rem; line-height: 1.6; color: var(--text); }
.about-list { margin: 0 0 0.75rem; padding-left: 1.25rem; }
.about-list li { margin: 0 0 0.5rem; line-height: 1.6; color: var(--text); }
.about-dip-factors { margin: 0 0 0.75rem; padding-left: 1.25rem; }
.about-dip-factors li { margin: 0 0 0.5rem; line-height: 1.6; color: var(--text); }
.about-section .about-dip-example {
  margin: 1rem 0;
  border-left: 3px solid var(--amber);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--amber) 8%, transparent);
  padding: 0.85rem 1rem;
  color: var(--text-bright);
}
.about-cite { font-size: 13px; color: var(--muted); }
.about-cite a { color: var(--accent); }
.about-market-readiness { margin: 0.75rem 0 1rem; }
.about-section .market-readiness-intro { margin: 0 0 8px; line-height: 1.4; color: var(--muted); }
.about-section .market-readiness-question { margin: 0; line-height: 1.4; color: var(--text); }
.about-section .market-readiness-note { margin: 3px 0 0; line-height: 1.4; }
.about-section .market-readiness-note:empty { margin: 0; }
.about-section .market-readiness-guidance { margin: 3px 0 0; line-height: 1.4; color: var(--amber); }
.about-section .market-readiness-guidance:empty { margin: 0; }
.about-section .market-participation-disclaimer { margin: 6px 0 0; line-height: 1.4; color: var(--muted); }
.about-footer-note { font-size: 13px; color: var(--muted); border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 2rem; }