/* =========================================================
   WARD SURVIVAL  ·  Clinical Reference  ·  v3.0
   Mobile-first · Compact · Professional
   ========================================================= */

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  /* Core palette */
  --c-bg:        #f1f3f7;
  --c-surface:   #ffffff;
  --c-surface2:  #f8f9fb;
  --c-border:    #e4e8ef;
  --c-border2:   #cdd3de;

  /* Text */
  --c-text:      #111827;
  --c-text2:     #374151;
  --c-muted:     #6b7280;
  --c-faint:     #9ca3af;

  /* Brand */
  --c-navy:      #0f172a;
  --c-navy2:     #1e293b;
  --c-blue:      #1d6fa8;
  --c-blue-lt:   #eff6ff;
  --c-blue-md:   #dbeafe;
  --c-blue-brd:  #bfdbfe;

  /* Clinical signals */
  --c-red:       #b91c1c;
  --c-red-lt:    #fef2f2;
  --c-red-brd:   #fecaca;
  --c-red-dk:    #991b1b;

  --c-amber:     #b45309;
  --c-amber-lt:  #fffbeb;
  --c-amber-brd: #fde68a;

  --c-green:     #15803d;
  --c-green-lt:  #f0fdf4;
  --c-green-brd: #bbf7d0;

  --c-purple:    #6d28d9;
  --c-purple-lt: #f5f3ff;
  --c-purple-brd:#ddd6fe;

  --c-teal:      #0f766e;
  --c-teal-lt:   #f0fdfa;

  --c-orange:    #c2410c;
  --c-orange-lt: #fff7ed;
  --c-orange-brd:#fed7aa;

  /* Section header colours */
  --sh-imm-bg:   #fef2f2; --sh-imm-fg:   #991b1b; --sh-imm-brd: #fecaca;
  --sh-q-bg:     #fffbeb; --sh-q-fg:     #92400e; --sh-q-brd:   #fde68a;
  --sh-inv-bg:   #eff6ff; --sh-inv-fg:   #1e40af; --sh-inv-brd: #bfdbfe;
  --sh-mgmt-bg:  #f0fdf4; --sh-mgmt-fg:  #166534; --sh-mgmt-brd:#bbf7d0;
  --sh-esc-bg:   #f5f3ff; --sh-esc-fg:   #5b21b6; --sh-esc-brd: #ddd6fe;
  --sh-rx-bg:    #fff7ed; --sh-rx-fg:    #9a3412; --sh-rx-brd:  #fed7aa;

  /* Type */
  --font:        -apple-system,BlinkMacSystemFont,'Segoe UI','Inter',system-ui,sans-serif;
  --mono:        'SFMono-Regular','Consolas','Liberation Mono','Courier New',monospace;

  /* Geometry */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  12px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.1), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.08);

  /* Header height — used for sticky offset */
  --hdr-h: 48px;
}

/* ── RESET ───────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { font-size:15px; -webkit-text-size-adjust:100% }
body {
  font-family:var(--font);
  background:var(--c-bg);
  color:var(--c-text);
  line-height:1.55;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--c-blue); text-decoration:none }
a:hover { text-decoration:underline }
button { cursor:pointer; font-family:var(--font); border:none }
img { max-width:100%; display:block }

/* ── HEADER ──────────────────────────────────────────────── */
#site-header {
  position:sticky;
  top:0;
  z-index:200;
  height:var(--hdr-h);
  background:var(--c-navy);
  border-bottom:1px solid rgba(255,255,255,.07);
  box-shadow:0 1px 0 rgba(0,0,0,.3), var(--shadow-sm);
}
.hdr {
  height:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:10px;
}

/* Hamburger — visible only on mobile */
.hdr-menu {
  display:none;
  background:none;
  color:rgba(255,255,255,.8);
  font-size:20px;
  padding:4px 6px;
  flex-shrink:0;
  border-radius:var(--r-sm);
  line-height:1;
  transition:background .15s;
}
.hdr-menu:hover { background:rgba(255,255,255,.1) }

/* Logo */
.hdr-logo {
  font-family:var(--mono);
  font-size:15px;
  font-weight:700;
  color:#fff;
  letter-spacing:-.2px;
  white-space:nowrap;
  flex-shrink:0;
  text-decoration:none;
}
.hdr-logo em { color:#ef4444; font-style:normal }

/* Search */
.hdr-search {
  flex:1;
  position:relative;
  min-width:0;
  max-width:540px;
}
.hdr-search svg {
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  color:rgba(255,255,255,.35);
  flex-shrink:0;
}
#search-box {
  width:100%;
  height:32px;
  padding:0 32px 0 32px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.12);
  border-radius:6px;
  color:#fff;
  font-size:13px;
  font-family:var(--font);
  transition:background .2s, border-color .2s;
}
#search-box::placeholder { color:rgba(255,255,255,.38) }
#search-box:focus {
  outline:none;
  background:rgba(255,255,255,.15);
  border-color:rgba(99,160,220,.7);
}
.search-clear-btn {
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  background:none;
  color:rgba(255,255,255,.45);
  font-size:14px;
  padding:2px 4px;
  display:none;
  line-height:1;
  border-radius:3px;
}
.search-clear-btn.visible { display:block }
.search-clear-btn:hover { color:#fff }

/* Tagline — hide below 640px */
.hdr-tag {
  font-size:11px;
  color:rgba(255,255,255,.3);
  font-family:var(--mono);
  white-space:nowrap;
  flex-shrink:0;
  letter-spacing:.02em;
}

/* ── MOBILE NAV DRAWER ───────────────────────────────────── */
#nav-overlay {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:400;
  backdrop-filter:blur(2px);
}
#nav-overlay.open { display:block }

#nav-drawer {
  position:absolute;
  top:0; left:0; bottom:0;
  width:272px;
  background:#fff;
  overflow-y:auto;
  transform:translateX(-100%);
  transition:transform .22s cubic-bezier(.4,0,.2,1);
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow-lg);
}
#nav-overlay.open #nav-drawer { transform:translateX(0) }

#nav-drawer::-webkit-scrollbar { width:3px }
#nav-drawer::-webkit-scrollbar-thumb { background:var(--c-border2); border-radius:3px }

.drawer-hdr {
  background:var(--c-navy);
  padding:0 14px;
  height:var(--hdr-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-shrink:0;
}
.drawer-logo { font-family:var(--mono); font-size:14px; font-weight:700; color:#fff }
.drawer-logo em { color:#ef4444; font-style:normal }
.drawer-close {
  background:none;
  color:rgba(255,255,255,.7);
  font-size:20px;
  padding:4px;
  line-height:1;
  border-radius:var(--r-sm);
}
.drawer-close:hover { color:#fff; background:rgba(255,255,255,.1) }

.drawer-body { flex:1; overflow-y:auto; }

.drawer-footer {
  border-top:1px solid var(--c-border);
  padding:10px 14px 14px;
  display:flex;
  flex-wrap:wrap;
  gap:4px 14px;
}
.drawer-footer a {
  font-size:11.5px;
  color:var(--c-muted);
  display:block;
  padding:2px 0;
}
.drawer-footer a:hover { color:var(--c-blue) }

/* ── LAYOUT ──────────────────────────────────────────────── */
.layout {
  flex:1;
  max-width:1280px;
  margin:0 auto;
  width:100%;
  padding:14px 14px 20px;
  display:grid;
  grid-template-columns:220px 1fr;
  gap:14px;
  align-items:start;
}

/* ── SIDEBAR ─────────────────────────────────────────────── */
#sidebar {
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  position:sticky;
  top:calc(var(--hdr-h) + 10px);
  max-height:calc(100vh - var(--hdr-h) - 20px);
  overflow-y:auto;
  font-size:13px;
}
#sidebar::-webkit-scrollbar { width:3px }
#sidebar::-webkit-scrollbar-thumb { background:var(--c-border2); border-radius:3px }

/* Shared sidebar styles (used in both desktop + drawer) */
.sb-home {
  display:flex;
  align-items:center;
  gap:6px;
  padding:9px 12px;
  font-size:12.5px;
  font-weight:600;
  color:var(--c-text2);
  border-bottom:1px solid var(--c-border);
  transition:background .12s;
}
.sb-home:hover { background:var(--c-surface2); text-decoration:none; color:var(--c-text) }

.sb-cat { border-bottom:1px solid var(--c-border) }
.sb-cat:last-of-type { border-bottom:none }

.sb-cat-btn {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:7px 12px;
  background:var(--c-surface2);
  border:none;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--c-muted);
  cursor:pointer;
  text-align:left;
  transition:background .12s;
}
.sb-cat-btn:hover { background:#eef0f5 }
.sb-cat-btn .sb-arrow { font-size:9px; opacity:.5; transition:transform .2s; flex-shrink:0 }
.sb-cat.open .sb-arrow { transform:rotate(90deg) }

.sb-links { display:none }
.sb-cat.open .sb-links { display:block }

.sb-links a {
  display:block;
  padding:5px 12px 5px 16px;
  font-size:12.5px;
  color:var(--c-text2);
  border-left:2px solid transparent;
  line-height:1.35;
  transition:all .1s;
}
.sb-links a:hover { background:var(--c-blue-lt); color:var(--c-blue); border-left-color:var(--c-blue-brd); text-decoration:none }
.sb-links a.active { background:var(--c-blue-lt); color:var(--c-blue); border-left-color:var(--c-blue); font-weight:600 }

/* ── MAIN ────────────────────────────────────────────────── */
#main-content { min-width:0 }

/* ── HOME ────────────────────────────────────────────────── */
/* Hero — compact, informative, not decorative */
.hero {
  background:var(--c-navy);
  border-radius:var(--r-md);
  padding:16px 18px;
  margin-bottom:12px;
  position:relative;
  overflow:hidden;
}
.hero::after {
  content:'';
  position:absolute;
  right:-20px; top:-20px;
  width:100px; height:100px;
  border-radius:50%;
  background:rgba(239,68,68,.07);
}
.hero-top {
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-bottom:4px;
}
.hero-title {
  font-family:var(--mono);
  font-size:17px;
  font-weight:700;
  color:#fff;
  letter-spacing:-.2px;
}
.hero-title em { color:#ef4444; font-style:normal }
.hero-badge {
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.4);
  border:1px solid rgba(255,255,255,.12);
  padding:1px 7px;
  border-radius:20px;
  white-space:nowrap;
}
.hero-sub {
  font-size:12.5px;
  color:rgba(255,255,255,.5);
  margin-bottom:12px;
}
.hero-stats {
  display:flex;
  gap:16px;
  margin-bottom:10px;
}
.hero-stat { }
.hero-stat strong { display:block; font-size:17px; font-family:var(--mono); color:#34d399; line-height:1.1 }
.hero-stat span { font-size:10.5px; color:rgba(255,255,255,.4) }
.hero-warn {
  font-size:11px;
  color:rgba(255,255,255,.32);
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.06);
  line-height:1.4;
}

/* Recent bar */
.recent-bar {
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-md);
  padding:8px 12px;
  margin-bottom:10px;
  display:none;
}
.recent-bar.show { display:block }
.recent-lbl {
  font-size:10px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--c-muted);
  margin-bottom:6px;
}
.recent-pills { display:flex; flex-wrap:wrap; gap:4px }
.recent-pill {
  font-size:12px;
  padding:3px 9px;
  background:var(--c-surface2);
  border:1px solid var(--c-border);
  border-radius:20px;
  color:var(--c-text2);
  cursor:pointer;
  transition:all .12s;
}
.recent-pill:hover { background:var(--c-blue-lt); border-color:var(--c-blue-brd); color:var(--c-blue) }

/* Category grid */
.cat-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px,1fr));
  gap:8px;
}
.cat-card {
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-md);
  padding:12px 13px;
  cursor:pointer;
  transition:box-shadow .15s, border-color .15s, transform .1s;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.cat-card:hover { box-shadow:var(--shadow-md); border-color:var(--c-border2); transform:translateY(-1px) }
.cat-card:active { transform:none }

.cat-head { display:flex; align-items:center; gap:9px }
.cat-ico {
  width:32px; height:32px;
  border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  flex-shrink:0;
}
.cat-head h3 { font-size:13px; font-weight:700; line-height:1.25; color:var(--c-text) }
.cat-head p { font-size:11px; color:var(--c-muted); margin-top:1px }

.topic-pills { display:flex; flex-wrap:wrap; gap:3px }
.pill {
  font-size:11px;
  padding:2px 7px;
  background:var(--c-surface2);
  border:1px solid var(--c-border);
  border-radius:20px;
  color:var(--c-muted);
  cursor:pointer;
  transition:all .1s;
  white-space:nowrap;
}
.pill:hover { background:var(--c-blue-lt); border-color:var(--c-blue-brd); color:var(--c-blue) }

/* ── TOPIC PAGE ──────────────────────────────────────────── */
.back-btn {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 10px;
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-sm);
  font-size:12.5px;
  color:var(--c-text2);
  cursor:pointer;
  margin-bottom:8px;
  font-weight:500;
  transition:all .12s;
}
.back-btn:hover { background:var(--c-surface2); border-color:var(--c-border2); text-decoration:none }

.topic-wrap {
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

/* Breadcrumb */
.breadcrumb {
  padding:8px 16px;
  font-size:11.5px;
  color:var(--c-muted);
  border-bottom:1px solid var(--c-border);
  background:var(--c-surface2);
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:3px;
}
.breadcrumb a { color:var(--c-blue) }
.breadcrumb a:hover { color:var(--c-navy) }
.breadcrumb .sep { color:var(--c-faint) }

/* Topic header */
.topic-hdr {
  padding:14px 16px 12px;
  border-bottom:1px solid var(--c-border);
}
.topic-hdr h1 {
  font-size:20px;
  font-weight:800;
  color:var(--c-text);
  line-height:1.2;
  letter-spacing:-.3px;
  margin-bottom:6px;
}
.topic-tags { display:flex; flex-wrap:wrap; gap:4px }
.t-tag {
  font-size:10.5px;
  padding:2px 7px;
  background:var(--c-surface2);
  border:1px solid var(--c-border);
  border-radius:20px;
  color:var(--c-muted);
  font-family:var(--mono);
}

/* ── IMMEDIATE ACTIONS STRIP ─────────────────────────────── */
.imm-strip {
  background:var(--c-red);
  padding:12px 16px;
  border-bottom:1px solid rgba(0,0,0,.12);
}
.imm-label {
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.7);
  margin-bottom:7px;
  display:flex;
  align-items:center;
  gap:5px;
}
.imm-strip ol {
  padding-left:16px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.imm-strip li {
  font-size:13px;
  line-height:1.4;
  color:#fff;
  font-weight:500;
}

/* Topic body */
.topic-body { padding:12px 16px }

/* ── SECTIONS ────────────────────────────────────────────── */
.sec {
  border:1px solid var(--c-border);
  border-radius:var(--r-sm);
  margin-bottom:8px;
  overflow:hidden;
}

.sec-hdr {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:7px 12px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  user-select:none;
  gap:6px;
}
.sec-hdr-left { display:flex; align-items:center; gap:6px }
.sec-caret { font-size:9px; opacity:.55; transition:transform .18s; flex-shrink:0 }
.sec.collapsed .sec-caret { transform:rotate(-90deg) }
.sec.collapsed .sec-body { display:none }

.sec-body {
  padding:10px 13px;
  font-size:13.5px;
  line-height:1.6;
}
.sec-body ul { padding-left:16px }
.sec-body ul li { margin-bottom:4px }
.sec-body ol { padding-left:16px }
.sec-body ol li { margin-bottom:4px }

/* sub-heading inside body */
.sec-sub {
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--c-text2);
  margin:9px 0 5px;
}

/* Section colour themes */
.sec-imm  { border-color:var(--sh-imm-brd) }
.sec-imm  .sec-hdr { background:var(--sh-imm-bg); color:var(--sh-imm-fg); border-bottom:1px solid var(--sh-imm-brd) }

.sec-q    { border-color:var(--sh-q-brd) }
.sec-q    .sec-hdr { background:var(--sh-q-bg);   color:var(--sh-q-fg);   border-bottom:1px solid var(--sh-q-brd) }

.sec-inv  { border-color:var(--sh-inv-brd) }
.sec-inv  .sec-hdr { background:var(--sh-inv-bg);  color:var(--sh-inv-fg);  border-bottom:1px solid var(--sh-inv-brd) }

.sec-mgmt { border-color:var(--sh-mgmt-brd) }
.sec-mgmt .sec-hdr { background:var(--sh-mgmt-bg); color:var(--sh-mgmt-fg); border-bottom:1px solid var(--sh-mgmt-brd) }

.sec-rx   { border-color:var(--sh-rx-brd) }
.sec-rx   .sec-hdr { background:var(--sh-rx-bg);   color:var(--sh-rx-fg);   border-bottom:1px solid var(--sh-rx-brd) }

.sec-rf   { border-color:var(--c-red-brd) }
.sec-rf   .sec-hdr { background:var(--c-red);       color:#fff }
.sec-rf   .sec-body { background:var(--c-red-lt) }

.sec-chk  { border-color:#c4b5fd }
.sec-chk  .sec-hdr { background:#1e1b4b; color:#fff }

/* Escalation — standalone box not a section */
.esc-box {
  background:var(--c-purple-lt);
  border:1.5px solid var(--c-purple-brd);
  border-radius:var(--r-sm);
  padding:10px 13px;
  margin-bottom:8px;
}
.esc-label {
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--c-purple);
  margin-bottom:6px;
  display:flex;
  align-items:center;
  gap:5px;
}
.esc-box ul { padding-left:15px }
.esc-box li { font-size:13px; color:var(--c-text2); margin-bottom:4px; line-height:1.45 }

/* ── CHECKLIST ───────────────────────────────────────────── */
.chk-list { list-style:none; padding:0 }
.chk-item {
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:5px 8px;
  border-radius:var(--r-sm);
  cursor:pointer;
  transition:background .1s;
  line-height:1.4;
  font-size:13px;
}
.chk-item:hover { background:var(--c-surface2) }
.chk-box {
  width:17px; height:17px;
  border:2px solid var(--c-border2);
  border-radius:3px;
  flex-shrink:0;
  margin-top:1px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  color:transparent;
  transition:all .15s;
  background:#fff;
}
.chk-item.done .chk-box { background:var(--c-green); border-color:var(--c-green); color:#fff }
.chk-item.done .chk-text { color:var(--c-muted); text-decoration:line-through }

.chk-footer {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid var(--c-border);
}
.chk-bar-wrap { flex:1; height:3px; background:var(--c-border); border-radius:3px; overflow:hidden }
.chk-bar      { height:100%; background:var(--c-green); border-radius:3px; transition:width .25s }
.chk-count    { font-size:11.5px; color:var(--c-muted); white-space:nowrap }
.chk-reset    {
  font-size:11.5px;
  color:var(--c-muted);
  background:none;
  border:1px solid var(--c-border);
  border-radius:var(--r-sm);
  padding:2px 8px;
  transition:all .12s;
}
.chk-reset:hover { color:var(--c-text2); border-color:var(--c-border2) }

/* ── RELATED ─────────────────────────────────────────────── */
.related {
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--c-border);
}
.related-lbl {
  font-size:10px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--c-muted);
  margin-bottom:7px;
}
.related-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:5px }
.related-item {
  padding:7px 10px;
  background:var(--c-surface2);
  border:1px solid var(--c-border);
  border-radius:var(--r-sm);
  font-size:12.5px;
  font-weight:500;
  color:var(--c-text2);
  cursor:pointer;
  transition:all .12s;
}
.related-item:hover { background:var(--c-blue-lt); border-color:var(--c-blue-brd); color:var(--c-blue) }

/* ── CATEGORY VIEW ───────────────────────────────────────── */
.topic-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:7px }
.tl-item {
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-md);
  padding:11px 13px;
  cursor:pointer;
  transition:all .12s;
}
.tl-item:hover { box-shadow:var(--shadow-sm); border-color:var(--c-border2); transform:translateY(-1px) }
.tl-item h3 { font-size:13px; font-weight:700; color:var(--c-text); margin-bottom:3px }
.tl-item .tl-tags { font-size:11px; color:var(--c-muted) }
.tl-item .tl-flags { font-size:11px; color:var(--c-red); font-weight:600; margin-top:2px }

/* ── SEARCH RESULTS ──────────────────────────────────────── */
.search-wrap {
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.search-meta {
  padding:10px 14px;
  font-size:12px;
  color:var(--c-muted);
  border-bottom:1px solid var(--c-border);
  background:var(--c-surface2);
}
.sr-item {
  padding:9px 14px;
  border-bottom:1px solid var(--c-border);
  cursor:pointer;
  transition:background .1s;
}
.sr-item:last-child { border-bottom:none }
.sr-item:hover { background:var(--c-surface2) }
.sr-item h4 { font-size:13.5px; font-weight:600; color:var(--c-blue); margin-bottom:2px }
.sr-item p  { font-size:11.5px; color:var(--c-muted) }
.sr-badge {
  display:inline-block;
  font-size:10px;
  background:var(--c-surface2);
  border:1px solid var(--c-border);
  border-radius:20px;
  padding:1px 6px;
  color:var(--c-muted);
  margin-left:5px;
  font-weight:500;
}

/* ── ALERT BOXES ─────────────────────────────────────────── */
.alert {
  display:flex;
  gap:9px;
  padding:10px 12px;
  border-radius:var(--r-sm);
  font-size:13px;
  line-height:1.5;
  margin:6px 0;
}
.alert-icon { flex-shrink:0; font-size:14px; margin-top:1px }
.a-red    { background:var(--c-red-lt);    border-left:3px solid var(--c-red);    color:var(--c-red-dk) }
.a-amber  { background:var(--c-amber-lt);  border-left:3px solid var(--c-amber);  color:var(--c-amber) }
.a-green  { background:var(--c-green-lt);  border-left:3px solid var(--c-green);  color:var(--c-green) }
.a-blue   { background:var(--c-blue-lt);   border-left:3px solid var(--c-blue);   color:var(--c-blue) }

/* ── STATIC PAGES ────────────────────────────────────────── */
.static-wrap {
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.static-hdr {
  padding:14px 18px 12px;
  background:var(--c-surface2);
  border-bottom:1px solid var(--c-border);
}
.static-hdr h1 { font-size:20px; font-weight:800; color:var(--c-text) }
.static-hdr p  { font-size:12.5px; color:var(--c-muted); margin-top:3px }
.static-body {
  padding:18px 20px;
  max-width:680px;
}
.static-body h2 {
  font-size:14px; font-weight:700;
  color:var(--c-text);
  margin:18px 0 7px;
  padding-bottom:5px;
  border-bottom:1px solid var(--c-border);
}
.static-body h2:first-child { margin-top:0 }
.static-body p  { font-size:13.5px; color:var(--c-text2); margin-bottom:9px; line-height:1.65 }
.static-body ul { padding-left:18px; margin-bottom:10px }
.static-body li { font-size:13.5px; color:var(--c-text2); margin-bottom:5px; line-height:1.6 }
.static-body a  { color:var(--c-blue) }
.static-body .date-note { font-size:11.5px; color:var(--c-muted); font-style:italic; margin-bottom:14px }

/* Contact form */
.contact-form { max-width:520px }
.f-group { margin-bottom:13px }
.f-label { display:block; font-size:12px; font-weight:700; color:var(--c-text2); margin-bottom:4px }
.f-input,.f-select,.f-area {
  width:100%;
  padding:8px 11px;
  border:1px solid var(--c-border);
  border-radius:var(--r-sm);
  font-family:var(--font);
  font-size:13.5px;
  color:var(--c-text);
  background:#fff;
  transition:border-color .15s;
}
.f-input:focus,.f-select:focus,.f-area:focus {
  outline:none;
  border-color:var(--c-blue);
  box-shadow:0 0 0 3px rgba(29,111,168,.1);
}
.f-area { min-height:110px; resize:vertical; line-height:1.5 }
.f-note { font-size:11.5px; color:var(--c-muted); margin-top:4px }
.f-req  { color:var(--c-red) }
.f-submit {
  padding:9px 22px;
  background:var(--c-blue);
  color:#fff;
  border:none;
  border-radius:var(--r-sm);
  font-size:13.5px;
  font-weight:700;
  transition:background .15s;
}
.f-submit:hover { background:#155e8f }
.f-submit:disabled { opacity:.55; cursor:not-allowed }
.f-ok  { background:var(--c-green-lt); border:1px solid var(--c-green-brd); color:var(--c-green); padding:12px 14px; border-radius:var(--r-sm); font-size:13.5px; display:none }
.f-ok.show  { display:block }
.f-err { background:var(--c-red-lt);   border:1px solid var(--c-red-brd);   color:var(--c-red);   padding:12px 14px; border-radius:var(--r-sm); font-size:13.5px; display:none }
.f-err.show { display:block }
.cookie-status { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:20px; font-size:12px; font-weight:600 }
.cs-accepted { background:var(--c-green-lt); color:var(--c-green) }
.cs-rejected { background:var(--c-red-lt);   color:var(--c-red-dk) }
.cs-dot { width:6px; height:6px; border-radius:50%; background:currentColor }

/* ── FOOTER ──────────────────────────────────────────────── */
#site-footer {
  background:var(--c-navy2);
  margin-top:auto;
  padding:14px 16px;
  border-top:1px solid rgba(255,255,255,.05);
}
.footer-inner {
  max-width:1280px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.footer-left { display:flex; flex-direction:column; gap:3px }
.footer-logo { font-family:var(--mono); font-size:13px; font-weight:700; color:rgba(255,255,255,.6) }
.footer-logo em { color:#ef4444; font-style:normal }
.footer-disc { font-size:10.5px; color:rgba(255,255,255,.28); max-width:380px; line-height:1.45 }
.footer-right { display:flex; align-items:center; gap:1px }
.footer-right a {
  font-size:11.5px;
  color:rgba(255,255,255,.42);
  padding:3px 9px;
  border-radius:var(--r-sm);
  transition:color .12s;
}
.footer-right a:hover { color:rgba(255,255,255,.85); text-decoration:none }
.footer-sep { color:rgba(255,255,255,.15); font-size:11px }
.footer-cr { width:100%; font-size:10.5px; color:rgba(255,255,255,.2); padding-top:8px; border-top:1px solid rgba(255,255,255,.05); text-align:center }

/* ── COOKIE BANNER ───────────────────────────────────────── */
#cookie-banner {
  position:fixed;
  bottom:0; left:0; right:0;
  background:var(--c-navy);
  border-top:1px solid rgba(255,255,255,.08);
  box-shadow:0 -2px 16px rgba(0,0,0,.35);
  z-index:500;
  transform:translateY(102%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
#cookie-banner.show { transform:translateY(0) }
.ck-inner {
  max-width:1280px;
  margin:0 auto;
  padding:10px 14px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.ck-text {
  flex:1;
  min-width:180px;
  font-size:12px;
  color:rgba(255,255,255,.7);
  line-height:1.5;
}
.ck-text strong { color:#fff }
.ck-text a { color:#67e8f9 }
.ck-btns { display:flex; gap:7px; flex-shrink:0 }
.ck-accept {
  padding:6px 14px;
  background:var(--c-green);
  color:#fff;
  border:none;
  border-radius:var(--r-sm);
  font-size:12.5px;
  font-weight:700;
  transition:background .15s;
}
.ck-accept:hover { background:#166534 }
.ck-reject {
  padding:6px 14px;
  background:transparent;
  color:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-sm);
  font-size:12.5px;
  transition:all .15s;
}
.ck-reject:hover { color:#fff; border-color:rgba(255,255,255,.45) }

/* ── UTILITY ─────────────────────────────────────────────── */
.hidden { display:none!important }
.mt-6  { margin-top:6px }
.mt-10 { margin-top:10px }
.mb-6  { margin-bottom:6px }
.mb-10 { margin-bottom:10px }

/* Accent / icon colour helpers — used by JS */
.accent-red    { background:var(--c-red-lt) }
.accent-orange { background:var(--c-orange-lt) }
.accent-blue   { background:var(--c-blue-lt) }
.accent-green  { background:var(--c-green-lt) }
.accent-purple { background:var(--c-purple-lt) }
.accent-yellow { background:var(--c-amber-lt) }
.accent-teal   { background:var(--c-teal-lt) }
.accent-pink   { background:#fdf2f8 }
.accent-dark   { background:#f1f2f6 }
.accent-indigo { background:#eef2ff }

.icon-red    { background:#dc2626; color:#fff }
.icon-orange { background:#ea580c; color:#fff }
.icon-blue   { background:#1d6fa8; color:#fff }
.icon-green  { background:#16a34a; color:#fff }
.icon-purple { background:#7c3aed; color:#fff }
.icon-yellow { background:#d97706; color:#fff }
.icon-teal   { background:#0f766e; color:#fff }
.icon-pink   { background:#db2777; color:#fff }
.icon-dark   { background:#334155; color:#fff }
.icon-indigo { background:#4f46e5; color:#fff }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width:800px) {
  .layout { grid-template-columns:1fr; padding:8px 8px 16px }
  #sidebar { display:none }
  .hdr-menu { display:flex }
  .hdr-tag  { display:none }
  .cat-grid { grid-template-columns:1fr 1fr }
  .topic-list { grid-template-columns:1fr 1fr }
}
@media (max-width:520px) {
  .cat-grid  { grid-template-columns:1fr }
  .topic-list { grid-template-columns:1fr }
  .hero { padding:13px 14px }
  .hero-title { font-size:15px }
  .topic-hdr h1 { font-size:18px }
  .topic-body { padding:10px 12px }
  .imm-strip { padding:10px 12px }
  .static-body { padding:12px 14px }
  .static-hdr { padding:12px 14px 10px }
  .related-grid { grid-template-columns:1fr 1fr }
  .footer-right { flex-wrap:wrap; gap:0 }
}
@media (max-width:360px) {
  .hdr { padding:0 8px; gap:7px }
  .hdr-logo { font-size:13px }
}