@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500;1,9..144,600&display=swap');

:root{
  --bg: #FAF7F4;
  --surface: #FFFFFF;
  --surface-2: #F4F0FB;
  --ink: #2A2830;
  --ink-soft: #736F7C;
  /* --ink-faint, and every "-deep" accent below, were darkened from their
     original values to clear WCAG AA's 4.5:1 text-contrast threshold —
     the originals ranged 2.3:1-4.3:1 against the tints/backgrounds they're
     actually used on (tag pills, tab labels, footer text). Verified via
     the WCAG relative-luminance formula against every background each
     token is used on. Sep 2026 accessibility pass. */
  --ink-faint: #726B82;
  --line: #ECE6F4;

  --violet: #8B7FE8;
  --violet-deep: #5F52CE;
  --violet-tint: #EDEAFB;

  --coral: #F0968E;
  --coral-deep: #C13729;
  --coral-tint: #FCEBE9;

  --sage: #7DBBA1;
  --sage-deep: #3E775E;
  --sage-tint: #E7F5EE;

  --sand: #E8B25E;
  --sand-deep: #896428;
  --sand-tint: #FBF0DE;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(50,36,80,0.05);
  --shadow: 0 6px 20px rgba(60,40,95,0.07), 0 1px 3px rgba(60,40,95,0.05);
  --shadow-lg: 0 16px 40px rgba(60,40,95,0.12);

  --font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
h1,h2,h3{ font-family:var(--font); }

::selection{ background:var(--violet-tint); color:var(--violet-deep); }

/* ---------- Accessibility helpers ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:100;
  background:var(--ink); color:#fff; padding:10px 18px;
  border-radius:var(--radius-sm); font-size:14px; font-weight:600;
  transition:top .15s ease;
}
.skip-link:focus{ top:12px; }
#app:focus{ outline:none; }

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  background:var(--bg);
  padding-top:2px;
}
.topbar-inner{
  max-width:720px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px 10px;
}
.brand{ display:flex; align-items:baseline; gap:8px; }
.brand-mark{
  display:block; border-radius:50%; object-fit:cover;
}
.brand-text{ font-weight:700; font-size:15.5px; letter-spacing:-0.01em; color:var(--ink); }

.topbar-actions{ display:flex; align-items:center; gap:6px; }
.crisis-quicklink{
  font-size:11.5px; font-weight:700; color:var(--coral-deep);
  background:var(--coral-tint); border-radius:var(--radius-pill);
  padding:7px 11px; white-space:nowrap;
}
.quick-exit-btn{
  font-family:var(--font); font-size:11.5px; font-weight:700; color:var(--ink-soft);
  background:var(--surface-2); border:none; border-radius:var(--radius-pill);
  padding:7px 12px; cursor:pointer; white-space:nowrap;
}
.quick-exit-btn:hover, .quick-exit-btn:focus{ color:var(--ink); background:var(--line); }
.simple-mode-btn{
  font-family:var(--font); font-size:11.5px; font-weight:700; color:var(--ink-soft);
  background:var(--surface-2); border:none; border-radius:var(--radius-pill);
  padding:7px 12px; cursor:pointer; white-space:nowrap;
}
.simple-mode-btn:hover, .simple-mode-btn:focus{ color:var(--ink); background:var(--line); }
.simple-mode-btn[aria-pressed="true"]{ background:var(--violet); color:#fff; }
.search-toggle{ display:none; }

.search-bar{
  max-width:720px; margin:0 auto;
  padding:6px 20px 16px;
}
.search-field{
  display:flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-pill); padding:12px 18px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .15s ease, border-color .15s ease;
}
.search-field:focus-within{
  border-color:var(--violet); box-shadow:0 0 0 4px var(--violet-tint);
}
.search-field svg{ flex-shrink:0; color:var(--ink-faint); }
.search-field input{
  width:100%; border:0; outline:0; background:transparent;
  font-family:var(--font); font-size:15.5px; color:var(--ink);
}
.search-field input::placeholder{ color:var(--ink-faint); }
.search-field-inline{ margin-bottom:18px; }

/* ---------- App shell ---------- */
.app{ max-width:720px; margin:0 auto; padding:8px 20px 90px; min-height:70vh; }

/* ---------- Bottom tab bar ---------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; justify-content:center;
  background:var(--surface);
  box-shadow:0 -2px 16px rgba(60,40,95,0.08);
  padding-bottom:env(safe-area-inset-bottom, 0);
}
.tab-item{
  flex:1; max-width:150px; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 4px 7px; color:var(--ink-faint);
  transition:color .12s ease;
}
.tab-item span{ font-size:11px; font-weight:600; }
.tab-item.active{ color:var(--violet-deep); }

/* ---------- Expandable banners (crisis / urgent) ---------- */
.crisis-banner, .urgent-banner{
  display:block; background:var(--surface); border-radius:var(--radius-lg);
  padding:14px 18px; margin:12px 0 0; box-shadow:var(--shadow);
}
.crisis-banner{ border-left:4px solid var(--coral-deep); }
.urgent-banner{ border-left:4px solid var(--sage-deep); }

.crisis-banner-head, .urgent-banner-head{
  display:flex; align-items:flex-start; gap:10px;
  list-style:none; cursor:pointer; margin:0; padding:2px 0;
}
.crisis-banner-head::-webkit-details-marker, .urgent-banner-head::-webkit-details-marker{ display:none; }
.banner-head-text{ flex:1; min-width:0; }
.crisis-banner .crisis-icon{ flex-shrink:0; color:var(--coral-deep); margin-top:1px; }
.urgent-banner .urgent-icon{ flex-shrink:0; color:var(--sage-deep); margin-top:1px; }
.crisis-banner h2, .urgent-banner h2{ font-family:var(--font-display); font-weight:600; margin:0 0 2px; color:var(--ink); }
.crisis-banner h2{ font-size:16px; }
.urgent-banner h2{ font-size:15px; }
.crisis-banner p, .urgent-banner p{ font-size:12.5px; color:var(--ink-soft); margin:0; line-height:1.5; }
.banner-chevron{
  flex-shrink:0; color:var(--ink-faint); margin-top:2px;
  transition:transform .15s ease;
}
.crisis-banner[open] .banner-chevron, .urgent-banner[open] .banner-chevron{ transform:rotate(180deg); }

.crisis-banner-body, .urgent-banner-body{ padding-top:14px; }
.crisis-contacts{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.crisis-contact{
  display:flex; flex-direction:column; gap:1px;
  background:var(--surface-2); border-radius:var(--radius-sm);
  padding:8px 12px; min-width:100px;
}
.crisis-contact .cc-name{ font-size:11.5px; font-weight:600; color:var(--ink-soft); }
.crisis-contact .cc-value{ font-size:13.5px; font-weight:700; color:var(--coral-deep); }
.crisis-more{ font-size:12.5px; font-weight:600; color:var(--violet-deep); display:inline-block; }
.urgent-banner-body p{ margin-bottom:8px; }
.urgent-more{ font-size:12.5px; font-weight:600; color:var(--sage-deep); display:inline-block; }

/* ---------- Out-of-hours page ---------- */
.ooh-list{ display:flex; flex-direction:column; gap:8px; margin:12px 0 18px; }
.ooh-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--surface); border-radius:var(--radius); padding:12px 16px; box-shadow:var(--shadow);
}
.ooh-name{ font-weight:600; font-size:14.5px; color:var(--ink); }
.ooh-counties{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.ooh-phone{ font-weight:700; white-space:nowrap; }
.ooh-source{ font-size:13px; margin:0 0 20px; }
.ooh-map{ height:320px; border-radius:var(--radius-lg); overflow:hidden; margin:12px 0 8px; box-shadow:var(--shadow); }

/* ---------- Home ---------- */
.hero{ margin:20px 0 26px; }
.hero-eyebrow{
  font-size:13px; color:var(--violet-deep); font-weight:700; margin:0 0 8px;
  text-transform:uppercase; letter-spacing:0.04em;
}
.hero h1{
  font-family:var(--font-display); font-weight:600; font-size:33px; line-height:1.15;
  margin:0 0 12px; letter-spacing:-0.01em; color:var(--ink);
}
.hero h1 em{ font-style:italic; color:var(--violet-deep); }
.hero p{ font-size:15.5px; color:var(--ink-soft); line-height:1.55; margin:0; max-width:52ch; }

.index-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:22px 0;
}
.index-tile{
  display:block; position:relative; overflow:hidden;
  border-radius:var(--radius-lg); padding:22px 18px 20px;
  min-height:140px;
  transition:transform .15s ease;
}
.index-tile:active{ transform:scale(0.98); }
.index-tile.tile-a{ background:linear-gradient(160deg, var(--violet-tint) 0%, var(--surface) 65%); }
.index-tile.tile-b{ background:linear-gradient(160deg, var(--sage-tint) 0%, var(--surface) 65%); }
.index-tile .tile-icon{ display:block; margin-bottom:16px; }
.index-tile.tile-a .tile-icon{ color:var(--violet-deep); }
.index-tile.tile-b .tile-icon{ color:var(--sage-deep); }
.index-tile h2{ font-family:var(--font-display); font-size:17.5px; font-weight:600; margin:0 0 5px; color:var(--ink); }
.index-tile p{ font-size:13px; color:var(--ink-soft); margin:0; line-height:1.4; }

.quick-links{ margin-top:32px; }
.quick-links h3{ font-size:13px; color:var(--ink-soft); font-weight:700; margin:0 0 12px; }
.quick-link-row{ display:flex; flex-wrap:wrap; gap:9px; }
.pill{
  font-size:13.5px; font-weight:500; padding:9px 16px;
  border-radius:var(--radius-pill); background:var(--surface); color:var(--ink);
  box-shadow:var(--shadow-sm); border:1px solid var(--line);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.pill:active{ background:var(--violet); color:#fff; border-color:var(--violet); }

/* ---------- Section list pages (specialty index / county index) ---------- */
.page-head{ margin:18px 0 18px; }
.back-link{
  font-size:13.5px; color:var(--violet-deep); font-weight:600;
  display:inline-flex; align-items:center; gap:4px; margin-bottom:16px;
}
.page-head h1{ font-family:var(--font-display); font-size:26px; font-weight:600; margin:0 0 6px; letter-spacing:-0.005em; }
.page-head .count{ font-size:13px; color:var(--ink-soft); }

.simple-list{ display:flex; flex-direction:column; gap:10px; }
.simple-list .row{
  display:flex; align-items:center; gap:14px;
  padding:15px 16px; background:var(--surface); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:transform .12s ease, box-shadow .12s ease;
}
.simple-list .row:active{ transform:scale(0.99); }
.simple-list .row .cat-icon{
  width:38px; height:38px; border-radius:11px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.simple-list .row .row-body{ flex:1; min-width:0; }
.simple-list .row h2{ font-size:15px; font-weight:600; margin:0; color:var(--ink); }
.simple-list .row .n{ font-size:12.5px; color:var(--ink-soft); display:block; margin-top:2px; }
.simple-list .row .arrow{ color:var(--ink-faint); font-size:18px; flex-shrink:0; }

/* ---------- Entry cards (search / list results) ---------- */
.entry-card{
  display:block; border-radius:var(--radius);
  background:var(--surface); padding:18px; margin-bottom:12px;
  box-shadow:var(--shadow-sm);
  transition:transform .12s ease, box-shadow .12s ease;
}
.entry-card:active{ transform:scale(0.99); }
.entry-card h3{ font-size:15.5px; font-weight:700; margin:0 0 6px; color:var(--ink); }
.entry-card .blurb{ font-size:14px; color:var(--ink-soft); line-height:1.5; margin:0 0 12px; }
.tag-row{ display:flex; flex-wrap:wrap; gap:6px; }
.tag{
  font-size:11.5px; font-weight:600;
  padding:4px 11px; border-radius:var(--radius-pill);
}
.tag-violet{ color:var(--violet-deep); background:var(--violet-tint); }
.tag-coral{ color:var(--coral-deep); background:var(--coral-tint); }
.tag-sage{ color:var(--sage-deep); background:var(--sage-tint); }
.tag-sand{ color:var(--sand-deep); background:var(--sand-tint); }

.empty-state{
  padding:48px 10px; text-align:center; color:var(--ink-soft); font-size:14.5px; line-height:1.6;
}

/* ---------- Detail page ---------- */
.detail-card{
  border-radius:var(--radius-lg); background:var(--surface);
  padding:24px 20px; margin-bottom:16px; box-shadow:var(--shadow);
}
.detail-card h1{ font-family:var(--font-display); font-size:23px; font-weight:600; margin:0 0 8px; line-height:1.25; letter-spacing:-0.005em; }
.detail-card .blurb{ font-size:15px; color:var(--ink-soft); margin:0 0 16px; line-height:1.55; }

.contact-block{
  background:var(--surface-2); border-radius:var(--radius);
  padding:15px 16px; margin:16px 0; font-size:14px;
}
.contact-block .line{ display:flex; gap:8px; padding:5px 0; }
.contact-block .k{ color:var(--ink-soft); min-width:64px; flex-shrink:0; font-weight:500; }
.contact-block a{ color:var(--violet-deep); font-weight:700; word-break:break-word; }

.detail-section-title{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
  color:var(--violet-deep); margin:20px 0 10px;
}
.detail-list{ margin:0; padding-left:20px; }
.detail-list li{ font-size:14.5px; line-height:1.6; margin-bottom:7px; color:var(--ink); }

.resource-list{ margin:0; padding-left:20px; list-style:none; margin-left:-20px; }
.resource-list li{ font-size:14.5px; line-height:1.6; margin-bottom:7px; }
.resource-list a{ color:var(--violet-deep); text-decoration:none; font-weight:600; }
.resource-list a:hover{ text-decoration:underline; }

/* ---------- Letter templates ---------- */
.template-card{
  background:var(--surface); border-radius:var(--radius-lg);
  padding:14px 18px; margin-bottom:12px; box-shadow:var(--shadow);
}
.template-head{
  display:flex; align-items:flex-start; gap:10px;
  list-style:none; cursor:pointer; margin:0; padding:2px 0;
}
.template-head::-webkit-details-marker{ display:none; }
.template-head h2{ font-family:var(--font-display); font-size:15.5px; font-weight:600; margin:0 0 2px; color:var(--ink); }
.template-head p{ font-size:13px; color:var(--ink-soft); margin:0; line-height:1.5; }
.template-body{ padding-top:14px; }
.template-meta{
  background:var(--surface-2); border-radius:var(--radius);
  padding:12px 14px; margin-bottom:12px; font-size:13px;
}
.template-meta .line{ display:flex; gap:8px; padding:4px 0; }
.template-meta .k{ color:var(--ink-soft); min-width:64px; flex-shrink:0; font-weight:500; }
.copy-btn{
  font-family:var(--font); font-size:13px; font-weight:700; color:var(--violet-deep);
  background:var(--violet-tint); border:none; border-radius:var(--radius-pill);
  padding:9px 16px; margin-bottom:10px; cursor:pointer;
}
.copy-btn:active{ transform:scale(0.98); }
.template-text{
  white-space:pre-wrap; word-break:break-word; font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12.5px; line-height:1.6; color:var(--ink);
  background:var(--surface-2); border-radius:var(--radius);
  padding:14px 16px; margin:0; max-height:420px; overflow-y:auto;
}

/* ---------- Entitlements & schemes ---------- */
.scheme-card{
  background:var(--surface); border-radius:var(--radius-lg);
  padding:16px 18px; margin-bottom:12px; box-shadow:var(--shadow);
}
.scheme-card h2{ font-family:var(--font-display); font-size:15.5px; font-weight:600; margin:0 0 4px; color:var(--ink); }
.scheme-card .remit{ font-size:13px; color:var(--ink-soft); margin:0 0 10px; line-height:1.5; }
.scheme-links{ display:flex; flex-direction:column; gap:6px; }
.scheme-links a{ font-size:13px; font-weight:600; color:var(--violet-deep); text-decoration:none; }
.scheme-links a:hover{ text-decoration:underline; }

.scheme-prep{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.scheme-prep summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:700; color:var(--sand-deep);
}
.scheme-prep summary::-webkit-details-marker{ display:none; }
.scheme-prep summary svg{ flex-shrink:0; }
.scheme-prep ul{ margin:10px 0 0; padding-left:20px; }
.scheme-prep li{ font-size:13px; line-height:1.6; margin-bottom:7px; color:var(--ink); }

/* ---------- Pre-appointment prep ---------- */
.prep-card{
  background:var(--surface); border-radius:var(--radius-lg);
  padding:18px 20px; margin-bottom:14px; box-shadow:var(--shadow);
}
.prep-card h2{ font-family:var(--font-display); font-size:16.5px; font-weight:600; margin:0 0 4px; color:var(--ink); }
.prep-card .remit{ font-size:13px; color:var(--ink-soft); margin:0 0 14px; line-height:1.5; }
.prep-label{ display:block; font-size:12.5px; font-weight:700; color:var(--violet-deep); margin:14px 0 6px; }
.prep-label:first-of-type{ margin-top:0; }
.prep-input{
  width:100%; font-family:var(--font); font-size:14.5px; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:11px 13px; resize:vertical;
}
.prep-input:focus{ outline:none; border-color:var(--violet); box-shadow:0 0 0 4px var(--violet-tint); }
.prep-card .copy-btn{ margin-top:14px; display:block; }
.prep-card .template-text{ margin-top:10px; }

/* ---------- Save-on-device toggle & destructive actions ----------
   Used on Patient Passport, the call/referral log, and the appointment-prep
   checklist — features that can hold personal data across visits, and only
   once this box is ticked. Kept visually distinct (danger-btn) from the
   ordinary copy-btn actions since clearing here is permanent and
   on-device only, nothing to undo from a server. */
.save-toggle{
  display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600;
  color:var(--ink); margin-bottom:14px; cursor:pointer;
}
.save-toggle input{ width:20px; height:20px; accent-color:var(--violet); cursor:pointer; }
.danger-btn{
  font-family:var(--font); font-size:13px; font-weight:700; color:var(--coral-deep);
  background:var(--coral-tint); border:none; border-radius:var(--radius-pill);
  padding:9px 16px; margin-top:14px; cursor:pointer; display:block;
}
.danger-btn[hidden]{ display:none; }
.save-note{ font-size:12px; color:var(--ink-soft); margin:8px 0 0; }
.save-note:empty{ display:none; }

/* ---------- Checkbox lists (e.g. SAR builder record-type picker) ---------- */
.check-list{ display:flex; flex-direction:column; gap:8px; margin:6px 0 0; }
.check-row{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--ink); cursor:pointer; }
.check-row input{ width:18px; height:18px; margin-top:1px; accent-color:var(--violet); cursor:pointer; flex-shrink:0; }

/* ---------- Print-only mode ----------
   Toggled via JS (printOnly() in app.js) right before window.print(), so
   "Print / save PDF" buttons on generated letters/checklists print just
   the letter, not the whole app shell. Cleared again on the browser's
   afterprint event. */
@media print {
  body.printing-letter .topbar,
  body.printing-letter .tabbar,
  body.printing-letter .footer,
  body.printing-letter .page-head,
  body.printing-letter .callout,
  body.printing-letter .prep-card:not(:has(.print-target)),
  body.printing-letter .prep-card > *:not(.print-target){ display:none !important; }
  body.printing-letter .prep-card:has(.print-target){
    background:transparent; box-shadow:none; padding:0; margin:0;
  }
  body.printing-letter .print-target{
    display:block !important; white-space:pre-wrap; font-family:var(--font);
    font-size:13px; line-height:1.5; color:#000; background:#fff;
    border:none; border-radius:0; padding:0; margin:0;
    max-height:none; overflow:visible;
  }
}

/* ---------- Call & referral log ---------- */
.log-list-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.log-list-head h2{ font-family:var(--font-display); font-size:16.5px; font-weight:600; margin:0; color:var(--ink); }
.log-list-head .copy-btn{ margin:0; flex-shrink:0; }
.log-list{ display:flex; flex-direction:column; gap:10px; }
.log-entry{
  background:var(--surface-2); border-radius:var(--radius);
  padding:13px 15px;
}
.log-entry-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.log-date{ font-size:12.5px; font-weight:700; color:var(--violet-deep); }
.log-service{ font-size:12.5px; color:var(--ink-soft); flex:1; }
.log-delete{
  font-family:var(--font); font-size:13px; color:var(--ink-faint);
  background:none; border:none; cursor:pointer; padding:2px 6px; margin-left:auto;
}
.log-delete:hover, .log-delete:focus{ color:var(--coral-deep); }
.log-line{ font-size:13.5px; line-height:1.5; margin:0 0 4px; color:var(--ink); }
.log-line:last-child{ margin-bottom:0; }
.log-line strong{ color:var(--ink-soft); font-weight:600; }

.referral-note{
  background:var(--sand-tint);
  padding:14px 16px; font-size:14px; color:#6B4F1B; margin-top:18px; border-radius:var(--radius);
  line-height:1.55;
}
.referral-note strong{ color:var(--sand-deep); }

.checked-note{ font-size:11.5px; color:var(--ink-faint); margin:16px 0 0; }

/* ---------- Advocacy / know your rights page ---------- */
.segmented{
  display:flex; gap:6px; margin:0 0 20px; overflow-x:auto;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px;
}
.segmented::-webkit-scrollbar{ display:none; }
.segment{
  flex-shrink:0; font-size:13px; font-weight:600; color:var(--ink-soft);
  background:var(--surface); padding:9px 15px; border-radius:var(--radius-pill);
  box-shadow:var(--shadow-sm); white-space:nowrap;
}
.segment.active{ background:var(--violet); color:#fff; box-shadow:none; }

.callout{
  background:var(--violet-tint); border-radius:var(--radius);
  padding:16px 18px; margin-bottom:24px; font-size:14px; color:var(--ink);
  line-height:1.6;
}
.callout strong{ color:var(--violet-deep); }
.callout-spaced{ margin-top:24px; }
.callout .source-note{ display:block; margin-top:8px; font-size:12.5px; color:var(--ink-soft); }
.callout .callout-pill-row{ margin:10px 0 0; }

.section-title{
  font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
  color:var(--ink-soft); margin:32px 0 14px;
}
.section-title:first-of-type{ margin-top:8px; }

.guide-list{ display:flex; flex-direction:column; gap:12px; }
.guide-module{
  background:var(--surface); border-radius:var(--radius-lg);
  padding:18px 20px; box-shadow:var(--shadow-sm);
}
.guide-module h2{ font-size:15.5px; font-weight:700; margin:0 0 10px; color:var(--ink); }
.guide-module ul{ margin:0; padding-left:18px; }
.guide-module li{ font-size:14px; line-height:1.6; color:var(--ink-soft); margin-bottom:7px; }
.guide-module li:last-child{ margin-bottom:0; }

.rights-ladder{ display:flex; flex-direction:column; gap:10px; }
.rights-card{
  display:flex; gap:14px; background:var(--surface); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow-sm);
}
.rights-card .step-badge{
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  background:var(--violet-tint); color:var(--violet-deep);
  font-size:12.5px; font-weight:700; display:flex; align-items:center; justify-content:center;
}
.rights-card .rights-body{ flex:1; min-width:0; }
.rights-card h2{ font-size:14.5px; font-weight:700; margin:0 0 3px; color:var(--ink); }
.rights-card .role{ font-size:13px; color:var(--violet-deep); font-weight:600; margin:0 0 6px; }
.rights-card .detail{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; margin:0 0 8px; }
.rights-card .contact-line{ font-size:13px; color:var(--ink-soft); display:flex; flex-wrap:wrap; gap:10px; }
.rights-card .contact-line a{ color:var(--violet-deep); font-weight:600; }

.hospital-grid{ display:flex; flex-direction:column; gap:10px; }
.hospital-card{
  background:var(--surface); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow-sm);
}
.hospital-card .hospital-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:6px; }
.hospital-card h2{ font-size:14.5px; font-weight:700; margin:0; color:var(--ink); }
.type-badge{
  flex-shrink:0; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em;
  padding:3px 9px; border-radius:var(--radius-pill); white-space:nowrap;
}
.type-badge.type-hse{ background:var(--violet-tint); color:var(--violet-deep); }
.type-badge.type-voluntary{ background:var(--sage-tint); color:var(--sage-deep); }
.type-badge.type-ni{ background:var(--sand-tint); color:var(--sand-deep); }

.region-heading{
  font-size:12.5px; font-weight:700; color:var(--ink-faint);
  text-transform:uppercase; letter-spacing:0.04em; margin:18px 0 8px;
}
.region-heading:first-child{ margin-top:0; }
.hospital-card .summary{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; margin:0 0 10px; }
.hospital-card .steps{ margin:0 0 10px; padding-left:18px; }
.hospital-card .steps li{ font-size:13px; line-height:1.55; color:var(--ink-soft); margin-bottom:5px; }
.hospital-card .hosp-note{ background:var(--sand-tint); color:#6B4F1B; font-size:12.5px; padding:9px 12px; border-radius:var(--radius-sm); margin:0 0 10px; line-height:1.5; }
.hospital-card .contact-line{ font-size:13px; color:var(--ink-soft); display:flex; flex-wrap:wrap; gap:10px; }
.hospital-card .contact-line a{ color:var(--violet-deep); font-weight:600; }

.group-grid{ display:flex; flex-direction:column; gap:10px; }
.group-card{
  background:var(--surface); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow-sm);
}
.group-card h2{ font-size:14.5px; font-weight:700; margin:0 0 10px; color:var(--ink); }
.group-card ul{ margin:0; padding-left:18px; }
.group-card li{ font-size:13px; line-height:1.65; color:var(--ink-soft); }

.org-grid{ display:flex; flex-direction:column; gap:10px; }
.org-card{
  display:block; background:var(--surface); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow-sm);
  transition:transform .12s ease;
}
.org-card:active{ transform:scale(0.99); }
.org-card h2{ font-size:14.5px; font-weight:700; margin:0 0 4px; color:var(--ink); }
.org-card .remit{ font-size:13.5px; color:var(--ink-soft); margin:0 0 4px; line-height:1.5; }
.org-card .offer{ font-size:13px; color:var(--ink-soft); margin:0 0 10px; line-height:1.5; font-style:italic; }
.org-card .org-footer{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.org-card .tag-row{ margin:0; }
.org-card .org-link{ font-size:13px; font-weight:600; color:var(--violet-deep); display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }

/* ---------- Advocacy page ---------- */
.tip-list{ list-style:none; margin:0; padding:0; counter-reset:tip; display:flex; flex-direction:column; gap:10px; }
.tip-list li{
  counter-increment:tip; position:relative; padding:16px 16px 16px 54px;
  background:var(--surface); border-radius:var(--radius); font-size:15px; line-height:1.55;
  box-shadow:var(--shadow-sm);
}
.tip-list li::before{
  content:counter(tip); position:absolute; left:16px; top:16px;
  font-weight:700; font-size:13px; color:#fff;
  background:linear-gradient(150deg, var(--violet), var(--violet-deep));
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- Footer ---------- */
.footer{
  max-width:720px; margin:0 auto; padding:24px 20px calc(80px + env(safe-area-inset-bottom, 0px));
  font-size:12px; color:var(--ink-faint); line-height:1.6;
}
.footer a{ color:var(--violet-deep); font-weight:600; text-decoration:underline; }

/* ---------- Disclaimer strip ---------- */
.disclaimer{
  background:var(--coral-tint); border-radius:var(--radius);
  padding:14px 16px; font-size:13px; color:var(--coral-deep);
  margin-bottom:20px; line-height:1.55; font-weight:500;
}

@media (min-width:600px){
  .hero h1{ font-size:36px; }
  .index-grid{ grid-template-columns:1fr 1fr; }
}

/* ---------- Simple / low-load mode ----------
   Toggled sitewide via a class on <body>. Deliberately not a separate page:
   applies uniformly to whatever route is already showing, so it works no
   matter where someone is in the app when they need it. Bigger tap targets
   and higher-contrast text, not a different feature set. */
.simple-mode{ font-size:17px; }
.simple-mode p, .simple-mode li, .simple-mode .blurb, .simple-mode .remit,
.simple-mode .detail, .simple-mode .summary{ color:var(--ink); }
.simple-mode a, .simple-mode button, .simple-mode .tab-item, .simple-mode .pill{ min-height:44px; }
.simple-mode .tabbar .tab-item svg{ width:26px; height:26px; }
.simple-mode .tabbar .tab-item span{ font-size:13.5px; font-weight:700; }
.simple-mode .entry-card, .simple-mode .row, .simple-mode .org-card,
.simple-mode .scheme-card, .simple-mode .template-card, .simple-mode .rights-card,
.simple-mode .prep-card{ padding:22px; }
.simple-mode .crisis-banner, .simple-mode .urgent-banner{ border-left-width:7px; }
.simple-mode .index-tile h2{ font-size:19px; }
.simple-mode .pill{ font-size:14.5px; padding:12px 18px; }

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