/* OncoGx Oncology Explorer: scoped styles (from the standalone build).
   Site theme overrides are at the end of this file. */
/* ======================================================================
   OncoGx Oncology Explorer: styles
   Everything is scoped under .oncogx-explorer so nothing leaks into the
   host OncoGx site. Replace the design tokens below to match OncoGx
   global CSS variables when they are available.
   ====================================================================== */

/* ---------- DESIGN TOKENS (light) ---------- */
.oncogx-explorer {
  --ox-navy: #0B2545;
  --ox-navy-2: #13315C;
  --ox-navy-3: #1D4273;
  --ox-teal: #14B8A6;
  --ox-teal-ink: #0F766E;
  --ox-teal-soft: #CCFBF1;

  --ox-bg: #F4F7FA;
  --ox-surface: #FFFFFF;
  --ox-surface-2: #F1F5F9;
  --ox-surface-3: #E8EEF4;
  --ox-border: #DCE3EA;
  --ox-border-strong: #C3CEDA;
  --ox-text: #0F172A;
  --ox-muted: #475569;
  --ox-subtle: #5B6B7F;
  --ox-focus: #0EA5E9;
  --ox-danger: #B91C1C;
  --ox-danger-soft: #FEF2F2;
  --ox-warn: #92400E;
  --ox-warn-soft: #FFFBEB;
  --ox-ok: #047857;
  --ox-ok-soft: #ECFDF5;

  /* Entity colours: [solid, ink for text, soft background] */
  --ox-gene: #4F46E5;      --ox-gene-ink: #3730A3;      --ox-gene-soft: #EEF2FF;
  --ox-variant: #2563EB;   --ox-variant-ink: #1D4ED8;   --ox-variant-soft: #EFF6FF;
  --ox-mp: #0891B2;        --ox-mp-ink: #0E7490;        --ox-mp-soft: #ECFEFF;
  --ox-evidence: #0D9488;  --ox-evidence-ink: #0F766E;  --ox-evidence-soft: #F0FDFA;
  --ox-assertion: #9333EA; --ox-assertion-ink: #7E22CE; --ox-assertion-soft: #FAF5FF;
  --ox-therapy: #059669;   --ox-therapy-ink: #047857;   --ox-therapy-soft: #ECFDF5;
  --ox-disease: #E11D48;   --ox-disease-ink: #BE123C;   --ox-disease-soft: #FFF1F2;
  --ox-source: #D97706;    --ox-source-ink: #B45309;    --ox-source-soft: #FFFBEB;
  --ox-trial: #475569;     --ox-trial-ink: #334155;     --ox-trial-soft: #F1F5F9;

  --ox-radius: 14px;
  --ox-radius-sm: 9px;
  --ox-shadow: 0 1px 2px rgba(15,23,42,.06), 0 2px 8px rgba(15,23,42,.05);
  --ox-shadow-lg: 0 12px 40px rgba(11,37,69,.18);
  --ox-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --ox-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --ox-maxw: 1440px;

  color-scheme: light;
  font-family: var(--ox-font);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ox-text);
  background: var(--ox-bg);
  display: block;
  -webkit-text-size-adjust: 100%;
  text-align: left;
}

/* ---------- DESIGN TOKENS (dark) ---------- */
.oncogx-explorer[data-theme="dark"] {
  --ox-bg: #0A1322; --ox-surface: #0F1B2E; --ox-surface-2: #13233A; --ox-surface-3: #1A2D48;
  --ox-border: #22385A; --ox-border-strong: #2F4B75;
  --ox-text: #E6EDF6; --ox-muted: #B4C2D3; --ox-subtle: #9AAABF;
  --ox-teal-ink: #5EEAD4; --ox-teal-soft: #0E3B3A;
  --ox-danger: #FCA5A5; --ox-danger-soft: #3A1418; --ox-warn: #FCD34D; --ox-warn-soft: #34270B;
  --ox-ok: #6EE7B7; --ox-ok-soft: #0C2F25;
  --ox-gene-ink: #A5B4FC; --ox-gene-soft: #1B1F4B;
  --ox-variant-ink: #93C5FD; --ox-variant-soft: #132a4f;
  --ox-mp-ink: #67E8F9; --ox-mp-soft: #0B3140;
  --ox-evidence-ink: #5EEAD4; --ox-evidence-soft: #0B2F2D;
  --ox-assertion-ink: #D8B4FE; --ox-assertion-soft: #2A1745;
  --ox-therapy-ink: #6EE7B7; --ox-therapy-soft: #0B2E24;
  --ox-disease-ink: #FDA4AF; --ox-disease-soft: #3A1220;
  --ox-source-ink: #FCD34D; --ox-source-soft: #33250B;
  --ox-trial-ink: #CBD5E1; --ox-trial-soft: #1E293B;
  --ox-shadow: 0 1px 2px rgba(0,0,0,.4);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  .oncogx-explorer[data-theme="auto"] {
    --ox-bg: #0A1322; --ox-surface: #0F1B2E; --ox-surface-2: #13233A; --ox-surface-3: #1A2D48;
    --ox-border: #22385A; --ox-border-strong: #2F4B75;
    --ox-text: #E6EDF6; --ox-muted: #B4C2D3; --ox-subtle: #9AAABF;
    --ox-teal-ink: #5EEAD4; --ox-teal-soft: #0E3B3A;
    --ox-danger: #FCA5A5; --ox-danger-soft: #3A1418; --ox-warn: #FCD34D; --ox-warn-soft: #34270B;
    --ox-ok: #6EE7B7; --ox-ok-soft: #0C2F25;
    --ox-gene-ink: #A5B4FC; --ox-gene-soft: #1B1F4B;
    --ox-variant-ink: #93C5FD; --ox-variant-soft: #132a4f;
    --ox-mp-ink: #67E8F9; --ox-mp-soft: #0B3140;
    --ox-evidence-ink: #5EEAD4; --ox-evidence-soft: #0B2F2D;
    --ox-assertion-ink: #D8B4FE; --ox-assertion-soft: #2A1745;
    --ox-therapy-ink: #6EE7B7; --ox-therapy-soft: #0B2E24;
    --ox-disease-ink: #FDA4AF; --ox-disease-soft: #3A1220;
    --ox-source-ink: #FCD34D; --ox-source-soft: #33250B;
    --ox-trial-ink: #CBD5E1; --ox-trial-soft: #1E293B;
    --ox-shadow: 0 1px 2px rgba(0,0,0,.4);
    color-scheme: dark;
  }
}

/* ---------- Scoped base ---------- */
.oncogx-explorer *, .oncogx-explorer *::before, .oncogx-explorer *::after { box-sizing: border-box; }
.oncogx-explorer h1, .oncogx-explorer h2, .oncogx-explorer h3, .oncogx-explorer h4, .oncogx-explorer p,
.oncogx-explorer ul, .oncogx-explorer ol, .oncogx-explorer dl, .oncogx-explorer dd, .oncogx-explorer figure { margin: 0; }
.oncogx-explorer ul, .oncogx-explorer ol { padding: 0; }
.oncogx-explorer h1, .oncogx-explorer h2, .oncogx-explorer h3, .oncogx-explorer h4 { line-height: 1.25; color: inherit; font-family: inherit; letter-spacing: -0.01em; }
.oncogx-explorer a { color: var(--ox-teal-ink); text-decoration: underline; text-underline-offset: 2px; }
.oncogx-explorer a:hover { text-decoration-thickness: 2px; }
.oncogx-explorer button, .oncogx-explorer input, .oncogx-explorer select, .oncogx-explorer textarea { font: inherit; color: inherit; letter-spacing: normal; }
.oncogx-explorer button { cursor: pointer; }
.oncogx-explorer svg { flex: none; }
.oncogx-explorer code, .oncogx-explorer pre { font-family: var(--ox-mono); font-size: .85em; }
.oncogx-explorer :focus-visible { outline: 3px solid var(--ox-focus); outline-offset: 2px; border-radius: 6px; }
.oncogx-explorer .ox-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.oncogx-explorer [hidden] { display: none !important; }
.oncogx-explorer .ox-wrap { max-width: var(--ox-maxw); margin: 0 auto; padding: 0 clamp(16px, 3vw, 32px); }
.oncogx-explorer .ox-muted { color: var(--ox-muted); }
.oncogx-explorer .ox-small { font-size: .875rem; }
.oncogx-explorer .ox-xs { font-size: .78rem; }
.oncogx-explorer .ox-mono { font-family: var(--ox-mono); }
.oncogx-explorer .ox-break { overflow-wrap: anywhere; word-break: break-word; }

/* ---------- Header ---------- */
.oncogx-explorer .ox-header {
  background: radial-gradient(1200px 400px at 90% -20%, rgba(20,184,166,.28), transparent 60%),
              linear-gradient(135deg, var(--ox-navy) 0%, var(--ox-navy-2) 60%, var(--ox-navy-3) 100%);
  color: #fff; padding: 22px 0 30px;
}
.oncogx-explorer .ox-header a { color: #99F6E4; }
.oncogx-explorer .ox-brandrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.oncogx-explorer .ox-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; letter-spacing: .01em; color: #fff; }
.oncogx-explorer .ox-logo-mark { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.08); display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); }
.oncogx-explorer .ox-logo-text span { color: var(--ox-teal); }
.oncogx-explorer .ox-header-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.oncogx-explorer .ox-hbadge {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #E6F6F4;
  font-size: .82rem; line-height: 1.35; text-align: left;
}
.oncogx-explorer button.ox-hbadge:hover { background: rgba(255,255,255,.14); }
.oncogx-explorer .ox-hbadge strong { color: #fff; }
.oncogx-explorer .ox-hbadge-privacy { max-width: 560px; }
.oncogx-explorer .ox-hero { margin-top: 26px; display: grid; gap: 8px; }
.oncogx-explorer .ox-hero h1 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; color: #fff; }
.oncogx-explorer .ox-hero p.ox-sub { color: #CFE3F5; font-size: clamp(1rem, 1.5vw, 1.12rem); }

/* ---------- Search ---------- */
.oncogx-explorer .ox-search { margin-top: 20px; position: relative; }
.oncogx-explorer .ox-searchbox {
  display: flex; align-items: stretch; background: #fff; border-radius: 16px; padding: 6px;
  box-shadow: 0 10px 30px rgba(2,12,27,.28); border: 2px solid transparent;
}
.oncogx-explorer .ox-searchbox:focus-within { border-color: var(--ox-teal); }
.oncogx-explorer .ox-searchbox svg { color: #64748B; margin: 0 6px 0 12px; align-self: center; }
.oncogx-explorer .ox-search-input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: #0F172A;
  font-size: 1.08rem; padding: 14px 8px;
}
.oncogx-explorer .ox-search-input::placeholder { color: #64748B; }
.oncogx-explorer .ox-search-input:focus-visible { outline: none; }
.oncogx-explorer .ox-explore-btn {
  border: 0; border-radius: 12px; padding: 0 26px; font-weight: 700; font-size: 1rem;
  background: var(--ox-teal); color: #042F2C; display: inline-flex; align-items: center; gap: 8px; min-height: 48px;
}
.oncogx-explorer .ox-explore-btn:hover { background: #2DD4BF; }
.oncogx-explorer .ox-helper { margin-top: 10px; color: #CFE3F5; font-size: .9rem; }
.oncogx-explorer .ox-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.oncogx-explorer .ox-pill {
  border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.07); color: #fff;
  border-radius: 999px; padding: 7px 14px; font-size: .88rem; min-height: 36px;
}
.oncogx-explorer .ox-pill:hover { background: rgba(20,184,166,.25); border-color: var(--ox-teal); }
.oncogx-explorer .ox-suggest-toggle { display: inline-flex; gap: 8px; align-items: center; margin-top: 12px; font-size: .85rem; color: #CFE3F5; cursor: pointer; }
.oncogx-explorer .ox-suggest-toggle input { width: 18px; height: 18px; accent-color: var(--ox-teal); }
.oncogx-explorer .ox-suggest {
  position: absolute; left: 0; right: 0; top: 70px; z-index: 30; background: var(--ox-surface); color: var(--ox-text);
  border: 1px solid var(--ox-border); border-radius: 12px; box-shadow: var(--ox-shadow-lg); list-style: none; padding: 6px; max-height: 360px; overflow: auto;
}
.oncogx-explorer .ox-suggest li { padding: 9px 10px; border-radius: 8px; display: flex; gap: 10px; align-items: center; cursor: pointer; }
.oncogx-explorer .ox-suggest li[aria-selected="true"], .oncogx-explorer .ox-suggest li:hover { background: var(--ox-surface-2); }

/* ---------- Status bar ---------- */
.oncogx-explorer .ox-statusbar {
  margin-top: -16px; position: relative; z-index: 5; background: var(--ox-surface); border: 1px solid var(--ox-border);
  border-radius: var(--ox-radius); box-shadow: var(--ox-shadow); padding: 12px 14px;
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between;
}
.oncogx-explorer .ox-status-info { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: .88rem; color: var(--ox-muted); }
.oncogx-explorer .ox-status-info strong { color: var(--ox-text); font-weight: 650; }
.oncogx-explorer .ox-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: #94A3B8; margin-right: 6px; vertical-align: middle; box-shadow: 0 0 0 3px rgba(148,163,184,.25); }
.oncogx-explorer .ox-dot[data-s="ok"] { background: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,.22); }
.oncogx-explorer .ox-dot[data-s="loading"] { background: #0EA5E9; box-shadow: 0 0 0 3px rgba(14,165,233,.25); animation: oxPulse 1.2s ease-in-out infinite; }
.oncogx-explorer .ox-dot[data-s="partial"], .oncogx-explorer .ox-dot[data-s="ratelimited"] { background: #F59E0B; box-shadow: 0 0 0 3px rgba(245,158,11,.25); }
.oncogx-explorer .ox-dot[data-s="error"] { background: #EF4444; box-shadow: 0 0 0 3px rgba(239,68,68,.22); }
.oncogx-explorer .ox-status-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ---------- Buttons ---------- */
.oncogx-explorer .ox-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 7px 13px;
  border-radius: 10px; border: 1px solid var(--ox-border-strong); background: var(--ox-surface); color: var(--ox-text);
  font-size: .88rem; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
}
.oncogx-explorer .ox-btn:hover { background: var(--ox-surface-2); }
.oncogx-explorer .ox-btn:disabled, .oncogx-explorer .ox-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.oncogx-explorer .ox-btn-primary { background: var(--ox-navy); color: #fff; border-color: var(--ox-navy); }
.oncogx-explorer .ox-btn-primary:hover { background: var(--ox-navy-3); }
.oncogx-explorer .ox-btn-teal { background: var(--ox-teal); color: #042F2C; border-color: var(--ox-teal); }
.oncogx-explorer .ox-btn-teal:hover { background: #2DD4BF; }
.oncogx-explorer .ox-btn-danger { color: var(--ox-danger); border-color: color-mix(in srgb, var(--ox-danger) 45%, var(--ox-border)); }
.oncogx-explorer .ox-btn-danger:hover { background: var(--ox-danger-soft); }
.oncogx-explorer .ox-btn-ghost { border-color: transparent; background: transparent; }
.oncogx-explorer .ox-btn-ghost:hover { background: var(--ox-surface-2); }
.oncogx-explorer .ox-btn-sm { min-height: 32px; padding: 5px 10px; font-size: .82rem; border-radius: 8px; }
.oncogx-explorer .ox-iconbtn { width: 40px; height: 40px; padding: 0; }
.oncogx-explorer .ox-linkbtn { background: none; border: 0; padding: 0; color: var(--ox-teal-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; font-size: inherit; }
.oncogx-explorer .ox-menu { position: relative; }
.oncogx-explorer .ox-menu > summary { list-style: none; }
.oncogx-explorer .ox-menu > summary::-webkit-details-marker { display: none; }
.oncogx-explorer .ox-menu-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 250px; background: var(--ox-surface);
  border: 1px solid var(--ox-border); border-radius: 12px; box-shadow: var(--ox-shadow-lg); padding: 6px; display: grid; gap: 2px;
}
.oncogx-explorer .ox-menu-list button { text-align: left; justify-content: flex-start; border: 0; background: transparent; border-radius: 8px; min-height: 40px; }
.oncogx-explorer .ox-menu-list button:hover { background: var(--ox-surface-2); }

/* ---------- Tabs ---------- */
.oncogx-explorer .ox-tabs-wrap { margin-top: 18px; border-bottom: 1px solid var(--ox-border); position: relative; }
.oncogx-explorer .ox-tabs {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  padding-bottom: 1px; position: relative;
}
.oncogx-explorer .ox-tab {
  position: relative; scroll-snap-align: start; flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 11px 13px 10px;
  border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--ox-muted); font-weight: 600; font-size: .9rem;
  border-radius: 8px 8px 0 0; min-height: 46px; white-space: nowrap;
}
.oncogx-explorer .ox-tab:hover { color: var(--ox-text); background: var(--ox-surface-2); }
.oncogx-explorer .ox-tab[aria-selected="true"] { color: var(--ox-navy); border-bottom-color: var(--ox-teal); background: var(--ox-surface); }
.oncogx-explorer[data-theme="dark"] .ox-tab[aria-selected="true"] { color: #fff; }
.oncogx-explorer .ox-tab-count { font-size: .72rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--ox-surface-3); color: var(--ox-muted); }
.oncogx-explorer .ox-tab[aria-selected="true"] .ox-tab-count { background: var(--ox-teal-soft); color: var(--ox-teal-ink); }
.oncogx-explorer .ox-tab-dot { width: 8px; height: 8px; border-radius: 50%; }

/* ---------- Panels & layout ---------- */
.oncogx-explorer .ox-main { padding-top: 22px; padding-bottom: 36px; min-height: 420px; }
.oncogx-explorer .ox-panel { animation: oxFade .22s ease-out; }
.oncogx-explorer .ox-panel:focus-visible { outline-offset: 6px; }
.oncogx-explorer .ox-panel-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.oncogx-explorer .ox-panel-head h2 { font-size: 1.35rem; font-weight: 750; }
.oncogx-explorer .ox-panel-head p { color: var(--ox-muted); font-size: .92rem; margin-top: 3px; max-width: 75ch; }
.oncogx-explorer .ox-card {
  background: var(--ox-surface); border: 1px solid var(--ox-border); border-radius: var(--ox-radius); box-shadow: var(--ox-shadow);
}
.oncogx-explorer .ox-card-pad { padding: 18px; }
.oncogx-explorer .ox-section-title { font-size: 1.02rem; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.oncogx-explorer .ox-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.oncogx-explorer .ox-grid-2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.oncogx-explorer .ox-stack { display: grid; gap: 16px; }
.oncogx-explorer .ox-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.oncogx-explorer .ox-spacer { flex: 1; }

/* ---------- Notices ---------- */
.oncogx-explorer .ox-notice { border-radius: 12px; padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; border: 1px solid; margin-bottom: 14px; }
.oncogx-explorer .ox-notice svg { margin-top: 2px; }
.oncogx-explorer .ox-notice-warn { background: var(--ox-warn-soft); border-color: color-mix(in srgb, var(--ox-warn) 35%, transparent); color: var(--ox-warn); }
.oncogx-explorer .ox-notice-error { background: var(--ox-danger-soft); border-color: color-mix(in srgb, var(--ox-danger) 35%, transparent); color: var(--ox-danger); }
.oncogx-explorer .ox-notice-info { background: var(--ox-surface-2); border-color: var(--ox-border); color: var(--ox-muted); }
.oncogx-explorer .ox-notice-ok { background: var(--ox-ok-soft); border-color: color-mix(in srgb, var(--ox-ok) 35%, transparent); color: var(--ox-ok); }
.oncogx-explorer .ox-notice .ox-btn { margin-left: auto; }

/* ---------- Empty states ---------- */
.oncogx-explorer .ox-empty { text-align: center; padding: 42px 18px; color: var(--ox-muted); }
.oncogx-explorer .ox-empty h3 { color: var(--ox-text); font-size: 1.15rem; margin: 12px 0 6px; }
.oncogx-explorer .ox-empty p { max-width: 60ch; margin: 0 auto; }
.oncogx-explorer .ox-empty .ox-row { justify-content: center; margin-top: 16px; }
.oncogx-explorer .ox-empty-icon { width: 64px; height: 64px; border-radius: 18px; margin: 0 auto; display: grid; place-items: center; background: var(--ox-teal-soft); color: var(--ox-teal-ink); }

/* ---------- Welcome ---------- */
.oncogx-explorer .ox-welcome { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.oncogx-explorer .ox-steps { list-style: none; display: grid; gap: 12px; counter-reset: s; }
.oncogx-explorer .ox-steps li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; }
.oncogx-explorer .ox-steps li::before { counter-increment: s; content: counter(s); width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--ox-navy); color: #fff; font-weight: 800; }
.oncogx-explorer[data-theme="dark"] .ox-steps li::before { background: var(--ox-teal-ink); color: #042F2C; }
.oncogx-explorer .ox-pledge { list-style: none; display: grid; gap: 8px; font-size: .92rem; }
.oncogx-explorer .ox-pledge li { display: flex; gap: 8px; align-items: flex-start; }
.oncogx-explorer .ox-pledge svg { color: var(--ox-teal-ink); margin-top: 3px; }
.oncogx-explorer .ox-entity-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

/* ---------- Stat tiles ---------- */
.oncogx-explorer .ox-stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
.oncogx-explorer .ox-stat {
  text-align: left; border: 1px solid var(--ox-border); background: var(--ox-surface); border-radius: 12px; padding: 14px;
  display: grid; gap: 2px; border-top: 4px solid var(--c, var(--ox-teal)); min-height: 96px; box-shadow: var(--ox-shadow);
}
.oncogx-explorer button.ox-stat:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15,23,42,.08); }
.oncogx-explorer .ox-stat-n { font-size: 1.6rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.oncogx-explorer .ox-stat-l { font-size: .84rem; color: var(--ox-muted); font-weight: 600; }
.oncogx-explorer .ox-stat-s { font-size: .74rem; color: var(--ox-subtle); }

/* ---------- Bars ---------- */
.oncogx-explorer .ox-bars { list-style: none; display: grid; gap: 8px; }
.oncogx-explorer .ox-bar { display: grid; grid-template-columns: minmax(90px, 34%) 1fr 48px; gap: 10px; align-items: center; font-size: .86rem; }
.oncogx-explorer .ox-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oncogx-explorer .ox-bar-track { display: block; height: 12px; background: var(--ox-surface-3); border-radius: 999px; overflow: hidden; }
.oncogx-explorer .ox-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--c, var(--ox-teal)); transform-origin: left; animation: oxGrow .5s ease-out; }
.oncogx-explorer .ox-bar-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }

/* ---------- Badges ---------- */
.oncogx-explorer .ox-badge {
  --b-bg: var(--ox-surface-3); --b-fg: var(--ox-muted);
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: .76rem; font-weight: 700;
  background: var(--b-bg); color: var(--b-fg); line-height: 1.5; white-space: nowrap; border: 1px solid color-mix(in srgb, var(--b-fg) 20%, transparent);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.oncogx-explorer .ox-badge-lg { font-size: .85rem; padding: 3px 11px; }
.oncogx-explorer .ox-lvl-A { --b-bg: #DCFCE7; --b-fg: #166534; }
.oncogx-explorer .ox-lvl-B { --b-bg: #DBEAFE; --b-fg: #1E40AF; }
.oncogx-explorer .ox-lvl-C { --b-bg: #FEF9C3; --b-fg: #854D0E; }
.oncogx-explorer .ox-lvl-D { --b-bg: #FEE2E2; --b-fg: #991B1B; }
.oncogx-explorer .ox-lvl-E { --b-bg: #E2E8F0; --b-fg: #334155; }
.oncogx-explorer .ox-sig-sensitivity { --b-bg: #DCFCE7; --b-fg: #166534; }
.oncogx-explorer .ox-sig-resistance { --b-bg: #FEE2E2; --b-fg: #991B1B; }
.oncogx-explorer .ox-sig-reduced { --b-bg: #FFE4E6; --b-fg: #9F1239; }
.oncogx-explorer .ox-sig-adverse { --b-bg: #FFE4E6; --b-fg: #9F1239; }
.oncogx-explorer .ox-sig-prognostic { --b-bg: #F3E8FF; --b-fg: #6B21A8; }
.oncogx-explorer .ox-sig-diagnostic { --b-bg: #CFFAFE; --b-fg: #155E75; }
.oncogx-explorer .ox-sig-predisposing { --b-bg: #FEF3C7; --b-fg: #92400E; }
.oncogx-explorer .ox-sig-functional { --b-bg: #F1F5F9; --b-fg: #374151; }
.oncogx-explorer .ox-sig-susceptibility { --b-bg: #FFEDD5; --b-fg: #9A3412; }
.oncogx-explorer .ox-sig-context { --b-bg: #E2E8F0; --b-fg: #1E293B; }
.oncogx-explorer .ox-st-ACCEPTED { --b-bg: #ECFDF5; --b-fg: #047857; }
.oncogx-explorer .ox-st-SUBMITTED { --b-bg: #FFFBEB; --b-fg: #92400E; }
.oncogx-explorer .ox-st-REJECTED { --b-bg: #FEF2F2; --b-fg: #B91C1C; }
.oncogx-explorer .ox-badge-flag { --b-bg: #FEF3C7; --b-fg: #92400E; }
.oncogx-explorer .ox-badge-ok { --b-bg: #ECFDF5; --b-fg: #047857; }
.oncogx-explorer[data-theme="dark"] .ox-badge { background: color-mix(in srgb, var(--b-fg) 24%, #0B1526); color: color-mix(in srgb, var(--b-fg) 30%, #FFFFFF); border-color: color-mix(in srgb, var(--b-fg) 45%, transparent); }
@media (prefers-color-scheme: dark) {
  .oncogx-explorer[data-theme="auto"] .ox-badge { background: color-mix(in srgb, var(--b-fg) 24%, #0B1526); color: color-mix(in srgb, var(--b-fg) 30%, #FFFFFF); border-color: color-mix(in srgb, var(--b-fg) 45%, transparent); }
}

/* Entity type chips */
.oncogx-explorer [data-type="gene"] { --c: var(--ox-gene); --ci: var(--ox-gene-ink); --cs: var(--ox-gene-soft); }
.oncogx-explorer [data-type="variant"] { --c: var(--ox-variant); --ci: var(--ox-variant-ink); --cs: var(--ox-variant-soft); }
.oncogx-explorer [data-type="mp"] { --c: var(--ox-mp); --ci: var(--ox-mp-ink); --cs: var(--ox-mp-soft); }
.oncogx-explorer [data-type="evidence"] { --c: var(--ox-evidence); --ci: var(--ox-evidence-ink); --cs: var(--ox-evidence-soft); }
.oncogx-explorer [data-type="assertion"] { --c: var(--ox-assertion); --ci: var(--ox-assertion-ink); --cs: var(--ox-assertion-soft); }
.oncogx-explorer [data-type="therapy"] { --c: var(--ox-therapy); --ci: var(--ox-therapy-ink); --cs: var(--ox-therapy-soft); }
.oncogx-explorer [data-type="disease"] { --c: var(--ox-disease); --ci: var(--ox-disease-ink); --cs: var(--ox-disease-soft); }
.oncogx-explorer [data-type="source"] { --c: var(--ox-source); --ci: var(--ox-source-ink); --cs: var(--ox-source-soft); }
.oncogx-explorer [data-type="trial"], .oncogx-explorer [data-type="cohort"] { --c: var(--ox-trial); --ci: var(--ox-trial-ink); --cs: var(--ox-trial-soft); }
.oncogx-explorer .ox-type {
  display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ci); background: var(--cs); border-radius: 6px; padding: 2px 7px; white-space: nowrap;
}
.oncogx-explorer .ox-type::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.oncogx-explorer .ox-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px; border-radius: 999px; font-size: .82rem; font-weight: 600;
  background: var(--cs, var(--ox-surface-2)); color: var(--ci, var(--ox-text)); border: 1px solid color-mix(in srgb, var(--c, #94A3B8) 30%, transparent);
  text-decoration: none; min-height: 30px; text-align: left;
}
.oncogx-explorer button.ox-chip:hover { border-color: var(--c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 18%, transparent); }
.oncogx-explorer .ox-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oncogx-explorer .ox-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Result cards ---------- */
.oncogx-explorer .ox-rcard {
  position: relative; background: var(--ox-surface); border: 1px solid var(--ox-border); border-radius: var(--ox-radius);
  padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--ox-shadow); min-width: 0;
  border-left: 4px solid var(--c, var(--ox-teal)); animation: oxRise .25s ease-out both;
}
.oncogx-explorer .ox-rcard:hover { box-shadow: 0 8px 24px rgba(15,23,42,.09); }
.oncogx-explorer .ox-rcard-top { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; }
.oncogx-explorer .ox-rcard-title { font-size: 1.05rem; font-weight: 750; line-height: 1.3; overflow-wrap: anywhere; }
.oncogx-explorer .ox-rcard-title button { all: unset; cursor: pointer; border-radius: 4px; }
.oncogx-explorer .ox-rcard-title button:hover { color: var(--ci); text-decoration: underline; }
.oncogx-explorer .ox-rcard-title button:focus-visible { outline: 3px solid var(--ox-focus); outline-offset: 2px; }
.oncogx-explorer .ox-rcard-sub { color: var(--ox-muted); font-size: .88rem; overflow-wrap: anywhere; }
.oncogx-explorer .ox-rcard-desc { font-size: .9rem; color: var(--ox-text); overflow-wrap: anywhere; }
.oncogx-explorer .ox-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.oncogx-explorer .ox-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .82rem; color: var(--ox-muted); }
.oncogx-explorer .ox-meta b { color: var(--ox-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.oncogx-explorer .ox-rcard-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding-top: 8px; border-top: 1px dashed var(--ox-border); }
.oncogx-explorer .ox-kv { display: grid; grid-template-columns: minmax(110px, 36%) 1fr; gap: 6px 12px; font-size: .9rem; }
.oncogx-explorer .ox-kv dt { color: var(--ox-muted); font-weight: 600; }
.oncogx-explorer .ox-kv dd { overflow-wrap: anywhere; min-width: 0; }
.oncogx-explorer .ox-stars { color: #D97706; letter-spacing: 1px; }

/* ---------- Toolbar & filters ---------- */
.oncogx-explorer .ox-toolbar { background: var(--ox-surface); border: 1px solid var(--ox-border); border-radius: var(--ox-radius); padding: 12px 14px; margin-bottom: 14px; display: grid; gap: 12px; }
.oncogx-explorer .ox-toolbar-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.oncogx-explorer .ox-context {
  display: inline-flex; align-items: center; gap: 8px; background: var(--ox-teal-soft); color: var(--ox-teal-ink); border-radius: 999px; padding: 5px 6px 5px 12px; font-size: .85rem; font-weight: 600; max-width: 100%;
}
.oncogx-explorer .ox-context span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oncogx-explorer .ox-context button { border: 0; background: rgba(15,118,110,.14); color: inherit; border-radius: 999px; width: 26px; height: 26px; display: grid; place-items: center; }
.oncogx-explorer .ox-filters { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
.oncogx-explorer .ox-field { display: grid; gap: 4px; min-width: 0; }
.oncogx-explorer .ox-field label, .oncogx-explorer .ox-field .ox-label { font-size: .78rem; font-weight: 700; color: var(--ox-muted); }
.oncogx-explorer .ox-input, .oncogx-explorer .ox-select {
  width: 100%; min-height: 40px; border: 1px solid var(--ox-border-strong); border-radius: 9px; padding: 8px 10px; background: var(--ox-surface); color: var(--ox-text); font-size: .9rem;
}
.oncogx-explorer .ox-input:focus, .oncogx-explorer .ox-select:focus { outline: none; border-color: var(--ox-teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ox-teal) 30%, transparent); }
.oncogx-explorer .ox-filter-details > summary { cursor: pointer; font-weight: 700; font-size: .9rem; display: inline-flex; gap: 8px; align-items: center; padding: 4px 0; }
.oncogx-explorer .ox-filter-details[open] > summary { margin-bottom: 10px; }
.oncogx-explorer .ox-unsupported { font-size: .78rem; color: var(--ox-subtle); }
.oncogx-explorer .ox-seg { display: inline-flex; border: 1px solid var(--ox-border-strong); border-radius: 10px; overflow: hidden; }
.oncogx-explorer .ox-seg button { border: 0; background: var(--ox-surface); padding: 7px 12px; font-size: .84rem; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; min-height: 38px; }
.oncogx-explorer .ox-seg button[aria-pressed="true"] { background: var(--ox-navy); color: #fff; }
.oncogx-explorer[data-theme="dark"] .ox-seg button[aria-pressed="true"] { background: var(--ox-teal-ink); color: #042F2C; }
.oncogx-explorer .ox-inline { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--ox-muted); }
.oncogx-explorer .ox-inline .ox-select { width: auto; min-height: 38px; padding: 6px 8px; }

/* ---------- Table ---------- */
.oncogx-explorer .ox-table-wrap { overflow-x: auto; border: 1px solid var(--ox-border); border-radius: var(--ox-radius); background: var(--ox-surface); }
.oncogx-explorer table.ox-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.oncogx-explorer .ox-table th { text-align: left; background: var(--ox-surface-2); color: var(--ox-muted); font-weight: 700; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; padding: 10px 12px; border-bottom: 1px solid var(--ox-border); white-space: nowrap; position: sticky; top: 0; }
.oncogx-explorer .ox-table td { padding: 10px 12px; border-bottom: 1px solid var(--ox-border); vertical-align: top; max-width: 340px; overflow-wrap: anywhere; }
.oncogx-explorer .ox-table tr:last-child td { border-bottom: 0; }
.oncogx-explorer .ox-table tbody tr:hover { background: var(--ox-surface-2); }
.oncogx-explorer .ox-table .ox-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Pagination ---------- */
.oncogx-explorer .ox-pager { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-top: 16px; }
.oncogx-explorer .ox-pager-btns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.oncogx-explorer .ox-pager-jump { width: 76px; min-height: 36px; }

/* ---------- Skeleton ---------- */
.oncogx-explorer .ox-skel { border-radius: 8px; background: linear-gradient(90deg, var(--ox-surface-3) 25%, var(--ox-surface-2) 37%, var(--ox-surface-3) 63%); background-size: 400% 100%; animation: oxShimmer 1.3s ease infinite; }
.oncogx-explorer .ox-skel-card { height: 176px; border-radius: var(--ox-radius); }
.oncogx-explorer .ox-skel-line { height: 12px; margin: 8px 0; }

/* ---------- Relationship explorer ---------- */
.oncogx-explorer .ox-path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.oncogx-explorer .ox-path-node { font-size: .78rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; border: 1px dashed var(--ox-border-strong); color: var(--ox-subtle); background: var(--ox-surface); }
.oncogx-explorer .ox-path-node.is-seen { border-style: solid; color: var(--ci); background: var(--cs); border-color: color-mix(in srgb, var(--c) 40%, transparent); }
.oncogx-explorer .ox-path-node.is-current { background: var(--c); color: #fff; border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.oncogx-explorer .ox-path-arrow { color: var(--ox-subtle); }
.oncogx-explorer .ox-crumbs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: .86rem; list-style: none; }
.oncogx-explorer .ox-crumbs li { display: inline-flex; align-items: center; gap: 4px; }
.oncogx-explorer .ox-crumbs button { border: 0; background: none; color: var(--ox-teal-ink); text-decoration: underline; padding: 2px 4px; border-radius: 4px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oncogx-explorer .ox-crumbs [aria-current="true"] { color: var(--ox-text); font-weight: 700; text-decoration: none; }
.oncogx-explorer .ox-explorer { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); align-items: start; }
.oncogx-explorer .ox-focus { border-top: 5px solid var(--c); }
.oncogx-explorer .ox-rel { border: 1px solid var(--ox-border); border-radius: 12px; background: var(--ox-surface); overflow: hidden; }
.oncogx-explorer .ox-rel + .ox-rel { margin-top: 10px; }
.oncogx-explorer .ox-rel > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-weight: 700; }
.oncogx-explorer .ox-rel > summary::-webkit-details-marker { display: none; }
.oncogx-explorer .ox-rel > summary:hover { background: var(--ox-surface-2); }
.oncogx-explorer .ox-rel > summary .ox-caret { transition: transform .2s; color: var(--ox-subtle); }
.oncogx-explorer .ox-rel[open] > summary .ox-caret { transform: rotate(90deg); }
.oncogx-explorer .ox-rel-body { padding: 4px 14px 14px; display: grid; gap: 10px; }
.oncogx-explorer .ox-rel-count { margin-left: auto; font-size: .78rem; font-weight: 700; color: var(--ox-muted); background: var(--ox-surface-3); padding: 2px 8px; border-radius: 999px; }
.oncogx-explorer .ox-compare-grid { overflow-x: auto; }
.oncogx-explorer .ox-compare-grid table { min-width: 100%; }

/* ---------- Drawer & modal (native <dialog>) ---------- */
.oncogx-explorer dialog { color: var(--ox-text); background: var(--ox-surface); border: 0; padding: 0; font-family: var(--ox-font); }
.oncogx-explorer dialog::backdrop { background: rgba(8, 20, 38, .55); backdrop-filter: blur(2px); }
.oncogx-explorer .ox-drawer {
  position: fixed; inset: 0 0 0 auto; margin: 0; height: 100dvh; max-height: 100dvh; width: min(720px, 100vw); max-width: 100vw;
  box-shadow: var(--ox-shadow-lg); display: flex; flex-direction: column; border-left: 1px solid var(--ox-border);
}
.oncogx-explorer .ox-drawer[open] { animation: oxSlideIn .26s cubic-bezier(.2,.8,.2,1); }
.oncogx-explorer .ox-drawer:not([open]) { display: none; }
.oncogx-explorer .ox-drawer-head { padding: 14px 18px; border-bottom: 1px solid var(--ox-border); display: grid; gap: 8px; background: var(--ox-surface); position: relative; }
.oncogx-explorer .ox-drawer-head::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--c, var(--ox-teal)); }
.oncogx-explorer .ox-drawer-title { font-size: 1.3rem; font-weight: 800; overflow-wrap: anywhere; }
.oncogx-explorer .ox-drawer-body { overflow-y: auto; padding: 16px 18px 24px; display: grid; gap: 18px; align-content: start; flex: 1; overscroll-behavior: contain; }
.oncogx-explorer .ox-drawer-foot { padding: 12px 18px; border-top: 1px solid var(--ox-border); display: flex; flex-wrap: wrap; gap: 8px; background: var(--ox-surface-2); }
.oncogx-explorer .ox-drawer h3 { font-size: .95rem; font-weight: 750; margin-bottom: 8px; }
.oncogx-explorer .ox-desc-full { white-space: pre-line; font-size: .95rem; overflow-wrap: anywhere; }
.oncogx-explorer .ox-modal { width: min(720px, calc(100vw - 24px)); max-height: min(88dvh, 900px); border-radius: 18px; box-shadow: var(--ox-shadow-lg); }
.oncogx-explorer .ox-modal[open] { display: flex; flex-direction: column; animation: oxPop .2s ease-out; }
.oncogx-explorer .ox-modal-head { padding: 16px 20px; border-bottom: 1px solid var(--ox-border); display: flex; gap: 12px; align-items: center; }
.oncogx-explorer .ox-modal-head h2 { font-size: 1.2rem; font-weight: 800; }
.oncogx-explorer .ox-modal-body { padding: 18px 20px; overflow-y: auto; display: grid; gap: 14px; font-size: .94rem; }
.oncogx-explorer .ox-modal-body ul { padding-left: 1.2em; display: grid; gap: 6px; }
.oncogx-explorer .ox-modal-foot { padding: 12px 20px; border-top: 1px solid var(--ox-border); display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; background: var(--ox-surface-2); }
.oncogx-explorer .ox-legal { font-size: .84rem; color: var(--ox-muted); border-left: 3px solid var(--ox-teal); padding: 10px 12px; background: var(--ox-surface-2); border-radius: 0 8px 8px 0; display: grid; gap: 4px; }
.oncogx-explorer .ox-code { background: #0B1526; color: #D7E3F4; border-radius: 10px; padding: 12px; overflow: auto; font-size: .8rem; line-height: 1.5; max-height: 360px; white-space: pre; }
.oncogx-explorer textarea.ox-input { min-height: 160px; font-family: var(--ox-mono); font-size: .8rem; }

/* ---------- Footer ---------- */
.oncogx-explorer .ox-footer { background: var(--ox-navy); color: #C9D8EA; padding: 26px 0; font-size: .86rem; }
.oncogx-explorer .ox-footer a { color: #99F6E4; }
.oncogx-explorer .ox-footer-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.oncogx-explorer .ox-footer strong { color: #fff; }
.oncogx-explorer .ox-footer p + p { margin-top: 6px; }

/* ---------- Toast ---------- */
.oncogx-explorer .ox-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2147483000; background: var(--ox-navy); color: #fff; padding: 10px 16px; border-radius: 10px; box-shadow: var(--ox-shadow-lg); font-size: .9rem; max-width: calc(100vw - 32px); animation: oxPop .2s ease-out; }

/* ---------- Animations ---------- */
@keyframes oxFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes oxRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes oxSlideIn { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes oxSlideUp { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes oxPop { from { transform: scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes oxGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes oxShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@keyframes oxPulse { 50% { opacity: .45; } }
@keyframes oxSpin { to { transform: rotate(360deg); } }
.oncogx-explorer .ox-spin { animation: oxSpin 1s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .oncogx-explorer *, .oncogx-explorer *::before, .oncogx-explorer *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .oncogx-explorer .ox-explorer { grid-template-columns: minmax(0, 1fr); }
  .oncogx-explorer .ox-welcome { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .oncogx-explorer .ox-header { padding: 16px 0 26px; }
  .oncogx-explorer .ox-searchbox { flex-wrap: wrap; }
  .oncogx-explorer .ox-searchbox > svg { display: none; }
  .oncogx-explorer .ox-search-input { flex-basis: 100%; padding: 12px 10px; }
  .oncogx-explorer .ox-explore-btn { flex: 1; justify-content: center; }
  .oncogx-explorer .ox-suggest { top: 124px; }
  .oncogx-explorer .ox-statusbar { margin-top: -12px; }
  .oncogx-explorer .ox-status-actions .ox-btn span.ox-hide-sm { display: none; }
  .oncogx-explorer .ox-kv { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .oncogx-explorer .ox-kv dd { margin-bottom: 8px; }
  .oncogx-explorer .ox-bar { grid-template-columns: minmax(80px, 38%) 1fr 40px; }
  .oncogx-explorer .ox-footer-grid { grid-template-columns: minmax(0, 1fr); }
  /* Detail drawer becomes a bottom sheet on mobile */
  .oncogx-explorer .ox-drawer { inset: auto 0 0 0; width: 100vw; height: auto; max-height: 90dvh; border-left: 0; border-radius: 18px 18px 0 0; }
  .oncogx-explorer .ox-drawer[open] { animation: oxSlideUp .26s cubic-bezier(.2,.8,.2,1); }
  .oncogx-explorer .ox-drawer-head { border-radius: 18px 18px 0 0; padding-top: 18px; }
  .oncogx-explorer .ox-drawer-head::after { content: ""; position: absolute; top: 7px; left: 50%; width: 44px; height: 4px; margin-left: -22px; border-radius: 4px; background: var(--ox-border-strong); }
  .oncogx-explorer .ox-drawer-head::before { border-radius: 18px 18px 0 0; }
  .oncogx-explorer .ox-tab { padding: 10px 11px; }
  .oncogx-explorer .ox-btn, .oncogx-explorer .ox-chip { min-height: 40px; }
}

/* ---------- Print ---------- */
@media print {
  .oncogx-explorer { background: #fff !important; color: #000 !important; }
  .oncogx-explorer .ox-header { background: none !important; color: #000 !important; padding: 0 0 8px; }
  .oncogx-explorer .ox-header * { color: #000 !important; }
  .oncogx-explorer .ox-search, .oncogx-explorer .ox-statusbar, .oncogx-explorer .ox-tabs-wrap, .oncogx-explorer .ox-pager,
  .oncogx-explorer .ox-toolbar, .oncogx-explorer .ox-rcard-foot .ox-btn, .oncogx-explorer dialog, .oncogx-explorer .ox-toast,
  .oncogx-explorer .ox-no-print, .oncogx-explorer .ox-hbadge-privacy { display: none !important; }
  .oncogx-explorer .ox-rcard, .oncogx-explorer .ox-card { box-shadow: none !important; break-inside: avoid; }
  .oncogx-explorer .ox-footer { background: none !important; color: #000 !important; border-top: 1px solid #999; }
  .oncogx-explorer .ox-footer * { color: #000 !important; }
  .oncogx-explorer .ox-clamp { -webkit-line-clamp: unset; display: block; }
}

/* ======================================================================
   OncoGx site theme overrides
   Map the explorer's --ox-* tokens onto the site's design tokens so the
   tool matches the rest of OncoGx in light and dark mode. The explorer's
   data-theme follows the site toggle (see pages/oncology-explorer.html).
   ====================================================================== */
.oncogx-explorer,
.oncogx-explorer[data-theme] {
  --ox-navy: #1C1A33;
  --ox-navy-2: #26234A;
  --ox-navy-3: #2F2A63;
  --ox-teal: #4CC3C8;
  --ox-bg: var(--bg);
  --ox-surface: var(--surface);
  --ox-surface-2: var(--surface-2);
  --ox-border: var(--line);
  --ox-text: var(--ink);
  --ox-muted: var(--muted);
  --ox-teal-ink: var(--primary);
  --ox-teal-soft: var(--primary-soft);
  --ox-focus: var(--primary);
  --ox-font: var(--sans);
  --ox-radius: var(--r-md);
  --ox-maxw: var(--maxw);
}
.oncogx-explorer .ox-wrap { padding-inline: var(--gutter); }
.oncogx-explorer .ox-header {
  background: radial-gradient(900px 380px at 88% -10%, rgba(107,91,196,.45), transparent 60%),
              radial-gradient(700px 300px at 0% 120%, rgba(76,195,200,.28), transparent 60%),
              linear-gradient(135deg, var(--ox-navy) 0%, var(--ox-navy-2) 60%, var(--ox-navy-3) 100%);
  border-radius: 0;
}
.oncogx-explorer .ox-header a { color: #9EE3E6; }
.oncogx-explorer .ox-brandrow { justify-content: flex-start; }
.oncogx-explorer .ox-hero h1,
.oncogx-explorer .ox-section-title,
.oncogx-explorer .ox-panel-head h2,
.oncogx-explorer .ox-drawer-title,
.oncogx-explorer .ox-modal-head h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; }
.oncogx-explorer .ox-footer { background: var(--surface-2); color: var(--ink-2, var(--muted)); border-top: 1px solid var(--line); }
.oncogx-explorer .ox-footer a,
.oncogx-explorer .ox-footer .ox-linkbtn { color: var(--primary); }
.oncogx-explorer .ox-footer strong { color: var(--ink); }

/* page chrome around the explorer */
.explorer-intro { padding-top: 18px; background: var(--bg); }
.explorer-intro .notice { margin-block: .9rem; }