/* chiara.aubrains.com — SpaceX-inspired design
 * per /home/a/Projects/tom/DESIGN.md
 * Palette: pure black + spectral white (#f0f0fa)
 * Type: uppercase, positive letter-spacing, D-DIN heritage
 */

@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@400;700&display=swap');

:root {
  --black: #000000;
  --black-overlay: rgba(0, 0, 0, 0.55);
  --spectral: #f0f0fa;
  --spectral-10: rgba(240, 240, 250, 0.10);
  --spectral-20: rgba(240, 240, 250, 0.20);
  --spectral-35: rgba(240, 240, 250, 0.35);
  --spectral-60: rgba(240, 240, 250, 0.60);
  --font-display: 'Oxanium', 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'Oxanium', Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--black);
  color: var(--spectral);
  font-family: var(--font-body);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { color: #ffffff; }

/* ============ NAV ============ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 36px;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.09em;
  background: linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
}
.nav .brand { font-weight: 700; letter-spacing: 0.12em; }
.nav ul { list-style: none; display: flex; gap: 28px; align-items: center; }
.nav ul a { font-size: 12px; font-weight: 400; letter-spacing: 0.09em; line-height: 2; }
.nav .user-chip {
  margin-left: auto; padding-left: 20px; display: flex; align-items: center; gap: 8px;
  border-left: 1px solid rgba(240,240,250,0.12);
  font-size: 11px; font-weight: 400; letter-spacing: 0.04em; text-transform: none;
}
.nav .user-chip .user-email { color: var(--spectral-60); }
.nav .user-chip .user-admin-badge {
  padding: 1px 6px; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid #ff9fbf; color: #ff9fbf; border-radius: 2px;
}
.nav .user-chip .logout-link {
  color: var(--spectral-60); text-decoration: none; border-bottom: 1px dotted transparent;
}
.nav .user-chip .logout-link:hover { color: var(--spectral); border-bottom-color: var(--spectral); }

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 48px 96px 48px;
  background: radial-gradient(ellipse at 70% 40%, #0a0d18 0%, #000 70%);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(1px 1px at 15% 20%, rgba(240,240,250,.8) 50%, transparent 51%),
                    radial-gradient(1px 1px at 82% 65%, rgba(240,240,250,.6) 50%, transparent 51%),
                    radial-gradient(1px 1px at 40% 80%, rgba(240,240,250,.9) 50%, transparent 51%),
                    radial-gradient(1px 1px at 65% 15%, rgba(240,240,250,.5) 50%, transparent 51%),
                    radial-gradient(2px 2px at 28% 55%, rgba(240,240,250,.7) 50%, transparent 51%),
                    radial-gradient(1px 1px at 92% 85%, rgba(240,240,250,.4) 50%, transparent 51%),
                    radial-gradient(1px 1px at 75% 35%, rgba(240,240,250,.8) 50%, transparent 51%),
                    radial-gradient(2px 2px at 8% 78%, rgba(240,240,250,.6) 50%, transparent 51%);
  background-size: 100% 100%;
  opacity: .9;
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.75) 100%);
  pointer-events: none;
}
.hero-content { position: relative; z-index: 2; max-width: 1100px; }
.hero .eyebrow {
  font-size: 11px; letter-spacing: 0.15em; font-weight: 400;
  color: var(--spectral-60); margin-bottom: 14px;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}
.hero p {
  font-size: 16px;
  line-height: 1.65;
  max-width: 640px;
  color: var(--spectral-60);
  text-transform: none;
  letter-spacing: 0.01em;
  margin-bottom: 36px;
}
.hero .ctas { display: flex; gap: 14px; flex-wrap: wrap; }

.btn-ghost {
  display: inline-block;
  padding: 16px 28px;
  border: 1px solid var(--spectral-35);
  border-radius: 32px;
  background: var(--spectral-10);
  color: var(--spectral);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.13em;
  cursor: pointer;
  transition: all 160ms ease;
}
.btn-ghost:hover { background: var(--spectral-20); border-color: var(--spectral-60); color: #fff; }

/* ============ STATS ============ */
.stats {
  padding: 96px 48px;
  border-top: 1px solid rgba(240,240,250,0.08);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 48px;
  max-width: 1400px; margin: 0 auto;
}
.stat-label {
  font-size: 10px; letter-spacing: 0.18em; color: var(--spectral-60);
  margin-bottom: 10px;
}
.stat-value {
  font-family: var(--font-display);
  font-size: clamp(40px, 4vw, 64px);
  font-weight: 700;
  line-height: 1;
}
.stat-detail { font-size: 11px; color: var(--spectral-60); margin-top: 10px; letter-spacing: 0.1em; }

/* ============ TABLE SECTION ============ */
.table-section {
  padding: 48px 32px 96px;
  max-width: 1600px; margin: 0 auto;
}
.section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0 16px 32px;
  border-bottom: 1px solid rgba(240,240,250,0.15);
  margin-bottom: 32px;
}
.section-head h2 {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 700; letter-spacing: 0.04em;
}
.section-head .meta {
  font-size: 11px; color: var(--spectral-60); letter-spacing: 0.12em;
}
.filters {
  display: flex; gap: 10px; flex-wrap: wrap; padding: 0 16px 16px;
  scrollbar-width: thin;
}
.filter-chip {
  padding: 8px 14px; border: 1px solid var(--spectral-35); border-radius: 24px;
  background: transparent; color: var(--spectral);
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; cursor: pointer; white-space: nowrap;
  flex-shrink: 0;  /* prevent squish in the horizontal-scroll case */
}
.filter-chip.active, .filter-chip:hover { background: var(--spectral-10); border-color: var(--spectral-60); }

/* Searchbar */
.searchbar-wrap {
  position: relative; padding: 0 16px 20px;
}
#searchbar {
  width: 100%; padding: 12px 56px 12px 16px;
  background: transparent; color: var(--spectral);
  border: 1px solid var(--spectral-35); border-radius: 32px;
  font-family: var(--font-body); font-size: 13px; letter-spacing: 0.05em;
  outline: none; transition: border-color 120ms ease, background 120ms ease;
  text-transform: none;
}
#searchbar::placeholder { color: var(--spectral-60); text-transform: none; letter-spacing: 0.03em; }
#searchbar:focus { border-color: var(--spectral-60); background: var(--spectral-10); }
.kbd {
  position: absolute; right: 28px; top: 50%; transform: translateY(-50%);
  padding: 4px 8px; border: 1px solid var(--spectral-35); border-radius: 4px;
  font-family: var(--font-display); font-size: 10px; letter-spacing: 0.1em;
  color: var(--spectral-60); pointer-events: none; background: var(--black);
}
#searchbar:focus ~ .kbd { opacity: 0; }

/* Table wrapper — enables horizontal scroll on narrow screens without
   letting the table overflow the page and breaking layout. */
.screen-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Scroll-shadow cue so users know the table extends right */
  background: linear-gradient(to right, var(--black), var(--black)) 0 0 / 20px 100% no-repeat,
              linear-gradient(to right, var(--black), var(--black)) 100% 0 / 20px 100% no-repeat,
              linear-gradient(to right, rgba(240,240,250,0.08), transparent) 0 0 / 16px 100% no-repeat,
              linear-gradient(to left, rgba(240,240,250,0.08), transparent) 100% 0 / 16px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}

.screen-table {
  width: 100%; border-collapse: collapse;
  font-size: 12px; letter-spacing: 0.03em;
}
.screen-table thead th {
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-align: left; padding: 14px 12px;
  border-bottom: 1px solid rgba(240,240,250,0.2);
  color: var(--spectral-60);
  position: sticky; top: 0; background: var(--black); z-index: 2;
  cursor: help;  /* hint that there's a tooltip; override below for sortable cols */
  user-select: none;
}
.screen-table thead th:hover { color: var(--spectral); }
.screen-table thead th.num { text-align: right; }
.screen-table thead th[data-sort] { cursor: pointer; }
.screen-table thead th[data-sort]:hover { color: #fff; background: rgba(240,240,250,0.04); }
.screen-table thead th[data-sort].sort-asc,
.screen-table thead th[data-sort].sort-desc { color: var(--spectral); }
.screen-table thead th[data-sort] .sort-arrow {
  display: inline-block; width: 8px; margin-left: 4px;
  font-size: 10px; color: var(--spectral-35);
}
.screen-table thead th[data-sort].sort-asc .sort-arrow,
.screen-table thead th[data-sort].sort-desc .sort-arrow { color: #9cffb9; }
.screen-table tbody tr { border-bottom: 1px solid rgba(240,240,250,0.06); }
.screen-table tbody tr:hover { background: rgba(240,240,250,0.035); }
.screen-table td { padding: 14px 12px; vertical-align: top; }
.screen-table td.ticker { font-weight: 700; letter-spacing: 0.1em; white-space: nowrap; }
.screen-table td.ticker a.ticker-link { color: inherit; border-bottom: 1px dotted transparent; }
.screen-table td.ticker a.ticker-link:hover { border-bottom-color: var(--spectral); }
.screen-table a.metric-link { color: inherit; text-decoration: none; border-bottom: 1px dotted transparent; }
.screen-table a.metric-link:hover { border-bottom-color: var(--spectral); cursor: pointer; }
.screen-table td.name { text-transform: none; letter-spacing: 0; max-width: 280px; }
.screen-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.screen-table td.pass { color: #9cffb9; font-weight: 700; }
.screen-table td.gap { color: rgba(240,240,250,0.35); }
.screen-table td.num.dampened { color: var(--spectral-60); font-weight: 400; }
.screen-table td.num.dampened sup { font-size: 9px; letter-spacing: 0; margin-left: 1px; }
.screen-table td.web { text-transform: none; letter-spacing: 0; font-size: 11px; max-width: 180px; word-break: break-all; }
.screen-table td.web a.web-link { color: var(--spectral-60); border-bottom: 1px dotted rgba(240,240,250,0.25); }
.screen-table td.web a.web-link:hover { color: var(--spectral); border-bottom-color: var(--spectral); }
.footnote {
  padding: 12px 16px 0;
  max-width: 1600px; margin: 0 auto;
  font-size: 10px; letter-spacing: 0.08em;
  color: var(--spectral-60); text-transform: none;
}
.footnote code {
  font-family: inherit; letter-spacing: 0.04em;
  background: var(--spectral-10); padding: 1px 6px; border-radius: 3px;
}
.screen-table tr.passed-all { background: rgba(156,255,185,0.04); }
.screen-table tr.passed-all td.ticker::before { content: '★ '; color: #9cffb9; }

.flag {
  display: inline-block; padding: 2px 7px; margin: 0 3px 2px 0;
  font-size: 9px; letter-spacing: 0.1em;
  border: 1px solid rgba(240,240,250,0.25); border-radius: 3px;
  color: var(--spectral-60);
}
.flag.holding { border-color: #ffcf66; color: #ffcf66; }
.flag.founder { border-color: #9cffb9; color: #9cffb9; }
.flag.duplicate { border-color: #ff9fbf; color: #ff9fbf; }

.rule-badge {
  display: inline-block; margin-left: 4px; color: #ffcf66; font-weight: 700;
  text-decoration: none; cursor: help;
}
.rule-badge:hover { color: #ffe099; }

a.funds-pill {
  display: inline-block; padding: 2px 8px; font-size: 11px; letter-spacing: 0.04em;
  color: #a8d8ff; border: 1px solid #4a7faf; border-radius: 3px;
  text-decoration: none; background: rgba(70, 130, 190, 0.08);
}
a.funds-pill:hover { background: rgba(70, 130, 190, 0.18); border-color: #7faadf; color: #d0e8ff; }

/* Funds page */
.toggle-bar { display: flex; gap: 4px; margin: 8px 0 24px 0; }
.toggle {
  background: transparent; border: 1px solid rgba(240,240,250,0.15);
  color: var(--spectral-60); padding: 8px 18px; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
.toggle.active { border-color: var(--spectral); color: var(--spectral); background: rgba(240,240,250,0.04); }
.toggle:hover { color: var(--spectral); }

.funds-section { max-width: 1100px; margin: 0 auto 64px auto; padding: 0 32px; }

.fund-card {
  border: 1px solid rgba(240,240,250,0.08); border-radius: 6px;
  padding: 24px; margin-bottom: 20px; background: rgba(240,240,250,0.015);
}
.fund-card h3 { font-size: 18px; margin: 0 0 6px 0; letter-spacing: 0.02em; }
.fund-card .fund-meta { font-size: 12px; color: var(--spectral-60); margin-bottom: 8px; }
.fund-card .fund-strategy { font-size: 13px; color: var(--spectral-80); font-style: italic; margin: 4px 0 8px 0; }
.fund-card .fund-source { font-size: 11px; color: var(--spectral-60); margin-bottom: 16px; }
.fund-card .fund-source a { color: var(--spectral); margin-left: 6px; }

.fund-holdings-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.fund-holdings-table thead th {
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 10px; color: var(--spectral-60); font-weight: 700;
  padding: 8px 12px; text-align: left; border-bottom: 1px solid rgba(240,240,250,0.12);
}
.fund-holdings-table thead th.num, .fund-holdings-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.fund-holdings-table td {
  padding: 8px 12px; border-bottom: 1px solid rgba(240,240,250,0.04);
}
.fund-holdings-table td.ticker { font-weight: 700; letter-spacing: 0.08em; white-space: nowrap; }
.fund-holdings-table td.name { color: var(--spectral-80); }
.fund-holdings-table a.matched-link {
  display: inline-block; padding: 1px 6px; font-size: 10px; letter-spacing: 0.08em;
  background: rgba(156,255,185,0.06); border: 1px solid rgba(156,255,185,0.3);
  color: #9cffb9; text-decoration: none; border-radius: 3px;
}
.fund-holdings-table a.matched-link:hover { background: rgba(156,255,185,0.14); }
.funds-held-by { font-size: 11px; color: var(--spectral-60); font-family: var(--mono); }

/* Ticker page — margins, financials, profile, brokers, funds sections */
.ticker-margins, .ticker-financials, .ticker-profile, .ticker-brokers, .ticker-funds {
  max-width: 1100px; margin: 48px auto; padding: 0 32px;
}
.tier-badge {
  display: inline-block; padding: 2px 8px; margin-left: 10px;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid rgba(240,240,250,0.25); border-radius: 3px;
  color: var(--spectral-60); font-weight: 400;
}
.tier-badge.tier-4 {
  border-color: #ffcf66; color: #ffcf66;
}
.margin-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 12px;
}
.margin-grid > div {
  border: 1px solid rgba(240,240,250,0.08); padding: 16px; border-radius: 4px;
}
.margin-label { font-size: 11px; color: var(--spectral-60); text-transform: uppercase; letter-spacing: 0.08em; }
.margin-val { font-size: 28px; font-weight: 700; margin: 4px 0; font-variant-numeric: tabular-nums; }
.margin-range { font-size: 11px; color: var(--spectral-60); }
.ticker-margins .chart-box { height: 280px; }

.financials-table-wrap { overflow-x: auto; }
.financials-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.financials-table th {
  padding: 8px 12px; text-align: left; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 10px; color: var(--spectral-60); border-bottom: 1px solid rgba(240,240,250,0.15);
  white-space: nowrap;
}
.financials-table th.num { text-align: right; }
.financials-table td { padding: 6px 12px; border-bottom: 1px solid rgba(240,240,250,0.04); }
.financials-table td.num { text-align: right; }
.financials-table td.num.gap { color: var(--spectral-60); }

.profile-provenance {
  font-size: 11px; color: var(--spectral-60); margin-bottom: 16px;
  padding: 8px 12px; background: rgba(255,207,102,0.04); border-left: 2px solid #ffcf66;
}
.profile-body .qa-block {
  margin-bottom: 24px; padding: 16px 20px; background: rgba(240,240,250,0.02);
  border-radius: 4px; border: 1px solid rgba(240,240,250,0.06);
}
.profile-body .qa-block.low-conf { border-color: rgba(255,207,102,0.3); }
.profile-body h4 {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--spectral-60); margin: 0 0 8px 0;
}
.profile-body p { margin: 0; color: var(--spectral); line-height: 1.5; font-size: 14px; }
.profile-body .cit a {
  color: var(--spectral-60); font-size: 11px; margin: 0 2px; text-decoration: none;
}
.profile-body .cit a:hover { color: var(--spectral); }
.profile-body .comp-list { list-style: none; padding: 0; }
.profile-body .comp-list li { padding: 10px 0; border-bottom: 1px solid rgba(240,240,250,0.04); }
.profile-body .comp-list li:last-child { border-bottom: none; }
.profile-body .comp-why { font-size: 12px; color: var(--spectral-60); margin-top: 4px; }
.profile-body .comp-diff { font-size: 12px; color: var(--spectral-80); margin-top: 4px; }
.profile-body .single-source {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em;
  background: rgba(255,207,102,0.12); color: #ffcf66; border-radius: 2px;
}

.brokers-table, .funds-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.brokers-table th, .funds-table th {
  padding: 8px 12px; text-align: left; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 10px; color: var(--spectral-60); border-bottom: 1px solid rgba(240,240,250,0.15);
}
.brokers-table th.num, .funds-table th.num { text-align: right; }
.brokers-table td, .funds-table td { padding: 8px 12px; border-bottom: 1px solid rgba(240,240,250,0.04); }
.brokers-table td.num, .funds-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Axis legend for dual-axis charts */
.axis-legend {
  font-size: 11px; color: var(--spectral-60); letter-spacing: 0.04em;
  text-transform: none; font-weight: 400; margin-left: 12px;
}
.axis-legend .axis-left { color: #9cffb9; }
.axis-legend .axis-right { color: #ffcf66; }

/* User-preferences panel */
.settings-group.user-prefs {
  grid-column: 1 / -1;    /* span full grid width when used inside the grid */
  border-color: rgba(156,255,185,0.25);
  background: rgba(156,255,185,0.02);
}
.tag.writable { border-color: #9cffb9; color: #9cffb9; }

.prefs-grid { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 12px; }
.prefs-fieldset {
  border: 1px solid rgba(240,240,250,0.08); border-radius: 4px;
  padding: 12px 18px; min-width: 320px; flex: 1 1 320px;
}
.prefs-fieldset legend {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--spectral-60); padding: 0 6px;
}
.pref-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; gap: 16px; border-bottom: 1px solid rgba(240,240,250,0.04);
}
.pref-row:last-child { border-bottom: none; }
.pref-row span { font-size: 13px; color: var(--spectral); flex: 1; }
.pref-row select, .pref-row input[type="number"], .pref-row input[type="range"] {
  background: rgba(240,240,250,0.04); border: 1px solid rgba(240,240,250,0.15);
  color: var(--spectral); padding: 4px 8px; font: inherit; font-size: 12px;
  font-family: var(--mono); min-width: 120px;
}
.pref-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: #9cffb9; }
.pref-default {
  font-size: 9px; letter-spacing: 0.08em; color: var(--spectral-60);
  padding: 1px 5px; border: 1px solid rgba(240,240,250,0.15); border-radius: 2px;
}
.pref-row-columns, .pref-row-multi, .pref-row-order { flex-direction: column; align-items: flex-start; }
.pref-cols-list {
  display: flex; flex-direction: column; gap: 10px; margin-top: 6px; width: 100%;
}
.pref-cols-group {
  border-left: 2px solid rgba(240,240,250,0.12); padding-left: 10px;
}
.pref-cols-group-head {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--spectral-60); margin-bottom: 4px; font-weight: 400;
}
.pref-cols-group-items {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 2px 12px;
}
.pref-multi-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 4px 12px; margin-top: 6px; width: 100%;
}
.pref-cols-group-items label, .pref-multi-list label {
  font-size: 12px; color: var(--spectral-80); display: flex; align-items: center; gap: 6px;
  cursor: pointer;
}
.pref-order-note { font-size: 11px; color: var(--spectral-60); }

/* Order list (drag-alternative: up/down arrows) */
.order-list { list-style: none; padding: 0; margin: 8px 0 0 0; }
.order-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; margin-bottom: 4px;
  background: rgba(240,240,250,0.03); border: 1px solid rgba(240,240,250,0.08);
  border-radius: 3px; font-size: 12px;
}
.order-rank { color: var(--spectral-60); min-width: 20px; font-variant-numeric: tabular-nums; }
.order-label { flex: 1; color: var(--spectral); }
.order-btn {
  background: rgba(240,240,250,0.04); border: 1px solid rgba(240,240,250,0.15);
  color: var(--spectral); padding: 2px 10px; font-size: 14px; cursor: pointer;
  border-radius: 2px; line-height: 1;
}
.order-btn:hover:not(:disabled) { background: rgba(240,240,250,0.1); border-color: rgba(240,240,250,0.3); }
.order-btn:disabled { opacity: 0.25; cursor: not-allowed; }

/* Collapsible blocks — works on fieldset (legend) + section (h3/h4 head). */
.collapsible-head { cursor: pointer; user-select: none; }
.collapsible-head::after {
  content: '▾'; margin-left: 8px; color: var(--spectral-60); font-size: 10px;
  display: inline-block; transition: transform 0.15s;
}
.collapsible.collapsed > .collapsible-head::after,
fieldset.collapsible.collapsed > legend.collapsible-head::after { transform: rotate(-90deg); }
.collapsible.collapsed > .collapsible-body,
fieldset.collapsible.collapsed > .collapsible-body { display: none; }
fieldset.collapsible { padding-bottom: 12px; }
fieldset.collapsible.collapsed { padding-bottom: 6px; }

/* Admin-controls panel — the top-level bottom-of-settings block. */
.settings-group.admin-controls {
  grid-column: 1 / -1;
  border-color: rgba(255,159,191,0.25);  /* pink-ish — deliberate visual distinction */
  background: rgba(255,159,191,0.02);
  margin-top: 24px;
}
.tag.admin-tag { border-color: #ff9fbf; color: #ff9fbf; }
.admin-sub {
  font-size: 12px; color: var(--spectral-60);
  margin: 4px 0 16px 0; font-style: italic;
}
.admin-subsection {
  border: 1px solid rgba(240,240,250,0.08); border-radius: 3px;
  padding: 10px 14px; margin-bottom: 10px;
}
.admin-subsection h4 {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--spectral); margin: 0; font-weight: 400;
}
.admin-subsection .collapsible-body { padding-top: 10px; }
.admin-subsection .sub-note {
  font-size: 10px; color: var(--spectral-60); font-weight: 400;
  text-transform: none; letter-spacing: 0.02em; margin-left: 8px;
}

/* Self-activity block (visible to all users, collapsed by default) */
.settings-group.collapsible.collapsed > .collapsible-body { display: none; }

/* Admin user-management table */
.admin-users-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.admin-users-table th {
  text-align: left; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 10px; color: var(--spectral-60); padding: 8px 10px;
  border-bottom: 1px solid rgba(240,240,250,0.15);
}
.admin-users-table td { padding: 8px 10px; border-bottom: 1px solid rgba(240,240,250,0.04); }
.admin-users-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-users-table td.last-login { color: var(--spectral-60); font-size: 11px; }
.admin-users-table .self-marker {
  display: inline-block; margin-left: 6px; padding: 1px 5px; font-size: 9px;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--spectral-60); color: var(--spectral-60); border-radius: 2px;
}
.admin-toggle { font-size: 11px; color: var(--spectral-60); cursor: pointer; }
.admin-toggle input { margin-right: 4px; vertical-align: middle; accent-color: #9cffb9; }
.au-remove {
  background: transparent; border: 1px solid rgba(255,159,191,0.3);
  color: #ff9fbf; padding: 3px 10px; font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; cursor: pointer; border-radius: 2px;
}
.au-remove:hover { background: rgba(255,159,191,0.12); border-color: #ff9fbf; }

.add-user-form { margin-top: 16px; padding-top: 12px; border-top: 1px dashed rgba(240,240,250,0.1); }
.add-user-form h5 { margin: 0 0 8px 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--spectral-60); font-weight: 400; }
.add-user-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.add-user-row input[type="email"], .add-user-row input[type="text"] {
  background: rgba(240,240,250,0.04); border: 1px solid rgba(240,240,250,0.15);
  color: var(--spectral); padding: 6px 10px; font: inherit; font-size: 12px;
  min-width: 180px;
}
.add-user-row label { font-size: 11px; color: var(--spectral-60); }
.add-user-row button {
  background: #9cffb9; color: #0a0a0a; border: 0; padding: 6px 16px;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
  border-radius: 2px;
}
.au-status { margin-top: 8px; font-size: 11px; min-height: 14px; }
.au-status.ok { color: #9cffb9; }
.au-status.err { color: #ff9999; }

/* Admin defaults / bounds table */
.admin-defaults-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.admin-defaults-table th {
  text-align: left; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 10px; color: var(--spectral-60); padding: 8px 10px;
  border-bottom: 1px solid rgba(240,240,250,0.15);
}
.admin-defaults-table th.num, .admin-defaults-table td.num { text-align: right; }
.admin-defaults-table td { padding: 6px 10px; border-bottom: 1px solid rgba(240,240,250,0.04); vertical-align: top; }
.admin-defaults-table td.ab-key { font-family: var(--mono); font-size: 11px; max-width: 280px; }
.admin-defaults-table .ab-desc { color: var(--spectral-60); font-family: Georgia, serif; font-size: 10px; font-style: italic; }
.admin-defaults-table input {
  background: rgba(240,240,250,0.04); border: 1px solid rgba(240,240,250,0.15);
  color: var(--spectral); padding: 3px 6px; font: inherit;
  font-family: var(--mono); font-size: 11px; width: 70px; text-align: right;
}
.admin-defaults-table input.ab-default { min-width: 140px; max-width: 260px; width: auto; text-align: left; }
.ab-scope {
  display: inline-block; padding: 1px 6px; font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase; border: 1px solid rgba(240,240,250,0.2); border-radius: 2px;
  color: var(--spectral-60);
}
.ab-scope.scope-admin { border-color: #ff9fbf; color: #ff9fbf; }

/* Activity log table */
.activity-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.activity-table th {
  text-align: left; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 10px; color: var(--spectral-60); padding: 6px 8px;
  border-bottom: 1px solid rgba(240,240,250,0.15);
}
.activity-table td { padding: 4px 8px; border-bottom: 1px solid rgba(240,240,250,0.04); vertical-align: top; }
.activity-table .ev-ts { font-family: var(--mono); color: var(--spectral-60); white-space: nowrap; }
.activity-table .ev-email { font-size: 11px; color: var(--spectral-80); }
.activity-table .ev-action { font-family: var(--mono); color: #9cffb9; }
.activity-table .ev-ctx code {
  background: rgba(240,240,250,0.04); color: var(--spectral-60);
  padding: 1px 6px; font-size: 10px; border-radius: 2px;
}

/* Column visibility toggling, driven by user prefs */
.screen-table th.col-hidden, .screen-table td.col-hidden { display: none; }

/* Ticker detail page — sticky sub-nav tab strip */
.ticker-tabs {
  position: sticky; top: 0; z-index: 50;
  display: flex; gap: 2px; padding: 10px 32px;
  background: var(--background);
  border-bottom: 1px solid rgba(240,240,250,0.1);
  max-width: 1100px; margin: 0 auto; overflow-x: auto;
}
.ticker-tabs a {
  padding: 6px 14px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--spectral-60); text-decoration: none;
  border: 1px solid transparent; border-radius: 3px;
  white-space: nowrap;
}
.ticker-tabs a:hover { color: var(--spectral); border-color: rgba(240,240,250,0.12); }
.ticker-tabs a.active { color: var(--spectral); border-color: var(--spectral); background: rgba(240,240,250,0.04); }
.ticker-tabs .tab-chip {
  display: inline-block; margin-left: 4px; padding: 0 4px;
  font-size: 8px; letter-spacing: 0.08em;
  border: 1px solid #ffcf66; color: #ffcf66; border-radius: 2px;
}
.ticker-tabs .tab-chip.tier-4 { border-color: #ffcf66; color: #ffcf66; }

/* Sections collapsed by default via prefs — clickable header expands. */
section.pref-collapsed > *:not(h3) { display: none; }
section.pref-collapsed h3::after {
  content: ' ▸'; color: var(--spectral-60); font-size: 11px;
}
section.pref-collapsed h3 { cursor: pointer; }
section.pref-collapsed:not(.pref-collapsed) h3 { cursor: default; }

section.rules {
  max-width: 1100px; margin: 80px auto; padding: 0 32px;
}
section.rules h2 { font-size: 28px; letter-spacing: 0.02em; margin-bottom: 16px; }
section.rules > p { color: var(--spectral-60); margin-bottom: 32px; max-width: 800px; }
section.rules dl.rules-list { display: block; }
section.rules dl.rules-list dt {
  margin-top: 24px; font-size: 16px; letter-spacing: 0.04em;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
section.rules dl.rules-list dt .rule-id {
  display: inline-block; padding: 2px 8px; font-size: 11px; letter-spacing: 0.14em;
  border: 1px solid #ffcf66; color: #ffcf66; border-radius: 3px;
}
section.rules dl.rules-list dt .rule-count {
  font-size: 11px; color: var(--spectral-60); letter-spacing: 0.06em; font-weight: 400;
}
section.rules dl.rules-list dd {
  margin: 8px 0 0 0; padding-left: 0; color: var(--spectral-80);
  font-size: 14px; line-height: 1.6; max-width: 800px;
}
section.rules dl.rules-list dd strong { color: var(--spectral); }

.screen-table td.ceo {
  text-transform: none; letter-spacing: 0; font-size: 11px;
  max-width: 180px; color: var(--spectral);
}
.screen-table td.ceo .ceo-name { border-bottom: 1px dotted rgba(240,240,250,0.25); }

/* ============ SETTINGS ============ */
.settings {
  padding: 96px 48px;
  border-top: 1px solid rgba(240,240,250,0.08);
  max-width: 1400px; margin: 0 auto;
}
.settings-head { margin-bottom: 48px; }
.settings-head h2 {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 700; letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.settings-head .settings-sub {
  font-size: 13px; letter-spacing: 0.01em; text-transform: none;
  color: var(--spectral-60); max-width: 760px; line-height: 1.6;
}
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 40px;
}
.settings-group {
  border-top: 1px solid rgba(240,240,250,0.15);
  padding-top: 20px;
}
.settings-group h3 {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
  margin-bottom: 18px; color: var(--spectral);
}
.settings-group h3 .tag {
  display: inline-block; margin-left: 8px; font-size: 9px; padding: 2px 7px;
  border: 1px solid rgba(240,240,250,0.25); border-radius: 3px;
  color: var(--spectral-60); letter-spacing: 0.1em;
}
.settings-group dl {
  display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px;
  font-size: 12px; letter-spacing: 0; text-transform: none; line-height: 1.55;
}
.settings-group dt {
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--spectral-60); padding-top: 2px;
  white-space: normal; max-width: 180px;
}
.settings-group dd { color: var(--spectral); margin: 0 0 8px; }
.settings-group code {
  font-family: ui-monospace, 'Menlo', 'Consolas', monospace;
  font-size: 11px; background: var(--spectral-10); padding: 1px 6px;
  border-radius: 3px; letter-spacing: 0;
}
.settings-group .src {
  margin-top: 14px; font-size: 10px; color: var(--spectral-60);
  text-transform: none; letter-spacing: 0.02em;
}

/* ============ METHODOLOGY ============ */
.methodology {
  padding: 96px 48px;
  border-top: 1px solid rgba(240,240,250,0.08);
  max-width: 1200px; margin: 0 auto;
}
.methodology h2 {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 700; margin-bottom: 24px; letter-spacing: 0.04em;
}
.methodology p, .methodology li {
  text-transform: none; letter-spacing: 0.01em;
  color: var(--spectral-60); line-height: 1.7; margin-bottom: 14px;
  max-width: 760px;
}
.methodology ul { padding-left: 20px; }

/* ============ FOOTER ============ */
.footer {
  padding: 32px 48px;
  font-size: 10px; letter-spacing: 0.15em; color: var(--spectral-60);
  border-top: 1px solid rgba(240,240,250,0.08);
  display: flex; justify-content: space-between;
}

/* ============ RESPONSIVE ============ */

/* Tablet / narrow desktop */
@media (max-width: 900px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .stat-value { font-size: clamp(32px, 8vw, 48px); }
  .nav { padding: 18px 24px; }
  .nav ul { gap: 20px; }
  .nav ul li:nth-child(n+4) { display: none; }  /* keep brand + Screen + Methodology on small screens */
  .hero { padding: 0 24px 64px; min-height: 90vh; }
  .hero h1 { font-size: clamp(28px, 8vw, 48px); }
  .hero p { font-size: 14px; }
  .stats, .methodology { padding: 56px 24px; }
  .methodology h2 { font-size: 24px; }
  .table-section { padding: 32px 8px 64px; }
  .section-head { padding: 0 12px 24px; flex-wrap: wrap; gap: 8px; }
  .section-head h2 { font-size: 22px; }

  /* Filters: switch from wrap to horizontal-scroll — cleaner on phone than
     a 4-row wall of chips. The scroll affordance (thin scrollbar + fades)
     signals more content is to the right. */
  .filters {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 0 12px 12px;
    mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
  }

  /* Table: smaller font, tighter cells, sticky ticker column on scroll. */
  .screen-table { font-size: 11px; }
  .screen-table thead th,
  .screen-table td { padding: 10px 8px; }
  .screen-table td.name { max-width: 180px; }
  .screen-table td.web { max-width: 120px; font-size: 10px; }
  .screen-table td.ticker,
  .screen-table thead th:first-child {
    position: sticky; left: 0;
    background: var(--black);
    box-shadow: 2px 0 0 0 rgba(240,240,250,0.08);
  }
  .screen-table tr.passed-all td.ticker { background: #001100; }  /* keep pass tint over sticky bg */

  /* Hide the two ROIC cross-check columns on narrow screens — cognitive load
     vs information trade-off favors removing. Primary ROIC (financing) and
     rev growth stay. Column indexes after CEO-equity-% was inserted at col 9:
       1 ticker, 2 company, 3 ceo, 4 country, 5 sector, 6 web,
       7 mkt-cap, 8 insider%, 9 CEO%, 10 ROIC fin, 11 ROIC op, 12 ROIC ex-gw,
       13 rev-gr, 14 ND/EBITDA, 15 D:E mcap, 16 flags.
     Hide ROIC op + ROIC ex-gw. */
  .screen-table thead th:nth-child(11),
  .screen-table tbody td:nth-child(11),
  .screen-table thead th:nth-child(12),
  .screen-table tbody td:nth-child(12) { display: none; }

  .footer { padding: 24px; flex-direction: column; gap: 8px; }
}

/* Phone */
@media (max-width: 600px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .stat-value { font-size: clamp(28px, 9vw, 40px); }
  .hero { padding: 0 20px 56px; }
  .hero p { font-size: 13px; }
  .stats, .methodology { padding: 48px 20px; }
  .section-head h2 { font-size: 18px; }
  .methodology p, .methodology li { font-size: 13px; line-height: 1.6; }

  /* Also hide Flags + CEO column on phone — scroll right / switch to desktop
     for the full picture. CEO is col 3, Flags is col 16 after the CEO-%
     insertion. */
  .screen-table thead th:nth-child(3),
  .screen-table tbody td:nth-child(3),
  .screen-table thead th:nth-child(16),
  .screen-table tbody td:nth-child(16) { display: none; }

  /* Bigger touch targets for chips */
  .filter-chip { padding: 10px 14px; font-size: 11px; }

  /* Settings on phone */
  .settings { padding: 48px 20px; }
  .settings-head h2 { font-size: 22px; }
  .settings-grid { grid-template-columns: 1fr; gap: 32px; }
  .settings-group dl { grid-template-columns: 1fr; gap: 2px 0; }
  .settings-group dt { max-width: none; padding-top: 12px; }
  .kbd { display: none; }  /* phones don't have a Cmd/Ctrl-K keyboard */
}

/* ============ TICKER DETAIL PAGE ============ */
.ticker-hero {
  padding: 96px 48px 32px;
  max-width: 1400px; margin: 0 auto;
}
.back-link {
  display: inline-block; font-size: 11px; color: var(--spectral-60);
  letter-spacing: 0.12em; margin-bottom: 20px;
  border-bottom: 1px dotted rgba(240,240,250,0.25);
}
.back-link:hover { color: var(--spectral); border-bottom-color: var(--spectral); }
.ticker-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 40px;
  border-bottom: 1px solid rgba(240,240,250,0.15);
  padding-bottom: 24px;
}
.ticker-ident h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px); font-weight: 700;
  letter-spacing: 0.04em; line-height: 1.0;
  margin-bottom: 8px;
}
.ticker-sub {
  font-family: var(--font-body); font-size: 18px;
  text-transform: none; letter-spacing: 0.01em;
  color: var(--spectral);
  margin-bottom: 10px;
}
.ticker-meta {
  font-size: 11px; color: var(--spectral-60); letter-spacing: 0.12em;
}
.pass-badge {
  display: inline-block; padding: 8px 14px;
  border: 1px solid #9cffb9; border-radius: 20px;
  color: #9cffb9; font-size: 11px; letter-spacing: 0.14em; font-weight: 700;
}
.longlist-badge {
  display: inline-block; padding: 8px 14px;
  border: 1px solid var(--spectral-35); border-radius: 20px;
  color: var(--spectral-60); font-size: 11px; letter-spacing: 0.14em; font-weight: 700;
}
.ticker-grid {
  max-width: 1400px; margin: 40px auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
}
.ticker-card {
  border-top: 1px solid rgba(240,240,250,0.15);
  padding-top: 20px;
}
.ticker-card h3 {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
  margin-bottom: 18px; color: var(--spectral);
}
.ticker-card dl {
  display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px;
  font-size: 13px; letter-spacing: 0; text-transform: none; line-height: 1.55;
}
.ticker-card dt {
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--spectral-60);
  white-space: normal; max-width: 180px;
}
.ticker-card dd { color: var(--spectral); margin: 0 0 10px; }
.ticker-charts {
  max-width: 1400px; margin: 40px auto;
  padding: 0 48px;
}
.chart-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid rgba(240,240,250,0.15);
  padding-bottom: 16px; margin-bottom: 32px;
}
.chart-head h2 {
  font-family: var(--font-display); font-size: 24px; font-weight: 700;
  letter-spacing: 0.04em;
}
.chart-meta { font-size: 11px; color: var(--spectral-60); letter-spacing: 0.12em; }
.chart-card {
  margin-bottom: 48px;
  border-top: 1px solid rgba(240,240,250,0.15);
  padding-top: 20px;
}
.chart-card h3 {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; margin-bottom: 16px;
}
.chart-box { height: 320px; margin-bottom: 12px; }
.chart-stats {
  font-size: 12px; color: var(--spectral-60);
  letter-spacing: 0.04em; text-transform: none;
}
.ticker-about {
  max-width: 1000px; margin: 40px auto 96px;
  padding: 0 48px;
}
.ticker-about h3 {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; margin-bottom: 12px;
  border-top: 1px solid rgba(240,240,250,0.15);
  padding-top: 20px;
}
.about-summary {
  text-transform: none; letter-spacing: 0.01em; line-height: 1.65;
  color: var(--spectral-60); margin-bottom: 12px;
}
.about-src { font-size: 11px; color: var(--spectral-60); text-transform: none; letter-spacing: 0; }

@media (max-width: 900px) {
  .ticker-hero { padding: 64px 24px 24px; }
  .ticker-head { flex-direction: column; gap: 16px; }
  .ticker-grid, .ticker-charts, .ticker-about { padding: 0 24px; }
  .chart-box { height: 260px; }
}