/* ── Reset, scoped INTO the app ────────────────────────────────────────────
   These used to be bare element selectors. Mounted in a site shell they styled
   the HOST's page, and since this stylesheet loads after the shell's, they won:
   the host's margins, its type size and its scrollbars all came from here. */
.topgear *{box-sizing:border-box;margin:0;padding:0}
.topgear{font-family:var(--font-ui);color:var(--text);font-size:13px;line-height:1.45;
  -webkit-font-smoothing:antialiased}
.topgear ::-webkit-scrollbar{width:11px;height:11px}
.topgear ::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px;border:3px solid transparent;background-clip:content-box}
.topgear ::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}
.topgear button{font-family:inherit;cursor:pointer}
.topgear input,.topgear select{font-family:inherit}

/* ── Full-page layout, for the host where the app owns the window ──────────
   height:100vh with overflow:hidden is right when the app IS the page and
   scrolls internally, and wrong everywhere else — it locked the document on the
   host that mounts this, so a table wider than the screen had no way to be
   reached. Sentinelled rather than deleted: one host still needs it. */
.topgear .num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.pos{color:var(--pos)} .neg{color:var(--neg)}

/* ══ Header ══ */
.header{
  display:flex;align-items:center;gap:18px;padding:0 18px;height:56px;flex:0 0 56px;
  background:var(--bg2);border-bottom:1px solid var(--border);z-index:40;
}
.header-left{display:flex;align-items:center;gap:14px;min-width:0}
.brand-logo-npb{height:26px;width:auto}
.brand-div{width:1px;height:26px;background:var(--border)}
.app-id{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.app-name{font-family:var(--brand-title-font);font-style:var(--brand-title-style);font-weight:var(--brand-title-weight);
  font-size:22px;color:var(--text-bright);letter-spacing:.3px}
.app-tag{font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--text-dim);font-weight:500;margin-top:1px}
.spacer{flex:1}

.view-tabs{display:flex;gap:2px;background:var(--bg3);padding:3px;border-radius:9px}
.view-tabs button{
  border:none;background:transparent;color:var(--text-dim);padding:6px 16px;border-radius:6px;
  font-size:12px;font-weight:600;letter-spacing:.2px;transition:all .15s;display:flex;align-items:center;gap:6px;
}
.view-tabs button.active{background:var(--bg2);color:var(--text-bright);box-shadow:var(--shadow)}
.topgear .view-tabs button:not(.active):hover{color:var(--text)}
.view-tabs svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}

.brand-pill{display:flex;border:1px solid var(--border);border-radius:7px;overflow:hidden}
.brand-pill button{background:var(--bg2);color:var(--text-dim);border:none;padding:6px 11px;font-size:10px;
  font-weight:600;letter-spacing:.5px;transition:all .15s;border-right:1px solid var(--border)}
.brand-pill button:last-child{border-right:none}
.brand-pill button.active{background:var(--accent);color:#fff}

.icon-btn{
  display:inline-flex;align-items:center;gap:7px;background:var(--bg2);color:var(--text);
  border:1px solid var(--border);border-radius:8px;padding:7px 13px;font-size:12px;font-weight:600;transition:all .15s;
}
.icon-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.icon-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon-btn.sq{padding:7px 9px}
.icon-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.icon-btn.primary:hover{filter:brightness(1.08);color:#fff}

.user-pill{display:inline-flex;align-items:center;gap:7px;background:var(--bg3);color:var(--text-dim);
  border:1px solid var(--border);border-radius:8px;padding:6px 11px;font-size:11px;font-weight:600;cursor:pointer}
.user-pill:hover{color:var(--accent);border-color:var(--accent)}

/* ══ Toolbar ══ */
.toolbar{
  display:flex;align-items:center;gap:9px;padding:9px 18px;background:var(--bg2);
  border-bottom:1px solid var(--border);flex:0 0 auto;flex-wrap:wrap;z-index:30;position:relative;
}
.search{position:relative;display:flex;align-items:center;flex:0 0 256px}
.search svg{position:absolute;left:11px;width:15px;height:15px;stroke:var(--text-dim);fill:none;stroke-width:1.8}
.search input{
  width:100%;padding:8px 12px 8px 34px;border:1px solid var(--border);border-radius:8px;background:var(--bg);
  color:var(--text);font-size:12.5px;transition:all .15s;
}
.search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.search input::placeholder{color:var(--text-dim)}

.filters{display:flex;gap:7px;flex-wrap:wrap}
.fdrop{position:relative}
.fdrop-btn{
  display:inline-flex;align-items:center;gap:7px;background:var(--bg);border:1px solid var(--border);
  border-radius:8px;padding:8px 11px;font-size:12px;font-weight:500;color:var(--text);transition:all .15s;white-space:nowrap;
}
.fdrop-btn:hover{border-color:var(--text-dim)}
.fdrop-btn.has{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);font-weight:600}
.fdrop-btn .cnt{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;
  background:var(--accent);color:#fff;border-radius:8px;font-size:9.5px;font-weight:700;font-family:var(--font-mono)}
.fdrop-btn .car{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .15s}
.fdrop.open .fdrop-btn .car{transform:rotate(180deg)}
.fdrop-panel{
  display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:230px;max-width:320px;
  background:var(--bg2);border:1px solid var(--border);border-radius:11px;box-shadow:var(--shadow-lg);
  padding:7px;max-height:340px;overflow-y:auto;
}
.fdrop.open .fdrop-panel{display:block}
.fopt{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:7px;cursor:pointer;font-size:12.5px;transition:background .1s}
.fopt:hover{background:var(--hover-bg)}
.fopt .box{width:16px;height:16px;border:1.5px solid var(--border);border-radius:5px;flex:0 0 16px;display:flex;align-items:center;justify-content:center;transition:all .12s}
.fopt.on .box{background:var(--accent);border-color:var(--accent)}
.fopt .box svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:2.6;opacity:0;transition:opacity .1s}
.fopt.on .box svg{opacity:1}
.fopt .lbl{flex:1;color:var(--text)}
.fopt .fc{font-size:10.5px;color:var(--text-dim);font-family:var(--font-mono)}
.fdrop-clear{width:100%;text-align:center;padding:6px;margin-top:3px;border-top:1px solid var(--border-lt);
  background:none;border:none;color:var(--text-dim);font-size:11px;font-weight:600}
.fdrop-clear:hover{color:var(--accent)}

.tb-right{display:flex;align-items:center;gap:9px;margin-left:auto}
.count{font-size:12px;color:var(--text-dim);white-space:nowrap}
.count b{color:var(--text-bright);font-family:var(--font-mono);font-weight:600}
.tlink{background:none;border:none;color:var(--text-dim);font-size:11.5px;font-weight:600;padding:6px 4px}
.tlink:hover{color:var(--accent)}

.chips{display:flex;gap:6px;flex-wrap:wrap;padding:0 18px;background:var(--bg2);overflow:hidden;
  max-height:0;transition:max-height .2s,padding .2s;border-bottom:1px solid transparent}
.chips.show{max-height:90px;padding:8px 18px;border-bottom:1px solid var(--border)}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);color:var(--accent);
  border:1px solid var(--accent-line);border-radius:20px;padding:3px 6px 3px 11px;font-size:11px;font-weight:600}
.chip .x{width:15px;height:15px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--accent)}
.chip .x:hover{background:var(--accent);color:#fff}
.chip .x svg{width:9px;height:9px;stroke:currentColor;fill:none;stroke-width:2.6}
.chip .k{opacity:.62;font-weight:500}

/* ══ Main ══ */
/* .main, .card, .active, .n, .nm, .num, .muted and .t are the eight names this
   app shares with a site shell it can be mounted into, so they carry the app's
   own scope. Scoped, never renamed (ARCHITECTURE §13): a rename reaches into
   the renderers, where a missed string fails silently at runtime instead of
   loudly at build.

   This rule assumes a full-height flex parent, which is true where the app owns
   the viewport and false where it is one block on a longer page. A host that
   mounts it has to give it a height. */
.topgear .main{flex:1;position:relative;overflow:hidden}
.view{position:absolute;inset:0;overflow:auto;display:none}
.view.active{display:block}

/* ── Table ── */
.tbl-wrap{padding:0}
table.funds{border-collapse:separate;border-spacing:0;width:100%;font-size:12.5px}
table.funds thead th{
  position:sticky;top:0;z-index:10;background:var(--bg3);color:var(--text-dim);font-weight:600;
  text-align:left;padding:10px 12px;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;
  white-space:nowrap;cursor:pointer;user-select:none;border-bottom:1px solid var(--border);transition:color .12s;
}
table.funds thead th:hover{color:var(--text)}
table.funds thead th.n{text-align:right}
table.funds thead th .arr{opacity:0;margin-left:4px;font-size:9px}
table.funds thead th.sort .arr{opacity:1;color:var(--accent)}
table.funds thead th.sort{color:var(--text-bright)}
table.funds tbody td{padding:9px 12px;border-bottom:1px solid var(--border-lt);white-space:nowrap;color:var(--text);vertical-align:middle}
table.funds tbody td.n{text-align:right}
table.funds tbody tr{cursor:pointer;transition:background .08s}
table.funds tbody tr:hover{background:var(--hover-bg)}
table.funds tbody tr.sel{background:var(--sel-bg)}
.fname{font-weight:600;color:var(--text-bright);max-width:340px;overflow:hidden;text-overflow:ellipsis}
.fsub{font-size:10.5px;color:var(--text-dim);font-family:var(--font-mono);margin-top:1px}
td.namecell{max-width:360px}
.tag{display:inline-block;padding:2px 8px;border-radius:5px;font-size:10.5px;font-weight:600;background:var(--bg3);color:var(--text);white-space:nowrap}
.tag.xf{background:var(--accent-soft);color:var(--accent)}
.topgear .muted{color:var(--text-dim)}
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:14px;color:var(--text-dim);text-align:center;padding:40px}
.empty-state svg{width:42px;height:42px;stroke:var(--border);fill:none;stroke-width:1.5}
.empty-state h3{font-family:var(--font-display);font-weight:600;color:var(--text);font-size:17px}

/* ── Cockpit ── */
.cockpit{padding:18px;display:flex;flex-direction:column;gap:16px}
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:13px}
.kpi{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:15px 17px;position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);opacity:.85}
.kpi .v{font-family:var(--font-display);font-size:27px;font-weight:700;color:var(--text-bright);line-height:1.1}
.kpi .l{font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--text-dim);font-weight:600;margin-top:5px}
.kpi .v.num{font-family:var(--font-mono)}
.charts-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.topgear .card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px 8px;display:flex;flex-direction:column}
.topgear .card.c6{grid-column:span 6}.topgear .card.c4{grid-column:span 4}.topgear .card.c12{grid-column:span 12}.topgear .card.c8{grid-column:span 8}
@media(max-width:1100px){.topgear .card.c6,.topgear .card.c4,.topgear .card.c8{grid-column:span 12}}
.topgear .card h4{font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--text-bright);margin-bottom:2px;display:flex;align-items:center;justify-content:space-between}
.topgear .card .ch-sub{font-size:10.5px;color:var(--text-dim);margin-bottom:8px}
.chart{width:100%;height:260px}
.chart.tall{height:320px}
.await{display:flex;flex-direction:column;align-items:center;justify-content:center;height:260px;gap:10px;color:var(--text-dim);text-align:center}
.await svg{width:30px;height:30px;stroke:var(--border);fill:none;stroke-width:1.5}
.topgear .await .t{font-weight:600;color:var(--text)}
.await .d{font-size:11px;max-width:240px}

/* ══ Detail drawer ══ */
.drawer-scrim{position:fixed;inset:0;background:rgba(20,16,12,.34);opacity:0;pointer-events:none;transition:opacity .22s;z-index:80}
.drawer-scrim.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:560px;max-width:94vw;background:var(--bg2);z-index:90;
  box-shadow:var(--shadow-lg);transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
.drawer.show{transform:translateX(0)}
.drawer-head{padding:20px 24px 16px;border-bottom:1px solid var(--border);position:relative}
.drawer-head .close{position:absolute;top:16px;right:18px;width:30px;height:30px;border-radius:8px;border:1px solid var(--border);
  background:var(--bg2);display:flex;align-items:center;justify-content:center;color:var(--text-dim)}
.drawer-head .close:hover{color:var(--accent);border-color:var(--accent)}
.drawer-head .close svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.drawer-head h2{font-family:var(--font-display);font-size:21px;font-weight:700;color:var(--text-bright);line-height:1.2;padding-right:40px}
.drawer-head .isin{font-family:var(--font-mono);font-size:11.5px;color:var(--text-dim);margin-top:5px}
.drawer-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.drawer-body{flex:1;overflow-y:auto;padding:18px 24px 36px}
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border-lt);border:1px solid var(--border-lt);border-radius:10px;overflow:hidden;margin-bottom:20px}
.dcell{background:var(--bg2);padding:11px 14px}
.dcell.full{grid-column:span 2}
.dcell .dk{font-size:9.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--text-dim);font-weight:600}
.dcell .dv{font-size:13px;color:var(--text-bright);margin-top:3px;font-weight:500}
.dcell .dv.num{font-family:var(--font-mono)}
.dsec{margin-bottom:18px}
.dsec h5{font-size:10px;letter-spacing:.7px;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:7px;display:flex;align-items:center;gap:8px}
.dsec h5::after{content:"";flex:1;height:1px;background:var(--border-lt)}
.dsec p{font-size:13px;line-height:1.6;color:var(--text);white-space:pre-wrap}
.dperf{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.dperf .pc{background:var(--bg3);border-radius:9px;padding:11px 13px;text-align:center}
.dperf .pc .pk{font-size:9.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--text-dim);font-weight:600}
.dperf .pc .pv{font-family:var(--font-mono);font-size:17px;font-weight:600;color:var(--text-bright);margin-top:4px}

/* ══ Data-freshness badge ══ */
.data-badge{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;color:var(--text-dim);
  background:var(--bg3);border:1px solid var(--border);border-radius:7px;padding:5px 9px;white-space:nowrap}
.data-badge b{color:var(--text-bright);font-family:var(--font-mono);font-weight:600}
.data-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--pos);flex:0 0 6px}
.data-badge.stale .dot{background:var(--c5)}

/* ══ Star / watchlist ══ */
.nm-wrap{display:flex;align-items:center;gap:8px}
.star{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:0 0 22px;border:none;background:none;
  color:var(--text-dim);border-radius:5px;padding:0;transition:all .12s}
.star:hover{color:var(--c5);background:var(--hover-bg)}
.star svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6}
.star.on{color:var(--c5)} .star.on svg{fill:var(--c5);stroke:var(--c5)}
#btn-star.on{color:var(--accent)}

/* ══ Compare select column ══ */
td.selcol,th.selcol{width:36px;text-align:center;padding-left:14px;padding-right:2px}
.cmp-box{width:15px;height:15px;border:1.5px solid var(--border);border-radius:4px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .12s}
.cmp-box:hover{border-color:var(--accent)}
.cmp-box.on{background:var(--accent);border-color:var(--accent)}
.cmp-box svg{width:10px;height:10px;stroke:#fff;fill:none;stroke-width:3;opacity:0}
.cmp-box.on svg{opacity:1}

/* ══ Quartile pill ══ */
.qpill{display:inline-block;min-width:26px;text-align:center;padding:2px 7px;border-radius:5px;font-size:10.5px;font-weight:700;font-family:var(--font-mono)}
.qpill.q1{background:rgba(46,125,123,.16);color:var(--pos)}
.qpill.q2{background:rgba(184,146,62,.16);color:#9c7b2e}
.qpill.q3{background:rgba(158,111,75,.15);color:#9e6f4b}
.qpill.q4{background:var(--accent-soft);color:var(--neg)}

/* ══ Compare bar (floating) ══ */
.cmp-bar{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(30px);z-index:150;display:flex;align-items:center;gap:10px;
  background:var(--text-bright);color:var(--bg2);padding:8px 10px 8px 18px;border-radius:12px;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:all .22s}
.cmp-bar.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.cmp-bar .cb-n{font-size:12.5px;font-weight:600}
.cmp-bar button{border:none;border-radius:8px;padding:7px 14px;font-size:12px;font-weight:700}
.cmp-bar .cb-go{background:var(--accent);color:#fff}
.cmp-bar .cb-clr{background:transparent;color:var(--bg2);opacity:.6;padding:7px 6px;font-weight:600}
.cmp-bar .cb-clr:hover{opacity:1}

/* ══ Comparison modal ══ */
.modal-scrim{position:fixed;inset:0;background:rgba(20,16,12,.42);opacity:0;pointer-events:none;transition:opacity .2s;z-index:160}
.modal-scrim.show{opacity:1;pointer-events:auto}
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:170;pointer-events:none;padding:28px}
.modal-card{background:var(--bg2);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:1080px;width:100%;max-height:88vh;
  display:flex;flex-direction:column;transform:scale(.96);opacity:0;transition:all .2s;pointer-events:auto}
.modal.show .modal-card{transform:scale(1);opacity:1}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.modal-head h3{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--text-bright)}
.modal-body{overflow:auto;padding:0}
table.cmp{border-collapse:separate;border-spacing:0;width:100%;font-size:12.5px}
table.cmp th,table.cmp td{padding:9px 14px;border-bottom:1px solid var(--border-lt);text-align:right;white-space:nowrap}
table.cmp th:first-child,table.cmp td:first-child{text-align:left;position:sticky;left:0;background:var(--bg2);color:var(--text-dim);font-weight:600;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px}
table.cmp thead th{position:sticky;top:0;background:var(--bg3);color:var(--text-bright);font-weight:700;text-align:right;z-index:1;max-width:230px;overflow:hidden;text-overflow:ellipsis}
table.cmp thead th:first-child{z-index:2;background:var(--bg3)}
table.cmp thead th .fsub{font-weight:500}
table.cmp td.num{font-family:var(--font-mono)}
table.cmp td.best{color:var(--pos);font-weight:700}

/* ══ X-Factor view ══ */
.xf-wrap{padding:18px;display:flex;flex-direction:column;gap:16px}
.xf-chart{width:100%;height:520px}
.xf-flags .flag-row{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--border-lt);font-size:12.5px;cursor:pointer}
.xf-flags .flag-row:hover{background:var(--hover-bg)}
.topgear .xf-flags .flag-row .nm{font-weight:600;color:var(--text-bright);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.xf-flags .flag-row .fsub{font-family:var(--font-mono);color:var(--text-dim);font-size:10.5px}

/* ══ Toast ══ */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--text-bright);
  color:var(--bg2);padding:11px 20px;border-radius:10px;font-size:12.5px;font-weight:600;box-shadow:var(--shadow-lg);
  opacity:0;pointer-events:none;transition:all .25s;z-index:200;display:flex;align-items:center;gap:9px}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}

/* ── hidden file input ── */
#file-input{display:none}

/* ══════════ PRINT (branded PDF) ══════════ */
#print-root{display:none}
@media print{
  /* 15mm at the foot was empty paper. The factsheet wants it for the chart,
     and the filtered-list print - which shares this rule, because @page is
     document-level - is unaffected by 3mm. */
  @page{size:A4 landscape;margin:13mm 12mm 11mm}
  body{height:auto;overflow:visible;display:block;background:#fff}
  .header,.toolbar,.chips,.topgear .main,.drawer,.drawer-scrim,.toast{display:none !important}
  #print-root{display:block !important}
  /* THE COVER GETS A PAGE OF ITS OWN. break-after, not before: this is the
     first thing in the print root and a break before it would open with a
     blank sheet. The height is the page box — A4 landscape less the margins
     declared above — so the cover fills the paper rather than sitting in the
     top inch of it. */
  .pr-cover{min-height:186mm;display:flex;break-after:page;page-break-after:always}
  .pr-cover .doc-cover{flex:1}
  .pr-head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2px solid var(--accent);padding-bottom:10px;margin-bottom:4px}
  .pr-title{font-family:var(--font-display);font-size:20px;font-weight:700;color:#111}
  .pr-meta{font-size:9px;color:#666;text-align:right;line-height:1.5}
  .pr-filters{font-size:9px;color:#444;margin:7px 0 4px}
  .pr-filters b{color:#111}
  table.pr-tbl{border-collapse:collapse;width:100%;font-size:8.2px;font-family:var(--font-ui)}
  table.pr-tbl th{background:#f0eee9 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;
    text-align:left;padding:5px 6px;font-size:7.4px;text-transform:uppercase;letter-spacing:.3px;color:#333;border-bottom:1.2px solid #999}
  table.pr-tbl th.n{text-align:right}
  table.pr-tbl td{padding:4px 6px;border-bottom:.5px solid #ddd;color:#222}
  table.pr-tbl td.n{text-align:right;font-variant-numeric:tabular-nums}
  table.pr-tbl tr{break-inside:avoid}
  table.pr-tbl tbody tr:nth-child(even) td{background:#faf9f7 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .pr-foot{position:fixed;bottom:4mm;left:0;right:0;display:flex;justify-content:space-between;font-size:8px;color:#888}
}

/* ════════ Factsheet ════════════════════════════════════════════════════════
   A per-fund one-pager sized to print onto a single A4 portrait page.

   Two rules here are load-bearing rather than decorative:

   1. .fsheet is a SIBLING of the app, not a child. The print block hides
      everything on the page except this element, and a nested factsheet would
      be hidden along with its own ancestors.
   2. Widths are in mm inside the print block. A4 portrait minus 10mm margins is
      190mm, and pinning the page to that is what makes the screen preview and
      the printed sheet agree. */

.fsheet{position:fixed;inset:0;z-index:80;overflow:auto;background:var(--bg);
  display:none;padding:26px 20px 60px}
.fsheet.show{display:block}
body.fs-open{overflow:hidden}

/* Matches the printed page: A4 landscape less the shared @page margins is
   279mm, about 1055px. A preview narrower than the sheet it previews invites
   exactly the surprise this whole check exists to prevent. */
.fs-page{max-width:1055px;margin:0 auto;background:var(--card);border:1px solid var(--border);
  border-radius:12px;padding:26px 30px 20px}
.fs-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  border-bottom:1px solid var(--border);padding-bottom:12px;margin-bottom:14px}
.fs-head-l{min-width:0}
.fs-isin{flex:none;font-variant-numeric:tabular-nums;letter-spacing:.04em;
  font-size:13px;font-weight:600;color:var(--text-dim)}
.fs-tag{margin-top:3px;font-size:12px;color:var(--text-dim);font-style:italic}
.fs-kick{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c1)}
.fs-head h1{margin:4px 0 0;font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.fs-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;
  max-width:1055px;margin:0 auto 14px;padding:10px 0;background:var(--bg)}
.fs-bar .fs-sp{flex:1}
.fs-count{font-size:12.5px;font-weight:600;color:var(--text-dim)}
.fs-stack{display:flex;flex-direction:column;gap:22px}
.fs-desc{margin:0 0 16px;font-size:12px;line-height:1.55;color:var(--text-dim);max-width:76ch}

.fs-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:26px}
.fs-col{min-width:0}
.fs-sec{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-dim);border-bottom:1px solid var(--border-lt);
  padding-bottom:5px;margin:16px 0 8px}
.fs-col>.fs-sec:first-child{margin-top:0}

.fs-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  font-size:11.5px;padding:3px 0;border-bottom:1px dotted var(--border-lt)}
.fs-row span{color:var(--text-dim)}
.fs-row b{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}

.fs-grid3{display:grid;grid-template-columns:1fr repeat(3,54px);gap:6px;
  font-size:11.5px;padding:3px 0;border-bottom:1px dotted var(--border-lt)}
.fs-grid3 .fs-lbl{color:var(--text-dim)}
.fs-grid3 b{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.fs-grid3.fs-hd b{color:var(--text-dim);font-weight:700;font-size:10px}
.fs-grid3.fs-hd{border-bottom:1px solid var(--border-lt)}

.fs-chart{width:100%;height:230px}
.fs-note{font-size:9.5px;color:var(--text-dim);line-height:1.45;margin-top:4px}
.fs-note-txt{font-size:11px;line-height:1.5;color:var(--text-dim);margin:0}
.fs-empty{font-size:11px;color:var(--text-dim);line-height:1.5;padding:24px 16px;
  border:1px dashed var(--border);border-radius:8px;text-align:center}
.fs-two{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:6px}

.fs-foot{display:flex;justify-content:space-between;gap:12px;font-size:9.5px;
  color:var(--text-dim);border-top:1px solid var(--border);margin-top:18px;padding-top:8px}

.nm-wrap .fsbtn{flex:none;width:22px;height:22px;padding:0;border:0;background:none;
  color:var(--text-dim);cursor:pointer;opacity:0;transition:opacity .12s,color .12s}
.nm-wrap .fsbtn svg{width:15px;height:15px}
tr:hover .nm-wrap .fsbtn,.nm-wrap .fsbtn:focus{opacity:1}
.nm-wrap .fsbtn:hover{color:var(--c1)}

/* SCREEN ONLY. Unqualified, this is a viewport query that print also evaluates —
   and against the A4 page box it matches, collapsing the factsheet to a single
   column and pushing it onto a second sheet. Measured: .fs-cols went 535px
   side-by-side to 882px stacked, which was the entire overflow.

   This is the same trap ARCHITECTURE §9 records against the NPB 3D print
   document, where @media(max-width:820px) flattened .focus-grid and printed
   eight boxes instead of four. Any width query that a print layout must not see
   needs the `screen` keyword. */
@media screen and (max-width:900px){
  .fs-cols{grid-template-columns:minmax(0,1fr)}
  .fs-two{grid-template-columns:1fr}
  .nm-wrap .fsbtn{opacity:1}
}

/* ── Print: one A4 portrait page ──────────────────────────────────────────
   print-color-adjust is not optional. Without it Blink drops every background
   fill unless the user happens to tick "Background graphics", and the drawdown
   area silently prints white. */
@media print{
  /* No @page here on purpose. @page is document-level and cannot be scoped, so
     this print block and the filtered-list print above necessarily share one
     page setup — a second rule would silently override the first for BOTH.
     The single declaration lives with the list print. */
  html,body{background:#fff!important}
  body>*{display:none!important}
  body>.fsheet.show{display:block!important;position:static!important;
    padding:0!important;overflow:visible!important;background:#fff!important}
  .no-print{display:none!important}
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  .fs-page{max-width:279mm!important;width:279mm!important;margin:0!important;
    border:0!important;border-radius:0!important;padding:0!important;
    background:#fff!important;font-size:9.5px}
  .fs-head{padding-bottom:8px;margin-bottom:9px}
  .fs-head h1{font-size:16.5px}
  .fs-isin{font-size:10.5px}
  .fs-tag{font-size:8.6px;margin-top:2px}
  .fs-kick{font-size:8px}
  /* The description is NPB's own copy and is never truncated — a factsheet that
     quietly says less than the workbook does is worse than one that runs on.

     Setting it in two columns is what keeps the page to a single sheet. At one
     column the longest commentary in the book (1431 characters) pushed the page
     to two; at two columns the same text costs half the height and everything
     fits. Measured across the five longest, not assumed. */
  /* Three columns in landscape rather than two. The measure stays readable at
     about 85mm a column, and the description stops being the thing that
     decides whether the page fits. */
  .fs-desc{font-size:8px;line-height:1.35;margin-bottom:8px;max-width:none;
    column-count:3;column-gap:9mm;text-align:justify;hyphens:auto}
  .fs-cols{gap:12mm;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
  .fs-row,.fs-grid3{font-size:9.5px;padding:2px 0}
  .fs-sec{font-size:8.5px;margin:7px 0 3px;padding-bottom:3px}
  .fs-chart{height:55mm}
  .fs-two{gap:8mm;margin-top:4px}
  .fs-note{font-size:7.6px;line-height:1.4}
  .fs-note-txt{font-size:8px;line-height:1.4;text-align:justify;hyphens:auto}
  .fs-foot{font-size:7.6px;margin-top:8px;padding-top:6px}
  /* Break BEFORE, never after — a break-after on the last block leaves a
     trailing blank page (the NPB 3D print lesson, ARCHITECTURE §9). */
  /* Break BEFORE each sheet after the first, never AFTER — a break-after on
     the last page leaves a trailing blank one. That is the same rule the NPB
     3D print document follows (ARCHITECTURE §9), and it is why a selection of
     six funds prints as six pages and not seven. */
  .fs-stack{display:block!important;gap:0!important}
  .fs-page{break-inside:avoid}
  .fs-page + .fs-page{break-before:page}
}