/* ══════════════════════════════════════════════════════════════════════════
   Research tab — presentation only.

   Loaded AFTER the page's own inline <style> blocks, so it overrides by order
   rather than by force: no !important unless a rule genuinely has to win, and
   not one line of markup or script is touched. The 170KB of analysis JS in this
   file computes every number on the page; none of it is any of this file's
   business.

   Three things this fixes, in order of how much they were costing:
     1. the second site header
     2. a dark page for what is mostly tables of numbers
     3. numbers that were not typeset as numbers
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --r-paper:#efe9db; --r-card:#ffffff; --r-card2:#faf8f3;
  --r-ink:#0d1526; --r-ink2:#2b3452; --r-mut:#5a637a;
  --r-line:#ded5c2; --r-line2:#c8bda3;
  --r-navy:#0d1526; --r-navy2:#16233f;
  --r-gold:#b8871c; --r-gold-lt:#dcab3c; --r-gold-bg:#faf1dc;
  --r-up:#0a5f58; --r-dn:#a52b22;
  --r-max:1280px;
  --r-sh:0 1px 2px rgba(13,21,38,.07), 0 6px 20px rgba(13,21,38,.09);
}

body{background:var(--r-paper);color:var(--r-ink)}
.wrap{max-width:var(--r-max);margin:0 auto;padding:0 20px}

/* ── 1. one header ────────────────────────────────────────────────────────
   .topbar carried its own logo and wordmark directly under the site chrome —
   two InvestVerdict identities stacked, which is the double header the rest of
   this section spent so long removing. The bar itself has to stay: those nine
   links are the tool's real navigation. So the branding goes and the bar
   becomes what it always was — a sub-nav, styled like the section bar on a
   fund page so moving between the two feels like one site. */
.topbar .brand{display:none}
.topbar{position:sticky;top:0;z-index:40;background:var(--r-card);
  border-bottom:1px solid var(--r-line2);box-shadow:0 1px 0 rgba(13,21,38,.04)}
.topbar .wrap{display:flex;align-items:center;gap:0;min-height:0;padding:6px 20px}
.topbar nav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.topbar nav::-webkit-scrollbar{display:none}
.topbar nav a{flex:0 0 auto;padding:7px 14px;border-radius:8px;text-decoration:none;
  font-weight:650;font-size:14px;white-space:nowrap;
  background:var(--r-gold-bg);border:1px solid var(--r-gold-lt);color:var(--r-ink2);
  transition:background .15s,color .15s,border-color .15s}
.topbar nav a:hover{background:#f5e6c0;border-color:var(--r-gold);color:#6f550f}
.topbar nav a.on{background:var(--r-navy);border-color:var(--r-navy);color:#fff}

/* ── 2. the hero, as a band rather than a screen ─────────────────────────
   It was 222px of dark on top of a dark bar, which read as more header. Kept
   navy — the tool earns an identity — but shallow, and clearly a band. */
.hero{background:linear-gradient(135deg,var(--r-navy) 0%,var(--r-navy2) 100%);
  color:#fff;padding:20px 0 22px;border-bottom:3px solid var(--r-gold)}
.hero .wrap{padding-top:0;padding-bottom:0}
.hero h1{margin:0 0 4px;font-size:30px;line-height:1.15;letter-spacing:-.4px;color:#fff}
.hero p{margin:0 0 14px;color:#c3ccdd;font-size:14.5px;max-width:70ch}

/* search + the Funds/Stocks switch, tinted like every other control */
.searchrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* The unselected side was #e6ecf7 — near white — on a .searchbox that is
   rgba(255,255,255,.96), also near white. About 1.15:1 against its own
   background, so "Stocks" was there and could not be read. The colours came
   from when this control sat on the dark hero; it does not any more.
   Theme tokens now, so it follows the surface it is actually on. */
.sw{display:inline-flex;gap:4px;background:var(--r-card2);
  border:1px solid var(--r-line2);border-radius:9px;padding:3px}
.sw button,.sw a{appearance:none;border:0;background:transparent;color:var(--r-ink2);
  font:650 13.5px/1 inherit;padding:7px 14px;border-radius:7px;cursor:pointer;
  transition:background .12s ease,color .12s ease}
.sw button:hover,.sw a:hover{background:var(--r-gold-bg);color:var(--r-ink)}
/* A fixed dark ink, NOT var(--r-navy). In the dark theme --r-navy is
   redefined to #dcab3c so that "active" fills read on a dark page — which is
   the same colour as --r-gold, so gold-on-gold made the selected label vanish
   entirely. Same pattern the topbar already uses for its active tab.
   #0b1220 gives 5.81:1 on the light gold and 8.86:1 on the dark one. */
.sw .on,.sw button.on,.sw a.on{background:var(--r-gold);color:#0b1220}
.sw button:focus-visible,.sw a:focus-visible{outline:2px solid var(--r-gold);outline-offset:2px}
.searchbox{flex:1;min-width:260px;padding:11px 15px;border-radius:10px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.96);
  color:var(--r-ink);font:500 15px/1.3 inherit;box-shadow:var(--r-sh)}
.searchbox::placeholder{color:#8d95a6}
.searchbox:focus{outline:none;border-color:var(--r-gold);box-shadow:0 0 0 3px rgba(184,135,28,.20)}

/* ── 3. cards ─────────────────────────────────────────────────────────── */
main.wrap{padding-top:16px;padding-bottom:28px}
.card{background:var(--r-card);border:1px solid var(--r-line);border-radius:14px;
  padding:16px 18px;margin:0 0 14px;box-shadow:var(--r-sh)}
.card > h2,.card > h3{margin:0 0 4px;color:var(--r-ink);letter-spacing:-.2px}
.card > h2{font-size:19px}
.card > h3{font-size:16px}
.hint{color:var(--r-mut);font-size:13px;line-height:1.5;margin:0 0 12px}
.results{margin-top:14px}

/* ── 4. tables — the whole point of this tool ─────────────────────────────
   Numbers were set in the body face at body weight and left to sit wherever the
   column put them. A figure column is only readable when the digits line up, so
   .n gets tabular numerals and right alignment, and every row gets a rule. */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--r-line);border-radius:12px;background:var(--r-card)}
.card > .tblwrap{margin:0 -18px -16px;border:0;border-top:1px solid var(--r-line);
  border-radius:0 0 14px 14px}
table{width:100%;border-collapse:collapse;font-size:14.5px}
thead th{position:sticky;top:0;z-index:1;background:var(--r-card2);color:var(--r-mut);
  font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  text-align:left;padding:10px 14px;border-bottom:2px solid var(--r-line2);white-space:nowrap}
tbody td,tbody th{padding:10px 14px;border-bottom:1px solid var(--r-line);
  color:var(--r-ink);line-height:1.35;vertical-align:middle}
tbody tr:hover td,tbody tr:hover th{background:var(--r-card2)}
thead th.n,tbody td.n,tbody th.n,.n{text-align:right;font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;white-space:nowrap}
tbody td.n{font-weight:650}
.lnk{color:var(--r-ink);text-decoration:none;font-weight:650;
  border-bottom:1px solid transparent;transition:border-color .15s,color .15s}
.lnk:hover{color:var(--r-gold);border-bottom-color:var(--r-gold)}
.up{color:var(--r-up);font-weight:700}
.dn{color:var(--r-dn);font-weight:700}

/* buttons that are not the nav */
.g-btn{appearance:none;border:1px solid var(--r-gold-lt);background:var(--r-gold-bg);
  color:var(--r-ink2);font:650 14px/1 inherit;padding:8px 15px;border-radius:8px;cursor:pointer}
/* fixed ink, not --r-navy: in the dark theme that token IS the gold, so the
   label disappeared on hover. */
.g-btn:hover{background:var(--r-gold);border-color:var(--r-gold);color:#0b1220}

/* an error should look like an error, not like a paragraph of code */
.card > div[style*="color"]:not([class]),
.err,.error{background:#fbe6e2;border:1px solid #e8b4ab;color:#7c2d12;
  border-radius:10px;padding:11px 14px;font-size:13.5px;line-height:1.5;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-word}

@media(max-width:760px){
  .hero h1{font-size:23px}
  .hero{padding:16px 0 18px}
  .topbar nav a{padding:6px 11px;font-size:13px}
  .card{padding:13px 14px;border-radius:12px}
  .card > .tblwrap{margin:0 -14px -13px}
  table{font-size:13.5px}
  thead th,tbody td,tbody th{padding:8px 11px}
}

/* ══ use the width ═══════════════════════════════════════════════════════
   On a 1280px column the search sat in ~460px with the rest of the row empty,
   and every table pushed three numeric columns hard right leaving a lake in the
   middle. Both are the same fault: nothing was told what to do with the space. */

/* the hero row spans the column, and the search takes what the switch leaves */
.hero .searchrow{width:100%}
.hero .searchbox{flex:1 1 auto;min-width:0;max-width:none}

/* Tables: the label column takes the slack, the figures stay in their own
   narrow lanes at the right. A number column wider than its widest number is
   just distance between a row and its own value. */
table{table-layout:auto}
thead th:first-child,tbody td:first-child,tbody th:first-child{width:auto}
thead th.n,tbody td.n{width:1%;padding-left:26px}
thead th:not(.n):not(:first-child),
tbody td:not(.n):not(:first-child){white-space:nowrap}

/* NOTE: a grid on main.wrap was tried here and reverted — it collapsed the
   container to 40px. Nine tabs share this shell and I can only see two of them,
   so the container's own layout is left exactly as the tool built it. */

/* ══ display panel — the reader's own settings ═══════════════════════════
   Everything below is driven by data-attributes that research-ui.js puts on
   <html>. No number, no calculation, and nothing the app itself renders is
   touched — only how densely and in what colours it is shown. */

#ivp{position:fixed;right:18px;bottom:18px;z-index:900;font-size:14px}
#ivp-open{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:999px;
  border:1px solid var(--r-line2);background:var(--r-card);color:var(--r-ink);
  font:650 13.5px/1 inherit;cursor:pointer;box-shadow:0 4px 18px rgba(13,21,38,.16)}
#ivp-open:hover{border-color:var(--r-gold);color:var(--r-gold)}
#ivp-panel{position:absolute;right:0;bottom:52px;width:290px;max-height:72vh;overflow-y:auto;
  background:var(--r-card);border:1px solid var(--r-line2);border-radius:14px;padding:14px;
  box-shadow:0 12px 40px rgba(13,21,38,.24)}
.ivp-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.ivp-head b{font-size:15px}
#ivp-close{border:0;background:none;font-size:22px;line-height:1;cursor:pointer;color:var(--r-mut)}
.ivp-row{margin-bottom:13px}
.ivp-row.col{margin-bottom:8px}
.ivp-lbl{display:block;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--r-mut);margin-bottom:6px}
.ivp-seg{display:flex;gap:5px;flex-wrap:wrap}
.ivp-seg button{flex:1;padding:7px 10px;border-radius:8px;border:1px solid var(--r-gold-lt);
  background:var(--r-gold-bg);color:var(--r-ink2);font:650 13px/1 inherit;cursor:pointer;white-space:nowrap}
.ivp-seg button:hover{background:#f5e6c0;border-color:var(--r-gold)}
.ivp-seg button.on{background:var(--r-navy);border-color:var(--r-navy);color:#fff}
.ivp-cols{display:flex;flex-direction:column;gap:4px;max-height:180px;overflow-y:auto;
  border:1px solid var(--r-line);border-radius:9px;padding:8px}
.ivp-cols label{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;
  color:var(--r-ink2);padding:2px 0}
.ivp-cols input{accent-color:var(--r-gold);width:15px;height:15px}
.ivp-none{color:var(--r-mut);font-size:13px;margin:0}
.ivp-reset{width:100%;margin-top:6px;padding:8px;border-radius:8px;border:1px solid var(--r-line2);
  background:transparent;color:var(--r-ink2);font:650 13px/1 inherit;cursor:pointer}
.ivp-reset:hover{border-color:var(--r-dn);color:var(--r-dn)}
.ivp-note{margin:10px 0 0;font-size:11.5px;line-height:1.5;color:var(--r-mut)}

/* ── density ─────────────────────────────────────────────────────────── */
[data-iv-density="compact"] tbody td,
[data-iv-density="compact"] tbody th{padding:5px 11px}
[data-iv-density="compact"] thead th{padding:6px 11px}
[data-iv-density="compact"] .card{padding:11px 13px;margin-bottom:9px}
[data-iv-density="compact"] .hero{padding:13px 0 15px}
[data-iv-density="compact"] .hint{margin-bottom:8px}

/* ── text size ───────────────────────────────────────────────────────── */
[data-iv-size="sm"] table{font-size:13px}
[data-iv-size="lg"] table{font-size:16px}
[data-iv-size="sm"] .card > h2{font-size:17px}
[data-iv-size="lg"] .card > h2{font-size:21px}

/* ── dark ────────────────────────────────────────────────────────────────
   The tool started dark and the palette suited it; this brings that back as a
   choice rather than the only option. Only the tokens are redefined, so every
   rule above follows without being written twice. */
[data-iv-theme="dark"]{
  --r-paper:#0b1220; --r-card:#131c2e; --r-card2:#1a2438;
  --r-ink:#e8edf7;   --r-ink2:#c2cbdb; --r-mut:#8e99ad;
  --r-line:#26314a;  --r-line2:#36435f;
  --r-navy:#dcab3c;                      /* the "active" fill has to read on dark */
  --r-gold:#dcab3c;  --r-gold-lt:#6b5518; --r-gold-bg:#241d0c;
  --r-up:#3ddbb0;    --r-dn:#ff8a7a;
  --r-sh:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
}
[data-iv-theme="dark"] body{background:var(--r-paper);color:var(--r-ink)}
[data-iv-theme="dark"] .topbar{background:var(--r-card)}
[data-iv-theme="dark"] .topbar nav a.on{background:var(--r-gold);color:#0b1220}
[data-iv-theme="dark"] .hero{background:linear-gradient(135deg,#101a2c 0%,#18243c 100%)}
[data-iv-theme="dark"] .searchbox{background:#1a2438;color:var(--r-ink);
  border-color:var(--r-line2)}
[data-iv-theme="dark"] .searchbox::placeholder{color:var(--r-mut)}
[data-iv-theme="dark"] .lnk{color:var(--r-ink)}
[data-iv-theme="dark"] .lnk:hover{color:var(--r-gold)}
[data-iv-theme="dark"] .ivp-seg button.on{background:var(--r-gold);color:#0b1220}
[data-iv-theme="dark"] #ivp-open{background:var(--r-card);color:var(--r-ink)}

@media(max-width:640px){
  #ivp{right:12px;bottom:12px}
  #ivp-panel{width:min(290px,calc(100vw - 28px))}
  #ivp-open span{display:none}
  #ivp-open{padding:11px;border-radius:50%}
}

/* ══ grouped long lists ══════════════════════════════════════════════════
   Categories and Sectors arrive as one flat run — 46 and 342 rows. Broken into
   sections they stop competing: an equity category is compared with equity
   categories, and a credit rating never sits next to an industry again. */
.ivg{margin-top:2px}
.ivg-sec{border:1px solid var(--r-line);border-radius:12px;margin-bottom:10px;
  background:var(--r-card);overflow:hidden}
.ivg-sec > summary{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 15px;cursor:pointer;list-style:none;
  background:var(--r-card2);border-bottom:1px solid var(--r-line)}
.ivg-sec > summary::-webkit-details-marker{display:none}
.ivg-sec:not([open]) > summary{border-bottom:0}
.ivg-name{font-weight:750;font-size:14.5px;color:var(--r-ink);display:flex;align-items:center;gap:8px}
.ivg-name::before{content:'▸';color:var(--r-gold);font-size:12px;transition:transform .15s}
.ivg-sec[open] .ivg-name::before{transform:rotate(90deg)}
.ivg-count{font-size:12px;font-weight:700;color:var(--r-mut);
  background:var(--r-gold-bg);border:1px solid var(--r-gold-lt);
  border-radius:999px;padding:2px 9px;font-variant-numeric:tabular-nums}
.ivg-sec > summary:hover .ivg-name{color:var(--r-gold)}
.ivg .tblwrap{border:0;border-radius:0}
.ivg table{margin:0}
.ivg thead th{background:var(--r-card)}
[data-iv-theme="dark"] .ivg-sec > summary{background:var(--r-card2)}

/* ══ filter bar + sortable headers ═══════════════════════════════════════ */
#ivf{display:flex;gap:9px;align-items:center;margin:0 0 12px}
#ivf-q{flex:1;min-width:0;padding:10px 14px;border-radius:10px;
  border:1px solid var(--r-line2);background:var(--r-card);color:var(--r-ink);
  font:500 14.5px/1.3 inherit}
#ivf-q::placeholder{color:var(--r-mut)}
#ivf-q:focus{outline:none;border-color:var(--r-gold);box-shadow:0 0 0 3px rgba(184,135,28,.18)}
#ivf-n{font-size:12.5px;font-weight:700;color:var(--r-mut);white-space:nowrap;
  font-variant-numeric:tabular-nums}
#ivf-x{padding:9px 14px;border-radius:9px;border:1px solid var(--r-gold-lt);
  background:var(--r-gold-bg);color:var(--r-ink2);font:650 13px/1 inherit;cursor:pointer}
#ivf-x:hover{background:var(--r-gold);border-color:var(--r-gold);color:#0b1220}

th.ivs{cursor:pointer;user-select:none;position:relative;padding-right:20px}
th.ivs:hover{color:var(--r-gold)}
th.ivs::after{content:'⇅';position:absolute;right:7px;opacity:.32;font-size:11px;font-weight:400}
th.ivs.on::after{opacity:1;color:var(--r-gold)}
th.ivs.on[data-dir="asc"]::after{content:'↑'}
th.ivs.on[data-dir="desc"]::after{content:'↓'}
@media(max-width:640px){
  #ivf{flex-wrap:wrap}
  #ivf-q{flex:1 1 100%}
}

/* ══ Template maker ══════════════════════════════════════════════════════ */
#ivb{max-width:100%}

/* ── the Builder's loading blur ───────────────────────────────────────────
   The Builder fetches three tables and joins them before any of its controls
   mean anything — the category chips have no counts, the metric picker has no
   ranges. While that is in flight everything below the heading is soft, and
   comes into focus when the data lands. The heading stays sharp: it is
   already true, and it says what is being waited for.

   Not to be confused with .pgate-blur, which is the Advisor gate and means
   something else entirely ("you may look, not touch"). They never overlap —
   without Advisor the fetch never starts.

   pointer-events go with it, so nobody clicks a control that is not ready.
                                                          added 2026-09-24 */
#ivb > :not(.ivb-head){
  transition:filter .55s cubic-bezier(.23,1,.32,1);
}
#ivb.ivb-booting > :not(.ivb-head){
  filter:blur(10px) saturate(.92);
  pointer-events:none;
  /* The last line of defence. If every line of the script stopped before it
     could take the class off, this still clears the blur on its own — a tool
     left permanently unreadable is worse than one shown unready. */
  animation:ivbBootSafety .1s linear 8.6s forwards;
}
@keyframes ivbBootSafety{to{filter:blur(0) saturate(1)}}
@media (prefers-reduced-motion:reduce){
  #ivb > :not(.ivb-head){transition:filter .25s linear}
}
.ivb-head h1{margin:4px 0 6px;font-size:26px;letter-spacing:-.4px;color:var(--r-ink)}
.ivb-head p{margin:0 0 14px;color:var(--r-mut);font-size:14px;line-height:1.6;max-width:78ch}
.ivb-nav{position:relative}
.ivb-nav::after{content:'NEW';position:absolute;top:-6px;right:-4px;font-size:8px;font-weight:800;
  background:var(--r-gold);color:#fff;border-radius:4px;padding:1px 3px;letter-spacing:.04em}

.ivb-tpl{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px;
  padding:11px 13px;background:var(--r-card);border:1px solid var(--r-line);border-radius:12px}
.ivb-tpl input,.ivb-tpl select{padding:8px 12px;border-radius:9px;border:1px solid var(--r-line2);
  background:var(--r-card);color:var(--r-ink);font:500 14px/1 inherit}
.ivb-tpl input{flex:1;min-width:150px}
.ivb-tpl button{padding:8px 14px;border-radius:9px;border:1px solid var(--r-gold-lt);
  background:var(--r-gold-bg);color:var(--r-ink2);font:650 13.5px/1 inherit;cursor:pointer}
.ivb-tpl button:hover{background:var(--r-gold);border-color:var(--r-gold);color:#0b1220}

.ivb-step{background:var(--r-card);border:1px solid var(--r-line);border-radius:14px;
  padding:15px 17px;margin-bottom:13px}
.ivb-step h3{margin:0 0 11px;font-size:14px;letter-spacing:.02em;color:var(--r-ink);
  display:flex;align-items:center;gap:9px}
.ivb-step h3 b{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:var(--r-navy);color:#fff;font-size:12px;flex:0 0 auto}
#ivb-count{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--r-mut)}

.ivb-chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:11px}
.ivb-chip{padding:8px 15px;border-radius:9px;border:1px solid var(--r-gold-lt);
  background:var(--r-gold-bg);color:var(--r-ink2);font:650 13.5px/1 inherit;cursor:pointer}
.ivb-chip:hover{background:#f5e6c0}
.ivb-chip.on{background:var(--r-navy);border-color:var(--r-navy);color:#fff}
.ivb-win{display:flex;align-items:center;gap:11px;flex-wrap:wrap;font-size:13.5px;color:var(--r-ink2)}
.ivb-win select{padding:6px 10px;border-radius:8px;border:1px solid var(--r-line2);
  background:var(--r-card);color:var(--r-ink);font:600 13.5px/1 inherit;margin-left:6px}
.ivb-hint{color:var(--r-mut);font-size:12.5px}

.ivb-fams{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.ivb-fam h4{margin:0 0 7px;font-size:11px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--r-mut)}
.ivb-m{display:flex;align-items:center;gap:8px;font-size:13.5px;padding:3px 0;cursor:pointer;
  color:var(--r-ink2)}
.ivb-m input{accent-color:var(--r-gold);width:15px;height:15px}
.ivb-m.off{opacity:.5;cursor:not-allowed}
.ivb-m em{font-size:10px;font-style:normal;color:var(--r-dn);border:1px solid var(--r-dn);
  border-radius:4px;padding:0 4px;margin-left:auto}

.ivb-rule{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:9px 0;
  border-bottom:1px solid var(--r-line)}
.ivb-rule:last-child{border-bottom:0}
.ivb-rname{min-width:170px;font-weight:650;font-size:13.5px;color:var(--r-ink)}
.ivb-dir{display:block;font-weight:500;font-size:11px;color:var(--r-mut)}
.ivb-inputs{display:flex;gap:9px}
.ivb-inputs label{font-size:12px;color:var(--r-mut);display:flex;align-items:center;gap:5px}
.ivb-inputs input{width:78px;padding:6px 8px;border-radius:7px;border:1px solid var(--r-line2);
  background:var(--r-card);color:var(--r-ink);font:600 13px/1 inherit}
.ivb-txt{font-size:12px;color:var(--r-mut)}
.ivb-scale{display:flex;gap:5px;margin-left:auto}
.ivb-sw{display:flex;border:1px solid var(--r-line2);border-radius:6px;overflow:hidden;
  padding:0;cursor:pointer;background:none}
.ivb-sw i{width:11px;height:17px;display:block}
.ivb-sw.on{outline:2px solid var(--r-gold);outline-offset:1px}
.ivb-none{color:var(--r-mut);font-size:13.5px;margin:4px 0}
.ivb-out .sub2{font-size:11.5px;color:var(--r-mut);margin-top:2px}
th.ivb-th{cursor:pointer;white-space:nowrap}
th.ivb-th em{font-style:normal;opacity:.6}
th.ivb-th.on{color:var(--r-gold)}
@media(max-width:700px){
  .ivb-rule{align-items:flex-start}
  .ivb-scale{margin-left:0;width:100%}
}

/* ══ Market tab: the decoration was outweighing the data ═════════════════
   Three 397px 3D cards sat above the numbers they illustrate, and their
   captions described the RENDER ("physically-based gold, environment-mapped")
   rather than the figure. On a research page the number is the point and the
   picture is the ornament, so the ornament gets smaller. */
.dc-grid{gap:10px}
.dc-card{padding:10px}
.dc-stage{max-height:150px;overflow:hidden;border-radius:10px}
.dc-stage canvas{max-height:150px;width:100%;height:auto;display:block}
.dc-card p,.dc-card .cap,.dc-card figcaption{font-size:11.5px;line-height:1.45;
  margin:6px 0 0;color:var(--r-mut);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ── the counters row ──────────────────────────────────────────────────────
   Its grid declared seven columns for four children, so three empty tracks sat
   on the end and the row never centred. Worse, "Total disclosed AUM · 31 Jul
   2026" wraps to two lines while "Fund houses" does not — with the number and
   label in normal flow, that pushed the first figure onto a different baseline
   from the other three. Fixing the alignment means fixing the wrap, not nudging
   the text: the number gets its own fixed band so a label of any length leaves
   it exactly where it was. */
/* Their own grid is left alone. Overriding grid-template-columns with
   auto-fit collapsed it to a single 150px track and stacked all four counters
   — the page went from 9,875px to 21,616px. The alignment fault was never the
   columns; it was the label wrap moving the number. Only that is fixed. */
.dc-counters{align-items:start}
.dc-counters .c{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:2px;min-width:0}
.dc-counters .c .n{font-size:27px;font-weight:750;line-height:1.15;
  min-height:32px;display:flex;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums;letter-spacing:-.5px;color:var(--r-ink)}
.dc-counters .c.gold .n{color:var(--r-gold)}
.dc-counters .c .l{font-size:11.5px;line-height:1.35;color:var(--r-mut);
  max-width:20ch;font-weight:600}

/* the 8 coverage tiles read as a data row, not a paragraph */
.tile{background:var(--r-card2);border:1px solid var(--r-line);border-radius:10px;
  padding:10px 12px;min-width:0}
.tile .n,.tile b,.tile strong{font-size:20px;font-weight:750;color:var(--r-ink);
  font-variant-numeric:tabular-nums;display:block;line-height:1.2}
.tile .l,.tile small,.tile span{font-size:11.5px;color:var(--r-mut);display:block;margin-top:2px}
@media(max-width:640px){
  .dc-counters .c .n{font-size:22px;min-height:27px}
  .dc-stage,.dc-stage canvas{max-height:110px}
}

/* ── Builder: Run button and the honest empty state ─────────────────────── */
.ivb-step h3 { display:flex; align-items:center; gap:10px; }
.ivb-runwrap { margin-left:auto; }
.ivb-run {
  font:600 13px/1 var(--f, inherit); padding:9px 20px; border-radius:8px; cursor:pointer;
  background:var(--ink, #10233f); color:#fff; border:1px solid var(--ink, #10233f);
  letter-spacing:.02em;
}
.ivb-run:hover { filter:brightness(1.12); }
.ivb-run.dirty { background:var(--gold, #b8871c); border-color:var(--gold, #b8871c); }

.ivb-empty { padding:6px 2px 4px; }
.ivb-hint { margin:10px 0 8px; font-size:12.5px; opacity:.72; }
.ivb-dmg { list-style:none; margin:0 0 14px; padding:0; }
.ivb-dmg li {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 10px; border:1px solid rgba(0,0,0,.09); border-radius:7px; margin-bottom:6px;
  font-size:13px;
}
.ivb-dmg li.kill { border-color:#e0a99c; background:#fdf3f0; }
.ivb-dmg .r { opacity:.6; font-size:12px; }
.ivb-dmg .k { margin-left:auto; font-variant-numeric:tabular-nums; font-weight:600; }
.ivb-dmg li.kill .k { color:#a52b22; }
.ivb-dmg .b { font-size:11.5px; opacity:.6; }
.ivb-clr, .ivb-clrall {
  font:600 11.5px/1 inherit; padding:6px 11px; border-radius:6px; cursor:pointer;
  background:transparent; border:1px solid rgba(0,0,0,.18);
}
.ivb-clr:hover, .ivb-clrall:hover { background:rgba(0,0,0,.05); }
.ivb-clrall { padding:8px 16px; font-size:12.5px; }

/* ── Builder: plan and option toggles ────────────────────────────────────── */
.ivb-pofilt { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:12px 0 2px; }
.ivb-plab { font-size:11px; letter-spacing:.08em; text-transform:uppercase; opacity:.6; margin-left:4px; }
.ivb-plab:first-child { margin-left:0; }
.ivb-tog {
  font:600 12.5px/1 inherit; padding:7px 14px; border-radius:999px; cursor:pointer;
  background:transparent; border:1px solid rgba(0,0,0,.18); color:inherit;
}
.ivb-tog:hover { background:rgba(0,0,0,.04); }
.ivb-tog.on { background:var(--ink,#10233f); border-color:var(--ink,#10233f); color:#fff; }
.ivb-pofilt .ivb-hint { margin:0 0 0 6px; font-size:11.5px; }

/* IDCW schemes read low from NAV alone — the table says so rather than letting
   a 7-point gap look like a real difference between two options of one fund. */
.ivb-warn {
  margin:0 0 12px; padding:10px 13px; border-radius:7px; font-size:12.5px; line-height:1.5;
  background:#fdf6e8; border:1px solid #e6c87e; color:#6b4e08;
}

/* ── Builder: the Run button must feel pressed ───────────────────────────── */
.ivb-run {
  position:relative; transition:transform .06s ease, box-shadow .12s ease, background .15s ease;
  box-shadow:0 1px 0 rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.10);
  user-select:none;
}
.ivb-run:active {
  transform:translateY(2px);
  box-shadow:0 0 0 rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.10);
}
.ivb-run:focus-visible { outline:2px solid var(--gold,#b8871c); outline-offset:2px; }
.ivb-run.dirty {
  animation:ivbPulse 1.6s ease-in-out infinite;
}
@keyframes ivbPulse {
  0%,100% { box-shadow:0 1px 0 rgba(0,0,0,.18), 0 0 0 0 rgba(184,135,28,.45); }
  50%     { box-shadow:0 1px 0 rgba(0,0,0,.18), 0 0 0 7px rgba(184,135,28,0); }
}
.ivb-run.busy, .ivb-run:disabled {
  cursor:progress; opacity:.75; animation:none; transform:none;
}
.ivb-run.busy::after {
  content:''; display:inline-block; width:11px; height:11px; margin-left:8px;
  vertical-align:-1px; border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff; border-radius:50%; animation:ivbSpin .6s linear infinite;
}

/* ── the circular loader, so a pause never reads as a hang ───────────────── */
.ivb-loading {
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:44px 16px; font-size:13.5px; color:var(--r-mut,#6b7280);
}
.ivb-spin {
  width:22px; height:22px; flex:none; border-radius:50%;
  border:2.5px solid rgba(0,0,0,.10);
  border-top-color:var(--gold,#b8871c);
  animation:ivbSpin .7s linear infinite;
}
@keyframes ivbSpin { to { transform:rotate(360deg); } }

@media (prefers-reduced-motion:reduce) {
  .ivb-spin, .ivb-run.busy::after { animation-duration:2s; }
  .ivb-run.dirty { animation:none; }
  .ivb-run:active { transform:none; }
}

/* ── Builder results: a dense sheet, not a stack of cards ─────────────────
   Cells wrapped, so a long scheme name pushed its row to three lines and the
   table read as a column of fat boxes. Nothing wraps now: the name gets one
   line and is clipped with the full text in its title, and everything the
   reader needs to tell two rows apart — plan, option, category — sits on a
   second small line under it. */
.ivb-out table { border-collapse:collapse; width:100%; font-size:12.5px; }

.ivb-out thead th {
  white-space:nowrap; padding:7px 10px; line-height:1.25;
  font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  position:sticky; top:0; z-index:2; background:var(--r-card,#fff);
}
.ivb-out tbody td {
  white-space:nowrap; padding:5px 10px; line-height:1.3;
  border-bottom:1px solid var(--r-line,rgba(0,0,0,.07));
}
.ivb-out tbody td.n {
  text-align:right; font-variant-numeric:tabular-nums; font-size:12px;
}

/* the fund column: fixed width so the numbers line up and one name cannot
   stretch the whole sheet */
.ivb-out td.fcell {
  max-width:300px; min-width:220px;
  position:sticky; left:0; z-index:1; background:var(--r-card,#fff);
}
.ivb-out td.fcell .lnk {
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-weight:620; font-size:12.5px; line-height:1.35; border-bottom:0;
}
.ivb-out td.fcell .sub2 {
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:10.5px; line-height:1.3; margin-top:0; color:var(--r-mut,#6b7280);
}
.ivb-out tbody tr:hover td { background:rgba(0,0,0,.025); }
.ivb-out tbody tr:hover td.fcell { background:var(--r-card,#fff); }

@media (max-width:760px){
  .ivb-out td.fcell { max-width:180px; min-width:150px; }
  .ivb-out tbody td { padding:4px 7px; }
}

/* ── Builder: category chips inside the chosen type ──────────────────────── */
.ivb-cats { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:10px 0 2px; }
.ivb-catchip {
  font:600 12px/1 inherit; padding:6px 10px 6px 12px; border-radius:999px; cursor:pointer;
  background:transparent; border:1px solid rgba(0,0,0,.16); color:inherit;
  display:inline-flex; align-items:center; gap:7px;
}
.ivb-catchip:hover { background:rgba(0,0,0,.04); }
.ivb-catchip i {
  font-style:normal; font-size:10.5px; font-weight:600; opacity:.62;
  background:rgba(0,0,0,.06); padding:2px 6px; border-radius:999px;
}
.ivb-catchip.on { background:var(--gold,#b8871c); border-color:var(--gold,#b8871c); color:#fff; }
.ivb-catchip.on i { background:rgba(255,255,255,.25); opacity:.95; color:#fff; }
.ivb-catclr {
  font:600 11.5px/1 inherit; padding:6px 11px; border-radius:999px; cursor:pointer;
  background:transparent; border:1px dashed rgba(0,0,0,.28); color:inherit;
}
.ivb-catclr:hover { background:rgba(0,0,0,.05); }
.ivb-cats .ivb-hint { margin:0 0 0 4px; font-size:11.5px; }

/* ── Builder step 5: scenario & sensitivity ──────────────────────────────── */
.ivb-bmnote { font-size:12.5px; line-height:1.55; padding:10px 13px; border-radius:7px; margin:0 0 12px; }
.ivb-bmnote:empty { display:none; }
.ivb-bmnote.ok   { background:#eefaf4; border:1px solid #8ed4b4; color:#08543f; }
.ivb-bmnote.warn { background:#fdf6e8; border:1px solid #e6c87e; color:#6b4e08; }

.ivb-scgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:10px; margin-bottom:12px; }
.ivb-scf { display:flex; flex-direction:column; gap:5px; font-size:11px;
  letter-spacing:.06em; text-transform:uppercase; opacity:.72; }
.ivb-scf select, .ivb-scf input { font:600 13px/1 inherit; padding:8px 10px;
  border-radius:7px; border:1px solid rgba(0,0,0,.18); background:var(--r-card,#fff); color:inherit;
  text-transform:none; letter-spacing:0; }
.ivb-inrow { position:relative; display:block; }
.ivb-inrow input { width:100%; padding-right:26px !important; }
.ivb-inrow i { position:absolute; right:9px; top:50%; transform:translateY(-50%);
  font-style:normal; font-size:12px; opacity:.5; }

.ivb-secshocks { margin:4px 0 10px; }
.ivb-screy { display:flex; align-items:center; gap:8px; margin:6px 0; flex-wrap:wrap; }
.ivb-screy select { font:600 12.5px/1 inherit; padding:7px 9px; border-radius:7px;
  border:1px solid rgba(0,0,0,.18); background:var(--r-card,#fff); color:inherit; min-width:200px; }
.ivb-screy .ivb-inrow { width:104px; }
.ivb-screy input { font:600 12.5px/1 inherit; padding:7px 9px; border-radius:7px;
  border:1px solid rgba(0,0,0,.18); background:var(--r-card,#fff); color:inherit; width:100%; }

.sc-meta { font-size:12px; opacity:.75; margin:2px 0 10px; }
.sc-meta .warn { color:#a35a12; }
#sc-out td.n em.wt { font-style:normal; font-size:10px; opacity:.55; margin-left:5px; }
#sc-out td.band { opacity:.6; }
#sc-out td.pos, #sc-out .pos { color:#0a5f58; }
#sc-out td.neg, #sc-out .neg { color:#a52b22; }
.sc-note { margin:12px 0 2px; padding:11px 13px; border-radius:7px; font-size:12px; line-height:1.6;
  background:rgba(0,0,0,.035); border:1px solid rgba(0,0,0,.08); }
#sc-out td.wts { font-size:11px; opacity:.8; white-space:nowrap; }
#sc-out td.wts i { font-style:normal; opacity:.35; margin:0 2px; }
#sc-out td.wts b { font-weight:700; }
#sc-out th em.u { display:block; font-style:normal; font-size:9px; opacity:.55;
  letter-spacing:.04em; text-transform:none; margin-top:1px; }
.sc-units { font-size:11.5px; line-height:1.5; opacity:.75; margin:0 0 8px;
  padding:7px 11px; border-radius:6px; background:rgba(0,0,0,.03); }
#sc-out td.n em.wt.approx { color:#a35a12; opacity:.85; font-weight:600; }
.ivb-scf .ivb-sub{display:block;margin-top:3px;font-size:10px;letter-spacing:0;
  text-transform:none;opacity:.6;font-weight:500}
#sc-out td.n .na{opacity:.35;cursor:help}

/* ── the Builder route, decided before the first paint ─────────────────────
   `html.ivb-on` is set while research-builder.js is parsing, so the app's own
   hero and view are never painted on the way to the Builder. Before this the
   Market hero rendered, the page sat narrow for a moment, and then everything
   moved when the Builder took over — a visible jump on every single visit. */
html.ivb-on .hero,
html.ivb-on #view { display: none !important; }
/* and the reverse, so leaving the Builder does not leave it behind */
html:not(.ivb-on) #ivb { display: none !important; }