/* Premium visual standard — lifted design language:
   Interface demo (~/workspace/ts-spaces/evidra-platform-interface-demo):
     emerald brand #0b6b57 / dark #084c3e / soft #e2f1ec, amber accent
     #d97706 / soft #fdf0dd, line #dce5e1, layered shadow, radius 14px,
     KPI/stat cards, pill badges, amber focus ring.
   Netlify showcase (~/workspace/netlify-site):
     bright base #fbfbfd, surface-2 #f5f5f7, ink #1d1d1f, green accent
     #0b7a37 -> bright #17a34a gradient text, radius 22px panels,
     shadow 0 10px 34px rgba(20,40,26,.07), pill buttons (980px),
     frosted sticky bar (saturate(180%) blur(20px)), clamp hero type.
   Bright base throughout — never a dark theme. */
:root {
  --ink: #1d1d1f; --ink-2: #424245; --muted: #6e6e73;
  --line: #dce5e1; --line-strong: #d2d2d7;
  --bg: #fbfbfd; --bg-tint: #f4f6f5; --surface-2: #f5f5f7;
  --card: #ffffff;
  --brand: #0b6b57; --brand-dark: #084c3e; --brand-soft: #e2f1ec;
  --accent: #0b7a37; --accent-strong: #095c2a; --accent-bright: #17a34a;
  --accent-soft: #e9f6ee;
  --amber: #d97706; --amber-dark: #b45309; --amber-soft: #fdf0dd;
  --amber-line: #e8c07a;
  --ok: #15803d; --ok-soft: #e3f3e6;
  --warn: #b45309;
  --bad: #b91c1c; --bad-soft: #fbe7e7;
  --blue: #0b5cad; --blue-soft: #e3ecf7;
  /* multi-colour data system (results only — chrome stays brand):
     red leans pathogenic, amber borderline, green leans benign,
     slate = no answer; one colour per evidence source. */
  --slate: #64748b; --slate-dark: #475569; --slate-mid: #94a3b8;
  --slate-soft: #eef2f6;
  --src-clinvar: #2563eb; --src-clinvar-soft: #dbeafe;
  --src-am: #7c3aed; --src-am-soft: #ede9fe;
  --src-prior: #0d9488; --src-prior-soft: #ccfbf1;
  --src-live: #db2777; --src-live-soft: #fce7f3;
  --shadow: 0 10px 34px rgba(20,40,26,.07), 0 2px 8px rgba(20,40,26,.05);
  --shadow-lg: 0 18px 50px rgba(16,32,28,.10), 0 2px 8px rgba(16,32,28,.06);
  --radius: 14px; --radius-lg: 22px;
  --grad-brand: linear-gradient(135deg, #0b6b57 0%, #0b7a37 55%, #17a34a 100%);
  --grad-hero: linear-gradient(180deg, #ffffff 0%, #eef7f2 58%, #fdf6e9 130%);
  --grad-band: linear-gradient(120deg, #e2f1ec 0%, #eef6ff 55%, #fdf0dd 100%);
}
* { box-sizing: border-box; }
body { margin: 0;
       font-family: "Manrope", -apple-system, BlinkMacSystemFont, "SF Pro Text",
       "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
       color: var(--ink); background: var(--bg);
       background-image: linear-gradient(180deg, #fbfbfd 0%, #f4f6f5 420px, #fbfbfd 100%);
       -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.wrap { max-width: 1024px; margin: 0 auto; padding: 0 24px; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 6px; }
code, .mono { font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace,
              SFMono-Regular, Menlo, monospace; }

/* ── top band: bright gradient strip with premium metric chips ──── */
.top-band { background: var(--grad-band); color: var(--ink);
            padding: 22px 0 18px; border-bottom: 1px solid var(--line); }
.top-brand { margin: 0 0 4px; font-size: 15px; font-weight: 800;
             letter-spacing: .02em; color: var(--brand-dark); }
.top-brand-row { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; }
.top-brand-row .top-brand { margin: 0; }
.brand-logo { width: 44px; height: 44px; flex: none; background: #fff;
             border: 1px solid var(--line); border-radius: 11px;
             box-shadow: 0 2px 8px rgba(20,40,26,.08); }
.top-desc { margin: 0 0 14px; color: var(--ink-2); font-size: 14.5px;
            max-width: 760px; }
.top-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.chip { font-size: 12.5px; font-weight: 700; padding: 8px 13px;
        border: 1px solid var(--line); border-radius: 999px;
        background: var(--card); color: var(--ink);
        box-shadow: 0 2px 8px rgba(20,40,26,.05); white-space: nowrap; }
.chip::before { content: ""; display: inline-block; width: 7px; height: 7px;
        border-radius: 50%; background: var(--grad-brand); margin-right: 7px;
        vertical-align: 1px; }
.top-platform { margin: 0; color: var(--muted); font-size: 13px; }
.top-platform a { color: var(--brand); }

/* ── quick nav: frosted sticky bar (showcase language) ──────────── */
.quick-nav { background: rgba(251,251,253,.82);
             -webkit-backdrop-filter: saturate(180%) blur(20px);
             backdrop-filter: saturate(180%) blur(20px);
             border-bottom: 1px solid var(--line);
             padding: 10px 0; font-size: 14px;
             position: sticky; top: 0; z-index: 50; }
.quick-nav .wrap { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.quick-nav a { color: var(--brand); text-decoration: none; font-weight: 700; }
.quick-nav a:hover { color: var(--brand-dark); text-decoration: underline; }

/* ── front-door hero (first paint) ───────────────────────────────── */
.front-hero { padding: 44px 0 6px; text-align: left; }
.front-eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .02em;
                 color: var(--accent); margin: 0 0 10px; }
.front-title { font-size: clamp(34px, 5.4vw, 54px); line-height: 1.06;
               letter-spacing: -.03em; font-weight: 800; margin: 0; max-width: 820px; }
.front-title .grad { background: linear-gradient(92deg, var(--accent) 10%, var(--accent-bright) 90%);
               -webkit-background-clip: text; background-clip: text;
               -webkit-text-fill-color: transparent; color: transparent; }
.front-lede { font-size: clamp(17px, 2.4vw, 20px); line-height: 1.5;
              color: var(--ink-2); margin: 16px 0 0; max-width: 700px; }
.front-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
              margin: 28px 0 0; }
@media (max-width: 760px) { .front-flow { grid-template-columns: 1fr; } }
.flow-step { background: var(--card); border: 1px solid var(--line);
             border-radius: 18px; box-shadow: var(--shadow); padding: 20px; }
.flow-step .n { width: 30px; height: 30px; border-radius: 50%;
             background: var(--brand-soft); color: var(--brand);
             display: grid; place-items: center; font-weight: 800;
             font-size: 14px; margin-bottom: 12px; }
.flow-step h3 { margin: 0 0 6px; font-size: 16.5px; }
.flow-step p { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.front-products { display: grid; grid-template-columns: repeat(3, 1fr);
             gap: 16px; margin: 16px 0 0; }
@media (max-width: 760px) { .front-products { grid-template-columns: 1fr; } }
.product-card { background: var(--card); border: 1px solid var(--line);
             border-radius: var(--radius-lg); box-shadow: var(--shadow);
             padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.product-card h3 { margin: 0; font-size: 17px; }
.product-card p { margin: 0; color: var(--ink-2); font-size: 14.5px; flex: 1; }
.product-card .product-metric { font-family: "JetBrains Mono", ui-monospace, monospace;
             font-size: 13px; background: var(--surface-2);
             border: 1px solid var(--line); border-radius: 12px;
             padding: 10px 12px; color: var(--ink); }
.product-card a { font-weight: 700; font-size: 14.5px; color: var(--brand);
             text-decoration: none; }
.product-card a:hover { text-decoration: underline; }

/* ── site header + tabs ──────────────────────────────────────────── */
.site-header { background: var(--card); color: var(--ink);
               padding: 26px 0 0; border-bottom: 1px solid var(--line); }
.site-header h1 { margin: 0 0 4px; font-size: 28px; letter-spacing: -.02em; }
.tagline { margin: 0 0 20px; color: var(--ink-2); max-width: 640px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tab { background: transparent; border: 0; color: var(--ink-2); font-size: 15px;
       font-weight: 600; padding: 10px 18px; cursor: pointer;
       border-radius: 999px 999px 0 0; }
.tab:hover { color: var(--brand-dark); background: var(--brand-soft); }
.tab.active { background: var(--bg-tint); color: var(--ink); font-weight: 700;
       box-shadow: inset 0 -3px 0 var(--brand); }
main.wrap { padding-top: 24px; padding-bottom: 40px; }
.view { display: none; }
.view.active { display: block; }

/* ── cards, forms, buttons ───────────────────────────────────────── */
.card { background: var(--card); border: 1px solid var(--line);
        border-radius: var(--radius-lg); box-shadow: var(--shadow);
        padding: 24px 26px; margin-bottom: 20px; }
.card h2 { margin-top: 6px; letter-spacing: -.02em; }
.card h3 { margin-top: 22px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.error { color: var(--bad); }
.form-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: end;
            margin: 16px 0 6px; }
.form-row label { display: flex; flex-direction: column; gap: 5px;
                  font-size: 13px; font-weight: 700; color: var(--ink-2); }
.form-row input { font-size: 16px; padding: 11px 13px; border: 1px solid var(--line);
                  border-radius: 10px; min-width: 190px; background: var(--card); }
.form-row input:focus, .batch-label textarea:focus {
                  border-color: var(--brand); outline: none;
                  box-shadow: 0 0 0 3px var(--brand-soft); }
button.primary { background: var(--grad-brand); color: #fff; border: 0;
                 padding: 11px 22px; font-size: 15px; font-weight: 700;
                 border-radius: 980px; cursor: pointer;
                 box-shadow: 0 6px 18px rgba(11,107,87,.22); }
button.primary:hover { background: var(--brand-dark); }
button.secondary { background: #fff; color: var(--brand);
                   border: 1px solid var(--brand); padding: 10px 18px;
                   font-size: 14px; font-weight: 700; border-radius: 980px;
                   cursor: pointer; }
button.secondary:hover { background: var(--brand-soft); }
.suggestions { border: 1px solid var(--line); border-radius: var(--radius);
               box-shadow: var(--shadow); overflow: hidden; margin-top: 8px; }
.suggestion { display: flex; justify-content: space-between; gap: 12px;
              width: 100%; text-align: left; background: #fff; border: 0;
              border-bottom: 1px solid var(--line); padding: 10px 14px;
              cursor: pointer; font-size: 14px; }
.suggestion:last-child { border-bottom: 0; }
.suggestion:hover { background: var(--brand-soft); }
.s-tag { font-size: 12px; font-weight: 700; white-space: nowrap; }
.s-tag.ok { color: var(--ok); }
.s-tag.decline { color: var(--slate-dark); }
.s-tag.borderline { color: var(--amber-dark); }
.result-head { display: flex; justify-content: space-between; gap: 12px;
               align-items: start; }
.badge { font-size: 12px; font-weight: 800; padding: 4px 10px;
         border-radius: 999px; white-space: nowrap; }
.badge-summary { background: var(--ok-soft); color: var(--ok); }
.badge-decline { background: var(--slate-soft); color: var(--slate-dark); }
.badge-live { background: var(--src-live-soft); color: var(--src-live); }
.badge-notrun { background: #eceff3; color: var(--muted); }
.badge-borderline { background: var(--amber-soft); color: var(--amber-dark);
         border: 1px solid var(--amber-line); }
.batch-label input[type="file"] { font-size: 14px; font-weight: 400; }
.batch-progress { width: 100%; height: 14px; margin-top: 10px; appearance: none; }
.batch-progress::-webkit-progress-bar { background: var(--surface-2);
        border: 1px solid var(--line); border-radius: 999px; }
.batch-progress::-webkit-progress-value { background: var(--grad-brand);
        border-radius: 999px; }
.batch-progress::-moz-progress-bar { background: var(--brand); border-radius: 999px; }
.batch-table td, .batch-table th { font-size: 13.5px; }
.batch-label { display: flex; flex-direction: column; gap: 5px;
               font-size: 13px; font-weight: 700; color: var(--ink-2);
               margin-top: 14px; }
.batch-label textarea { font-size: 15px; font-family: ui-monospace, Menlo,
                        monospace; padding: 12px 13px; border: 1px solid
                        var(--line); border-radius: 12px; resize: vertical;
                        background: var(--card); }
#batch-out details .card { margin: 12px 0 4px; }
.prob strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.evidence li { margin: 5px 0; font-family: ui-monospace, Menlo, monospace;
               font-size: 13.5px; word-break: break-word; }
details pre { background: var(--surface-2); color: var(--ink); padding: 14px;
              border: 1px solid var(--line);
              border-radius: 12px; overflow-x: auto; font-size: 13px; }
.actions { margin-top: 16px; }
.synthesis { border-left: 4px solid var(--brand); background: var(--brand-soft);
             padding: 12px 16px; margin-top: 18px; border-radius: 0 12px 12px 0; }
.sources { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .sources { grid-template-columns: 1fr; } }
.source-card { border: 1px solid var(--line); border-top: 3px solid var(--src-live);
              border-radius: var(--radius);
              box-shadow: var(--shadow); padding: 14px 16px; background: var(--card); }
.source-card h3 { margin-top: 0; }
.record { border-bottom: 1px solid var(--line); padding: 8px 0; }
.record:last-child { border-bottom: 0; }
.record a { color: var(--brand); }
.callout { background: var(--amber-soft); border: 1px solid var(--amber-line);
           color: #5c4a00; border-radius: var(--radius-lg);
           box-shadow: var(--shadow); padding: 16px 20px; margin-bottom: 20px; }
table { border-collapse: collapse; width: 100%; margin: 12px 0; }
th, td { border: 1px solid var(--line); padding: 7px 10px; text-align: left;
         font-size: 14px; }
th { background: var(--surface-2); }
tr.final td { background: var(--ok-soft); }
td.bad, td.bad strong { color: var(--bad); }
.stats li { margin: 6px 0; }
.site-footer { border-top: 1px solid var(--line-strong); padding: 18px 0 26px;
               color: var(--muted); font-size: 14px; }
.site-footer p { margin: 0 0 4px; }
.site-footer .footer-built a { color: var(--brand); text-decoration: none;
               font-weight: 600; }
.site-footer .footer-built a:hover { text-decoration: underline; }

/* ── public-demo notice (sits above the input areas) ──────────── */
.demo-notice { background: var(--surface-2); border: 1px solid var(--line);
               border-radius: 12px; padding: 9px 13px; margin: 12px 0;
               color: var(--ink-2); font-size: 13.5px; }

/* ── hero: the batch flow is the front door ─────────────────────── */
.hero-card { border: 1px solid var(--line); border-radius: 28px;
             box-shadow: var(--shadow-lg);
             padding: 30px 32px; background: var(--grad-hero); }
.hero-eyebrow { margin: 0 0 2px; font-size: 12.5px; font-weight: 800;
                letter-spacing: 0.08em; text-transform: uppercase;
                color: var(--accent); }
.hero-title { font-size: 30px; letter-spacing: -.02em; margin: 0 0 6px; }
.hero-lede { font-size: 16.5px; margin: 0 0 6px; max-width: 700px; color: var(--ink-2); }
.hero-card .batch-label textarea { min-height: 150px; font-size: 15.5px;
                                   border-color: #b9cfdf; background: #fff; }
button.hero-run { font-size: 17px; font-weight: 800;
                  padding: 14px 28px; border-radius: 980px; }
.exports-row { display: flex; flex-wrap: wrap; gap: 8px; }
a.btn-like { display: inline-block; text-decoration: none;
             border-radius: 980px; padding: 11px 20px; font-size: 15px;
             font-weight: 700; }
a.btn-like.primary { background: var(--grad-brand); color: #fff;
             box-shadow: 0 6px 18px rgba(11,107,87,.22); }
a.btn-like.secondary { background: #fff; color: var(--brand);
                        border: 1px solid var(--brand);
                        padding: 10px 18px; font-size: 14px; }

/* ── borderline (0.40–0.60): amber, plainly labelled, never bare ── */
.prob-borderline { background: var(--amber-soft); border: 1px solid var(--amber-line);
        border-radius: 12px; padding: 12px 14px; }
.borderline-badge { display: inline-block; font-size: 12px; font-weight: 800;
        letter-spacing: .04em; text-transform: uppercase;
        padding: 3px 9px; border-radius: 999px; white-space: nowrap;
        background: var(--amber); color: #fff; margin-right: 8px;
        vertical-align: 2px; }
.borderline-note { background: var(--amber-soft); border-left: 4px solid var(--amber);
        border-radius: 0 12px 12px 0; padding: 10px 14px; margin: 10px 0;
        color: #5c4a00; font-weight: 600; }
.card.result-borderline { border-color: var(--amber-line);
        box-shadow: 0 0 0 3px var(--amber-soft), var(--shadow); }
tr.borderline-row td { background: #fffaf0; }
.borderline-cell { font-weight: 700; color: var(--amber-dark); }
.band-explainer { border: 1px solid var(--line); border-radius: var(--radius-lg);
        background: var(--card); box-shadow: var(--shadow);
        padding: 18px 20px; margin: 0 0 20px; }
.band-explainer h3 { margin: 0 0 8px; font-size: 15.5px; }
.band-explainer p { margin: 0 0 10px; color: var(--ink-2); font-size: 14px; }
.band-row { display: flex; flex-wrap: wrap; gap: 8px; }
.band-chip { font-size: 13px; font-weight: 700; border-radius: 999px;
        padding: 6px 12px; border: 1px solid var(--line); background: var(--surface-2); }
.band-chip.low { background: var(--accent-soft); color: var(--accent-strong); border-color: #bfe3cb; }
.band-chip.mid { background: var(--amber-soft); color: var(--amber-dark);
        border-color: var(--amber-line); }
.band-chip.high { background: var(--bad-soft); color: var(--bad); border-color: #f0c4c4; }

/* ── visual results layer (presentation only) ─────────────────────
   Charts for the numbers the API already returns. Multi-colour by
   meaning — red leans pathogenic, amber borderline, green leans
   benign, slate no answer, one colour per evidence source —
   numbers printed on the visuals, sentence-case captions under
   each visual. */
.viz-caption { color: var(--muted); font-size: 13.5px; line-height: 1.5;
        margin: 8px 0 0; }
.viz-scope { color: var(--muted); font-size: 12.5px; margin: 12px 0 0; }
.viz-explain { background: var(--accent-soft); border: 1px solid #cfe8d6;
        border-radius: var(--radius); padding: 14px 16px; margin: 14px 0 4px; }
.viz-explain h3 { margin: 0 0 6px; font-size: 15px; color: var(--accent-strong); }
.viz-explain p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }

/* probability gauge */
.viz-gauge { border: 1px solid var(--line); border-radius: var(--radius);
        background: var(--card); padding: 16px 18px 12px; margin: 14px 0 4px; }
.viz-gauge-head { display: flex; justify-content: space-between;
        align-items: baseline; gap: 12px; margin-bottom: 12px; }
.viz-gauge-title { font-weight: 700; font-size: 14.5px; }
.viz-gauge-value { font-size: 30px; font-weight: 800; letter-spacing: -.02em;
        color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.viz-track { position: relative; height: 20px; border-radius: 999px;
        overflow: visible; background: var(--surface-2);
        border: 1px solid var(--line); }
.viz-zone { position: absolute; top: 0; height: 100%; }
.viz-zone-low { background: linear-gradient(90deg, #e9f6ee, #cdeeda); border-radius: 999px 0 0 999px; }
.viz-zone-band { background: var(--amber-soft);
        border-left: 1.5px dashed var(--amber); border-right: 1.5px dashed var(--amber); }
.viz-zone-high { background: linear-gradient(90deg, #f9dede, #f3c8c8); border-radius: 0 999px 999px 0; }
.viz-fill { position: absolute; top: 0; left: 0; height: 100%;
        border-radius: 999px 0 0 999px; opacity: .5; }
.viz-fill.fill-low { background: var(--accent); }
.viz-fill.fill-band { background: var(--amber); }
.viz-fill.fill-high { background: var(--bad); }
.prob-low strong { color: var(--accent-strong); }
.prob-high strong { color: var(--bad); }
.prob-num { font-weight: 700; }
.prob-num.band-low { color: var(--accent-strong); }
.prob-num.band-high { color: var(--bad); }
.viz-marker { position: absolute; top: -5px; width: 4px; height: 28px;
        background: var(--ink); border-radius: 2px;
        transform: translateX(-2px);
        box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(20,40,26,.3); }
.viz-axis { position: relative; height: 18px; margin-top: 5px;
        font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.viz-axis span { position: absolute; transform: translateX(-50%); }
.viz-axis span:first-child { transform: none; }
.viz-axis span:last-child { transform: translateX(-100%); }
.viz-zone-labels { display: flex; justify-content: space-between; gap: 8px;
        flex-wrap: wrap; font-size: 12.5px; font-weight: 700; margin-top: 2px; }
.viz-zl-low { color: var(--accent-strong); }
.viz-zl-band { color: var(--amber-dark); }
.viz-zl-high { color: var(--bad); }

/* evidence breakdown */
.viz-ev { display: grid; gap: 10px; margin: 10px 0 4px; }
.viz-ev-row { border: 1px solid var(--line); border-left: 4px solid var(--slate-mid);
        border-radius: var(--radius);
        background: var(--card); padding: 13px 15px; }
.viz-ev-row.src-am { border-left-color: var(--src-am); }
.viz-ev-row.src-clinvar { border-left-color: var(--src-clinvar); }
.viz-ev-row.src-prior { border-left-color: var(--src-prior); }
.viz-ev-top { display: flex; justify-content: space-between; align-items: center;
        gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.viz-ev-source { font-weight: 800; font-size: 14.5px; }
.viz-src-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
        margin-right: 7px; vertical-align: 1px; flex: none; }
.viz-dir { font-size: 12px; font-weight: 800; border-radius: 999px;
        padding: 4px 10px; border: 1px solid var(--line); white-space: nowrap; }
.viz-dir.dir-path { background: var(--bad-soft); color: var(--bad);
        border-color: #f0c4c4; }
.viz-dir.dir-benign { background: var(--accent-soft); color: var(--accent-strong);
        border-color: #bfe3cb; }
.viz-dir.dir-mid { background: var(--amber-soft);
        color: var(--amber-dark); border-color: var(--amber-line); }
.viz-dir.dir-neutral { background: var(--slate-soft);
        color: var(--slate-dark); border-color: #d7dee6; }
.viz-dir.dir-context { background: var(--src-prior-soft);
        color: #115e59; border-color: #99f6e4; }
.viz-status.src-clinvar { background: var(--src-clinvar-soft); color: #1e40af;
        border-color: #bfdbfe; }
.viz-status.src-prior { background: var(--src-prior-soft); color: #115e59;
        border-color: #99f6e4; }
.viz-mini-track { height: 12px; border-radius: 999px; background: var(--surface-2);
        border: 1px solid var(--line); overflow: hidden; margin: 2px 0 8px; }
.viz-mini-fill { height: 100%; border-radius: 999px; }
.viz-mini-fill.fill-am { background: var(--src-am); }
.viz-status { display: inline-block; font-size: 13.5px; font-weight: 700;
        border-radius: 10px; padding: 7px 11px; border: 1px solid var(--line);
        margin: 2px 0 8px; }
.viz-ev-detail { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.viz-cite { margin: 6px 0 0; color: var(--muted); font-size: 12.5px; }
.viz-cite .mono { font-size: 12px; }

/* declined state */
.viz-declined { border: 1.5px dashed var(--slate-mid); border-radius: var(--radius);
        background: #f1f5f9; padding: 16px 18px 12px; margin: 14px 0 4px; }
.viz-declined-title { margin: 0 0 12px; font-weight: 800; font-size: 16px;
        color: var(--slate-dark); }
.viz-check { display: grid; gap: 8px; }
.viz-check-row { display: flex; align-items: center; gap: 10px;
        background: var(--card); border: 1px solid var(--line);
        border-radius: 10px; padding: 9px 12px; font-size: 14px; }
.viz-check-mark { width: 22px; height: 22px; border-radius: 50%; flex: none;
        display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.viz-check-row.is-found .viz-check-mark { background: var(--slate); color: #fff; }
.viz-check-row.src-am.is-found .viz-check-mark { background: var(--src-am); }
.viz-check-row.src-clinvar.is-found .viz-check-mark { background: var(--src-clinvar); }
.viz-check-row.src-prior.is-found .viz-check-mark { background: var(--src-prior); }
.viz-check-row.is-missing .viz-check-mark { background: var(--slate-soft); color: var(--slate); }
.viz-check-row.is-missing { color: var(--muted); }
.viz-check-label { font-weight: 700; }
.viz-check-state { margin-left: auto; font-size: 13px; font-weight: 700; }
.viz-check-row.is-found .viz-check-state { color: var(--ink-2); }
.viz-check-row.is-missing .viz-check-state { color: var(--slate); }

/* batch dashboard */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-panel { border: 1px solid #e4eae6; border-radius: var(--radius);
        background: var(--card); padding: 18px 20px;
        box-shadow: 0 1px 3px rgba(20,40,26,.045); }
.dash-panel h3 { margin: 0 0 12px; font-size: 12.5px; font-weight: 800;
        letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.dash-wide { grid-column: 1 / -1; }
.viz-donut-wrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.viz-legend { display: grid; gap: 7px; flex: 1; min-width: 200px; }
.viz-legend-row { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.viz-swatch { width: 13px; height: 13px; border-radius: 4px; flex: none;
        border: 1px solid rgba(20,40,26,.12); }
.viz-legend-label { color: var(--ink-2); }
.viz-legend-num { margin-left: auto; font-weight: 800;
        font-variant-numeric: tabular-nums; }
.viz-gene-row { display: grid; grid-template-columns: 110px 1fr; gap: 6px 14px;
        align-items: center; padding: 8px 0; border-bottom: 1px solid var(--surface-2); }
.viz-gene-row:last-of-type { border-bottom: none; }
.viz-gene-name { font-weight: 800; font-size: 14.5px; }
.viz-gene-bar { display: flex; height: 14px; border-radius: 999px;
        overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); }
.viz-gene-bar .seg-sum { background: var(--accent); }
.viz-gene-bar .seg-dec { background: var(--slate); }
.viz-gene-bar .seg-oth { background: var(--src-live); }
.viz-gene-num { grid-column: 2; font-size: 13px; color: var(--ink-2);
        font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .viz-gene-row { grid-template-columns: 84px 1fr; }
        .viz-gene-num { grid-column: 1 / -1; } }

/* ── visual results layer v3 (presentation only) ──────────────────
   Genomics-native visuals over the same payload: a verdict flow,
   a genome skyline, an evidence oncoprint, a probability beeswarm,
   a radial karyogram, a waffle grid, a 3D explore view, and for a
   single variant a radial arc gauge, an evidence ring and a
   chromosome context strip. Colour discipline is unchanged —
   red leans pathogenic, amber borderline, green leans benign,
   slate (hatched where a pattern is needed) means no answer, one
   colour per evidence source — with deep saturated gradient
   fills, soft glow under key marks, numbers on every visual and
   a sentence-case caption under each. */
.viz-svg { width: 100%; height: auto; display: block; }
.viz-heat-wrap { overflow-x: auto; }
.viz-pop { animation: vizPop .55s ease both; }
@keyframes vizPop { from { opacity: 0; } to { opacity: 1; } }

/* verdict flow */
.flow-name { font-size: 13px; font-weight: 700; fill: var(--ink);
        paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.flow-num { font-size: 12px; font-weight: 700; fill: var(--muted);
        font-variant-numeric: tabular-nums;
        paint-order: stroke; stroke: #fff; stroke-width: 3px; }

/* genome skyline */
.sky-chrom { font-size: 9.5px; font-weight: 600; fill: var(--muted); }
.sky-axis { font-size: 9px; fill: var(--muted);
        font-variant-numeric: tabular-nums; }
.sky-gene { font-size: 10.5px; font-weight: 800; }

/* evidence oncoprint */
.onco-track { font-size: 13px; font-weight: 800; fill: var(--ink); }
.onco-tracksub { font-size: 10.5px; fill: var(--muted); }
.onco-kind { font-size: 10px; fill: var(--ink-2); }
.onco-gene { font-size: 10.5px; font-weight: 700; }
.onco-val { font-size: 9.5px; font-weight: 700;
        font-variant-numeric: tabular-nums; }
.onco-glyph { font-size: 11px; fill: #33414f; }
.onco-word { font-size: 8.5px; font-weight: 700; fill: #33414f; }
.heat-cv-path { fill: #f2b8b8; }
.heat-cv-benign { fill: #bfe6cd; }
.heat-cv-mid { fill: #f4d9ae; }
.heat-cv-neutral { fill: #d9e2ec; }
.heat-cv-context { fill: #b5e3da; }

/* probability beeswarm */
.bee-dot { filter: drop-shadow(0 2px 3px rgba(20,40,26,.30)); }
.strip-tick { font-size: 10.5px; fill: var(--muted);
        font-variant-numeric: tabular-nums; }
.strip-zone { font-size: 11px; font-weight: 700; }
.strip-dec { font-size: 11.5px; font-weight: 700; fill: var(--slate-dark); }

/* radial karyogram */
.viz-karyo { max-width: 430px; margin: 0 auto; }
.karyo-chrom { font-size: 9.5px; font-weight: 700; fill: var(--muted); }
.karyo-total { font-size: 27px; font-weight: 800; fill: var(--ink);
        font-variant-numeric: tabular-nums; }
.karyo-word { font-size: 11px; font-weight: 700; fill: var(--muted); }

/* waffle verdict grid */
.viz-waffle { display: grid; grid-template-columns: repeat(10, 1fr);
        gap: 3px; width: 276px; max-width: 100%; flex: none; }
.waffle-cell { aspect-ratio: 1; border-radius: 4px;
        box-shadow: inset 0 0 0 1px rgba(20,40,26,.08); }
.waffle-dec { background: repeating-linear-gradient(45deg,
        #94a3b8 0 4px, #cbd5e1 4px 8px) !important; }

/* single-variant duo: arc gauge + evidence ring */
.viz-duo { display: flex; gap: 22px; align-items: flex-start;
        flex-wrap: wrap; margin: 14px 0 4px; }
.viz-duo-main { flex: 1 1 320px; min-width: 280px; }
.viz-duo-side { flex: 0 1 224px; display: flex; flex-direction: column;
        align-items: center; gap: 8px; }
.viz-arc { width: 100%; max-width: 430px; height: auto; display: block; }
.arc-num { font-size: 44px; font-weight: 800; letter-spacing: -.02em;
        font-variant-numeric: tabular-nums; }
.arc-sub { font-size: 11.5px; font-weight: 600; fill: var(--muted); }
.arc-word { font-size: 14px; font-weight: 800; }
.arc-tick { font-size: 10.5px; font-weight: 700; fill: var(--amber-dark);
        font-variant-numeric: tabular-nums; }
.viz-ring { width: 164px; height: 164px; flex: none; }
.ring-num { font-size: 19px; font-weight: 800; fill: var(--ink);
        font-variant-numeric: tabular-nums; }
.ring-word { font-size: 10px; font-weight: 700; fill: var(--muted); }
.ring-legend { display: grid; gap: 5px; width: 100%; }
.ring-legend-row { display: flex; align-items: center; gap: 7px;
        font-size: 12.5px; }
.ring-legend-name { color: var(--ink-2); }
.ring-legend-state { margin-left: auto; font-weight: 700;
        color: var(--ink-2); }

/* chromosome context strip */
.viz-ctx { margin: 10px 0 4px; }
.ctx-chrom { font-size: 13px; font-weight: 800; fill: var(--ink); }
.ctx-gene { font-size: 13px; font-weight: 800; fill: var(--brand-dark); }
.ctx-pos { font-size: 12px; fill: var(--muted);
        font-variant-numeric: tabular-nums; }

/* 3D explore */
#viz3d-canvas { width: 100%; height: auto; display: block;
        border: 1px solid var(--line); border-radius: var(--radius);
        background: linear-gradient(180deg, #ffffff, #f2f7f3);
        cursor: grab; touch-action: none; }
#viz3d-canvas:active { cursor: grabbing; }

@media (prefers-reduced-motion: reduce) {
  .viz-pop { animation: none !important; }
}

/* ── analytics visuals (v4) ───────────────────────────────────────
   Tableau-clean batch layer: white panels with hairline borders
   and small titles (above, in the dashboard rules), light
   gridlines and muted label text inside the charts, saturated
   colour reserved for the data marks themselves. The four v4
   visuals — evidence scatter, gene treemap, packed bubbles,
   per-gene small multiples — are static by design, so there is
   no motion here to reduce. */
.ana-axis { font-size: 10px; fill: var(--muted);
        font-variant-numeric: tabular-nums; }
.ana-bound { font-size: 9.5px; font-weight: 700; fill: var(--amber-dark);
        font-variant-numeric: tabular-nums; }
.ana-zone { font-size: 10.5px; font-weight: 700; }
.ana-title { font-size: 11px; font-weight: 600; fill: var(--muted); }
.bub-gene { font-size: 12.5px; font-weight: 800; fill: var(--ink); }
.bub-count { font-size: 11px; font-weight: 600; fill: var(--muted);
        font-variant-numeric: tabular-nums; }
.bub-prob { font-size: 9.5px; font-weight: 700; fill: #fff;
        font-variant-numeric: tabular-nums;
        paint-order: stroke; stroke: rgba(20,40,26,.25); stroke-width: 2px; }
.tm-name { font-size: 12px; font-weight: 800; fill: #fff;
        paint-order: stroke; stroke: rgba(20,40,26,.18); stroke-width: 2.5px; }
.tm-sub { font-size: 10.5px; font-weight: 600; fill: rgba(255,255,255,.92);
        font-variant-numeric: tabular-nums; }
.tm-name.tm-dark, .tm-sub.tm-dark { fill: var(--slate-dark);
        stroke: rgba(255,255,255,.35); }
.tm-sub.tm-dark { stroke: none; }
.sm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(204px, 1fr));
        gap: 12px; }
.sm-panel { border: 1px solid #e6ebe8; border-radius: 10px;
        padding: 9px 11px 6px; background: #fff; }
.sm-head { display: flex; align-items: baseline; gap: 7px; margin-bottom: 4px;
        flex-wrap: wrap; }
.sm-gene { font-size: 13px; font-weight: 800; }
.sm-count { font-size: 11px; color: var(--muted);
        font-variant-numeric: tabular-nums; }
.sm-svg { width: 100%; height: auto; display: block; }
.sm-tick { font-size: 7.5px; fill: var(--muted);
        font-variant-numeric: tabular-nums; }