/* Variant Platform 2.2 — safe, body-scoped light presentation layer.
   Existing workflow and domain styles remain in app.css; this file only harmonises presentation. */

/* 1. Tokens */
body.app-ui {
  --bg: #f4f7fa; --panel: #fff; --panel2: #edf3f7; --border: #d7e0e8;
  --text: #172331; --muted: #5d6b7a; --accent: #0f5d6e; --accent2: #5a55c8;
  --success: #167447; --warning: #9a5b08; --danger: #b42318; --info: #1769aa;
  --shadow: 0 8px 24px rgba(23,35,49,.08);
  color-scheme: light;
}

/* 2. Base */
html:has(body.app-ui) { background:#f4f7fa; }
body.app-ui { margin:0; min-height:100vh; background:#f4f7fa; color:var(--text); font:400 16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; isolation:auto; }
body.app-ui::before, body.app-ui::after, body.app-ui .bg-grid { display:none; animation:none; }
body.app-ui *, body.app-ui *::before, body.app-ui *::after { box-sizing:border-box; }
body.app-ui a { color:var(--accent); text-underline-offset:3px; }
body.app-ui h1, body.app-ui h2, body.app-ui h3, body.app-ui h4 { color:var(--text); font-family:inherit; letter-spacing:-.015em; text-transform:none; line-height:1.2; text-shadow:none; }
body.app-ui h1 { font-size:clamp(1.8rem,3vw,2.65rem); } body.app-ui h2 { font-size:1.45rem; } body.app-ui h3 { font-size:1.1rem; }
body.app-ui .muted, body.app-ui .subtitle { color:var(--muted); }
body.app-ui .container { position:relative; z-index:auto; width:min(1440px,calc(100% - 40px)); max-width:1440px; margin:0 auto; padding:28px 0 64px; }
body.app-ui .technical, body.app-ui code, body.app-ui pre, body.app-ui .hgvs { font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; }
body.app-ui hr { border:0; border-top:1px solid var(--border); }

/* 3. Navigation */
body.app-ui .app-header { position:sticky; top:0; z-index:100; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px; min-height:72px; padding:10px max(20px,calc((100vw - 1440px)/2)); background:rgba(255,255,255,.97); border-bottom:1px solid var(--border); box-shadow:0 2px 12px rgba(23,35,49,.05); }
body.app-ui .app-brand { display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; white-space:nowrap; }
body.app-ui .app-brand strong, body.app-ui .app-brand small { display:block; } body.app-ui .app-brand strong { font-size:1rem; } body.app-ui .app-brand small { color:var(--muted); font-size:.73rem; }
body.app-ui .app-icon { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; color:var(--accent); }
body.app-ui .app-nav, body.app-ui .app-user-nav { display:flex; align-items:center; gap:4px; }
body.app-ui .app-nav a, body.app-ui .app-user-nav a, body.app-ui .button-link { display:inline-flex; min-height:40px; align-items:center; padding:8px 11px; border:0; border-radius:8px; background:transparent; color:#344454; font-family:inherit; font-size:13px; font-weight:600; line-height:1.2; text-decoration:none; cursor:pointer; }
body.app-ui .app-nav a:hover, body.app-ui .app-user-nav a:hover, body.app-ui .button-link:hover, body.app-ui .app-nav a[aria-current="page"] { background:var(--panel2); color:var(--accent); }
body.app-ui .app-nav a[aria-current="page"] { box-shadow:inset 0 -2px var(--accent); }
body.app-ui .app-user-nav { justify-content:flex-end; border-left:1px solid var(--border); padding-left:10px; } body.app-ui .app-user-nav form { margin:0; }
body.app-ui .app-user-nav .app-register { background:var(--accent); color:white; }
body.app-ui .breadcrumbs { margin:4px 0 12px; color:var(--muted); font-size:.84rem; }
body.app-ui .breadcrumbs ol { display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }
body.app-ui .breadcrumbs li:not(:last-child)::after { content:"/"; margin-left:6px; color:#91a0ad; }
body.app-ui .breadcrumbs a { color:var(--accent); font-weight:650; text-decoration:none; }
body.app-ui .page-heading { margin:0 0 24px; padding:22px 24px; background:linear-gradient(110deg,#fff,#edf3f7); border:1px solid var(--border); border-radius:14px; }
body.app-ui .page-heading h1, body.app-ui .page-heading p { margin:0; } body.app-ui .page-heading p { margin-top:7px; color:var(--muted); }
body.app-ui .topbar { background:#fff; border:1px solid var(--border); box-shadow:none; }
body.app-ui .quick-nav { top:80px; background:#fff; border-color:var(--border); box-shadow:var(--shadow); backdrop-filter:none; }
body.app-ui.case-detail-page .quick-nav { position:static; top:auto; z-index:auto; }
body.app-ui.case-detail-page #comments-case, body.app-ui.case-detail-page #exam-add, body.app-ui.case-detail-page #case-progress, body.app-ui.case-detail-page #checklist { scroll-margin-top:88px; }
body.app-ui.ngs-page #ngs-workflow, body.app-ui.ngs-page #ngs-table { scroll-margin-top:152px; }
body.app-ui .section-nav { position:sticky; top:76px; z-index:20; display:flex; gap:8px; margin:0 0 18px; padding:8px; overflow-x:auto; border:1px solid var(--border); border-radius:10px; background:#fff; }
body.app-ui .section-nav a { display:inline-flex; min-height:40px; align-items:center; padding:7px 12px; border-radius:7px; color:var(--text); font-size:13px; font-weight:700; text-decoration:none; white-space:nowrap; }
body.app-ui .section-nav a:hover { background:var(--panel2); color:var(--accent); }
body.app-ui .context-actions { display:flex; flex-wrap:wrap; gap:8px; margin:-10px 0 24px; }

/* 4. Buttons */
body.app-ui .btn, body.app-ui input[type="submit"] { min-height:40px; padding:9px 15px; border:1px solid var(--accent); border-radius:8px; background:var(--accent); color:#fff; box-shadow:none; font-family:inherit; font-size:14px; font-weight:650; line-height:1.25; letter-spacing:0; text-transform:none; text-decoration:none; cursor:pointer; transition:background-color .15s,border-color .15s,transform .15s; }
body.app-ui .btn:hover, body.app-ui input[type="submit"]:hover { background:#0b4b59; transform:translateY(-1px); }
body.app-ui .btn-secondary { background:#fff; border-color:#9ba8d9; color:#4541a6; }
body.app-ui .btn-ghost { background:#fff; border-color:var(--border); color:var(--text); }
body.app-ui .btn-danger, body.app-ui .danger, body.app-ui button[onclick*="confirm"], body.app-ui form[action*="delete"] button { background:#fff; border-color:var(--danger); color:var(--danger); }
body.app-ui .actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:16px; }

/* 5. Forms */
body.app-ui label { display:inline-block; color:#344454; font-size:14px; font-weight:650; }
body.app-ui input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), body.app-ui select, body.app-ui textarea, body.app-ui .input { min-height:42px; max-width:100%; padding:9px 11px; border:1px solid #b9c6d2; border-radius:8px; background:#fff; color:var(--text); font-family:inherit; font-size:14px; font-weight:400; line-height:1.4; box-shadow:none; }
body.app-ui select { color-scheme:light; }
body.app-ui select option, body.app-ui select optgroup { background:#fff; color:var(--text); }
body.app-ui select option:checked { background:#dcebed; color:#0b5261; }
body.app-ui textarea { min-height:84px; } body.app-ui input::placeholder, body.app-ui textarea::placeholder { color:#778695; opacity:1; }
body.app-ui input:disabled, body.app-ui select:disabled, body.app-ui textarea:disabled { background:var(--panel2); color:var(--muted); }
body.app-ui fieldset { border:1px solid var(--border); border-radius:10px; } body.app-ui legend { color:var(--text); font-weight:700; }
body.app-ui .form-grid { gap:16px; }
body.app-ui .auth-page > .app-header { margin-bottom:36px; }
body.app-ui.auth-page > .container { max-width:720px !important; margin-top:0 !important; padding-top:20px; }
body.app-ui.auth-page form.card { padding:24px; }
body.app-ui [style*="color:#f97066"] { color:var(--danger) !important; } body.app-ui [style*="color:#7ee787"] { color:var(--success) !important; }

/* The historical checklist selectors use an ID; match that specificity explicitly. */
body.app-ui #checklist .table-wrap { background:#fff; border-color:var(--border); }
body.app-ui #checklist thead th { background:#e6eef3; color:#334454; border-color:#c6d3dc; }
body.app-ui #checklist input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.app-ui #checklist select,
body.app-ui #checklist textarea { background:#fff; color:var(--text); border-color:#b9c6d2; box-shadow:none; }
body.app-ui #checklist input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])::placeholder,
body.app-ui #checklist textarea::placeholder { color:#667789; opacity:1; }
body.app-ui #checklist input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
body.app-ui #checklist select:focus,
body.app-ui #checklist textarea:focus,
body.app-ui #checklist input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus-visible,
body.app-ui #checklist select:focus-visible,
body.app-ui #checklist textarea:focus-visible { background:#fff; border-color:var(--accent); box-shadow:0 0 0 3px rgba(15,93,110,.14); }
body.app-ui #checklist input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):disabled,
body.app-ui #checklist select:disabled,
body.app-ui #checklist textarea:disabled,
body.app-ui #checklist input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):read-only,
body.app-ui #checklist textarea:read-only { background:var(--panel2); color:#44515e; border-color:#b9c6d2; }
body.app-ui #checklist .checklist-checkbox input[type="checkbox"] { background:#fff; border:1px solid #718292; box-shadow:none; filter:none; }
body.app-ui #checklist .checklist-checkbox input[type="checkbox"]:checked { background:var(--accent); border-color:var(--accent); box-shadow:none; }
body.app-ui #checklist .checklist-checkbox input[type="checkbox"]:checked::after { color:#fff; }
body.app-ui #checklist .checklist-checkbox input[type="checkbox"]:focus-visible { outline:3px solid rgba(15,93,110,.3); outline-offset:2px; }
body.app-ui.case-detail-page #checklist .ngs-double-read-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
body.app-ui.case-detail-page #checklist .ngs-double-read-head { flex-wrap:wrap; }
body.app-ui.case-detail-page #checklist .ngs-metric { min-width:0; }
body.app-ui.case-detail-page #checklist .ngs-metric span { overflow-wrap:anywhere; }

/* 6. Cards */
body.app-ui .card, body.app-ui .panel, body.app-ui details { background:#fff; color:var(--text); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); backdrop-filter:none; }
body.app-ui .card { margin-bottom:20px; padding:22px; }
body.app-ui .card::before, body.app-ui .card::after { display:none; }
body.app-ui .glow { box-shadow:var(--shadow); animation:none; }
body.app-ui details { margin-bottom:12px; overflow:hidden; } body.app-ui summary { min-height:44px; padding:12px 16px; background:var(--panel2); color:var(--text); cursor:pointer; font-weight:700; }
body.app-ui details > :not(summary) { margin-left:16px; margin-right:16px; }

/* 7. Tables */
body.app-ui .table-wrap, body.app-ui .table-container, body.app-ui [class*="table-wrap"] { max-width:100%; overflow-x:auto; border:1px solid var(--border); border-radius:10px; background:#fff; }
body.app-ui table { width:100%; border-collapse:collapse; background:#fff; color:var(--text); font-size:13px; }
body.app-ui th { position:sticky; top:0; z-index:2; padding:11px 10px; background:#e6eef3; color:#334454; border-bottom:1px solid #c6d3dc; font-size:13px; font-weight:700; letter-spacing:.01em; text-align:left; text-transform:none; white-space:nowrap; }
body.app-ui td { padding:11px 10px; border-bottom:1px solid #e1e8ee; color:var(--text); vertical-align:top; }
body.app-ui tbody tr:hover { background:#f7fafc; }

/* 8. Statuses */
body.app-ui .status-pill, body.app-ui .badge, body.app-ui [class*="status-"] { box-shadow:none; text-shadow:none; }
body.app-ui .status-locked { background:#edf1f4; border-color:#aab6c0; color:#44515e; }
body.app-ui .status-progress, body.app-ui .status-info { background:#e9f3fb; border-color:#82b8df; color:#155b8d; }
body.app-ui .status-finalized, body.app-ui .status-success { background:#e8f5ee; border-color:#78bd98; color:#11643c; }
body.app-ui .status-other, body.app-ui .status-warning { background:#fff4df; border-color:#dab06b; color:#754506; }
body.app-ui .alert, body.app-ui .error { border-left:4px solid var(--danger); background:#fff0ef; color:#761c15; }
body.app-ui .journal-bubble-wrap { display:flex; gap:7px; margin:12px 0; }
body.app-ui .journal-bubble { display:inline-flex; min-width:28px; min-height:28px; align-items:center; justify-content:center; padding:2px 8px; border-radius:999px; background:var(--info); color:#fff; font-size:12px; font-weight:750; }
body.app-ui .journal-bubble.case { background:var(--success); } body.app-ui .journal-bubble.exam { background:var(--warning); } body.app-ui .journal-bubble.comment { background:var(--accent2); }

/* 9. Page-specific presentation */
body.app-ui.home-page { background:#f4f7fa; }
body.app-ui .home-main { width:min(1240px,calc(100% - 40px)); margin:0 auto; padding:52px 0 68px; }
body.app-ui .home-hero { position:relative; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(260px,.5fr); align-items:center; gap:48px; min-height:420px; padding:52px clamp(28px,5vw,68px); overflow:hidden; border:1px solid var(--border); border-radius:20px; background:linear-gradient(125deg,#fff 15%,#edf6f7 100%); box-shadow:var(--shadow); }
body.app-ui .eyebrow { margin:0 0 10px; color:var(--accent); font-size:.78rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
body.app-ui .home-hero h1 { max-width:820px; margin:0; font-size:clamp(2.15rem,4.7vw,4.25rem); line-height:1.06; }
body.app-ui .hero-copy { max-width:700px; margin:22px 0 0; color:var(--muted); font-size:1.1rem; }
body.app-ui .molecular-mark { position:relative; width:260px; height:260px; border:1px solid #b8d4d9; border-radius:50%; background:radial-gradient(circle at center,rgba(90,85,200,.11) 0 5%,transparent 6%),repeating-radial-gradient(circle at center,transparent 0 35px,rgba(15,93,110,.08) 36px 37px); }
body.app-ui .molecular-mark::before, body.app-ui .molecular-mark::after { content:""; position:absolute; inset:50% 8%; height:1px; background:#98bec6; transform:rotate(35deg); }
body.app-ui .molecular-mark::after { transform:rotate(-35deg); }
body.app-ui .molecular-mark span { position:absolute; width:18px; height:18px; border:5px solid #fff; border-radius:50%; background:var(--accent2); box-shadow:0 0 0 1px #9c99df; }
body.app-ui .molecular-mark span:nth-child(1){left:20%;top:28%} body.app-ui .molecular-mark span:nth-child(2){right:18%;top:23%} body.app-ui .molecular-mark span:nth-child(3){left:44%;top:47%;background:var(--accent)} body.app-ui .molecular-mark span:nth-child(4){left:14%;bottom:20%} body.app-ui .molecular-mark span:nth-child(5){right:16%;bottom:19%}
body.app-ui .workflow, body.app-ui .home-modules { padding-top:60px; }
body.app-ui .section-heading { margin-bottom:22px; } body.app-ui .section-heading h2 { margin:0; font-size:1.8rem; }
body.app-ui .workflow ol { display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin:0; padding:0; list-style:none; counter-reset:flow; }
body.app-ui .workflow li { position:relative; min-height:92px; padding:22px 30px 18px 48px; background:#fff; border-block:1px solid var(--border); font-weight:700; }
body.app-ui .workflow li:first-child { border-left:1px solid var(--border); border-radius:12px 0 0 12px; } body.app-ui .workflow li:last-child { border-right:1px solid var(--border); border-radius:0 12px 12px 0; }
body.app-ui .workflow li::before { counter-increment:flow; content:counter(flow); position:absolute; left:16px; top:20px; display:grid; width:24px; height:24px; place-items:center; border-radius:50%; background:#dcebed; color:var(--accent); font-size:12px; }
body.app-ui .workflow li:not(:last-child)::after { content:"→"; position:absolute; right:-8px; z-index:1; color:var(--accent2); }
body.app-ui .module-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } body.app-ui .module-grid .card { display:flex; min-height:230px; flex-direction:column; margin:0; }
body.app-ui .module-grid .card h3 { margin-top:0; font-size:1.25rem; } body.app-ui .module-grid .card p { flex:1; color:var(--muted); } body.app-ui .module-grid .card > a { font-weight:700; text-decoration:none; }
body.app-ui .app-footer { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px; padding:24px max(20px,calc((100vw - 1240px)/2)); border-top:1px solid var(--border); background:#fff; color:var(--muted); font-size:.82rem; }
body.app-ui .app-footer .version-badge { position:static; display:inline; padding:0; border:0; background:none; box-shadow:none; color:var(--text); }
body.app-ui .cases-card { background:#fff; border-color:var(--border); box-shadow:var(--shadow); }
body.app-ui pre, body.app-ui .json-details { overflow:auto; padding:14px; border:1px solid var(--border); border-radius:8px; background:#f1f5f8; color:#263747; white-space:pre-wrap; }
body.app-ui.pathways-page .pathways-shell, body.app-ui.pathways-page .sidebar, body.app-ui.pathways-page .controls { background:#fff; color:var(--text); }
body.app-ui.pathways-page svg, body.app-ui.pathways-page .pathway-canvas { background:#15212d; }
body.app-ui.ngs-page .ngs-case-summary { display:flex; flex-wrap:wrap; align-items:center; gap:20px; min-width:0; }
body.app-ui.ngs-page .ngs-case-copy { min-width:0; }
body.app-ui.ngs-page .hero-meta { display:flex; flex-wrap:wrap; min-width:0; }
body.app-ui.ngs-page .hero-meta span { min-width:0; overflow-wrap:anywhere; }
body.app-ui.ngs-page .ngs-case-actions { flex:0 0 auto; text-align:right; }
body.app-ui .account-grid { grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; max-width:980px; margin-inline:auto; }
body.app-ui .account-password-card, body.app-ui .account-password-actions { grid-column:1/-1; }
body.app-ui .account-password-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:12px; }

/* Historical clinical components: explicit light surfaces */
body.app-ui .case-hero,
body.app-ui .exam-meta-card,
body.app-ui .exam-detail,
body.app-ui .exam-help,
body.app-ui .status-slider-wrap,
body.app-ui .ngs-double-read-card,
body.app-ui .ngs-metric,
body.app-ui .ngs-double-read-users li,
body.app-ui .checklist-checkbox,
body.app-ui .ngs-block,
body.app-ui .ngs-super-block,
body.app-ui .metric-box,
body.app-ui .my-review-box,
body.app-ui .db-knowledge-box,
body.app-ui .db-current-grid > div,
body.app-ui .context-row-grid,
body.app-ui .synoptic-block,
body.app-ui .rna-reads-grid > div,
body.app-ui .fusion-schema-block {
  background:#fff; color:var(--text); border-color:#cbd7e1; box-shadow:none; text-shadow:none;
}
body.app-ui .case-hero { background:linear-gradient(120deg,#fff,#edf5f7); }
body.app-ui .hero-title, body.app-ui .hero-meta, body.app-ui .exam-help, body.app-ui .ngs-block-title,
body.app-ui .ngs-metric span, body.app-ui .ngs-metric b, body.app-ui .rna-reads-grid span,
body.app-ui .rna-reads-grid b { color:var(--text); text-shadow:none; }
body.app-ui .exam-help, body.app-ui .ngs-double-read-users li, body.app-ui .fusion-schema-block { background:#edf3f7; }
body.app-ui .checklist-checkbox input, body.app-ui .checklist-checkbox select,
body.app-ui .checklist-checkbox textarea { background:#fff; color:var(--text); border-color:#aebdca; }
body.app-ui .db-context-table td { background:#f8fafc; color:var(--text); border-color:#d7e0e8; }
body.app-ui .dense-input { background:#fff !important; color:var(--text) !important; border-color:#aebdca !important; }
body.app-ui .gene-overview-card { background:#fff; color:var(--text); border-color:var(--border); box-shadow:var(--shadow); }
body.app-ui .oncology-tag { background:#e4f2f4; color:#0b5261; border-color:#8ebac2; }
body.app-ui .view-link { color:var(--accent); }

/* Clinical meanings retained with light, high-contrast fills and explicit labels in templates. */
body.app-ui .tier-ia, body.app-ui .tier-ib, body.app-ui .class-i { background:#fde8e7; color:#81231f; border:1px solid #e8aaa6; }
body.app-ui .tier-iic, body.app-ui .tier-iid, body.app-ui .class-ii { background:#f2e9f8; color:#593371; border:1px solid #cdb2df; }
body.app-ui .tier-iii, body.app-ui .class-iii { background:#e5f1fa; color:#15537d; border:1px solid #9bc4df; }
body.app-ui .tier-unknown, body.app-ui .class-unknown, body.app-ui .acmg-unknown { background:#edf1f4; color:#485867; border-color:#b6c2cc; }
body.app-ui .acmg-5 { background:#fde8e7; color:#81231f; border-color:#e8aaa6; }
body.app-ui .acmg-4 { background:#f2e9f8; color:#593371; border-color:#cdb2df; }
body.app-ui .acmg-3 { background:#eaf4fe; color:#174e7c; border-color:#a9ceee; }
body.app-ui .acmg-2 { background:#e7f9f4; color:#175c4d; border-color:#9fd8cb; }
body.app-ui .acmg-1 { background:#e7f7ee; color:#185b37; border-color:#9fd2b4; }
body.app-ui tr.row-validated td { background:#edf8f2 !important; color:var(--text); }
body.app-ui tr.row-invalidated td { background:#fff0ef !important; color:var(--text); }
body.app-ui tr.row-tovalidate td { background:#fff7e8 !important; color:var(--text); }
body.app-ui .reviewer-item.rev-validated { color:#11643c; background:#edf8f2; }
body.app-ui .reviewer-item.rev-invalidated { color:#8b2520; background:#fff0ef; }
body.app-ui .ngs-metric.validated b { color:#11643c; }
body.app-ui .ngs-metric.invalidated b { color:#8b2520; }
body.app-ui .ngs-metric.one-review b { color:#754506; }
body.app-ui .m-value.val-low { color:#a61b25; text-shadow:none; background:#fff0ef; border-bottom:2px solid #c83a43; animation:none; }
body.app-ui .m-value.val-mid { color:#07675f; text-shadow:none; background:#e7f8f5; }
body.app-ui .m-value.val-very-high { color:#166534; text-shadow:none; background:#e8f6ed; }
body.app-ui .m-value.val-over-tumor { color:#755600; text-shadow:none; background:#fff7d6; border-bottom:2px solid #b28a00; }
body.app-ui .m-value.val-multi { border-color:#657687; box-shadow:none; }
body.app-ui .m-value .vaf-multi-icon { color:#344454; }

/* Atlas controls remain specialised rather than inheriting the global primary button. */
body.app-ui.pathways-page .pathways-sidebar, body.app-ui.pathways-page .pathway-controls,
body.app-ui.pathways-page .pathway-item { background:#fff; color:var(--text); border-color:#c4d1dc; }
body.app-ui.pathways-page .pathway-item small { color:var(--muted); }
body.app-ui.pathways-page .pathway-item.is-active { background:#e6f2f4; color:#0b5261; box-shadow:inset 4px 0 var(--line,#0f5d6e); animation:none; }

/* Residual template-local dark styles: light, page-component overrides. */
body.app-ui .context-box, body.app-ui .status-card, body.app-ui .kpi-card,
body.app-ui .variant-item, body.app-ui .mini-cell {
  background:#fff; color:var(--text); border-color:#cbd7e1; box-shadow:none; text-shadow:none;
}
body.app-ui .identity-hero, body.app-ui .last-update-shell {
  background:linear-gradient(145deg,#fff,#edf6f7); color:var(--text); border-color:#cbd7e1; box-shadow:none;
}
body.app-ui .up-item, body.app-ui .context-line {
  background:#f8fafc; color:var(--text); border-color:#cbd7e1; box-shadow:none;
}
body.app-ui .identity-title, body.app-ui .identity-main-code, body.app-ui .up-value { color:var(--text); text-shadow:none; }
body.app-ui .pill-cancer, body.app-ui .identity-chip, body.app-ui .hgvs-p-chip {
  background:#e6f2f4; color:#0b5261; border-color:#8ebac2; text-shadow:none;
}
body.app-ui .alteration-chip { background:#fff4df; color:#754506; border-color:#dab06b; text-shadow:none; }
body.app-ui .cancer-chip-hero { background:#edf6f7; color:#0b5261; border-color:#8ebac2; text-shadow:none; }
body.app-ui .status-actionable { background:#edf8f2; color:#11643c; border-color:#78bd98; text-shadow:none; }

/* Audit details are deliberately scoped to audit components. */
body.app-ui .audit-metric { background:#f8fafc; color:var(--text); border-color:#cbd7e1; }
body.app-ui .event-message { color:var(--text); }
body.app-ui .event-type.event-delete { background:#fff0ef; color:#8b2520; border-color:#e8aaa6; }
body.app-ui .event-type.event-update { background:#fff7e8; color:#754506; border-color:#dab06b; }
body.app-ui .event-type.event-create { background:#edf8f2; color:#11643c; border-color:#78bd98; }
body.app-ui.audit-page code { background:#f1f5f8; color:#263747; border-color:#cbd7e1; text-shadow:none; }

/* NGS technical values, review states and classification controls. */
body.app-ui .ngs-super-title, body.app-ui .db-card-title, body.app-ui .db-val,
body.app-ui .ngs-double-read-users-title, body.app-ui .ngs-hgvs-c { color:var(--text); text-shadow:none; }
body.app-ui .suggestion-hint { color:#0b5261; }
body.app-ui .db-card-status { color:#754506; }
body.app-ui .db-card-status-success { color:#11643c; }
body.app-ui .warning-text { color:#754506; }
body.app-ui .ngs-double-read-status, body.app-ui .ngs-double-read-status.tone-todo,
body.app-ui .tone-todo, body.app-ui .ngs-double-read-card.tone-todo,
body.app-ui .ngs-double-read-card.tone-todo .ngs-double-read-status {
  background:#fff7e8; color:#754506; border-color:#dab06b; text-shadow:none;
}
body.app-ui .ngs-double-read-status.tone-complete, body.app-ui .tone-complete,
body.app-ui .ngs-double-read-card.tone-complete,
body.app-ui .ngs-double-read-card.tone-complete .ngs-double-read-status {
  background:#edf8f2; color:#11643c; border-color:#78bd98; text-shadow:none;
}
body.app-ui .amp-tier-select.is-tier-ia, body.app-ui .amp-tier-select.is-tier-ib {
  background:#fde8e7 !important; color:#81231f !important; border-color:#e8aaa6 !important;
}
body.app-ui .amp-tier-select.is-tier-iic, body.app-ui .amp-tier-select.is-tier-iid {
  background:#f2e9f8 !important; color:#593371 !important; border-color:#cdb2df !important;
}
body.app-ui .amp-tier-select.is-tier-iii {
  background:#e5f1fa !important; color:#15537d !important; border-color:#9bc4df !important;
}
body.app-ui .alt-missense {
  background:#e6f2f4 !important;
  color:#0b5261 !important;
  border:1px solid #8ebac2 !important;
  box-shadow:none !important;
  text-shadow:none !important;
}
body.app-ui .alt-frameshift {
  background:#fff4df !important;
  color:#754506 !important;
  border:1px solid #dab06b !important;
  box-shadow:none !important;
  text-shadow:none !important;
}
body.app-ui .alt-stop {
  background:#fff0ef !important;
  color:#8b2520 !important;
  border:1px solid #e8aaa6 !important;
  box-shadow:none !important;
  text-shadow:none !important;
}
body.app-ui .alt-other {
  background:#f2e9f8 !important;
  color:#593371 !important;
  border:1px solid #cdb2df !important;
  box-shadow:none !important;
  text-shadow:none !important;
}

/* Case workflow selections retain their meaning without white-on-pastel text. */
body.app-ui .exam-state-pill { background:#e5f1fa; color:#15537d; border-color:#9bc4df; text-shadow:none; }
body.app-ui .status-toggle-option.is-selected { color:var(--text); border-color:#657687; box-shadow:0 0 0 2px rgba(21,83,125,.14); text-shadow:none; }
body.app-ui .status-chip-planned.is-selected { background:#edf1f4; color:#485867; border-color:#9aa9b5; }
body.app-ui .status-chip-progress.is-selected { background:#e5f1fa; color:#15537d; border-color:#82b8df; }
body.app-ui .status-chip-done.is-selected { background:#edf8f2; color:#11643c; border-color:#78bd98; }
body.app-ui .status-chip-na.is-selected { background:#f2e9f8; color:#593371; border-color:#cdb2df; }

/* Semantic account and administration feedback. */
body.app-ui .account-message { padding:8px 10px; border:1px solid; border-radius:8px; }
body.app-ui .account-message-error { background:#fff0ef; color:#8b2520; border-color:#e8aaa6; }
body.app-ui .account-message-success { background:#edf8f2; color:#11643c; border-color:#78bd98; }
body.app-ui .custom-label { color:#0b5261; font-weight:700; }

/* Synoptic report: screen-only light treatment; print rules and PDF stay untouched. */
@media screen {
  body.app-ui.report-screen .report-page, body.app-ui.report-screen .report-box { background:#fff; color:var(--text); border-color:#cbd7e1; box-shadow:none; }
  body.app-ui.report-screen .report-box { background:#f8fafc; }
  body.app-ui.report-screen .muted-lite, body.app-ui.report-screen .muted-caption { color:var(--muted); }
  body.app-ui.report-screen table { background:#fff; color:var(--text); }
  body.app-ui.report-screen th { background:#e6eef3; color:#334454; border-color:#c6d3dc; }
  body.app-ui.report-screen td { background:#fff; color:var(--text); border-color:#d7e0e8; }
  body.app-ui.report-screen .class-title.class-i { color:#81231f; }
  body.app-ui.report-screen .class-title.class-ii { color:#593371; }
  body.app-ui.report-screen .class-title.class-iii { color:#15537d; }
  body.app-ui.report-screen .tier-cell.tier-i { background:#fde8e7; color:#81231f; }
  body.app-ui.report-screen .tier-cell.tier-ii { background:#f2e9f8; color:#593371; }
  body.app-ui.report-screen .tier-cell.tier-iii { background:#e5f1fa; color:#15537d; }
  body.app-ui.report-screen .acmg-cell.acmg-5 { background:#fde8e7; color:#81231f; }
  body.app-ui.report-screen .acmg-cell.acmg-4 { background:#f2e9f8; color:#593371; }
  body.app-ui.report-screen .acmg-cell.acmg-3 { background:#eaf4fe; color:#174e7c; }
  body.app-ui.report-screen .acmg-cell.acmg-2 { background:#e7f9f4; color:#175c4d; }
  body.app-ui.report-screen .acmg-cell.acmg-1 { background:#e7f7ee; color:#185b37; }
}

/* 10. Responsive */
@media (min-width:1481px) {
 body.app-ui.ngs-page .container, body.app-ui.pathways-page .container.pathways-shell { width:min(2400px,calc(100% - 40px)); max-width:2400px; }
 body.app-ui.ngs-page .app-header, body.app-ui.pathways-page .app-header { padding-inline:max(20px,calc((100vw - 2400px)/2)); }
}
@media (max-width:900px) {
 body.app-ui.ngs-page .case-hero { flex-direction:column; align-items:stretch; }
 body.app-ui.ngs-page .ngs-case-actions { text-align:left; }
 body.app-ui.ngs-page .ngs-case-actions .btn { max-width:100%; white-space:normal; }
 body.app-ui .account-grid, body.app-ui .account-password-grid { grid-template-columns:1fr; }
}
@media (max-width:1100px) {
 body.app-ui .app-header { grid-template-columns:auto 1fr; min-height:118px; } body.app-ui .app-nav { grid-row:2; grid-column:1/-1; overflow-x:auto; } body.app-ui .app-user-nav { border:0; }
 body.app-ui .quick-nav, body.app-ui .section-nav { top:126px; }
 body.app-ui.case-detail-page #comments-case, body.app-ui.case-detail-page #exam-add, body.app-ui.case-detail-page #case-progress, body.app-ui.case-detail-page #checklist { scroll-margin-top:134px; }
 body.app-ui.ngs-page #ngs-workflow, body.app-ui.ngs-page #ngs-table { scroll-margin-top:198px; }
 body.app-ui .module-grid { grid-template-columns:repeat(2,1fr); } body.app-ui .home-hero { grid-template-columns:1fr 220px; }
}
@media (max-width:760px) {
 body.app-ui .app-header { position:relative; display:flex; flex-wrap:wrap; gap:8px; padding:10px 16px; }
 body.app-ui .app-brand { flex:1; } body.app-ui .app-nav { order:3; width:100%; } body.app-ui .app-user-nav { width:auto; overflow-x:auto; }
 body.app-ui .container, body.app-ui .home-main { width:min(100% - 24px,1440px); padding-top:18px; }
 body.app-ui .home-main { padding-top:24px; } body.app-ui .home-hero { grid-template-columns:1fr; min-height:0; padding:32px 24px; } body.app-ui .molecular-mark { display:none; }
 body.app-ui .workflow ol { grid-template-columns:1fr; } body.app-ui .workflow li, body.app-ui .workflow li:first-child, body.app-ui .workflow li:last-child { min-height:64px; border:1px solid var(--border); border-radius:8px; } body.app-ui .workflow li:not(:last-child)::after { content:"↓"; right:20px; bottom:-13px; top:auto; }
 body.app-ui .module-grid { grid-template-columns:1fr; } body.app-ui .module-grid .card { min-height:0; }
 body.app-ui .page-heading { padding:18px; } body.app-ui .form-grid { grid-template-columns:1fr; }
 body.app-ui .quick-nav, body.app-ui .section-nav { position:static; }
 body.app-ui.case-detail-page #comments-case, body.app-ui.case-detail-page #exam-add, body.app-ui.case-detail-page #case-progress, body.app-ui.case-detail-page #checklist,
 body.app-ui.ngs-page #ngs-workflow, body.app-ui.ngs-page #ngs-table { scroll-margin-top:24px; }
}
@media (max-width:430px) { body.app-ui .app-user-nav { order:2; width:100%; justify-content:flex-start; } body.app-ui .app-nav a, body.app-ui .app-user-nav a, body.app-ui .button-link { padding-inline:9px; } }

/* 11. Accessibility */
body.app-ui :focus-visible { outline:3px solid #7b77dc; outline-offset:3px; }
body.app-ui .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (prefers-reduced-motion: reduce) {
 body.app-ui *, body.app-ui *::before, body.app-ui *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}