/* Aimosti redesign — the homepage showcase band (index.html → _showcase.html). Homepage only.
   The page's one committed-colour moment: a full-bleed --primary band with the real Genome OS
   renders (report/showcase.py) on white inside the .spec instrument.

   Everything here is scoped under .showcase / .is-showcase. The shell rules are a SUBSET copied
   from app-shell.css and the map rules from report.css, prefixed so they can never restyle the
   marketing page (report.css's bare .chip/.band would collide with marketing.css's). If a copied
   rule changes upstream, copy it again; tests/web/test_homepage_presence.py pins the scoping. */

/* ── the band ─────────────────────────────────────────── */
.showcase{background:var(--primary);color:var(--on-primary);padding-block:var(--space);border-block:1.5px solid var(--primary-press)}
.showcase__head{max-width:64ch}
.showcase__h{font-size:clamp(1.9rem,3.4vw,2.9rem);font-weight:700;letter-spacing:-.03em;color:var(--on-primary);text-wrap:balance}
/* White at .82 on --primary: over the 4.5:1 floor (app-shell.css pins .78 at 5.03:1 on this blue). */
.showcase__lede{margin-top:1rem;font-size:1.1rem;line-height:1.5;color:oklch(1 0 0/.82);max-width:var(--measure)}
.showcase__lede a{color:var(--on-primary);text-decoration:underline;text-underline-offset:3px}
.showcase__lede a:hover{text-decoration-thickness:2px}

/* ── the instrument ───────────────────────────────────── */
/* color resets to ink: the band is white-on-blue, the instrument is the product on white. */
.showcase__inst{color:var(--ink);margin-top:2.2rem;box-shadow:0 34px 70px -32px oklch(0.15 0.05 252/.75),0 1px 0 var(--paper-line)}
.showcase__tabs{display:flex;gap:.25rem;padding:.45rem .6rem 0;border-bottom:1.5px solid var(--paper-line);background:var(--bg);overflow-x:auto;scrollbar-width:none}
.showcase__tabs::-webkit-scrollbar{display:none}
.showcase__tabs [role=tab]{appearance:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1.5px;background:transparent;cursor:pointer;font:600 .86rem var(--font-sans);color:var(--ink-soft);padding:.55rem .85rem .65rem;white-space:nowrap;border-radius:4px 4px 0 0;transition:color .15s,background .15s}
.showcase__tabs [role=tab]:hover{color:var(--ink);background:var(--tint)}
.showcase__tabs [role=tab][aria-selected=true]{color:var(--primary);border-bottom-color:var(--primary)}
.showcase__tabs [role=tab]:focus-visible{outline:2.5px solid var(--signal);outline-offset:-3px}
.showcase__body{display:grid;grid-template-columns:200px minmax(0,1fr);height:560px;background:var(--tint);overflow:hidden;text-align:left}
.showcase__rail{border-right:1px solid var(--line);background:var(--bg);padding:.8rem .5rem;display:flex;flex-direction:column;gap:.15rem;overflow:hidden}
.showcase__stage{min-width:0;height:100%;overflow:hidden;position:relative}
/* The panel is cropped at the stage's height, as a product shot is; the fade says so. */
.showcase__stage::after{content:"";position:absolute;inset:auto 0 0 0;height:64px;background:linear-gradient(to bottom,oklch(0.975 0.007 250/0),var(--tint));pointer-events:none}
.showcase__panel{padding:1.2rem 1.4rem 0;height:100%;overflow:hidden;box-sizing:border-box}
.showcase__panel[hidden]{display:none}
.showcase__panel:focus-visible{outline:2.5px solid var(--signal);outline-offset:-3px}
.showcase__foot{margin:0;padding:.6rem .85rem;border-top:1.5px solid var(--paper-line);background:var(--bg);display:flex}
.showcase__foot .spec__file{margin-left:0;white-space:normal;line-height:1.5}
.showcase__loading{font:500 .8rem var(--font-mono);color:var(--ink-faint);padding:1.4rem 0;margin:0}
.showcase__map{min-height:120px}
/* Ancestry: the map beside its bars, so the ranges the subtitle promises are in the crop. */
.showcase__anc{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:1.2rem;align-items:start}

/* ── the rail (inert spans; the real shell's look) ────── */
.is-showcase .gos-nav{display:flex;align-items:center;gap:.6rem;padding:.44rem .55rem;border-radius:var(--radius);color:var(--ink-soft);font-size:.86rem;font-weight:500;line-height:1.25}
.is-showcase .gos-nav.is-active{background:var(--primary-wash);color:var(--primary-press);font-weight:600;box-shadow:inset 2px 0 0 var(--primary)}
.is-showcase .gos-nav__badge{margin-left:auto;font-family:var(--font-mono);font-size:.68rem;background:var(--tint);border:1px solid var(--line);color:var(--ink-soft);border-radius:20px;padding:.02rem .4rem}
.is-showcase .gos-nav.is-active .gos-nav__badge{background:var(--bg);border-color:var(--primary-wash)}

/* ── the Overview cockpit (subset of app-shell.css) ───── */
.is-showcase .gos-hrow{display:flex;align-items:baseline;gap:.7rem;margin-bottom:1rem}
.is-showcase .gos-hrow h3{font-size:1.35rem;font-weight:700;letter-spacing:-.01em;margin:0}
.is-showcase .gos-sub{font-size:.85rem;color:var(--ink-faint)}
.is-showcase .gos-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.85rem;margin-bottom:1.5rem}
.is-showcase .gos-kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1rem 1.1rem;position:relative;overflow:hidden}
.is-showcase .gos-kpi__n{font-family:var(--font-mono);font-size:2rem;font-weight:600;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.is-showcase .gos-kpi__l{font-size:.82rem;color:var(--ink-soft);margin-top:.35rem}
.is-showcase .gos-kpi--attention .gos-kpi__n{color:var(--attention)}
.is-showcase .gos-kpi--update{background:linear-gradient(180deg,var(--attention-wash),var(--panel))}
.is-showcase .gos-kpi--update .gos-kpi__n{color:var(--attention)}
.is-showcase .gos-grid-label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;margin:.2rem 0 .7rem}
.is-showcase .gos-domains{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem;margin-bottom:1.5rem}
.is-showcase .gos-dcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.05rem 1.1rem;display:flex;flex-direction:column;gap:.6rem;text-decoration:none;color:inherit}
.is-showcase .gos-dcard__top{display:flex;align-items:center;gap:.55rem}
.is-showcase .gos-dcard__ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:var(--tint);color:var(--primary)}
.is-showcase .gos-dcard__ic .gos-ic{width:17px;height:17px}
.is-showcase .gos-dcard__name{font-weight:600;font-size:.95rem}
.is-showcase .gos-dcard__cnt{margin-left:auto;font-family:var(--font-mono);font-size:.72rem;color:var(--ink-faint)}
.is-showcase .gos-dcard__lead{font-size:.9rem;color:var(--ink);display:flex;align-items:center;gap:.45rem}
.is-showcase .gos-dcard__meta{font-size:.82rem;color:var(--ink-soft)}
.is-showcase .gos-dcard__foot{display:flex;align-items:center;gap:.5rem;margin-top:auto;padding-top:.3rem;flex-wrap:wrap}
.is-showcase .gos-open{margin-left:auto;font-size:.82rem;color:var(--primary);font-weight:600}
.is-showcase .gos-chip{font-size:.68rem;font-weight:600;letter-spacing:.02em;border-radius:20px;padding:.08rem .5rem;border:1px solid transparent;white-space:nowrap}
.is-showcase .gos-chip--established,.is-showcase .gos-chip--well-supported{background:var(--primary-wash);color:var(--primary-press)}
.is-showcase .gos-chip--emerging{background:var(--signal-wash);color:var(--signal-ink)}
.is-showcase .gos-sev{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
.is-showcase .gos-sev--attention{background:var(--attention)}
.is-showcase .gos-sev--watch{background:var(--watch)}
.is-showcase .gos-sev--ok{background:var(--ok)}
.is-showcase .gos-sev--neutral{background:var(--ink-faint)}
.is-showcase .gos-dcard.is-walled{background:var(--signal-wash);border-color:oklch(0.86 0.05 70)}
.is-showcase .gos-dcard.is-walled .gos-dcard__ic{background:var(--bg);color:var(--signal-ink)}
.is-showcase .gos-dcard.is-walled .gos-dcard__name,.is-showcase .gos-dcard.is-walled .gos-open{color:var(--signal-ink)}
/* Not a product shot's business: the upload affordance, the print link, the search box, the
   subscription block, the ask bar. All exist in the real shell; none belong in a cropped preview. */
.is-showcase .gos-newx,.is-showcase .gos-doc-export,.is-showcase .gos-medsearch,.is-showcase .gos-upsell,.is-showcase .gos-askbar,.is-showcase .gos-teach{display:none}

/* ── the Medications page (subset of app-shell.css) ───── */
.is-showcase .gos-title{display:flex;align-items:center;gap:.7rem;margin-bottom:.25rem}
.is-showcase .gos-title__ic{width:34px;height:34px;border-radius:9px;background:var(--tint);display:grid;place-items:center;color:var(--primary)}
.is-showcase .gos-title__ic .gos-ic{width:20px;height:20px}
.is-showcase .gos-title h3{font-size:1.4rem;font-weight:700;letter-spacing:-.01em;margin:0}
.is-showcase .gos-deep{margin-left:.2rem;font-size:.68rem;font-weight:600;background:oklch(0.95 0.02 300);color:oklch(0.45 0.14 300);border-radius:20px;padding:.1rem .55rem}
.is-showcase .gos-subtitle{color:var(--ink-faint);font-size:.88rem;margin:0 0 1.2rem}
.is-showcase .gos-legend{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin-bottom:.4rem;font-size:.76rem;color:var(--ink-soft)}
.is-showcase .gos-legend__i{display:inline-flex;align-items:center;gap:.4rem}
.is-showcase .gos-sect-label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;margin:1.2rem 0 .7rem}
.is-showcase .gos-caveat{color:var(--ink-soft);font-size:.88rem;line-height:1.5;max-width:var(--measure);margin:-.2rem 0 .9rem;padding-left:.7rem;border-left:2px solid var(--line)}
.is-showcase .gos-drugs{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.is-showcase .gos-drow{display:grid;grid-template-columns:1.1fr 1.4fr auto;gap:1rem;align-items:center;padding:.85rem 1.1rem;border-bottom:1px solid var(--line)}
.is-showcase .gos-drow:last-child{border-bottom:none}
.is-showcase .gos-drow__drug{font-weight:600;font-size:.95rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.is-showcase .gos-drow__guid{font-size:.86rem;color:var(--ink-soft)}
.is-showcase .gos-drow__via{text-align:right;font-size:.78rem;color:var(--ink-faint)}
.is-showcase .gos-gene{font-family:var(--font-mono);font-weight:600;color:var(--ink-soft);background:var(--tint);border:1px solid var(--line);border-radius:4px;padding:.02rem .35rem}
.is-showcase .gos-drow--more{display:block;text-align:center;color:var(--ink-faint);font-size:.82rem;padding:.7rem}
.is-showcase .gos-genes{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.is-showcase .gos-gcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:.85rem .95rem}
.is-showcase .gos-gcard.is-muted{opacity:.6}
.is-showcase .gos-gcard__h{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}
.is-showcase .gos-gcard__gn{font-family:var(--font-mono);font-weight:600;font-size:.92rem}
.is-showcase .gos-gcard__dip{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-soft)}
.is-showcase .gos-gcard__status{font-size:.68rem;font-weight:600;color:var(--ink-faint)}
.is-showcase .gos-ph{margin-left:auto;font-size:.72rem;font-weight:600;border-radius:20px;padding:.05rem .45rem}
.is-showcase .gos-ph--attention{background:var(--attention-wash);color:var(--attention)}
.is-showcase .gos-ph--watch{background:var(--signal-wash);color:var(--signal-ink)}
.is-showcase .gos-ph--ok{background:oklch(0.96 0.04 150);color:var(--ok)}
.is-showcase .gos-ph--muted{background:var(--tint);color:var(--ink-faint)}
.is-showcase .gos-drow__status{margin-left:.15rem;font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;border-radius:20px;padding:.05rem .45rem}
.is-showcase .gos-drow__status--attention{background:var(--attention-wash);color:var(--attention)}
.is-showcase .gos-drow__status--watch{background:var(--signal-wash);color:var(--signal-ink)}
.is-showcase .gos-drow__status--ok{background:oklch(0.96 0.04 150);color:var(--ok)}
.is-showcase .gos-drow__status--muted{background:var(--tint);color:var(--ink-faint)}
/* The voice-rule banner the real Medications page opens with (pgx_safety_banner): kept, compact. */
.is-showcase .pgx-safety{font-size:.8rem;line-height:1.45;color:var(--ink-soft);background:var(--primary-wash);border:1px solid var(--line);border-radius:var(--radius);padding:.6rem .8rem;margin:0 0 .9rem;max-width:var(--measure)}
.is-showcase .pgx-safety strong{color:var(--ink)}
.is-showcase .gos-state{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--ok);border-radius:var(--radius-lg);padding:1rem 1.2rem;margin-bottom:1.4rem;max-width:var(--measure)}
.is-showcase .gos-state__h{font-size:1rem;margin:0 0 .4rem;color:var(--ink)}
.is-showcase .gos-state__b{font-size:.88rem;line-height:1.55;color:var(--ink-soft);margin:0}

/* ── the ancestry map (subset of report.css, same values) ── */
.is-showcase .anc{--map-land:oklch(0.955 0.008 250);--map-water:oklch(0.90 0.035 235);--ease:cubic-bezier(.22,1,.36,1)}
.is-showcase .anc-map{margin:0 0 1rem;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--tint)}
.is-showcase .anc-map svg{display:block;width:100%;height:auto}
.is-showcase .anc-map__land{fill:var(--map-land);stroke:none}
.is-showcase .anc-map__lakes{fill:var(--map-water);stroke:none}
.is-showcase .anc-map__rivers{fill:none;stroke:var(--map-water);stroke-width:.5;vector-effect:non-scaling-stroke}
.is-showcase .anc-map__borders{fill:none;stroke:var(--line-2);stroke-width:.4;stroke-dasharray:2 2;vector-effect:non-scaling-stroke}
.is-showcase .anc-zone__level{fill:var(--c);stroke:none}
.is-showcase .anc-zone__dot{fill:var(--c);stroke:var(--bg);stroke-width:1.2;vector-effect:non-scaling-stroke}
.is-showcase .anc-zone__label{font-family:var(--font-sans);font-weight:600;fill:var(--ink);paint-order:stroke;stroke:var(--bg);stroke-linejoin:round;stroke-opacity:.85;pointer-events:none}
.is-showcase .anc-map__caption{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;padding:.7rem 1.1rem;border-top:1px solid var(--line);background:var(--panel);font-size:.74rem;line-height:1.45;color:var(--ink-faint)}
.is-showcase .anc-map__caption span{display:flex;align-items:center;gap:.4rem}
.is-showcase .anc-map__caption i{width:14px;height:9px;border-radius:2px;flex:none;border:.5px solid var(--c,var(--primary))}
.is-showcase .anc-map__caption i.is-bright{background:color-mix(in oklab,var(--c,var(--primary)) 50%,transparent)}
.is-showcase .anc-map__caption i.is-soft{background:color-mix(in oklab,var(--c,var(--primary)) 16%,transparent)}
.is-showcase .anc-map__caption i.is-dot{border-radius:50%;background:var(--c,var(--primary));border-color:var(--c,var(--primary))}
.is-showcase .anc-rows{list-style:none;margin:0;padding:0}
.is-showcase .anc-row{display:grid;grid-template-columns:minmax(0,150px) 1fr 62px 82px;align-items:center;gap:.7rem;padding:.34rem .35rem;margin:0 -.35rem;border-radius:var(--radius);font-size:.9rem}
.is-showcase .anc-row__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.is-showcase .anc-row__track{position:relative;height:9px;border-radius:5px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.is-showcase .anc-row__ci{position:absolute;top:0;height:100%;border-radius:5px;background:var(--primary);opacity:.22}
.is-showcase .anc-row__pt{position:absolute;top:-2px;width:3px;height:13px;border-radius:2px;background:var(--primary);transform:translateX(-50%)}
.is-showcase .anc-row__pct{text-align:right;font:600 .86rem var(--font-mono)}
.is-showcase .anc-row__pct i{font-style:normal;opacity:.45;font-size:.8em;margin-left:1px}
.is-showcase .anc-row__range{text-align:right;font:500 .75rem var(--font-mono);color:var(--ink-faint)}

/* ── the Deep Read strip (this band's own) ────────────── */
.is-showcase .sc-genes{list-style:none;margin:0 0 .8rem;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.35rem 1rem}
.is-showcase .sc-gene{display:grid;grid-template-columns:7.5ch 1fr 4.5ch;align-items:center;gap:.5rem;font:500 .78rem var(--font-mono);color:var(--ink-soft)}
.is-showcase .sc-gene b{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.is-showcase .sc-gene span{text-align:right}
.is-showcase .sc-gene small{font-size:.8em;opacity:.6}
.is-showcase .sc-gene i{display:block;height:8px;border-radius:4px;background:var(--line);position:relative;overflow:hidden}
.is-showcase .sc-gene i::after{content:"";position:absolute;inset:0;width:var(--w);border-radius:4px;background:var(--primary);transform-origin:left}
.is-showcase .sc-gene--indeterminate i::after{background:var(--signal)}
.is-showcase .sc-gene--low_coverage i::after{background:var(--attention)}
.is-showcase .sc-legend{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;margin:0 0 .9rem;font-size:.78rem;color:var(--ink-soft)}
.is-showcase .sc-legend span{display:inline-flex;align-items:center;gap:.4rem}
.is-showcase .sc-k{width:12px;height:8px;border-radius:4px;background:var(--primary);display:inline-block}
.is-showcase .sc-k--indeterminate{background:var(--signal)}
.is-showcase .sc-k--low_coverage{background:var(--attention)}
.is-showcase .sc-row{font-size:.88rem;color:var(--ink-soft);margin:0 0 .45rem;line-height:1.5}
.is-showcase .sc-row b{color:var(--ink);font-family:var(--font-mono);font-weight:600}

/* ── motion: once, on first view; paint only ──────────── */
.showcase__inst.is-seen .sc-gene i::after{animation:sc-fill .6s cubic-bezier(.16,1,.3,1) both}
.showcase__panel.is-entering{animation:sc-panel .32s cubic-bezier(.16,1,.3,1) both}
/* The map "develops": levels fade in outermost first. fill-opacity (the baked strength) is a
   separate property from opacity, so this fades each level up to its own value. <title> is the
   zone's first child, so the outermost level is :nth-child(2). */
.is-showcase .anc-zone__level{animation:sc-level .5s cubic-bezier(.16,1,.3,1) both}
.is-showcase .anc-zone__level:nth-child(3){animation-delay:80ms}
.is-showcase .anc-zone__level:nth-child(4){animation-delay:160ms}
.is-showcase .anc-zone__level:nth-child(5){animation-delay:240ms}
.is-showcase .anc-zone__level:nth-child(6){animation-delay:320ms}
.is-showcase .anc-zone__level:nth-child(7){animation-delay:400ms}
.is-showcase .anc-zone__level:nth-child(8){animation-delay:480ms}
.is-showcase .anc-zone__level:nth-child(9){animation-delay:560ms}
.is-showcase .anc-zone__level:nth-child(n+10){animation-delay:640ms}
.is-showcase .anc-zone__dot,.is-showcase .anc-zone__label{animation:sc-level .4s ease-out .7s both}
@keyframes sc-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sc-level{from{opacity:0}to{opacity:1}}
@keyframes sc-panel{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.showcase__inst.is-seen .sc-gene i::after,.showcase__panel.is-entering,.is-showcase .anc-zone__level,.is-showcase .anc-zone__dot,.is-showcase .anc-zone__label{animation:none}}

/* ── the CTAs on blue ─────────────────────────────────── */
.btn--onblue{background:transparent;color:var(--on-primary);border-color:oklch(1 0 0/.6)}
.btn--onblue:hover{background:var(--on-primary);color:var(--primary);border-color:var(--on-primary)}
.btn--onblue:focus-visible{outline-color:var(--on-primary)}
.showcase__cta{margin-top:1.6rem;justify-content:center}

/* ── responsive ───────────────────────────────────────── */
@media (min-width:901px) and (max-width:1180px){.is-showcase .gos-domains{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){
.showcase__body{grid-template-columns:1fr;height:auto;max-height:560px}
.showcase__rail{display:none}
.showcase__panel{padding:1rem 1rem 0}
.showcase__anc{grid-template-columns:1fr}
.is-showcase .gos-kpis{grid-template-columns:repeat(2,1fr)}
.is-showcase .gos-domains{grid-template-columns:1fr}
.is-showcase .gos-drow{grid-template-columns:1fr;gap:.3rem}
.is-showcase .gos-drow__via{text-align:left}
.is-showcase .gos-genes{grid-template-columns:1fr}
}
@media (max-width:560px){
.is-showcase .anc-row{grid-template-columns:minmax(0,96px) 1fr 52px 72px;gap:.45rem;font-size:.82rem}
.is-showcase .sc-genes{grid-template-columns:1fr 1fr;gap:.3rem .6rem}
.is-showcase .sc-gene{grid-template-columns:7.5ch 1fr 4ch;font-size:.72rem}
}