/* =============================================================================
   investor/assets/investor.css — the three investor portfolios, both editions.
   Generated pages (work/investor/mkinvestor.py, labs488) read this one sheet.

   Structure, type, bands, figures, forms and the edition pill are site.css's;
   the dark editions add dark-home.css, which re-points the same tokens. What is
   local: the flagship dossier and tier ladder (lifted from the paper data room),
   the asset card, the toolbar, the portfolio switcher and the C/D density switch.
   Colours read tokens; the few literals are the house gold used on the cards.
   ========================================================================== */
:root { --gold: #B7791F; --gold-soft: rgba(183,121,31,.12); --card: var(--paper); --flag: #C2410C; --act: #0E8055; --strat: #2563A8; }
html[data-dark] { --gold: #F2B25C; --gold-soft: rgba(242,178,92,.14); --card: #111a26; --flag: #FB923C; --act: #4ADE80; --strat: #7DB5F0; }
html, body { overflow-x: clip; }

/* ---- the flagship dossier ------------------------------------------------
   One per live property. The capture carries the reading -- these are visual
   products and a paragraph about a generative art engine is worth less than
   four hundred pixels of it -- so the image leads and the prose sits under it. */
.dossiers {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: clamp(1.6rem, 3vw, 2.6rem); margin-top: clamp(2rem, 4vw, 3rem);
}
.dossier { display: flex; flex-direction: column; }
.dossier__t {
    aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden;
    background: var(--deep-soft); border: 1px solid var(--line);
}
.dossier__t img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dossier__k {
    margin: 1.05rem 0 .45rem; font-size: .615rem; font-weight: 700; letter-spacing: .17em;
    text-transform: uppercase; color: var(--ink-55);
    display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap;
}
.dossier__k b { color: #0E8055; font-weight: 700; letter-spacing: .17em; }
.dossier h3 { font-size: 1.1rem; font-weight: 600; letter-spacing: -.024em; line-height: 1.3; }
.dossier h3 a { color: inherit; text-decoration: none; }
.dossier h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dossier p { margin: .55rem 0 0; font-size: .875rem; line-height: 1.55; color: var(--ink-55); }

/* The moat chips. A flagship's claim to being one is in this row, so it is the
   one place on a paper page that gets a filled mark. */
.moats { display: flex; flex-wrap: wrap; gap: .38rem; margin-top: .85rem; }
.moat {
    font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    padding: .34rem .7rem; border-radius: 999px;
    border: 1px solid var(--line); color: var(--ink-55); white-space: nowrap;
}
.moat--live { border-color: rgba(194, 65, 12, .35); color: var(--accent); }
.dossier__r {
    margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line-soft);
    font-size: .78rem; line-height: 1.5; color: var(--ink-55);
}
.dossier__r b { color: var(--ink); font-weight: 600; }

/* ---- the tier ladder -----------------------------------------------------
   Three rows, widest first, so the shape of the book is legible before any of
   the numbers in it are read. */
.ladder { margin-top: clamp(1.8rem, 3vw, 2.6rem); border-top: 1px solid var(--line); }
.rung {
    display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto;
    gap: .5rem 1.6rem; align-items: baseline;
    padding: 1.15rem .2rem; border-bottom: 1px solid var(--line-soft);
}
.rung__n { font-size: 1.7rem; font-weight: 300; letter-spacing: -.04em; color: var(--ink);
           font-variant-numeric: tabular-nums; }
.rung__l { display: block; font-size: .58rem; font-weight: 700; letter-spacing: .19em;
           text-transform: uppercase; color: var(--ink-55); margin-top: .1rem; }
.rung__d { font-size: .875rem; line-height: 1.55; color: var(--ink-55); }
.rung__bar { grid-column: 1 / -1; height: 2px; background: var(--line-soft); margin-top: .2rem; }
.rung__bar i { display: block; height: 100%; background: var(--accent); opacity: .5; }
.rung--active .rung__bar i { background: #0E8055; }
.rung--strategic .rung__bar i { background: var(--ink-55); opacity: .3; }

@media (max-width: 620px) {
    .rung { grid-template-columns: 5.5rem minmax(0, 1fr); gap: .4rem 1rem; }
    .rung__d { grid-column: 1 / -1; }
}

/* ---- the concentration read ---------------------------------------------- */
.conc { margin-top: 2rem; display: grid; gap: .55rem; }
.conc__r { display: grid; grid-template-columns: 11rem minmax(0,1fr) 3.2rem; gap: .9rem;
           align-items: center; font-size: .82rem; }
.conc__k { color: var(--ink-77); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conc__t { height: 6px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.conc__t i { display: block; height: 100%; background: var(--accent); opacity: .45; }
.conc__v { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-55); }
@media (max-width: 520px) { .conc__r { grid-template-columns: 7.5rem minmax(0,1fr) 2.6rem; font-size: .76rem; } }

/* ---- hero ---------------------------------------------------------------- */
[data-hero-pane][hidden] { display: none !important; }
.ihero__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.hswitch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.hswitch__b, .dens__b { font: inherit; font-size: .72rem; font-weight: 700; letter-spacing: .08em; padding: .38rem .8rem;
    background: transparent; color: var(--ink-55); border: 0; cursor: pointer; min-width: 2.2rem; }
.hswitch__b[aria-pressed="true"], .dens__b[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
html[data-dark] .hswitch__b[aria-pressed="true"], html[data-dark] .dens__b[aria-pressed="true"] { background: var(--gold); color: #0b1016; }
.ihero__k { font-size: .66rem; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; color: var(--gold); margin: 0 0 .6rem; }
.ihero__h { margin: 0; }
.ihero .d1 { overflow-wrap: anywhere; }
.ifig .figure__d { overflow-wrap: anywhere; }

/* ---- portfolio switcher: the three portfolios, always one tap away --------- */
.pswitch { position: sticky; top: var(--nav-h); z-index: 20; background: var(--paper); border-block: 1px solid var(--line); }
html[data-dark] .pswitch { background: var(--deep); }
.pswitch__in { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding-block: .55rem; flex-wrap: wrap; }
.pswitch__tabs { display: flex; gap: .35rem; flex-wrap: wrap; }
.pswitch__tab { font-size: .8rem; font-weight: 600; padding: .42rem .9rem; border-radius: 999px; border: 1px solid var(--line);
    color: var(--ink-77); text-decoration: none; white-space: nowrap; }
a.pswitch__tab:hover { border-color: var(--gold); color: var(--ink); }
.pswitch__tab.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
html[data-dark] .pswitch__tab.is-on { background: var(--gold); color: #0b1016; border-color: var(--gold); }
.dens { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; flex: 0 0 auto; }

/* ---- section heads --------------------------------------------------------- */
.ihead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 3rem; align-items: end; }
.ihead .lede { margin-top: 0; }
@media (max-width: 800px) { .ihead { grid-template-columns: minmax(0, 1fr); } }

/* ---- the asset card -------------------------------------------------------- */
.agrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1.1rem; margin-top: 1.4rem; }
html[data-density="c"] .agrid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; }
.acard { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; min-width: 0;
    transition: border-color .2s var(--ease), transform .2s var(--ease); }
.acard:hover { border-color: var(--gold); transform: translateY(-2px); }
.acard[hidden] { display: none; }
.acard__t { display: block; aspect-ratio: 1168 / 784; background: #070b14; overflow: hidden; }
.acard__t img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acard__b { padding: .8rem .9rem .9rem; display: flex; flex-direction: column; gap: .35rem; flex: 1 1 auto; min-width: 0; }
.acard__m { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin: 0; flex-wrap: wrap; }
.tpill { font-size: .56rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: .18rem .5rem; border-radius: 999px; border: 1px solid currentColor; }
.tpill--flagship { color: var(--flag); } .tpill--active { color: var(--act); } .tpill--strategic { color: var(--strat); }
.acard__s { font-size: .68rem; color: var(--ink-55); text-align: right; }
.acard__s.is-live { color: var(--act); font-weight: 600; }
.acard__n { margin: 0; font-size: 1.02rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; overflow-wrap: anywhere; }
.acard__n a { color: var(--ink); text-decoration: none; }
.acard__n a:hover { text-decoration: underline; text-underline-offset: 3px; }
.acard__c { margin: 0; font-size: .7rem; letter-spacing: .04em; color: var(--gold); }
.acard__d { margin: 0; font-size: .84rem; line-height: 1.5; color: var(--ink-77); }
.ichips { display: flex; flex-wrap: wrap; gap: .3rem; margin: .15rem 0 0; }
.ichip { font-size: .64rem; padding: .12rem .45rem; border-radius: 999px; background: var(--gold-soft); color: var(--ink-77); }
.acard__go { margin-top: auto; align-self: flex-start; padding-top: .3rem; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); text-decoration: none; }
.acard__go:hover { text-decoration: underline; text-underline-offset: 3px; }
html[data-density="c"] .acard__d, html[data-density="c"] .ichips, html[data-density="c"] .acard__c { display: none; }
html[data-density="c"] .acard__b { padding: .55rem .65rem .65rem; gap: .25rem; }
html[data-density="c"] .acard__n { font-size: .88rem; }
html[data-density="c"] .dossier p:not(.dossier__k), html[data-density="c"] .moats { display: none; }

/* ---- toolbar --------------------------------------------------------------- */
.tbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; margin-top: clamp(1.8rem, 3vw, 2.4rem); padding: .7rem; border: 1px solid var(--line); border-radius: 14px; }
.tbar__q { flex: 1 1 220px; min-width: 0; }
.tbar__q input, .tbar__s select { width: 100%; font: inherit; font-size: .85rem; padding: .5rem .8rem; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
html[data-dark] .tbar__q input, html[data-dark] .tbar__s select { background: var(--deep-soft); }
.tbar__f { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; min-width: 0; }
.tb__sep { width: 1px; height: 1.2rem; background: var(--line); margin-inline: .2rem; }
.fpill { font: inherit; font-size: .74rem; padding: .32rem .7rem; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-77); cursor: pointer; }
.fpill b { font-weight: 700; color: var(--ink-55); margin-left: .15rem; }
.fpill.is-on { border-color: var(--gold); color: var(--ink); background: var(--gold-soft); }
.tbar__s { display: flex; align-items: center; gap: .45rem; font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-55); min-width: 0; }
.tbar__s select { width: auto; max-width: 100%; text-transform: none; letter-spacing: 0; font-weight: 500; }
.tbar__n, .tbar__empty { font-size: .78rem; color: var(--ink-55); margin: .7rem 0 0; }

/* ---- extensions + cross links + valuation ------------------------------------ */
.ibook__h3 { margin-top: clamp(2rem, 4vw, 2.8rem); }
.exts { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .8rem; }
.ext { font-size: .74rem; padding: .22rem .6rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-55); }
.ext b { color: var(--ink); font-weight: 600; }
.xlinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 1.6rem; }
.xlink { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: 1.3rem 1.4rem 1.4rem; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--ink-77); background: var(--card); }
.xlink:hover { border-color: var(--gold); }
.xlink b { font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.xlink__k { font-size: .6rem; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; color: var(--gold); }
.xlink i { position: absolute; right: 1.2rem; top: 1.1rem; font-style: normal; color: var(--gold); }
.vscen { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--line); border-block: 1px solid var(--line); margin: clamp(1.8rem,3vw,2.6rem) 0; }
.vscen__c { background: var(--deep); padding: 1.4rem; }
.vscen__c p { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--ink-55); }
.vscen__k { font-size: .6rem !important; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; color: #F2B25C !important; }
.vscen__n { font-size: clamp(2rem, 4vw, 2.8rem) !important; font-weight: 200; letter-spacing: -.04em; color: #fff !important; margin: .35rem 0 .5rem !important; }
@media (max-width: 520px) { .agrid { grid-template-columns: minmax(0, 1fr); } html[data-density="c"] .agrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pswitch { position: static; } }

/* ---- labs488 second pass: size switch, charts, Dive and inquiry pop-ups ----- */
.dens { flex-wrap: nowrap; }
.dens__sep { width: 1px; align-self: stretch; background: var(--line); }
.dens__b--z { min-width: 2rem; padding-inline: .55rem; }
html[data-size="xs"] .agrid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: .6rem; }
html[data-size="s"]  .agrid { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .85rem; }
html[data-size="l"]  .agrid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 1.4rem; }
html[data-density="c"][data-size="xs"] .agrid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; }
html[data-density="c"][data-size="s"]  .agrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
html[data-density="c"][data-size="l"]  .agrid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
html[data-size="xs"] .acard__d { font-size: .76rem; }
html[data-size="xs"] .acard__n { font-size: .9rem; }
html[data-size="l"] .acard__n { font-size: 1.15rem; }
.tbar__csv { font-weight: 600; }
.icharts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 1.6rem; }
.ichart { margin: 0; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 14px; background: var(--card); min-width: 0; }
.ichart figcaption { display: flex; flex-direction: column; gap: .15rem; }
.ichart figcaption b { font-size: .95rem; color: var(--ink); }
.ichart figcaption span { font-size: .74rem; color: var(--ink-55); }
.ichart__c { position: relative; height: 230px; margin-top: .8rem; display: none; }
.ichart.is-drawn .ichart__c { display: block; }
.ichart.is-drawn .ichart__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ichart__t { list-style: none; margin: .8rem 0 0; padding: 0; font-size: .8rem; }
.ichart__t li { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding: .25rem 0; color: var(--ink-77); }
.idlg { width: min(860px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); color: var(--ink); overflow: auto; }
html[data-dark] .idlg { background: var(--deep); }
.idlg--form { width: min(520px, calc(100vw - 2rem)); }
.idlg::backdrop { background: rgba(5, 8, 14, .72); }
.idlg__bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--line); background: inherit; }
.idlg__bar .d3 { margin: .1rem 0 0; }
.idlg__acts { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.idlg__acts .btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; }
.idlg__k { margin: 0; font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.idlg__x { font: inherit; font-size: 1.6rem; line-height: 1; width: 2.4rem; height: 2.4rem; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; flex: 0 0 auto; }
.idlg__body { padding: 1.1rem 1.2rem 1.4rem; }
.idlg__img { aspect-ratio: 1168 / 784; border-radius: 12px; overflow: hidden; background: #070b14; }
.idlg__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.idlg__n { margin: 1rem 0 0; overflow-wrap: anywhere; }
.idlg__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 1.1rem 0 .8rem; }
.idlg__facts div { background: var(--card); padding: .65rem .8rem; min-width: 0; }
.idlg__facts dt { font-size: .58rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-55); }
.idlg__facts dd { margin: .2rem 0 0; font-size: .86rem; overflow-wrap: anywhere; }
.idlg__nav { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; margin: 1rem 0 0; }
.idlg--form form { display: flex; flex-direction: column; gap: .45rem; }
.idlg__l { font-size: .72rem; color: var(--ink-55); margin-top: .35rem; }
.idlg--form .btn { margin-top: .8rem; align-self: flex-start; }
.form__status.is-err { color: var(--flag); }
.form__status.is-ok { color: var(--act); }
[aria-invalid="true"] { border-color: var(--flag) !important; }
@media (max-width: 520px) {
    html[data-size="xs"] .agrid, html[data-size="s"] .agrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html[data-size="l"] .agrid { grid-template-columns: minmax(0, 1fr); }
    html[data-density="c"][data-size="xs"] .agrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    html[data-density="c"][data-size="l"] .agrid { grid-template-columns: minmax(0, 1fr); }
    .tbar .dens { order: 5; }
}