/* ================================================================
   CENTRICITY × LIQUID GLASS — overlay skin
   v2 · July 2026 · targets the LIVE dashboard markup (no class edits)
   ----------------------------------------------------------------
   HOW TO USE
   • Load this file AFTER every existing stylesheet. Do not edit
     existing CSS. Removing this file restores production 1:1.
   • It re-skins existing selectors (header.appbar, section.block,
     aside.rail, .qtile, …). No markup changes needed.
   • §1 tokens · §2 ground+type · §3 dark chrome · §4 light bands
     §5 cards/panels · §6 inner tiles · §7 tables · §8 controls
     §9 overlays · §10 fallbacks/print
   RULES (keep)
   • Glass on CHROME only. Never blur table rows, cells, or chart
     plot areas. Never blur any element repeated more than ~20×.
   • Max two stacked glass layers.
   • Tints: tan / gold / warm grey only. No dark-blue/purple, no
     dark mode. Raw gold #BD9568 is never body text (#7E5E3C is).
   ================================================================ */

:root{
  /* — type — */
  --glass-font: 'Cambria', Georgia, 'Times New Roman', serif;

  /* — fills — */
  --glass-bg:       rgba(251,247,241,.38);  /* frosted warm white — cards, rails */
  --glass-bg-tan:   rgba(219,200,178,.26);  /* Light Tan tint — quiet emphasis   */
  --glass-bg-gold:  rgba(189,149,104,.15);  /* Warm Gold tint — active/featured  */
  --glass-bg-dark:  rgba(4,3,2,.95);       /* header/footer: reads true black, keeps a whisper of frost */
  --glass-solid:    #FAF6F0;                /* no-blur fallback fill             */

  /* — frost (every use pairs with -webkit-) — */
  --glass-blur:      blur(26px) saturate(1.55);
  --glass-blur-soft: blur(16px) saturate(1.35);
  --glass-blur-deep: blur(40px) saturate(1.6);

  /* — line-work — */
  --glass-border:         rgba(189,149,104,.32);           /* gold hairline */
  --glass-highlight:      inset 0 1px 0 rgba(255,255,255,.90),
                          inset 0 -1px 0 rgba(189,149,104,.14);
  --glass-highlight-dark: inset 0 1px 0 rgba(255,255,255,.10),
                          inset 0 -1px 0 rgba(189,149,104,.45);

  /* — depth (warm, never blue-black) — */
  --glass-shadow:        0 1px 2px rgba(24,16,4,.04), 0 10px 30px rgba(24,16,4,.07);
  --glass-shadow-raised: 0 2px 6px rgba(24,16,4,.06), 0 18px 44px rgba(24,16,4,.12);
  --glass-shadow-deep:   0 32px 80px rgba(24,16,4,.28);

  /* — concentric radii: child = parent − padding — */
  --glass-r-sm: 10px; --glass-r-md: 16px; --glass-r-lg: 22px; --glass-r-pill: 999px;

  /* — ink — */
  --glass-gold-ink: #7E5E3C;                /* text-safe gold, ~5:1 on white */
}

/* ================================================================
   §2 GROUND + TYPE
   The frost needs something to refract: faint warm blobs on white.
   ================================================================ */
html{ background:#FFFFFF; }
body{
  background:
    radial-gradient(720px 460px at -4% -8%,  rgba(219,200,178,.52), rgba(219,200,178,0) 70%),
    radial-gradient(640px 420px at 104% 22%, rgba(189,149,104,.30), rgba(189,149,104,0) 70%),
    radial-gradient(900px 520px at 30% 58%,  rgba(219,200,178,.22), rgba(219,200,178,0) 72%),
    radial-gradient(760px 420px at 40% 110%, rgba(217,217,217,.44), rgba(217,217,217,0) 70%),
    linear-gradient(180deg, #FFFFFF 0%, #F7F0E6 100%);
}

/* Font swap — the reference's system face. Selectors that re-declare
   Cambria locally are re-targeted here so the swap is total.
   To keep Cambria instead: --glass-font: 'Cambria', Georgia, serif. */
body, button, input, select, textarea,
.multi-select, .search-dropdown, .gloss-pop,
.comp-peer-tbl, .mgr-history-table, .mgr-co, .mgr-also-managing,
.sector-row, .hero h1{
  font-family: var(--glass-font);
}
body{ letter-spacing:.001em; }

/* Warm gradient strips fight the ground — let it show through */
.section.tinted, .pre-foot{ background: transparent; }
.pre-foot{ border-top: 1px solid var(--glass-border); }

/* ================================================================
   §3 DARK CHROME — header + footer keep their black structure,
   rendered as near-black smoked glass with a gold under-edge.
   Text on these: #F7F1E8 / rgba(245,239,230,.74) / gold active.
   ================================================================ */
.util{
  background: var(--glass-bg-dark);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
}
header.appbar{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 45%), var(--glass-bg-dark);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid rgba(189,149,104,.38);
  box-shadow: var(--glass-highlight-dark), 0 10px 30px rgba(24,16,4,.12);
}
header.appbar .search{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--glass-r-pill);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
header.appbar .search .kbd{ border-radius: 6px; }
header.appbar .iconbtn{
  border-radius: 12px;
  transition: border-color .14s ease, background .14s ease, transform .12s cubic-bezier(.2,.7,.3,1);
}
header.appbar .iconbtn:hover{ transform: translateY(-1px); }
header.appbar .iconbtn:active{ transform: translateY(1px) scale(.94); }
header.appbar nav a:active{ transform: translateY(1px); }
header.appbar .nav-dropdown-menu{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 40%), rgba(4,3,2,.95);
  -webkit-backdrop-filter: var(--glass-blur-deep);
  backdrop-filter: var(--glass-blur-deep);
  border: 1px solid rgba(189,149,104,.40);
  border-top-width: 2px;
  border-radius: 0 0 var(--glass-r-md) var(--glass-r-md);
  overflow: hidden;
  box-shadow: var(--glass-highlight-dark), var(--glass-shadow-raised);
}
header.appbar .nav-dropdown-menu a{ border-bottom-color: rgba(255,255,255,.07); }

footer.appfoot{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 45%), var(--glass-bg-dark);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 rgba(189,149,104,.40);   /* gold top hairline */
}
.toast{
  background: rgba(4,3,2,.95);
  -webkit-backdrop-filter: var(--glass-blur-deep);
  backdrop-filter: var(--glass-blur-deep);
  border: 1px solid rgba(189,149,104,.45);
  border-radius: var(--glass-r-sm);
  box-shadow: var(--glass-highlight-dark), var(--glass-shadow-raised);
}

/* ================================================================
   §4 LIGHT BANDS — hero (Home + Fund), title band, breadcrumb.
   Soft frost, full-bleed, gold hairline base.
   ================================================================ */
.hero, .titleband, .crumb,
.arc-band, .shell-band, .wc-band, .st-band, .sp-band, .sif-band{
  background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0) 42%), rgba(251,247,241,.44);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
  border-bottom: 1px solid var(--glass-border);
}
/* Knowledge Center black masthead + Compare export strip — smoked glass */
.kc-band, .export-strip{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 45%), var(--glass-bg-dark);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-highlight-dark), var(--glass-shadow);
}
.kc-band{ border-bottom: 1px solid rgba(189,149,104,.38); }
.export-strip{ border: 1px solid rgba(189,149,104,.40); border-radius: var(--glass-r-md); }

/* ================================================================
   §5 CARDS + PANELS — the standard material.
   Fund one-pager sections, TOC rail, download strip, Home tiles &
   cards, Screener filter rail, alerts.
   ================================================================ */
section.block, aside.toc, .dl-strip,
.qtile, .alert, .alert-card, .explore-card,
aside.rail,
.selector-rail, .chart-section, .overlap-picker, .mp-picker, .mp-card-wrap,
.kc-index, .arc-tile, .wl-fund, .shell-empty, .wc-empty, .sif-empty,
.sp-card, .sp-section, .sp-empty, .pb-panel{
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 38%), var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-r-md);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}
/* KC term cards render 60× per page — blur budget forbids frosting them.
   Solid milk-glass: same card geometry, no backdrop-filter. */
.kc-term{
  background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(251,246,239,.85) 100%);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-r-md);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}
.arc-tile.current{
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 40%), var(--glass-bg-gold);
  border-color: rgba(126,94,60,.55);
}
.arc-tile:hover, .wl-fund:hover, .sp-card:hover{
  border-color: rgba(189,149,104,.55);
  box-shadow: var(--glass-highlight), var(--glass-shadow-raised);
}
.chart-section, .comp-wrap{ border-top: 2px solid var(--gold, #BD9568); }
/* keep sticky pickers/rails glass but respect their own sticky offsets */
/* hover lift on the clickable cards (existing transitions carry it) */
.qtile:hover, .alert:hover, .alert-card:hover, a.explore-link:hover{
  border-color: rgba(189,149,104,.55);
}
.qtile:hover, .alert:hover{
  box-shadow: var(--glass-highlight), var(--glass-shadow-raised), 0 0 0 1px rgba(189,149,104,.18);
  transform: translateY(-3px);
}
.qtile:active, .alert:active{
  transform: translateY(1px) scale(.99);
  box-shadow: var(--glass-highlight), 0 1px 3px rgba(24,16,4,.09);
}
/* featured gold tile keeps its solid gold slab — add the specular rim */
.qtile.gold{
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 40%),
              linear-gradient(180deg, #C49C70 0%, #B0875E 100%);
  border-color: rgba(126,94,60,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.40), 0 6px 20px rgba(189,149,104,.30);
}

/* What-Changed mosaic: one etched sheet — tan glass cells, hairline joints */
.changes{
  background: rgba(189,149,104,.28);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-r-md);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}
.change-card{
  background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,0) 40%), var(--glass-bg-tan);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
}
.change-card:hover{ background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,0) 40%), rgba(219,200,178,.48); }
.change-card.empty, .change-card.empty:hover{ background: rgba(251,247,241,.40); }

/* Fund hero score card — black structure kept, smoked glass finish */
.score-card{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 42%), rgba(4,3,2,.94);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(189,149,104,.50);
  border-radius: var(--glass-r-md);
  box-shadow: var(--glass-highlight-dark), var(--glass-shadow-raised);
}

/* Verdict block — the gold-ringed read */
section.verdict-block{
  background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 42%), var(--glass-bg-gold);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(189,149,104,.55);
  border-radius: var(--glass-r-lg);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}

/* TOC rail items — gold wash hover, inset gold bar on hover via existing */
aside.toc li a{ transition: color .12s ease; }

/* ================================================================
   §6 INNER TILES — cards that sit ON a glass panel (roll/risk/cost/
   port cards, manager stat cells, cycle-movement boxes, chart mats).
   Solid "milk glass": warm fill + rim, NO blur (2-layer budget).
   ================================================================ */
.roll-card, .risk-card, .cost-card, .port-card,
.mgr-stats .cell, .cm-h-col, .cm-pm-box,
.returns-chart-wrap, .nav-chart-wrap, .dd-chart-wrap,
.chart-card, .mp-stat, .mp-background, .mp-filters, .kc-formula,
.pb-warn, .fslot.filled{
  background: linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(251,246,239,.72) 100%);
  border: 1px solid rgba(189,149,104,.25);
  border-radius: var(--glass-r-sm);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(24,16,4,.04);
}
/* .cm-card ships inline styles — the overlay must out-rank them */
.cm-card{
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF6EF 100%) !important;
  border: 1px solid rgba(189,149,104,.25) !important;
  border-radius: var(--glass-r-sm) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(24,16,4,.04);
}
.holdings-callout-v2, .verdict-lead, .export-notice, .holdings-callout{
  border-radius: 0 var(--glass-r-sm) var(--glass-r-sm) 0;
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 45%), rgba(189,149,104,.14);
}
.empty-state{ border-radius: var(--glass-r-sm); background: linear-gradient(180deg,#FFFFFF,#FBF6EF); }
.mgr-avatar, .mp-avatar{
  border-radius: var(--glass-r-sm);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 16px rgba(189,149,104,.35);
}
/* compare fund slots — keep the dashed empty affordance, soften geometry */
.fslot{ border-radius: var(--glass-r-sm); }
.fslot.empty{ background: rgba(255,255,255,.35); }
.fslot.benchmark{ background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(245,243,239,.55)); }
/* PB output header band + KC callouts */
.pb-out-head{
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(251,246,239,.35));
  border-radius: var(--glass-r-md) var(--glass-r-md) 0 0;
}
.kc-term .easy{ border-radius: var(--glass-r-sm); }
.kc-video{ border-radius: var(--glass-r-sm); }
.mp-bio{ border-radius: 0 var(--glass-r-sm) var(--glass-r-sm) 0; }

/* ================================================================
   §7 TABLES — data stays SOLID. Glass never touches rows.
   Black header caps become smoked slabs: white specular top,
   gold under-edge. No backdrop-filter on any th/td.
   ================================================================ */
/* Home Top-10 shell: glass rim around a solid table */
.table-wrap{
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-r-md);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  background: #FFFFFF;                      /* rows stay on solid white */
}
table.fund-tbl thead th{
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(251,247,241,.9));
  border-bottom: 1px solid var(--glass-border);
}
/* Screener grid shell — solid inside, glass rim outside */
.fund-table-wrap,
.comp-wrap, .overlap-matrix-wrap, .hero-chart-wrap,
table.wc-tbl, table.sif-tbl, table.st-tbl{
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-r-md);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  background: #FFFFFF;
}
.comp-wrap{ border-radius: 0 0 var(--glass-r-md) var(--glass-r-md); }
table.pb-tbl{ background: #FFFFFF; }   /* rows stay solid inside glass panels */
/* black header slabs (screener sticky head + all one-pager tables) */
table.screener-tbl thead th,
table.perf thead th,
table.holdings-tbl thead th,
table.holdings-tbl-v2 thead th,
table.instrument-tbl thead th,
table.hv-tbl th,
.mgr-history-table th,
.comp-peer-tbl thead th,
table.comp thead th,
table.comp tbody tr.section-head td,
table.ov-matrix thead th,
table.overlap-matrix thead th,
table.mp-funds thead th,
table.pb-tbl th{
  background: linear-gradient(180deg, #1B1712 0%, #0C0B09 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(189,149,104,.45);
}
table.comp thead th.bench-col{ background: linear-gradient(180deg, #262019 0%, #16130F 100%); }
table.comp tbody tr.section-head td:first-child{ background: linear-gradient(180deg, #1B1712 0%, #0C0B09 100%); }
table.overlap-matrix thead th.row-label-corner{ background: transparent; box-shadow: none; }
/* light table heads (What-Changed, SIF) — warm frost cap, no blur */
table.wc-tbl th, table.sif-tbl th{
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(242,233,220,.9));
  box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(189,149,104,.35);
}
/* Stocks list — the one true sticky light header: soft frost over rows */
table.st-tbl th{
  background: rgba(251,247,241,.72);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
  box-shadow: inset 0 -1px 0 rgba(189,149,104,.35);
}
table.screener-tbl thead th.sorted{ background: linear-gradient(180deg, #262019 0%, #14110D 100%); }
/* row hovers: tint only — no blur, no lift (pinned solid) */
table.screener-tbl tbody tr:hover td{ background: rgb(247,243,238); }
table.fund-tbl tbody tr:hover td{ background: rgb(247,243,238); }
/* Chart snapshots: captured <img>s carry baked-in pixel sizes (inline
   styles). Render them 1:1 (never upscale — upscaling blurs), cap at the
   frame so they never overflow, centre in the frame. For true retina
   crispness the charts must be re-captured at 2× DPR from the live app. */
.chart-canvas-wrap img, .donut-wrap img, .sp-chart-wrap img,
.sp-own-wrap img, .pb-tabpanel img{
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 auto;
  object-fit: contain;
  object-position: center;
  display: block;
}
/* chart-head with toggle groups: keep the title left, slide the legend
   and both toggle clusters together at the right */
.chart-head:has(.toggles){ justify-content: flex-start; }
.chart-head:has(.toggles) > div:first-child{ margin-right: auto; }

/* gold scrollbar thumbs soften into the theme */
.hscroll-top::-webkit-scrollbar-thumb, .vscroll-left::-webkit-scrollbar-thumb,
.scroll-tbody::-webkit-scrollbar-thumb{ border-radius: 999px; }

/* ================================================================
   §8 CONTROLS — buttons, chips, selects, sliders, toggles.
   Gold surfaces carry BLACK text (7.7:1). Gold-on-white text uses
   #7E5E3C. Hover raise −1px · press settle +1px, 100–120ms.
   ================================================================ */
.btn{
  background: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(248,242,234,.82) 100%);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
  border: 1px solid rgba(189,149,104,.30);
  border-radius: var(--glass-r-pill);
  color: var(--glass-gold-ink);
  box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -2px 3px rgba(24,16,4,.06),
              0 1px 1px rgba(24,16,4,.07), 0 5px 12px rgba(24,16,4,.11), 0 12px 26px rgba(24,16,4,.08);
  transition: transform .14s cubic-bezier(.2,.7,.3,1), box-shadow .14s ease,
              background .14s ease, border-color .14s ease, filter .14s ease;
}
.btn:hover{
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(250,245,238,.92) 100%);
  border-color: rgba(126,94,60,.5);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -2px 3px rgba(24,16,4,.05),
              0 2px 3px rgba(24,16,4,.08), 0 9px 20px rgba(24,16,4,.14), 0 18px 36px rgba(24,16,4,.10);
}
.btn:active:not([disabled]){
  transform: translateY(1px) scale(.965);
  box-shadow: inset 0 2px 4px rgba(24,16,4,.14), inset 0 1px 0 rgba(255,255,255,.4),
              0 1px 2px rgba(24,16,4,.08);
}
.btn.primary{
  background: linear-gradient(180deg, #CDA67C 0%, #B0875E 100%);
  color: #000000;                           /* black on gold — never white */
  border-color: rgba(126,94,60,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 4px rgba(106,74,40,.35),
              0 4px 10px rgba(189,149,104,.45), 0 12px 26px rgba(189,149,104,.30);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.btn.primary:hover{
  background: linear-gradient(180deg, #D3AC82 0%, #B68D64 100%);
  filter: none; border-color: rgba(126,94,60,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 4px rgba(106,74,40,.30),
              0 7px 16px rgba(189,149,104,.5), 0 18px 36px rgba(189,149,104,.32);
}
.btn.primary:active:not([disabled]){
  box-shadow: inset 0 3px 6px rgba(106,74,40,.4), 0 1px 3px rgba(189,149,104,.3);
}
.btn.ghost{ color: var(--ink, #0E0E0E); }
.btn .pip{ border-radius: var(--glass-r-pill); color:#000; }

/* dropdown/select chips — soft keys */
.hero-cycle select, .multi-select .ms-button{
  background-color: rgba(255,255,255,.80);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
  border: 1px solid rgba(189,149,104,.28);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(24,16,4,.06), 0 5px 12px rgba(24,16,4,.08);
  transition: box-shadow .14s ease, transform .12s cubic-bezier(.2,.7,.3,1), background-color .14s ease, border-color .14s ease;
}
.hero-cycle select:hover, .multi-select .ms-button:hover{
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 4px rgba(24,16,4,.07), 0 9px 18px rgba(24,16,4,.11);
}
.hero-cycle select:active, .multi-select .ms-button:active{ transform: translateY(1px) scale(.97); box-shadow: inset 0 2px 4px rgba(24,16,4,.10); }
.multi-select .ms-button:hover, .multi-select.open .ms-button{ background-color: rgba(255,255,255,.85); }
.search-box{
  background: rgba(255,255,255,.65);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-r-pill);
  box-shadow: var(--glass-highlight);
}
.search-box:focus-within{ border-color: rgba(126,94,60,.55); }

/* segmented toggles — floating key track (ref image): padded white pill
   rail, keys as soft squircles, ACTIVE = black key, white ink */
.chart-head .toggles, .roll-toggle{
  border: 1px solid rgba(189,149,104,.25);
  border-radius: var(--glass-r-pill);
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
  overflow: visible;
  padding: 4px;
  gap: 4px;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 3px 8px rgba(24,16,4,.08), 0 10px 22px rgba(24,16,4,.06);
}
.chart-head .toggles button, .roll-toggle button{
  background: transparent;
  border: 0;
  border-radius: var(--glass-r-pill);
  transition: background .14s ease, color .14s ease, transform .12s cubic-bezier(.2,.7,.3,1), box-shadow .14s ease;
}
.chart-head .toggles button.active, .roll-toggle button.active{
  background: linear-gradient(180deg, #262019 0%, #0A0908 100%);
  color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 3px 7px rgba(0,0,0,.35), 0 8px 18px rgba(0,0,0,.18);
}
.chart-head .toggles button:hover:not(.active), .roll-toggle button:hover:not(.active){
  background: rgba(219,200,178,.35);
}
.chart-head .toggles button:active, .roll-toggle button:active{
  transform: scale(.94);
}

/* screener asset-class tiles = KPI keys: floating squircles */
.tile-select .tile{
  background: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(250,245,238,.80) 100%);
  border: 1px solid rgba(189,149,104,.22);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(24,16,4,.06), 0 6px 14px rgba(24,16,4,.09);
  transition: background .14s ease, border-color .14s ease, transform .12s cubic-bezier(.2,.7,.3,1), box-shadow .14s ease;
}
.tile-select .tile:hover{
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 3px 6px rgba(24,16,4,.08), 0 12px 24px rgba(24,16,4,.12);
}
.tile-select .tile:active{ transform: translateY(1px) scale(.96); box-shadow: inset 0 2px 4px rgba(24,16,4,.12), 0 1px 2px rgba(24,16,4,.06); }
.tile-select .tile.on{
  background: linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,0) 45%), rgba(189,149,104,.26);
  border-color: rgba(126,94,60,.55);
  box-shadow: inset 0 0 0 1px var(--gold, #BD9568), inset 0 1px 0 rgba(255,255,255,.6),
              0 4px 10px rgba(189,149,104,.30);
}

/* range sliders — gold fill + glass thumb ring */
.rng-track{ background: rgba(191,191,191,.55); border-radius: 999px; }
.rng-fill{ border-radius: 999px; }
.rng-input::-webkit-slider-thumb{
  box-shadow: 0 1px 3px rgba(24,16,4,.18), inset 0 1px 0 rgba(255,255,255,.8);
}
.rng-num{ border-radius: 6px; background: rgba(255,255,255,.75); }

/* checkboxes — black keys with white check (ref image) */
.multi-select .ms-checkbox{ border-radius: 5px; }
.multi-select .ms-checkbox.checked, .multi-select .ms-checkbox.indeterminate{
  background: linear-gradient(180deg, #262019 0%, #0A0908 100%);
  border-color: #0E0D0B;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 5px rgba(0,0,0,.30);
}
table.screener-tbl .row-check, table.screener-tbl .header-check{ accent-color: #0E0D0B; }

/* status pills & badges — concentric rounding */
.pill{ border-radius: var(--glass-r-pill); }
.pill.hold{ color:#000; }                   /* black on gold */
.badge{ border-radius: 6px; }
.score-bar, .score-bar > i{ border-radius: 999px; }

/* —— batch-2 controls —— */
/* dark CTAs (Compare export strip, PB Build) — 3D black keys */
.btn.dark, .pb-build{
  background: linear-gradient(180deg, #2A241C 0%, #0A0908 100%);
  color: #FFFFFF;
  border: 1px solid rgba(189,149,104,.45);
  border-radius: var(--glass-r-pill);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -2px 4px rgba(0,0,0,.5),
              0 4px 10px rgba(0,0,0,.30), 0 12px 26px rgba(0,0,0,.18);
  transition: transform .14s cubic-bezier(.2,.7,.3,1), box-shadow .14s ease, filter .14s ease;
}
.btn.dark:hover, .pb-build:hover:not(:disabled){
  background: linear-gradient(180deg, #332B21 0%, #14110D 100%);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 4px rgba(0,0,0,.45),
              0 7px 16px rgba(0,0,0,.35), 0 18px 36px rgba(0,0,0,.20);
}
.btn.dark:active, .pb-build:active:not(:disabled){
  transform: translateY(1px) scale(.97);
  box-shadow: inset 0 3px 6px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.25);
}
.btn.ghost-dark{
  border-radius: var(--glass-r-pill);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  color: #F7F1E8;
}
/* filter-pill rows (What-Changed tabs, stock-profile ranges, PB pills) —
   floating keys, BLACK active key with white ink */
.wc-tabs a, .sp-range button, .pb-pills button, .pb-toggle button, .kc-prereqs a{
  background: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(248,242,234,.82) 100%);
  border: 1px solid rgba(189,149,104,.28);
  border-radius: var(--glass-r-pill);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(24,16,4,.06), 0 4px 10px rgba(24,16,4,.07);
  transition: background .14s ease, color .14s ease, transform .12s cubic-bezier(.2,.7,.3,1), box-shadow .14s ease;
}
.wc-tabs a:hover, .sp-range button:hover, .pb-pills button:hover, .pb-toggle button:hover, .kc-prereqs a:hover{
  transform: translateY(-1px);
  background: #FFFFFF;
  color: var(--glass-gold-ink);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 3px 6px rgba(24,16,4,.08), 0 9px 18px rgba(24,16,4,.10);
}
.wc-tabs a:active, .sp-range button:active, .pb-pills button:active, .pb-toggle button:active{ transform: translateY(1px) scale(.95); }
.wc-tabs a.active, .sp-range button.active,
.pb-pills button[aria-pressed="true"], .pb-toggle button[aria-pressed="true"],
.order-toggle .ot-btn.active{
  background: linear-gradient(180deg, #262019 0%, #0A0908 100%);
  color: #FFFFFF;
  border-color: #0E0D0B;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 3px 7px rgba(0,0,0,.35), 0 8px 18px rgba(0,0,0,.18);
}
.order-toggle .ot-btn{
  border-radius: var(--glass-r-pill);
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,242,234,.82));
  border: 1px solid rgba(189,149,104,.28);
  margin-right: 4px;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(24,16,4,.06);
}
.order-toggle .ot-btn:first-of-type, .order-toggle .ot-btn:last-of-type{ border-radius: var(--glass-r-pill); border-left: 1px solid rgba(189,149,104,.28); }
/* PB export mini-buttons: hover keeps black-on-gold */
.pb-exports button{
  border-radius: var(--glass-r-pill);
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,242,234,.82));
  box-shadow: inset 0 1px 0 #FFFFFF, 0 3px 8px rgba(24,16,4,.08);
}
.pb-exports button:hover{ background: var(--gold, #BD9568); color: #000; }
.kc-prereqs a:hover{ background: var(--gold, #BD9568); color: #000; }
/* search & picker fields */
.st-controls input[type=text], .picker-search, .fso-head input,
.picker-cat-panel .panel-search, .picker-amc-panel .panel-search,
.cmp-cycle-pick select, .mp-picker .picker-sort-row select,
.picker-cat-btn, .picker-amc-btn{
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(189,149,104,.28);
  border-radius: var(--glass-r-sm);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(24,16,4,.05);
}
.picker-search:focus, .st-controls input[type=text]:focus{ border-color: rgba(126,94,60,.55); }

/* verdict / one-pager action buttons inherit .btn above; hero cycle done */

/* Compare tab-bar — soft frost cap on the matrix */
.tab-bar{
  background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0) 42%), rgba(251,247,241,.55);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
  border-color: var(--glass-border);
  border-radius: var(--glass-r-md) var(--glass-r-md) 0 0;
}

/* ================================================================
   §9 OVERLAYS — deepest frost, most opaque. Popovers, modals,
   drawers, glossary tips, search results.
   ================================================================ */
.multi-select .ms-popover, .search-dropdown, .gloss-pop,
.fso-dialog, .pb-ac, .picker-cat-panel, .picker-amc-panel{
  background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0) 42%), rgba(253,250,246,.70);
  -webkit-backdrop-filter: var(--glass-blur-deep);
  backdrop-filter: var(--glass-blur-deep);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  box-shadow: var(--glass-highlight), var(--glass-shadow-raised);
}
.fso-dialog{ border-radius: var(--glass-r-lg); box-shadow: var(--glass-highlight), var(--glass-shadow-deep); }
.fso-dialog::backdrop{ background: rgba(24,18,10,.30); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.fso-item:hover, .pb-ac div:hover, .pb-ac div.sel{ background: rgba(189,149,104,.14); }
.gloss-pop{ border-top: 3px solid var(--gold, #BD9568); }
.search-dropdown .search-row{ border-bottom-color: rgba(189,149,104,.18); }
.search-dropdown .search-row:hover{ background: rgba(189,149,104,.12); }
.multi-select .ms-row:hover{ background: rgba(189,149,104,.12); border-radius: 8px; }
.multi-select .ms-row-toggle{ border-radius: 8px; }
.multi-select .ms-search{ border-radius: 8px; background: rgba(255,255,255,.75); }

.hv-backdrop, .drawer-backdrop{
  background: rgba(24,18,10,.30);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.hv-panel, aside.drawer{
  background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0) 42%), rgba(253,250,246,.72);
  -webkit-backdrop-filter: var(--glass-blur-deep);
  backdrop-filter: var(--glass-blur-deep);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-r-lg);
  box-shadow: var(--glass-highlight), var(--glass-shadow-deep);
}
.hv-chip{ border-radius: var(--glass-r-pill); background: rgba(255,255,255,.65); border-color: var(--glass-border); }
.hv-chip.on{ background: var(--gold, #BD9568); color:#000; }
.hv-close{ border-radius: var(--glass-r-sm); }
.drawer-head, .drawer-actions{ border-color: rgba(189,149,104,.22); }
.weight-row input[type="number"]{ border-radius: 6px; background: rgba(255,255,255,.75); }

/* ================================================================
   §10 FALLBACKS + PRINT — required, do not remove
   ================================================================ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  :root{
    --glass-bg: #FAF6F0; --glass-bg-tan: #F2E9DC; --glass-bg-gold: #F4EBDD;
    --glass-bg-dark: rgb(5,4,3);
  }
  .hero, .titleband, .crumb{ background: #FBF7F1; }
  .arc-band, .shell-band, .wc-band, .st-band, .sp-band, .sif-band, .tab-bar{ background: #FBF7F1; }
  .kc-band, .export-strip{ background: rgb(5,4,3); }
  .hv-panel, aside.drawer, .multi-select .ms-popover, .search-dropdown, .gloss-pop,
  .fso-dialog, .pb-ac, .picker-cat-panel, .picker-amc-panel{ background: #FBF7F1; }
  .hv-backdrop, .drawer-backdrop{ background: rgba(24,18,10,.44); }
  .score-card{ background: rgb(5,4,3); }
  header.appbar .nav-dropdown-menu{ background: rgb(5,4,3); }
}

@media (prefers-reduced-transparency: reduce){
  :root{
    --glass-bg: #FAF6F0; --glass-bg-tan: #F2E9DC; --glass-bg-gold: #F4EBDD;
    --glass-bg-dark: rgb(5,4,3);
    --glass-blur: none; --glass-blur-soft: none; --glass-blur-deep: none;
  }
  .hero, .titleband, .crumb,
  .arc-band, .shell-band, .wc-band, .st-band, .sp-band, .sif-band, .tab-bar,
  .hv-panel, aside.drawer, .multi-select .ms-popover, .search-dropdown, .gloss-pop,
  .fso-dialog, .pb-ac, .picker-cat-panel, .picker-amc-panel{
    background: #FBF7F1;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .kc-band, .export-strip{ background: rgb(5,4,3); -webkit-backdrop-filter: none; backdrop-filter: none; }
  table.st-tbl th{ background: #FAF6F0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .score-card, header.appbar .nav-dropdown-menu, .toast{
    background: rgb(5,4,3);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .change-card{ background: #F2E9DC; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hv-backdrop, .drawer-backdrop{ background: rgba(24,18,10,.44); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .btn, .search-box, .hero-cycle select, .multi-select .ms-button{
    background: #FFFFFF; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce){
  .btn, .qtile, .alert, .tile-select .tile, .chart-head .toggles button, .roll-toggle button,
  .hero-cycle select, .multi-select .ms-button, header.appbar .iconbtn{ transition: none; }
  .btn:hover, .btn:active:not([disabled]), .qtile:hover, .qtile:active, .alert:active,
  .tile-select .tile:hover, .tile-select .tile:active,
  .hero-cycle select:hover, .hero-cycle select:active,
  .multi-select .ms-button:hover, .multi-select .ms-button:active,
  header.appbar .iconbtn:hover, header.appbar .iconbtn:active,
  header.appbar nav a:active,
  .chart-head .toggles button:active, .roll-toggle button:active{ transform: none; }
}

/* ================================================================
   §11 SCROLL REVEAL — pure CSS scroll-driven animation. Blocks rise
   softly as they enter the viewport. Engines without view() timelines
   (and reduced-motion users) simply render everything static — content
   can never be hidden. No JS involved.
   ================================================================ */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    section.block, .dl-strip, .qtile, .alert, .alert-card,
    .explore-card, .change-card, .table-wrap, .fund-table-wrap,
    .arc-tile, .wl-fund, .sp-card, .sp-section, .kc-term,
    .selector-rail, .chart-section, .mp-card-wrap, .hero-chart-wrap, .export-strip{
      animation: gx-rise cubic-bezier(.22,.61,.36,1) both;
      animation-timeline: view();
      animation-range: entry 0% cover 24%;
    }
  }
}
@keyframes gx-rise{
  from{ opacity: 0; transform: translateY(22px) scale(.992); }
  to{ opacity: 1; transform: none; }
}

@media print{
  body{ background: #fff; }
  /* scroll-driven reveals must never affect print/PDF capture */
  section.block, .dl-strip, .qtile, .alert, .alert-card,
  .explore-card, .change-card, .table-wrap, .fund-table-wrap,
  .arc-tile, .wl-fund, .sp-card, .sp-section, .kc-term,
  .selector-rail, .chart-section, .mp-card-wrap, .hero-chart-wrap, .export-strip{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  header.appbar, footer.appfoot, .hero, .titleband, .crumb,
  section.block, aside.toc, aside.rail, .qtile, .alert, .alert-card,
  .explore-card, .change-card, .dl-strip, .btn, .score-card{
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    box-shadow: none !important;
  }
  section.block, aside.toc, .dl-strip, .qtile, .alert, .alert-card, .explore-card, aside.rail{ background: #fff; }
}
/* === SITE INTEGRATION ADDITIONS === */
/* Print self-strip completion (Batch-12 bug hunt): the §10 print block above
   misses the band / panel / popover surfaces that the @supports and
   prefers-reduced-transparency fallbacks DO neutralize. Complete the set so
   print / PDF / PPT capture degrades to the same solid surfaces. Light
   surfaces go white; the intentionally dark chrome keeps the same solid dark
   the sibling fallbacks use. */
@media print{
  .arc-band, .shell-band, .wc-band, .st-band, .sp-band, .sif-band, .tab-bar,
  table.st-tbl th,
  .hv-panel, aside.drawer, .multi-select .ms-popover, .search-dropdown, .gloss-pop,
  .fso-dialog, .pb-ac, .picker-cat-panel, .picker-amc-panel,
  .search-box, .hero-cycle select, .multi-select .ms-button{
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    box-shadow: none !important;
    background: #fff !important;
  }
  .kc-band, .export-strip, header.appbar .nav-dropdown-menu, .toast{
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    box-shadow: none !important;
    background: rgb(5,4,3) !important;
  }
}
/* Search dropdown → OPAQUE (§7.66): the suggestion list floats over
   arbitrary page content — over the black score card the §9 translucent
   treatment (rgba .70 + deep blur) left rows illegible (Rahul screenshot,
   2026-07-03). Repeated result rows are the same class of surface the
   "no backdrop-filter on repeated rows" hard rule protects; use the exact
   solid surface the §10 fallbacks already assign to this popover. */
.search-dropdown{
  background: #FBF7F1;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}