:root {
  /* GeneRoute deep teal (from the logo) – deliberately not the NHS identity palette */
  --bg: #f3f7f7;
  --fg: #1f2d33;
  --muted: #4a5f66;
  --card: #ffffff;
  --border: #d5e0e2;
  --accent: #0b7285;
  --accent-dark: #08505d;
  --accent-soft: #e3f3f4;
  --on-accent: #ffffff;
  --head-bg: #0e5866;
  --head-fg: #ffffff;
  --head-edge: #3fc1c9;
  --head-focus: #9be7ec;
  --button: #0b7285;
  --button-hover: #08505d;
  --primary: #007f3b;
  --primary-shadow: #00401e;
  --focus: #0b7285;
  --focus-text: #1f2d33;
  --warn-bg: #fff9c4;
  --warn-fg: #4f3d00;
  --warn-edge: #e0a100;
  --t-H: #d5281b;
  --t-S: #b35c00;
  --t-M: #7a5f00;
  --t-W: #4c6272;
  /* Badge text (darker than the tier colour so it passes contrast on the tinted badge) and "met" green text */
  --tb-H: #a3190e;
  --tb-S: #8a4600;
  --tb-M: #6b5300;
  --tb-W: #425563;
  --ok: #007f3b;
  --ok-text: #00602c;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1b1e;
    --fg: #e6eeef;
    --muted: #a5b8bd;
    --card: #172629;
    --border: #2c4046;
    --accent: #5ccbd4;
    --accent-dark: #9fe3e8;
    --accent-soft: #143a40;
    --on-accent: #0f1b1e;
    --head-bg: #0a3c46;
    --head-fg: #ffffff;
    --button: #0f7f8f;
    --button-hover: #0b6675;
    --focus: #5ccbd4;
    --focus-text: #e6eeef;
    --primary: #007f3b;
    --primary-shadow: #00401e;
    --warn-bg: #3a3112;
    --warn-fg: #f6e08e;
    --warn-edge: #c9a227;
    --t-H: #ff8a7a;
    --t-S: #f5a95c;
    --t-M: #e2c85a;
    --t-W: #a7b6c2;
    --tb-H: #ffa396;
    --tb-S: #f7b877;
    --tb-M: #e8d27a;
    --tb-W: #b9c6d0;
    --ok: #6cc993;
    --ok-text: #6cc993;
  }
}
* { box-sizing: border-box; }
/* The hidden attribute must win over layout display rules (grid/flex). */
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-dark); text-decoration-thickness: 2px; }
/* Focus: a teal ring with a small gap (light ring on the dark header) */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: none; }
.site-head a:focus-visible, .site-head button:focus-visible { outline-color: var(--head-focus, #9be7ec); }
h1 { font-size: 1.75rem; line-height: 1.2; margin: 0 0 6px; font-weight: 700; }
h2 { font-size: 1.15rem; margin: 0; font-weight: 700; }
h3 { font-size: 1rem; margin: 0; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }

.site-head { background: var(--head-bg); color: var(--head-fg); padding-top: 20px; padding-bottom: 14px; }
.site-head h1 { color: var(--head-fg); }
.tabbar { position: sticky; top: 0; z-index: 10; background: var(--card); border-bottom: 1px solid var(--border); box-shadow: 0 1px 2px rgba(33, 43, 50, 0.08); }
.lede { margin: 0 0 10px; max-width: 75ch; }
.lede-short { display: none; }
.disclaimer { margin: 0; font-size: 0.85rem; color: var(--warn-fg); background: var(--warn-bg); border-left: 6px solid var(--warn-edge); padding: 8px 12px; max-width: 95ch; }
.tabs { display: flex; gap: 4px; }
.tabs button {
  border: 0; background: none; padding: 12px 16px; font: inherit; color: var(--accent);
  border-bottom: 4px solid transparent; cursor: pointer; white-space: nowrap;
}
.tabs button:hover { color: var(--accent-dark); text-decoration: underline; }
.tabs button.active { color: var(--fg); border-bottom-color: var(--accent); font-weight: 700; text-decoration: none; }
@media (max-width: 600px) {
  .site-head { padding-top: 12px; padding-bottom: 10px; }
  h1 { font-size: 1.3rem; }
  .lede-long { display: none; }
  .lede-short { display: block; font-size: 0.9rem; margin-bottom: 8px; }
  .disclaimer { font-size: 0.78rem; padding: 5px 8px; border-left-width: 4px; }
  .tabs { gap: 0; }
  .tabs button { padding: 10px 6px; font-size: 0.95rem; flex: 1; }
  .tab-long { display: none; }
}
.tab-short { display: none; }
@media (max-width: 600px) { .tab-short { display: inline; } }

main { padding-top: 20px; padding-bottom: 40px; }
.layout { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.panel { background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 20px; box-shadow: 0 1px 2px rgba(33, 43, 50, 0.06); }
.panel-head h2 { font-size: 1.3rem; }
@media (max-width: 600px) { .panel { padding: 14px; } }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.actions { display: flex; gap: 6px; }

select, input[type="number"], input[type="search"] {
  font: inherit; color: var(--fg); background: var(--card); border: 2px solid var(--muted);
  border-radius: 0; padding: 5px 8px; min-width: 0;
}
select:disabled { opacity: 0.5; }
button { font: inherit; cursor: pointer; }
.btn { background: var(--button); color: #fff; border: 0; border-radius: 6px; padding: 8px 16px; font-weight: 600; }
.btn:hover { background: var(--button-hover); }
.btn:active { transform: translateY(1px); }
.btn-ghost { background: var(--card); border: 2px solid var(--accent); color: var(--accent); border-radius: 4px; padding: 4px 10px; font-size: 0.9rem; font-weight: 600; }
.btn-ghost:hover:not(:disabled) { background: var(--accent-soft); }
.link-btn { background: none; border: 0; color: var(--accent); padding: 4px 0; }
.icon-btn { background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 6px; width: 32px; height: 32px; flex: none; }

.person { border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 4px; padding: 10px 12px; margin-bottom: 12px; }
.person-head { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.person-head select:first-child { flex: 1; }
.person-head select[data-f=relSide] { flex: 1; }
.proband-label { flex: 1; }
.dx { border-top: 1px dashed var(--border); padding: 8px 0; }
/* Site, age and remove on one row; histology gets the full width below so long names are not cut off. */
.dx-main { display: grid; grid-template-columns: minmax(0, 1fr) 76px 32px; gap: 6px; }
.dx-main [data-f="hist"] { grid-column: 1 / -1; grid-row: 2; }
.dx-markers { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; }
.mk { display: flex; align-items: center; gap: 4px; font-size: 0.85rem; color: var(--muted); }
.mk input[type="number"] { width: 70px; }
.chk { gap: 6px; }

.segmented { display: inline-flex; border: 2px solid var(--accent); border-radius: 4px; overflow: hidden; margin-bottom: 12px; }
.segmented button { border: 0; background: var(--card); padding: 6px 16px; color: var(--accent); font-weight: 600; }
.segmented button + button { border-left: 2px solid var(--accent); }
.segmented button.active { background: var(--accent); color: var(--on-accent); }

.empty { color: var(--muted); padding: 24px; text-align: center; border: 1px dashed var(--border); border-radius: 8px; }
.result { border: 1px solid var(--border); border-radius: 4px; padding: 14px; margin-bottom: 12px; }
.result.compact { padding: 10px; }
.result-head { display: flex; gap: 10px; align-items: flex-start; }
.result-title { flex: 1; min-width: 0; }
.rank { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; }
.score { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.9rem; }
.bar { height: 6px; background: var(--bg); border-radius: 2px; margin: 8px 0; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--accent); }
.genes { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.gene { font: 600 0.8rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--accent-soft); color: var(--accent); padding: 3px 6px; border-radius: 4px; }
.gene-off { background: var(--warn-bg); color: var(--warn-fg); }
.inh { font-size: 0.8rem; color: var(--muted); }
.evidence, .assoc { margin: 6px 0; padding-left: 0; list-style: none; font-size: 0.9rem; }
.evidence li, .assoc li { padding: 2px 0; }
.tier { display: inline-block; min-width: 72px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.tier-H { color: var(--t-H); }
.tier-S { color: var(--t-S); }
.tier-M { color: var(--t-M); }
.tier-W { color: var(--t-W); }
.note { font-size: 0.85rem; color: var(--warn-fg); background: var(--warn-bg); border-left: 4px solid var(--warn-edge); padding: 6px 10px; margin: 6px 0; }
.tests { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 4px; }
.test-chip { font-size: 0.78rem; border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; }
details summary { cursor: pointer; color: var(--accent); font-size: 0.85rem; }
.warn { font-size: 0.85rem; color: var(--warn-fg); background: var(--warn-bg); border-left: 4px solid var(--warn-edge); padding: 8px 12px; }
#results h2 { margin: 20px 0 8px; }
.test { border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px; margin-bottom: 8px; }
.test p { margin: 4px 0; font-size: 0.88rem; }
.code { font: 700 0.85rem ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--button); color: #fff; padding: 2px 6px; border-radius: 4px; margin-right: 4px; }

.browse-controls { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.browse-controls input[type="search"] { flex: 2; min-width: 200px; }
.tests-xp { margin: -4px 0 12px; }
#browse-test { flex: 1; max-width: 320px; }
#browse-cancer { display: inline-flex; gap: 8px; flex-wrap: wrap; }
#browse-cancer[hidden] { display: none; }

.site-foot { margin-top: 24px; font-size: 0.82rem; color: var(--muted); max-width: 95ch; }

@media print {
  .site-head { background: none; color: #000; }
  .site-head h1 { color: #000; }
  .tabbar, .actions, .segmented, .jump, .list-toggle, #add-person, .link-btn, .icon-btn, details summary { display: none !important; }
  body { background: #fff; }
  .layout { grid-template-columns: 1fr; }
  details > *:not(summary) { display: block; }
}

.pointers { border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 8px; padding: 10px 12px; margin: 12px 0; }
.pointers h2 { font-size: 1rem; margin-bottom: 4px; }
.pointers ul { margin: 6px 0 0; padding-left: 18px; font-size: 0.9rem; }
.pointers li + li { margin-top: 6px; }

.surv-src { font-size: 0.88rem; margin: 4px 0 6px; }
.surv-badge { display: inline-block; font: 700 0.72rem ui-monospace, monospace; padding: 1px 6px; border-radius: 4px; color: #fff; }
.surv-uk { background: #0b7285; } .surv-eu { background: #2f6f3e; } .surv-intl { background: #7a4b00; }
.surv-table th { width: 30%; color: var(--fg); font-weight: 600; white-space: normal; }
.surv-diff { margin: 2px 0 6px; padding-left: 18px; }
.surv-block { border-top: 1px dashed var(--border); margin-top: 10px; }
@media print { body.printing .surv-badge { background: none !important; color: #000; border: 1px solid #000; } }

/* Syndromes tab: list + detail */
.print-bar { position: sticky; top: -6px; background: var(--card); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); z-index: 1; }
.print-bar button:disabled { opacity: 0.5; cursor: default; }
.syn-list li { display: flex; align-items: flex-start; gap: 4px; }
.syn-list li input { margin-top: 6px; flex: none; }
.syn-list li a { flex: 1; min-width: 0; }
.print-only, #print-area { display: none; }
.dates td:first-child, .dates td:last-child { white-space: nowrap; }
.syn-layout { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .syn-layout { grid-template-columns: 280px minmax(0, 1fr); align-items: start; } }
.syn-list { border: 1px solid var(--border); border-radius: 4px; padding: 6px 10px; }
/* Phones: the list collapses behind a toggle and, when open, scrolls with the page (no inner scroll bar). */
.list-toggle { display: none; }
@media (max-width: 899px) {
  .list-toggle { display: block; width: 100%; text-align: left; padding: 8px 12px; }
  .syn-list { display: none; }
  .syn-layout.list-open .syn-list { display: block; }
  .print-bar { position: static; }
}
@media (min-width: 900px) { .syn-list { max-height: calc(100vh - 80px); overflow-y: auto; position: sticky; top: 64px; scrollbar-width: thin; } }
.syn-list h4, .syn-list h2.list-group { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); margin: 10px 0 2px; }
.syn-list ul { list-style: none; margin: 0; padding: 0; }
.syn-list a { display: block; padding: 3px 6px; border-radius: 4px; text-decoration: none; font-size: 0.88rem; color: var(--fg); }
.syn-list a:hover { background: var(--accent-soft); }
.syn-list a[aria-current] { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.syn-list p { margin: 4px 0; }
.syn-detail { min-width: 0; scroll-margin-top: 64px; }
.syn-detail [id^="jump-"] { scroll-margin-top: 64px; }
.syn-detail h3 { padding-bottom: 4px; border-bottom: 2px solid var(--accent-soft); }
/* On-this-page links under each syndrome / gene title */
.jump { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 4px; padding: 8px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.jump button { background: none; border: 0; padding: 2px 0; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.jump button:hover { color: var(--accent-dark); text-decoration-thickness: 2px; }
.syn-detail h3 { margin: 18px 0 6px; font-size: 1rem; }
.syn-detail .test h4 { margin: 0 0 4px; font-size: 0.95rem; }
.syn-detail .test ul { margin: 4px 0 0; padding-left: 18px; font-size: 0.88rem; }
.syn-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.syn-head h2 { font-size: 1.5rem; margin-bottom: 4px; }
.syn-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 12px; font-size: 0.9rem; margin: 10px 0 0; }
.syn-facts dt { color: var(--muted); }
.syn-facts dd { margin: 0; }
.table-wrap { overflow-x: auto; }
.syn-table { border-collapse: collapse; width: 100%; font-size: 0.86rem; }
.syn-table th, .syn-table td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.syn-table th { color: var(--muted); font-weight: 600; white-space: nowrap; }
.syn-open { display: inline-block; margin-top: 6px; }
#browse-filters { display: contents; }
@media print {
  @page { margin: 14mm 12mm; }
  body.printing > *:not(#print-area) { display: none !important; }
  body.printing #print-area { display: block; overflow-wrap: anywhere; }
  body.printing .print-frame { width: 100%; border-collapse: collapse; }
  body.printing .print-frame > tbody > tr > td, body.printing .print-frame > tfoot > tr > td { padding: 0; }
  body.printing .print-foot { font-size: 0.68rem; color: #444; border-top: 1px solid #ccc; padding-top: 3px; margin-top: 8px; }
  body.printing #print-area .code { background: none; color: #000; border: 1px solid #000; }
  body.printing #print-area .gene { background: none; color: #000; border: 1px solid #888; }
  body.printing .print-page + .print-page { break-before: page; }
  body.printing .print-only { display: block; }
  body.printing .print-kicker { font-size: 0.75rem; color: #555; margin: 0 0 4px; border-bottom: 1px solid #ccc; padding-bottom: 4px; }
  body.printing #print-area a { color: #000; text-decoration: none; }
  body.printing #print-area a[href^="http"]::after { content: " – " attr(href); font-size: 0.72rem; color: #444; word-break: break-all; }
  body.printing #print-area .test, body.printing #print-area tr { break-inside: avoid; }
  body.printing #print-area h3 { break-after: avoid; }
  body.printing #print-area .tier { background: none !important; }
  body.printing .print-contents ol { font-size: 0.9rem; }
  body.printing .print-contents.long ol { columns: 2; }
}

.sources h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); margin: 10px 0 2px; }
.sources ul { margin: 0; padding-left: 18px; font-size: 0.88rem; }

/* Last reviewed date; stale (over 12 months) dates are flagged */
.reviewed { white-space: nowrap; }
.reviewed.stale { color: var(--warn-fg); font-weight: 600; white-space: normal; }
.stale-flag { display: inline-block; font-size: 0.75rem; font-weight: 600; color: var(--warn-fg); background: var(--warn-bg); border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; margin-left: 4px; }

/* Button to the Sources tab at the foot of syndrome and gene pages */
.sources-link { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.sources-link a.btn-ghost { text-decoration: none; display: inline-block; }

/* Link to the source code on GitHub (header, top right, and footer) */
.head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.gh-link { display: inline-flex; align-items: center; gap: 6px; flex: none; margin-top: 4px; padding: 5px 10px; border: 2px solid currentColor; border-radius: 4px; color: var(--head-fg); font-size: 0.9rem; font-weight: 600; text-decoration: none; }
.gh-link:hover { color: var(--head-fg); background: rgba(255, 255, 255, 0.15); }
.gh-link:focus-visible { box-shadow: none; outline: 3px solid var(--head-focus, #9be7ec); outline-offset: 2px; background: none; color: var(--head-fg); }
.foot-code { margin: 8px 0 0; }
.foot-code a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.gh-mark { flex: none; }
.head-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; flex: none; }
@media (max-width: 600px) {
  .gh-link { padding: 6px; margin-top: 0; }
  .head-links .gh-link:not(.xp-link) { display: none; } /* the footer keeps the GitHub link */
  .gh-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media print { .gh-link { display: none; } }

/* Family tree (pedigree) above the differential */
.ped { border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 4px; padding: 10px 12px; margin: 0 0 14px; }
.ped > summary { font-size: 1rem; font-weight: 700; color: var(--fg); }
.ped-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin: 8px 0; }
.ped-tools select { max-width: 100%; }
.ped-tools .mk { color: var(--fg); flex-wrap: wrap; min-width: 0; }
.ped-dl { display: flex; gap: 6px; }
.ped-wrap { overflow-x: auto; }
.ped-svg { display: block; margin: 0 auto; max-width: none; }
.ped-line { stroke: var(--muted); stroke-width: 1.5; fill: none; }
.ped-dash { stroke-dasharray: 4 3; }
.ped-sym { fill: var(--card); stroke: var(--fg); stroke-width: 2; }
.ped-aff { fill: #6b8088; }
.ped-hitfill { fill: var(--accent); stroke: var(--accent-dark); }
.ped-imp { fill: var(--card); stroke: var(--border); stroke-dasharray: 3 2; }
.ped-arrow { stroke: var(--fg); stroke-width: 2; }
.ped-arrowhead { fill: var(--fg); }
.ped-l { font: 11px Arial, Helvetica, sans-serif; fill: var(--fg); }
.ped-rel { font-weight: 700; }
.ped-l-imp { fill: var(--muted); font-style: italic; }
.ped-hist { font-size: 10px; fill: var(--muted); }
.ped-hit { fill: var(--accent); font-weight: 700; }
.ped-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; color: var(--fg); }
.ped-legend span { display: inline-flex; align-items: center; gap: 4px; }
.result-head { cursor: pointer; }
.result.in-tree { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }
.tree-tag { margin: 4px 0 0; color: var(--accent); font-weight: 600; }
@media print {
  .ped-tools, .tree-tag { display: none !important; }
  .ped { break-inside: avoid; border-left-width: 1px; }
  .ped-wrap { overflow: visible; }
  .ped-svg { width: auto !important; max-width: 100% !important; height: auto !important; }
}

/* Evidence column and variant notes */
.syn-table.cancers td.ev { min-width: 180px; font-size: 0.8rem; }
.ev-risk { display: block; color: var(--fg); }
.ev-src, .ev-src a { color: var(--muted); font-size: 0.78rem; }
.ev-src a { color: var(--accent); }
.variant-notes { margin: 4px 0 8px; padding-left: 18px; font-size: 0.88rem; }
.variant-notes li + li { margin-top: 4px; }
.evidence-refs { padding-left: 18px; }

/* Abbreviations: dotted underline; the meaning shows in a tooltip on hover or tap */
abbr.abbr { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }
abbr.abbr:hover { color: var(--accent); }
svg text[data-tip] { cursor: help; }
#abbr-tip { position: fixed; z-index: 1000; max-width: min(340px, calc(100vw - 16px)); padding: 6px 9px; border-radius: 4px; background: #212b32; color: #fff; font-size: 0.82rem; line-height: 1.35; white-space: pre-line; pointer-events: none; box-shadow: 0 2px 8px rgb(0 0 0 / 0.25); }
#abbr-tip[hidden] { display: none; }
.abbr-hint { margin: 4px 0 0; font-size: 0.8rem; color: var(--muted); }
@media print { abbr.abbr { text-decoration: none; } :is(.fam-table, .elig) abbr.abbr::after { content: " (" attr(data-full) ")"; font-style: italic; } #abbr-tip { display: none; } }

/* ---- Strength pills (results, tables, compare) ---- */
.tier { display: inline-block; min-width: 0; padding: 1px 7px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.6; border: 1px solid currentColor; background: var(--card); }
.tier-H { color: var(--tb-H); background: color-mix(in srgb, var(--t-H) 12%, var(--card)); }
.tier-S { color: var(--tb-S); background: color-mix(in srgb, var(--t-S) 12%, var(--card)); }
.tier-M { color: var(--tb-M); background: color-mix(in srgb, var(--t-M) 12%, var(--card)); }
.tier-W { color: var(--tb-W); background: color-mix(in srgb, var(--t-W) 10%, var(--card)); }
.evidence .tier, .assoc .tier { margin-right: 6px; min-width: 84px; text-align: center; }
.tier-legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--muted); margin: 6px 0 10px; }
@media print { .tier { background: none !important; } }

/* ---- Result cards: score label, why line, tests line, compact rows ---- */
.bar { margin-bottom: 2px; }
.bar-label { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.why { margin: 4px 0 6px; color: var(--fg); }
.tests-line { margin: 6px 0; color: var(--muted); }
.code-sm { display: inline-block; font: 700 0.75rem ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--accent); border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; margin-right: 2px; cursor: help; }
.result.compact { padding: 10px 14px; }
.result.compact .why { margin: 2px 0; color: var(--muted); }
.result.compact h3 { font-size: 0.98rem; }
.note.founder { border-left-color: var(--accent); background: var(--accent-soft); color: var(--fg); }
.results-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.results-tools .segmented { margin-bottom: 0; }

/* ---- Family form: tools, person details, find box, toast ---- */
.family-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -4px 0 10px; }
.file-btn { position: relative; overflow: hidden; cursor: pointer; display: inline-block; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-btn:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.family-ancestry { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.family-ancestry .mk { color: var(--fg); font-weight: 600; }
.person-extra { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: -2px 0 6px; }
.person-extra input[type="number"] { width: 70px; }
.dx-find { width: 100%; margin-bottom: 6px; font: inherit; font-size: 0.9rem; padding: 5px 8px; border: 1px dashed var(--muted); background: var(--card); color: var(--fg); }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 30; display: flex; gap: 12px; align-items: center; background: var(--fg); color: var(--card); padding: 10px 16px; border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); max-width: calc(100vw - 32px); font-size: 0.92rem; }
.toast .link-btn { color: inherit; font-weight: 700; text-decoration: underline; }
.to-results { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 25; background: var(--accent); color: #fff; border: 0; border-radius: 999px; padding: 10px 16px; font-weight: 700; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }
@media print { .toast, .to-results, .family-tools, .dx-find, .compare-pick { display: none !important; } }

/* ---- Slim header once a family is being entered ---- */
.disc-short { display: none; }
body.compact-head .site-head { padding-top: 10px; padding-bottom: 10px; }
body.compact-head .site-head h1 { font-size: 1.25rem; margin-bottom: 4px; }
body.compact-head .lede { display: none; }
body.compact-head .disc-long { display: none; }
body.compact-head .disc-short { display: block; font-size: 0.78rem; padding: 4px 10px; }
body.compact-head .gh-link { margin-top: 0; padding: 3px 8px; }
@media print { body.compact-head .lede, body.compact-head .disc-long { display: block; } body.compact-head .disc-short { display: none; } }

/* ---- Compare two syndromes ---- */
.compare-pick { max-width: 200px; font-size: 0.88rem; }
.compare-pickers { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.compare-pickers select { max-width: 100%; }
.compare-pickers .mk { flex: 1 1 260px; min-width: 0; flex-wrap: wrap; }
.syn-table.compare th { white-space: normal; vertical-align: bottom; }
.syn-table.compare th a { font-weight: 700; }
.syn-table.compare tr.shared td:first-child { font-weight: 600; }

/* ---- Pedigree: deceased slash ---- */
.ped-dead { stroke: var(--fg); stroke-width: 2; }

/* ---- Phones: tables become stacked cards ---- */
@media (max-width: 700px) {
  .syn-table.cancers thead, .syn-table.compare thead { display: none; }
  .syn-table.cancers, .syn-table.cancers tbody, .syn-table.cancers tr, .syn-table.cancers td,
  .syn-table.compare, .syn-table.compare tbody, .syn-table.compare tr, .syn-table.compare td { display: block; width: 100%; }
  .syn-table.cancers tr, .syn-table.compare tr { border: 1px solid var(--border); border-radius: 4px; padding: 6px 10px; margin-bottom: 8px; }
  .syn-table.cancers td, .syn-table.compare td { border: 0; padding: 2px 0; display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 8px; }
  .syn-table.cancers td::before, .syn-table.compare td::before { content: attr(data-label); color: var(--muted); font-size: 0.78rem; font-weight: 600; }
  .syn-table.cancers td.na { display: none; }
  .syn-table.cancers td.ev { min-width: 0; }
  .syn-table.compare td:first-child { font-weight: 600; grid-template-columns: 1fr; }
  .syn-table.compare td:first-child::before { display: none; }
  .syn-table.compare { counter-reset: none; }
}
/* Page actions wrap on narrow screens (compare picker + copy / link / print) */
.syn-head .actions { flex-wrap: wrap; min-width: 0; max-width: 100%; }
@media (max-width: 700px) { .compare-pick { max-width: 100%; flex: 1 1 100%; } }
@media (max-width: 700px) {
  .syn-table.cancers td > .tier, .syn-table.compare td > .tier { justify-self: start; }
  .syn-table.compare td { align-items: center; }
}

/* Print-only family history table at the top of the printed assessment */
.print-show { display: none; }
@media print {
  .print-show { display: block; }
  .fam-table { margin-bottom: 14px; break-inside: avoid; }
  .fam-table h2 { margin-bottom: 6px; }
  #results .result { break-inside: avoid; }
  .bar-label, .why { color: #000; }
  [data-expand], [data-collapse], #compare-top { display: none !important; }
}
@media print { body:not(.printing) #tab-assess > .panel:first-child { display: none !important; } }
@media print { .lede-short { display: none !important; } }

/* Footer: about this information */
.site-foot { border-top: 1px solid var(--border); padding-top: 16px; }
.foot-title { font-size: 1rem; color: var(--fg); margin: 0 0 8px; }
.foot-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; }
.foot-list dt { font-weight: 700; color: var(--fg); }
.foot-list dd { margin: 0; }
.foot-disclaimer { margin: 12px 0 0; color: var(--warn-fg); background: var(--warn-bg); border-left: 4px solid var(--warn-edge); padding: 6px 10px; }
@media (max-width: 600px) { .foot-list { grid-template-columns: 1fr; gap: 2px; } .foot-list dd { margin-bottom: 8px; } }
.ev-diff { display: block; margin-top: 3px; font-size: 0.78rem; color: var(--fg); border-left: 3px solid var(--warn-edge); padding-left: 6px; }

/* Who meets Test Directory criteria now */
.elig { border: 1px solid var(--border); border-left: 4px solid var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--card)); border-radius: 4px; padding: 10px 12px; margin: 0 0 14px; }
.elig.none { border-left-color: var(--border); background: var(--card); }
.elig h3 { margin: 0 0 6px; font-size: 1rem; }
.elig > ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.elig ul ul { margin: 4px 0 0; padding-left: 0; list-style: none; display: grid; gap: 4px; }
.elig-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 0 6px; border-radius: 999px; border: 1px solid var(--warn-edge); color: var(--warn-fg); background: var(--warn-bg); }
.elig-tag.dec { border-color: var(--border); color: var(--muted); background: var(--card); }
@media print { .elig { background: none !important; break-inside: avoid; } }

/* Modified Amsterdam banner / checklist */
.ams { border: 1px solid var(--border); border-radius: 4px; padding: 8px 10px; margin: 0 0 10px; background: var(--card); }
.ams.met { border: 2px solid var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--card)); }
.ams-head { margin: 0 0 4px; }
.ams-list { list-style: none; margin: 4px 0; padding: 0; font-size: 0.88rem; display: grid; gap: 2px; }
.ams-list li.ok span { color: var(--primary); font-weight: 700; }
.ams-list li.no { color: var(--muted); }
.ams-list li.no span { color: var(--t-H); font-weight: 700; }
@media print { .ams { background: none !important; } }
/* Eligibility tags: family tree ring + label, form tag */
.ped-elig { fill: var(--ok); font-weight: 700; }
.ped-maybe { fill: var(--warn-fg); font-weight: 700; }
.ped-elig-ring { fill: none; stroke: var(--ok); stroke-width: 2.5; stroke-dasharray: 5 3; }
.person-elig { font-size: 0.8rem; color: var(--ok); font-weight: 700; margin: -2px 0 6px; }
.person-elig:empty { display: none; }
.person-elig .elig-code { color: var(--ok); border-color: var(--ok); }
.person-elig .maybe { color: var(--warn-fg); }
.person-elig .maybe-code { color: var(--warn-fg); border-color: var(--warn-edge); background: var(--warn-bg); }
.elig-maybe { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); }
.elig-maybe h4 { margin: 0 0 6px; font-size: 0.92rem; color: var(--warn-fg); }
.elig-maybe > ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; }

/* Test codes open the criteria panel */
button.test-link { cursor: pointer; line-height: inherit; }
button.code-sm.test-link, button.code.test-link { appearance: none; }
button.code-sm.test-link { background: var(--card); }
button.code.test-link { border: 0; }
button.test-chip.test-link { background: var(--card); color: inherit; font-family: inherit; }
button.test-link:hover, button.test-link:focus-visible { text-decoration: underline; outline: 2px solid var(--focus); outline-offset: 1px; }
.ped-test { cursor: pointer; text-decoration: underline; }
#crit-dialog { width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0 18px 16px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text, inherit); overflow: auto; }
#crit-dialog::backdrop { background: rgb(0 0 0 / 0.45); }
.crit-head { position: sticky; top: 0; z-index: 1; display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; background: var(--card); padding: 14px 0 8px; border-bottom: 1px solid var(--border); }
.crit-head h2 { margin: 0; font-size: 1.15rem; }
.crit-close { font-size: 1.5rem; line-height: 1; border: 0; background: none; cursor: pointer; padding: 0 4px; color: inherit; }
#crit-dialog h3 { font-size: 1rem; margin: 14px 0 6px; }
#crit-dialog h4 { font-size: 0.9rem; margin: 8px 0 4px; }
.crit-family { border: 1px solid var(--border); border-radius: 4px; padding: 4px 12px 8px; }
.crit-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.crit-list li { padding: 3px 8px; border-left: 4px solid transparent; border-radius: 3px; }
.crit-list .lv1 { margin-left: 22px; } .crit-list .lv2 { margin-left: 44px; } .crit-list .lv3 { margin-left: 66px; }
.crit-mk { font-weight: 700; }
.crit-list li.hit-met { background: color-mix(in srgb, var(--ok) 12%, var(--card)); border-left-color: var(--ok); }
.crit-list li.hit-maybe { background: var(--warn-bg); border-left-color: var(--warn-edge); }
.crit-list li.hit-near { background: color-mix(in srgb, var(--muted) 12%, var(--card)); border-left-color: var(--muted); }
.crit-hits { list-style: none; padding: 0; margin: 4px 0 0; font-size: 0.85rem; display: grid; gap: 2px; }
.crit-hits .who-met > span, h4.hit-met { color: var(--ok); }
.crit-hits .who-maybe > span, h4.hit-maybe { color: var(--warn-fg); }
.crit-hits .who-near > span, h4.hit-near { color: var(--muted); }
@media print { #crit-dialog { display: none; } }
.crit-genes { border-top: 1px solid var(--border); margin-top: 14px; }
.crit-gene-list { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }

/* Manchester score links and breakdown */
button.mss-link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline dotted; text-underline-offset: 2px; cursor: pointer; text-align: left; }
button.mss-link:hover, button.mss-link:focus-visible { text-decoration-style: solid; }
.person-mss { font-size: 0.8rem; margin: -2px 0 6px; }
.person-mss:empty { display: none; }
.mss-total { font-size: 1.05rem; margin: 10px 0 4px; }
.elig-tag.mss-ok { border-color: var(--ok); color: var(--ok-text); background: color-mix(in srgb, var(--ok) 10%, var(--card)); }
.mss-table td.num, .mss-table th.num, .mss-ref td.num, .mss-ref th.num { text-align: right; white-space: nowrap; }
.mss-table tfoot th { border-top: 2px solid var(--border); }
.mss-adj td { font-style: italic; }
.mss-ref tr.used td { background: color-mix(in srgb, var(--ok) 12%, var(--card)); font-weight: 700; }
.mss-ref tr.mss-head th { text-align: left; font-size: 0.85rem; padding-top: 8px; }
.mss-excl { margin: 0; padding-left: 18px; font-size: 0.9rem; }
@media print { .person-mss { display: none; } }
.mss-adopted { margin: 8px 0; padding: 6px 10px; border: 1px dashed var(--border); border-radius: 4px; font-size: 0.92rem; }
.mss-adopted label { display: flex; gap: 8px; align-items: center; cursor: pointer; }

/* Eligibility box: one line per test, short reasons on screen, full reasons in print */
.elig-people { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.elig-people > li { border-top: 1px solid var(--border); padding-top: 8px; }
.elig-people > li:first-child { border-top: 0; padding-top: 0; }
.elig-who { margin-bottom: 4px; }
.elig-line { display: block; }
.elig-test { font-weight: 600; }
.elig-why { font-size: 0.86rem; color: var(--muted); margin: 2px 0 0; }
.elig-why .why-full { display: none; }
@media print { .elig-why .why-short { display: none; } .elig-why .why-full { display: inline; } }

/* Compact list of tests for the suggested syndromes */
.test-rows { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.test-rows li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.tr-name { font-weight: 600; }
.tr-meets { font-size: 0.82rem; font-weight: 700; color: var(--ok); }
.tr-maybe { font-size: 0.82rem; font-weight: 700; color: var(--warn-fg); }
.tr-for { flex-basis: 100%; }

/* Completed relatives fold into a one-line card */
.person.collapsed { padding: 6px 8px 6px 10px; }
.person-card { display: flex; gap: 6px; align-items: flex-start; }
.person-open { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; text-align: left; background: none; border: 0; padding: 4px; font: inherit; color: inherit; cursor: pointer; border-radius: 3px; }
.person-open:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.person-open:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; }
.pc-who { grid-column: 1; }
.pc-status { color: var(--muted); font-size: 0.85rem; }
.pc-dx { grid-column: 1; display: grid; gap: 1px; font-size: 0.88rem; }
.pc-edit { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--accent); font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.person.collapsed .person-elig, .person.collapsed .person-mss { margin: 2px 0 0 4px; }
.btn-done { font: inherit; font-size: 0.85rem; font-weight: 600; padding: 3px 10px; border: 2px solid var(--accent); border-radius: 4px; background: var(--card); color: var(--accent); cursor: pointer; }

/* Smaller usability items */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mode-hint { margin: 6px 0 0; }
.results-status { margin: 2px 0 8px; font-size: 0.8rem; color: var(--muted); min-height: 1.2em; transition: color .3s; }
.results-status.flash { color: var(--ok); font-weight: 600; }
.ac-note { display: block; white-space: nowrap; }
.disclaimer.stale { border-left-color: #d5281b; }
abbr.abbr[tabindex]:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
@media print { .mode-hint, .results-status { display: none; } }

/* Entry checks */
.person-warn ul { list-style: none; margin: 4px 0 2px; padding: 4px 8px; border-left: 3px solid var(--warn-edge); background: var(--warn-bg); color: var(--warn-fg); font-size: 0.8rem; border-radius: 2px; }
.person-warn li::before { content: "⚠ "; }
.person-warn:empty { display: none; }
@media print { .person-warn { display: none; } }

/* One-page clinic summary (Print summary): family table, tree, eligibility, top three syndromes */
@media print {
  body.print-brief #results > .result:nth-of-type(n+4), body.print-brief #results .more-results,
  body.print-brief #results .result .evidence, body.print-brief #results .result details, body.print-brief #results .result .note,
  body.print-brief #results .result .syn-open, body.print-brief #results .result .tests-line, body.print-brief #results .result .bar,
  body.print-brief #results .result .bar-label, body.print-brief #results .result .tree-tag, body.print-brief #results .tier-legend,
  body.print-brief #results .pointers, body.print-brief #results > .link-btn, body.print-brief .tests-compact > p,
  body.print-brief .tests-compact li:not(.tr-family), body.print-brief .tr-for, body.print-brief .elig > p.small.muted,
  body.print-brief .site-foot > :not(.foot-legal), body.print-brief .ped-tools, body.print-brief .shown-note, body.print-brief .ped-legend span.muted, body.print-brief .elig-maybe h4 + p, body.print-brief .lede, body.print-brief .disc-long, body.print-brief .ams-list { display: none !important; }
  body.print-brief .disc-short { display: block !important; }
  body.print-brief #results .result { padding: 4px 8px; margin: 0 0 4px; break-inside: avoid; }
  body.print-brief #results .result .why { margin: 2px 0 0; }
  body.print-brief .ped-wrap svg { max-height: 5.5cm; width: auto; max-width: 100%; }
  body.print-brief .fam-table td, body.print-brief .fam-table th { padding: 2px 6px; }
  body.print-brief .elig { padding: 6px 10px; }
  body.print-brief .elig-people { gap: 4px; }
  body.print-brief h2 { margin: 6px 0 4px; }
  body.print-brief .tests-compact h2::after { content: " – met or possibly met"; font-weight: 400; font-size: 0.8em; }
}
@media print { body.print-brief .elig-why .why-short { display: inline; } body.print-brief .elig-why .why-full { display: none; } }
@media print { body.print-brief .ped-legend { font-size: 0.7rem; margin: 2px 0; } body.print-brief .fam-table h2, body.print-brief .elig h3 { font-size: 1rem; } body.print-brief #results .result h3 { font-size: 0.95rem; } body.print-brief .panel h2 { margin-top: 0; } }
/* Phones: folded syndrome-page sections */
details.syn-fold { border-top: 1px solid var(--border); margin: 6px 0; }
details.syn-fold > summary { font-size: 1.05rem; font-weight: 700; padding: 10px 0; cursor: pointer; }
@media print { details.syn-fold > summary { display: block; } details.syn-fold:not([open]) > *:not(summary) { display: block; } }

/* ---- Header (redesigned): logo mark, title with status pill, one-line subtitle, figures; notice strip below ---- */
.site-head { border-bottom: 4px solid var(--head-edge, #3fc1c9); padding-top: 16px; padding-bottom: 16px; background-color: var(--head-bg); background-image: linear-gradient(180deg, var(--head-bg) 0%, color-mix(in srgb, var(--head-bg) 88%, #000) 100%); }
.head-row { align-items: center; }
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand-mark { flex: none; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.brand-home { display: inline-block; margin-bottom: 1px; color: var(--head-fg); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; opacity: 0.9; }
.brand-home:hover { text-decoration: underline; opacity: 1; }
.brand-home::after { content: " ›"; }
.brand-text { min-width: 0; }
.site-head h1 { margin: 0; font-size: 1.6rem; line-height: 1.2; letter-spacing: -0.01em; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.dev-pill { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.55); color: var(--head-fg); white-space: nowrap; }
.site-head .lede { margin: 4px 0 0; font-size: 0.95rem; opacity: 0.95; max-width: 90ch; }
.head-stats { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 4px; }
.head-stats > span { font-size: 0.78rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); white-space: nowrap; }
.gh-link { margin-top: 0; border-width: 1px; border-color: rgba(255, 255, 255, 0.7); padding: 6px 12px; }
.notice-strip { background: var(--warn-bg); border-bottom: 1px solid color-mix(in srgb, var(--warn-edge) 60%, transparent); }
.notice-strip .disclaimer { background: none; border-left: 0; padding: 7px 0; max-width: none; display: flex; gap: 8px; align-items: baseline; }
.notice-strip .disclaimer.stale { color: #8a1a10; font-weight: 600; }
.notice-icon { flex: none; display: inline-grid; place-items: center; width: 1.2em; height: 1.2em; border-radius: 50%; background: var(--warn-edge); color: #212b32; font-weight: 800; font-size: 0.8em; }
body.compact-head .site-head { padding-top: 10px; padding-bottom: 10px; }
body.compact-head .site-head h1 { font-size: 1.25rem; margin-bottom: 0; }
body.compact-head .brand-mark { width: 30px; height: 30px; }
body.compact-head .notice-strip .disc-short { padding: 4px 0; }
@media (max-width: 600px) {
  .brand { gap: 10px; }
  .brand-mark { width: 36px; height: 36px; }
  .site-head h1 { font-size: 1.15rem; }
  .dev-pill { font-size: 0.62rem; padding: 1px 6px; }
  .site-head .lede-short { font-size: 0.85rem; margin-top: 2px; }
  .notice-strip .disclaimer { padding: 5px 0; }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .notice-strip .disclaimer.stale { color: #ffb3a8; } }
@media print {
  .site-head { background: none !important; border-bottom: 0; padding: 0 0 6px; }
  .brand-mark, .brand-home, .dev-pill, .head-stats { display: none; }
  .notice-strip { background: none; border: 0; }
  .notice-icon { display: none; }
}
.notice-strip .disc-short { display: none; }
body.compact-head .notice-strip .disc-short { display: flex; }
body.compact-head .notice-strip .disc-long { display: none; }
.notice-strip .disclaimer[hidden] { display: none; }
@media print { .notice-strip .disc-short { display: none !important; } .notice-strip .disc-long { display: block !important; } }

/* Family tree view controls, full screen, quick start */
.ped-view { display: inline-flex; gap: 6px; }
.ped-view [aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.ped-wide { margin: 4px 0; }
.ped-more { fill: var(--muted); cursor: help; }
#crit-dialog.wide { width: min(1400px, calc(100vw - 24px)); }
.tree-full { overflow: auto; max-height: calc(100vh - 220px); border: 1px solid var(--border); border-radius: 4px; background: #fff; padding: 8px; }
.tree-full svg { display: block; }
.quick-start { text-align: left; }
.quick-start h3 { margin: 0 0 8px; }
.quick-start ol { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; }
@media print { .ped-view, .ped-wide { display: none !important; } }
.child-of { margin: 0 0 6px; }
.child-of .mk { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.child-of select { flex: 1; min-width: 0; max-width: 360px; }

/* Example families menu and note */
.ex-wrap { position: relative; display: inline-block; }
.ex-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 240px; max-width: calc(100vw - 16px); background: var(--card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.15); padding: 4px; display: flex; flex-direction: column; }
.ex-menu[hidden] { display: none; }
.ex-item { text-align: left; background: none; border: 0; padding: 7px 10px; border-radius: 6px; font: inherit; color: inherit; cursor: pointer; }
.ex-item:hover, .ex-item:focus-visible { background: var(--accent-soft); }
.ex-quick { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.ex-quick .ex-item { border: 1px solid var(--border); padding: 4px 8px; }
.example-note { display: flex; gap: 8px; align-items: flex-start; border-left: 4px solid var(--accent); background: var(--accent-soft); padding: 8px 10px; border-radius: 6px; margin: 6px 0 10px; }
.example-note[hidden] { display: none; }
.example-note p { margin: 0; flex: 1; }
@media print { .example-note, .ex-menu { display: none !important; } }

/* Full disclaimer (footer) and its link in the notice strip */
.disc-link { color: inherit; font-weight: 600; white-space: nowrap; }
.foot-legal { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); }
.foot-legal p { max-width: 80ch; margin: 0 0 6px; }
.foot-legal:focus { outline: none; }
.foot-legal:focus-visible { outline: 3px solid var(--focus); }
.print-legal { display: none; }
@media print {
  .print-legal { display: block; break-inside: avoid; font-size: 0.72rem; color: #333; border-top: 1px solid #ccc; margin-top: 10px; padding-top: 4px; }
  .print-legal h3, .foot-legal .foot-title { font-size: 0.8rem; margin: 0 0 2px; }
  .foot-legal { break-inside: avoid; }
}

/* How syndromes are ranked (Sources tab) */
.ranking { scroll-margin-top: 80px; margin: 18px 0; padding-top: 12px; border-top: 1px solid var(--border); }
.ranking:focus { outline: none; }
.ranking-table { border-collapse: collapse; width: 100%; }
.ranking-table th, .ranking-table td { border-bottom: 1px solid var(--border); padding: 6px 8px; text-align: left; vertical-align: top; }
.ranking-table td:nth-child(2) { text-align: center; }
.tier-legend .link-btn { text-decoration: underline; cursor: pointer; }

/* No strong pattern note above the ranked list */
.weak-note { border-left: 4px solid var(--warn-edge); background: var(--warn-bg); color: var(--warn-fg); padding: 8px 10px; border-radius: 6px; margin: 8px 0; font-size: .92em; }

/* Family tree under the family form; full Test Directory list collapsed at the end of the results */
.ped-host:not(:empty) { margin-top: 18px; padding-top: 14px; border-top: 2px solid var(--border); }
.tests-compact > summary { cursor: pointer; list-style-position: inside; }
.tests-compact > summary h2 { display: inline; font-size: 1.05rem; }

/* Lower-scoring syndromes folded under "Show N more" */
.more-results { margin: 6px 0 14px; }
.more-results > summary { cursor: pointer; color: var(--accent); font-weight: 600; padding: 8px 0; }
.more-results > summary .when-open, .more-results[open] > summary .when-closed { display: none; }
.more-results[open] > summary .when-open { display: inline; }

/* Bowel screening if no inherited condition is found (BSG 2019 Box 1) */
.fhcc { border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 6px; padding: 10px 12px; margin: 14px 0; }
.fhcc h3 { margin: 0 0 6px; font-size: 1rem; }
.fhcc-cat { margin: 0 0 6px; }
.fhcc ul { margin: 4px 0; padding-left: 18px; }
.fhcc p.small { margin: 4px 0; }
.fhcc-polyps { margin: 8px 0 4px; padding-top: 6px; border-top: 1px solid var(--border); }
.fhcc-polyposis { margin: 8px 0 4px; padding: 6px 10px; border: 1px solid var(--warn-edge); background: var(--warn-bg); color: var(--fg); border-radius: 4px; }
.link-btn.sps-who { padding: 0; font: inherit; font-size: 0.85em; font-weight: 600; text-decoration: underline; cursor: pointer; }
.sps-criteria li { margin-bottom: 4px; }
.fhcc-polyps-pro { background: var(--accent-soft); border: 0; border-radius: 4px; padding: 6px 10px; }

/* Test Directory tab */
#tests-search { flex: 1; min-width: 220px; }
#tests-list .code { margin-right: 4px; }
#tests-detail mark, .crit-list mark, .td-snip mark { background: #fff3a0; color: #212b32; padding: 0 1px; border-radius: 2px; }
.gene.gene-hit { outline: 2px solid var(--warn-edge); }
#tests-detail .crit-head { border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.crit-list li.crit-sub { font-weight: 700; margin-top: 8px; }
.td-snip { display: block; color: var(--muted); font-weight: 400; margin-top: 2px; }
.td-find { position: sticky; top: 56px; z-index: 2; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; background: var(--card); border-bottom: 1px solid var(--border); padding: 6px 0; margin-bottom: 8px; }
.td-find .td-count { margin-right: auto; }
#tests-detail mark.current { background: #ffb81c; outline: 2px solid #b35c00; }
.syn-list a[aria-current] .td-snip { color: inherit; }
.panel-warn { color: var(--warn-fg); background: var(--warn-bg); border-left: 4px solid var(--warn-edge); padding: 4px 8px; border-radius: 4px; }
.gene.gene-pending { border: 1px dashed var(--warn-edge); }