/* Personal Genome Explorer — house style shared with S&P PE Tracker and
   AI Portfolio Monitor. Dark navy, slate cards, blue accent, system sans. */

:root {
  color-scheme: dark;

  --bg: #0b1020;                       /* page */
  --card: rgba(30, 41, 59, 0.4);       /* slate-800 @ 40% */
  --card-solid: #0f172a;               /* slate-900 solid surface */
  --bg-hover: rgba(51, 65, 85, 0.35);  /* slate-700 @ 35% */
  --border: #334155;                   /* slate-700 */
  --border-soft: rgba(51, 65, 85, 0.6);

  --text: #e5e7eb;
  --text-dim: #94a3b8;
  --text-very-dim: #64748b;

  --accent: #2563eb;
  --accent-bright: #3b82f6;
  --positive: #22c55e;
  --negative: #ef4444;
  --warn: #f59e0b;
  --critical: #ef4444;
  --info: #38bdf8;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 12px;
  --radius-sm: 8px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--bg); color-scheme: dark; }

body {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 20px 56px;
  background: transparent;
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
}

button { font: inherit; cursor: pointer; }
a { color: var(--accent-bright); text-decoration: none; }
a:hover { text-decoration: underline; }

/* === Header ============================================================ */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand-mark { color: var(--accent-bright); font-size: 20px; line-height: 1; }
.brand-name {
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.01em;
  color: #fff;
}
/* Sample picker sits in the header between brand and action buttons. */
.sample-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  margin-right: 8px;
}
.sample-picker label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-very-dim);
}
.sample-picker select {
  background: var(--card-solid);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 32px 8px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%2394a3b8' d='M2 4l4 4 4-4z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  min-width: 140px;
  transition: border-color 0.15s ease;
}
.sample-picker select:hover { border-color: var(--accent); }
.sample-picker select:focus { outline: none; border-color: var(--accent); }

.header-actions { display: flex; gap: 8px; }
.header-actions button {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text-dim);
  width: 34px; height: 34px;
  font-size: 15px;
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.header-actions button:hover:not(:disabled) {
  background: var(--bg-hover);
  color: #fff;
  border-color: var(--accent);
}
.header-actions button:disabled { opacity: 0.35; cursor: not-allowed; }

/* === Status strip ====================================================== */
.status-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat .label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-very-dim);
}
.stat .value {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.stat .value.ok { color: var(--positive); }
.stat .value.warn { color: var(--warn); }
.stat .value.bad { color: var(--negative); }
.stat .value.dim { color: var(--text-dim); font-weight: 500; font-size: 14px; }

/* === Search ============================================================ */
.search { margin-bottom: 20px; }
.search form { display: flex; gap: 8px; }
.search input[type="text"] {
  flex: 1;
  padding: 12px 14px;
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13.5px;
  font-family: var(--mono);
  outline: none;
}
.search input[type="text"]:focus { border-color: var(--accent); }
.search button {
  padding: 12px 22px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.search button:hover:not(:disabled) { background: var(--accent-bright); }
.search button:disabled { opacity: 0.5; cursor: not-allowed; }
.hint {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-dim);
}
.hint label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.hint input[type="checkbox"] { accent-color: var(--accent); }
.hint-examples { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.hint-examples a { font-family: var(--mono); font-size: 12px; }

/* === Result summary chips ============================================== */
.summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--text-dim);
  font-family: var(--mono);
}
.tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 9999px;
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--card);
}
.tag.intent { border-color: var(--accent); color: var(--accent-bright); }
.tag.cached { border-color: var(--warn); color: var(--warn); }
.tag.sample { border-color: var(--positive); color: var(--positive); font-weight: 600; }

/* === Gene diagram ====================================================== */
.gene-diagram {
  position: relative;
  padding: 14px 4px 8px;
  margin: 0 -4px 12px;
  border-bottom: 1px solid var(--border-soft);
}
.gene-diagram.loading { min-height: 60px; }
.gene-diagram-placeholder {
  color: var(--text-very-dim);
  font-size: 12px;
  font-family: var(--mono);
  padding: 8px 0;
}
.gene-diagram-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: flex-end;
  padding: 4px 6px 8px;
  font-size: 11.5px;
  color: var(--text-dim);
}
.gene-diagram-legend .lg-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.gene-diagram-legend .lg-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  display: inline-block;
}
.gene-diagram-legend .lg-count {
  color: var(--text-very-dim);
  font-family: var(--mono);
  font-size: 11px;
  margin-left: 2px;
}
.gene-diagram-svg-wrap { width: 100%; overflow-x: auto; }
.gene-diagram-svg-wrap svg {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}
.variant-tick { cursor: default; }
.variant-tick:hover line { stroke-width: 3.5; }
.gene-diagram-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding: 4px 6px 0;
  font-size: 11.5px;
  color: var(--text-very-dim);
  flex-wrap: wrap;
}
.variant-tick-tooltip {
  position: fixed;              /* viewport coords so we can't be clipped by .card overflow */
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text);
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  z-index: 200;
  max-width: 340px;
}
.variant-tick-tooltip .tip-line { margin: 2px 0; font-family: var(--mono); font-size: 11.5px; }
.variant-tick-tooltip .tip-dim { color: var(--text-dim); font-size: 11px; }
.variant-tick-tooltip code {
  background: rgba(148, 163, 184, 0.15);
  padding: 0 4px;
  border-radius: 3px;
}
.variant-tick-tooltip .tier-red { color: #ef4444; font-weight: 600; }
.variant-tick-tooltip .tier-amber { color: #f59e0b; font-weight: 600; }
.variant-tick-tooltip .tier-purple { color: #a855f7; font-weight: 600; }
.variant-tick-tooltip .tier-grey { color: var(--text-dim); }

/* === "Did you mean" chips ============================================= */
.suggest-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(37, 99, 235, 0.08);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
}
.suggest-label {
  font-size: 12px;
  color: var(--text-dim);
  margin-right: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.suggest-chip {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--accent);
  border-radius: 9999px;
  background: transparent;
  color: var(--accent-bright);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none !important;
  transition: all 0.15s ease;
}
.suggest-chip:hover {
  background: var(--accent);
  color: #fff;
}

/* === Panels / cards ==================================================== */
.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 16px;
}
.panel h2 {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 10px;
}
.panel h3 {
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 12px;
}
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
}
.card-title {
  background: var(--card-solid);
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--border);
}
.card-title .count {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-very-dim);
  font-weight: 500;
}
.card-body { padding: 4px 20px 12px; }
.card-body p { color: var(--text-dim); padding: 10px 0; }

.interpretation {
  border-left: 3px solid var(--accent);
}
/* F3c: the deterministic post-check flagged the prose as unverified. */
.interp-unverified {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: rgba(239, 68, 68, 0.10);
  border-left: 3px solid #ef4444;
  border-radius: 4px;
  font-size: 12.5px;
  line-height: 1.5;
}
.interp-unverified ul { margin: 6px 0 0; padding-left: 20px; }
/* F3b: the model saw only the top-N most material items. */
.interp-truncation {
  margin: 0 0 12px;
  padding: 8px 12px;
  background: rgba(59, 130, 246, 0.10);
  border-left: 3px solid #3b82f6;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
}
.interpretation .prose { color: var(--text); font-size: 13.5px; line-height: 1.65; }
.interpretation .prose h1, .interpretation .prose h2, .interpretation .prose h3 {
  color: #fff;
  font-weight: 600;
  margin: 16px 0 8px;
}
.interpretation .prose h1 { font-size: 16px; }
.interpretation .prose h2 { font-size: 15px; }
.interpretation .prose h3 { font-size: 14px; }
.interpretation .prose ul, .interpretation .prose ol { padding-left: 22px; margin: 6px 0 10px; }
.interpretation .prose li { margin-bottom: 4px; }
.interpretation .prose code {
  background: var(--card-solid);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--info);
}
.interpretation .prose strong { color: #fff; }
.interpretation .prose table {
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0;
}
.interpretation .prose th, .interpretation .prose td {
  border-bottom: 1px solid var(--border-soft);
  padding: 6px 8px;
  text-align: left;
  font-size: 12.5px;
}
.interpretation .prose th { color: var(--text-dim); font-weight: 600; }
.model {
  font-size: 11px;
  color: var(--text-very-dim);
  font-family: var(--mono);
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}

/* === Variant rows ====================================================== */
.variant {
  border-top: 1px solid var(--border-soft);
  padding: 12px 0;
  display: grid;
  grid-template-columns: 160px 1fr;
  column-gap: 16px;
  row-gap: 4px;
  font-size: 12.5px;
}
.variant:first-of-type { border-top: none; padding-top: 6px; }
/* Row colour comes from Impact and ClinVar spans, not a left border. */
.clinvar-red    { color: #ef4444; font-weight: 600; }
.clinvar-green  { color: #22c55e; }
.clinvar-purple { color: #a855f7; font-weight: 600; }
.clinvar-grey   { color: var(--text-dim); }
/* Reference link chips — shown on red/amber/purple variants only. */
.ref-link {
  display: inline-block;
  padding: 1px 8px;
  margin-right: 6px;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.12);
  border: 1px solid rgba(37, 99, 235, 0.35);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.ref-link:hover {
  background: rgba(37, 99, 235, 0.22);
  border-color: var(--accent);
}
.variant .k {
  color: var(--text-very-dim);
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.variant .v {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text);
  word-break: break-word;
}
.variant .v.impact-HIGH { color: var(--negative); font-weight: 600; }
.variant .v.impact-MODERATE { color: var(--warn); font-weight: 600; }
.variant .v.impact-LOW { color: var(--positive); }
.variant .v.impact-MODIFIER { color: var(--text-very-dim); }

/* === GWAS grid ========================================================== */
.gwas-row {
  display: grid;
  grid-template-columns: 100px 130px 1fr 110px 90px 60px;
  column-gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--border-soft);
  font-family: var(--mono);
  font-size: 12px;
  align-items: baseline;
}
.gwas-row:first-of-type { border-top: none; }
.gwas-row .rsid { color: var(--accent-bright); }
.gwas-row .trait { color: var(--text); }
.gwas-row .gene { color: var(--text-dim); }
.gwas-row .pval { color: var(--text-very-dim); text-align: right; }
.gwas-row .carried {
  text-align: center;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.gwas-row .carried.yes { background: rgba(37, 99, 235, 0.2); color: var(--accent-bright); }
.gwas-row .carried.no { background: transparent; color: var(--text-very-dim); }
.gwas-row.header {
  padding: 6px 0 10px;
  color: var(--text-very-dim);
  text-transform: uppercase;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-top: none;
  border-bottom: 1px solid var(--border);
}

.paper {
  border-top: 1px solid var(--border-soft);
  padding: 10px 0;
}
.paper:first-of-type { border-top: none; padding-top: 4px; }
.paper .title { color: var(--text); font-weight: 500; font-size: 13px; }
.paper .meta {
  color: var(--text-very-dim);
  font-family: var(--mono);
  font-size: 11.5px;
  margin-top: 3px;
}

/* === Empty state ======================================================== */
#empty-state .panel { max-width: 620px; }
#empty-state h2 {
  font-weight: 600;
  color: #fff;
  font-size: 16px;
  margin-bottom: 10px;
}
#empty-state ul { padding-left: 22px; margin: 8px 0; color: var(--text-dim); }
#empty-state li { margin: 6px 0; }
#empty-state b { color: var(--text); }
#empty-state i { color: var(--accent-bright); font-style: normal; }
.disclaimer {
  margin-top: 16px;
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.08);
  border-left: 3px solid var(--critical);
  color: var(--text-dim);
  font-size: 12px;
  border-radius: var(--radius-sm);
}

/* === Error box ========================================================== */
.error {
  padding: 14px 16px;
  background: rgba(239, 68, 68, 0.08);
  color: var(--negative);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 12.5px;
  white-space: pre-wrap;
}

/* === Family-picker modal =============================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
/* The HTML `hidden` attribute is overridden by `display: flex` above.
   Force it back with an attribute-scoped rule of matching specificity. */
.modal-backdrop[hidden] { display: none !important; }
.modal {
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 620px;
  width: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  overflow: hidden;
}
.modal-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
.modal-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 22px;
  cursor: pointer;
  padding: 0 6px;
  line-height: 1;
}
.modal-close:hover { color: #fff; }
.modal-body { padding: 20px; }
.modal-lead {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 14px;
}
.modal-lead b { color: var(--text); }

.family-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.family-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--accent);
  border-radius: 9999px;
  background: transparent;
  color: var(--accent-bright);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}
.family-chip:hover {
  background: var(--accent);
  color: #fff;
}

/* === Toast ============================================================== */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--card-solid);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.toast.ok { border-color: var(--positive); color: var(--positive); }
.toast.bad { border-color: var(--negative); color: var(--negative); }

/* ---------- HLA card ---------- */
.hla-grid { display: flex; flex-direction: column; gap: 14px; }
.hla-locus {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border);
}
.hla-locus:last-child { border-bottom: none; padding-bottom: 0; }
.hla-letter {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  padding-top: 4px;
}
.hla-alleles { display: flex; flex-direction: column; gap: 10px; }
.hla-chip {
  border-left: 3px solid var(--border);
  padding: 6px 10px;
  background: rgba(148, 163, 184, 0.05);
  border-radius: 4px;
}
.hla-chip-red    { border-left-color: #ef4444; background: rgba(239, 68, 68, 0.06); }
.hla-chip-amber  { border-left-color: #f59e0b; background: rgba(245, 158, 11, 0.06); }
.hla-chip-green  { border-left-color: #22c55e; background: rgba(34, 197, 94, 0.06); }
.hla-allele {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.hla-notes { margin-top: 6px; display: flex; flex-direction: column; gap: 5px; }
.hla-note {
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.5;
}
.hla-note strong { color: var(--text-dim); }
.hla-note-adverse-drug-reaction strong { color: #ef4444; }
.hla-note-risk strong { color: #f59e0b; }
.hla-note-protective strong { color: #22c55e; }
.hla-note-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
.hla-note-body { line-height: 1.55; }
.hla-linked { margin-top: 3px; color: var(--text-dim); font-size: 12px; font-style: italic; }
.hla-chip-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
  line-height: 1.4;
  vertical-align: middle;
}
.hla-tier-1 { background: rgba(239, 68, 68, 0.20); color: #f87171; border-color: rgba(239, 68, 68, 0.55); }
.hla-tier-2 { background: rgba(245, 158, 11, 0.18); color: #fbbf24; border-color: rgba(245, 158, 11, 0.55); }
.hla-tier-3 { background: rgba(234, 179, 8, 0.15); color: #eab308; border-color: rgba(234, 179, 8, 0.45); }
.hla-tier-4 { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; border-color: rgba(148, 163, 184, 0.45); }
.hla-verified { background: rgba(34, 197, 94, 0.15); color: #4ade80; border-color: rgba(34, 197, 94, 0.45); }
.hla-unverified { background: rgba(148, 163, 184, 0.12); color: #94a3b8; border-color: rgba(148, 163, 184, 0.35); }
.hla-badge-group { background: rgba(139, 92, 246, 0.18); color: #a78bfa; border-color: rgba(139, 92, 246, 0.45); }
.pgx-cpic-level { background: rgba(59, 130, 246, 0.18); color: #60a5fa; border-color: rgba(59, 130, 246, 0.45); }
.pgx-header { color: var(--text-dim); font-size: 13px; margin-bottom: 8px; }
.pgx-awaiting {
  margin-top: 8px; padding: 10px 12px;
  background: rgba(37, 99, 235, 0.08);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  font-size: 12.5px; line-height: 1.55;
  color: var(--text);
}
.pgx-quarantine {
  margin: 0 0 10px; padding: 10px 12px;
  background: rgba(220, 38, 38, 0.09);
  border-left: 3px solid var(--danger, #dc2626);
  border-radius: 4px;
  font-size: 12.5px; line-height: 1.55;
  color: var(--text);
}
/* CALLABILITY (INV-PGX-003): a reference/"Normal" call standing on uncallable
   positions is absence of evidence, not a negative result. Amber, not red —
   it is an uncertainty warning, distinct from the red quarantine banner. */
.pgx-cannot-exclude {
  margin: 0 0 10px; padding: 10px 12px;
  background: rgba(217, 119, 6, 0.11);
  border-left: 3px solid var(--warn, #d97706);
  border-radius: 4px;
  font-size: 12.5px; line-height: 1.55;
  color: var(--text);
}
.pgx-reduced-coverage {
  margin: 0 0 10px; padding: 8px 12px;
  background: rgba(100, 116, 139, 0.10);
  border-left: 3px solid var(--muted, #64748b);
  border-radius: 4px;
  font-size: 12px; line-height: 1.5;
  color: var(--text);
}
.pgx-your-call-caveat {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed rgba(217, 119, 6, 0.45);
  font-size: 12px; line-height: 1.5;
}
.pgx-conf-chip {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  background: rgba(217, 119, 6, 0.16);
  border: 1px solid rgba(217, 119, 6, 0.45);
  border-radius: 999px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: var(--warn, #d97706);
}
.pgx-report-link { margin: 6px 0 0; font-size: 12px; }
/* EGRESS DISCLOSURE (R-010): findings left the machine to produce this summary.
   Informational blue — this is a statement of fact, not a warning. */
.interp-egress {
  margin: 0 0 10px; padding: 9px 12px;
  background: rgba(59, 130, 246, 0.10);
  border-left: 3px solid var(--accent, #3b82f6);
  border-radius: 4px;
  font-size: 12px; line-height: 1.55;
  color: var(--text);
}
.interp-egress code {
  padding: 1px 5px; border-radius: 3px;
  background: rgba(127, 127, 127, 0.18); font-size: 11.5px;
}
.gt-badge {
  display: inline-block; margin-left: 6px; padding: 0 6px;
  border-radius: 3px; font-size: 10.5px; font-weight: 600; vertical-align: middle;
}
.gt-carried      { background: rgba(34,197,94,0.16);  color: #16a34a; border: 1px solid rgba(34,197,94,0.4); }
.gt-not-carried  { background: rgba(148,163,184,0.14); color: var(--text-dim); border: 1px solid rgba(148,163,184,0.35); }
.gt-unknown      { background: rgba(234,179,8,0.14);  color: #b8860b; border: 1px solid rgba(234,179,8,0.4); }
.align-construction-note {
  margin: 0 0 12px; padding: 10px 12px;
  background: rgba(234, 179, 8, 0.10);
  border-left: 3px solid #eab308;
  border-radius: 4px;
  font-size: 12.5px; line-height: 1.55; color: var(--text);
}
.pgx-record { margin-top: 10px; }
.pgx-record-title { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pgx-record-meta { display: flex; gap: 8px; flex-wrap: wrap; color: var(--text-dim); font-size: 12px; margin-bottom: 6px; }
.pgx-guideline { padding: 1px 6px; border-radius: 3px; background: rgba(59, 130, 246, 0.10); border: 1px solid rgba(59, 130, 246, 0.35); font-size: 11px; }
.pgx-drug-class { padding: 1px 6px; border-radius: 3px; background: rgba(148, 163, 184, 0.10); border: 1px solid rgba(148, 163, 184, 0.30); font-size: 11px; font-style: italic; }
.pgx-mechanism, .pgx-adr { font-size: 12.5px; line-height: 1.55; margin-top: 6px; color: var(--text); }
.pgx-pheno-table { width: 100%; margin-top: 10px; font-size: 12.5px; border-collapse: collapse; }
.pgx-pheno-table th { text-align: left; padding: 6px 8px; color: var(--text-dim); border-bottom: 1px solid var(--border); font-weight: 600; font-size: 11.5px; letter-spacing: 0.03em; }
.pgx-pheno-table td { padding: 6px 8px; vertical-align: top; border-bottom: 1px solid rgba(148, 163, 184, 0.10); }
.pgx-pheno-label { font-weight: 600; color: var(--text); white-space: nowrap; }
.pgx-pheno-reco strong { display: block; }
.pgx-reco-strength { display: inline-block; margin-top: 3px; padding: 0 5px; border-radius: 3px; font-size: 10px; letter-spacing: 0.04em; background: rgba(148,163,184,0.12); color: var(--text-dim); border: 1px solid rgba(148,163,184,0.25); }
.pgx-pheno-impl { color: var(--text-dim); }
.pgx-pheno-danger { background: rgba(239, 68, 68, 0.06); }
.pgx-pheno-danger .pgx-pheno-label { color: #f87171; }
.pgx-pheno-caution { background: rgba(234, 179, 8, 0.06); }
.pgx-pheno-caution .pgx-pheno-label { color: #eab308; }
.pgx-pheno-your-call {
  outline: 2px solid rgba(59, 130, 246, 0.55);
  background: rgba(59, 130, 246, 0.10) !important;
}
.pgx-pheno-your-call .pgx-pheno-label { color: #60a5fa; font-weight: 700; }
.pgx-your-call {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 12.5px;
  line-height: 1.5;
  border-left: 3px solid #60a5fa;
  background: rgba(59, 130, 246, 0.08);
}
.pgx-your-call-danger { border-left-color: #ef4444; background: rgba(239, 68, 68, 0.10); }
.pgx-your-call-caution { border-left-color: #eab308; background: rgba(234, 179, 8, 0.10); }
.pgx-your-call-clean { border-left-color: #22c55e; background: rgba(34, 197, 94, 0.08); }
.pgx-your-call-info { border-left-color: #94a3b8; background: rgba(148, 163, 184, 0.08); }
.pgx-your-call-head { color: var(--text); }
.pgx-your-call-reco { margin-top: 5px; color: var(--text); }
.pgx-your-call-impl { margin-top: 3px; color: var(--text-dim); }
.pgx-call-dip { font-family: var(--mono); color: #f472b6; font-weight: 600; }
.pgx-call-pheno { color: var(--text); font-weight: 600; }
.pgx-call-activity { color: var(--text-dim); font-size: 11.5px; }
/* ---------- Atopy (atopic dermatitis + food allergy) card ---------- */
.atopy-header-line { font-size: 12.5px; color: var(--text-dim); line-height: 1.55; margin-bottom: 10px; }
.atopy-header-line strong { color: var(--text); }
.atopy-flg-banner {
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 12.5px;
  line-height: 1.5;
}
.atopy-flg-carrier { background: rgba(239, 68, 68, 0.10); border-left: 3px solid #ef4444; }
.atopy-flg-noncarrier { background: rgba(148, 163, 184, 0.08); border-left: 3px solid #94a3b8; color: var(--text-dim); }
.atopy-hla-warning { padding: 8px 10px; border-radius: 4px; background: rgba(234, 179, 8, 0.10); border-left: 3px solid #eab308; font-size: 12px; margin-top: 6px; }
.atopy-record { margin-top: 10px; border-left: 3px solid transparent; }
.atopy-record.atopy-effect-risk       { border-left-color: rgba(239, 68, 68, 0.55); }
.atopy-record.atopy-effect-protective { border-left-color: rgba(34, 197, 94, 0.55); }
.atopy-record.atopy-carrier-yes .card-title { background: rgba(239, 68, 68, 0.05); }
.atopy-record.atopy-effect-protective.atopy-carrier-yes .card-title { background: rgba(34, 197, 94, 0.05); }
.atopy-record-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.atopy-record-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.atopy-locus { font-family: var(--mono); }
.atopy-dbsnp { font-family: var(--mono); color: #f472b6; }
.atopy-pheno-tag {
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(59, 130, 246, 0.10);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.30);
  font-size: 11px;
}
.atopy-applicability { font-size: 12.5px; color: var(--text); margin-bottom: 6px; padding: 6px 10px; background: rgba(148, 163, 184, 0.06); border-radius: 3px; }
.atopy-record.atopy-carrier-yes .atopy-applicability { background: rgba(239, 68, 68, 0.08); }
.atopy-record.atopy-effect-protective.atopy-carrier-yes .atopy-applicability { background: rgba(34, 197, 94, 0.08); }
.atopy-detail { font-size: 12.5px; color: var(--text-dim); margin-top: 4px; }
.atopy-mechanism, .atopy-functional, .atopy-notes { font-size: 12.5px; line-height: 1.55; margin-top: 6px; color: var(--text); }
.atopy-effect-risk-chip       { background: rgba(239, 68, 68, 0.20); color: #f87171; border-color: rgba(239, 68, 68, 0.55); }
.atopy-effect-protective-chip { background: rgba(34, 197, 94, 0.20); color: #4ade80; border-color: rgba(34, 197, 94, 0.55); }
.atopy-carrier-chip-yes     { background: rgba(239, 68, 68, 0.18); color: #f87171; border-color: rgba(239, 68, 68, 0.55); }
.atopy-carrier-chip-no      { background: rgba(148, 163, 184, 0.12); color: #94a3b8; border-color: rgba(148, 163, 184, 0.35); }
.atopy-carrier-chip-unknown { background: rgba(59, 130, 246, 0.12); color: #93c5fd; border-color: rgba(59, 130, 246, 0.35); }
.atopy-context-explain { color: var(--text-dim); font-size: 12px; }
.atopy-context-details { margin-top: 0; padding: 0 var(--pad-card); padding-bottom: 12px; }
.atopy-context-details summary { cursor: pointer; color: var(--text-dim); user-select: none; margin-bottom: 6px; }

.pgx-effect-sizes, .pgx-refs { margin-top: 10px; font-size: 12px; }
.pgx-effect-sizes summary, .pgx-refs summary { cursor: pointer; color: var(--text-dim); user-select: none; }
.pgx-effect-table { width: 100%; margin-top: 6px; font-size: 11.5px; border-collapse: collapse; }
.pgx-effect-table th, .pgx-effect-table td { padding: 4px 6px; text-align: left; border-bottom: 1px solid rgba(148, 163, 184, 0.10); }
.pgx-effect-table th { color: var(--text-dim); }
.pgx-refs ul { padding-left: 18px; margin: 6px 0 0; font-size: 12px; line-height: 1.5; }
.hla-none { color: var(--text-very-dim); font-style: italic; font-size: 12.5px; }
.hla-caveat {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(37, 99, 235, 0.06);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}
.hla-caveat strong { color: var(--text); }
.hla-summary {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 10px;
}
.hla-assoc {
  padding: 8px 10px;
  margin: 6px 0;
  border-left: 3px solid var(--border);
  background: rgba(148, 163, 184, 0.05);
  border-radius: 4px;
}
.hla-assoc-red    { border-left-color: #ef4444; background: rgba(239, 68, 68, 0.08); }
.hla-assoc-amber  { border-left-color: #f59e0b; background: rgba(245, 158, 11, 0.08); }
.hla-assoc-green  { border-left-color: #22c55e; background: rgba(34, 197, 94, 0.08); }
.hla-assoc-head {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 12.5px;
  margin-bottom: 4px;
}
.hla-allele-tag {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--text);
}
.hla-carrier-yes {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  letter-spacing: 0.06em;
}
.hla-carrier-no {
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 1px 8px;
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.1);
  color: var(--text-very-dim);
  letter-spacing: 0.06em;
}
.hla-effect { color: var(--text-dim); font-size: 12px; }
.hla-assoc-note { font-size: 12.5px; line-height: 1.55; color: var(--text); }
.hla-nc-heading {
  margin-top: 14px;
  font-size: 11.5px;
  color: var(--text-very-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hla-provenance {
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-dim);
}
.hla-chip-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.hla-source-badge {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
  letter-spacing: 0.06em;
}
.hla-source-called {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.35);
}
.hla-source-imputed {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.35);
}
.hla-source-highres {
  background: rgba(37, 99, 235, 0.14);
  color: var(--accent);
  border: 1px solid rgba(37, 99, 235, 0.45);
}
.hla-warn {
  margin: 8px 12px;
  padding: 10px 14px;
  background: rgba(245, 158, 11, 0.10);
  border-left: 3px solid #f59e0b;
  border-radius: 4px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}
.hla-warn strong { color: #f59e0b; }
.hla-disagreement {
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-dim);
}
.hla-disagreement-warn {
  background: rgba(245, 158, 11, 0.08);
  border-left: 2px solid #f59e0b;
}
.hla-disagreement-ok {
  background: rgba(34, 197, 94, 0.06);
  border-left: 2px solid #22c55e;
}
.hla-alt {
  display: inline-block;
  padding: 0 6px;
  margin-right: 6px;
  border-radius: 3px;
  font-weight: 600;
}
.hla-alt-warn {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}
.hla-alt-ok {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
}
.hla-chip-imputed { border-left-style: dashed; }
.hla-locus-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-very-dim);
  margin-top: 2px;
}
.hla-inline-badge {
  font-family: var(--mono);
  font-size: 9px;
  padding: 0 4px;
  border-radius: 6px;
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  vertical-align: super;
}

/* ---------- Coding-changes table (HGVS summary for gene queries) ---------- */
.coding-changes-card { margin-top: 8px; }
.coding-empty { color: var(--text-dim); font-size: 12.5px; }
.coding-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.coding-table thead th {
  text-align: left;
  padding: 6px 8px;
  color: var(--text-very-dim);
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
}
.coding-table tbody td {
  padding: 6px 8px;
  border-bottom: 1px dashed var(--border);
  vertical-align: top;
}
.coding-table tbody tr:last-child td { border-bottom: none; }
.coding-table .mono {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text);
  word-break: break-word;
}
.coding-row.impact-HIGH { background: rgba(239, 68, 68, 0.05); }
.coding-row.impact-MODERATE { background: rgba(245, 158, 11, 0.04); }
.coding-row .impact-HIGH     { color: #ef4444; font-weight: 600; font-family: var(--mono); font-size: 11px; }
.coding-row .impact-MODERATE { color: #f59e0b; font-weight: 600; font-family: var(--mono); font-size: 11px; }
.coding-row .impact-LOW      { color: var(--text-dim); font-family: var(--mono); font-size: 11px; }
.coding-row .impact-MODIFIER { color: var(--text-very-dim); font-family: var(--mono); font-size: 11px; }

/* ---------- Sanity chips + banner ---------- */
/* Provenance+QC hygiene banner (whole-sample, under the header). */
.quality-banner {
  margin: 10px 16px 0 16px;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 12.5px;
  line-height: 1.5;
}
.quality-reduced { background: rgba(234, 179, 8, 0.10); border-left: 3px solid #eab308; color: var(--text); }
.quality-fatal   { background: rgba(239, 68, 68, 0.12); border-left: 3px solid #ef4444; color: var(--text); }
.quality-banner .qb-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.quality-banner .qb-sub { color: var(--muted, #9aa4b2); font-size: 11.5px; font-weight: 500; }
.quality-banner .qb-flags { margin: 6px 0 0 0; padding-left: 18px; }
.quality-banner .qb-flags li { margin: 2px 0; }

.sanity-banner {
  margin: 0 0 12px 0;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 12.5px;
  line-height: 1.5;
}
.sanity-strong { background: rgba(239, 68, 68, 0.10); border-left: 3px solid #ef4444; color: var(--text); }
.sanity-ambiguous { background: rgba(168, 85, 247, 0.10); border-left: 3px solid #a855f7; color: var(--text); }
.sanity-warn   { background: rgba(234, 179, 8, 0.10); border-left: 3px solid #eab308; color: var(--text); }
.sanity-count-strong { color: #f87171; font-weight: 600; }
.sanity-count-ambiguous { color: #c084fc; font-weight: 600; }
.sanity-count-warn   { color: #eab308; font-weight: 600; }
.sanity-count-clean  { color: #4ade80; font-weight: 600; }
.sanity-chip {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
  margin-right: 3px;
  vertical-align: middle;
  cursor: help;
}
.sanity-chip.sanity-strong { background: rgba(239, 68, 68, 0.20); color: #f87171; border-color: rgba(239, 68, 68, 0.55); }
.sanity-chip.sanity-ambiguous { background: rgba(168, 85, 247, 0.18); color: #c084fc; border-color: rgba(168, 85, 247, 0.50); }
.sanity-chip.sanity-warn   { background: rgba(234, 179, 8, 0.15); color: #eab308; border-color: rgba(234, 179, 8, 0.45); }
.sanity-chip.sanity-info   { background: rgba(148, 163, 184, 0.12); color: #cbd5e1; border-color: rgba(148, 163, 184, 0.35); }
.sanity-clean { color: #4ade80; font-weight: 700; cursor: help; }

/* ---------- External alignment / reference view buttons ---------- */
.align-links { margin-top: 8px; }
.align-links-placeholder {
  padding: 12px;
  color: var(--text-dim);
  font-size: 12.5px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
}
.align-card { }
.align-body { }
.align-lead {
  color: var(--text-dim);
  font-size: 12.5px;
  line-height: 1.55;
  margin-bottom: 12px;
}
.align-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.align-btn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(37, 99, 235, 0.35);
  border-radius: 6px;
  background: rgba(37, 99, 235, 0.06);
  color: var(--text);
  text-decoration: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.align-btn:hover {
  background: rgba(37, 99, 235, 0.14);
  border-color: var(--accent);
}
.align-btn-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
}
.align-btn-sub {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-dim);
}
.align-btn-disabled {
  border-style: dashed;
  border-color: var(--border);
  background: rgba(148, 163, 184, 0.05);
  color: var(--text-very-dim);
  cursor: not-allowed;
}
.align-btn-disabled:hover {
  background: rgba(148, 163, 184, 0.05);
  border-color: var(--border);
}
.align-btn-disabled .align-btn-label { color: var(--text-dim); }
.align-btn-primary {
  background: rgba(34, 197, 94, 0.10);
  border-color: rgba(34, 197, 94, 0.40);
}
.align-btn-primary:hover {
  background: rgba(34, 197, 94, 0.18);
  border-color: #22c55e;
}
.align-btn-primary .align-btn-label { color: #22c55e; }

/* ---------- Alignment modal ---------- */
.align-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.75);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.align-modal {
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  width: min(1200px, 100%);
  height: min(90vh, 900px);
  display: flex;
  flex-direction: column;
  color: var(--text);
}
.align-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.align-modal-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.align-modal-close {
  background: transparent;
  color: var(--text-dim);
  border: none;
  font-size: 24px;
  line-height: 1;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 4px;
}
.align-modal-close:hover { color: var(--text); background: rgba(148,163,184,0.1); }
.align-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 20px 0;
  border-bottom: 1px solid var(--border);
}
.align-tab {
  padding: 8px 16px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.align-tab:hover { color: var(--text); }
.align-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.align-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.align-loading {
  color: var(--text-dim);
  text-align: center;
  padding: 40px;
  font-size: 13px;
}
.align-error {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.35);
  padding: 14px 18px;
  border-radius: 4px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
}
.align-error strong { color: #ef4444; }
.align-panel-head { margin-bottom: 8px; }
.align-panel-head h3 { margin: 0; font-size: 13px; font-weight: 600; }
.align-panel-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}
.align-panel-legend {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin: 10px 0 16px;
  font-size: 11px;
  color: var(--text-dim);
}
.align-legend-swatch {
  display: inline-block;
  padding: 0 4px;
  border-radius: 3px;
  font-family: var(--mono);
  margin-right: 4px;
}
.align-legend-hap2 { color: var(--text-very-dim); font-style: italic; }
.align-block {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}
.align-pos {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-very-dim);
  margin-bottom: 4px;
}
.align-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 8px;
  align-items: center;
  line-height: 1.7;
}
.align-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  text-align: right;
}
.align-seq {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  color: var(--text);
  word-break: break-all;
  white-space: pre-wrap;
}
.align-diff-ref {
  background: rgba(148, 163, 184, 0.18);
  color: var(--text-dim);
  padding: 0 2px;
  border-radius: 2px;
}
.align-diff-alt {
  background: rgba(239, 68, 68, 0.20);
  color: #f87171;
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 700;
}
.align-empty-banner {
  margin: 12px 0;
  padding: 12px 14px;
  background: rgba(37, 99, 235, 0.08);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.55;
}
.align-artifact-banner {
  margin: 12px 0;
  padding: 12px 14px;
  background: rgba(234, 179, 8, 0.10);
  border-left: 3px solid #eab308;
  border-radius: 4px;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.55;
}
.align-artifact-detail {
  margin-top: 6px;
  color: var(--muted);
}
.align-artifact-status {
  margin-top: 8px;
  color: var(--text);
  font-size: 12.5px;
}
.align-artifact-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.align-artifact-prompt {
  color: var(--muted);
  font-size: 12.5px;
  margin-right: 4px;
}
.align-artifact-btn {
  padding: 4px 10px;
  border: 1px solid rgba(234, 179, 8, 0.55);
  background: transparent;
  border-radius: 4px;
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
  transition: background 120ms;
}
.align-artifact-btn:hover {
  background: rgba(234, 179, 8, 0.12);
}
.align-artifact-btn.active {
  background: rgba(234, 179, 8, 0.28);
  border-color: rgba(234, 179, 8, 0.85);
  font-weight: 600;
}

/* Alignment ruler for protein sequences — every 10th residue, column-aligned.
   The ruler rows reuse .align-seq (same font-size + letter-spacing) so their
   character grid lines up 1:1 with the sequence below; only colour/leading
   change. Tight line-height keeps the number line and tick line together. */
.align-ruler {
  line-height: 1.2;
}
.align-ruler + .align-row:not(.align-ruler) {
  margin-top: 4px;
}
.align-ruler-seq {
  color: var(--text-very-dim);
  font-weight: 600;
}

/* Highlights for protein functional regions (e.g., drug binding sites) */
.align-highlights-legend {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin: 8px 0 12px;
  font-size: 11px;
  color: var(--text-dim);
}
.align-highlight-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.align-highlight-swatch {
  display: inline-block;
  width: 12px;
  height: 14px;
  border-radius: 2px;
}
.highlight-primary {
  background: rgba(249, 115, 22, 0.35);
  color: inherit;
  text-decoration: wavy underline;
  text-decoration-color: rgba(249, 115, 22, 0.5);
  text-underline-offset: 2px;
}
.highlight-region {
  background: rgba(59, 130, 246, 0.12);
  color: inherit;
}
.align-diff-ref.highlight-primary {
  background: rgba(249, 115, 22, 0.35);
  text-decoration: wavy underline;
  text-decoration-color: rgba(249, 115, 22, 0.5);
}
.align-diff-alt.highlight-primary {
  background: rgba(249, 115, 22, 0.35);
  text-decoration: wavy underline;
  text-decoration-color: rgba(249, 115, 22, 0.5);
}
.align-diff-ref.highlight-region {
  background: rgba(59, 130, 246, 0.12);
}
.align-diff-alt.highlight-region {
  background: rgba(59, 130, 246, 0.12);
}

.align-legend-ruler {
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
}

/* ---------- Truncating (loss-of-function) screen modal ---------- */
.modal.modal-wide { max-width: 1040px; width: 94vw; }
#lof-modal .modal-body { max-height: 78vh; overflow-y: auto; }

.lof-headline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.lof-stat {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  text-align: center;
}
.lof-stat b { display: block; font-size: 1.7rem; line-height: 1.1; color: var(--text); }
.lof-stat span { display: block; margin-top: 4px; font-size: .78rem; color: var(--text-dim); }
.lof-stat.ok b { color: var(--positive); }
.lof-stat.alert b { color: var(--warn); }

.lof-h {
  margin: 22px 0 8px;
  font-size: .95rem;
  color: var(--text);
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 6px;
}
.lof-none { color: var(--text-dim); font-size: .88rem; margin: 6px 0; }
.lof-error { color: var(--negative); }
.lof-dim { color: var(--text-very-dim); }
.lof-mono { font-family: var(--mono); font-size: .82rem; }

.lof-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.lof-table th {
  text-align: left;
  color: var(--text-dim);
  font-weight: 600;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
.lof-table td { padding: 8px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.lof-gene { font-weight: 700; color: var(--accent-bright); }
.lof-why td { padding-top: 0; border-bottom: 1px solid var(--border-soft); }
.lof-why ul { margin: 0 0 4px 18px; padding: 0; }
.lof-why li { color: var(--text-dim); font-size: .8rem; line-height: 1.5; }

.lof-verdict {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 600;
  white-space: nowrap;
}
.lof-verdict.v-alert { background: rgba(245, 158, 11, .16); color: var(--warn); border: 1px solid rgba(245, 158, 11, .35); }
.lof-verdict.v-mute  { background: rgba(100, 116, 139, .16); color: var(--text-dim); border: 1px solid var(--border-soft); }
.lof-verdict.v-info  { background: rgba(56, 189, 248, .14); color: var(--info); border: 1px solid rgba(56, 189, 248, .3); }
.lof-verdict.v-warn  { background: rgba(239, 68, 68, .14); color: var(--negative); border: 1px solid rgba(239, 68, 68, .3); }

.lof-funnel td:first-child { color: var(--text-dim); }
.lof-note { margin-top: 10px; font-size: .82rem; color: var(--text-dim); }
.lof-note b { color: var(--text); }

.lof-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lof-chip {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: .8rem;
  color: var(--text-dim);
}
.lof-chip b { color: var(--text); margin-left: 4px; }

.lof-disclaimer {
  margin-top: 22px;
  padding: 12px 14px;
  background: rgba(239, 68, 68, .07);
  border: 1px solid rgba(239, 68, 68, .2);
  border-radius: var(--radius-sm);
  font-size: .8rem;
  color: var(--text-dim);
  line-height: 1.6;
}
.lof-disclaimer b { color: var(--text); }
#btn-lof { font-size: .82rem; white-space: nowrap; padding: 6px 12px; width: auto; }
.lof-verdict.v-crit {
  background: rgba(239, 68, 68, .2);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, .55);
  font-weight: 700;
}
.lof-crit-text { color: #fca5a5; }
.lof-stat.crit b { color: var(--critical); }

/* Artefact banners now render once, above the tab panels (not per-panel). */
.align-artifact-banners { margin-bottom: 14px; }
.align-artifact-banner.is-ignored { opacity: .82; border-style: dashed; }

/* Locus lookup with no call: an ambiguous absence, not a negative result. */
.no-call-banner {
  border: 1px solid rgba(245, 158, 11, .4);
  background: rgba(245, 158, 11, .08);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.no-call-head { color: var(--warn); font-weight: 600; margin-bottom: 6px; }
.no-call-banner p { color: var(--text-dim); font-size: .88rem; line-height: 1.55; margin: 0; }

/* ---------------------------------------------------------------------------
   Blood group (ABO + RhD)

   The disclaimer is styled as the loudest element on the card ON PURPOSE — it
   outranks the group letter visually. A genotype-derived blood group that gets
   screenshotted without its caveat is the specific harm this guards against, so
   it is a solid red band rather than a soft tint, and it is not dismissible.
   --------------------------------------------------------------------------- */
.bg-disclaimer {
  margin: 8px 12px 14px;
  padding: 11px 14px;
  background: rgba(239, 68, 68, 0.13);
  border: 1px solid rgba(239, 68, 68, 0.45);
  border-left: 4px solid var(--critical);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
}
.bg-disclaimer strong { color: #fca5a5; }

.bg-headline { display: flex; align-items: center; gap: 20px; padding: 8px 0 4px; flex-wrap: wrap; }
.bg-letter {
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--text);
  min-width: 78px;
  text-align: center;
  padding: 12px 10px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.bg-letter-unknown { color: var(--text-very-dim); border-style: dashed; }
.bg-headline-meta { flex: 1 1 260px; min-width: 0; }
.bg-tokens { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }

.bg-geno {
  font-family: var(--mono);
  font-size: 14px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: rgba(37, 99, 235, 0.18);
  border: 1px solid rgba(59, 130, 246, 0.45);
  color: #bfdbfe;
}
.bg-geno-unknown { background: transparent; border-style: dashed; color: var(--text-very-dim); }

.bg-rh { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid; }
.bg-rh-neg { background: rgba(56, 189, 248, 0.14); border-color: rgba(56, 189, 248, 0.5); color: #7dd3fc; }
.bg-rh-pos { background: rgba(34, 197, 94, 0.13); border-color: rgba(34, 197, 94, 0.45); color: #86efac; }
.bg-rh-unk { background: transparent; border-color: var(--border); color: var(--text-very-dim); border-style: dashed; }

.bg-conf { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.4px;
           padding: 3px 9px; border-radius: 999px; border: 1px solid; }
.bg-conf-high     { background: rgba(34, 197, 94, 0.12);  border-color: rgba(34,197,94,0.4);  color: #86efac; }
.bg-conf-moderate { background: rgba(245, 158, 11, 0.12); border-color: rgba(245,158,11,0.4); color: #fcd34d; }

.bg-message { color: var(--text-dim); font-size: 13.5px; line-height: 1.6; }

.bg-note {
  margin: 10px 0 0; padding: 9px 12px;
  background: var(--bg-hover); border-left: 3px solid var(--border);
  border-radius: 4px; color: var(--text-dim); font-size: 12.5px; line-height: 1.55;
}
.bg-warn {
  margin: 10px 0 0; padding: 10px 13px;
  background: rgba(245, 158, 11, 0.10); border-left: 3px solid var(--warn);
  border-radius: 4px; color: var(--text); font-size: 12.5px; line-height: 1.55;
}
.bg-warn strong { color: var(--warn); }

.bg-rh-interp { color: var(--text) !important; font-size: 14px; }
.bg-rh-msg { font-size: 13px; }
.bg-kv { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 6px 0 10px;
         font-size: 12.5px; color: var(--text-dim); }
.bg-kv b { color: var(--text-very-dim); font-weight: 500; margin-right: 5px; }

/* Wide content scrolls inside its own container rather than the page. */
.bg-tablewrap { overflow-x: auto; margin: 6px 0 10px; }
.bg-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 640px; }
.bg-table th {
  text-align: left; padding: 7px 10px; font-weight: 500; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-very-dim); border-bottom: 1px solid var(--border);
}
.bg-table td { padding: 7px 10px; border-bottom: 1px solid var(--border-soft); color: var(--text-dim); }
.bg-table tr:last-child td { border-bottom: none; }
.bg-site { font-family: var(--mono); color: var(--text) !important; white-space: nowrap; }
.bg-role { color: var(--text-dim); }
.bg-gt, .bg-num { font-family: var(--mono); text-align: right; white-space: nowrap; }
.bg-gt { text-align: left; }
.bg-state { white-space: nowrap; }
.bg-why { color: var(--text-very-dim); font-size: 11.5px; }

.bg-st-carried .bg-state { color: #86efac; }
.bg-st-ref     .bg-state { color: var(--text-dim); }
.bg-st-unknown           { background: rgba(245, 158, 11, 0.07); }
.bg-st-unknown .bg-state { color: #fcd34d; }

.bg-foot { color: var(--text-very-dim); font-size: 12px; line-height: 1.55; padding: 6px 0; }
.bg-foot code { font-size: 11.5px; padding: 1px 5px; border-radius: 3px; background: var(--bg-hover); }
.bg-direction { color: var(--text) !important; }
.bg-details { margin-top: 8px; }
.bg-details summary { cursor: pointer; color: var(--text-dim); font-size: 12.5px; padding: 4px 0; }
.bg-details p { font-size: 12.5px; }

@media (max-width: 560px) {
  .bg-letter { font-size: 40px; min-width: 62px; }
  .bg-headline { gap: 14px; }
}

/* The gene-page copy of the artefact banner. Same control as the modal's (same
   .align-artifact-* classes) so it reads as one feature, but it sits in the
   normal page flow above the gene diagram rather than inside a modal body. */
.gene-artifact-banners { margin: 0 0 14px; }
.gene-artifact-banners .align-artifact-banner { margin-left: 0; margin-right: 0; }

/* FLG "status unknown" — must read as a caution, not a clean negative. Styled
   like the other uncertainty surfaces (amber), never like the green
   non-carrier state, because the whole defect was an unknown rendering as
   reassurance. */
.atopy-flg-unknown {
  background: rgba(245, 158, 11, 0.10);
  border-left: 3px solid var(--warn);
  color: var(--text);
}
.atopy-flg-unknown strong { color: var(--warn); }
.atopy-flg-unknown-note {
  margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--text-dim);
}

/* ===========================================================================
   Login screen
   =========================================================================== */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card {
  width: 100%; max-width: 380px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px 24px;
}
.login-brand { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.login-lede { color: var(--text-dim); font-size: 13px; line-height: 1.6; margin: 0 0 20px; }
.login-primary, .login-secondary {
  width: 100%; padding: 13px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  font-size: 15px; font-weight: 500;
}
.login-primary:hover { background: var(--accent-bright); }
.login-secondary { background: transparent; color: var(--accent-bright); margin-top: 10px; }
.login-invite { margin-top: 18px; }
.login-invite summary { cursor: pointer; color: var(--text-dim); font-size: 13px; padding: 6px 0; }
.login-hint { color: var(--text-very-dim); font-size: 12px; line-height: 1.5; margin: 6px 0 10px; }
.login-invite input {
  width: 100%; padding: 11px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--card-solid); color: var(--text);
  font-family: var(--mono); font-size: 14px;
}
.login-msg { margin-top: 16px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.5; }
.login-msg-info  { background: var(--bg-hover); color: var(--text-dim); }
.login-msg-ok    { background: rgba(34,197,94,0.12); color: #86efac; }
.login-msg-error { background: rgba(239,68,68,0.12); color: #fca5a5; }
.login-foot { margin: 22px 0 0; color: var(--text-very-dim); font-size: 11.5px; text-align: center; }

.whoami {
  align-self: center; font-size: 12px; color: var(--text-dim);
  padding: 4px 10px; border-radius: 999px; background: var(--bg-hover);
  border: 1px solid var(--border-soft); white-space: nowrap;
}

/* ===========================================================================
   Phone / tablet.
   The app was desktop-only: one @media block in 1,773 lines. Everything here
   is layout — no result, threshold or wording changes size with the viewport.
   =========================================================================== */
@media (max-width: 760px) {
  body { padding: 16px 16px 48px; font-size: 14px; }   /* 16px side gutter */

  /* Header stacks: brand, then picker full-width, then actions wrapping. */
  header { flex-direction: column; align-items: stretch; gap: 12px; }
  .sample-picker { display: flex; align-items: center; gap: 10px; }
  .sample-picker select { flex: 1; min-width: 0; }      /* min-width:140px would overflow */
  .header-actions { flex-wrap: wrap; }
  .header-actions button { flex: 1 1 auto; min-height: 44px; }  /* 44px = Apple's touch target */

  /* 4-up stat grid is unreadable at 390px. */
  .status-strip { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat { padding: 11px 12px; }

  /* Search: field over button, both full width and thumb-sized. */
  #search-form { flex-direction: column; align-items: stretch; gap: 10px; }
  #query { width: 100%; font-size: 16px; }   /* >=16px stops iOS zooming on focus */
  #search-form button { width: 100%; min-height: 46px; }

  /* Cards go closer to full-bleed; the body gutter is the margin. */
  .card { border-radius: var(--radius-sm); }
  .card-body { padding: 4px 14px 12px; }
  .card-title { padding-left: 14px; padding-right: 14px; }

  /* Any wide table scrolls inside itself rather than pushing the page sideways. */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Alignment modal: near full-screen, and the sequence label gutter shrinks.
     chunkSize is reduced to match in app.js — see sequenceChunkSize(). */
  .modal.modal-wide, .align-modal { max-width: 100%; width: 100%; border-radius: 0; }
  .align-modal { max-height: 100dvh; }
  .align-row { grid-template-columns: 30px 1fr; gap: 6px; }
  .align-label { font-size: 10px; }
  .align-seq { font-size: 12px; letter-spacing: 0.06em; }
  .align-tabs { overflow-x: auto; }

  /* SVG diagrams scale instead of clipping. */
  .gene-diagram svg, svg.gene-svg { width: 100%; height: auto; }

  /* Artefact banner buttons are tap targets, not inline links. */
  .align-artifact-actions { flex-wrap: wrap; gap: 8px; }
  .align-artifact-btn { min-height: 40px; flex: 1 1 auto; }
}

@media (max-width: 420px) {
  .status-strip { grid-template-columns: 1fr 1fr; }
  .brand-name { font-size: 15px; }
  .align-seq { font-size: 11.5px; letter-spacing: 0.04em; }
}

/* Installed to the home screen ("Add to Home Screen"), iOS launches the page
   full-screen with a translucent status bar — so content runs UNDER the notch
   and the home indicator unless we inset it. These values are 0 in a normal
   browser tab, so this costs nothing there. Requires viewport-fit=cover. */
@media (display-mode: standalone) {
  body {
    padding-top: calc(16px + env(safe-area-inset-top));
    padding-bottom: calc(48px + env(safe-area-inset-bottom));
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: calc(16px + env(safe-area-inset-right));
  }
  .login-body { padding-top: env(safe-area-inset-top); }
  /* The alignment modal is full-bleed on a phone, so it needs its own insets. */
  .align-modal { padding-top: env(safe-area-inset-top); }
}

/* ===========================================================================
   Idle lock.

   Opaque, full-viewport, and ABOVE everything. It is not a modal over visible
   content — the point is that genomic data is off-screen when the person who
   authenticated may not be the one holding the device. The same element is
   reused, with content hidden, while the app is backgrounded, so the iOS app
   switcher snapshots a lock screen rather than somebody's variants.
   =========================================================================== */
.lock-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: calc(16px + env(safe-area-inset-top)) 16px;
}
.lock-overlay[hidden] { display: none; }
.lock-card {
  width: 100%; max-width: 340px; text-align: center;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px 24px;
}
.lock-mark { color: var(--accent-bright); font-size: 28px; line-height: 1; margin-bottom: 12px; }
.lock-card h2 { margin: 0 0 8px; font-size: 18px; color: var(--text); }
.lock-card p { margin: 0 0 20px; font-size: 13px; line-height: 1.6; color: var(--text-dim); }
.lock-card button { min-height: 46px; }

/* Backgrounded: blur whatever is behind, so even a momentary reveal during the
   switcher animation shows nothing readable. */
body.app-hidden > *:not(.lock-overlay) { filter: blur(22px); pointer-events: none; }