/* ============================================================
   deliriumtools.com — master stylesheet
   Design system: "Clinical precision"
   Author: Professor Alasdair MacLullich, University of Edinburgh
   v1.0 — 2026. WCAG 2.1 AA target.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Brand */
  --ink:        #0b2239;   /* near-black slate navy — headings, body */
  --ink-2:      #33475b;   /* secondary text */
  --ink-3:      #5b6b7c;   /* muted text */
  --line:       #e2e8ef;   /* hairlines / borders */
  --line-2:     #eef2f6;   /* lighter dividers */
  --bg:         #ffffff;   /* page background */
  --bg-soft:    #f5f8fa;   /* soft section background */
  --bg-tint:    #eef6f6;   /* brand-tinted panel */

  --brand:      #0c7d78;   /* primary teal; white text contrast 4.98:1 */
  --brand-600:  #0a6a66;
  --brand-700:  #0a6a66;   /* darker teal for text on white (AA) */
  --brand-050:  #e6f4f3;
  --navy:       #12385c;   /* deep navy accent (headers/hero) */
  --navy-700:   #0d2c49;
  --amber:      #b9770a;   /* warm signal / highlight (AA on white) */
  --amber-bg:   #fdf3e2;

  /* Category hues (chips / tags) — text colour is AA on its *-bg */
  --c-screening: #12385c; --c-screening-bg:#e7eef5;
  --c-ultrabrief:#0a6a66; --c-ultrabrief-bg:#e2f3f2;
  --c-diagnostic:#1f5fbf; --c-diagnostic-bg:#e7eefb;
  --c-monitoring:#0e7490; --c-monitoring-bg:#e2f1f5;
  --c-severity:  #6d3bbf; --c-severity-bg:#eee7fb;
  --c-icu:       #b42318; --c-icu-bg:#fbe9e7;
  --c-informant: #9a6207; --c-informant-bg:#fbf1de;
  --c-paediatric:#a5316f; --c-paediatric-bg:#fbe7f1;
  --c-motor:     #a34b08; --c-motor-bg:#fceadd;
  --c-cognitive: #1f7a44; --c-cognitive-bg:#e4f3ea;
  --c-research:  #475569; --c-research-bg:#eef1f5;
  --c-prediction:#34568a; --c-prediction-bg:#e9eef6;

  /* Status */
  --ok:         #1f7a44;   /* verified green */
  --ok-bg:      #e4f3ea;

  /* Type */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-hero: clamp(2.1rem, 4.6vw, 3.4rem);
  --fs-h1:   clamp(1.8rem, 3.2vw, 2.5rem);
  --fs-h2:   clamp(1.4rem, 2.4vw, 1.9rem);
  --fs-h3:   1.2rem;
  --fs-body: 1.02rem;
  --fs-sm:   0.9rem;
  --fs-xs:   0.8rem;

  /* Space / shape */
  --maxw: 1180px;
  --maxw-narrow: 820px;
  --radius: 14px;
  --radius-sm: 9px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(11,34,57,.06), 0 1px 3px rgba(11,34,57,.04);
  --shadow:    0 4px 16px rgba(11,34,57,.08);
  --shadow-lg: 0 14px 40px rgba(11,34,57,.14);
  --ring: 0 0 0 3px rgba(14,143,137,.35);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
:target { scroll-margin-top: 84px; }
body {
  margin: 0; font-family: var(--font); font-size: var(--fs-body);
  line-height: 1.62; color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body, p, li, dd, a, button, input, select { overflow-wrap:anywhere; }
img { max-width: 100%; display: block; }
a { color: var(--brand-700); text-decoration: none; }
a:hover { text-decoration: underline; }
main p a:not(.btn):not(.pill-link), main li a:not(.btn):not(.pill-link), .d-v a { text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .16em; }
h1,h2,h3,h4 { line-height: 1.18; color: var(--ink); margin: 0 0 .5em; font-weight: 700; letter-spacing: -.012em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 1rem; }
strong { font-weight: 650; }
:focus-visible { outline:3px solid var(--navy); outline-offset:3px; box-shadow:none; border-radius:6px; }
::selection { background: var(--brand-050); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; }
.narrow { max-width: var(--maxw-narrow); }
.section { padding: clamp(48px, 7vw, 92px) 0; }
.section-sm { padding: clamp(32px, 4vw, 52px) 0; }
.bg-soft { background: var(--bg-soft); }
.bg-tint { background: var(--bg-tint); }
.center { text-align: center; }
.eyebrow { display:inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-700); margin-bottom: .6rem; }
.lead { font-size: 1.16rem; color: var(--ink-2); }
.muted { color: var(--ink-3); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ---------- Skip link ---------- */
.skip { position:absolute; left:-999px; top:0; background:var(--navy); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; z-index:200; }
.skip:focus { left:0; }

/* ---------- Header / nav ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.9); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; gap: 18px; height: 68px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; font-size: 1.12rem; }
.brand:hover { text-decoration: none; }
.brand .logo { flex: 0 0 auto; }
.brand .tld { color: var(--brand-700); }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-links a { color: var(--ink-2); font-size: .95rem; font-weight: 550; padding: 9px 12px; border-radius: 8px; }
.nav-links a:hover { color: var(--ink); background: var(--bg-soft); text-decoration: none; }
.nav-links a.active, .nav-links a[aria-current="page"] { color: var(--brand-700); background: var(--brand-050); }
.nav-links a.btn-primary { color:#fff; background:var(--brand); }
.nav-links a.btn-primary:hover { color:#fff; background:var(--brand-600); }
.nav-cta { margin-left: 6px; }
.nav-toggle { display:none; margin-left:auto; background:none; border:1px solid var(--line); border-radius:9px; padding:9px 11px; cursor:pointer; color:var(--ink); }
.nav-toggle svg { display:block; }

@media (max-width: 1500px) {
  body.nav-open { overflow:hidden; }
  .nav-links { position: fixed; inset: 68px 0 auto 0; flex-direction: column; align-items: stretch; gap: 2px;
    background: #fff; border-bottom: 1px solid var(--line); padding: 12px 18px 18px; box-shadow: var(--shadow);
    max-height:calc(100dvh - 68px); overflow-y:auto; overscroll-behavior:contain;
    transform: translateY(-8px); opacity: 0; visibility:hidden; pointer-events: none; transition: .18s ease; }
  .nav-links.open { transform: none; opacity: 1; visibility:visible; pointer-events: auto; }
  .nav-links a { padding: 12px 12px; font-size: 1rem; }
  .nav-toggle { display: inline-flex; }
  .nav-cta { margin: 8px 0 0; }
}

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 9px; font-weight: 650; font-size: .97rem;
  padding: 12px 20px; border-radius: var(--radius-pill); border: 1.5px solid transparent; cursor: pointer;
  transition: transform .06s ease, background .15s ease, box-shadow .15s ease; text-decoration: none; }
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--brand-600); color:#fff; box-shadow: var(--shadow); }
.btn-dark { background: var(--navy); color:#fff; }
.btn-dark:hover { background: var(--navy-700); color:#fff; }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-700); background: var(--brand-050); }
.btn-lg { padding: 15px 26px; font-size: 1.03rem; }
.btn-sm { padding: 8px 14px; font-size: .86rem; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background:
   radial-gradient(1100px 520px at 82% -8%, rgba(14,143,137,.14), transparent 60%),
   radial-gradient(760px 420px at 6% 8%, rgba(18,56,92,.10), transparent 60%),
   linear-gradient(180deg, #fbfdfd 0%, #f4f8f9 100%); border-bottom: 1px solid var(--line); }
.hero .container { padding-top: clamp(46px, 7vw, 84px); padding-bottom: clamp(46px, 7vw, 84px); }
.hero h1 { font-size: var(--fs-hero); max-width: 15ch; }
.hero .lead { max-width: 60ch; }
.hero .hero-promise { max-width: 66ch; }
.hero-safety { max-width:64ch; margin:18px 0 0; padding:11px 14px; border-left:4px solid var(--brand); background:rgba(255,255,255,.72); color:var(--ink-2); border-radius:0 10px 10px 0; font-size:.94rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-meta { display:flex; flex-wrap:wrap; gap: 22px 34px; margin-top: 34px; }
.hero-meta .num { font-size: 1.9rem; font-weight: 800; color: var(--navy); letter-spacing:-.02em; line-height:1; }
.hero-meta .lbl { font-size: var(--fs-sm); color: var(--ink-3); margin-top:4px; }

/* ---------- Grids & cards ---------- */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .grid-3,.grid-4 { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px){ .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr; } }

.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.card-hover { transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #d7e6e5; }
.card .icon { width: 44px; height: 44px; display:grid; place-items:center; border-radius: 12px; background: var(--brand-050); color: var(--brand-700); margin-bottom: 14px; }
.feature-title { font-size: 1.12rem; margin-bottom: .3rem; }

/* ---------- Audience and task orientation ---------- */
.audience-section { padding-top:clamp(42px,6vw,72px); }
.audience-grid .card { padding:20px; }
.audience-grid h3 { font-size:1.05rem; }
.audience-grid p { font-size:.91rem; margin:0; }
.audience-safety { border-color:#efd7ad; background:#fffdfa; }
.how-strip { margin-top:26px; padding:22px 24px; background:var(--navy); color:#fff; border-radius:var(--radius); }
.how-strip h2 { color:#fff; font-size:1.12rem; }
.how-strip ol { list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:16px 0 0; padding:0; }
.how-strip li { display:grid; grid-template-columns:30px 1fr; gap:2px 9px; align-items:start; }
.how-strip li > span { grid-row:1 / span 2; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:#fff; color:var(--navy); font-weight:800; }
.how-strip strong { color:#fff; }
.how-strip small { color:#cdd9e4; line-height:1.4; }
@media (max-width:800px){ .how-strip ol{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .how-strip ol{grid-template-columns:1fr;} }

/* ---------- Chips / tags / badges ---------- */
.chip { display:inline-flex; align-items:center; gap:6px; font-size: var(--fs-xs); font-weight: 650;
  padding: 4px 11px; border-radius: var(--radius-pill); background: var(--bg-soft); color: var(--ink-2);
  border: 1px solid transparent; white-space: nowrap; }
.tag { display:inline-flex; align-items:center; gap:6px; font-size: var(--fs-xs); font-weight: 650; padding: 3px 10px; border-radius: var(--radius-pill); }
.tag::before { content:""; width:7px; height:7px; border-radius:50%; background: currentColor; opacity:.85; }
.tag.screening{ color:var(--c-screening); background:var(--c-screening-bg);}
.tag.ultrabrief{ color:var(--c-ultrabrief); background:var(--c-ultrabrief-bg);}
.tag.diagnostic{ color:var(--c-diagnostic); background:var(--c-diagnostic-bg);}
.tag.monitoring{ color:var(--c-monitoring); background:var(--c-monitoring-bg);}
.tag.severity{ color:var(--c-severity); background:var(--c-severity-bg);}
.tag.icu{ color:var(--c-icu); background:var(--c-icu-bg);}
.tag.informant{ color:var(--c-informant); background:var(--c-informant-bg);}
.tag.paediatric{ color:var(--c-paediatric); background:var(--c-paediatric-bg);}
.tag.motor{ color:var(--c-motor); background:var(--c-motor-bg);}
.tag.cognitive{ color:var(--c-cognitive); background:var(--c-cognitive-bg);}
.tag.research{ color:var(--c-research); background:var(--c-research-bg);}
.tag.prediction{ color:var(--c-prediction); background:var(--c-prediction-bg);}

.badge-verified { display:inline-flex; align-items:center; gap:5px; font-size: var(--fs-xs); font-weight: 700; color: var(--ok); background: var(--ok-bg); padding: 3px 9px; border-radius: var(--radius-pill); }
.badge-search { display:inline-flex; align-items:center; gap:5px; font-size: var(--fs-xs); font-weight: 650; color: var(--ink-3); background: var(--bg-soft); padding: 3px 9px; border-radius: var(--radius-pill); border:1px solid var(--line); }

/* ---------- Directory controls ---------- */
.toolbar { position: sticky; top: 68px; z-index: 40; background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line); padding: 16px 0; }
.searchbar { display:flex; align-items:center; gap: 10px; background:#fff; border:1.5px solid var(--line);
  border-radius: var(--radius-pill); padding: 6px 8px 6px 16px; box-shadow: var(--shadow-sm); }
.searchbar:focus-within { border-color: var(--brand); box-shadow: var(--ring); }
.searchbar input { flex:1; min-width:0; max-width:100%; border:none; outline:none; font-size: 1.05rem; padding: 9px 4px; background:transparent; color:var(--ink); font-family:inherit; }
.searchbar svg { color: var(--ink-3); flex:0 0 auto; }
.filter-row { display:flex; flex-wrap:wrap; gap: 8px; align-items:center; margin-top: 8px; }
.filter-toggle { display:none; width:100%; margin-top:10px; padding:9px 14px; border:1.5px solid var(--line); border-radius:var(--radius-pill); background:#fff; color:var(--ink); font:inherit; font-size:.9rem; font-weight:650; cursor:pointer; }
.filter-label { font-size: var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-3); margin-right: 4px; }
.fchip { font: inherit; font-size: var(--fs-sm); font-weight: 600; padding: 7px 13px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--line); background:#fff; color: var(--ink-2); cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition: .12s ease; }
.fchip:hover { border-color: #c9d6df; color: var(--ink); }
.fchip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color:#fff; }
.fchip .dot { width:8px; height:8px; border-radius:50%; background: currentColor; }
.fchip .count { font-size: var(--fs-xs); opacity:.7; font-weight:650; }
.result-meta { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin: 20px 0 6px; }
.result-count { font-weight: 650; color: var(--ink-2); }
.select { font:inherit; font-size:.9rem; padding:8px 12px; border-radius:9px; border:1.5px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; }
.directory-intro { max-width:66ch; }
.directory-scope-note { max-width:76ch; margin:.7rem 0 0; color:var(--ink-3); font-size:.88rem; }
.filter-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 20px; padding-top:12px; }
.filter-group { min-width:0; border-top:1px solid var(--line-2); padding-top:8px; }
.filter-group[data-filter-group="purpose"], .filter-group[data-filter-group="evidence"] { grid-column:1 / -1; }
.filter-group summary { cursor:pointer; color:var(--ink-2); font-size:var(--fs-xs); font-weight:750; letter-spacing:.07em; text-transform:uppercase; padding:5px 0; }
.filter-group summary::marker { color:var(--brand-700); }
.filter-help { margin-left:6px; color:var(--ink-3); font-weight:550; letter-spacing:0; text-transform:none; }
.filter-drawer-head { display:none; }
.filter-mobile-actions { display:none; }
.tools-more { display:flex; justify-content:center; padding:24px 0 8px; }
@media (max-width:1500px) and (min-width:901px) {
  .toolbar { position:static; top:auto; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .filter-toggle { display:block; }
  .filter-options { display:none; }
  .filter-options.open { display:grid; }
}
@media (max-width: 900px) {
  body.filters-open { overflow:hidden; }
  .toolbar { position:static; top:auto; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .filter-toggle { display:block; }
  .filter-options { display:none; }
  .filter-options.open { position:fixed; inset:68px 0 0; z-index:115; display:block; overflow-y:auto; overscroll-behavior:contain; padding:16px 18px; background:#fff; }
  .filter-drawer-head { position:sticky; top:-16px; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:16px; margin:-16px -18px 8px; padding:14px 18px; border-bottom:1px solid var(--line); background:#fff; }
  .filter-drawer-head h2 { margin:0; font-size:1.08rem; }
  .filter-group { padding:10px 2px; }
  .filter-group summary { font-size:.86rem; padding:8px 0; }
  .filter-row { align-items:flex-start; }
  .filter-mobile-actions { position:sticky; bottom:-16px; display:flex; gap:9px; margin:20px -18px -16px; padding:12px 18px max(12px,env(safe-area-inset-bottom)); background:rgba(255,255,255,.97); border-top:1px solid var(--line); box-shadow:0 -5px 20px rgba(11,34,57,.08); }
  .filter-mobile-actions .btn-primary { flex:1; justify-content:center; }
  .result-meta { align-items:flex-start; }
}

/* ---------- Tool cards ---------- */
.tools-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: 18px; margin-top: 8px; }
@media (max-width:400px){ .tools-grid { grid-template-columns:minmax(0,1fr); } }
.tool { display:flex; flex-direction:column; gap: 12px; background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease; content-visibility:auto; contain-intrinsic-size:430px; }
.tool:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color:#d7e6e5; }
.tool-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.tool-abbr { font-size: 1.28rem; font-weight: 800; color: var(--ink); letter-spacing:-.02em; }
.tool-name { font-size: .95rem; color: var(--ink-2); margin-top: 1px; }
.tool-title { font-size:inherit; margin:0; line-height:1.25; }
.tool-title a { display:flex; flex-direction:column; color:inherit; }
.tool-title a:hover { text-decoration:none; }
.tool-title a:hover .tool-abbr { text-decoration:underline; text-underline-offset:.15em; }
.tool-year { flex:0 0 auto; font-size: var(--fs-xs); font-weight:700; color: var(--ink-3); background:var(--bg-soft); border-radius: var(--radius-pill); padding: 4px 10px; }
.tool-tags { display:flex; flex-wrap:wrap; gap:6px; }
.tool-sum { font-size: .92rem; color: var(--ink-2); margin: 0; }
.tool-acc { display:flex; gap: 18px; padding: 10px 0 2px; border-top:1px dashed var(--line); margin-top: auto; }
.tool-acc .val { font-size: 1.15rem; font-weight: 800; color: var(--navy); line-height:1; }
.tool-acc .k { font-size: var(--fs-xs); color: var(--ink-3); }
.tool-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top: 10px; border-top:1px solid var(--line-2); }
.tool-foot a { font-size: .88rem; font-weight:650; display:inline-flex; align-items:center; gap:6px; }
.empty { text-align:center; padding: 60px 20px; color: var(--ink-3); }
.empty h2 { font-size:1.15rem; }
.empty-constraints { display:flex; justify-content:center; flex-wrap:wrap; gap:7px; align-items:center; }

/* ---------- Comparison table ---------- */
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
table.cmp { width:100%; border-collapse: collapse; min-width: 640px; background:#fff; }
.cmp th, .cmp td { text-align:left; padding: 14px 16px; border-bottom: 1px solid var(--line-2); font-size: .95rem; vertical-align: top; }
.cmp thead th { background: var(--navy); color:#fff; font-weight:650; font-size:.9rem; position:sticky; top:0; }
.cmp tbody tr:hover { background: var(--bg-soft); }
.cmp td:first-child, .cmp th:first-child { font-weight: 650; }
.cmp .big { font-size:1.05rem; font-weight:800; color:var(--navy); }
.table-scroll-cue { display:none; color:var(--ink-3); font-size:.86rem; margin:0 0 8px; }
.compare-tool-link { text-decoration:none !important; }
.compare-tool-link:hover .big { text-decoration:underline; text-underline-offset:.15em; }
.disclosure-details { border-left:4px solid var(--amber); background:var(--amber-bg); padding:12px 16px; border-radius:0 12px 12px 0; }
.disclosure-details summary { cursor:pointer; font-weight:700; color:var(--ink); }
.disclosure-details p { margin:10px 0 0; }
@media (max-width:700px){
  .table-scroll-cue { display:block; }
  table.cmp:not(.dt) th:first-child, table.cmp:not(.dt) td:first-child { position:sticky; left:0; z-index:2; }
  table.cmp:not(.dt) th:first-child { background:var(--navy); }
  table.cmp:not(.dt) td:first-child { background:#fff; box-shadow:4px 0 8px rgba(11,34,57,.06); }
}

/* ---------- Callouts ---------- */
.callout { border-left: 4px solid var(--brand); background: var(--brand-050); padding: 16px 20px; border-radius: 0 12px 12px 0; }
.callout.warn { border-color: var(--amber); background: var(--amber-bg); }
.callout h2,.callout h3,.callout h4 { margin: 0 0 .3rem; font-size:1.02rem; }
.callout p:last-child { margin-bottom:0; }

/* ---------- Steps / how-to ---------- */
.steps { display:grid; gap: 16px; }
.step { display:flex; gap:16px; align-items:flex-start; }
.step .n { flex:0 0 auto; width:36px; height:36px; border-radius:50%; background:var(--navy); color:#fff; font-weight:700; display:grid; place-items:center; }
.step h3 { margin-bottom:.2rem; }

/* ---------- Downloads ---------- */
.dl { display:flex; align-items:center; gap:16px; padding:18px 20px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-sm); transition: .12s ease; }
.dl:hover { border-color:#d7e6e5; box-shadow:var(--shadow); }
.dl .ic { flex:0 0 auto; width:46px; height:46px; border-radius:11px; display:grid; place-items:center; background:var(--brand-050); color:var(--brand-700); }
.dl .meta { flex:1; }
.dl .meta b { display:block; color:var(--ink); }
.dl .meta span { font-size:var(--fs-sm); color:var(--ink-3); }

/* ---------- Author block ---------- */
.author { display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.author .avatar { width:96px; height:96px; border-radius:50%; background:linear-gradient(135deg,var(--navy),var(--brand)); color:#fff; display:grid; place-items:center; font-size:2rem; font-weight:800; flex:0 0 auto; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-700); color: #cdd9e4; padding: 54px 0 30px; }
.site-footer a { color:#fff; }
.footer-button { appearance:none; min-height:24px; border:0; padding:2px 0; color:#fff; background:transparent; font:inherit; cursor:pointer; text-decoration:underline; text-decoration-thickness:.08em; text-underline-offset:.16em; }
.footer-button:hover { text-decoration-thickness:.14em; }
.site-footer p a, .site-footer .fine a { text-decoration:underline; text-decoration-thickness:.08em; text-underline-offset:.16em; }
.site-footer .cols { display:grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 34px; }
@media (max-width: 760px){ .site-footer .cols { grid-template-columns:1fr; gap:26px; } }
.site-footer h2 { color:#fff; font-size:.95rem; letter-spacing:.02em; margin-bottom:.7rem; }
.site-footer ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.site-footer .fbrand { font-weight:800; font-size:1.15rem; color:#fff; letter-spacing:-.02em; }
.site-footer .fine { border-top:1px solid rgba(255,255,255,.14); margin-top:34px; padding-top:20px; font-size:var(--fs-sm); color:#9fb2c2; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }

/* ---------- Misc ---------- */
.divider { height:1px; background: var(--line); border:0; margin: 0; }
.kicker-row { display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom: 26px; }
.pill-link { display:inline-flex; align-items:center; gap:7px; font-weight:650; color:var(--brand-700); }
.pill-link:hover { gap:10px; }
ul.clean { list-style:none; padding:0; margin:0; }
.check-list { list-style:none; padding:0; margin: 0; display:grid; gap:10px; }
.check-list li { position:relative; padding-left:33px; }
.check-list li::before { content:""; position:absolute; left:0; top:1px; width:22px; height:22px; border-radius:50%; background: var(--ok-bg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231f7a44' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat:no-repeat; background-position:center; }

/* ---------- Directory upgrades: view toggle, detail, compare, table ---------- */
.view-toggle { display:inline-flex; border:1.5px solid var(--line); border-radius:var(--radius-pill); overflow:hidden; }
.view-toggle button { font:inherit; font-size:.86rem; font-weight:600; padding:7px 14px; border:0; background:#fff; color:var(--ink-2); cursor:pointer; }
.view-toggle button + button { border-left:1.5px solid var(--line); }
.view-toggle button[aria-pressed="true"] { background:var(--navy); color:#fff; }

.tool { position:relative; }
.tool.selected { border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-050), var(--shadow-sm); }
.tool-foot-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; min-width:0; }
.tool-profile-link { font-size:.8rem; font-weight:700; padding:6px 8px; border-radius:8px; color:var(--brand-700); }
.tool-profile-link:hover { background:var(--brand-050); text-decoration:none; }
.tool-cmp { font:inherit; font-size:.8rem; font-weight:650; padding:6px 11px; border-radius:var(--radius-pill); border:1.5px solid var(--line); background:#fff; color:var(--ink-2); cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:.12s ease; }
.tool-cmp:hover { border-color:var(--brand); color:var(--brand-700); }
.tool-cmp.on { background:var(--brand-050); border-color:var(--brand); color:var(--brand-700); }
.tool-cmp.sm { padding:3px 9px; min-width:30px; justify-content:center; }
.tool-expand { font:inherit; font-size:.8rem; font-weight:650; padding:6px 8px; border:0; background:none; color:var(--ink-2); cursor:pointer; display:inline-flex; align-items:center; gap:4px; border-radius:8px; }
.tool-expand:hover { color:var(--brand-700); background:var(--bg-soft); }
.tool.open .tool-expand svg { transform:rotate(180deg); }
.tool-expand svg { transition:transform .15s ease; }

.tool-details { margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); display:grid; gap:7px; }
.d-row { display:grid; grid-template-columns:110px 1fr; gap:10px; font-size:.86rem; align-items:baseline; }
.d-k { color:var(--ink-3); font-weight:650; }
.d-v { color:var(--ink-2); margin:0; min-width:0; }
.d-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.tool-access-card { margin-top:16px; display:grid; gap:22px; align-items:start; }
.tool-access-card.has-preview { grid-template-columns:minmax(0,1.1fr) minmax(230px,.9fr); }
.tool-access-card h2 { font-size:1.12rem; margin:0 0 10px; }
.tool-access-copy > p { color:var(--ink-2); }
.rights-note { margin:14px 0; padding:12px 14px; border-left:4px solid var(--brand); background:var(--brand-050); border-radius:0 10px 10px 0; font-size:.9rem; }
.tool-preview { margin:0; min-width:0; }
.tool-preview a { display:block; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:var(--shadow-sm); }
.tool-preview a:hover { border-color:var(--brand); box-shadow:var(--shadow); }
.tool-preview img { display:block; width:100%; max-height:460px; object-fit:contain; background:#fff; }
.tool-preview figcaption { margin-top:8px; color:var(--ink-3); font-size:.76rem; line-height:1.45; }
@media (max-width:700px){
  .tool-access-card.has-preview { grid-template-columns:1fr; }
  .tool-preview { max-width:460px; }
}
.btn-copy.copied { background:var(--ok-bg); border-color:var(--ok); color:var(--ok); }

.tool.flash, tr.flash { animation:flashRing 1.6s ease; }
@keyframes flashRing { 0%,100%{ box-shadow:var(--shadow-sm);} 15%{ box-shadow:0 0 0 3px var(--brand);} }

/* Table (dense) view */
.table-sort { color:inherit; background:transparent; border:0; padding:0; font:inherit; font-weight:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:.18em; }
.table-sort:hover { color:#fff; }
table.dt td { font-size:.9rem; }
table.dt .muted { color:var(--ink-3); }

/* Compare tray */
.compare-tray { position:fixed; left:0; right:0; bottom:0; z-index:120; background:#fff; border-top:1px solid var(--line); box-shadow:0 -6px 24px rgba(11,34,57,.10); }
body.compare-open { padding-bottom:120px; }
.tray-inner { display:flex; align-items:center; gap:14px; padding:12px 22px; flex-wrap:wrap; }
.tray-label { font-weight:700; color:var(--navy); font-size:.92rem; }
.tray-chips { display:flex; gap:7px; flex-wrap:wrap; flex:1; }
.tray-chip { display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:650; background:var(--brand-050); color:var(--brand-700); border-radius:var(--radius-pill); padding:4px 6px 4px 12px; }
.tray-chip button { border:0; background:rgba(10,106,102,.15); color:var(--brand-700); width:24px; height:24px; border-radius:50%; cursor:pointer; font-size:.9rem; line-height:1; }
.tray-actions { display:flex; gap:8px; }
.compare-tray.nudge { animation:nudge .3s ease; }
@keyframes nudge { 0%,100%{ transform:none;} 25%{ transform:translateX(-4px);} 75%{ transform:translateX(4px);} }
@media (max-width:620px){ body.compare-open{padding-bottom:210px;} .tray-chips{ order:3; flex-basis:100%; } }

/* Modal */
[hidden] { display:none !important; }
.modal { position:fixed; inset:0; z-index:130; background:rgba(11,34,57,.55); display:flex; align-items:center; justify-content:center; padding:20px; }
.modal-card { background:#fff; border-radius:16px; width:100%; max-width:920px; max-height:86vh; overflow:auto; padding:22px; box-shadow:var(--shadow-lg); }
.modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.modal-x { border:0; background:var(--bg-soft); width:34px; height:34px; border-radius:50%; font-size:1.3rem; line-height:1; cursor:pointer; color:var(--ink-2); }
.modal-x:hover { background:var(--line); }
.modal .cmp td:first-child, .modal .cmp th:first-child { font-weight:650; color:var(--ink-2); background:var(--bg-soft); position:sticky; left:0; }

/* Evidence level badges + chips + detail grid */
.ev-badge { display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-xs); font-weight:650; padding:3px 9px; border-radius:var(--radius-pill); }
.ev-badge .ev-dot, .ev-chip .ev-dot { width:7px; height:7px; border-radius:50%; background:currentColor; display:inline-block; flex:0 0 auto; }
.ev-badge.ev-pooled { color:#1f7a44; background:#e4f3ea; }
.ev-badge.ev-multi { color:#0a6a66; background:#e2f3f2; }
.ev-badge.ev-single { color:#9a6207; background:#fbf1de; }
.ev-badge.ev-source-only { color:#5b6b7c; background:#eef1f5; }
.ev-badge.ev-indirect { color:#6d3bbf; background:#eee7fb; }
.ev-badge.ev-development { color:#b42318; background:#fbe9e7; }
.ev-badge.ev-unconfirmed { color:#5b6b7c; background:#eef1f5; }
.ev-chip.ev-pooled .ev-dot { background:#1f7a44; }
.ev-chip.ev-multi .ev-dot { background:#0a6a66; }
.ev-chip.ev-single .ev-dot { background:#9a6207; }
.ev-chip.ev-source-only .ev-dot { background:#5b6b7c; }
.ev-chip.ev-indirect .ev-dot { background:#6d3bbf; }
.ev-chip.ev-development .ev-dot { background:#b42318; }
.ev-chip.ev-unconfirmed .ev-dot { background:#5b6b7c; }
.d-grid { display:grid; gap:7px; }

/* ---------- Tool profiles ---------- */
.tool-profile-overview { margin:18px 0; border-top:4px solid var(--brand); background:linear-gradient(180deg,#fff 0%,#fbfdfd 100%); }
.tool-profile-overview h2 { margin:.1rem 0 1rem; }
.tool-profile-overview p { color:var(--ink-2); }
.tool-profile-overview p:last-child { margin-bottom:0; }
.tool-evidence-card { margin-top:16px; }
.tool-evidence-card > h2 { font-size:1.2rem; margin:0 0 14px; }
.tool-scope-notice { margin:18px 0; }
.tool-access-state { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:18px 0; padding:16px 18px; border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:0 12px 12px 0; background:var(--brand-050); }
.tool-access-state.unavailable { border-left-color:var(--amber); background:var(--amber-bg); }
.tool-access-state.caution { border-left-color:var(--amber); background:var(--amber-bg); }
.tool-access-state h2 { font-size:1.05rem; margin:.1rem 0 .25rem; }
.tool-access-state p { margin:0; color:var(--ink-2); font-size:.9rem; }
.access-kicker { font-size:.72rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
@media(max-width:620px){ .tool-access-state{align-items:stretch;flex-direction:column;} .d-row{grid-template-columns:1fr;} }

/* ---------- Earliest-first tool timeline ---------- */
.timeline-hero { background:
  radial-gradient(720px 360px at 15% 0%, rgba(14,143,137,.13), transparent 64%),
  linear-gradient(180deg,#fbfdfd 0%,#f3f8f8 100%); border-bottom:1px solid var(--line); }
.timeline-hero h1 { font-size:var(--fs-hero); margin-inline:auto; max-width:16ch; }
.timeline-hero .lead { max-width:68ch; margin-inline:auto; }
.timeline-scope { max-width:760px; margin:26px auto 0; text-align:left; }
.timeline-controls { border-bottom:1px solid var(--line); background:#fff; }
.timeline-controls .container { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-block:12px; }
.timeline-search { flex:1 1 240px; }
.timeline-search input { width:100%; font:inherit; font-size:.9rem; padding:9px 13px; border:1.5px solid var(--line); border-radius:var(--radius-pill); }
.timeline-controls output { margin-left:auto; color:var(--ink-3); font-size:.86rem; font-weight:650; }
.decade-nav { position:sticky; top:68px; z-index:35; background:rgba(255,255,255,.95); backdrop-filter:blur(9px); border-bottom:1px solid var(--line); }
.decade-nav .container { display:flex; align-items:center; gap:8px; overflow-x:auto; padding-block:12px; scrollbar-width:thin; }
.decade-links { display:flex; align-items:center; gap:8px; }
.decade-select,.decade-cue { display:none; }
.decade-nav span { flex:0 0 auto; font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-right:3px; }
.decade-nav a { flex:0 0 auto; padding:5px 11px; border:1px solid var(--line); border-radius:var(--radius-pill); background:#fff; font-size:.84rem; font-weight:650; }
.decade-nav a:hover { background:var(--brand-050); border-color:var(--brand); text-decoration:none; }
.timeline-section { background:linear-gradient(90deg,#fff 0%,#fbfdfd 50%,#fff 100%); }
.timeline-container { max-width:980px; }
.tool-timeline { --year-col:116px; --rail-col:34px; position:relative; list-style:none; margin:0; padding:0; }
.tool-timeline::before { content:""; position:absolute; top:18px; bottom:18px; left:calc(var(--year-col) + (var(--rail-col) / 2)); width:3px; transform:translateX(-50%); border-radius:3px; background:linear-gradient(180deg,var(--amber) 0%,var(--brand) 9%,var(--brand) 92%,var(--navy) 100%); }
.timeline-event { position:relative; display:grid; grid-template-columns:var(--year-col) var(--rail-col) minmax(0,1fr); align-items:start; margin:0 0 28px; }
.timeline-anchor { position:absolute; top:-144px; }
.timeline-year { grid-column:1; padding:18px 16px 0 0; text-align:right; font-size:1.08rem; font-weight:800; color:var(--navy); }
.timeline-year time { display:inline-block; }
.timeline-undated { display:inline-block; font-size:.76rem; line-height:1.25; color:var(--ink-3); }
.timeline-node { grid-column:2; width:15px; height:15px; margin:23px auto 0; border:4px solid #fff; border-radius:50%; background:var(--brand); box-shadow:0 0 0 2px var(--brand); z-index:1; }
.timeline-card { grid-column:3; background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px 22px; box-shadow:var(--shadow-sm); transition:transform .12s ease,box-shadow .15s ease,border-color .15s ease; }
.timeline-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); border-color:#cfe2e1; }
.timeline-card-head { display:grid; grid-template-columns:58px minmax(0,1fr); gap:15px; align-items:start; }
.timeline-monogram { width:58px; height:58px; display:grid; place-items:center; padding:7px; overflow:hidden; border-radius:14px; background:linear-gradient(145deg,var(--navy),#1b527f); color:#fff; text-align:center; font-size:.68rem; line-height:1.05; font-weight:800; letter-spacing:-.01em; }
.timeline-card h2 { font-size:1.28rem; margin:.12rem 0 .12rem; }
.timeline-full-name { color:var(--ink-3); font-size:.9rem; margin:0; }
.timeline-card .tool-tags { margin:14px 0 10px; }
.timeline-card > p { color:var(--ink-2); font-size:.94rem; margin-bottom:12px; }
.timeline-badges { min-height:24px; display:flex; flex-wrap:wrap; gap:7px; }
.timeline-context-badge { display:inline-flex; padding:3px 9px; border-radius:var(--radius-pill); color:#8a5303; background:var(--amber-bg); font-size:var(--fs-xs); font-weight:700; }
.timeline-event.historical .timeline-node { background:var(--amber); box-shadow:0 0 0 2px var(--amber); }
.timeline-event.historical .timeline-card { border-color:#efd7ad; background:linear-gradient(180deg,#fffdfa,#fff 100%); }
.timeline-event.historical .timeline-monogram { background:linear-gradient(145deg,#8a5303,var(--amber)); }
.timeline-home-preview { position:relative; display:grid; gap:0; padding:10px 22px; overflow:hidden; }
.timeline-home-preview::before { content:""; position:absolute; top:28px; bottom:28px; left:78px; width:2px; background:linear-gradient(var(--amber),var(--brand)); }
.timeline-home-preview > div { position:relative; display:grid; grid-template-columns:70px 1fr; gap:16px; align-items:center; min-height:64px; }
.timeline-home-preview > div::before { content:""; position:absolute; left:61px; width:10px; height:10px; border:3px solid #fff; border-radius:50%; background:var(--brand); box-shadow:0 0 0 2px var(--brand); }
.timeline-home-preview > div:first-child::before { background:var(--amber); box-shadow:0 0 0 2px var(--amber); }
.timeline-home-preview time { font-size:.86rem; font-weight:800; color:var(--navy); }
.timeline-home-preview a { font-weight:750; color:var(--ink); }
.timeline-home-preview a span { display:block; color:var(--ink-3); font-size:.78rem; font-weight:500; }
@media (max-width:700px){
  .decade-nav { top:68px; }
  .timeline-controls .container { align-items:stretch; }
  .timeline-controls .select,.timeline-controls .view-toggle { flex:1; }
  .timeline-controls output { flex-basis:100%; margin-left:0; }
  .decade-links { display:none; }
  .decade-select { display:block; flex:1; }
  .decade-select .select { width:100%; }
  .decade-cue { display:inline; }
  .tool-timeline { --year-col:0px; --rail-col:28px; }
  .tool-timeline::before { left:14px; }
  .timeline-event { grid-template-columns:28px minmax(0,1fr); margin-bottom:22px; }
  .timeline-year { grid-column:2; grid-row:1; padding:0 0 6px; text-align:left; font-size:.9rem; }
  .timeline-node { grid-column:1; grid-row:1 / span 2; margin:5px auto 0; }
  .timeline-card { grid-column:2; grid-row:2; padding:18px; }
  .timeline-card-head { grid-template-columns:48px minmax(0,1fr); gap:12px; }
  .timeline-monogram { width:48px; height:48px; border-radius:12px; font-size:.62rem; }
}

/* ---------- Choice and error routes ---------- */
.choice-block > h2 { margin-bottom:16px; }
.choice-card { display:flex; flex-direction:column; text-decoration:none !important; }
.choice-card p { color:var(--ink-2); font-size:.9rem; }
.choice-card strong { margin-top:auto; color:var(--brand-700); font-size:.88rem; }
.choice-links { display:flex; flex-wrap:wrap; gap:9px; }
.choice-links a { padding:8px 12px; border:1px solid var(--line); border-radius:var(--radius-pill); background:#fff; font-weight:650; font-size:.9rem; }
.choice-links a:hover { background:var(--brand-050); text-decoration:none; border-color:var(--brand); }
.error-search { margin:28px auto 18px; max-width:620px; text-align:left; }
.error-search label { display:block; font-weight:700; margin-bottom:7px; }
.error-search > div { display:flex; gap:8px; }
.error-search input { flex:1; min-width:0; font:inherit; padding:11px 14px; border:1.5px solid var(--line); border-radius:var(--radius-pill); }
.error-actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.error-report { margin-top:24px; }
@media(max-width:560px){ .error-search > div{flex-direction:column;} .error-search .btn{justify-content:center;} }

@media (prefers-reduced-motion: reduce){ * { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }

/* ---------- Consent, reflow and alternate-output support ---------- */
.dt-cookie-choice { position:relative; z-index:90; display:flex; align-items:center; justify-content:center; gap:24px; padding:15px max(22px,calc((100vw - var(--maxw))/2 + 22px)); border-bottom:1px solid #cbd8e3; background:#f2f7fa; color:var(--ink); }
.dt-cookie-choice > div:first-child { max-width:760px; }
.dt-cookie-choice h2 { margin:0 0 3px; font-size:1rem; }
.dt-cookie-choice p { margin:0; font-size:.9rem; color:var(--ink-2); }
.dt-cookie-actions { display:flex; flex:0 0 auto; gap:8px; flex-wrap:wrap; }
@media(max-width:720px){ .dt-cookie-choice{align-items:stretch;flex-direction:column;gap:12px;} .dt-cookie-actions .btn{flex:1;justify-content:center;} }

.table-wrap[tabindex="0"]:focus-visible { outline:3px solid var(--brand); outline-offset:3px; box-shadow:none; }

@media (forced-colors: active) {
  * { forced-color-adjust:auto; }
  .tag, .ev-badge, .timeline-context-badge, .btn, .fchip, .tool-access-state, .card { border:1px solid CanvasText; }
  .timeline-node, .tool-timeline::before { background:CanvasText; box-shadow:none; }
  .check-list li::before { background:none; border:1px solid CanvasText; }
  :focus-visible { outline:3px solid Highlight; }
}

@media (prefers-reduced-motion: reduce){ .timeline-card:hover,.card-hover:hover,.tool:hover{transform:none!important;} }

@media print {
  .site-header, .site-footer, .dt-cookie-choice, .compare-tray, .timeline-controls, .decade-nav, .filter-toggle, .filter-options, .hero-actions, .nav-toggle { display:none !important; }
  body { color:#000; background:#fff; font-size:11pt; }
  main, .section, .section-sm { padding:0; }
  a { color:#000; text-decoration:underline; }
  a[href^="http"]::after { content:" (" attr(href) ")"; font-size:8pt; word-break:break-all; }
  .card, .timeline-card { break-inside:avoid; box-shadow:none; border:1px solid #777; }
  .tool-timeline::before { background:#777; }
}