/* ==========================================================================
   NA Recovery, demo C design system.

   Demo A's bones (warm paper, generous space, editorial rhythm) with the
   display serif replaced by a clean modern sans, real photography, and a
   call box that sells the call instead of announcing how it is paid for.

   Every color decision lives in the palette block that each page loads
   AFTER this file. Nothing below hardcodes a brand color, so one palette
   file reskins buttons, chips, links, bands, the mark and every tint at
   once. US spelling note: the CSS property is spelled "color" because that
   is the language, prose and content use American spelling throughout.
   ========================================================================== */

/* ---- fallback palette (overridden by the palette file) ---- */
:root{
  /* ---- TYPE SCALE -------------------------------------------------
     Ryan, 2026-10-19: "why does it seem like the font is a different
     size?" Because it was. This sheet carried 26 distinct fixed sizes
     across 130 declarations, including six inside a 2.5px band (13,
     13.5, 14, 14.5, 15, 15.5). That is not a hierarchy, it is noise:
     close enough to read as accidental, far enough apart to notice.
     Half-pixel values were the most used of all, and browsers round
     them differently at different zoom levels.

     Nine steps now, roughly a 1.13 ratio, --fs-5 is body. Snap to a
     step; do not invent a value between two of them. */
  --fs-1:11px;
  --fs-2:12px;
  --fs-3:13.5px;
  --fs-4:15px;
  --fs-5:17px;
  --fs-6:19px;
  --fs-7:22px;
  --fs-8:26px;
  --fs-9:32px;

  --paper:#FFFFFF;
  --surface:#FFFFFF;
  --ink:#141A22;
  --ink-2:#5A6472;
  --ink-3:#8B94A1;
  --line:#E3E7EC;
  --line-2:#F0F2F5;
  --accent:#B4532A;
  --accent-dark:#8E3F1E;
  --accent-ink:#FFFFFF;
  --accent-soft:#F6EBE3;
  --accent-faint:#FBF4EF;
  --dark:#141A22;
  --dark-2:#1E2630;
  --dark-ink:#E8E5DF;
  --dark-mute:#9AA3AF;
  --good:#1F7A4D;
  --good-soft:#E8F4ED;

  --r-xs:6px; --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  /* Elevation is spent, not sprinkled. --sh-1 is nothing on purpose: cards sit
     on the page by tone and a hairline border, not by floating. --sh-2 is
     reserved for the call card, the one element that should read as lifted.
     --sh-3 is for things that genuinely overlay content. */
  --sh-1:none;
  --sh-2:0 2px 6px rgba(20,26,34,.05), 0 12px 32px rgba(20,26,34,.07);
  --sh-3:0 10px 34px rgba(20,26,34,.10);
  /* Percentage, never a pixel cap. A fixed 1180px froze the layout at 1124px
     of content at EVERY width, so the page spent 57% of a 1280 screen on
     content and 28% of a 2560 one, with 1,436px of dead margin. Line length is
     protected where it actually matters, on the prose itself, in ch: .prose
     72ch, .page-head 74ch, .standfirst 62ch, .panel-head 66ch, .lede 58ch.
     Those are font relative and scale with the reader's text size. A pixel cap
     on the container is not the same thing and never was. */
  --maxw:94%;
  --callbar-h:0px;
  --ff-display:"Plus Jakarta Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ff-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

@media (max-width:700px){ :root{ --callbar-h:66px; } }

/* ---- reset ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ff-body);
  font-size:var(--fs-5);
  line-height:1.62;
  font-feature-settings:"cv05" 1,"ss01" 1;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--callbar-h) + 0px);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-dark)}
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:700;letter-spacing:-.025em;margin:0;color:var(--ink)}
/* A heading with no class had NO size here, so it fell through to the
   browser's own stylesheet, which sizes h3 as a ratio of whatever it
   inherits. That is where 19.89px came from on the Detox, Medication,
   Services and Special programs headings: 17px body times the browser's
   1.17. Not a value anybody chose, and not on any scale. These are element
   selectors, so every classed heading and every .prose, .daycol and .day-h
   rule still wins over them. */
h2{font-size:var(--fs-7)}
h3{font-size:var(--fs-6)}
h4{font-size:var(--fs-5)}
/* Form controls do not inherit type by default. The "Narrow this list"
   toggle on the meeting pages was rendering at 13.3333px, which is Chrome's
   own default button size and nothing to do with this sheet. Same bug as the
   bare h3 above: a size nobody chose, arriving from the browser. */
button,input,select,textarea{font-family:inherit;font-size:inherit;
  line-height:inherit}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:12px;top:12px;z-index:99;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r-sm)}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px}
/* A page that is only an article gets one centered reading column instead of
   the full container. 72ch is the measure .prose already sets on itself, and
   the 56px is this container's own left and right padding, so the heading,
   the contents box and the prose all come out the same width and the column
   centers in the page. Before this the three sat at 794px, 1133px and 772px,
   all flush left, with 350px of empty page beside them. See demo_c_lib
   .reading(). The margin:0 auto above is what does the centering; this rule
   only has to supply the width. */
.container-reading{max-width:calc(72ch + 56px)}
/* Full bleed on a phone. --maxw exists to stop a big monitor freezing the
   layout; on 390px it would inset the container a second time on top of the
   18px padding, which cost 23px of content width and tipped a linklist row
   9px over the right edge on the NA city page. */
@media (max-width:640px){ .container{max-width:100%;padding:0 18px} }

/* ==========================================================================
   TYPE SCALE
   ========================================================================== */
.display{font-size:clamp(38px,5.1vw,62px);line-height:1.04;letter-spacing:-.035em}
.h2{font-size:clamp(26px,3.1vw,38px);line-height:1.14;letter-spacing:-.03em}
.h3{font-size:var(--fs-6);line-height:1.3;letter-spacing:-.02em}
.lede{font-size:clamp(17px,1.35vw,19px);line-height:1.6;color:var(--ink-2);max-width:58ch}
.small{font-size:var(--fs-3);line-height:1.55;color:var(--ink-2)}
.tnum{font-variant-numeric:tabular-nums}

.eyebrow{
  font-family:var(--ff-body);
  font-size:var(--fs-2);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin:0 0 14px;display:flex;align-items:center;gap:8px;
}
.eyebrow.on-dark{color:var(--dark-mute)}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--ff-body);font-size:var(--fs-4);font-weight:600;letter-spacing:-.01em;
  padding:15px 26px;border-radius:var(--r-pill);border:1.5px solid transparent;
  cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,background .14s ease;
  white-space:nowrap;
}
.btn svg{flex:none}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-dark);color:var(--accent-ink)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{color:var(--ink);border-color:var(--ink-3);background:var(--surface)}
.btn-dark{background:var(--surface);color:var(--ink)}
.btn-dark:hover{color:var(--ink);background:#fff}
.btn-lg{font-size:var(--fs-6);padding:19px 34px;font-weight:700}
.btn-block{width:100%}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.header-in{display:flex;align-items:center;gap:26px;height:74px}
.branding{display:flex;align-items:center;gap:11px;color:var(--ink)}
.branding .mark{flex:none;display:block;width:34px;height:34px;object-fit:contain}
.brandtext{display:flex;flex-direction:column;line-height:1}
.site-title{font-family:var(--ff-display);font-size:var(--fs-6);font-weight:700;letter-spacing:-.03em}
.site-sub{font-size:var(--fs-1);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.site-nav{margin-left:auto}
.nav-menu{display:flex;align-items:center;gap:30px}
.nav-menu a{
  font-size:var(--fs-4);font-weight:500;color:var(--ink);letter-spacing:-.01em;
  padding:6px 0;border-bottom:2px solid transparent;
}
.nav-menu a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.header-call{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--accent);color:var(--accent-ink);
  font-size:var(--fs-4);font-weight:700;letter-spacing:-.01em;
  padding:11px 20px;border-radius:var(--r-pill);
}
.header-call:hover{background:var(--accent-dark);color:var(--accent-ink)}
@media (max-width:980px){ .site-nav{display:none} }
@media (max-width:520px){ .site-sub{display:none} .header-call span{display:none} .header-call{padding:11px 13px} }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{padding:70px 0 0}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:start}
.hero h1{margin-bottom:22px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin:30px 0 0}
.hero-note{margin:18px 0 0;font-size:var(--fs-3);color:var(--ink-3)}

.hero-figure{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:3/2}
.hero-figure img{width:100%;height:100%;object-fit:cover}

.hero-media{margin-top:54px;position:relative;border-radius:var(--r-xl);overflow:hidden}
.hero-media img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 45%}

@media (max-width:920px){
  .hero{padding-top:44px}
  .hero-grid{grid-template-columns:1fr;gap:34px}
}

/* ---- trust strip ---- */
.trustbar{background:var(--dark);color:var(--dark-ink);margin-top:54px}
.trustbar ul{display:flex;justify-content:space-between;gap:26px;padding:19px 0;flex-wrap:wrap}
.trustbar li{display:flex;align-items:center;gap:10px;font-size:var(--fs-4);font-weight:500;letter-spacing:-.005em}
.trustbar svg{color:var(--accent);flex:none}
@media (max-width:820px){ .trustbar ul{justify-content:flex-start;gap:14px 26px} }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section{padding:86px 0}
.section-tight{padding:62px 0}
.section-alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{max-width:64ch;margin:0 0 42px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-head .h2{margin-bottom:14px}
@media (max-width:640px){ .section{padding:58px 0} }

/* ---- stat row ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px 22px;
}
.stat-n{font-family:var(--ff-display);font-size:var(--fs-9);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--ink);display:block}
.stat-l{font-size:var(--fs-3);color:var(--ink-2);margin-top:9px;display:block;line-height:1.4}
@media (max-width:820px){ .stats{grid-template-columns:repeat(2,1fr)} }

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

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 28px;display:flex;flex-direction:column;
  transition:border-color .16s ease,background .16s ease;
}
.card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:var(--accent-faint)}
.card .h3{margin-bottom:10px}
.card p{color:var(--ink-2);font-size:var(--fs-4);margin-bottom:18px}
.card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:6px}
.card-go{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-4);font-weight:600;color:var(--accent)}
.card-n{font-size:var(--fs-3);color:var(--ink-3);font-variant-numeric:tabular-nums}

/* The square icon tile at the top of a card. Named apart from .chip on
   purpose: .chip is the small text pill the listing pages use, the two rules
   collided, and the later one stretched this to the full card width. */
.iconchip{
  width:46px;height:46px;border-radius:var(--r);display:inline-flex;align-items:center;
  justify-content:center;background:var(--accent-soft);color:var(--accent);
  margin-bottom:18px;flex:0 0 auto;align-self:flex-start;
}

/* ---- photo band ---- */
.band{background:var(--dark);color:var(--dark-ink);padding:86px 0}
.band .h2,.band h2,.band h3{color:#fff}
.band .lede{color:var(--dark-mute)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:42px}
.tile{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.tile:hover img{transform:scale(1.035)}
.tile-cap{
  position:absolute;inset:auto 0 0 0;padding:44px 22px 22px;color:#fff;
  background:linear-gradient(to top,rgba(10,13,18,.9),rgba(10,13,18,.5) 55%,transparent);
}
.tile-cap b{display:block;font-family:var(--ff-display);font-size:var(--fs-5);font-weight:700;letter-spacing:-.02em;margin-bottom:5px}
.tile-cap span{font-size:var(--fs-3);color:#D8D5CF;line-height:1.45}
@media (max-width:820px){ .tiles{grid-template-columns:1fr;gap:16px} .tile{aspect-ratio:16/9} }

/* ==========================================================================
   THE CALL CARD
   Sells the call. The commercial disclosure is one quiet link, not a banner.
   ========================================================================== */
/* The border matches the filter rail's exactly. The two sit directly on top
   of one another in the sidebar, and a 1px 26%-tinted edge beside a 2px solid
   one reads as two components from different kits that happened to land in
   the same column. They are the two things in that rail the reader acts on,
   so they wear the same frame.

   Ryan's call 2026-10-19. This is the CALL CARD, so it changes on every page
   type, not only the ones with a filter. The radius moved with it for the
   same reason: 28px beside 20px is the same mismatch one step quieter. */
.callcard{
  background:var(--surface);border-radius:var(--r-lg);
  border:2px solid var(--accent);
  padding:32px 30px;box-shadow:var(--sh-2);position:relative;
}
.callcard .cc-eyebrow{
  font-size:var(--fs-2);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin:0 0 12px;
}
.cc-h{font-size:var(--fs-7);line-height:1.22;letter-spacing:-.028em;margin:0 0 12px}
.cc-body{font-size:var(--fs-4);color:var(--ink-2);margin:0 0 20px;max-width:70ch}
.cc-num{
  display:flex;align-items:center;justify-content:center;gap:12px;width:100%;
  background:var(--accent);color:var(--accent-ink);
  font-family:var(--ff-display);font-size:var(--fs-8);font-weight:700;letter-spacing:-.03em;
  padding:18px 20px;border-radius:var(--r-pill);
  transition:background .14s ease,transform .14s ease;
}
.cc-num:hover{background:var(--accent-dark);color:var(--accent-ink)}
.cc-trust{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.cc-trust li{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--good-soft);color:var(--good);
  font-size:var(--fs-2);font-weight:600;padding:6px 12px;border-radius:var(--r-pill);
}
.cc-fine{margin:16px 0 0;font-size:var(--fs-2);line-height:1.5;color:var(--ink-3)}
.cc-fine a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.cc-fine a:hover{color:var(--accent)}

/* the same card, inline and wide, used mid page */
/* The wide variant of the same card, and it redeclares the border, so it has
   to move with .callcard above or it silently wins and the two call surfaces
   on the site stop matching each other. Later rule, same specificity. */
.callwide{
  display:grid;grid-template-columns:1.25fr .75fr;gap:34px;align-items:center;
  background:var(--surface);border-radius:var(--r-lg);
  border:2px solid var(--accent);
  padding:38px 36px;box-shadow:var(--sh-2);
}
.callwide .cc-h{font-size:var(--fs-8)}
@media (max-width:820px){ .callwide{grid-template-columns:1fr;gap:22px;padding:28px 24px} }

/* ==========================================================================
   STATE DIRECTORY
   Replaced the photo band on 2026-09-29. All 148 state links sit in the HTML
   permanently; the tab strip only decides which panel is on screen. With
   script off the strip stays hidden and all three panels render open, which
   is also exactly what a crawler gets.
   ========================================================================== */

/* Non-negotiable, and the reason this block works at all. The hidden
   attribute is a UA default of display:none, and ANY display declaration
   beats it. .stabs is display:flex, so without this rule the tab strip
   renders while still marked hidden and the no-script fallback shows tabs
   that do nothing. */
[hidden]{display:none !important}

.stabs{
  display:flex;gap:4px;flex-wrap:wrap;margin:0 0 30px;
  border-bottom:1px solid var(--line);
}
.stab{
  appearance:none;-webkit-appearance:none;background:none;border:0;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  font-family:var(--ff-display);font-size:var(--fs-4);font-weight:700;letter-spacing:-.02em;
  color:var(--ink-3);padding:13px 15px;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;
  transition:color .14s ease,border-color .14s ease;
}
.stab:hover{color:var(--ink)}
.stab.here{color:var(--ink);border-bottom-color:var(--accent)}
.stab-n{
  font-family:var(--ff-body);font-size:var(--fs-2);font-weight:600;line-height:1.55;
  color:var(--ink-3);background:var(--line-2);border-radius:var(--r-pill);padding:1px 9px;
}
.stab.here .stab-n{background:var(--accent-soft);color:var(--accent-dark)}

/* Only ever seen with script off, where it is the thing that keeps three
   unlabelled lists of state names apart. */
.spanel + .spanel{margin-top:40px}
.spanel-h{font-size:var(--fs-5);margin:0 0 14px;color:var(--ink-2)}

/* 51 rows want a tighter line than a 12 row city list. */
.states .linkgrid a{padding:11px 2px;font-size:var(--fs-4)}
@media (max-width:560px){ .stab{padding:11px 11px;font-size:var(--fs-4)} }

/* ==========================================================================
   INSURANCE CARRIER GRID
   The block that answers "I cannot afford it" before a sentence is read.
   Every tile is a real mark; the two carriers with no logo on either
   Wikimedia host are text links below rather than drawn by hand.
   ========================================================================== */
.ptiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ptile{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  padding:20px 24px;min-height:98px;transition:border-color .14s ease;
}
.ptile:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
/* The source files are normalized to one canvas at fetch time, so a single
   rule sizes all eight instead of eight per-carrier exceptions. */
.ptile img{width:100%;max-width:168px;height:auto}
@media (max-width:900px){ .ptiles{grid-template-columns:repeat(3,1fr)} }
@media (max-width:620px){ .ptiles{grid-template-columns:repeat(2,1fr)} }

.palso{margin:24px 0 0;font-size:var(--fs-4);color:var(--ink-2)}
.palso a{font-weight:500}
.pall{display:inline-flex;align-items:center;gap:7px;font-weight:600;margin-left:4px}
.pall:hover svg{transform:translateX(3px)}
.pall svg{transition:transform .14s ease}
.pfine{margin:16px 0 0;font-size:var(--fs-2);line-height:1.55;color:var(--ink-3);max-width:76ch}

/* ==========================================================================
   SUBSTANCE GUIDES
   The heaviest writing on the site, reachable from the homepage only through
   the nav until now. Parent left, children right, one rhythm the whole way
   down: a parent with no children is a row with an empty right side rather
   than a second card shape.
   ========================================================================== */
.subs{border-top:1px solid var(--line)}
/* Inline, not a 230px column. As a two column grid the five substances with
   no children rendered as a name beside a large empty cell and read as
   missing content rather than as a page that simply has no sub pages. Only
   two rows carry pills, so the ragged left edge the inline version trades for
   it is not visible. */
.subrow{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:9px 20px;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.sub-h{flex:none}
.sub-h{
  font-family:var(--ff-display);font-size:var(--fs-5);font-weight:700;
  letter-spacing:-.02em;color:var(--ink);
}
.sub-h:hover{color:var(--accent)}
.sub-kids{display:flex;flex-wrap:wrap;gap:8px}
.sub-kids a{
  font-size:var(--fs-3);color:var(--ink-2);background:var(--line-2);
  border-radius:var(--r-pill);padding:4px 13px;line-height:1.5;
  transition:background .14s ease,color .14s ease;
}
.sub-kids a:hover{background:var(--accent-soft);color:var(--accent-dark)}
@media (max-width:700px){ .subrow{gap:9px 14px} }

/* ==========================================================================
   LINK GRIDS (cities, states, guides)
   ========================================================================== */
.linkgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 26px}
.linkgrid-2{grid-template-columns:repeat(2,1fr)}
.linkgrid-3{grid-template-columns:repeat(3,1fr)}
.linkgrid-4{grid-template-columns:repeat(4,1fr)}
.linkgrid-wide{grid-template-columns:1fr}
/* Every variant lives HERE, above the media queries, and every variant
   is named in them. .linkgrid-3 and .linkgrid-wide used to be declared
   340 lines further down, after the breakpoints. Same specificity, so
   the later rule won and .linkgrid-3 stayed three columns at every
   width: the rehab state and city hubs rendered three columns of city
   names inside a 390px phone and hung 180px off the right edge.
   Adding a variant below this block silently opts it out of mobile. */
.linkgrid li{border-bottom:1px solid var(--line)}
.linkgrid a{
  display:flex;align-items:baseline;gap:12px;padding:14px 2px;color:var(--ink);
  font-size:var(--fs-4);font-weight:500;
}
.linkgrid a:hover{color:var(--accent)}
/* A row with nowhere to go. A group under the page threshold is still listed,
   with its name and how often it meets, but it is not a link, so it gets the
   anchor's box and none of its link affordances: no chevron, no hover color,
   and a quieter ink so the eye can tell at a glance which rows lead
   somewhere. It is a sibling of .linkgrid a and MUST keep the same padding
   and baseline, or a list with both kinds in it reads as broken. */
.linkgrid .ll-x{
  display:flex;align-items:baseline;gap:12px;padding:14px 2px;
  color:var(--ink-2);font-size:var(--fs-4);font-weight:500;flex-wrap:wrap;
}
/* The META is the half that gives width back. It was flex:none, so a long one
   ("by town, and what is within a short drive") could not shrink at all and
   pushed the chevron 5px off a 390px viewport. It is several words, so letting
   it go under its min-content simply wraps it.

   The TITLE keeps min-width:auto on purpose. Putting min-width:0 on it as well
   let "California" shrink below its own text and the word then ran straight
   into "544 cities" on a 1440 screen, which is the Pasadena,CA91107 defect in
   a different place. A single word cannot wrap, so a title that cannot shrink
   is the correct floor. */
.ll-t{flex:1 1 auto}
/* min-content, not 0. At 0 the meta can shrink under its own text, and a meta
   that is a single unbreakable token ("2024-12") then spills out of its box and
   over the chevron: 21 of those on the articles hub. min-content lets a
   multi-word meta wrap between words and stops exactly there. The anchor wraps
   as the last resort, so a row that genuinely cannot fit puts the meta on its
   own line instead of off the page. */
.ll-m{font-size:var(--fs-3);color:var(--ink-3);font-variant-numeric:tabular-nums;
  flex:0 1 auto;min-width:min-content}
/* THE CHEVRON STAYS ON THE ROW. This was flex-wrap:wrap for every row, so a
   label too long for one line pushed the arrow onto a line of its own and
   left a hole the height of a row: "Antidepressant Addiction And Abuse" on
   /addictions/ wrapped to two lines and dropped its chevron to a third.
   Nowrap lets the LABEL wrap inside its own box, which is what should give,
   and the arrow stays pinned right and vertically centered. The wrap is kept
   at phone width, where it was added to stop a long meta shoving the chevron
   off a 390px screen. */
.linkgrid a{flex-wrap:nowrap;align-items:center}
.linkgrid .ll-x{align-items:center}
@media (max-width:640px){ .linkgrid a{flex-wrap:wrap;align-items:baseline} }
.linkgrid a:hover .ll-go{transform:translateX(3px)}
.ll-go{color:var(--ink-3);flex:none;transition:transform .14s ease}
@media (max-width:820px){
  .linkgrid,.linkgrid-3,.linkgrid-4{grid-template-columns:1fr 1fr}
  .linkgrid-wide{grid-template-columns:1fr}
}
@media (max-width:560px){
  .linkgrid,.linkgrid-2,.linkgrid-3,.linkgrid-4,.linkgrid-wide{grid-template-columns:1fr}
}

/* ---- guide rows ---- */
.guides{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.guide{
  display:flex;align-items:flex-start;gap:16px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;
  transition:border-color .16s ease,background .16s ease;
}
.guide:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:var(--accent-faint)}
.guide .iconchip{width:38px;height:38px;border-radius:var(--r-sm);margin:0}
.guide b{display:block;font-family:var(--ff-display);font-size:var(--fs-5);font-weight:700;letter-spacing:-.02em;color:var(--ink);margin-bottom:3px}
.guide span{font-size:var(--fs-3);color:var(--ink-2);line-height:1.5}
@media (max-width:700px){ .guides{grid-template-columns:1fr} }

/* ==========================================================================
   STEPS
   ========================================================================== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px}
.step-n{
  width:34px;height:34px;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--fs-4);margin-bottom:16px;
}
.step b{display:block;font-family:var(--ff-display);font-size:var(--fs-5);letter-spacing:-.02em;margin-bottom:7px}
.step span{font-size:var(--fs-4);color:var(--ink-2);line-height:1.55}
@media (max-width:900px){ .steps{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .steps{grid-template-columns:1fr} }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faqs{border-top:1px solid var(--line)}
.fq{border-bottom:1px solid var(--line)}
.fq summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 2px;cursor:pointer;list-style:none;
  font-family:var(--ff-display);font-size:var(--fs-5);font-weight:600;letter-spacing:-.022em;color:var(--ink);
}
.fq summary::-webkit-details-marker{display:none}
.fq summary:hover{color:var(--accent)}
.fq-i{
  flex:none;width:30px;height:30px;border-radius:var(--r-pill);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--ink-2);transition:transform .18s ease;
}
.fq[open] .fq-i{transform:rotate(45deg);background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.fq-a{padding:0 60px 24px 2px;color:var(--ink-2);font-size:var(--fs-4);max-width:78ch}
.fq-a p:last-child{margin-bottom:0}

/* The .crisis block is gone with the markup that used it (Ryan, 2026-10-01:
   already in the footer). 988 and 911 still ship on every page, in the footer
   compliance block, which is where .legal-item styles them. */

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta{position:relative;overflow:hidden;background:var(--dark);color:#fff}
.cta-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding:78px 0}
.cta h2{color:#fff;margin-bottom:16px}
.cta p{color:var(--dark-mute);max-width:52ch}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:28px}
.cta-fine{font-size:var(--fs-2);color:var(--dark-mute);margin-top:18px}
.cta-fine a{color:#D8D5CF;text-decoration:underline;text-underline-offset:2px}
.cta-figure{border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/3}
.cta-figure img{width:100%;height:100%;object-fit:cover}
@media (max-width:860px){ .cta-grid{grid-template-columns:1fr;gap:30px;padding:56px 0} .cta-figure{display:none} }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--dark-2);color:var(--dark-ink);margin-top:0}
.foot-main{padding:66px 0 46px}
/* FIVE children: the brand block plus four link columns. This was four
   tracks, so adding the Addiction column wrapped it onto a second row
   with one stray column under the brand. The count is declared here,
   so a new footer column needs a track added with it. */
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:32px}
.fcol-h{font-size:var(--fs-2);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:18px}
.fcol li{margin-bottom:11px}
.fcol a{color:var(--dark-mute);font-size:var(--fs-4)}
.fcol a:hover{color:#fff}
.fbrand .branding{margin-bottom:16px}
.fbrand .branding .mark{width:30px;height:30px}
.fbrand .site-title{color:#fff}
.fbrand p{color:var(--dark-mute);font-size:var(--fs-4);max-width:34ch}
.foot-call{
  display:inline-flex;align-items:center;gap:10px;margin-top:18px;
  background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:var(--fs-5);
  padding:13px 22px;border-radius:var(--r-pill);
}
.foot-call:hover{background:var(--accent-dark);color:var(--accent-ink)}
.foot-legal{border-top:1px solid rgba(255,255,255,.1);padding:34px 0}
.legal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.legal-item h2{font-size:var(--fs-3);font-weight:700;color:#fff;letter-spacing:-.01em;margin-bottom:8px;font-family:var(--ff-body)}
.legal-item p{font-size:var(--fs-3);color:#7F8794;line-height:1.55;margin:0}
.legal-item a{color:#A8AFBA;text-decoration:underline;text-underline-offset:2px}
.foot-bar{border-top:1px solid rgba(255,255,255,.1);padding:20px 0}
.fb-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:var(--fs-3);color:#7F8794}
.fb-in p{margin:0}
.fb-links{display:flex;gap:22px}
.fb-links a{color:#7F8794}
.fb-links a:hover{color:#fff}
/* Below the five-across width the BRAND block takes a row of its own and
   the four link columns stay together. The previous fallback was three
   equal tracks for five children, so the brand and two link sets sat on
   row one and the other two dropped underneath: the fourth set read as
   missing rather than as wrapped. The link columns are the navigation;
   they are the part that must not break up. */
@media (max-width:1200px){
  .foot-grid{grid-template-columns:repeat(4,1fr);gap:30px}
  .fbrand{grid-column:1 / -1;margin-bottom:10px}
}
@media (max-width:820px){ .foot-grid{grid-template-columns:1fr 1fr;gap:34px} .legal-grid{grid-template-columns:1fr} }
@media (max-width:560px){ .foot-grid{grid-template-columns:1fr} }

/* ==========================================================================
   STICKY MOBILE CALL BAR
   ========================================================================== */
.callbar{display:none}
@media (max-width:700px){
  .callbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;align-items:center;gap:12px;
    background:var(--accent);color:var(--accent-ink);padding:12px 18px;
    box-shadow:0 -6px 24px rgba(20,26,34,.18);
  }
  /* icon and number, centered, nothing else. The lead line and the chevron
     were removed 2026-09-30: the bar is a button on a phone, not a pitch. */
  .callbar{justify-content:center;gap:11px;padding:15px 18px}
  .cb-num{font-family:var(--ff-display);font-size:var(--fs-7);font-weight:700;letter-spacing:-.02em}
}

/* ==========================================================================
   PALETTE CHOOSER (demo only, never ships)
   ========================================================================== */
.chooser{position:fixed;right:18px;bottom:18px;z-index:70;display:flex;gap:8px;
  background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:8px 10px;box-shadow:var(--sh-2);backdrop-filter:blur(8px)}
.chooser a{width:26px;height:26px;border-radius:var(--r-pill);border:2px solid transparent;display:block}
.chooser a.here{border-color:var(--ink)}
.chooser .sw-copper{background:#B4532A}
.chooser .sw-teal{background:#14504E}
.chooser .sw-slate{background:#C77A1E}
.chooser .sw-red{background:#A81D1D}
@media (max-width:700px){ .chooser{bottom:78px} }

/* ==========================================================================
   INTERIOR TEMPLATES
   The homepage above is one page. Everything below dresses the other
   thirteen: listings, city and state hubs, meeting schedules, guides.
   Class names come from the page builders, which are shared across demos,
   so this section is a restyle rather than a rewrite.
   ========================================================================== */

/* ---- breadcrumbs ---- */
.crumbs{border-bottom:1px solid var(--line);background:var(--paper)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:14px 0;font-size:var(--fs-3)}
.crumbs li{display:flex;align-items:center;color:var(--ink-3)}
.crumbs a{color:var(--ink-2)}
.crumbs a:hover{color:var(--accent)}
.crumb-sep{display:inline-flex;margin:0 10px;color:var(--ink-3);opacity:.6}

/* ---- page head ---- */
/* EVERY page needs room before the footer, and nothing was giving it any.
   main had no bottom padding at all, so the gap was whatever margin the last
   element happened to carry: 17px after prose, 24px after a panel, and ZERO
   on the articles grid, whose cards sat flush against the dark footer. The
   page head already pays 44px at the top; this is the other half of it. */
main{padding-bottom:72px}
@media (max-width:640px){ main{padding-bottom:52px} }
.page-head{padding:44px 0 6px;max-width:74ch}
.page-head h1{font-size:clamp(31px,3.9vw,46px);line-height:1.08;letter-spacing:-.033em}
.standfirst{margin:18px 0 0;font-size:var(--fs-6);line-height:1.6;color:var(--ink-2);max-width:62ch}
/* .pagemeta is deliberately gone. It styled the meta pill row under the H1,
   which carried supply counts above the fold on eleven templates. The lib
   function that emitted it no longer accepts the argument, so there is nothing
   left to style. */

/* ---- two column layout ---- */
/* Sidebar on the LEFT, and both tracks proportional. The sticky header already
   carries the phone at top right, so the call card balances it on the left.
   1fr/3fr, not a 352px rail: a fixed rail is the same freezing mistake as a
   fixed container, and it is the main column that should absorb a bigger
   monitor. The sidebar is first in the SOURCE, which is what puts it left
   without order tricks; mobile order is restored explicitly below. */
.layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:48px;align-items:start;padding:34px 0 76px}
.col-side{position:sticky;top:96px}
@media (max-width:1040px){
  /* minmax(0,1fr), not 1fr, and min-width:0 on the item. A grid item defaults
     to min-width:auto, so a plain 1fr track cannot shrink below the min-content
     of everything inside it. On the two hub templates that carry ported prose
     that floor was 565px against a 390px viewport, and the whole main column
     hung off the right edge of the phone. The desktop rule above already had
     the minmax guard; the mobile rule had dropped it. */
  .layout{grid-template-columns:minmax(0,1fr);gap:30px}
  /* order, because the sidebar is now first in the source. On a phone the
     call surface is the fixed bottom bar and nothing else, so the card stays
     where it has always been, after the content, and the schedule is still the
     first thing under the page head. */
  .col-main{min-width:0;order:1}
  .col-side{position:static;order:2}
}

/* ---- panels ---- */
.panel{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:34px 32px;margin:0 0 24px;
}
.panel-head{margin:0 0 26px;max-width:66ch}
/* ==========================================================================
   STATE GRID  (the directory roots)
   ==========================================================================
   A row per state: the state's own photograph, its name, its counts. Ryan
   2026-10-01, after putting the text grid next to the live
   /facilities/locations/: "on a pick your state page the picture is the
   wayfinding", and a grid of 51 gray text rows is a spreadsheet.

   Three columns is the density he picked. The photo width is capped by that:
   at 1440 the main column is about 900px, so a column is ~290px and the row is
   photo + gap + text. "624 centers, 190 cities" needs about 120px, so anything
   over ~150px wraps the counts onto a second line and the rows go ragged. That
   was measured, not estimated: at 160px, 21 of the 51 rows wrapped.
   grid-template-columns uses minmax(0,1fr) because a plain 1fr track is sized
   by its content's min-width, which rendered one column at 402px against 216px
   for the other two. */
.sgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 14px}
.sgrid > *{display:flex;align-items:center;gap:12px;padding:11px 2px;color:var(--ink);
  border-bottom:1px solid var(--line);min-width:0}
.sgrid a:hover .sg-t{color:var(--accent)}
.sg-img{width:152px;height:80px;object-fit:cover;border-radius:var(--r-sm);flex:none;
  border:1px solid var(--line);display:block}
.sg-main{display:flex;flex-direction:column;gap:2px;min-width:0}
/* 15px, not 16. "Massachusetts" is one word and cannot wrap: at 16px in a
   100px text column it overflowed its own box by 18px and sat on top of the
   next column, which is the text-spill check's whole purpose. */
.sg-t{font-family:var(--ff-display);font-size:var(--fs-4);font-weight:700;letter-spacing:-.015em}
.sg-m{font-size:var(--fs-2);color:var(--ink-3);font-variant-numeric:tabular-nums}
/* District of Columbia is the one state with no photograph in the export. A
   tinted tile, never another state's picture. */
.sg-noimg{display:flex;align-items:center;justify-content:center;width:152px;height:80px;
  flex:none;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);
  color:var(--ink-3);font-family:var(--ff-display);font-weight:700;font-size:var(--fs-3);
  letter-spacing:.04em}
.sgrid .sg-off{color:var(--ink-3)}
.sgrid .sg-off .sg-t{color:var(--ink-2)}
@media (max-width:1040px){ .sgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .sgrid{grid-template-columns:minmax(0,1fr)} }

/* Anchor offset for the sidebar jump list. The header is sticky and about
   80px tall, so a jump link without this lands with the heading it was aiming
   at sitting underneath the header. Both shapes need it: some sections carry
   the id on the panel, some on the h2 inside it. .prose h2 already had it. */
.panel[id],.panel [id]{scroll-margin-top:100px}
/* One link under a grid, pointing at the full list the grid is a slice of. */
.panel-more{margin:18px 0 0;font-size:var(--fs-4)}
.panel-more a{color:var(--accent);font-weight:600;
  border-bottom:1px solid var(--accent-soft);padding-bottom:2px}
.panel-more a:hover{border-bottom-color:var(--accent)}
/* Prose measure inside a panel body. The 1180px container used to cap this by
   accident; once the container follows the viewport, a paragraph in the main
   column runs to about 120 characters on a 1920 screen, which is well past
   readable. Direct children only, so grids, tables and strips still use the
   full width they were widened for. */
.panel>p,.panel>ul,.panel>ol{max-width:66ch}
/* Table captions read as a heading for the day, so they align with it rather
   than centering across a table that is now over 1,600px wide. */
.sched caption{text-align:left;caption-side:top;font-size:var(--fs-3);color:var(--ink-3);
  padding:0 0 12px}
.panel-head .h2{font-size:clamp(22px,2.2vw,26px)}
.ph-sub{margin:11px 0 0;color:var(--ink-2);font-size:var(--fs-4);line-height:1.6}
.panel-faq{padding-bottom:12px}
.panel > .linkgrid{margin-top:-4px}
@media (max-width:640px){ .panel{padding:26px 20px} }

/* ---- sidebar ---- */
.sidebar{display:flex;flex-direction:column;gap:20px}
.sideblock{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px 22px;
}
.sb-h{
  font-family:var(--ff-body);font-size:var(--fs-1);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 16px;
}
.sideblock p{font-size:var(--fs-4);color:var(--ink-2);margin-bottom:0}
.sideblock p + p{margin-top:10px}
.sb-list li,.plain li{border-bottom:1px solid var(--line-2)}
.sb-list li:last-child,.plain li:last-child{border-bottom:0}
.sb-list a,.plain a{display:block;padding:11px 0;font-size:var(--fs-4);color:var(--ink);font-weight:500}
.sb-list a:hover,.plain a:hover{color:var(--accent)}
/* The section jump list reads as links, so it is coloured like one. --accent,
   never --accent-dark: that is the hover and pressed tone and it reads brown
   next to the rest of the orange on the page. */
.sb-jump a{color:var(--accent);font-weight:600}
.sb-jump a:hover{color:var(--accent-dark)}

/* ---- starting soon ---- */
.soon{margin:28px 0 0;border-top:2px solid var(--ink);padding-top:4px}
.soon-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:14px 0 6px;
  font-size:var(--fs-1);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3)}
.soon-tz{font-weight:500;letter-spacing:.02em;text-transform:none;font-size:var(--fs-2);
  color:var(--ink-3)}
/* THE GRID IS ON THE LIST, NOT ON THE ROW, and that is load bearing.
   It used to be on the li, so every row was an independent grid whose last
   track was `auto`: each row sized its own columns to its own text. Measured
   on the live San Diego page at a 1360 viewport, the address column started
   at 882px on three rows and 862 on a fourth, and the type column at 1177
   and 1140. Ryan, 2026-10-20: "the spacing between the columns is not equal,
   the meeting type hugs the far right edge of the page."
   Four rows sharing four tracks line up by construction. The two max-content
   tracks let the time and chip columns size to what is actually on show, so
   a chip set never wraps mid-row; a fixed fraction cannot do that, because a
   chip set measures 161px at the median of San Diego's 748 rows and 262 at
   the 99th. The cells stretch and center their own content: centering them
   in the row instead leaves each at its own height and the rule under a row
   breaks into steps.

   THE ROW IS THE SCHEDULE'S OWN CELL: a time column, then the name, the
   address and the chips stacked beside it, exactly as the table lower on
   the page stacks them. The block now carries the full address and every
   label rather than a street and two labels, and that does not fit across
   four columns at this width: measured at a 870px main column, four
   columns crush the name to 30px and run the block to 482px tall, and
   three columns leave the address 410px, which wraps one row in four and
   splits a Zoom ID across lines. Stacked, every address fits on one line
   in 738px and every row is 80px. */
.soonlist{margin:0;display:grid;grid-template-columns:max-content minmax(0,1fr)}
.soonlist li{display:contents}
.soonlist li[hidden]{display:none}   /* .soonlist li outranks [hidden] */
/* display:block, NOT flex. A flex container drops whitespace-only text
   nodes between its children, and the address cell is inline text wrapped
   around a <span class="m-online">: as flex it rendered "Ave,Online" with
   the space eaten, and the time cell stopped reserving its own width and
   collided with the name. Only the chip cell is a flex container. */
/* EVERY CELL RULE IS SCOPED .soonlist, on purpose. `.soonlist li>*` is
   (0,1,1) and a bare `.soon-when` is (0,1,0), so the shared rule silently
   won and zeroed every padding the cells set: the time ran into the name
   with no gap. Same specificity, source order decides, which is what the
   rules below assume. */
.soonlist li>*{display:block;padding:0;border-bottom:0}
.soonlist .soon-when{grid-row:span 3;padding:14px 22px 14px 0;
  border-bottom:1px solid var(--line-2)}
.soonlist .soon-n{grid-column:2;padding-top:14px}
.soonlist .soon-w{grid-column:2;padding-top:2px}
.soonlist .soon-c{grid-column:2;display:flex;gap:6px;flex-wrap:wrap;
  padding:7px 0 14px;border-bottom:1px solid var(--line-2)}
.soonlist .soon-c:empty{padding-top:0}
.soonlist li:last-child>*{border-bottom:0}
.soon-when{font-family:var(--ff-display);font-size:var(--fs-4);font-weight:700;color:var(--ink);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.soon-n{font-size:var(--fs-4);font-weight:600;color:var(--ink)}
.soon-w{font-size:var(--fs-3);color:var(--ink-3)}
.soon-c{display:flex;gap:6px;flex-wrap:wrap}
.soon-c .chip{margin:0;white-space:nowrap}
/* anything inside the hour gets the accent, because that is the row a reader
   can still act on today */
.soonlist li.now .soon-when{color:var(--accent)}
@media (max-width:860px){
  /* one column: the time becomes the first line of its own row rather than
     a track, because a max-content track plus an address does not fit a
     phone. The chips keep the bottom rule, so the rows still read as rows. */
  .soonlist{grid-template-columns:1fr}
  .soonlist .soon-when{grid-row:auto;grid-column:1;padding:11px 0 0;
    border-bottom:0;font-size:var(--fs-4)}
  .soonlist .soon-n,.soonlist .soon-w,.soonlist .soon-c{grid-column:1}
  .soonlist .soon-n{padding-top:1px}
  .soonlist .soon-c{padding:7px 0 11px}
}
.sb-facts li{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line-2);font-size:var(--fs-4);color:var(--ink-2)}
.sb-facts li:last-child{border-bottom:0}
.sb-facts svg{color:var(--accent);flex:none;margin-top:3px}
/* The builder emits <div><b>label</b><span>value</span></div>. Both are inline,
   so without this the label runs straight into the value: "Pasadena, CA91107".
   Style the shape that is actually emitted, not the one the CSS wishes for. */
.sb-facts li > div{display:flex;flex-direction:column;gap:3px;min-width:0}
.sb-facts b{color:var(--ink);font-weight:600;line-height:1.35}
.sb-facts span{color:var(--ink-2);font-size:var(--fs-3);line-height:1.5}
.sb-m{display:block;font-size:var(--fs-2);color:var(--ink-3);margin-top:2px}

/* the call card sits in the sidebar on interior pages */
.col-side .callcard{padding:26px 24px}
.col-side .cc-h{font-size:var(--fs-7)}
.col-side .cc-num{font-size:var(--fs-7);padding:16px 18px}

/* ---- chips ---- */
/* color is explicit on purpose. A bare .chip used to inherit whatever color
   it landed in, so the same component rendered dark inside a <dd> and pale
   gray inside .fcard-meta. The Services list was the pale one, at 3.06:1
   against white where 4.5:1 is the floor for text this size: the only
   contrast failure on a listing page, and the reason the Services chips
   looked smaller than the Special programs chips sitting beside them. They
   were always the same size. --ink-2 is 6.15:1. The three modifiers below
   each set their own color and still win, being later in the cascade. */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-3);
  font-weight:600;color:var(--ink-2);
  padding:6px 12px;border-radius:var(--r-pill);margin:0 6px 6px 0;width:auto;height:auto}
.chip-accent{background:var(--accent-soft);color:var(--accent-dark)}
.chip-flat{background:var(--line-2);color:var(--ink-2)}
.chip-good{background:var(--good-soft);color:var(--good)}

/* ---- nearby centers: distance rail ----
   Treatment 3 of five, Ryan's pick 2026-09-30. The building glyph repeated
   nine times down the block carried no information and was the most generic
   thing on the facility page. The distance replaces it, because the block's
   own sub-line promises "nearest first" and distance is what the reader is
   sorting on. */
.drows{border-top:1px solid var(--line)}
.drow{
  display:grid;grid-template-columns:76px minmax(0,1fr) 16px;gap:20px;
  align-items:center;padding:18px 4px;border-bottom:1px solid var(--line);
}
.drow:hover{background:var(--accent-faint)}
.drow-d{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--accent-soft);border-radius:var(--r);padding:9px 0;
}
.drow-d b{
  font-family:var(--ff-display);font-size:var(--fs-6);line-height:1;letter-spacing:-.03em;
  color:var(--accent-dark);font-variant-numeric:tabular-nums;
}
.drow-d i{
  font-style:normal;font-size:var(--fs-1);font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent-dark);opacity:.72;margin-top:3px;
}
.drow-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.drow-t{
  font-family:var(--ff-display);font-size:var(--fs-5);font-weight:700;
  letter-spacing:-.02em;color:var(--ink);line-height:1.3;
}
.drow:hover .drow-t{color:var(--accent-dark)}
.drow-c{font-size:var(--fs-3);color:var(--ink-3)}
/* .chip carries its own margin, so the gap here would double the spacing. */
.drow-m{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.drow-m .chip{margin:0}
.drow-go{color:var(--ink-3);transition:transform .14s ease,color .14s ease}
.drow:hover .drow-go{color:var(--accent);transform:translateX(2px)}
@media (max-width:560px){
  .drow{grid-template-columns:62px minmax(0,1fr);gap:14px;padding:16px 2px}
  .drow-go{display:none}
  .drow-d b{font-size:var(--fs-5)}
}

/* ---- checklists and definition lists ---- */
/* The icon doubled to 30px on 2026-10-19. At 15px it top-aligned with a 4px
   nudge, which was right for an icon shorter than the line; a 30px icon is
   taller than the 15px label, so it now centers against it and the nudge is
   gone. Only the rehab listing pages use this list. */
.checklist li{display:flex;gap:11px;align-items:center;padding:9px 0;font-size:var(--fs-4)}
.checklist svg{flex:none}
.ck-yes svg{color:var(--good)}
.ck-no{color:var(--ink-3)}
.ck-no svg{color:var(--ink-3)}
/* Column gap is load bearing. With gap:0 and no horizontal padding on
   either dt or dd, the label column ends exactly where the value begins,
   so any label long enough to fill 190px runs straight into its value.
   That is the "Pasadena, CA91107" defect from 2026-09-29: it was never
   fixed at the cause, it just stopped triggering on the sample record. */
.deflist{display:grid;grid-template-columns:190px minmax(0,1fr);gap:0 22px}
.deflist dt{
  font-size:var(--fs-2);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);padding:15px 0;border-top:1px solid var(--line-2);
}
.deflist dd{margin:0;padding:15px 0;border-top:1px solid var(--line-2);font-size:var(--fs-4);color:var(--ink)}
.deflist dt:first-child,.deflist dt:first-child + dd{border-top:0}
@media (max-width:620px){
  .deflist{grid-template-columns:1fr}
  .deflist dd{padding-top:0;border-top:0}
  .deflist dt{padding-bottom:4px}
}

/* ---- facility cards ---- */
.fcard{
  display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px;
  padding:22px 0;border-top:1px solid var(--line);
}
/* No :first-child exception. It used to read
     .fcard:first-child{border-top:0;padding-top:4px}
   which in a TWO COLUMN grid matches only the left card of row one, so that
   card lost its top rule and 18px of padding while the card beside it kept
   both. On the facility page HealthRIGHT 360 sat higher than Pasadena Council
   and had no rule above it; rows two and three were fine because neither of
   their cards is :first-child, which is what made it read as a one-off glitch
   rather than a rule. Every card now carries its top rule and every row starts
   on one line. Ryan flagged it 2026-09-30. */
.fcard-tile{
  width:56px;height:56px;border-radius:var(--r);background:var(--accent-soft);
  color:var(--accent);display:flex;align-items:center;justify-content:center;
}
.fcard-t{font-family:var(--ff-display);font-size:var(--fs-5);font-weight:700;letter-spacing:-.022em;margin:0 0 5px}
.fcard-t a{color:var(--ink)}
.fcard-t a:hover{color:var(--accent)}
.fcard-addr{font-size:var(--fs-3);color:var(--ink-3);margin:0 0 10px}
.fcard-body{font-size:var(--fs-4);color:var(--ink-2);margin:0 0 10px}
.fcard-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:var(--fs-3);color:var(--ink-3)}

/* ---- meeting schedules ---- */
.daygrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.daycol h3{
  font-family:var(--ff-body);font-size:var(--fs-1);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);padding-bottom:9px;margin-bottom:6px;
  border-bottom:1.5px solid var(--accent);
}
.mtlist li{display:flex;flex-wrap:wrap;gap:4px 10px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:var(--fs-3)}
.mtlist li:last-child{border-bottom:0}
.mt-time{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;flex:none;min-width:72px}
.mt-types{color:var(--ink-3);font-size:var(--fs-3)}
@media (max-width:900px){ .daygrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .daygrid{grid-template-columns:1fr} }

.dayblock{margin-bottom:26px}
.day-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding-bottom:10px;margin-bottom:6px;border-bottom:1.5px solid var(--accent)}
.day-h h3{font-size:var(--fs-5);letter-spacing:-.02em}
.day-n{font-size:var(--fs-2);color:var(--ink-3);font-variant-numeric:tabular-nums}
/* ==========================================================================
   NARROW THIS LIST
   Treatment 4 of five, picked 2026-09-30. Chips on the left, what each one
   means on the right. It is the only treatment that also teaches: a first
   timer does not know what closed or step study is, and the legend defines it
   at the moment they are asked to choose. Only labels this city actually has
   are offered, and only those are defined.

   Everything here is <button>. QA gate 7 fails the build on any input, select,
   form or textarea so the site never looks like it collects anything.
   ========================================================================== */
.mfilter{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.42fr);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--surface);margin:0 0 26px;
}
/* The legend is inert without script: it explains chips that cannot be pressed.
   Both halves are hidden until filter.js marks the block live, so a no-script
   reader gets the schedule with no dead furniture above it. */
.mfilter{display:none}
.mfilter.mf-on{display:grid}
/* The collapse control is a phone affordance. Above the breakpoint the filter
   is always open and this does not exist. */
.mf-toggle{display:none}
.mf-controls{padding:22px 24px}
.mf-h{font-family:var(--ff-display);font-size:var(--fs-6);font-weight:700;
  letter-spacing:-.02em;margin:0 0 3px;color:var(--ink)}
.mf-sub{margin:0 0 18px;font-size:var(--fs-3);color:var(--ink-3)}
.mf-axis{margin:0 0 15px}
.mf-lab{font-size:var(--fs-1);font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 9px}
.mf-tags{display:flex;flex-wrap:wrap;gap:7px}
.mf-pill{
  display:inline-flex;align-items:center;gap:7px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 15px;
  font:600 13.5px/1 var(--ff-body);color:var(--ink);cursor:pointer;
  transition:border-color .13s ease,background .13s ease,color .13s ease;
}
.mf-pill i{font-style:normal;font-size:var(--fs-2);font-weight:600;color:var(--ink-3)}
.mf-pill:hover{border-color:var(--ink-3)}
.mf-pill[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.mf-pill[aria-pressed="true"] i{color:var(--dark-mute)}
.mf-out,.mf-none{margin:19px 0 0;padding-top:15px;border-top:1px solid var(--line-2);
  font-size:var(--fs-4);color:var(--ink-2);display:flex;align-items:center;gap:14px}
.mf-out b{font-family:var(--ff-display);font-size:var(--fs-6);color:var(--ink);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mf-none{color:var(--accent-dark)}
.mf-clear{margin-left:auto;background:none;border:0;padding:6px 2px;cursor:pointer;
  font:600 13.5px/1 var(--ff-body);color:var(--accent-dark);
  border-bottom:1px solid var(--accent-soft)}
.mf-clear:hover{border-bottom-color:var(--accent)}
.mf-legend{padding:22px 24px;background:var(--accent-faint);
  border-left:1px solid var(--accent-soft)}
.mf-legh{display:flex;align-items:center;gap:8px;margin:0 0 15px;font-size:var(--fs-1);
  font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--accent-dark)}
.mf-legh svg{opacity:.7}
.mf-leg{margin:0;max-height:330px;overflow:auto;scroll-padding-top:6px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14px,#000 calc(100% - 16px),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 14px,#000 calc(100% - 16px),transparent 100%)}
.mf-leg dt{font-weight:700;font-size:var(--fs-3);margin:0;color:var(--ink);
  padding:2px 7px;border-radius:var(--r-xs);display:inline-block;scroll-margin-top:10px}
.mf-leg dd{margin:2px 0 13px;font-size:var(--fs-3);line-height:1.55;color:var(--ink-2);padding:0 7px}
.mf-leg dd:last-child{margin-bottom:0}
.mf-leg dt.lit{background:var(--ink);color:#fff}
.mf-leg dd.lit{color:var(--ink)}

/* ==========================================================================
   THE TREATMENT CENTER FILTER RAIL
   A checkbox column beside the results, the way every directory in this niche
   lays this out.

   THE FIRST VERSION OF THIS FAILED ON CONTRAST ALONE. Headings were --ink-3
   (#8B94A1), labels --ink-2, dividers and checkbox borders --line-2
   (#F0F2F5), which is three shades off white. Every one of those is the
   lightest value in the palette, and the result read as a form someone had
   disabled. The structure was right and it still looked broken.

   The hierarchy here is deliberate and goes dark to light exactly once:
     heading   --ink, uppercase, bold        the strongest thing in the group
     label     --ink, regular                reads as a thing you can click
     box       2px --ink-2 border            visible as an empty box
     count     --ink-3                       present, never competing
     rule      --line solid, full width      separates, does not decorate
   A control the reader is meant to USE cannot be quieter than the prose
   beside it.

   The <input> here is not a form. Nothing is named, nothing is submitted,
   there is no <form> element, and QA gate 7 allows exactly this shape and
   still fails everything else.
   ========================================================================== */
/* A 2px ACCENT border, not the --line hairline every other box on the page
   wears. The rail is the one thing in the sidebar the reader is meant to
   operate, and a gray 1px frame gave it exactly as much presence as a static
   list of jump links sitting under it. The reference does the same thing in
   its own brand color and that border is most of why its panel reads as a
   tool rather than as furniture.

   It is the accent at full strength, matching the call button directly above
   it, so the two things in this column that DO something share a color and
   nothing else in the rail has to shout. */
.ffilter{
  border:2px solid var(--accent);border-radius:var(--r-lg);
  background:var(--surface);margin:0 0 18px;overflow:hidden;
}
/* Inert without script: the boxes would tick and nothing would move. Hidden
   until filter.js marks it live, so a no-script reader gets the full list and
   no dead furniture beside it. */
.ffilter{display:none}
.ffilter.mf-on{display:block}
.ff-body{padding:18px 18px 20px}

/* ---- the header: the live count is the loudest thing in the rail -------- */
.ff-head{
  display:flex;align-items:baseline;gap:10px;
  margin:0 0 2px;
}
.ff-h{
  font-family:var(--ff-display);font-size:var(--fs-5);font-weight:700;
  letter-spacing:-.015em;color:var(--ink);margin:0;
}
.ff-clear{
  margin-left:auto;background:none;border:0;padding:2px 0;cursor:pointer;
  font:600 var(--fs-3)/1 var(--ff-body);color:var(--accent);
  border-bottom:1px solid currentColor;
}
.ff-clear:hover{color:var(--accent-dark)}
.ff-out{
  margin:0 0 16px;padding:0 0 15px;border-bottom:1.5px solid var(--ink);
  font-size:var(--fs-3);color:var(--ink-2);
}
.ff-out b{
  font-family:var(--ff-display);font-size:var(--fs-7);font-weight:700;
  color:var(--ink);letter-spacing:-.02em;margin-right:3px;
}
.ff-none{
  margin:0 0 15px;font-size:var(--fs-3);line-height:1.5;color:var(--accent-dark);
  font-weight:600;
}

/* ---- groups ------------------------------------------------------------- */
.ff-group{margin:0 0 17px;padding:0 0 17px;border-bottom:1px solid var(--line)}
.ff-group:last-of-type{margin-bottom:0;padding-bottom:0;border-bottom:0}
.ff-lab{
  font-family:var(--ff-body);
  font-size:var(--fs-2);font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink);margin:0 0 9px;
}
.ff-list{list-style:none;margin:0;padding:0}
/* While a long group is cut short, the rows fade out at the bottom so the
   reader can see the list continues rather than guessing from a link. The
   class comes off when "View all" is pressed. */
.ff-list.ff-cut{
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);
}
.ff-row{display:flex;align-items:flex-start}

/* The box is clipped out of view and drawn on the label, so the box and its
   text are one hit area. A gutter of dead space between a checkbox and its
   words is the classic way to make a filter feel broken. */
.ff-row input{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}
.ff-row label{
  display:flex;align-items:center;gap:10px;width:100%;padding:5px 7px;
  margin:0 -7px;border-radius:5px;cursor:pointer;
  font-size:var(--fs-4);line-height:1.35;color:var(--ink);
}
.ff-row label::before{
  content:"";flex:0 0 auto;width:18px;height:18px;border-radius:3px;
  border:2px solid var(--ink-2);background:#fff;
  transition:background .12s ease,border-color .12s ease;
}
.ff-row label:hover{background:var(--accent-faint)}
.ff-row label:hover::before{border-color:var(--ink)}
.ff-row input:checked + label{font-weight:700}
.ff-row input:checked + label::before{
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M6.2 12.3 2.4 8.5l1.3-1.3 2.5 2.5 6-6 1.3 1.3z'/%3E%3C/svg%3E") center/12px no-repeat;
  border-color:var(--accent);
}
/* Keyboard focus shows on the LABEL, because the box itself is clipped. */
.ff-row input:focus-visible + label{outline:2px solid var(--accent);outline-offset:1px}
/* The text does NOT grow. If it does, it pushes the gloss icon away from the
   word it explains and parks it against the count, where it reads as
   decoration on the number instead of a note on the term. The count is the
   thing that goes to the right edge, by its own auto margin. */
.ff-t{flex:0 1 auto;min-width:0}
/* The gloss icon, only on the groups whose terms are genuinely jargon:
   what inpatient hospital means, what naltrexone is, who CARF are. Putting
   one on all fifty rows would be noise, and "Adult women" explains itself. */
.ff-tip{flex:0 0 auto;display:inline-flex;color:var(--ink-3);cursor:help}
.ff-row label:hover .ff-tip{color:var(--accent)}
.ff-n{
  flex:0 0 auto;margin-left:auto;padding-left:10px;
  font-size:var(--fs-2);font-variant-numeric:tabular-nums;color:var(--ink-3);
}
.ff-row input:checked + label .ff-n{color:var(--accent)}

/* Order is a single choice, so radios and a round mark. */
.ff-sortgroup .ff-row label::before{border-radius:50%}
.ff-sortgroup .ff-row input:checked + label::before{
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Ccircle cx='8' cy='8' r='3.6'/%3E%3C/svg%3E") center/14px no-repeat;
}

/* Reveals the options past the eighth. "Programs for" has 15 and Las Vegas
   would otherwise open with 58 rows down the rail. */
.ff-more{
  display:inline-flex;align-items:center;gap:5px;
  margin:9px 0 0;padding:2px 0;background:none;border:0;cursor:pointer;
  font:700 var(--fs-3)/1 var(--ff-body);color:var(--accent);
}
.ff-more::before{content:"+";font-size:var(--fs-5);line-height:0;font-weight:700}
.ff-more:hover{color:var(--accent-dark);text-decoration:underline}

.ff-toggle{display:none}

@media (max-width:900px){
  /* On a phone the rail stacks above the results, so it collapses to a single
     row and the summary carries the live answer when closed. */
  .ff-toggle{
    display:flex;align-items:center;gap:9px;width:100%;padding:15px 17px;
    background:none;border:0;cursor:pointer;text-align:left;
    font:700 var(--fs-4)/1.2 var(--ff-display);color:var(--ink);
  }
  .ff-toggle svg{margin-left:auto;color:var(--ink-3);transition:transform .16s ease}
  .ff-tsum{font:500 var(--fs-2)/1 var(--ff-body);color:var(--accent-dark)}
  .ffilter.mf-open .ff-toggle svg{transform:rotate(180deg)}
  .ffilter.mf-on .ff-body{display:none}
  .ffilter.mf-on.mf-open .ff-body{display:block;border-top:1px solid var(--line-2)}
  /* Hide only the HEADING, never the row. The row also carries "Clear all",
     and hiding the whole thing took the only way to undo a filter off every
     screen under 900px. The toggle above already says "Narrow this list", so
     the heading is the duplicate, not the button. */
  .ff-h{display:none}
  .ff-head{margin-bottom:10px}
  .ff-clear{margin-left:0}
}
@media (max-width:1040px){
  /* The legend stacks under the chips and keeps a shorter scroll box. Fifteen
     definitions laid out in full put roughly 900px between the reader and the
     first meeting, which is the opposite of the point. Touch has no hover, but
     tapping a chip focuses it and the script scrolls the matching term into
     view and marks it, so a bounded legend still answers "what does closed
     mean" at the moment it is asked. */
  .mfilter.mf-on{grid-template-columns:minmax(0,1fr)}
  .mf-legend{border-left:0;border-top:1px solid var(--accent-soft)}
  .mf-leg{max-height:188px}

  /* Collapsed by default: 62px instead of 1,079px, and the first meeting moves
     from 2,755px up to about 1,740px. The summary keeps the live count on
     screen so filtering and then collapsing does not hide the answer. */
  .mf-toggle{
    display:flex;align-items:center;gap:10px;width:100%;
    background:var(--surface);border:0;padding:19px 20px;cursor:pointer;
    font:700 16px/1 var(--ff-display);letter-spacing:-.02em;color:var(--ink);text-align:left;
  }
  .mf-toggle svg{margin-left:auto;color:var(--ink-3);transition:transform .16s ease}
  .mf-tsum{font:500 13.5px/1 var(--ff-body);color:var(--accent-dark);
    font-variant-numeric:tabular-nums}
  .mfilter.mf-open .mf-toggle svg{transform:rotate(180deg)}
  .mfilter.mf-on .mf-controls,.mfilter.mf-on .mf-legend{display:none}
  .mfilter.mf-on.mf-open .mf-controls{display:block;border-top:1px solid var(--line-2)}
  .mfilter.mf-on.mf-open .mf-legend{display:block}
  .mf-controls{padding-top:18px}
  .mf-h,.mf-sub{display:none}   /* the toggle already says it */
}

.daynav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.daynav a{
  display:inline-flex;align-items:center;gap:7px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 15px;
  font-size:var(--fs-3);font-weight:600;color:var(--ink);
}
.daynav a:hover{border-color:var(--accent);color:var(--accent)}
.dn-c{color:var(--ink-3);font-variant-numeric:tabular-nums;font-weight:500}

.sched{width:100%;border-collapse:collapse}
.sched th{
  text-align:left;font-size:var(--fs-1);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);padding:0 12px 10px 0;border-bottom:1.5px solid var(--accent);
}
.sched td{padding:15px 12px 15px 0;border-bottom:1px solid var(--line-2);vertical-align:top;font-size:var(--fs-4)}
.sched tr:last-child td{border-bottom:0}
/* width:1% is shrink to fit for a table column, not a cap: the browser gives
   these two exactly their content and hands every remaining pixel to the
   meeting column. Without it an auto table spreads the free width evenly and
   the distance value drifts into the middle of the row, which is what widening
   the container exposed. */
.c-time{white-space:nowrap;font-weight:600;font-variant-numeric:tabular-nums;
  width:1%;padding-right:26px}
.c-dist{white-space:nowrap;width:1%;padding-right:26px}
.c-dist{white-space:nowrap;color:var(--ink-3);font-size:var(--fs-3);text-align:right;font-variant-numeric:tabular-nums}
.m-name{display:block;font-weight:600;color:var(--ink)}
.m-where{display:block;font-size:var(--fs-3);color:var(--ink-3);margin-top:2px}
/* Above the stacking breakpoint the meeting cell stops being a stacked block
   and becomes three aligned columns, so a row uses the width the page now has
   instead of leaving ~700px empty beside it. Grid on the CELL, never on the
   table: display:grid on a <table> discards the table layout model, which is
   the defect that put the AA schedule header 346px from its own columns.
   Below the breakpoint nothing applies and the cell stacks exactly as before,
   which is what a phone needs. */
@media (min-width:1041px){
  .c-meet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.1fr);
    gap:0 28px;align-items:baseline}
  .c-meet .m-name{grid-column:1}
  .c-meet .m-where{grid-column:2;margin-top:0}
  .c-meet .m-note{grid-column:2;grid-row:2;margin-top:4px}
  /* spanning both rows, so a two line chip block does not push the note down
     and open a gap beside it. Row heights then come from the text, not the
     chips. */
  .c-meet .m-chips{grid-column:3;grid-row:1/span 2;margin-top:-4px;align-self:start}
}
.m-town{color:var(--ink-2)}
.m-note{display:block;font-size:var(--fs-3);color:var(--ink-2);margin-top:6px}
.m-chips{margin-top:8px}
/* .sched-2col used to set display:grid on the <table> itself, to run the AA
   city schedule in two visual columns and shorten a very long page. Setting
   display:grid on a table discards the table layout model: thead, tbody, tr
   and th all become grid items, so the header row detached from its columns
   and rendered 346px away from them, and the two columns never appeared
   anyway. The meetings ran in one narrow column with the right half empty.
   Removed. The AA city page is long and that is a real problem, but it is a
   layout decision (day tabs, pagination, collapse by day), not something a
   display property on a table can solve. */
@media (max-width:820px){ .c-dist{display:none} }

/* ---- the radius ladder ---- */
.ladder{background:var(--accent-faint);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin:0 0 24px}
.ladder-cap{font-size:var(--fs-3);color:var(--ink-2);margin:0 0 14px}
.ladder-rungs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.rung{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px 8px;text-align:center;
}
.rung-n{display:block;font-family:var(--ff-display);font-size:var(--fs-5);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.rung-l{display:block;font-size:var(--fs-1);color:var(--ink-3);margin-top:3px}
.rung-on{background:var(--accent);border-color:var(--accent)}
.rung-on .rung-n,.rung-on .rung-l{color:var(--accent-ink)}
.rung-none{opacity:.45}
@media (max-width:640px){ .ladder-rungs{grid-template-columns:repeat(3,1fr)} }

/* ---- rolled up nearby places ---- */
.rollup{display:grid;grid-template-columns:repeat(3,1fr);gap:0 24px}
.rollup li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-2);font-size:var(--fs-4)}
.ru-t{color:var(--ink)}
.ru-n{color:var(--ink-3);font-variant-numeric:tabular-nums;font-size:var(--fs-3);flex:none}
@media (max-width:820px){ .rollup{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .rollup{grid-template-columns:1fr} }

/* ---- a place with no page of its own ---- */
.linkgrid li.ll-off{border-bottom:1px solid var(--line)}
.ll-off{display:flex;align-items:baseline;gap:12px;padding:14px 2px;color:var(--ink-3);font-size:var(--fs-4)}
.ll-off .ll-t{flex:1 1 auto}
.ll-foot{margin:20px 0 0;font-size:var(--fs-3);color:var(--ink-3)}

/* ---- long owner copy ---- */
.prose{max-width:72ch;font-size:var(--fs-5);line-height:1.72;color:var(--ink)}
.prose h2{font-size:var(--fs-8);letter-spacing:-.028em;margin:38px 0 14px;scroll-margin-top:100px}
.prose h3{font-size:var(--fs-6);letter-spacing:-.02em;margin:28px 0 10px}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p{margin:0 0 17px;color:var(--ink-2)}
.prose strong{color:var(--ink);font-weight:600}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px;color:var(--ink-2)}
.prose ul li{list-style:disc;margin-bottom:8px}
.prose ol li{list-style:decimal;margin-bottom:8px}
.prose blockquote{margin:24px 0;padding:4px 0 4px 22px;border-left:3px solid var(--accent);color:var(--ink-2);font-style:italic}

/* Images inside the owner's prose. Every one carries width and height, so the
   browser reserves the box before the file arrives and nothing jumps; the
   aspect-ratio pair below keeps that true once width is capped by the column.
   No fixed pixel cap: the measure is the column, in percent. */
.prose figure.pimg{margin:26px 0;max-width:100%}
.prose figure.pimg img{
  display:block;width:100%;height:auto;
  border-radius:var(--r);background:var(--accent-faint)
}
.prose figure.pimg figcaption{margin-top:9px;font-size:var(--fs-3);color:var(--ink-3)}

/* ---- collapsed contents ---- */
.toc{
  background:var(--accent-faint);border:1px solid var(--line);border-radius:var(--r);
  margin:0 0 28px;
}
.toc summary{
  display:flex;align-items:center;gap:11px;padding:15px 18px;cursor:pointer;list-style:none;
  font-size:var(--fs-4);font-weight:600;color:var(--ink);
}
.toc summary::-webkit-details-marker{display:none}
.toc-i{color:var(--accent);display:inline-flex}
.toc-m{margin-left:auto;font-size:var(--fs-2);font-weight:500;color:var(--ink-3)}
.toc-c{color:var(--ink-3);transition:transform .18s ease;display:inline-flex}
.toc[open] .toc-c{transform:rotate(180deg)}
.toc-list{padding:0 18px 16px 40px;columns:2;column-gap:28px}
.toc-list li{margin-bottom:8px;list-style:decimal;font-size:var(--fs-3)}
.toc-list a{color:var(--ink-2)}
.toc-list a:hover{color:var(--accent)}
@media (max-width:620px){ .toc-list{columns:1} }

/* ---- small text utilities the builders use ---- */
.note{font-size:var(--fs-3);color:var(--ink-3);margin:14px 0 0}
.muted{color:var(--ink-3)}
.where{font-size:var(--fs-3);color:var(--ink-3)}
.addr{font-size:var(--fs-4);color:var(--ink-2);margin:0 0 12px}
.artmeta{display:flex;flex-wrap:wrap;gap:14px;font-size:var(--fs-3);color:var(--ink-3);margin:0 0 26px}
.hub{margin-bottom:24px}
.here{font-weight:700;color:var(--accent)}
.legal-verified{display:flex;align-items:center;gap:8px;margin:22px 0 0;font-size:var(--fs-2);color:#7F8794}
/* Was max-width:none. That was safe only while the 1180px container held the
   article column to 660px, which is under the 72ch measure anyway, so the
   override did nothing visible and read as harmless. Once the container
   follows the viewport it became a 125 character line on a 1920 screen. The
   guide body uses the design system's own .prose measure, 72ch, rather than
   a new number, and it is stated in ch so it tracks the font. */
.panel-article .prose{max-width:72ch}

/* ==========================================================================
   WHAT STOPS THE CALL
   Replaces a four step "how it works" strip. A numbered process is the right
   shape for booking a plumber; it is the wrong register for someone deciding
   whether to admit they need help, and it implies the hard part is the
   sequence. The hard part is the hesitation. Deliberately not another grid of
   shadowed white boxes either: quote led, ruled left, so the page rhythm
   changes here instead of repeating the card pattern a fourth time.
   ========================================================================== */
.worries{border-top:1px solid var(--line)}
.worry{
  display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:40px;padding:28px 0;border-bottom:1px solid var(--line);align-items:start;
}
.worry b{
  font-family:var(--ff-display);font-size:var(--fs-6);font-weight:700;letter-spacing:-.025em;
  color:var(--ink);line-height:1.3;
}
.worry p{margin:0;color:var(--ink-2);font-size:var(--fs-4);line-height:1.66;max-width:64ch}
@media (max-width:820px){
  .worry{grid-template-columns:1fr;gap:9px;padding:22px 0}
  .worry b{font-size:var(--fs-5)}
}

/* Accreditation seals on a listing. Ryan's ruling 2026-10-19: seal only, no
   caption.

   NEVER WRAPS. The first version used a fixed width and allowed wrapping,
   which looked right on the two-seal case I happened to test and stacked
   into a column on any facility holding three or four. The seals now share
   whatever width the value column gives them and shrink to fit it, so four
   credentials are four smaller seals on one line.

   flex:1 1 0 with min-width:0 is what lets them shrink below their own
   intrinsic 225px; without min-width:0 a flex item refuses to go under its
   content size and overflows the column instead. max-width stops a facility
   with a single credential from getting one oversized badge, and
   aspect-ratio keeps them square as they shrink, since all four source
   images are square.

   NO BORDER. An earlier version boxed each seal in a hairline border with a
   white fill, which nobody asked for: the brief was seal only. The padding
   stays, so two seals never touch each other.

   120px is the practical ceiling, not an arbitrary pick. The source images
   are 225px square, so at 120 CSS pixels a 2x screen asks for 240 device
   pixels against 225 available and the seal is already at the edge of going
   soft. Larger needs larger source files, not a larger number here. Four
   seals at 120 plus three 8px gaps is 504px against the 536px the value
   column gives, so the row still fits with room to spare. */
.seals{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;margin:2px 0 0}
.seals .seal{flex:1 1 0;min-width:0;max-width:120px;width:auto;height:auto;
  aspect-ratio:1/1;object-fit:contain;box-sizing:border-box;padding:4px}
@media (max-width:820px){
  .seals{gap:6px}
  .seals .seal{max-width:96px}
}

/* Hidden from the eye, NOT from screen reading software. Used on the detox
   and medication checklists, where "offered" and "not offered" were carried
   only by a drawn tick or minus and a gray color, so a listener heard the
   whole list of substances with no idea which ones a center treats.

   display:none and visibility:hidden both remove it from the reader too and
   would achieve nothing. The clip-path plus 1px box below is the version
   that keeps it audible. font-style is reset because the markup uses <i>. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
  font-style:normal}

/* ---- the articles grid -------------------------------------------------
   THE IMAGE IS THE CARD. The first attempt stacked a thumbnail over a white
   box: thin borders, ragged heights, the photography doing no work.

   The card is a FLEX COLUMN, not an absolutely positioned text block over a
   fixed aspect box. That was the second mistake: a long title was taller
   than the card, so it ran out of the top, collided with the category badge
   and was clipped mid word. Here the picture is the background and the type
   is in normal flow at the bottom, so a card can only ever grow. */
.acards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:26px}
.acard{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:340px;overflow:hidden;isolation:isolate;
  border-radius:var(--r-lg);background:var(--ink);
  text-decoration:none;color:#fff;
  transition:transform .18s ease, box-shadow .18s ease;
}
.acard:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(20,26,34,.24)}
.acard-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .4s ease;
}
.acard:hover .acard-img{transform:scale(1.04)}
.acard-noimg{background:linear-gradient(135deg,var(--ink) 0%,var(--accent-dark,#8a5214) 100%)}
/* Two stops, not one: a single fade leaves white type on a pale sky. The
   lower half is near solid so the title always has something to sit on. */
.acard-grad{
  position:absolute;inset:0;
  background:linear-gradient(to top,
    rgba(10,14,20,.94) 0%, rgba(10,14,20,.86) 30%,
    rgba(10,14,20,.38) 62%, rgba(10,14,20,.05) 100%);
}
.acard-cat{
  position:absolute;top:0;left:0;z-index:3;
  background:var(--accent);color:var(--accent-ink,#fff);
  font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:7px 13px;border-bottom-right-radius:10px;
}
.acard-b{
  position:relative;z-index:2;
  display:flex;flex-direction:column;gap:8px;padding:22px 22px 24px;
}
.acard-d{font-size:12.5px;color:rgba(255,255,255,.78);font-weight:500}
.acard-t{
  font-size:21px;line-height:1.24;font-weight:700;color:#fff;text-wrap:balance;
}
.acard-x{
  font-size:14px;line-height:1.5;color:rgba(255,255,255,.82);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
/* The post's own featured image, above its copy. */
.phero{margin:0 0 26px}
.phero img{display:block;width:100%;height:auto;border-radius:var(--r-lg)}
@media (max-width:980px){ .acards{grid-template-columns:1fr 1fr;gap:18px} }
@media (max-width:640px){ .acards{grid-template-columns:1fr} .acard{min-height:300px} }



/* A hub index needs air above it; the rows are the only structure. */
.subs{margin-top:30px}