/* LYRA — LSD landscape mapping tool
   Palette values are validated, not chosen: the two disease ramps each pass the
   ordinal checks (monotone lightness, ΔL ≥ 0.06 per step, light end clearing its
   surface), and violet holds against amber at ΔE 18.7–22.2 under deuteranopia
   and protanopia at every matching step. Re-run the validator before editing a
   hex here — see design/README.md. */

:root {
  /* dark stage */
  --ground-900:#071627; --ground-800:#0A1E33; --ground-700:#0F2942;
  --ground-600:#17374F; --ground-500:#23506E;
  --ink-hi:#F2F7FB; --ink-mid:#A9C2D6; --ink-lo:#6E8BA3;

  /* light surfaces */
  --paper:#FFFFFF; --paper-2:#F4F8FC; --paper-3:#E9F1F8; --rule:#D3E2EE;
  --ink-900:#0B2033; --ink-600:#46647C; --ink-400:#7793A8;

  /* brand — one step off the Amicus navy */
  --brand-700:#073A73; --brand-600:#0B4A8F; --brand-500:#1E6FC0;
  --brand-300:#6DAADD; --brand-100:#CCE1F4; --brand-050:#EDF4FB;

  /* Fabry ramp — dark then light */
  --fab-0:#2A3F52; --fab-1:#5A4790; --fab-2:#7D62C2; --fab-3:#A080F4; --fab-4:#C9B7FF;
  --fabL-0:#DAE3EA; --fabL-1:#B3A0E8; --fabL-2:#8E74D6; --fabL-3:#6B4BB8; --fabL-4:#472C8C;
  /* Pompe ramp — dark then light */
  --pom-0:#2A3F52; --pom-1:#6B4A12; --pom-2:#A5720E; --pom-3:#E09A1A; --pom-4:#FFCE72;
  --pomL-0:#DAE3EA; --pomL-1:#D9A23F; --pomL-2:#B87F14; --pomL-3:#8E5F0B; --pomL-4:#5F3D06;

  --amber:#E0A21A;
  --sans:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  --serif:'IBM Plex Serif',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* Motion: Premium. One curve for 80% of the work, three durations, no
     overshoot anywhere — this is an advocacy instrument, not a toy. */
  --e:cubic-bezier(.4,0,.2,1);
  --e-out:cubic-bezier(.05,.7,.1,1);
  --e-in:cubic-bezier(.3,0,1,1);
  --t-quick:160ms; --t-std:320ms; --t-slow:560ms;

  --bar:64px;
  --partners-h:58px;
}

* { box-sizing:border-box; }
/* `hidden` is only a default (display:none) and loses to any display
   declaration — which is how the drawer, and then the Clear all button, both
   ended up painting while hidden. Make it win. */
[hidden] { display:none !important; }
html,body { height:100%; }
body {
  margin:0; background:var(--ground-900); color:var(--ink-hi);
  font:400 14px/1.5 var(--sans); -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input { font:inherit; }
h1,h2,h3,p { margin:0; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip { position:absolute; left:-999px; top:8px; z-index:99; padding:10px 16px; border-radius:8px;
  background:var(--brand-600); color:#fff; }
.skip:focus { left:12px; }
:focus-visible { outline:2px solid var(--brand-300); outline-offset:2px; border-radius:6px; }
.ic { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.75;
  stroke-linecap:round; stroke-linejoin:round; display:block; }

/* ── top bar ─────────────────────────────────────────────────────────── */
.topbar {
  position:fixed; inset:0 0 auto 0; height:var(--bar); z-index:20;
  display:flex; align-items:center; gap:14px; padding:0 16px;
  background:rgba(7,22,39,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(35,80,110,.55);
}
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; flex:none; }
.brand-mark { width:30px; height:30px; flex:none; }
.brand-text { display:flex; flex-direction:column; gap:2px; }
.brand-text b { font:600 19px/1 var(--sans); letter-spacing:.2em; }
.brand-text i { font:400 9.5px/1 var(--sans); font-style:normal; letter-spacing:.05em; color:var(--ink-lo); }
.rule { width:1px; height:24px; background:var(--ground-600); flex:none; }
.spacer { flex:1; }

.search { position:relative; display:flex; align-items:center; gap:9px; width:min(340px,32vw);
  height:38px; padding:0 11px; border-radius:9px; background:rgba(255,255,255,.05);
  border:1px solid var(--ground-600); flex:none; transition:border-color var(--t-quick) var(--e); }
.search:focus-within { border-color:var(--brand-300); }
.search .ic { color:var(--ink-lo); width:17px; height:17px; }
.search input { flex:1; min-width:0; border:0; background:none; color:var(--ink-hi); font-size:13.5px; }
.search input::placeholder { color:var(--ink-lo); }
.search input:focus { outline:none; }
.search kbd { font:500 10.5px/1 var(--mono); color:var(--ink-lo); border:1px solid var(--ground-600);
  border-radius:4px; padding:4px 6px; }
.results { position:absolute; top:46px; left:0; right:0; margin:0; padding:6px; list-style:none;
  max-height:min(56vh,420px); overflow:auto; border-radius:12px; background:rgba(11,32,54,.97);
  border:1px solid var(--ground-500); box-shadow:0 22px 54px rgba(2,8,18,.62); z-index:30; }
.results li { padding:9px 10px; border-radius:8px; display:flex; align-items:center; gap:10px; cursor:pointer; }
.results li[aria-selected="true"], .results li:hover { background:rgba(109,170,221,.14); }
.results .r-sub { color:var(--ink-lo); font-size:11.5px; margin-left:auto; white-space:nowrap; }
.results .r-none { color:var(--ink-lo); cursor:default; }
.results .r-group { padding:8px 10px 4px; font:600 9.5px/1 var(--sans); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-lo); cursor:default; }
.results .r-group:hover { background:none; }

.illus { display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 12px; flex:none;
  border-radius:999px; background:rgba(224,162,26,.10); border:1px solid rgba(224,162,26,.4);
  font:500 11.5px/1 var(--sans); color:var(--amber); letter-spacing:.03em; }
.illus .ic { width:14px; height:14px; stroke-width:1.9; }

.seg { display:flex; gap:2px; padding:3px; height:38px; flex:none; border-radius:10px;
  background:rgba(255,255,255,.05); border:1px solid var(--ground-600); }
.seg button { display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 12px;
  border-radius:7px; border:1px solid transparent; color:var(--ink-lo);
  font:500 12.5px/1 var(--sans); white-space:nowrap;
  transition:background var(--t-quick) var(--e), color var(--t-quick) var(--e); }
.seg button:hover { color:var(--ink-mid); }
.seg button.on { background:rgba(109,170,221,.16); border-color:rgba(109,170,221,.34);
  color:var(--ink-hi); font-weight:600; }
.seg .dot { width:8px; height:8px; border-radius:50%; flex:none; opacity:.55; }
.seg button.on .dot { opacity:1; }
.dot.f { background:var(--fab-3); } .dot.p { background:var(--pom-3); } .dot.b { background:var(--brand-300); }
.seg .ic { width:15px; height:15px; }

/* ── stage & views ───────────────────────────────────────────────────── */
.stage { position:fixed; inset:var(--bar) 0 0 0; }
.view { position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity var(--t-std) var(--e), transform var(--t-std) var(--e), visibility var(--t-std); }
.view.is-on { opacity:1; visibility:visible; }
.view-globe { transform:scale(1.012); }
.view-globe.is-on { transform:none; }
.view-list, .view-compare { background:var(--paper-2); color:var(--ink-900); overflow:auto;
  transform:translateY(10px); }
.view-list.is-on, .view-compare.is-on { transform:none; }

#globe { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none;
  cursor:grab; }
#globe.dragging { cursor:grabbing; }
.hint { position:absolute; left:50%; top:14px; transform:translateX(-50%);
  font:400 11.5px/1 var(--sans); color:var(--ink-lo); pointer-events:none;
  padding:7px 13px; border-radius:999px; background:rgba(7,22,39,.6);
  border:1px solid rgba(35,80,110,.5); transition:opacity var(--t-slow) var(--e); }
.hint.gone { opacity:0; }

.panel { position:absolute; border-radius:15px; background:rgba(11,32,54,.87);
  border:1px solid rgba(35,80,110,.75); box-shadow:0 22px 58px rgba(2,8,18,.5);
  backdrop-filter:blur(16px); }
.legend { left:20px; bottom:20px; padding:13px 15px; height:104px;
  display:flex; flex-direction:column; justify-content:center; }
.basket { left:404px; right:auto; bottom:20px; width:min(586px,calc(100vw - 452px));
  padding:11px 14px 12px; height:104px; display:flex; flex-direction:column; justify-content:center; }
.basket-head { display:flex; align-items:center; gap:9px; margin-bottom:9px; }
.mini-mark { width:13px; height:13px; flex:none; }
.eyebrow { font:600 9.5px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-lo); flex:1; }

.btn { display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 12px; flex:none;
  border-radius:9px; background:rgba(255,255,255,.05); border:1px solid var(--ground-600);
  color:var(--ink-hi); font:500 12.5px/1 var(--sans); white-space:nowrap;
  transition:background var(--t-quick) var(--e), border-color var(--t-quick) var(--e); }
.btn:hover { background:rgba(255,255,255,.09); }
.btn.primary { background:var(--brand-600); border-color:var(--brand-500); color:#fff; font-weight:600; }
.btn.primary:hover { background:var(--brand-500); }
.btn.ghost { background:none; border-color:transparent; color:var(--ink-lo); height:26px; padding:0 8px; }
.btn.ghost:hover { background:rgba(255,255,255,.07); color:var(--ink-hi); }
.btn:disabled { opacity:.4; cursor:not-allowed; }
.btn .ic { width:15px; height:15px; }

.chips { display:flex; gap:7px; flex-wrap:wrap; min-height:32px; align-items:center; }
.basket .chips { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; padding-bottom:2px; }
.chips .empty { font:400 11.5px/1.4 var(--sans); color:var(--ink-lo); }
.chip { display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 6px 0 8px;
  border-radius:8px; background:rgba(255,255,255,.05); border:1px solid var(--ground-600);
  font:500 11.5px/1 var(--sans); color:var(--ink-hi); white-space:nowrap;
  animation:chip-in var(--t-std) var(--e-out) both; }
.chip.on { background:rgba(109,170,221,.15); border-color:rgba(109,170,221,.4); }
.chip button { display:flex; padding:3px; border-radius:5px; color:var(--ink-lo); }
.chip button:hover { color:var(--ink-hi); background:rgba(255,255,255,.09); }
.chip .ic { width:13px; height:13px; }
@keyframes chip-in { from { opacity:0; transform:translateY(6px) } to { opacity:1; transform:none } }

.iso { display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:20px;
  padding:0 5px; border-radius:4px; background:var(--ground-600); color:var(--ink-mid);
  font:500 11px/1 var(--mono); letter-spacing:.06em; flex:none; }

/* legend internals */
.lg-title { font:600 9.5px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-lo); display:block; margin-bottom:9px; }
.lg-row { display:flex; align-items:center; gap:18px; margin-bottom:8px; }
.lg-ramp { display:flex; align-items:center; gap:7px; }
.lg-ramp b { font:500 11px/1 var(--sans); color:var(--ink-mid); font-weight:500; }
.lg-ramp i { width:7px; height:7px; border-radius:50%; flex:none; }
.lg-ramp span { display:flex; gap:2px; }
.lg-ramp span u { display:block; width:21px; height:9px; border-radius:2px; }
.lg-foot { display:flex; align-items:center; gap:14px; font:400 10.5px/1 var(--sans); color:var(--ink-lo); }
.lg-nd { display:flex; align-items:center; gap:6px; margin-left:auto; }
.lg-nd u { width:11px; height:11px; border-radius:3px; background:var(--fab-0);
  background-image:repeating-linear-gradient(45deg,transparent 0 2.5px,#63799B 2.5px 5px); }

/* ── partner marks ───────────────────────────────────────────────────── */
.partners { position:absolute; right:20px; bottom:20px; z-index:4;
  display:flex; flex-direction:column; gap:7px; align-items:flex-end; pointer-events:none;
  filter:drop-shadow(0 2px 10px rgba(3,12,22,.75)); }
.p-eyebrow { font:600 8.5px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-lo); }
/* The two lockups are different shapes — Amicus stacks three lines, GLSDC two —
   so they are balanced optically rather than set to one height. */
.partners-row { display:flex; align-items:center; gap:16px; height:42px; }
.partners img { width:auto; display:block; opacity:.95; }
.partners .m-glsdc { height:40px; }
.partners .m-amicus { height:38px; }
.vr { width:1px; height:30px; background:rgba(255,255,255,.2); flex:none; }

/* Same credit on the light pages, in the brand's own colours. */
.page-credit { display:flex; align-items:center; gap:14px; justify-content:flex-end;
  margin-top:30px; padding-top:20px; border-top:1px solid var(--rule); }
.page-credit .p-eyebrow { color:var(--ink-400); margin-right:auto; }
.page-credit .vr { background:var(--rule); height:34px; }
.page-credit img { width:auto; display:block; }
.page-credit .m-glsdc { height:44px; }
.page-credit .m-amicus { height:42px; }

/* ── drawer ──────────────────────────────────────────────────────────── */
.drawer {
  position:fixed; right:20px; top:calc(var(--bar) + 20px);
  bottom:calc(20px + var(--partners-h) + 16px); width:436px; z-index:15;
  display:flex; flex-direction:column; overflow:hidden; border-radius:16px;
  background:rgba(11,32,54,.9); border:1px solid rgba(35,80,110,.8);
  box-shadow:0 26px 70px rgba(2,8,18,.6); backdrop-filter:blur(18px);
  animation:drawer-in var(--t-std) var(--e-out) both;
}
.drawer.closing { animation:drawer-out 220ms var(--e-in) both; }
@keyframes drawer-in  { from { opacity:0; transform:translateX(22px) } to { opacity:1; transform:none } }
@keyframes drawer-out { from { opacity:1; transform:none } to { opacity:0; transform:translateX(22px) } }

.dr-head { padding:18px 20px 14px; border-bottom:1px solid rgba(35,80,110,.5);
  display:flex; flex-direction:column; gap:12px; flex:none; }
.dr-top { display:flex; align-items:flex-start; gap:12px; }
.dr-meta { display:flex; flex-direction:column; gap:6px; flex:1; min-width:0; }
.dr-eyebrow { display:flex; align-items:center; gap:9px; }
.dr-eyebrow span { font:400 10.5px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-lo); }
.dr-name { font:600 25px/1.1 var(--serif); color:var(--ink-hi); }
.dr-sub { font:400 12px/1 var(--sans); color:var(--ink-lo); }
.icon-btn { display:flex; align-items:center; justify-content:center; width:32px; height:32px; flex:none;
  border-radius:8px; background:rgba(255,255,255,.05); border:1px solid var(--ground-600); color:var(--ink-mid);
  transition:background var(--t-quick) var(--e); }
.icon-btn:hover { background:rgba(255,255,255,.1); color:var(--ink-hi); }
.dr-actions { display:flex; gap:8px; }

.dcols { display:flex; align-items:center; gap:12px; padding:9px 20px; flex:none;
  border-bottom:1px solid rgba(35,80,110,.5); }
.dcols .grow { flex:1; }
.dcols .col { width:42px; flex:none; display:flex; justify-content:center; }
.pill { display:inline-flex; align-items:center; gap:6px; padding:3px 9px 3px 7px; border-radius:999px;
  font:500 11.5px/1 var(--sans); letter-spacing:.02em; }
.pill i { width:7px; height:7px; border-radius:50%; flex:none; }
.pill.f { color:var(--fab-3); background:rgba(160,128,244,.13); border:1px solid rgba(160,128,244,.34); }
.pill.f i { background:var(--fab-3); }
.pill.p { color:var(--pom-3); background:rgba(224,154,26,.13); border:1px solid rgba(224,154,26,.34); }
.pill.p i { background:var(--pom-3); }

.dr-body { flex:1; overflow-y:auto; overscroll-behavior:contain; }
.dom { border-bottom:1px solid rgba(35,80,110,.5); }
.dom-head { display:flex; align-items:center; gap:12px; width:100%; padding:12px 20px; min-height:48px;
  text-align:left; transition:background var(--t-quick) var(--e); }
.dom-head:hover { background:rgba(109,170,221,.06); }
.dom-head .chev { transition:transform var(--t-std) var(--e); color:var(--ink-lo); width:15px; height:15px; }
.dom[open] .dom-head .chev, .dom.open .dom-head .chev { transform:rotate(90deg); }
.dom-name { flex:1; font:500 13px/1.3 var(--sans); color:var(--ink-hi); }
.dom.open .dom-name { font-weight:600; }
.dom-panel { display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--t-std) var(--e);
  background:rgba(109,170,221,.04); }
.dom.open .dom-panel { grid-template-rows:1fr; }
.dom-inner { overflow:hidden; }
.metric { display:flex; flex-direction:column; gap:6px; padding:10px 20px 10px 47px; }
.metric-top { display:flex; align-items:center; gap:12px; }
.metric-name { flex:1; font:400 12.5px/1.35 var(--sans); color:var(--ink-mid); }
.metric-note { font:400 11.5px/1.5 var(--sans); color:var(--ink-lo); max-width:330px; text-wrap:pretty; }
.metric-note.none { font-style:italic; opacity:.75; }
.tag { font:500 9px/1 var(--sans); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-lo);
  border:1px solid var(--ground-600); border-radius:4px; padding:3px 5px; flex:none; }

.meter { display:flex; gap:2px; width:42px; flex:none; }
.meter u { display:block; flex:1; height:5px; border-radius:1.5px; background:#193149; }
.meter.nd u { background:var(--fab-0); background-image:repeating-linear-gradient(45deg,transparent 0 2px,#63799B 2px 4px); }
.dr-foot { padding:12px 20px; border-top:1px solid rgba(35,80,110,.5); display:flex; align-items:center;
  gap:8px; flex:none; font:400 11px/1 var(--sans); color:var(--ink-lo); }
.dr-foot .ic { width:14px; height:14px; }

/* ── list view ───────────────────────────────────────────────────────── */
.list-wrap, .cmp-wrap { max-width:1280px; margin:0 auto; padding:30px 32px 40px; }
.list-head h1, .cmp-head h1 { font:600 26px/1.15 var(--serif); color:var(--ink-900); }
.list-head p, .cmp-head p { font:400 13px/1.55 var(--sans); color:var(--ink-600); margin-top:6px; max-width:640px; }
.filters { display:flex; gap:7px; flex-wrap:wrap; margin-top:16px; }
.filters button { display:inline-flex; align-items:center; height:32px; padding:0 12px; border-radius:8px;
  background:var(--paper); border:1px solid var(--rule); color:var(--ink-600);
  font:500 12px/1 var(--sans); transition:all var(--t-quick) var(--e); }
.filters button:hover { border-color:var(--brand-300); }
.filters button.on { background:var(--brand-600); border-color:var(--brand-500); color:#fff; }

.table-scroll { margin-top:18px; border:1px solid var(--rule); border-radius:13px; background:var(--paper);
  overflow:auto; }
.ctable { width:100%; border-collapse:collapse; }
.ctable th { position:sticky; top:0; z-index:2; background:var(--paper); text-align:left;
  padding:11px 14px; border-bottom:1px solid var(--rule); }
.ctable th button.sort { font:600 9.5px/1 var(--sans); letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-400); display:inline-flex; align-items:center; gap:5px; }
.ctable th button.sort.on { color:var(--brand-600); }
.ctable th.c-region { font:600 9.5px/1 var(--sans); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-400); }
.ctable td { padding:9px 14px; border-bottom:1px solid var(--paper-3); vertical-align:middle; }
.ctable tr:last-child td { border-bottom:0; }
.ctable tbody tr { transition:background var(--t-quick) var(--e); }
.ctable tbody tr:hover { background:var(--paper-2); }
.ctable tbody tr.picked { background:var(--brand-050); }
.c-pick { width:46px; } .c-num { width:132px; } .c-gaps { width:118px; }
.c-name button { display:flex; align-items:center; gap:9px; font:500 13px/1 var(--sans); color:var(--ink-900); }
.c-name button:hover { color:var(--brand-600); }
.tick { width:17px; height:17px; border-radius:4px; border:1.5px solid #B9CBDA; background:var(--paper);
  display:flex; align-items:center; justify-content:center; transition:all var(--t-quick) var(--e); }
.tick .ic { width:12px; height:12px; stroke-width:3; color:#fff; opacity:0; transition:opacity var(--t-quick) var(--e); }
.tick.on { background:var(--brand-600); border-color:var(--brand-600); }
.tick.on .ic { opacity:1; }
.iso.light { background:var(--paper-3); color:var(--ink-600); }
.region-tag { font:400 12px/1 var(--sans); color:var(--ink-400); }
.gaps { font:500 12px/1 var(--mono); color:var(--ink-600); }
.gaps.zero { color:var(--ink-400); }

/* ── compare view ────────────────────────────────────────────────────── */
.cmp-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.cmp-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.cmp-actions .chip { background:var(--paper); border-color:var(--rule); color:var(--ink-900); }
.cmp-actions .chip button { color:var(--ink-400); }
.cmp-actions .chip button:hover { color:var(--ink-900); background:var(--paper-3); }
.cmp-actions .iso { background:var(--paper-3); color:var(--ink-600); }
.cmp-actions .btn { background:var(--paper); border-color:var(--rule); color:var(--ink-900); }
.cmp-actions .btn:hover { background:var(--paper-2); }
.cmp-body { margin-top:20px; }
.cmp-empty { padding:64px 24px; text-align:center; color:var(--ink-600); background:var(--paper);
  border:1px dashed var(--rule); border-radius:13px; }
.cmp-empty b { display:block; font:600 17px/1.3 var(--serif); color:var(--ink-900); margin-bottom:8px; }
.matrix { background:var(--paper); border:1px solid var(--rule); border-radius:13px; padding:18px 20px 14px;
  overflow-x:auto; }
.mx-head { display:flex; align-items:flex-end; padding-bottom:12px; min-width:max-content; }
.mx-ind { width:300px; flex:none; font:600 9.5px/1 var(--sans); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-400); }
.mx-country { flex:1; min-width:220px; display:flex; flex-direction:column; gap:9px; padding:0 3px; }
.mx-cname { display:flex; align-items:center; gap:8px; justify-content:center; }
.mx-cname b { font:600 14px/1 var(--sans); color:var(--ink-900); white-space:nowrap; }
.mx-pills { display:flex; gap:6px; }
.mx-pills > div { flex:1; display:flex; justify-content:center; }
.mx-dom { display:flex; align-items:center; gap:10px; padding:11px 12px; background:var(--paper-3);
  border-radius:7px; margin:8px 0 4px; min-width:max-content; }
.mx-dom b { font:600 11px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--brand-700); }
.mx-dom hr { flex:1; border:0; height:1px; background:var(--rule); margin:0; }
.mx-row { display:flex; align-items:center; padding:9px 0; min-width:max-content; }
.mx-row + .mx-row { border-top:1px solid var(--rule); }
.mx-label { width:300px; flex:none; padding-right:16px; display:flex; align-items:center; gap:8px;
  font:400 12.5px/1.35 var(--sans); color:var(--ink-900); }
.mx-label .tag { color:var(--ink-400); border-color:var(--rule); }
.mx-cells { flex:1; min-width:220px; display:flex; gap:6px; padding:0 3px; }
.cell { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; padding:0 3px; }
.cell u { display:block; height:10px; border-radius:3px; }
.cell.nd u { background:var(--fabL-0); background-image:repeating-linear-gradient(45deg,transparent 0 3px,#B7C6D2 3px 6px); }
.cell span { font:500 10px/1.2 var(--sans); color:var(--ink-600); text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cell.nd span { color:var(--ink-400); }
.cmp-foot { display:flex; align-items:center; gap:16px; margin-top:18px; flex-wrap:wrap; }
.cmp-foot .lg-title, .cmp-foot .lg-ramp b { color:var(--ink-400); }
.cmp-foot .lg-ramp b { color:var(--ink-600); }
.cmp-foot .lg-nd u { background:var(--fabL-0); background-image:repeating-linear-gradient(45deg,transparent 0 2.5px,#B7C6D2 2.5px 5px); }
.cmp-foot .lg-foot { color:var(--ink-400); }

/* ── toast ───────────────────────────────────────────────────────────── */
.toast { position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px); z-index:60;
  padding:11px 16px; border-radius:10px; background:rgba(11,32,54,.96); border:1px solid var(--ground-500);
  color:var(--ink-hi); font:500 12.5px/1 var(--sans); box-shadow:0 18px 44px rgba(2,8,18,.55);
  opacity:0; pointer-events:none; transition:opacity var(--t-std) var(--e), transform var(--t-std) var(--e-out); }
.toast.on { opacity:1; transform:translate(-50%,0); }

/* ── responsive ──────────────────────────────────────────────────────── */
@media (max-width:1400px) {
  .basket { left:auto; right:calc(436px + 40px); width:min(440px,calc(100vw - 900px)); }
}
@media (max-width:1240px) {
  .seg.views button span { display:none; }
  .seg.views button { padding:0 10px; }
  .drawer { width:392px; }
  .basket { left:20px; right:auto; bottom:auto; top:calc(var(--bar) + 20px); width:min(420px,calc(100vw - 460px)); }
  .legend { left:20px; bottom:20px; }
}
@media (max-width:1024px) {
  .search { width:min(260px,26vw); }
  .brand-text i { display:none; }
  .drawer { right:16px; top:auto; bottom:16px; left:16px; width:auto; max-height:min(62vh,540px); }
  body.drawer-open .partners { display:none; }
  .drawer { animation-name:drawer-up; }
  @keyframes drawer-up { from { opacity:0; transform:translateY(26px) } to { opacity:1; transform:none } }
  .basket { top:auto; bottom:16px; left:16px; right:16px; width:auto; }
  .legend { top:calc(var(--bar) + 16px); bottom:auto; left:16px; }
  body.drawer-open .basket { display:none; }
  body.drawer-open .legend { opacity:0; pointer-events:none; }
  .list-wrap, .cmp-wrap { padding:24px 20px 32px; }
}
@media (max-width:860px) {
  .topbar { gap:10px; padding:0 12px; flex-wrap:nowrap; }
  .search { width:auto; flex:1; min-width:120px; }
  .illus { display:none; }
  .seg button span { display:none; }
  .seg .dot { margin:0 2px; }
  .hint { display:none; }
}
@media (max-width:600px) {
  :root { --bar:56px; }
  /* No room for a credit strip beside a full-width sheet; the light pages
     still carry it, and so does every exported graphic. */
  .partners { display:none; }
  .page-credit { flex-wrap:wrap; gap:10px; }
  .page-credit .p-eyebrow { flex-basis:100%; margin-right:0; }
  .rule { display:none; }
  .brand-text b { font-size:16px; }
  .legend { display:none; }
  .drawer { left:10px; right:10px; bottom:10px; max-height:72vh; }
  .basket { left:10px; right:10px; bottom:10px; }
  .list-wrap, .cmp-wrap { padding:18px 14px 28px; }
  .mx-ind, .mx-label { width:190px; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; }
}