/* SCHH Community Guide — app shell + design system.
   One stylesheet, no frameworks. Tokens up top; everything below consumes
   them. The chat component (css/guide-chat.css) is themed via the
   --guide-* custom properties mapped onto #guide-app near the bottom. */

/* ---------------------------------------------------------------- tokens */
:root {
  color-scheme: light;

  /* "Lowcountry marsh" palette — all text pairs AA or better on white */
  --color-primary:        #1B4965;   /* deep coastal blue */
  --color-primary-strong: #123549;   /* hover / pressed */
  --color-primary-tint:   #E4EBF1;   /* icon circles, active-tab wash */
  --color-ink:            #1F2933;
  --color-muted:          #4B5A66;
  --color-link:           #1565C0;
  --color-bg:             #F6F3EC;   /* warm sand */
  --color-surface:        #FFFFFF;
  --color-line:           #D8DDE2;
  --color-error:          #B3261E;
  --color-success:        #1E7B34;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

  --text-sm:  0.889rem;   /* 16px */
  --text-lg:  1.111rem;   /* 20px */
  --text-xl:  1.278rem;   /* 23px */
  --text-2xl: 1.556rem;   /* 28px */
  --text-3xl: 1.889rem;   /* 34px */

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  --radius-sm: 8px;
  --radius:    12px;
  --shadow: 0 1px 3px rgba(20, 35, 50, .12);

  --topbar-h: 56px;
  --tabbar-h: 64px;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 112.5%;               /* 18px base — senior-friendly */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-bg);
  /* App shell: fixed top bar / scrolling main / fixed tab bar */
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overscroll-behavior: none;
}

main {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 var(--space-3); font-weight: 700; }
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
p  { margin: 0 0 var(--space-4); }

a { color: var(--color-link); }
a:hover { color: var(--color-primary-strong); }

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

img, svg { max-width: 100%; }
.icon { width: 24px; height: 24px; flex: none; }

[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-surface); color: var(--color-primary);
  padding: var(--space-3) var(--space-4);
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------- topbar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--topbar-h);
  padding: var(--space-2) var(--space-4);
  padding-top: calc(var(--space-2) + env(safe-area-inset-top));
  background: var(--color-primary);
  color: #fff;
}
.topbar-brand {
  display: flex; align-items: center; gap: var(--space-2);
  color: #fff; text-decoration: none;
  font-size: var(--text-lg); font-weight: 700;
}
.topbar-nav { display: none; }

@media (min-width: 768px) {
  .topbar { padding-inline: var(--space-5); }
  .topbar-nav { display: flex; gap: var(--space-2); }
  .topbar-nav a {
    color: #fff; text-decoration: none; font-weight: 600;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .topbar-nav a:hover { background: var(--color-primary-strong); color: #fff; }
  .topbar-nav a[aria-current="page"] {
    background: rgba(255, 255, 255, .16);
  }
}

/* ---------------------------------------------------------------- tabbar */
.tabbar {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  min-height: var(--tabbar-h);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px;
  padding: var(--space-2) var(--space-1);
  color: var(--color-muted); text-decoration: none;
  font-size: 13px; font-weight: 600; line-height: 1.2;
}
.tabbar a[aria-current="page"] { color: var(--color-primary); }
.tabbar a[aria-current="page"] .icon { stroke-width: 2.5; }

@media (min-width: 768px) {
  .tabbar { display: none; }
}

/* --------------------------------------------------------------- content */
.container {
  max-width: 900px;
  margin-inline: auto;
  padding: var(--space-5) var(--space-4) var(--space-6);
}
.prose { max-width: 42em; margin-inline: auto; }

.page-header { text-align: center; margin-bottom: var(--space-6); }
.page-header h1 { color: var(--color-primary); }
.page-header .subheading {
  color: var(--color-muted); font-size: var(--text-lg);
  max-width: 34em; margin-inline: auto;
}

.card-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-6);
}
/* grid items default to min-width:auto, so one unbreakable string (a long
   vendor email) widens the track past the viewport → page scrolls sideways
   on phones. Let content shrink instead. */
.card-grid > * { min-width: 0; }
@media (min-width: 640px)  { .card-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .card-grid { grid-template-columns: 1fr 1fr 1fr; } }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-5);
}
.card h3 { font-size: var(--text-lg); }
.card p:last-child { margin-bottom: 0; }
.card .icon-badge { margin-bottom: var(--space-3); }

.card-questions {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-line);
}
.card-questions-label {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.card-questions ul { list-style: none; margin: 0; padding: 0; }
.card-questions a {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-2) 0;
  min-height: 44px;
  font-size: var(--text-sm); font-style: italic;
  color: var(--color-link); text-decoration: underline;
  text-underline-offset: 3px;
}
.card-questions a:hover { color: var(--color-primary-strong); }
.card-question-icon {
  width: 18px; height: 18px; flex: none;
  margin-top: 3px; color: var(--color-primary);
}

.icon-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--color-primary-tint); color: var(--color-primary);
}

.text-center { text-align: center; }

.about-intro > p:first-child {
  font-size: var(--text-lg);
  color: var(--color-primary);
}

.section-block { margin-bottom: var(--space-6); }
.section-block > .section-heading {
  display: flex; align-items: center; gap: var(--space-3);
  color: var(--color-primary);
  font-size: var(--text-xl);
}
.section-heading .icon-badge { flex: none; width: 44px; height: 44px; }
.callout {
  background: var(--color-primary-tint);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  font-style: italic;
}

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  border: 0; border-radius: var(--radius-sm);
  background: var(--color-primary); color: #fff;
  font-family: inherit; font-size: 1rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--color-primary-strong); color: #fff; }
.btn-block { display: flex; width: 100%; }
@media (min-width: 640px) { .btn-block { max-width: 22em; margin-inline: auto; } }

/* ----------------------------------------------------------------- forms */
.form-field { margin-bottom: var(--space-4); }
.form-field label { display: block; font-weight: 600; margin-bottom: var(--space-1); }
.form-field input, .form-field textarea {
  width: 100%; min-height: 48px;
  padding: var(--space-3);
  font: inherit; color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
}
.form-field textarea { line-height: 1.5; }

/* ------------------------------------------- More / Links / Vendors */
.more-list { list-style: none; margin: 0; padding: 0; }
.more-list li + li { margin-top: var(--space-3); }
.more-list a {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--color-ink); text-decoration: none;
  font-weight: 600; font-size: var(--text-lg);
  min-height: 64px;
}
.more-list a:hover { border-color: var(--color-primary); color: var(--color-ink); }
.more-list-text { flex: 1; }
.more-list-chevron { color: var(--color-muted); }

#faq { scroll-margin-top: var(--space-4); }

.faq-card h3 {
  display: flex; align-items: center; gap: var(--space-3);
  color: var(--color-primary);
}
.faq-card h3 .icon-badge { flex: none; width: 40px; height: 40px; }
.faq-card .card-questions { margin-top: var(--space-2); padding-top: 0; border-top: 0; }

.link-group { max-width: 42em; margin-inline: auto; }
.link-group + .link-group { margin-top: var(--space-5); }
.link-group h3 {
  display: flex; align-items: center; gap: var(--space-3);
  color: var(--color-primary);
}
.link-group h3 .icon-badge { flex: none; width: 40px; height: 40px; }

.link-list { list-style: none; margin: 0; padding: 0; }
.link-list li + li { margin-top: var(--space-3); }
.link-list li {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.link-list .icon-badge { flex: none; width: 40px; height: 40px; }
.link-list-text { display: block; min-width: 0; }
.link-list-text strong { color: var(--color-ink); }
.link-list-text > span { display: block; color: var(--color-muted); font-size: var(--text-sm); }
.link-list .link-contact {
  color: inherit; font-size: 1rem; font-weight: 600;
  margin-top: var(--space-1);
}
.link-contact a {
  display: inline-flex; align-items: center; min-height: 32px;
}
.link-address {
  display: flex; align-items: flex-start; gap: var(--space-1);
  margin-top: var(--space-1); font-size: var(--text-sm);
}
.link-address-icon {
  width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--color-muted);
}

.vendor-disclaimer { margin-bottom: var(--space-6); font-style: normal; }
.vendor-badge {
  display: inline-block; vertical-align: 3px;
  margin-left: var(--space-2); padding: 2px 10px;
  background: var(--color-success); color: #fff;
  border-radius: 999px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.vendor-badge-featured { background: #b8860b; }  /* sponsored placement */
.vendor-badge-listed { background: #8a8578; }    /* directory-seeded, muted */
.cat-grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--space-6);
}
@media (min-width: 640px)  { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cat-card {
  display: flex; flex-direction: column; gap: .25rem;
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: var(--space-3) var(--space-4);
  text-decoration: none; color: inherit;
}
.cat-card:hover, .cat-card:focus-visible { border-color: var(--color-primary); }
/* icon and category name share one line */
.cat-card .cat-head { display: flex; align-items: flex-start; gap: .5rem; min-width: 0; }
.cat-card .cat-icon { font-size: 1.5rem; line-height: 1; flex: none; }
.cat-card .cat-name { font-weight: 700; line-height: 1.25; }
.cat-card .cat-count { color: var(--color-muted); font-size: .88em; }
.cat-card .cat-blurb { color: var(--color-muted); font-size: .82em; line-height: 1.35; margin-top: .15rem; }
.cat-desc { color: var(--color-muted); margin-top: calc(-1 * var(--space-2)); margin-bottom: var(--space-3); }
.cat-back-line { margin-bottom: var(--space-3); }
.hint { color: var(--color-muted); font-size: .9em; }
.button-primary {
  display: inline-block; padding: .7rem 1.4rem; font-weight: 600;
  background: var(--color-primary); color: #fff !important;
  border-radius: var(--radius); text-decoration: none;
}
.button-primary:hover, .button-primary:focus-visible { opacity: .92; }
.section-block[id] { scroll-margin-top: var(--space-4); }  /* deep-linked anchors */
.link-group[id] { scroll-margin-top: var(--space-4); }
.link-index { margin-bottom: var(--space-5); scroll-margin-top: var(--space-4); }
.back-to-index {
  margin-left: auto; display: inline-flex; align-items: center;
  color: var(--color-muted); padding: .35rem;  /* keeps the tap target ~44px */
}
.back-to-index svg { width: 1.1rem; height: 1.1rem; }
.back-to-index:hover, .back-to-index:focus-visible { color: var(--color-primary); }
.link-index .cat-icon svg { width: 1.4rem; height: 1.4rem; color: var(--color-primary); }
.nearby-offer {
  border-top: 1px dashed var(--color-line);
  margin-top: var(--space-5); padding-top: var(--space-4);
}
.nearby-offer h4 { margin-bottom: .3rem; }
.nearby-btn {
  padding: .6rem 1.2rem; font: inherit; font-weight: 600; cursor: pointer;
  background: var(--color-surface); color: var(--color-primary);
  border: 1px solid var(--color-primary); border-radius: var(--radius);
  margin-top: var(--space-2);
}
.nearby-btn[disabled] { opacity: .6; cursor: default; }
.vendor-card-web { border-style: dashed; box-shadow: none; }
.cat-title { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.vendor-recs { color: var(--color-muted); font-size: .9em; }
/* Spec §8.6 attributes: specialty tags are descriptive sub-category chips
   (outlined, quiet) — visually distinct from the filled trust badges in the
   heading; fact lines ("Accepting new patients: Yes") carry an as-of date. */
.vendor-tags { margin: .15rem 0 .35rem; line-height: 1.9; }
.vendor-tag {
  display: inline-block; margin-right: .35rem; padding: 1px 9px;
  border: 1px solid var(--color-line); border-radius: 999px;
  background: var(--color-bg, transparent); color: var(--color-muted);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.vendor-facts { font-size: .9em; margin-bottom: .25rem; }

/* Vendor search (vendors page). One wide box above the category grid;
   the search view reuses .cat-title / .card-grid so results look exactly
   like a category listing. */
.vendor-search { margin-bottom: var(--space-4); }
.vendor-search input[type=search] {
  width: 100%; box-sizing: border-box; padding: .7rem .9rem;
  font: inherit; font-size: 1.05rem; color: var(--color-ink);
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: 10px; -webkit-appearance: none; appearance: none;
}
.vendor-search input[type=search]:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-tint);
}
.vendor-search-hint { color: var(--color-muted); font-size: .9em; margin: .4rem 0 0; }
/* Specialty tag filter bar (category view). The buttons reuse .vendor-tag
   so a filter chip and the chip on a card are visibly the same object;
   .tag-btn adds the interactive affordances and the selected state. */
.tag-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin-bottom: var(--space-4);
}
.tag-filter-label { color: var(--color-muted); font-size: .9em; margin-right: .1rem; }
button.vendor-tag.tag-btn {
  margin-right: 0; padding: .35rem .7rem;   /* ~44px tap target with the gap */
  font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; background: var(--color-surface);
}
button.tag-btn:hover, button.tag-btn:focus-visible { border-color: var(--color-primary); }
button.tag-btn.tag-btn-on {
  background: var(--color-primary); border-color: var(--color-primary);
  color: #fff;
}
.tag-count { opacity: .7; font-weight: 400; }
.tag-more {
  padding: .35rem .5rem; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--color-link); text-decoration: underline;
}
.tag-more:hover, .tag-more:focus-visible { color: var(--color-primary); }
.vendor-contact { font-weight: 600; overflow-wrap: anywhere; }
/* each contact wraps to a new line as a unit; only a link that is itself
   wider than the card ever breaks mid-string (overflow-wrap above) */
.vendor-contact a { display: inline-block; }

/* Labeled vertical contact list on directory vendor cards ("Phone: …",
   one row per field, no bullets). The nearby-web cards keep the inline
   .vendor-contact row above. */
.vendor-contact-list {
  list-style: none; margin: 0 0 var(--space-3); padding: 0;
  overflow-wrap: anywhere;
}
/* breathing room under the description (details or plain-text form) when
   the contact list follows it */
.vendor-details + .vendor-contact-list,
.vendor-desc-short + .vendor-contact-list { margin-top: var(--space-2); }
.vendor-contact-label { color: var(--color-muted); font-weight: 600; }
/* tap-for-directions cue on the address row, matching the Quick Links page */
.vendor-address-icon {
  width: 16px; height: 16px; vertical-align: -2px;
  margin-right: 2px; color: var(--color-muted);
}
.vendor-sep { color: var(--color-muted); margin-inline: var(--space-1); }

/* Research-confidence badge is a link (to the About page's plain-language
   explanation), so it needs its own text/hover treatment on top of the
   shared .vendor-badge pill. Colors reuse already-AA-checked tokens rather
   than new unvetted hex values. */
a.vendor-badge { text-decoration: none; cursor: pointer; }
a.vendor-badge:hover, a.vendor-badge:focus-visible { opacity: .85; }
/* "Online verification" line (research tier): plain muted text with a
   neutral three-segment meter — never a colour scale or a chip. */
.vendor-verification { margin: var(--space-1) 0 var(--space-3); font-size: 13px; color: var(--color-muted); }
.vendor-verification a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.vendor-verification a:hover, .vendor-verification a:focus-visible { color: var(--color-text); }
.vendor-verification .meter { display: inline-flex; gap: 3px; margin: 0 2px; vertical-align: middle; }
.vendor-verification .meter i { display: inline-block; width: 12px; height: 7px; border-radius: 4px;
  background: var(--color-border, #d8d4cc); }
.vendor-verification .meter i.on { background: var(--color-muted, #6b675f); }

/* Long per-vendor content ("Description and service area", "What
   residents mention") lives in native <details> so the collapsed card
   stays scannable — no fixed-height clipping, reflows at 200% zoom, and
   keyboard/AT operable for free. */
.vendor-details {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-line);
}
.vendor-details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-primary);
}
.vendor-details summary:hover, .vendor-details summary:focus-visible {
  color: var(--color-primary-strong);
}
.vendor-details[open] summary { margin-bottom: var(--space-2); }
.vendor-details p { margin: var(--space-2) 0 0; }
.vendor-details p:first-of-type { margin-top: 0; }

/* Description variant: the collapsed summary is a brief preview of the
   description itself (body text, no disclosure triangle) with a
   More / Show less toggle styled as the interactive part. Opening hides
   the preview so the full text doesn't repeat its own first line. */
.vendor-desc summary { color: var(--color-ink); font-weight: 400; list-style: none; }
.vendor-desc summary::-webkit-details-marker { display: none; }
.vendor-desc summary:hover, .vendor-desc summary:focus-visible { color: var(--color-ink); }
.desc-toggle { color: var(--color-link); font-weight: 600; white-space: nowrap; }
.desc-toggle::after { content: "More"; }
.vendor-desc[open] .desc-preview { display: none; }
.vendor-desc[open] .desc-toggle::after { content: "Show less"; }
.vendor-desc summary:hover .desc-toggle,
.vendor-desc summary:focus-visible .desc-toggle { color: var(--color-primary-strong); }
.vendor-desc-short { margin-bottom: 0; }

.vendor-recommend { margin-top: var(--space-3); }
.vendor-recommend a { font-weight: 600; color: var(--color-link); }

/* Research Brief row (prototype): closes the researched section of the
   card. A current brief reads as a dated fact line with its own label;
   the no-brief state is just the commission link. */
.vendor-brief { font-size: .9em; margin-bottom: 0; }
.vendor-brief-current { color: var(--color-muted); }
.vendor-brief-label {
  display: inline-block; padding: 2px 10px; margin-right: 2px;
  background: var(--color-primary-tint); border: 1px solid var(--color-primary);
  border-radius: 999px;
  color: var(--color-primary); font-size: 12.5px; font-weight: 600;
  white-space: nowrap;
}
.vendor-brief a { font-weight: 600; }
/* current-brief state: the pill and date are one link, so the date reads as
   a plain-text detail (no underline) and only the pill signals the action */
.vendor-brief a.vendor-brief-link {
  text-decoration: none; color: var(--color-muted); font-weight: 400;
}
.vendor-brief-link:hover .vendor-brief-label,
.vendor-brief-link:focus-visible .vendor-brief-label {
  background: var(--color-primary); color: #fff;
}
/* ?vendor_id= deep link (e.g. the brief page's "back to listing" link): a
   temporary highlight so the resident can find the specific card in a long
   category list, not a permanent style. */
.vendor-card-highlight {
  outline: 3px solid var(--color-primary); outline-offset: 2px;
  transition: outline-color 2.5s ease;
}
.form-check label { display: flex; gap: var(--space-2); align-items: flex-start; font-weight: 400; }
.form-check input { width: auto; height: auto; margin: 5px 0 0; flex: none; }

/* Resident-sourced block at the bottom of each card — usage count, "What
   residents mention", and the "I used this vendor" action. Visibly but
   subtly set apart from the researched data above it: the page's warm-sand
   wash inside the white card. */
.vendor-resident {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3) var(--space-3);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
}
.vendor-resident .vendor-recs { margin-bottom: 0; }
.vendor-resident .vendor-details {
  margin-top: var(--space-2); padding-top: var(--space-2);
}
.vendor-resident .vendor-recommend { margin-top: var(--space-2); }

/* --------------------------------------------------------- install page */
.install-section { margin-bottom: var(--space-6); }
.install-section h2 {
  display: flex; align-items: center; gap: var(--space-2);
  color: var(--color-primary); font-size: var(--text-xl);
}
.install-note { color: var(--color-muted); }
.install-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.install-steps li {
  counter-increment: step;
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px dashed var(--color-line);
}
.install-steps li::before {
  content: counter(step);
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-primary); color: #fff;
  font-weight: 700; font-size: var(--text-lg);
  display: flex; align-items: center; justify-content: center;
}
.install-steps p { margin: 0; }
.install-glyph {
  display: inline-flex; vertical-align: -4px;
  padding: 2px 5px;
  border: 1px solid var(--color-line); border-radius: 6px;
  background: var(--color-surface); color: var(--color-primary);
}
.install-glyph .icon { width: 20px; height: 20px; }
.install-appicon {
  width: 24px; height: 24px; vertical-align: -5px; border-radius: 6px;
}
.install-installed {
  background: #E9F4EC;
  border: 1px solid var(--color-success);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}
.install-installed p { margin: 0; }
.install-switch { margin-bottom: var(--space-6); }
.install-faq li { margin-bottom: var(--space-2); }

/* ---------------------------------------------------------------- footer */
.site-footer {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
  color: var(--color-muted);
  font-size: var(--text-sm);
  text-align: center;
}
.site-footer .disclaimer { max-width: 38em; margin-inline: auto; }

/* --------------------------------------------------- Ask screen (chat) */
.app-fullscreen main {
  min-height: 0;
  display: flex; flex-direction: column;
}
/* The Ask page holds two swappable views; the chat one must preserve the
   flex chain from <main> down to the message pane. */
#chat-view {
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0;
}

/* Welcome view for first-time (signed-out) visitors */
.welcome {
  max-width: 42em;
  margin-inline: auto;
  padding: var(--space-6) var(--space-4) var(--space-7);
  text-align: center;
}
.welcome-icon {
  width: 88px; height: 88px;
  border-radius: 22%;
  margin-bottom: var(--space-4);
}
.welcome h1 { font-size: var(--text-2xl); color: var(--color-primary); }
.welcome-lede { font-size: var(--text-lg); color: var(--color-muted); }
.welcome-points {
  display: grid; gap: var(--space-4);
  margin: var(--space-6) 0;
  text-align: left;
}
.welcome-point { display: flex; gap: var(--space-4); align-items: flex-start; }
.welcome-point .icon-badge { flex: none; }
.welcome-point h2 { font-size: var(--text-lg); margin-bottom: var(--space-1); }
.welcome-point p { margin: 0; }
.welcome-extra { margin-top: var(--space-4); }
.welcome-fineprint {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-sm); color: var(--color-muted);
}
/* Disclaimer notice: starts as a full panel, collapses into a one-line
   pill the first time the resident scrolls or starts typing (small script
   in index.html — the chat pane scrolls internally, so a plain
   position:sticky header can't observe it). The line stays tappable to
   re-open the full text. */
.ask-header { padding: var(--space-2) var(--space-3) var(--space-1); }
.ask-notice {
  max-width: 36em; margin-inline: auto;
  background: var(--color-primary-tint);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  text-align: left;
  overflow: hidden;
}
.ask-notice-line {
  display: flex; width: 100%; align-items: center; gap: var(--space-2);
  min-height: 40px; padding: var(--space-1) var(--space-3);
  border: 0; background: none;
  font: inherit; font-size: var(--text-sm); font-weight: 600;
  color: var(--color-primary); cursor: pointer;
}
.ask-notice-icon { width: 18px; height: 18px; }
.ask-notice-chevron {
  width: 18px; height: 18px; margin-left: auto;
  transition: transform .25s ease;
}
.ask-notice[data-open="true"] .ask-notice-chevron { transform: rotate(180deg); }
.ask-notice-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.ask-notice[data-open="true"] .ask-notice-body { grid-template-rows: 1fr; }
.ask-notice-body > div { overflow: hidden; }
.ask-notice-body p {
  margin: 0; padding: 0 var(--space-3) var(--space-3);
  font-size: var(--text-sm); color: var(--color-ink);
}
.ask-footer {
  max-width: 36em; margin: var(--space-2) auto var(--space-3);
  padding-top: var(--space-2); border-top: 1px solid var(--color-line);
  font-size: var(--text-sm); line-height: 1.4; color: var(--color-muted);
  text-align: center;
}
.ask-footer a { color: var(--color-link); }
@media (max-width: 639px) {
  .ask-footer { font-size: .8rem; line-height: 1.3; }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.page-ask #guide-app {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  width: 100%;

  /* Theme the chat component (host-facing --guide-* contract) */
  --guide-accent: var(--color-primary);
  --guide-accent-text: #ffffff;
  --guide-link: var(--color-link);
  --guide-ink: var(--color-ink);
  --guide-muted: var(--color-muted);
  --guide-line: var(--color-line);
  --guide-surface: var(--color-surface);
  --guide-bg: transparent;
  --guide-font: var(--font-sans);
  --guide-heading-font: var(--font-sans);
  --guide-font-size: 18px;
  --guide-radius: var(--radius);
  --guide-chat-height: 60vh;   /* fallback only; flex rules below fill screen */
}
/* Fill the viewport: the chat wrap becomes a flex column and the message
   pane takes all remaining height, scrolling internally. */
.page-ask #guide-app [data-ga="chatWrap"]:not(.ga-hidden) {
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0;
}
.page-ask #guide-app .ga-messages {
  flex: 1 1 auto; height: auto; min-height: 0;
}
/* Toolbar actions (New conversation / Sign out): plain links in the
   component; dressed up as ghost pill buttons here. Scoped to .ga-toolbar
   so the OTP card's linkish buttons keep their inline-link look. */
.page-ask #guide-app .ga-toolbar { gap: var(--space-2); padding: var(--space-2) 0; }
.page-ask #guide-app .ga-toolbar .ga-linkish {
  display: inline-flex; align-items: center;
  min-height: 36px; padding: 4px 14px;
  border: 1px solid var(--color-line); border-radius: 999px;
  background: var(--color-surface); color: var(--color-primary);
  font-weight: 600; font-size: var(--text-sm); text-decoration: none;
}
.page-ask #guide-app .ga-toolbar .ga-linkish:hover {
  background: var(--color-primary-tint); border-color: var(--color-primary);
}
.page-ask #guide-app .ga-toolbar-sep { display: none; }

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---------------------------------------------------- prose tables */
/* Markdown tables in Deep Dives and Research Briefs (the health-systems
   comparison is 28 rows × 5 columns of cited prose). Wrapped in
   .table-scroll by the layout script so they scroll sideways inside the
   prose column instead of blowing it out; the header row and the field
   column stay pinned so a cell always reads with its labels. */
.table-scroll {
  overflow-x: auto;
  /* break out of the 42em prose column when the screen has room: as wide
     as the viewport minus page padding, up to the container width, and
     centered under the prose. On phones that is simply the screen. */
  width: min(calc(100vw - 2 * var(--space-4)), 900px);
  max-width: none;
  margin: var(--space-4) 0 var(--space-5) 50%;
  transform: translateX(-50%);
  border: 1px solid var(--color-line); border-radius: var(--radius-sm);
  background: var(--color-surface);
  -webkit-overflow-scrolling: touch;
}
.prose table {
  border-collapse: separate; border-spacing: 0;
  font-size: 0.82rem; line-height: 1.4;
  min-width: 100%;
}
.prose th, .prose td {
  padding: .45rem .6rem; vertical-align: top; text-align: left;
  border-bottom: 1px solid var(--color-line);
  min-width: 12em; max-width: 24em;
}
.prose th:first-child, .prose td:first-child {
  min-width: 11em; max-width: 13em; font-weight: 600;
  position: sticky; left: 0; z-index: 1;
  background: var(--color-surface);
  border-right: 1px solid var(--color-line);
}
.prose thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--color-primary-tint); color: var(--color-primary);
  font-weight: 700; border-bottom: 2px solid var(--color-primary);
}
.prose thead th:first-child { z-index: 3; }
.prose tbody tr:nth-child(even) td { background: var(--color-bg); }
.prose tbody tr:last-child td { border-bottom: 0; }
/* citations are the noisiest part of a cell: keep them, quiet them */
.prose td a { color: var(--color-muted); font-size: .92em; }
.prose td a:hover, .prose td a:focus-visible { color: var(--color-link); }
.table-scroll + .hint { margin-top: calc(-1 * var(--space-4)); }
/* Wide screens: the wrapper is the table's own scroll pane, bounded in
   height, so the sticky header row and field column actually pin while
   the rows scroll (sticky only works against the nearest scroll box). */
@media (min-width: 768px) {
  .table-scroll { max-height: 82vh; overflow: auto; }
}
/* Phones: no grid at all. Each row becomes a card — the field name as its
   heading, then one "System: value" line per column, labeled from the
   header row by the layout script (data-label). Nothing to scroll
   sideways, no header to lose. */
@media (max-width: 767px) {
  .table-scroll {
    overflow: visible; width: auto; max-width: none; margin-left: 0;
    transform: none; border: 0; background: none;
  }
  .prose table, .prose thead, .prose tbody, .prose tr, .prose th, .prose td { display: block; }
  .prose table { font-size: 0.9rem; min-width: 0; }
  .prose thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .prose tbody tr {
    margin: 0 0 var(--space-3); border: 1px solid var(--color-line);
    border-radius: var(--radius-sm); background: var(--color-surface); overflow: hidden;
  }
  .prose th, .prose td {
    min-width: 0; max-width: none; position: static; border: 0;
    padding: .5rem .75rem;
  }
  .prose th:first-child, .prose td:first-child {
    min-width: 0; max-width: none; width: auto;
    background: var(--color-primary-tint); color: var(--color-primary);
    font-weight: 700; border-bottom: 1px solid var(--color-line);
  }
  .prose td:not(:first-child) { border-bottom: 1px solid var(--color-line); }
  .prose td:not(:first-child)::before {
    content: attr(data-label); display: block;
    font-size: .8rem; font-weight: 600; color: var(--color-muted);
    margin-bottom: .15rem;
  }
  .prose tbody tr td:last-child { border-bottom: 0; }
  .prose tbody tr:nth-child(even) td { background: var(--color-surface); }
  .prose tbody tr:nth-child(even) td:first-child { background: var(--color-primary-tint); }
}