/* Ya Estoy Aquí — shared styles for the Care & Support directory pages.
   Extracted verbatim from guide-map.html (2026-07-16) so guide-map.html (Find Care &
   Support) and directory.html (General Directory) share one stylesheet that cannot
   drift apart. Includes the base page chrome (header, sidebar, language toggle),
   journey-strip styles, doors, the full directory UI, hours disclosures, and the
   Community Stories card actions. */
  @font-face{
    font-family:'Movement';
    /* Relative to THIS stylesheet (assets/css/), not the page — 'assets/fonts/…'
       here resolved to assets/css/assets/fonts/… and 404'd, so Movement silently
       fell back to system-ui on every page using this shared stylesheet. */
    src:url('../fonts/Movement-DirectBlack.otf') format('opentype');
    font-weight:400;
    font-style:normal;
    font-display:swap;
  }
  :root{
    color-scheme: light only;
    --lime:#BAE801; --lime-deep:#8FB400; --purple-deep:#9768AC; --purple-fill:#8F5FAC;
    --lavender:#CAB4DA; --ink:#221E1F; --paper:#FFFFFF;
    --display:'Movement', system-ui, sans-serif; --body:'Montserrat', system-ui, sans-serif;
  }
  *{box-sizing:border-box;}
  body{margin:0;font-family:var(--body);color:var(--ink);background:var(--lavender);line-height:1.55;}
  /* Form controls don't inherit the page font by default; without this, plain
     buttons (e.g. the View-hours toggle) render in the browser UI font. */
  button,input,select,textarea{font-family:inherit;}
  /* Text links use --purple-fill (an existing approved brand token) rather than
     --purple-deep: on white/paper, --purple-deep measures 4.29:1 (below WCAG AA 4.5:1
     for body text), while --purple-fill measures 4.77:1 and passes. No new colour is
     introduced. --purple-deep is retained for focus outlines, where the 3:1 non-text
     criterion is met. (Site-wide, index.html/guide pages use --purple-deep for their
     own links and should be reconciled in the shared design system -- see report.) */
  a{color:var(--purple-fill);}
  a:focus-visible, button:focus-visible, summary:focus-visible{outline:3px solid var(--purple-deep);outline-offset:3px;border-radius:2px;}
  .wrap{max-width:560px;margin:0 auto;padding:0 24px;}

  header.top{padding:20px 32px;display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid var(--ink);background:var(--paper);}
  .site-logo-link{display:inline-flex;align-items:center;flex-shrink:0;}
  .site-logo{height:68px;width:auto;display:block;flex-shrink:0;}
  nav.top-links{display:flex;flex-wrap:wrap;row-gap:6px;gap:20px;font-size:14px;font-weight:700;}
  nav.top-links a{color:var(--ink);text-decoration:none;}
  nav.top-links a.current{color:var(--purple-deep);}
  @media (max-width:560px){ nav.top-links{display:none;} }
  @media (max-width:430px){
    header.top{padding:20px 32px;gap:6px;}
    .site-logo{height:53px;}
    .lang-btn{padding:6px 8px;font-size:11px;min-height:36px;display:inline-flex;align-items:center;}
    .lang-toggle{flex-shrink:0;}
    .menu-btn{width:38px;height:38px;}
  }

  .page-hero{background:#fff;text-align:center;}
  .page-hero-text{padding:32px 24px 4px;}
  .page-hero-image{display:block;width:100%;max-width:none;margin:0 auto;height:auto;opacity:1;filter:none;mix-blend-mode:normal;vertical-align:bottom;}
  .eyebrow{font-weight:700;font-size:13px;letter-spacing:0.12em;text-transform:uppercase;color:var(--purple-deep);margin:0 0 10px;}
  h1.page-title{font-family:var(--display);font-size:clamp(40px,9vw,72px);margin:0 0 12px;color:var(--purple-deep);line-height:0.95;}
  .page-sub{font-size:15px;margin:0;color:var(--ink);}
  .page-content{background:var(--lavender);padding:48px 24px 72px;}
  main.wrap{max-width:760px;margin:0 auto;background:transparent;padding:0;}

  footer{margin-top:60px;border-top:3px solid var(--ink);padding:32px 24px 40px;font-size:13.5px;color:#3a3636;background:var(--paper);}
  footer .foot-wrap{max-width:920px;margin:0 auto;display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;}
  footer h3{font-family:var(--display);font-size:16px;margin:0 0 6px;}
  footer a{color:var(--ink);font-weight:700;text-decoration:none;}
  footer a:hover{color:var(--purple-deep);}
  footer .license{max-width:920px;margin-top:20px;font-size:12px;color:#767676;border-top:1px solid #e4e4e4;padding-top:16px;}
  footer .footer-note{max-width:920px;margin-top:12px;font-size:12px;color:#767676;}

  .sidebar-lang{
    margin-top:18px;
    padding-top:14px;
    border-top:1px solid #e4ddc9;
  }
  .sidebar-lang-label{
    font-size:11px;
    font-weight:700;
    color:#767676;
    text-transform:uppercase;
    letter-spacing:0.04em;
    margin-bottom:6px;
  }
  .translateWidget{font-family:var(--body);font-size:11px;}
  .translateWidget
  .translateWidget
  .skiptranslate iframe{display:none!important;}
  body{top:0!important;}

  /* ---------- Mobile menu button + sidebar ---------- */
  .menu-btn{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:38px;height:38px;
    border:none;
    background:none;
    cursor:pointer;
    padding:0;
  }
  .menu-btn span{
    display:block;
    height:3px;
    width:26px;
    background:var(--ink);
    border-radius:2px;
  }
  @media (max-width:560px){ .menu-btn{display:flex;} }

  .sidebar-overlay{
    position:fixed; inset:0;
    background:rgba(34,30,31,0.45);
    opacity:0;
    pointer-events:none;
    transition:opacity 0.2s ease;
    z-index:40;
  }
  .sidebar-overlay.open{opacity:1;pointer-events:auto;}

  /* A CLOSED DRAWER IS HIDDEN, NOT MERELY PARKED OFF-SCREEN (2026-09-10).
     `transform:translateX(-100%)` moves the panel out of view but leaves it PAINTED,
     FOCUSABLE and EXPOSED TO ASSISTIVE TECHNOLOGY. Two real defects followed:

       1. Its own contents overflowed it. The panel is 78% of the viewport (249.6px at
          320px) and `.sidebar nav a` is 21px display type with `overflow:visible`, so at
          an enlarged text size the link text outgrew its box and painted back INTO the
          page — measured at +133px past the left edge under a CSS text-enlargement
          simulation and +227px under Chromium's own minimum-font-size setting, on top of
          the directory cards. Reproduced on this commit before this change.
       2. Every link in it stayed in the tab order and in the accessibility tree while
          closed, so a keyboard or screen-reader user walked an invisible menu before
          reaching the page.

     `visibility:hidden` fixes both with one property: a hidden subtree is not painted
     (so it cannot overflow onto anything), is not focusable, and is not exposed to
     assistive technology. `display:none` would also do it but would destroy the slide
     animation; clipping alone (`overflow:hidden`) would fix only the first defect and
     leave the invisible menu in the tab order, which is the worse of the two.

     THE ANIMATION IS PRESERVED EXACTLY. `visibility` is not an animatable property, so it
     is stepped rather than eased: on OPEN it flips to visible immediately (`0s` delay) and
     the 0.25s transform slide runs as before; on CLOSE the flip to hidden is DELAYED by
     0.25s so the panel stays visible for the whole slide-out and only then goes inert.
     Nothing about the timing, easing, geometry, colour or type changes. */
  .sidebar{
    position:fixed;
    top:0; left:0;
    height:100%;
    width:78%;
    max-width:300px;
    background:var(--paper);
    border-right:3px solid var(--ink);
    z-index:50;
    transform:translateX(-100%);
    visibility:hidden;
    transition:transform 0.25s ease, visibility 0s linear 0.25s;
    display:flex;
    flex-direction:column;
    padding:22px 22px 28px;
    /* the drawer scrolls; it does not hand the scroll to the page behind it */
    overflow-y:auto; overscroll-behavior:contain;
  }
  .sidebar.open{transform:translateX(0);visibility:visible;transition:transform 0.25s ease, visibility 0s linear 0s;}
  .sidebar-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;
  }
  .sidebar-head img{height:30px;width:auto;}
  .sidebar-close{
    width:34px;height:34px;
    border:2px solid var(--ink);
    border-radius:50%;
    background:none;
    font-size:18px;
    line-height:1;
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
  }
  .sidebar nav{display:flex;flex-direction:column;gap:4px;}
  .sidebar nav a{
    font-family:var(--display);
    font-size:21px;
    color:var(--ink);
    text-decoration:none;
    padding:12px 10px;
    border-radius:10px;
    display:flex;
    align-items:center;
    gap:12px;
  }
  .sidebar nav a:hover{background:#f3efe3;}
  .sidebar nav a.current{color:var(--purple-deep);background:var(--lavender);}
  .sidebar nav a .dot{
    width:9px;height:9px;border-radius:50%;
    background:var(--lime);
    flex:0 0 auto;
  }
  .sidebar nav a.current .dot{background:var(--purple-deep);}
  .sidebar-foot{
    margin-top:auto;
    padding-top:20px;
    border-top:1px solid #e4ddc9;
    font-size:13px;
    color:#555;
  }
  .sidebar-foot a{color:var(--purple-deep);font-weight:700;text-decoration:none;}


  /* ---------- Language toggle ---------- */
  .lang-toggle{
    display:flex;
    border:2px solid var(--ink);
    border-radius:20px;
    overflow:hidden;
    flex:0 0 auto;
  }
  .lang-btn{
    border:none;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--body);
    font-weight:700;
    font-size:12px;
    padding:5px 10px;
    cursor:pointer;
    letter-spacing:0.02em;
  }
  .lang-btn.active{background:var(--ink);color:var(--paper);}
  .lang-btn:not(.active):hover{background:#f3efe3;}
  .lang-btn:disabled{cursor:not-allowed;opacity:.45;}

  /* ---------- Skip link ---------- */
  .skip-link{
    position:absolute;
    left:-999px;
    top:auto;
    background:var(--ink);
    color:var(--paper);
    padding:10px 16px;
    border-radius:0 0 8px 0;
    font-weight:700;
    font-size:13px;
    z-index:100;
    text-decoration:none;
  }
  .skip-link:focus{left:0;top:0;}

/* ===== Ya Estoy Aquí — Pregnancy Guide (full-bleed illustrated journey) ===== */
:root{
  --punk-pink:#E84D8A; --punk-cyan:#3EC1C9; --punk-orange:#F5A623;
  --route-w:10px;
}
body{background:
    linear-gradient(color-mix(in srgb,var(--ink) 5%,transparent) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg,color-mix(in srgb,var(--ink) 5%,transparent) 1px,transparent 1px) 0 0/28px 28px,
    var(--paper);}
/* the grid reads as graph-paper / map-grid; solid-colour bands (key-band, faq-zone, etc.) sit opaquely on top of it */
main#main{overflow-x:hidden;}
/* full-bleed sections with readable inner measure */
.bleed{width:100%;}
.inner{max-width:1060px;margin:0 auto;padding:0 24px;}
.inner-text{max-width:760px;margin:0 auto;padding:0 24px;}

/* ---- special-edition cover: zine / riso / poster masthead ---- */
.cover{position:relative;background:var(--paper);border-bottom:5px solid var(--ink);overflow:hidden;
  padding:clamp(28px,4vw,48px) 0 clamp(44px,6vw,72px);}
.cover::before{content:"";position:absolute;inset:0;
  background:url('../map-hatch-toronto.png') center/cover no-repeat;opacity:.15;pointer-events:none;}
.cover-planes{position:absolute;inset:0;pointer-events:none;}
.plane{position:absolute;mix-blend-mode:multiply;}
.plane-pink{background:var(--punk-pink);width:64%;height:58%;right:-10%;top:-8%;transform:rotate(-7deg);opacity:.9;}
.plane-cyan{background:var(--punk-cyan);width:46%;height:44%;left:-8%;bottom:-10%;transform:rotate(5deg);opacity:.85;}
.cover-in{position:relative;display:flex;flex-direction:column;}
.masthead-row{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);padding:10px 2px;margin-bottom:clamp(22px,4vw,44px);}
.masthead-presents{font-weight:700;font-size:clamp(12px,1.6vw,15px);letter-spacing:.14em;text-transform:uppercase;}
.masthead-meta{font-weight:700;font-size:clamp(10px,1.3vw,13px);letter-spacing:.1em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);padding:5px 12px;transform:rotate(-.8deg);}
.cover-title{font-family:var(--display);line-height:.88;margin:0 0 clamp(20px,3vw,36px);display:flex;flex-direction:column;}
.ct{font-size:clamp(40px,8vw,104px);letter-spacing:.01em;}
.ct-outline{color:var(--paper);-webkit-text-stroke:3px var(--ink);text-stroke:3px var(--ink);
  text-shadow:5px 5px 0 rgba(34,30,31,.18);}
.ct-hilite em{font-style:normal;background:var(--lime);box-shadow:.14em 0 0 var(--lime),-.06em 0 0 var(--lime);
  display:inline;transform:rotate(-.5deg);}
.ct-hilite{transform:rotate(-.6deg);margin:.14em 0 .04em;}
.ct-solid{color:var(--ink);}
.cover-logos{display:flex;align-items:center;gap:0;margin:0 0 clamp(20px,3vw,34px);flex-wrap:wrap;}
.sticker{display:inline-block;background:var(--paper);border:3px solid var(--ink);padding:14px 20px;position:relative;
  box-shadow:6px 6px 0 rgba(34,30,31,.28);transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease;
  text-decoration:none;cursor:pointer;}
.sticker img{display:block;height:clamp(36px,4.6vw,54px);width:auto;}
.sticker-yea{transform:rotate(-2.4deg);z-index:2;}
.sticker-soli{transform:rotate(1.8deg);margin-left:-22px;margin-top:26px;z-index:1;}
/* each logo card animates independently on its own hover/focus, never as a combined group */
.sticker-yea:hover,.sticker-yea:focus-visible{transform:rotate(-5deg) translateY(-6px) scale(1.03);box-shadow:9px 9px 0 rgba(34,30,31,.32);z-index:3;}
.sticker-soli:hover,.sticker-soli:focus-visible{transform:rotate(4deg) translateY(-4px) scale(1.03);box-shadow:9px 9px 0 rgba(34,30,31,.32);z-index:3;}
.sticker:focus-visible{outline:3px solid var(--purple-deep);outline-offset:4px;}
@media(hover:none){
  .sticker-yea:hover{transform:rotate(-2.4deg);box-shadow:6px 6px 0 rgba(34,30,31,.28);}
  .sticker-soli:hover{transform:rotate(1.8deg);box-shadow:6px 6px 0 rgba(34,30,31,.28);}
}
/* tape: fully opaque solid colour, no transparency or texture bleed-through */
.tape{position:absolute;top:-12px;left:18px;width:64px;height:20px;background:var(--punk-orange);
  border:2px solid var(--ink);transform:rotate(-4deg);}
.tape-b{left:auto;right:14px;background:var(--punk-cyan);transform:rotate(5deg);}
.cover-subtitle{font-size:clamp(16px,2.2vw,21px);font-weight:700;
  width:fit-content;max-width:min(44ch,100%);margin:0 0 22px;box-sizing:border-box;
  background:var(--ink);color:var(--paper);display:block;padding:8px 14px;line-height:1.5;}
.cover-title{margin-bottom:clamp(14px,2vw,22px);}
.ct-line1{font-size:clamp(34px,6.6vw,86px);}
@media(min-width:700px){.ct{white-space:nowrap;}}
.cover-lede{font-size:clamp(18px,2.6vw,24px);font-weight:600;line-height:1.5;max-width:36ch;
  background:var(--paper);border-left:8px solid var(--ink);padding:12px 18px;margin:0 0 26px;
  box-shadow:5px 5px 0 rgba(34,30,31,.15);}
.cover-cue{align-self:flex-start;font-family:var(--display);font-size:clamp(18px,2.4vw,24px);color:var(--ink);
  text-decoration:none;background:var(--lime);border:3px solid var(--ink);padding:12px 22px;transform:rotate(-1deg);
  box-shadow:5px 5px 0 var(--ink);transition:transform .12s;}
.cover-cue:hover,.cover-cue:focus-visible{transform:rotate(0) translateY(-2px);}
@media(max-width:640px){
  .plane-pink{width:90%;height:34%;}
  .sticker-soli{margin-left:-14px;}
}
.intro-note{padding:40px 0 34px;border-bottom:0;}
.hello-body{font-size:17px;line-height:1.75;max-width:58ch;}
.hero-note{display:inline-block;margin-top:14px;font-weight:700;font-size:15px;border:3px solid var(--ink);
  background:var(--lime);padding:10px 16px;transform:rotate(.5deg);box-shadow:5px 5px 0 var(--ink);}

/* ---- the journey: a drawn route with stops ---- */
.journey{position:relative;padding:64px 0 90px;background:
  linear-gradient(rgba(255,255,255,.94),rgba(255,255,255,.9)),
  url('../map-hatch-toronto.png') center/1400px repeat;}
.journey-head{margin:0 0 8px;}
.stack-title{font-family:var(--display);font-size:clamp(30px,5vw,48px);margin:0;}
.journey-sub{font-size:16px;font-weight:600;max-width:52ch;margin:10px 0 40px;}

.jband{display:flex;align-items:center;gap:clamp(16px,3vw,34px);background:var(--band);color:var(--band-text);
  text-decoration:none;border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);
  padding:clamp(22px,4vw,40px) 0;position:relative;transition:filter .15s;}
.jband .inner{display:flex;align-items:center;gap:clamp(16px,3vw,34px);width:100%;}
.jband:hover .band-name,.jband:focus-visible .band-name{text-decoration:underline;text-decoration-thickness:5px;text-underline-offset:6px;}
.jband:hover .band-illus,.jband:focus-visible .band-illus{transform:rotate(0) scale(1.08);}
.badge{flex:0 0 auto;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--ink);color:var(--paper);font-family:var(--display);font-size:24px;border:3px solid var(--paper);
  box-shadow:0 0 0 3px var(--ink);}
.band-body{flex:1 1 auto;display:flex;flex-direction:column;gap:5px;}
.band-name{font-family:var(--display);font-size:clamp(34px,6vw,58px);line-height:1;letter-spacing:.5px;}
.band-tag{font-weight:600;font-size:clamp(14px,1.8vw,17px);}
.band-illus{flex:0 0 auto;width:clamp(70px,10vw,110px);height:clamp(70px,10vw,110px);transform:rotate(3deg);transition:transform .15s;}
.soon-chip{display:inline-block;vertical-align:middle;font-family:var(--body);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;background:var(--ink);color:var(--paper);padding:3px 8px;margin-left:10px;}
.jband-connect{filter:saturate(.15);}
.jband-connect:hover{filter:saturate(.5);}

/* route connectors: drawn lines between stops */
.route-seg{display:block;width:100%;height:64px;position:relative;}
.route-seg svg{position:absolute;inset:0;width:100%;height:100%;}
.route-seg path{stroke:var(--ink);stroke-width:7;fill:none;stroke-linecap:round;}
.route-dashed path{stroke-dasharray:2 14;}

/* fork trio: three parallel full-height bands sharing the row */
.fork-row{display:grid;grid-template-columns:repeat(3,1fr);border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);}
.fork-row .jband{flex-direction:column;text-align:center;border:none;padding:clamp(24px,4vw,44px) 18px;gap:14px;}
.fork-row .jband + .jband{border-left:4px solid var(--ink);}
.fork-row .jband .inner{flex-direction:column;padding:0;}
.fork-row .band-name{font-size:clamp(30px,4.5vw,50px);}
@media(max-width:700px){
  .fork-row{grid-template-columns:1fr;}
  .fork-row .jband{flex-direction:row;text-align:left;border-left:none;}
  .fork-row .jband + .jband{border-left:none;border-top:4px dashed var(--ink);}
  .fork-row .jband .inner{flex-direction:row;padding:0 24px;}
}

/* denied: hangs off the route on a dashed line */
.jband-denied{border-top-style:dashed;border-bottom-style:dashed;}

/* ---- journey strip: persistent map of stops on every panel page ---- */
.jstrip{background:var(--paper);border-bottom:4px solid var(--ink);padding:14px 0 10px;position:relative;}
/* One continuous horizontal route at every width. The strip's own inner container is allowed
   to run wider than the site's usual 1060px content column (this is the one place that
   convention is relaxed) so the full 8-stop line has room to fit without wrapping on ordinary
   desktop screens, in both languages.
   Two-level scroll structure, deliberately: .jstrip-track is the actual overflow-x:auto viewport
   (a normal flex child that's allowed to shrink -- flex:1 1 auto + min-width:0). Inside it,
   .jstrip-line is sized with width:max-content, so it always measures out to exactly the width
   its content actually needs and can never be squeezed by flexbox the way a single combined
   element could. That guarantees .jstrip-track reliably ends up narrower than its content and
   therefore reliably scrolls, instead of both of them fighting over shrink/grow and the excess
   silently spilling past the strip with no scrollbar at all. */
/* Centring: the whole visible composition (journey label + START + connectors +
   CALL/TALK/ASK frame + later stages) is sized to its own content and centred as ONE
   unit with margin:0 auto — identical logic in every language, no per-language offsets.
   When the line is wider than min(1320px, viewport) the inner box caps there and
   .jstrip-track scrolls horizontally as before. */
.jstrip .inner{display:flex;align-items:center;gap:14px;width:max-content;max-width:min(1320px,100%);box-sizing:border-box;margin:0 auto;padding:0 24px;}
.jstrip-lbl{flex:0 0 auto;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  display:inline-flex;align-items:center;min-height:38px;}
.jstrip-track{flex:1 1 auto;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;padding-bottom:6px;position:relative;
  scroll-behavior:smooth;scroll-padding-inline:24px;}
.jstrip-line{display:flex;align-items:center;gap:8px;width:max-content;min-width:max-content;}
/* Subtle "more this way" fade, shown only while a script has detected real overflow (see the
   is-scrollable class toggle) -- so wide screens where everything already fits show no cue. */
.jstrip-track::before,.jstrip-track::after{content:"";position:absolute;top:0;bottom:6px;width:26px;
  pointer-events:none;z-index:2;opacity:0;transition:opacity .15s;}
.jstrip-track.is-scrollable::before,.jstrip-track.is-scrollable::after{opacity:1;}
.jstrip-track:focus-visible{outline:3px solid var(--purple-deep);outline-offset:-2px;}
.jstrip-track::before{left:0;background:linear-gradient(90deg,var(--paper) 0%,transparent 100%);}
.jstrip-track::after{right:0;background:linear-gradient(270deg,var(--paper) 0%,transparent 100%);}
.jstop{flex:0 0 auto;display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink);
  font-weight:700;font-size:clamp(11px,1.1vw,12px);padding:8px 10px;border:3px solid transparent;
  min-height:38px;box-sizing:border-box;white-space:nowrap;scroll-margin-inline:32px;}
.jstop .dotc{width:22px;height:22px;border-radius:50%;background:var(--c);border:3px solid var(--ink);
  display:grid;place-items:center;font-family:var(--display);font-size:11px;color:var(--ink);flex:0 0 auto;}
.jstop.dark .dotc{color:var(--paper);}
.jstop:hover,.jstop:focus-visible{border-color:var(--ink);background:color-mix(in srgb,var(--c) 25%,white);}
.jstop.here{border-color:var(--ink);background:var(--c);box-shadow:3px 3px 0 var(--ink);position:relative;z-index:1;}
.jstop.here.dark{color:var(--paper);}
.jlink{flex:0 0 auto;height:4px;width:16px;background:var(--ink);align-self:center;}
/* Parallel-options cluster (CALL/TALK/ASK): one dashed outer frame around all three, restored to
   the original full-strength treatment. Each stop inside keeps its own independent hover/active
   state; the frame itself never carries .here and never fills, so the two states -- "these three
   are grouped" and "this one is where you are" -- stay visually distinct rather than competing.
   scroll-margin-inline keeps the whole frame (not just the active stop) clear of the fade edges
   when it's the one being scrolled into view. */
.jgroup{flex:0 0 auto;display:flex;align-items:center;gap:2px;padding:4px 6px;
  border:3px dashed var(--ink);scroll-margin-inline:32px;}
.jgroup .jstop{padding:6px 8px;}
/* Journey connector stability (2026-07-16): ONE continuous route line drawn
   behind the whole strip, independent of every translated label's width - the
   old per-gap .jlink segments stay (same colour, same 4px centre line, they
   now simply overlap the continuous line) but the line can no longer fragment
   into disconnected blocks when French/Portuguese labels stretch the stops.
   Stops, the dashed CALL/TALK/ASK frame, and the Find Care & Support button
   sit above the line on their own paper background, so icons and labels are
   never struck through. Hover/active backgrounds keep working: they carry
   higher specificity than the plain element rules below. */
.jstrip-line{position:relative;}
.jstrip-line::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;
  margin-top:-2px;background:var(--ink);}
.jstop{position:relative;z-index:1;background:var(--paper);}
.jgroup{position:relative;z-index:1;background:var(--paper);}


@media(max-width:560px){
  .jstrip .inner{gap:10px;padding:0 20px;}
}


/* ---- panel pages: full-bleed sections ---- */
.crumb{padding:16px 0 0;}
.crumb a{font-weight:700;color:var(--ink);text-decoration:none;border-bottom:3px solid var(--band);}
.poster-bar{background:var(--ink);margin-top:12px;position:relative;overflow:hidden;}
.poster-bar::after{content:"";position:absolute;inset:0;background:url('../map-hatch-toronto.png') center/900px repeat;
  opacity:.16;mix-blend-mode:screen;pointer-events:none;}
.poster-in{display:flex;align-items:center;gap:24px;padding:clamp(28px,5vw,54px) 24px;position:relative;z-index:1;}
.poster-bar h1{font-family:var(--display);color:var(--paper);font-size:clamp(54px,11vw,120px);margin:0;line-height:.92;
  text-shadow:6px 6px 0 var(--band);}
@media (max-width:500px){
  /* Longer headings (e.g. GENERAL DIRECTORY) push the 54px floor close enough
     to the poster-bar's clipped edge that text gets cut off. Widened from the
     original 400px cutoff and lowered from the clamp(38px,13vw,54px) formula
     (which only reduced to ~51px at 390px width, not enough) to a flat 40px
     floor, matching the fix applied to the same pattern in the guide-*.html
     pages' own inline styles. */
  .poster-bar h1{font-size:clamp(28px,9vw,120px);}
}
.poster-illus{margin-left:auto;width:clamp(72px,11vw,130px);height:clamp(72px,11vw,130px);}
.badge.big{width:64px;height:64px;font-size:30px;background:var(--paper);color:var(--ink);box-shadow:0 0 0 3px var(--paper);}

.quote-band{background:color-mix(in srgb,var(--band) 30%,white);border-bottom:4px solid var(--ink);padding:30px 0 34px;position:relative;}
.quote-band::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(color-mix(in srgb,var(--ink) 22%,transparent) 1px,transparent 1.3px);
  background-size:8px 8px;opacity:.3;}
.quote-band .inner-text{position:relative;z-index:1;}
/* ---- quote treatment: a clipped scrap of testimony taped into the margin — not a polished pull-quote.
   The torn-card shape lives on ::before (not the element itself) so the tape/label can overhang the
   edges without being clipped. ---- */
.quote-note{position:relative;display:inline-block;max-width:54ch;
  padding:20px 22px 18px 20px;transform:rotate(-1deg);}
.quote-note::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);
  border:2px solid var(--ink);border-left:6px solid var(--band);
  box-shadow:4px 4px 0 var(--ink);
  clip-path:polygon(0% 0%,93% 0%,100% 9%,99% 89%,86% 100%,0% 100%);}
.quote-label{position:absolute;top:-13px;left:16px;color:var(--paper);
  background:var(--band);opacity:.82;mix-blend-mode:multiply;
  font-family:var(--display);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  padding:3px 10px 4px;transform:rotate(-2deg);white-space:nowrap;z-index:2;
  width:94.39px;height:24.05px;}
/* the sticker is now an empty decorative shape, painted like the panel's own tape (.quote-tape);
   it keeps the exact size each language's words used to give it */
.quote-label:lang(es),.quote-label:lang(pt){width:126.88px;}
.quote-label:lang(fr){width:134.89px;}
.quote-tape{position:absolute;top:-13px;right:18px;width:60px;height:20px;
  background:var(--band);opacity:.82;mix-blend-mode:multiply;
  border:1px solid color-mix(in srgb,var(--ink) 55%,transparent);transform:rotate(4deg);z-index:1;}
.panel-quote{font-size:clamp(17px,2.7vw,22px);font-weight:600;font-style:normal;margin:0;
  line-height:1.45;color:var(--ink);position:relative;z-index:1;}
.panel-quote::before{content:"\201C";font-family:var(--display);font-weight:400;margin-right:1px;
  color:color-mix(in srgb,var(--band) 65%,var(--ink));}
.panel-quote::after{content:"\201D";font-family:var(--display);font-weight:400;margin-left:1px;
  color:color-mix(in srgb,var(--band) 65%,var(--ink));}
/* one shared quote component, same size/padding/scale on every panel page — no per-page modifier */
@media(max-width:480px){
  .quote-note{padding:18px 18px 16px 16px;max-width:100%;}
  .quote-note::before{border-left-width:5px;}
  .quote-label{font-size:10px;padding:2px 8px 3px;top:-11px;left:12px;width:83.63px;height:20.5px;}
  .quote-label:lang(es),.quote-label:lang(pt){width:113.16px;}
  .quote-label:lang(fr){width:120.45px;}
  .quote-tape{width:48px;height:16px;top:-10px;right:12px;}
}

/* ---- reusable "field note" figure slot for optional photos (see guide-start.html image hooks) ---- */
.panel-figure{margin:22px 0;border:3px solid var(--ink);background:var(--paper);padding:10px 10px 12px;
  box-shadow:5px 5px 0 rgba(34,30,31,.22);transform:rotate(-.5deg);max-width:420px;}
.panel-figure img{display:block;width:100%;height:auto;border:1px solid var(--ink);}
.panel-figure figcaption{font-size:12.5px;font-weight:600;margin-top:8px;color:#4a4547;line-height:1.5;}

.key-band{background:var(--band);border-bottom:4px solid var(--ink);padding:34px 0;}
.key-band .inner-text{display:flex;flex-direction:column;}
.key-title{font-family:var(--display);font-size:clamp(24px,3.4vw,32px);margin:0 0 14px;color:var(--band-text);}
.key-list{margin:0;padding:0;list-style:none;color:var(--band-text);}
/* A link inside a colour band takes the band's own text colour. --band and
   --band-text are set per panel and are already chosen to pair, so no single
   link colour can stay legible across all eight bands: on the ink band
   (--band:#221E1F) the shared link purple measures 3.46:1, while --band-text
   measures 16.49:1. Underlined so the link is never signalled by colour
   alone (WCAG 1.4.1). Added 2026-08-31. */
.key-band a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
/* Its print counterpart lives at the END of this file, not here: the starter
   print regression test reads the FIRST @media print block in this stylesheet,
   so nothing may introduce one above the starter block. */
.key-list li{position:relative;padding:8px 0 8px 38px;font-weight:600;font-size:clamp(15px,2vw,18px);}
.key-list li::before{content:"✓";position:absolute;left:0;top:6px;font-family:var(--display);
  background:var(--ink);color:var(--paper);width:26px;height:26px;display:grid;place-items:center;font-size:15px;
  transform:rotate(-5deg);}

.panel-body{font-size:16.5px;line-height:1.75;padding:38px 0 8px;}
.panel-intro p:first-child{font-size:18px;font-weight:500;}
.hatch-divider{height:46px;background:url('../map-hatch-toronto.png') center/700px repeat;opacity:.5;
  border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);margin:40px 0 0;}
.faq-zone{background:linear-gradient(rgba(255,255,255,.93),rgba(255,255,255,.93)),
  url('../map-hatch-toronto.png') center/1100px repeat;padding:44px 0 52px;border-bottom:4px solid var(--ink);}
.sec-h{font-family:var(--display);font-size:clamp(26px,4.4vw,38px);margin:0 0 20px;
  display:inline-block;background:var(--ink);color:var(--paper);padding:6px 18px;transform:rotate(-.8deg);
  box-shadow:5px 5px 0 var(--band);}
.faq-item{border:3px solid var(--ink);margin:14px 0;background:var(--paper);box-shadow:4px 4px 0 rgba(34,30,31,.25);}
.faq-item summary{cursor:pointer;font-weight:700;font-size:16.5px;padding:15px 18px;display:flex;gap:14px;align-items:baseline;list-style:none;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{background:color-mix(in srgb,var(--band) 22%,white);}
.faq-item[open] summary{border-bottom:3px solid var(--ink);background:color-mix(in srgb,var(--band) 34%,white);}
.q-mark{flex:0 0 auto;font-family:var(--display);background:var(--band);color:var(--band-text);width:26px;height:26px;
  display:grid;place-items:center;font-size:15px;transform:rotate(-6deg);border:2px solid var(--ink);}
.faq-a{padding:8px 20px 16px;}
.callout{border:3px dashed var(--ink);padding:13px 17px;background:#FFF6DC;}
/* Callout / dir-note links keep the site's shared link colour and add an
   underline, so a link is never signalled by colour alone (WCAG 1.4.1). */
.callout a:not(.next-btn),.dir-note a:not(.next-btn){text-decoration:underline;}
.callout-caution{background:#FFE0EC;}
.outro-band{background:color-mix(in srgb,var(--band) 20%,white);padding:34px 0 48px;
  position:relative;border-top:4px dashed var(--ink);}
.outro-band::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(color-mix(in srgb,var(--ink) 14%,transparent) 1px,transparent 1.3px);
  background-size:10px 10px;opacity:.25;}
.outro-band .inner-text{position:relative;z-index:1;}
.checkpoint-tag{display:block;width:fit-content;font-family:var(--display);font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink);background:var(--paper);border:2px solid var(--ink);
  padding:3px 11px 4px;margin:0 0 12px;transform:rotate(-1.2deg);}
.next-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:24px 0 0;}
.next-lbl{font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.06em;}
.next-btn{font-family:var(--display);font-size:24px;color:var(--ink);background:var(--band);text-decoration:none;
  border:3px solid var(--ink);padding:12px 24px;transform:rotate(-1deg);transition:transform .12s;}
.next-btn:hover,.next-btn:focus-visible{transform:rotate(0) translateY(-2px);box-shadow:5px 5px 0 var(--ink);}

/* off-ramp strip */
.offramp{background:var(--ink);color:var(--paper);padding:20px 0;position:relative;}
.offramp p{margin:0;font-size:15.5px;}
.offramp a{color:var(--lime);font-weight:700;}
.offramp-tape{position:absolute;top:-11px;left:7%;width:120px;height:22px;background:var(--punk-pink);
  border:3px solid var(--ink);transform:rotate(-3deg);}

/* download card */
.dl-card{display:inline-flex;align-items:center;gap:14px;border:3px solid var(--ink);background:var(--paper);
  box-shadow:5px 5px 0 var(--band);padding:11px 17px;margin:8px 0;text-decoration:none;color:var(--ink);
  font-weight:700;transform:rotate(-.6deg);transition:transform .12s;}
.dl-card:hover,.dl-card:focus-visible{transform:rotate(0);box-shadow:7px 7px 0 var(--band);}
.dl-wave svg .w{stroke:var(--ink);stroke-width:3;stroke-linecap:round;}
.dl-wave .w1{animation:yeawave 2.2s ease-in-out infinite;}
.dl-wave .w2{animation:yeawave 2.2s ease-in-out .35s infinite;}
.dl-wave .w3{animation:yeawave 2.2s ease-in-out .7s infinite;}
@keyframes yeawave{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@media (prefers-reduced-motion: reduce){
  .dl-wave .w1,.dl-wave .w2,.dl-wave .w3{animation:none;}
  .jband .band-illus,.next-btn,.dl-card{transition:none;}
  .sticker,.sticker-yea,.sticker-soli,.door,.door-frame,.door-cta,.quote-note{transition:none;}
  .sticker-yea:hover,.sticker-yea:focus-visible{transform:rotate(-2.4deg);}
  .sticker-soli:hover,.sticker-soli:focus-visible{transform:rotate(1.8deg);}
}

/* map page */
.map-illus{width:100%;border:4px solid var(--ink);display:block;}
.map-frame{margin:26px 0;background:url('../map-hatch-toronto.png') center/800px repeat;padding:14px;border:4px solid var(--ink);}
.map-frame iframe{display:block;border:3px solid var(--ink);}
.org-ul{padding-left:20px;line-height:1.9;}
.nogeo{color:#666;font-size:13px;}
.pending{border:3px dashed var(--ink);padding:14px 16px;background:#F4F4F4;}

/* ---- audience card: "Is this guide for me?" ---- */
.audience{padding:clamp(36px,5vw,56px) 0 8px;background:
  linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.92)),
  url('../map-hatch-toronto.png') center/1200px repeat;}
.forme-card{position:relative;background:var(--paper);border:4px solid var(--ink);padding:26px 28px 22px;
  box-shadow:10px 10px 0 var(--punk-cyan), 10px 10px 0 3px var(--ink);transform:rotate(-.4deg);}
.tape-card{position:absolute;top:-14px;right:26px;width:92px;height:24px;background:var(--punk-pink);
  border:3px solid var(--ink);transform:rotate(3deg);}
.forme-head{display:flex;align-items:center;gap:16px;margin-bottom:8px;}
.forme-marker{width:60px;height:60px;flex:0 0 auto;transform:rotate(-4deg);}
.forme-card h2{font-family:var(--display);font-size:clamp(26px,4.5vw,38px);margin:0;}
.forme-list{list-style:none;margin:10px 0 16px;padding:0;}
.forme-list li{position:relative;padding:7px 0 7px 36px;font-weight:600;font-size:16px;}
.forme-list li::before{content:"✓";position:absolute;left:0;top:5px;font-family:var(--display);
  background:var(--lime);border:2px solid var(--ink);width:24px;height:24px;display:grid;place-items:center;
  font-size:13px;transform:rotate(-4deg);}
.forme-scope{font-size:14.5px;font-weight:500;color:#4a4547;border-top:3px dashed var(--ink);
  padding-top:12px;margin:6px 0 0;}
.values-statement{font-size:clamp(18px,2.5vw,22px);font-weight:600;line-height:1.6;max-width:34em;
  border-left:8px solid var(--punk-pink);padding:8px 0 8px 20px;margin:0 0 22px;}

/* ---- Find Care & Support: pathways + directory ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.pathways{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0 6px;}
@media(max-width:700px){.pathways{grid-template-columns:1fr;}}
.pathway{display:flex;flex-direction:column;gap:10px;background:var(--band);color:var(--ink);text-decoration:none;
  border:4px solid var(--ink);padding:22px 22px 24px;box-shadow:7px 7px 0 var(--ink);transform:rotate(-.4deg);
  transition:transform .12s;}
.pathway:nth-child(2){transform:rotate(.4deg);}
.pathway:hover,.pathway:focus-visible{transform:rotate(0) translateY(-3px);}
.pathway-name{font-family:var(--display);font-size:clamp(24px,3.6vw,34px);line-height:1;}
.pathway-sub{font-weight:600;font-size:14.5px;line-height:1.55;}
.dir-controls{border:4px solid var(--ink);background:var(--paper);padding:20px 22px;box-shadow:8px 8px 0 rgba(34,30,31,.22);}
.dir-q{font-family:var(--display);font-size:clamp(22px,3.2vw,30px);margin:0 0 4px;}
.dir-hint{margin:0 0 12px;font-weight:600;font-size:14px;}
.chip-set{border:0;padding:0;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:10px;}
.chip{display:inline-flex;align-items:center;cursor:pointer;}
.chip input{position:absolute;opacity:0;pointer-events:none;}
.chip span{display:inline-block;border:3px solid var(--ink);background:var(--paper);font-weight:700;font-size:14px;
  padding:10px 14px;min-height:24px;}
.chip input:checked + span{background:var(--lime);box-shadow:3px 3px 0 var(--ink);}
.chip input:focus-visible + span{outline:3px solid var(--purple-deep);outline-offset:2px;}
/* Subordinate "Also show …" inclusion control (2026-08-04 refinement, revised). EarlyON is a
   strict subset of "Family and children" (and, on the CHC door, program venues are a subset of
   the centres) — an OPT-IN addition, never a peer. It is presented one level down: a quiet
   lavender left rule marks what it belongs under, and the control itself is a compact, VISIBLE
   native checkbox + label — no thick ticket border, no leading "+", no location count
   (ADR-0008 unequal hierarchy). Shown only in its parent context. */
.fam-refine{margin:-6px 0 16px;padding:2px 0 0 14px;border-left:3px solid var(--lavender);}
.fam-refine[hidden]{display:none;}
.fam-refine-set{border:0;padding:0;margin:0;}
.dir-optin{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 4px;cursor:pointer;
  font-weight:600;font-size:13.5px;line-height:1.35;color:var(--ink);}
.dir-optin[hidden]{display:none;}
.dir-optin input{flex:0 0 auto;width:20px;height:20px;margin:0;accent-color:var(--purple-fill);cursor:pointer;}
.dir-optin input:focus-visible{outline:3px solid var(--purple-deep);outline-offset:3px;}
.chip-sm span{font-size:13px;padding:8px 12px;}
.dir-row{display:flex;flex-wrap:wrap;gap:18px;align-items:end;}
.dir-field{display:flex;flex-direction:column;gap:6px;flex:1 1 220px;}
.dir-field label{font-weight:700;font-size:14px;}
.dir-field input{border:3px solid var(--ink);padding:10px 12px;font:inherit;font-size:16px;background:var(--paper);}
.dir-field input:focus-visible{outline:3px solid var(--purple-deep);outline-offset:2px;}
.fmt-set{border:0;padding:0;margin:0;display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.fmt-set legend{font-weight:700;font-size:14px;padding:0;margin-bottom:6px;}
.dir-reset{font:inherit;font-weight:700;font-size:14px;background:var(--ink);color:var(--paper);border:3px solid var(--ink);
  padding:10px 16px;cursor:pointer;}
.dir-reset:hover,.dir-reset:focus-visible{background:var(--paper);color:var(--ink);outline:3px solid var(--purple-deep);outline-offset:2px;}
.dir-count{font-weight:700;margin:16px 2px 10px;}
/* Every container that holds result cards uses the SAME vertical rhythm, so cards
   never butt together in one list and spread apart in another. #catchList (the CHC
   catchment-match block) previously had no spacing rule of its own, which made
   adjacent catchment cards visually merge into a single block. */
.dir-results,#catchList{display:flex;flex-direction:column;gap:16px;}
.dir-card{border:3px solid var(--ink);background:var(--paper);padding:16px 18px;box-shadow:4px 4px 0 rgba(34,30,31,.25);}
.dir-name{font-family:var(--display);font-size:20px;margin:0 0 2px;}
.dir-type{margin:0 0 8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#5a5457;}
.dir-desc{margin:0 0 8px;font-size:15px;line-height:1.6;}
.dir-where{margin:0 0 8px;font-weight:600;font-size:14px;}
.dir-remote{font-style:italic;font-weight:500;}
.dir-tags{margin:0 0 10px;display:flex;flex-wrap:wrap;gap:6px;}
.dir-tag{border:2px solid var(--ink);background:var(--lavender);font-size:11.5px;font-weight:700;padding:3px 8px;}
.dir-note{margin:0 0 8px;font-size:13.5px;background:#FFF6DC;border-left:4px solid var(--ink);padding:6px 10px;}
.dir-actions{margin:4px 0 0;display:flex;flex-wrap:wrap;gap:10px;}
/* THE ACTION NEVER OUTGROWS ITS CARD (2026-08-23). `.dir-act` sized to its content and
   nothing capped it, so a label longer than the card simply ran past the edge and
   `.dir-card{overflow:hidden}` cut it off — the visitor saw a truncated action with no
   scrollbar and no way to read the rest. It showed up first at 320px on the EarlyON site
   cards ("View official EarlyON information" and its three translations), but it was never a
   Spanish problem or an EarlyON problem: it is this shared component, and English clipped too.
   `max-width:100%` is the fix and it is deliberately on the BASE rule, not in a media query —
   the constraint is "never wider than the row", which is true at every width, at every text
   size and in every language. The label then wraps inside the button; `min-height:44px` and
   `box-sizing:border-box` keep the target at least 44px tall whether it wraps or not, and the
   card's 18px padding leaves room for the 3px focus outline at its 3px offset.

   `overflow-wrap:anywhere` rather than `break-word`, and the difference is load-bearing.
   `.dir-act` is an inline-flex box, so its label is an ANONYMOUS flex item — which cannot be
   selected, cannot be given `min-width:0`, and is therefore sized to its max-content width
   whatever the button's own width is. `break-word` does not change that intrinsic size, so the
   label went on overflowing the capped button. `anywhere` does change it (CSS Text 3), so the
   label shrinks with the button and wraps. Soft-wrap opportunities are still preferred, so it
   only ever breaks mid-word when nothing else will fit — which beats clipping. It is the same
   property `.dir-name`, `.dir-desc` and `.loc-addr` already use for the same reason.

   `anywhere` is the LAST resort, not the first. Soft-wrap opportunities win, so a label only
   ever breaks inside a word when a single word is wider than the whole line box. The labels
   that used to force that outcome were the "Get directions" set, whose four translations held
   their two words together with a NON-BREAKING SPACE — a promise the layout cannot keep at
   320px with text at 200%. That space is now an ordinary one (DIRECTIONS_LABEL in
   directory-app.js), so the phrase wraps between its words and `anywhere` is not reached. */
.dir-act{font-weight:700;font-size:14px;text-decoration:none;color:var(--ink);border:3px solid var(--ink);
  background:var(--paper);padding:9px 14px;min-height:44px;display:inline-flex;align-items:center;box-sizing:border-box;
  max-width:100%;overflow-wrap:anywhere;}
.dir-act:hover,.dir-act:focus-visible{background:var(--lime);box-shadow:3px 3px 0 var(--ink);}
/* "Share this service" is a BUTTON among links, so it needs the type reset a button does not
   inherit; everything else it takes from `.dir-act` so every control on a card stays one
   family. `cursor:pointer` because it is not a link. */
button.dir-act{font-family:inherit;cursor:pointer;}

/* ---- the card header: name, and the control that shares this card -----------------------
   A WRAPPING ROW, NOT ABSOLUTE POSITIONING. This is the same shape `.loc-head` already uses
   for "Get directions": a text block that takes the width it needs, an outlined button that
   never shrinks, and `flex-wrap` to put the button on its own line when both will not fit.
   Absolute positioning was rejected outright — it would sit the button OVER the organization
   name at the widths where the name is longest, which is precisely where it must not.

   `align-items:flex-start` puts the button level with the TOP of the heading block rather
   than centred against it, so a two- or three-line organization name keeps the visual weight
   and the button reads as secondary to it.

   THE HEADING STAYS PRIMARY. The button is a step smaller than a body action (13px against
   14px, tighter padding) while keeping the full 3px border, the square corners and the ink/
   paper/lime palette of every other outlined control — and `min-height:44px` on `.dir-act` is
   untouched, so the target is at least 44px tall however the label wraps. */
.dir-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  gap:10px 16px;margin:0 0 8px;}
/* 260px is the wrap threshold, not a width: above it the name and the button share the row,
   below it the button drops to its own line UNDER the whole heading block — never beside a
   truncated name, because nothing here truncates. */
.dir-head-t{flex:1 1 260px;min-width:0;}
/* The heading block's own bottom margins belong to the row, so the header does not stack two
   sets of spacing when the button wraps below it. */
.dir-head-t>:last-child{margin-bottom:0;}
.dir-act-share{flex:0 0 auto;font-size:13px;padding:7px 12px;gap:8px;}
/* The icon is decorative and aria-hidden; it must not stretch, and it must not pick up the
   label's `overflow-wrap:anywhere`. */
.dir-act-ico{flex:0 0 auto;display:block;}
.dir-act-share-t{min-width:0;overflow-wrap:anywhere;}
/* At the narrowest widths the button is on its own line already; let it take that line's full
   width so its label wraps inside a sensible box rather than a 120px column. */
@media (max-width:420px){
  .dir-head{gap:8px;}
  .dir-head-t{flex:1 1 100%;}
}
/* The card a shared link just revealed. A short, quiet marker so somebody arriving from a
   text message can see WHICH card was meant, without it reading as an alert or a selection
   state. It fades on its own and leaves no trace in the URL or in history. */
.dir-card-shared{animation:dirSharedFlash 2.6s ease-out 1;}
@keyframes dirSharedFlash{
  0%,55%{box-shadow:0 0 0 4px var(--lime);}
  100%{box-shadow:0 0 0 4px rgba(0,0,0,0);}
}
/* Respect a visitor who has asked for less motion: the marker still appears, it simply
   does not animate away. */
@media (prefers-reduced-motion:reduce){
  .dir-card-shared{animation:none;box-shadow:0 0 0 4px var(--lime);}
}
.dir-card-shared:focus{outline:none;}
.dir-card-shared:focus-visible{outline:3px solid var(--ink);outline-offset:3px;}
/* A program's own "What to say when you call" button, when it has one, stays
   visually subordinate to the organization's - smaller, thinner border, no
   bold - so a program block never reads as a second organization card (Part
   4/5, 2026-07-15 clarity pass). Same control, same dialog, just a quieter
   affordance in context. */
.cs-open-btn-sub{font-weight:500;font-size:12.5px;border-width:2px;padding:6px 10px;min-height:36px;}
.dir-more{margin-top:8px;}
.dir-more summary{cursor:pointer;font-weight:700;font-size:14px;}
.dir-more ul{margin:8px 0 0;padding-left:20px;font-size:14px;line-height:1.7;}
.dir-editorial{margin-top:26px;}
.support-callout{margin-top:18px;}
.support-btn{font-size:18px;background:var(--paper);display:inline-flex;align-items:flex-start;
  gap:10px;max-width:100%;box-sizing:border-box;white-space:normal;line-height:1.3;}
.support-btn>span:first-child{min-width:0;}
.support-btn>span[aria-hidden]{flex-shrink:0;margin-top:3px;}

/* fix pre-existing header overflow on guide pages (site chrome overflows 320–820px) */
@media(max-width:820px){
  header.top{flex-wrap:wrap;gap:6px;padding-left:12px;padding-right:12px;max-width:100%;box-sizing:border-box;}
  header.top > *{min-width:0;}
  .lang-toggle{margin-left:auto;}
}
@media(max-width:380px){ .lang-btn{padding:4px 8px;font-size:11px;} }

/* ---- front doors: the whole panel IS the door (arch, knob, threshold), not a small icon inside a box ---- */
.doors-h{font-family:var(--display);font-size:clamp(24px,3.6vw,34px);margin:26px 0 6px;}
.doors-sub{font-weight:600;font-size:15px;max-width:60ch;margin:0 0 16px;}
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0 0 22px;}
@media(max-width:980px){.doors{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.doors{grid-template-columns:1fr;}}
.door{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
  background:var(--band);color:var(--ink);text-decoration:none;border:4px solid var(--ink);
  border-radius:clamp(46px,11vw,78px) clamp(46px,11vw,78px) 10px 10px;
  padding:clamp(30px,5vw,38px) 18px 22px;box-shadow:7px 7px 0 var(--ink);
  transform:rotate(-.5deg);transition:transform .16s,box-shadow .16s;position:relative;overflow:hidden;}
.door:nth-child(2){transform:rotate(.4deg);}
.door:nth-child(3){transform:rotate(-.3deg);}
.door:nth-child(4){transform:rotate(.35deg);}
.door::after{content:"";position:absolute;right:16px;top:42%;width:10px;height:10px;border-radius:50%;
  background:var(--ink);box-shadow:0 0 0 2px color-mix(in srgb,var(--band) 60%,white);}
.door::before{content:"";position:absolute;left:16px;right:16px;bottom:13px;height:5px;border-radius:3px;
  background:var(--ink);opacity:.22;}
.door:hover,.door:focus-visible{transform:rotate(0) translateY(-4px);box-shadow:9px 9px 0 var(--ink);}
.door-on{outline:4px solid var(--ink);outline-offset:3px;background:var(--paper);box-shadow:8px 8px 0 var(--ink);}
.door.door-on{transform:rotate(0deg) translateY(-2px);}
.door-on-badge{display:none;}
.door-on .door-on-badge{display:inline-flex;align-items:center;gap:3px;position:absolute;top:8px;left:50%;
  transform:translateX(-50%) rotate(-2deg);
  background:var(--ink);color:var(--paper);font-family:var(--display);font-size:11px;font-weight:400;
  padding:4px 11px 5px;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;
  border-radius:2px;box-shadow:2px 2px 0 var(--band);z-index:2;}
.door-on .door-on-badge::before{content:"\2713 ";}
.door-frame{position:relative;flex:0 0 auto;width:52px;height:52px;background:var(--paper);
  border:3px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:2px 2px 0 rgba(34,30,31,.2);margin-bottom:2px;}
.door-illus{width:28px;height:28px;}
.door-name{font-family:var(--display);font-size:clamp(18px,2.2vw,23px);line-height:1.1;}
.door-sub{font-weight:600;font-size:12.5px;line-height:1.55;max-width:25ch;}
.door-cta{font-family:var(--display);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;
  background:var(--ink);color:var(--paper);padding:5px 15px;border-radius:2px;margin-top:auto;
  transition:transform .16s;}
.door:hover .door-cta,.door:focus-visible .door-cta{transform:translateY(-2px);}

/* near me — the OPTIONAL location step (2026-09-04 search-hierarchy pass, ADR-0032).
   This used to be the loudest object in the flow: a 4px rule with a doubled punk-orange
   drop shadow and a full-size display heading, sitting first, so the page opened by asking
   where you are rather than what you need. It now sits after the need controls and the fit
   facets and is drawn at the same rank as .fit-facets — a quiet 2px container in the same
   brand vocabulary (solid rather than dashed, because this one holds a form, not chips).
   Its heading and hint drop to the secondary type sizes already used by .fit-facets; no new
   size, colour, font or decorative treatment is introduced, and the localized "This step is
   optional." hint it has always carried is what marks it optional, in all four languages. */
.nearme{border:2px solid var(--ink);background:var(--paper);padding:12px 14px;margin:6px 0 16px;}
.nearme .dir-q{font-size:clamp(16px,2.2vw,19px);margin:0 0 3px;}
.nearme .dir-hint{font-size:12.5px;margin:0 0 10px;}
.near-row{display:flex;flex-wrap:wrap;gap:12px;align-items:end;}
.near-btn{font:inherit;font-weight:700;font-size:14px;background:var(--lime);color:var(--ink);
  border:3px solid var(--ink);padding:10px 16px;cursor:pointer;min-height:44px;}
.near-btn:hover,.near-btn:focus-visible{box-shadow:3px 3px 0 var(--ink);outline:3px solid var(--purple-deep);outline-offset:2px;}
.near-geo{background:var(--paper);}
.near-privacy{font-size:13px;font-weight:600;margin:10px 0 0;color:#4a4547;}
.near-status{font-weight:700;margin:8px 0 0;min-height:1em;}
.near-status.near-error{color:#B3261E;}
.near-status.near-ok{color:#1a6b3c;}
.near-caution{margin-top:12px;font-size:14px;}
.dir-sub-h{font-family:var(--display);font-size:clamp(20px,3vw,26px);margin:22px 0 10px;
  padding-bottom:6px;border-bottom:4px solid var(--ink);display:inline-block;}
.dist-badge{display:inline-block;background:var(--ink);color:var(--paper);font-size:12px;font-weight:700;
  padding:2px 8px;margin-left:6px;}
.loc-line{border-left:5px solid var(--band);padding:6px 0 6px 12px;margin:8px 0;font-size:14.5px;line-height:1.65;}
.dir-act-sm{font-size:12.5px;padding:5px 10px;margin-left:6px;}
.hours{font-size:13.5px;}
.confirm-hours{font-size:12.5px;color:#4a4547;}
.dist-unavailable{display:inline-block;font-size:12px;font-weight:700;color:#4a4547;border:2px dashed #4a4547;
  padding:1px 7px;margin-left:6px;}
.loc-addr-missing{color:#4a4547;font-style:italic;}
.intake-badge{display:inline-block;vertical-align:middle;margin-left:10px;background:var(--lime);border:2px solid var(--ink);
  font-family:var(--body);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;}
.dir-svc{background:#FDE7F0;border:2px dashed var(--ink);padding:8px 12px;font-size:14px;margin:0 0 8px;}
.dir-pop,.dir-parent{font-size:13px;font-weight:600;margin:0 0 8px;color:#4a4547;}
.prog-item{border-top:2px dashed var(--ink);padding:10px 0;}
.dir-progs summary{background:var(--lavender);display:inline-block;padding:4px 10px;border:2px solid var(--ink);}
.adv-filters{margin:4px 0 10px;}
.adv-filters summary{cursor:pointer;font-weight:700;font-size:14px;padding:6px 0;}

/* "After the baby arrives" disclosure (2026-08-15). The heading stays an <h3> for the
   document outline; the <summary> is what makes it a control. The default triangle is
   replaced by our own arrow so the affordance reads at the same weight as the title next to
   it, and rotates rather than swapping glyph — no layout shift when it opens. */
/* Subordinate to "What do you need help with today?" (2026-09-04, ADR-0032). This is the
   second step of the primary need choice, not a second question of equal rank, so its title
   sits one step down the SAME display scale — a smaller clamp of the existing .dir-q rule,
   no new treatment. It keeps its <h3>, its label and its eleven choices. */
.postnatal-group{margin:10px 0 14px;}
.postnatal-summary{cursor:pointer;list-style:none;display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding:6px 0;}
.postnatal-summary::-webkit-details-marker{display:none;}
.postnatal-summary .dir-q{margin:0;font-size:clamp(19px,2.6vw,24px);}
/* A CSS-drawn chevron: no glyph, no icon font, nothing to fail to load. */
.postnatal-arrow{flex:0 0 auto;width:11px;height:11px;border-right:3px solid var(--ink);
  border-bottom:3px solid var(--ink);transform:rotate(45deg);transform-origin:center;
  margin-right:4px;margin-bottom:4px;transition:transform .15s ease;}
.postnatal-group[open] .postnatal-arrow{transform:rotate(-135deg);margin-bottom:0;margin-top:4px;}
.postnatal-summary:focus-visible{outline:3px solid var(--purple-deep);outline-offset:2px;}
.postnatal-summary:hover .dir-q{text-decoration:underline;}
@media (prefers-reduced-motion:reduce){ .postnatal-arrow{transition:none;} }
.dir-row-actions{margin-top:10px;gap:12px;}
@media(max-width:760px){ .near-row .dir-field{flex-basis:100%;} }

/* ---- v7 simplification: step flow, quieter support card, overflow hardening ---- */
.door{cursor:pointer;font:inherit;text-align:center;width:100%;}
.support-card{display:flex;flex-direction:column;gap:8px;align-items:flex-start;width:100%;cursor:pointer;
  font:inherit;text-align:left;background:var(--band);color:var(--ink);border:3px solid var(--ink);
  padding:16px 20px;margin:4px 0 8px;box-shadow:4px 4px 0 var(--ink);transform:rotate(-.2deg);transition:transform .12s;}
.support-card:hover,.support-card:focus-visible{transform:rotate(0) translateY(-2px);}
.support-card .door-name{font-size:clamp(18px,2.2vw,22px);}
.support-card.door-on{outline:4px solid var(--ink);outline-offset:3px;background:var(--paper);}
.wider-note{font-size:14px;font-weight:600;margin:6px 0 0;color:#4a4547;}
.linklike{font:inherit;font-weight:700;font-size:inherit;background:none;border:none;cursor:pointer;
  color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;padding:4px 2px;}
.linklike:hover,.linklike:focus-visible{background:var(--lime);outline:2px solid var(--ink);}
.path-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin:0 0 14px;}
.path-chip{font-family:var(--display);font-size:clamp(18px,2.6vw,24px);background:var(--ink);color:var(--paper);
  padding:4px 12px;transform:rotate(-.6deg);}
.path-head .dir-count{margin:0;}
.support-chips{border:3px dashed var(--ink);padding:12px 14px;margin:0 0 16px;}
.support-chips legend{font-weight:700;font-size:14px;padding:0 6px;}
.more-row{margin:18px 0 6px;}
.path-note{margin:0 0 14px;}

/* card overflow hardening */
.dir-card{min-width:0;}
.dir-card *{min-width:0;}
.dir-name{overflow-wrap:anywhere;}
.dir-more a, .dir-desc a, .dir-svc a{overflow-wrap:anywhere;word-break:break-word;}
.loc-head{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap;}
.loc-text{flex:1 1 220px;min-width:0;overflow-wrap:anywhere;}
.dir-dirbtn{white-space:nowrap;flex:0 0 auto;margin-left:0;}
@media(max-width:520px){
  .loc-head{flex-direction:column;align-items:flex-start;gap:8px;}
}
.dir-more ul li{overflow-wrap:anywhere;}

/* nav-fit fix for guide pages (extra nav item). About was added to the nav (2026-09-10); the
   tiers keep the header on one row between 901-1100px and the nav on one row from 701px. */
@media (max-width:1100px) and (min-width:901px){
  .top-links{gap:10px;} .top-links a{font-size:12.5px;}
}
@media (max-width:900px) and (min-width:561px){
  .top-links{gap:8px;} .top-links a{font-size:12.5px;}
  header.top{padding:20px 18px;}
}
/* nav.top-links, not .top-links: the page's own `nav.top-links{display:flex}` outranks a bare
   class selector, which is why this band showed BOTH the nav and the menu button before. */
@media (max-width:750px) and (min-width:561px){
  nav.top-links{display:none;} .menu-btn{display:flex;}
}

/* ---- v7 simplification: pathway flow + overflow-proof cards ---- */
.door{width:100%;text-align:center;font:inherit;cursor:pointer;}
.support-path{display:flex;flex-direction:column;gap:8px;width:100%;text-align:left;font:inherit;cursor:pointer;
  background:var(--paper);color:var(--ink);border:3px solid var(--ink);padding:16px 20px;margin:6px 0 8px;
  box-shadow:4px 4px 0 rgba(34,30,31,.3);transform:rotate(-.2deg);transition:transform .12s;}
.support-path:hover,.support-path:focus-visible{transform:rotate(0) translateY(-2px);box-shadow:6px 6px 0 var(--ink);}
.support-path .pathway-name{font-size:clamp(20px,2.6vw,26px);}
.support-path .pathway-sub{font-size:13.5px;}
.support-path.door-on{outline:4px solid var(--ink);outline-offset:3px;background:var(--lavender);}
.linklike{font:inherit;font-weight:700;font-size:14px;background:none;border:none;cursor:pointer;color:var(--ink);
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;padding:6px 4px;min-height:44px;}
.linklike:hover,.linklike:focus-visible{background:var(--lime);outline:2px solid var(--ink);}
.choose-first{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.flow-head{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0 0 14px;}
.flow-path{font-family:var(--display);font-size:clamp(20px,3vw,26px);background:var(--band);padding:4px 14px;
  border:3px solid var(--ink);transform:rotate(-.5deg);}
.path-note{font-weight:600;font-size:14.5px;max-width:64ch;margin:0 0 14px;}
.flow-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 8px;}
.more-row{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 6px;}
.dir-note-line{font-size:13.5px;font-weight:600;color:#4a4547;margin:0 0 8px;}

/* overflow-proof cards */
.dir-card, .dir-card *{min-width:0;}
.dir-card{overflow:hidden;}
.dir-name{overflow-wrap:anywhere;}
/* `.dir-type` joined this list on 2026-08-23. It is uppercased with letter-spacing, so its
   words are wider than they look, and on an EarlyON site card it carries the centre type AND
   the operator's name — which at 200% text on a 320px screen was long enough to be cut off by
   the card's clip. Same treatment as every other long single-line field here. */
.dir-desc,.dir-svc,.dir-more li,.loc-addr,.loc-phone,.dir-type{overflow-wrap:anywhere;}
.dir-more a{overflow-wrap:anywhere;word-break:break-all;}
.loc-line{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.loc-info{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:14.5px;line-height:1.55;}
.loc-addr{display:block;}
.loc-dir{flex:0 0 auto;white-space:nowrap;align-self:center;}
@media(max-width:560px){
  .loc-line{flex-direction:column;align-items:flex-start;}
  /* .loc-info's flex-basis:240px (above) sets a preferred WIDTH in the default row
     layout; in this column layout the same basis is read as a HEIGHT instead, forcing
     every card's address block to a minimum 240px tall regardless of content. Reset it
     to size from content here. */
  .loc-info{flex:0 1 auto;}
  .loc-dir{align-self:flex-start;}
  .dir-actions{flex-direction:row;flex-wrap:wrap;}
  /* `flex:0 0 auto` here forbade shrinking, so on the narrowest screens a long action could
     not give way even once `max-width:100%` capped it. Allow the shrink; the cap and the
     wrap do the rest. Growing is still off, so a short action stays its natural size rather
     than stretching across the row. */
  .dir-act{flex:0 1 auto;}
  /* "Get directions" keeps `white-space:nowrap` above this breakpoint, where it always fits on
     one line. Below it the longer translations (fr "Obtenir l'itinéraire") do not, so the
     phrase is allowed to wrap between its two words. */
  .loc-dir{white-space:normal;}
}

.choose-first[hidden],#flow [hidden]{display:none !important;}

/* v8: journey home link, map language toggle, combobox */
.jstrip-home{text-decoration:none;color:var(--ink);cursor:pointer;border-bottom:3px solid transparent;}
.jstrip-home:hover{border-bottom-color:var(--ink);background:var(--lime);}
.jstrip-home:focus-visible{outline:3px solid var(--purple-deep);outline-offset:2px;border-bottom-color:var(--ink);}
.maplang{display:inline-flex;border:3px solid var(--ink);margin:0 0 10px;}
.ml-btn{font:inherit;font-weight:700;font-size:13px;letter-spacing:.05em;padding:8px 16px;background:var(--paper);
  border:none;cursor:pointer;min-height:44px;}
.ml-btn + .ml-btn{border-left:3px solid var(--ink);}
.ml-btn.ml-on{background:var(--ink);color:var(--paper);}
.ml-btn:focus-visible{outline:3px solid var(--purple-deep);outline-offset:-3px;}
.map-fallback{font-size:13px;font-weight:600;margin:8px 0 0;}

/* ---- CHC Map resource card (item 9: one intentional card, not a disconnected label + button) ---- */
.chc-card{position:relative;background:var(--paper);border:4px solid var(--ink);padding:28px 30px 26px;
  box-shadow:10px 10px 0 var(--punk-cyan),10px 10px 0 3px var(--ink);transform:rotate(-.3deg);margin:8px 0 30px;}
.chc-card-title{font-family:var(--display);font-size:clamp(26px,4.5vw,38px);margin:0 0 10px;}
.chc-card-sub{font-size:15.5px;font-weight:500;margin:0 0 20px;max-width:60ch;}
.chc-options{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.chc-opt-secondary{font-family:var(--display);font-size:15px;color:var(--ink);background:var(--paper);
  text-decoration:none;border:3px solid var(--ink);padding:9px 18px;transition:transform .12s,box-shadow .12s;
  display:inline-block;}
.chc-opt-secondary:hover,.chc-opt-secondary:focus-visible{transform:translateY(-2px);box-shadow:4px 4px 0 var(--ink);}
.map-credit{font-size:13px;color:#4a4547;margin:14px 0 0;line-height:1.65;}
.map-credit a{color:var(--purple-deep);font-weight:700;text-decoration:none;}
.map-credit a:hover{text-decoration:underline;}
.chc-secondary-map{opacity:.94;}
.combo-wrap{position:relative;}
.combo-list{position:absolute;z-index:40;left:0;right:0;top:100%;margin:2px 0 0;padding:0;list-style:none;
  background:var(--paper);border:3px solid var(--ink);box-shadow:5px 5px 0 rgba(34,30,31,.3);max-height:260px;overflow:auto;}
.combo-list li{padding:10px 12px;font-size:14px;font-weight:600;cursor:pointer;overflow-wrap:anywhere;}
.combo-list li[aria-selected="true"], .combo-list li:hover{background:var(--lime);}
.combo-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
.srh-endnote{border-top:3px dashed var(--ink);padding-top:12px;margin-top:16px;font-size:14px;font-weight:600;}
.dir-pop-line{font-size:13.5px;font-weight:700;margin:0 0 8px;background:var(--lavender);display:inline-block;
  padding:3px 10px;border:2px solid var(--ink);}
.appt-line{font-size:13px;font-weight:700;margin:0 0 8px;}
/* The no-health-card line, when an organization shows it on the card rather than inside
   the "More information" disclosure. Same weight and rhythm as .appt-line above — it is
   the same kind of fact (can I be seen, and what do I need to bring) and should not read
   as a louder or quieter claim than the appointment rule it sits beneath. No new colour
   and no new box: the card's existing contrast already carries it. */
.dir-hc-line{font-size:13px;font-weight:700;margin:0 0 8px;}

.loc-info .dist-badge{align-self:flex-start;width:auto;}

/* ---- usability upgrade: copy controls ---- */
/* Inline copy control: larger hit area (~36px) for touch, while the drawn icon stays
   14px so the visual footprint beside the value is unchanged. */
.copy-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;
  margin-left:2px;border:1.5px solid transparent;border-radius:4px;background:none;color:#6b6567;cursor:pointer;
  vertical-align:middle;flex:0 0 auto;position:relative;line-height:0;}
.copy-btn:hover{color:var(--ink);border-color:var(--ink);}
.copy-btn:focus-visible{outline:3px solid var(--purple-deep);outline-offset:2px;color:var(--ink);border-color:var(--ink);}
.copy-ic{width:14px;height:14px;pointer-events:none;}
.copy-btn.copy-btn-done{color:#1a6b3c;border-color:#1a6b3c;}
.copy-btn.copy-btn-done::after{content:attr(data-copied-label);position:absolute;left:50%;bottom:calc(100% + 5px);
  transform:translateX(-50%);background:var(--ink);color:var(--paper);font-size:11px;font-weight:700;
  padding:3px 7px;border-radius:3px;white-space:nowrap;pointer-events:none;}
.phone-ext{font-size:12.5px;font-weight:600;color:#4a4547;margin-left:4px;}
@media(prefers-reduced-motion:no-preference){.copy-btn.copy-btn-done::after{animation:copyPop .12s ease-out;}}
@keyframes copyPop{from{opacity:0;transform:translateX(-50%) translateY(2px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}

/* ---- usability upgrade: clear-all-filters ---- */
.dir-clear-btn{font:inherit;font-weight:700;font-size:13px;background:var(--paper);color:var(--ink);
  border:2px solid var(--ink);padding:7px 13px;cursor:pointer;min-height:36px;}
.dir-clear-btn:hover,.dir-clear-btn:focus-visible{background:var(--lime);outline:3px solid var(--purple-deep);outline-offset:2px;}
.dir-summary-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:16px 2px 10px;}
.dir-summary-row .dir-count{margin:0;}

/* Live open/closed status stickers removed (2026-07-16 unification pass): the
   public interface no longer makes live availability claims. Verified hours
   remain available through the View-hours disclosure below. */

/* ---- verified public hours disclosure (2026-07-16 hours audit) ---- */
.hrs-wrap{margin:6px 0 8px;}
.hours-toggle{background:none;border:none;border-bottom:2px solid var(--ink);padding:2px 0 1px;cursor:pointer;
  font-family:var(--body);font-size:13px;font-weight:700;color:var(--ink);}
.hours-toggle:hover{background:var(--lime);}
.hours-toggle:focus-visible{outline:3px solid var(--purple-deep);outline-offset:2px;}
.hours-toggle[aria-expanded="true"]::after{content:" ▴";font-size:10px;}
.hours-toggle[aria-expanded="false"]::after{content:" ▾";font-size:10px;}
.hrs-panel{border:2px solid var(--ink);background:#fffdf6;padding:10px 14px;margin-top:8px;max-width:420px;}
.hrs-block + .hrs-block{border-top:1px solid #e4ddc9;margin-top:10px;padding-top:10px;}
.hrs-type{font-family:var(--display);font-size:13px;text-transform:uppercase;letter-spacing:.04em;margin:0 0 6px;}
.hrs-days{list-style:none;margin:0 0 6px;padding:0;font-size:13.5px;}
.hrs-day{display:flex;gap:12px;padding:1px 0;}
.hrs-dname{flex:0 0 44px;font-weight:700;}
.hrs-closed{color:#77706b;}
/* A weekday whose "Closed" has been replaced by a scoped explanation. It is NOT muted
   like .hrs-closed, because the day is not closed — the clinic is open for something
   this schedule does not cover. It wraps, since the sentence is longer than a time
   range and the day column beside it is a fixed 44px. */
.hrs-daynote span:last-child{overflow-wrap:anywhere;}
.hrs-247{font-weight:700;}
.hrs-note{font-size:12.5px;margin:4px 0 0;color:#4a4547;}
.hrs-confirm{font-weight:700;}
.hrs-checked{font-size:11.5px;margin:6px 0 0;color:#77706b;}
.hrs-caution{border-top:1px solid #e4ddc9;margin-top:10px;padding-top:8px;}

/* ---- Community Stories card actions: deliberately quieter than Call/Website ---- */
.dir-act-story{border:none;background:none;box-shadow:none;font-size:12.5px;font-weight:700;
  text-decoration:underline;text-decoration-style:dashed;text-underline-offset:3px;padding:4px 6px;color:var(--ink);}
.dir-act-story:hover{background:var(--lavender);}
.dir-act-story:focus-visible{outline:3px solid var(--purple-deep);outline-offset:2px;}

/* ---- usability upgrade: Find services that fit you ---- */
/* Visually secondary to the need controls above it: a step of extra space opens the
   secondary zone (fit, then the optional location step, then "More search options"). */
.fit-facets{border:2px dashed var(--ink);padding:12px 14px;margin:22px 0 16px;}
.fit-facets .dir-q{font-size:clamp(16px,2.2vw,19px);margin:0 0 3px;}
.fit-facets .dir-hint{font-size:12.5px;margin:0 0 10px;}
.fit-chip-set{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px;}
.fit-chip-set .chip span{font-size:13px;padding:8px 12px;background:var(--paper);}
.fit-chip-set .chip input:checked + span{background:var(--lavender);}
.fit-more{margin-top:8px;}
.fit-more summary{cursor:pointer;font-weight:700;font-size:13px;}
.fit-more .fit-chip-set{margin-top:8px;}

/* ---- usability upgrade: call-script tool ---- */
.callscript-dialog{border:4px solid var(--ink);padding:0;max-width:520px;width:min(94vw,520px);
  box-shadow:8px 8px 0 rgba(34,30,31,.3);background:var(--paper);color:var(--ink);}
.callscript-dialog::backdrop{background:rgba(34,30,31,.55);}
.cs-inner{padding:22px 24px 24px;}
.cs-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 4px;}
.cs-title{font-family:var(--display);font-size:clamp(19px,2.6vw,23px);margin:0;}
.cs-close{font:inherit;font-weight:700;font-size:20px;line-height:1;background:none;border:2px solid var(--ink);
  width:32px;height:32px;cursor:pointer;flex:0 0 auto;}
.cs-close:hover,.cs-close:focus-visible{background:var(--lime);outline:3px solid var(--purple-deep);outline-offset:2px;}
.cs-exit{display:block;width:100%;margin:0 0 12px;background:var(--ink);color:var(--paper);}
.cs-exit:hover,.cs-exit:focus-visible{background:var(--paper);color:var(--ink);outline:3px solid var(--punk-pink);outline-offset:2px;}
.cs-langrow{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px;}
.cs-langrow button{font:inherit;font-weight:700;font-size:12.5px;border:2px solid var(--ink);background:var(--paper);
  padding:5px 11px;cursor:pointer;}
.cs-langrow button[aria-pressed="true"]{background:var(--ink);color:var(--paper);}
.cs-langrow button:focus-visible{outline:3px solid var(--purple-deep);outline-offset:2px;}
.cs-paper{background:#FFFBEF;border:2px dashed var(--ink);padding:14px 16px;font-size:14.5px;line-height:1.75;
  white-space:pre-wrap;margin:0 0 12px;max-height:44vh;overflow:auto;}
.cs-blank{border:0;border-bottom:2px solid var(--ink);background:transparent;font:inherit;font-size:inherit;
  padding:0 2px;min-width:70px;}
.cs-blank:focus-visible{outline:3px solid var(--purple-deep);outline-offset:1px;}
.cs-privacy{font-size:12.5px;font-weight:600;color:#4a4547;margin:0 0 14px;}
.cs-actions{display:flex;flex-wrap:wrap;gap:10px;}
/* PRINTING A GUIDE (2026-08-15, corrected after a real-browser test).
   The first attempt printed the open modal directly and produced ELEVEN IDENTICAL PAGES.
   Both causes are worth naming, because either alone would reproduce it:

   1. `visibility:hidden` hides the directory but does not COLLAPSE it. The document kept its
      full height (>9000px), so the job stayed eleven pages long however little was on them.
   2. A `position:fixed` element REPEATS on every printed page. The dialog was fixed and
      full-bleed, so each of those pages carried its own copy of the same guide.

   CSS-media tests could not catch this: emulating print media only changes how media queries
   evaluate, it never runs pagination. It took printing for real to see it.

   So the guide is no longer printed from the dialog. printStarter() clones it into
   #starterPrintView in the NORMAL FLOW, and everything else is display:none — which collapses
   the page to the guide's own length. One page, printed once. */
#starterPrintView{display:none;}
/* The observable fallback, for a browser whose window.print() does nothing: the same view,
   shown on the page, for the visitor to print or save from their own menu. */
body.is-print-fallback #starterPrintView{display:block;max-width:640px;margin:24px auto;
  padding:0 16px;}
body.is-print-fallback .st-print-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  border:3px solid var(--ink);background:var(--paper);padding:12px 14px;margin:0 0 16px;}
body.is-print-fallback .st-print-note{margin:0;flex:1 1 240px;font-size:13.5px;font-weight:600;}
body.is-print-fallback .st-print-close{min-height:44px;}
body.is-print-fallback #starterPrintView:focus-visible{outline:3px solid var(--purple-deep);
  outline-offset:3px;}
/* The fallback exists to be printed or saved from the browser's own menu, so it is paper in
   waiting: the destination URL shows here for the same reason it shows in @media print. */
body.is-print-fallback .st-access-url{display:block;margin-top:4px;}

@media print{
  /* 1. THE GUIDE. display:none on the siblings, never visibility:hidden — collapsing the
        document is the whole point, and it is what keeps the job to a single page. */
  body.is-printing-guide > *:not(#starterPrintView){display:none !important;}
  body.is-printing-guide #starterPrintView{display:block;}
  body.is-printing-guide .st-print-bar{display:none !important;}
  #starterPrintView .st-sec{break-inside:avoid;}
  #starterPrintView .st-top{position:static;}
  #starterPrintView .st-fold>summary{list-style:none;}
  #starterPrintView .st-fold>summary::-webkit-details-marker{display:none;}
  /* THE DESTINATION URL IS THE POINT OF PRINTING A ROUTE GUIDE. On paper the link cannot be
     clicked, so the address is printed as text beside its label; without this the printed
     page would say "Open request form" and give no way to reach it. The label keeps its
     border but drops the solid fill, which otherwise prints as a block of ink. */
  #starterPrintView .st-access{break-inside:avoid;}
  #starterPrintView .st-access-url{display:block;margin-top:4px;}
  #starterPrintView .st-access-link{background:none !important;color:inherit !important;
    padding:2px 0;min-height:0;border:0;text-decoration:underline;font-weight:700;}
  /* The modal itself never prints; the print view stands in for it. This also covers a
     browser-menu print, where beforeprint builds the view first. */
  .starter-dialog{display:none !important;}
  dialog::backdrop{display:none !important;}

  /* 2. THE LEGACY CALL SCRIPT (es/fr/pt) keeps its own takeover, unchanged apart from being
        scoped so it cannot fight rule 1. NOTE: it is `position:fixed` too, so it has the same
        repeated-page defect; it is left as it was rather than changed in a pass that was not
        asked to touch it, and it is recorded in the report. */
  body:not(.is-printing-guide):has(.callscript-dialog[open]) *{visibility:hidden;}
  body:not(.is-printing-guide):has(.callscript-dialog[open]) .callscript-dialog[open],
  body:not(.is-printing-guide):has(.callscript-dialog[open]) .callscript-dialog[open] *{visibility:visible;}
  .callscript-dialog[open]{box-shadow:none;border:none;max-width:none;width:100%;}
  .cs-close,.cs-langrow,.cs-actions,.cs-privacy{display:none !important;}
}

/* ---- ADR-0024: contextual conversation starter (LIVE IN ENGLISH, 2026-08-15) ----
   Styles the starter dialog built lazily in JS by starterDialogHtml(). Reached from
   `.starter-open-btn`, which organization cards emit in a cutover locale and EarlyON site
   cards emit wherever a guide is approved.

   Follows ADR-0023's prepared-words hierarchy rather than the call-script panel above:
   exactly ONE strongly emphasised element (the opener quote), no dashed script box, no
   nested containers, and everything else carried by type, spacing and one hairline.

   PRINTING is handled by the @media print block above, which covers both dialogs. The guide
   prints; the modal controls, the language alternatives and the conditional block do not. */
.starter-dialog{border:4px solid var(--ink);padding:0;max-width:460px;width:min(94vw,460px);
  box-shadow:8px 8px 0 rgba(34,30,31,.3);background:var(--paper);color:var(--ink);}
.starter-dialog::backdrop{background:rgba(34,30,31,.55);}
.st-inner{padding:20px;}
/* The head AND the rapid exit stick as ONE block. Sticking them separately (head to the top,
   exit to the bottom) left the exit scrolling out of reach on a phone, because it sits near
   the top of a tall dialog and a bottom-stuck element cannot hold a position its own flow box
   has already passed. Someone who needs the rapid exit must never have to scroll back up for
   it (ADR-0024 Amendment 1). */
.st-top{position:sticky;top:0;z-index:2;background:var(--paper);}
.st-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 14px;
  background:var(--paper);padding:2px 0 8px;}
.st-head-text{min-width:0;}
/* Who and why: quiet, and deliberately outside the spoken quote below. */
.st-org{font-weight:700;font-size:13px;margin:0 0 2px;overflow-wrap:anywhere;}
.st-prog{font-weight:600;color:#4a4547;}
/* Deliberately NOT the display-type headline the call-script panel used. It is a label for
   the dialog, not the most actionable thing in it — under ADR-0023's cap the one strong
   emphasis belongs to the words a person can say, and a large heading above a single
   sentence both competes with it and costs the vertical room translated text needs. */
.st-title{font-size:15px;font-weight:700;line-height:1.3;margin:0;overflow-wrap:anywhere;}
/* One ordinary close control. 44px tap target (ADR-0014) without a 44px-looking box. */
.st-close{font:inherit;font-weight:700;font-size:20px;line-height:1;background:none;border:2px solid var(--ink);
  min-width:44px;min-height:44px;cursor:pointer;flex:0 0 auto;}
.st-close:hover,.st-close:focus-visible{background:var(--lime);outline:3px solid var(--purple-deep);outline-offset:2px;}
.st-say-lbl{display:block;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:#4a4547;margin:0 0 4px;}
/* Five compact sections, separated by one hairline each rather than by nested boxes
   (ADR-0023: no boxes inside boxes, and no decorative grouping without a written label —
   every section here carries one). */
.st-sec{margin:0 0 12px;}
.st-sec + .st-sec{padding-top:12px;border-top:1px solid rgba(34,30,31,.25);}
/* Secondary material is a native <details>: a real labelled control, always reachable by
   keyboard and screen reader, never hidden by a media query. "You can say" is never one of
   these — the words a person came for are always open and immediately visible. */
.st-fold > summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:6px;}
.st-fold > summary::-webkit-details-marker{display:none;}
.st-fold > summary::before{content:'+';font-weight:700;font-size:15px;line-height:1;}
.st-fold[open] > summary::before{content:'\2212';}
.st-fold > summary:focus-visible{outline:3px solid var(--purple-deep);outline-offset:2px;}
.st-fold > p{margin-top:4px;}
.st-opt-list{list-style:none;margin:6px 0 0;padding:0;}
.st-opt-list li + li{margin-top:10px;}
.st-opt-when{display:block;font-size:12.5px;font-weight:700;color:#4a4547;margin:0 0 2px;}
/* Spoken wording is quoted. THE one strong emphasis in view is the opener; the two later
   spoken sections are the same shape, deliberately not emphasised. */
.st-quote{font-size:17px;line-height:1.55;font-weight:700;margin:0;overflow-wrap:anywhere;}
.st-quote::before{content:'\201C';}
.st-quote::after{content:'\201D';}
.st-quote-quiet{font-size:15px;font-weight:500;}
/* Preparation and the safety note are read, not spoken: plain prose, no quotation marks. */
.st-prep{font-size:14px;line-height:1.6;margin:0;overflow-wrap:anywhere;}
.st-safety .st-prep{font-weight:600;}
.st-safety{border-top-width:2px;}
.st-blank{margin:0 0 10px;}
.st-blank-lbl{display:block;font-size:13px;font-weight:700;margin:0 0 4px;}
.st-blank-input{font:inherit;font-size:15px;width:100%;min-height:44px;padding:6px 10px;
  border:2px solid var(--ink);background:var(--paper);color:var(--ink);}
.st-blank-input:focus-visible{outline:3px solid var(--purple-deep);outline-offset:1px;}
.st-privacy{font-size:12.5px;font-weight:600;color:#4a4547;margin:0 0 14px;}
/* THE DIRECT ROUTE. Prominent but secondary: it is the most actionable control in the
   dialog and it is deliberately NOT the most emphasised thing in it — under ADR-0023's cap
   the one strong emphasis stays with the words a person says, so this is carried by a solid
   fill and a 44px target rather than by size. It sits above .st-actions so the action a
   visitor came for precedes the furniture. */
/* THE SERVICE CHOICE. One list of equal-weight services, because ranking them is the defect
   this whole feature exists to remove — nothing here is emphasised over anything else, and
   nothing here is instruction. Full-width targets so a 320px screen never puts two services
   side by side where a mis-tap sends somebody to the wrong door. */
/* The cross-service chooser's supporting sentence, between the title and the list. Quiet
   note type, matching .st-prog / .cm-label's muted ink — no new colour, no decoration. */
.st-choose-intro{font-size:13.5px;line-height:1.5;color:#4a4547;margin:0 0 14px;}
.st-choose{list-style:none;margin:0;padding:0;}
.st-choose li + li{margin-top:10px;}
.st-choose-btn{display:block;width:100%;font:inherit;font-size:15px;font-weight:700;
  text-align:left;min-height:44px;padding:10px 14px;cursor:pointer;
  background:var(--paper);color:var(--ink);border:2px solid var(--ink);}
.st-choose-btn:hover,.st-choose-btn:focus-visible{background:var(--lime);
  outline:3px solid var(--purple-deep);outline-offset:2px;}
.st-access{margin:0 0 14px;}
.st-access-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:8px 16px;font-size:15px;font-weight:700;text-decoration:none;
  background:var(--ink);color:var(--paper);border:2px solid var(--ink);}
.st-access-link:hover,.st-access-link:focus-visible{background:var(--paper);color:var(--ink);
  outline:3px solid var(--purple-deep);outline-offset:2px;}
/* The destination in full, for PAPER. A printed guide that says "Open request form" and
   nothing else is useless: the reader cannot click it. Hidden on screen, where the link
   itself is the affordance and the raw URL would be noise, and shown wherever the guide is
   rendered to be read away from the page. */
.st-access-url{display:none;font-size:12.5px;overflow-wrap:anywhere;}
/* A TELEPHONE NUMBER IS SHOWN ON SCREEN, unlike a URL. The reasoning above does not carry
   over: a URL is long, unreadable and already carried by the link, but a number is short,
   and a person deciding whether to phone wants to SEE it — on a desktop there is nothing to
   tap, and somebody copying it into another handset should not have to hunt. It sits under
   the action in the quiet note size, so it informs without competing with the guide. */
.st-access-call .st-access-url{display:block;margin-top:6px;color:#4a4547;font-weight:600;}
.st-access-note{font-size:12.5px;line-height:1.5;font-weight:600;color:#4a4547;margin:6px 0 0;}
.st-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.st-copy{min-height:44px;}
/* One compact language control instead of four equal-weight buttons competing with the
   starter. A native <select> is keyboard reachable, carries a real visible <label>, and
   announces its current value without any ARIA of its own (ADR-0014). */
.st-lang{display:flex;align-items:center;gap:6px;}
.st-lang-lbl{font-size:12.5px;font-weight:700;}
.st-lang-select{font:inherit;font-size:13px;min-height:44px;padding:4px 6px;
  border:2px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer;}
.st-lang-select:focus-visible{outline:3px solid var(--purple-deep);outline-offset:2px;}
/* Safety only, and differentiated from the ordinary close rather than duplicating it.
   Sticky to the bottom of the dialog: on a safety starter the way out must be reachable
   without scrolling to find it, however long the content is (ADR-0024 Amendment 1). */
/* Sticky-positioned by its .st-top parent, not on its own. The shadow separates it from the
   content that scrolls underneath it. */
.st-exit{display:block;width:100%;margin:0 0 10px;min-height:44px;background:var(--ink);color:var(--paper);
  box-shadow:0 6px 12px -6px rgba(34,30,31,.45);}
.st-exit:hover,.st-exit:focus-visible{background:var(--paper);color:var(--ink);outline:3px solid var(--punk-pink);outline-offset:2px;}
@media (max-width:360px){
  .st-inner{padding:16px;}
  .st-actions{gap:8px;}
  .st-lang{flex:1 1 100%;}
}


  /* "Find Care & Support" as the final stop in the journey strip (2026-07-15
     correction) - NOT a top-header nav item. Matches .jstop exactly (same
     height/padding/font/dot-badge treatment); .jstop-btn only resets the
     button-element defaults (background/font-family/cursor) that .jstop
     itself never had to override on an <a>. The menu renders as a sibling of
     .jstrip-track (which clips overflow-x), positioned relative to .jstrip
     itself, so it is never clipped by the strip's horizontal scroll. */
  .jstop-btn{background:var(--paper);font-family:inherit;cursor:pointer;} /* paper (not none): sits above the continuous route line */
  .jstop-btn .drop-caret{font-size:9px;transition:transform .15s;}
  .jstop-btn[aria-expanded="true"] .drop-caret{transform:rotate(180deg);}


/* MOBILE-POLISH-PORT (formerly a second style block) */
/* MOBILE-POLISH-PORT: compact mobile header, overflow guards, wrapped header
rows — ported from the mobile-polish branch so guide pages match index/manuals/map/contact/404. */
html{overflow-x:hidden;width:100%;}
body{overflow-x:hidden;width:100%;}
header.top{flex-wrap:wrap;row-gap:8px;}
.site-logo-link{max-width:240px;height:68px;overflow:hidden;}
.header-right{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
h1,h2,h3{overflow-wrap:break-word;}
@media (max-width:560px){
  header.top{padding:14px 16px;}
  .header-right{gap:10px;}
  .site-logo-link{max-width:70px;height:38px;}
  .site-logo{height:38px;}
  .menu-btn{width:34px;height:34px;}
}
/* v10 hierarchy pass: the phone number is the tap-to-call control (no separate Call
   button), the call guide is a quiet inline link, and programs are visually
   subordinate details of their organization. */
.loc-info a[href^="tel:"]{font-weight:700;}
/* The phone number IS the tap-to-call control. Give it a ~44px tap target and a small
   leading phone glyph (masked SVG in currentColor — no new colour, no extra markup) so
   it is discoverably tappable without reintroducing a Call button. */
.contact-line a[href^="tel:"],.loc-phone a[href^="tel:"],.contact-methods a[href^="tel:"]{font-size:15px;
  display:inline-flex;align-items:center;gap:.34em;min-height:44px;}
.contact-line a[href^="tel:"]::before,.loc-phone a[href^="tel:"]::before,.contact-methods a[href^="tel:"]::before{content:"";
  flex:0 0 auto;width:.95em;height:.95em;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M20%2015.5c-1.2%200-2.4-.2-3.6-.6-.3-.1-.7%200-1%20.2l-2.2%202.2c-2.8-1.4-5.2-3.8-6.6-6.6l2.2-2.2c.3-.3.4-.7.2-1-.4-1.1-.6-2.3-.6-3.6%200-.6-.4-1-1-1H4C3.4%203%203%203.4%203%204c0%209.4%207.6%2017%2017%2017%20.6%200%201-.4%201-1v-3.5c0-.6-.4-1-1-1z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M20%2015.5c-1.2%200-2.4-.2-3.6-.6-.3-.1-.7%200-1%20.2l-2.2%202.2c-2.8-1.4-5.2-3.8-6.6-6.6l2.2-2.2c.3-.3.4-.7.2-1-.4-1.1-.6-2.3-.6-3.6%200-.6-.4-1-1-1H4C3.4%203%203%203.4%203%204c0%209.4%207.6%2017%2017%2017%20.6%200%201-.4%201-1v-3.5c0-.6-.4-1-1-1z'/%3E%3C/svg%3E") center/contain no-repeat;}
/* A text line reads at the same scale and tap size as a phone number, because it is the
   same kind of value — but it must NOT carry the phone glyph, which would tell a reader to
   call a number nobody answers by voice. It gets a message glyph instead, and as everywhere
   else on this card the caption label states the method: the glyph never carries it alone. */
.contact-methods a.cm-text{font-size:15px;font-weight:700;color:var(--purple-fill);
  display:inline-flex;align-items:center;gap:.34em;min-height:44px;
  max-width:100%;min-width:0;overflow-wrap:anywhere;word-break:break-word;}
.contact-methods a.cm-text::before{content:"";
  flex:0 0 auto;width:.95em;height:.95em;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M4%203h16a2%202%200%200%201%202%202v10a2%202%200%200%201-2%202H9l-5%204v-4H4a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M4%203h16a2%202%200%200%201%202%202v10a2%202%200%200%201-2%202H9l-5%204v-4H4a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2z'/%3E%3C/svg%3E") center/contain no-repeat;}
/* ---------- Always-visible contact methods (2026-07-28 contact-hierarchy pass) ----------
   The VALUE is the control: phone / email / website each render as the tappable link
   itself plus a subtle copy button — no generic bordered "Website"/"Email" buttons, never
   hidden in a disclosure. One compact family, native to the card: the existing --band
   accent, ink, purple link colour, copy control, and masked-SVG glyphs in currentColor
   (no new colour, no icon dependency; the caption label — not the glyph — states the
   method). Long values wrap; no horizontal overflow. */
.contact-methods{margin:10px 0 2px;padding:8px 0 8px 13px;border-left:4px solid var(--band);
  display:flex;flex-direction:column;gap:8px;}
.cm-row{display:flex;flex-direction:column;gap:1px;min-width:0;}
.cm-label{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:#4a4547;line-height:1.5;}
.cm-value{font-size:14.5px;line-height:1.5;display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:start;column-gap:.4em;row-gap:2px;min-width:0;overflow-wrap:anywhere;word-break:break-word;}
/* The copy button is a fixed utility column pinned to the value's upper-right: the linked
   value wraps within the minmax(0,1fr) text column and the button never falls onto its own
   line (narrow-mobile fix, 2026-07-29). */
.cm-value > .copy-btn{grid-column:2;grid-row:1;align-self:start;}
/* The unencrypted-connection warning sits under the address, across BOTH grid columns, so it
   is never squeezed into the text column beside the copy button. Placement only: the type,
   weight and colour are the card's existing .dir-note-line notice, unchanged. */
.cm-value > .cm-insecure{grid-column:1/-1;grid-row:2;display:block;margin:2px 0 0;}
/* A DESIGNATED INTAKE ROUTE is the same row, with one type adjustment (2026-08-14, ADR-0024
   Amendment 6). Its label is a sentence, not a word — "Family shelter intake — Toronto Central
   Family Intake" — because it has to name both the purpose and the service that actually
   answers, so the number is never read as this organization's own. At the shared label's
   uppercase 11px with .07em tracking that sentence shouts and wraps badly, which is noise on a
   card someone is reading in a hurry. Sentence case, normal tracking, same weight and colour:
   it still reads as a contact label, and it stays legible at the length it actually is. */
.cm-route .cm-label{text-transform:none;letter-spacing:normal;font-size:12px;}

/* Program-owned contacts render through the same shared rows at a subordinate scale. */
.dir-prog .contact-methods.cm-sub{margin:8px 0 2px;padding:6px 0 6px 11px;border-left-width:3px;gap:6px;}
.cm-sub .cm-label{font-size:10px;letter-spacing:.06em;}
.cm-sub .cm-value{font-size:13.5px;}
.cm-sub a[href^="mailto:"],.cm-sub a.cm-web,.cm-sub a[href^="tel:"]{font-size:13.5px;}
.contact-methods a[href^="mailto:"],.contact-methods a.cm-web{font-weight:700;
  color:var(--purple-fill);display:inline-flex;align-items:center;flex-wrap:wrap;gap:.34em;
  min-height:44px;max-width:100%;min-width:0;overflow-wrap:anywhere;word-break:break-word;}
.contact-methods a[href^="mailto:"]::before,.contact-methods a.cm-web::before{content:"";
  flex:0 0 auto;width:.95em;height:.95em;background-color:currentColor;}
.contact-methods a[href^="mailto:"]::before{
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M2%206a2%202%200%200%201%202-2h16a2%202%200%200%201%202%202v.35l-10%206.25L2%206.35V6z'/%3E%3Cpath%20d='M22%208.7V18a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2V8.7l9.47%205.92a1%201%200%200%200%201.06%200L22%208.7z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M2%206a2%202%200%200%201%202-2h16a2%202%200%200%201%202%202v.35l-10%206.25L2%206.35V6z'/%3E%3Cpath%20d='M22%208.7V18a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2V8.7l9.47%205.92a1%201%200%200%200%201.06%200L22%208.7z'/%3E%3C/svg%3E") center/contain no-repeat;}
.contact-methods a.cm-web::before{
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M14%204h6v6h-2V7.41l-8.29%208.3-1.42-1.42L16.59%206H14V4z'/%3E%3Cpath%20d='M5%206h5v2H6v10h10v-4h2v5a1%201%200%200%201-1%201H5a1%201%200%200%201-1-1V7a1%201%200%200%201%201-1z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M14%204h6v6h-2V7.41l-8.29%208.3-1.42-1.42L16.59%206H14V4z'/%3E%3Cpath%20d='M5%206h5v2H6v10h10v-4h2v5a1%201%200%200%201-1%201H5a1%201%200%200%201-1-1V7a1%201%200%200%201%201-1z'/%3E%3C/svg%3E") center/contain no-repeat;}

/* ---- ACCESS GUIDANCE: THE CARD'S PRIMARY ACTION (2026-09-10) --------------------------
   "How to reach this service" / "What to say when you call" used to be a quiet purple text
   link, deliberately subordinate to Website/Email/Directions. That judgement is reversed by
   owner decision: it is one of the directory's most useful features and it was reading as an
   afterthought next to Share and Get directions.

   NOTHING NEW IS INTRODUCED. This is `.near-btn`'s treatment, which the search control has
   used since launch: the lime fill, ink text, the same 3px ink border, square corners, and
   the 3px hard shadow every other control in this system uses on hover. No new colour, no
   new font, no radius, no gradient, no icon.

   THE SECONDARY ACTIONS STAY SECONDARY. `.dir-act` (Share, Get directions) keeps its paper
   fill and outline, so the hierarchy is carried by FILL — one filled control per card
   region, everything else outlined — rather than by size or colour count.

   `min-height:44px` is the touch target, and it is on the button itself so it holds however
   the label wraps. Labels are not truncated in any language: the button grows downward and
   the text wraps, which is why there is no `white-space:nowrap` and no fixed width here. */
.dir-callguide{margin:12px 0;}
.cs-open-link{
  font-family:var(--body);font-weight:700;font-size:14px;
  background:var(--lime);color:var(--ink);
  border:3px solid var(--ink);border-radius:0;
  padding:10px 16px;min-height:44px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  box-sizing:border-box;max-width:100%;min-width:0;
  overflow-wrap:anywhere;text-decoration:none;transform:none;}
/* The hard shadow is the whole hover/focus signal, exactly as on `.near-btn` — the fill does
   NOT change, because a lime control that turns a different lime on hover reads as a state
   change nobody asked about. The global `:focus-visible` outline (purple, 3px) is inherited
   untouched, so keyboard focus stays visible on top of the shadow. */
.cs-open-link:hover,.cs-open-link:focus-visible{
  background:var(--lime);color:var(--ink);box-shadow:3px 3px 0 var(--ink);transform:none;}
/* On a narrow card the button already occupies its own line; let it take that line's full
   width so a wrapped translation sits in a sensible box instead of a ragged column. Matches
   the reasoning already applied to `.dir-head-t` at the same breakpoint. */
@media (max-width:560px){
  .cs-open-link{width:100%;}
}
/* Inside an EarlyON site card the trigger lives in the location's own info column, where it
   must stay tied to that site's phone. Keep it content-width there so it does not stretch
   across a column that is describing one address. */
.loc-info .cs-open-link{width:auto;align-self:flex-start;}
/* A program's own page: a quiet, subordinate link, not a primary action button. */
.dir-prog-actions{margin:8px 0 0;}
.dir-prog-link{font-weight:700;font-size:13px;color:var(--purple-fill);text-decoration:underline;
  display:inline-flex;align-items:center;min-height:36px;}
.dir-prog-link:hover,.dir-prog-link:focus-visible{color:var(--ink);}
/* Program delivery venue: a small caption so a venue reads as where the program is
   offered, not a branch of the organization. */
.loc-venue-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:#6a6467;margin-bottom:1px;}

/* v9 directory: program sub-blocks + EarlyON site cards */
.dir-prog{border-top:2px dashed var(--ink);margin-top:12px;padding-top:10px;min-width:0;}
.dir-prog-name{font-size:15px;margin:0 0 4px;font-weight:800;}
.dir-prog-lines{font-size:13.5px;line-height:1.55;margin:6px 0;}
.dir-prog-langs{font-size:13.5px;line-height:1.55;margin:6px 0;}
/* The program block never got the `overflow-wrap:anywhere` the rest of the card has, and it
   went unnoticed while program names were short. The SADV care centres are the case that
   found it — "Suspected Child Abuse and Neglect (SCAN) Program — The Hospital for Sick
   Children" beside a full hospital address, inside a block that is already indented. At a
   375px phone under 200% browser zoom (a ~188px layout viewport) that card was the only one
   of seventeen whose contents spilled past their box; nothing was clipped, because the
   overflow is visible and the page never scrolled sideways, but it was the only card doing
   it. `anywhere` rather than `break-word` for the same reason it is used above: it is
   allowed to break inside a long word to avoid overflow, which is exactly the case here.
   The region line is a place name and gets the same treatment. */
.dir-prog-name,.dir-prog-lines,.dir-prog-langs,.dir-prog-region{overflow-wrap:anywhere;}
.dir-prog-region{font-size:13.5px;line-height:1.55;margin:4px 0;}
.dir-map-block{margin-top:18px;}
/* ---- map action: ONE ticket-style control, close to the Show more / Start over row and aligned
   to the results column (§1). Same handmade "ticket" visual language as the ALL SERVICES path
   ticket (.flow-path): Movement display type, lavender fill, thick ink border, a slight tilt —
   not a plain rectangle. The map-pin icon is secondary (smaller, before the text). No eyebrow,
   no caption, no location count. Hidden entirely when there are zero eligible map locations. ---- */
.dir-map-cta{margin-top:12px;}
.dir-map-cta[hidden]{display:none;}
.dir-map-ticket{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:7px 18px;cursor:pointer;
  font-family:var(--display),var(--body);font-size:clamp(18px,2.2vw,22px);line-height:1.05;color:var(--ink);
  background:var(--lavender);border:3px solid var(--ink);transform:rotate(-.5deg);
  box-shadow:3px 3px 0 rgba(34,30,31,.28);transition:transform .08s ease,box-shadow .08s ease,background .12s ease;}
.dir-map-ticket-text{text-transform:uppercase;letter-spacing:.02em;}
.dir-map-ticket-ico{flex:0 0 auto;width:20px;height:20px;color:var(--ink);opacity:.9;}
.dir-map-ticket:hover{background:color-mix(in srgb,var(--lavender) 78%,white);transform:rotate(-.5deg) translateY(-1px);box-shadow:5px 5px 0 rgba(34,30,31,.28);}
.dir-map-ticket:active{transform:rotate(-.5deg) translateY(1px);box-shadow:2px 2px 0 rgba(34,30,31,.28);}
.dir-map-ticket[aria-expanded="true"]{background:var(--lime);}
.dir-map-ticket:focus-visible{outline:3px solid var(--purple-deep);outline-offset:3px;}
/* =========================================================================================
   Results map — calm, secondary presentation (revised 2026-08-03). Ya Estoy Aquí FIRST
   (ADR-0015 restraint, ADR-0008 unequal hierarchy): brand palette only, a quiet framed FULL-
   WIDTH map with a compact toolbar above it; the category filter is a native <details> drawer
   (opened deliberately), never a permanent "wall of equal buttons" beside the map. Progressive
   markers (ADR-0008): the all-category overview shows small location dots, and a selection
   promotes matching locations to readable coded markers. Marker colour encodes interaction
   STATE only (browse = paper, category = lime, need/secondary = lavender) — never category,
   importance, delivery mode or urgency (ADR-0019); category identity is the two-letter CODE.
   ========================================================================================= */
/* ---- framed, full-width map module ---- */
.dir-map-stage{position:relative;margin-top:12px;display:flex;flex-direction:column;gap:10px;}
.dir-map-canvas-wrap{position:relative;}
.dir-map-canvas{height:56vw;max-height:440px;min-height:300px;border:3px solid var(--ink);border-radius:16px;
  background:#e9e4ef;box-shadow:5px 5px 0 rgba(34,30,31,.14);}
@media (min-width:640px){ .dir-map-canvas{height:440px;max-height:none;} }
/* Wide desktop: a breakout module wider than the text column (centred on the viewport with
   margins only — never `transform`, which would trap the fixed expanded stage in this block).
   The map is the FULL width of the module; the legend is a drawer, not a permanent column. */
@media (min-width:1080px){
  .dir-map-wrap{width:min(1120px,calc(100vw - 40px));margin-left:calc(50% - min(560px, 50vw - 20px));}
  .dir-map-canvas{height:520px;}
}

/* ---- compact toolbar above the map ---- */
.dir-map-toolbar{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;justify-content:space-between;}
.dir-map-count{margin:0;font-weight:700;font-size:13px;color:var(--ink);}
.dir-map-toolbar-right{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.dir-map-tool{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:7px 14px;cursor:pointer;
  background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:22px;font:inherit;font-size:12.5px;font-weight:700;line-height:1.2;}
.dir-map-tool:hover{background:#f3eef7;}
.dir-map-tool:focus-visible{outline:3px solid var(--purple-deep);outline-offset:2px;}
.dir-map-filter-ico{font-size:12px;color:var(--purple-fill);}
summary.dir-map-tool{list-style:none;}
summary.dir-map-tool::-webkit-details-marker{display:none;}
.dir-map-filter[open] > summary.dir-map-tool{background:var(--lavender);}
.dir-map-filter.has-selection > summary.dir-map-tool{box-shadow:inset 0 0 0 2px var(--lime);} /* lime = active filter, not dominant */
.dir-map-filter-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;
  background:var(--ink);color:var(--paper);border-radius:11px;font-size:11px;font-weight:800;}
/* quiet selection summary + reset, only when a category filter is active */
.dir-map-selstate{display:inline-flex;align-items:center;gap:4px;padding:3px 3px 3px 12px;
  background:var(--lavender);border:2px solid var(--ink);border-radius:22px;font-size:12px;font-weight:700;max-width:min(56vw,300px);}
.dir-map-selstate-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dir-map-reset{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 auto;
  background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:50%;cursor:pointer;font-size:17px;line-height:1;}
.dir-map-reset:hover{background:#f3eef7;}
.dir-map-reset:focus-visible{outline:3px solid var(--purple-deep);outline-offset:2px;}

/* ---- category drawer (native <details> panel) ---- */
.dir-map-filter{position:relative;width:100%;}                 /* mobile: full-width disclosure above the map */
.dir-map-filter > summary.dir-map-tool{width:100%;justify-content:center;}
.dir-map-drawer{margin-top:8px;background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:14px;
  padding:12px 14px;box-shadow:4px 4px 0 rgba(34,30,31,.14);}
.dir-map-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:2px;}
.dir-map-drawer-title{margin:0;font-family:var(--display,inherit);font-weight:700;font-size:16px;letter-spacing:.01em;color:var(--purple-deep);}
.dir-map-drawer-close{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:0 0 auto;
  background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:50%;cursor:pointer;font-size:20px;line-height:1;}
.dir-map-drawer-close:focus-visible{outline:3px solid var(--purple-deep);outline-offset:2px;}
.dir-map-drawer-sel{margin:2px 0 8px;font-size:12px;font-weight:600;color:#4a4547;line-height:1.4;}
@media (min-width:720px){
  .dir-map-filter{width:auto;}
  .dir-map-filter > summary.dir-map-tool{width:auto;}
  /* tablet / narrow desktop: opening takes a full-width toolbar row so the drawer appears
     full-width DIRECTLY ABOVE the map (pushing it down) — it never covers the map. */
  .dir-map-filter[open]{flex-basis:100%;order:9;}
}
/* Below wide-desktop, an open filter takes the whole toolbar width so its drawer is full-width
   above the map (progressive enhancement; without :has() it stays the toolbar-right width). */
@media (max-width:1079px){
  .dir-map-toolbar:has(.dir-map-filter[open]) .dir-map-toolbar-right{flex-basis:100%;width:100%;}
}
@media (min-width:1080px){
  /* WIDE desktop only: the drawer opens deliberately OVER the map's upper-right and closing
     cleanly returns the whole map area. */
  .dir-map-filter[open]{flex-basis:auto;order:0;}
  .dir-map-drawer{position:absolute;top:calc(100% + 8px);right:0;width:340px;max-height:min(66vh,480px);overflow:auto;margin-top:0;z-index:1200;}
}
/* "All categories" reset — a COMPACT pill (not a giant lime card); lime only when it is the
   active state (nothing else selected → all shown). */
.dir-cat-all{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;cursor:pointer;margin:0 0 10px;
  border:2px solid var(--ink);border-radius:20px;background:var(--paper);color:var(--ink);font:inherit;font-size:12.5px;font-weight:700;}
.dir-cat-all.is-active{background:var(--lime);}
.dir-cat-all:focus-visible{outline:3px solid var(--purple-deep);outline-offset:2px;}
.dir-map-legend-fs{border:0;padding:0;margin:0;min-inline-size:0;}
.dir-map-legend-items{display:flex;flex-direction:column;gap:5px;}
/* one compact category ROW: [badge] name · the number of map locations it shows; lavender + check when selected */
.dir-cat-chip{display:block;cursor:pointer;}
.dir-cat-chip input{position:absolute;opacity:0;pointer-events:none;}
.dir-cat-chip > span{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:center;
  min-height:44px;padding:5px 10px;border:2px solid var(--ink);border-radius:10px;background:var(--paper);color:var(--ink);line-height:1.2;}
.dir-cat-chip input:checked + span{background:var(--lavender);}
.dir-cat-chip input:focus-visible + span{outline:3px solid var(--purple-deep);outline-offset:2px;}
.dir-cat-lbl{display:inline-flex;align-items:center;gap:8px;min-width:0;}
.dir-cat-badge + .dir-cat-name{min-width:0;}
.dir-cat-badge{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding:0 4px;
  border:2px solid var(--ink);border-radius:6px;background:var(--paper);color:var(--ink);font-weight:800;font-size:11px;}
.dir-cat-name{font-weight:700;font-size:13px;overflow-wrap:anywhere;}
.dir-cat-chip input:checked + span .dir-cat-name::after{content:" \2713";font-weight:800;} /* checkmark, not colour-only */
.dir-cat-loc{text-align:right;font-weight:700;font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap;}
/* Subordinate opt-in rows in the map drawer (2026-08-04, revised): the "Also show EarlyON"
   inclusion and the CHC-door "Also show program locations" toggle each render one level down,
   under a quiet lavender left rule, as a compact VISIBLE native checkbox + label (the shared
   .dir-optin control) — never a peer of the primary category rows, no location count (ADR-0008). */
.dir-cat-subwrap{margin:1px 0 2px 14px;padding-left:10px;border-left:3px solid var(--lavender);}
/* NARROW SCREENS: the category name gets the whole row, and the location count sits beneath it
   (2026-08-30). The row is a two-column grid — [badge + name | N locations] — and the count column
   is deliberately `white-space:nowrap`, so at 320px the name column collapsed to about 66px. With
   `overflow-wrap:anywhere` as its only defence against overflow, the browser then had to break
   inside words: "Embaraz / o y bebé recién nacido", "Salud mental y bienesta / r". Seven line
   boxes for one category name, on the screen size most of this audience is reading on.
   Stacking below 420px gives the name roughly 238px instead of 66px, so the line breaker gets
   the ordinary between-word opportunities it was denied and `anywhere` is never reached. Nothing
   changes at 420px and above, and no label text changes in any language. */
@media (max-width:419px){
  .dir-cat-chip > span{grid-template-columns:1fr;row-gap:2px;align-items:start;padding:8px 10px;}
  .dir-cat-loc{text-align:left;}
}

/* ---- notes below the map: aligned to the reading column, calm, deliberate spacing ---- */
.dir-map-notes{max-width:640px;margin:16px auto 0;}
.dir-map-notes .dir-hint{margin:0;padding:12px 14px;background:var(--paper);border:2px solid var(--ink);border-radius:10px;
  font-size:13.5px;font-weight:600;line-height:1.5;box-shadow:3px 3px 0 rgba(34,30,31,.12);}
.dir-map-notes .dir-hint + .dir-hint{margin-top:10px;}

/* ---- expand / close control (bottom-left of the map) ---- */
.dir-map-expand{position:absolute;left:12px;bottom:12px;z-index:1001;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);
  background:var(--paper);border:3px solid var(--ink);border-radius:11px;box-shadow:2px 2px 0 rgba(34,30,31,.28);font-size:19px;line-height:1;}
.dir-map-expand:hover{background:var(--lime);}
.dir-map-expand:focus-visible{outline:3px solid var(--purple-deep);outline-offset:2px;}
.dir-map-expand .dir-map-expand-close{display:none;}
.dir-map-stage--expanded .dir-map-expand-open{display:none;}
.dir-map-stage--expanded .dir-map-expand-close{display:inline;}
.dir-map-stage--expanded .dir-map-expand{top:12px;right:12px;bottom:auto;left:auto;}

/* ---- expanded (fullscreen) state: toolbar on top, map fills the rest ---- */
.dir-map-stage--expanded{position:fixed;inset:0;z-index:2000;margin:0;background:var(--paper);
  display:flex;flex-direction:column;gap:0;padding:10px 12px 12px;}
.dir-map-stage--expanded .dir-map-toolbar{flex:0 0 auto;}
.dir-map-stage--expanded .dir-map-canvas-wrap{flex:1 1 auto;position:relative;margin-top:10px;}
.dir-map-stage--expanded .dir-map-canvas{height:100%;min-height:0;max-height:none;border-radius:12px;}
.dir-map-body-lock{overflow:hidden;}

/* ---- service-card popups (brand colours only) ---- */
.leaflet-popup-content-wrapper{background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:14px;
  box-shadow:5px 5px 0 rgba(34,30,31,.22);}
.leaflet-popup-content{margin:13px 15px;font-family:var(--body);font-size:13.5px;line-height:1.5;color:var(--ink);max-width:250px;}
.leaflet-popup-content strong{font-family:var(--display,inherit);font-weight:700;font-size:16.5px;line-height:1.15;display:inline-block;margin-bottom:2px;}
.leaflet-popup-tip{background:var(--paper);border:3px solid var(--ink);}
.leaflet-popup-close-button{width:26px!important;height:26px!important;font-size:20px!important;color:var(--ink)!important;
  border:2px solid var(--ink)!important;border-radius:50%;background:var(--paper)!important;top:8px!important;right:8px!important;line-height:22px!important;}
.leaflet-popup-close-button:focus-visible{outline:3px solid var(--purple-deep);outline-offset:2px;}
.dir-map-pop-cats{display:block;margin-top:4px;font-weight:600;color:var(--ink);font-size:12px;}
.dir-map-pop-prog{color:var(--purple-fill);font-style:normal;font-weight:700;}
.dir-map-pop-site{display:block;font-weight:600;font-size:13px;color:var(--ink);}
.dir-map-pop-list{margin:8px 0 0;padding-left:18px;}
.dir-map-pop-list li{margin:0 0 8px;}
.leaflet-popup-content a[href^="https://www.google.com/maps"]{display:inline-flex;align-items:center;min-height:38px;
  margin-top:9px;padding:6px 14px;background:var(--lime);color:var(--ink);border:2px solid var(--ink);border-radius:20px;
  font-weight:700;text-decoration:none;font-size:12.5px;}
.leaflet-popup-content a[href^="https://www.google.com/maps"]:hover{background:var(--lime-deep);}
.leaflet-popup-content a[href^="https://www.google.com/maps"]:focus-visible{outline:3px solid var(--purple-deep);outline-offset:2px;}

/* ---- Leaflet zoom / attribution restyled to the Ya Estoy Aquí interface ---- */
.leaflet-bar{border:3px solid var(--ink);border-radius:11px;box-shadow:2px 2px 0 rgba(34,30,31,.25);overflow:hidden;}
.leaflet-bar a,.leaflet-bar a:hover{width:40px;height:40px;line-height:38px;background:var(--paper);color:var(--ink);
  font-weight:800;font-size:21px;border-bottom:2px solid var(--ink);}
.leaflet-bar a:last-child{border-bottom:0;}
.leaflet-bar a:hover{background:var(--lime);}
.leaflet-bar a:focus-visible{outline:3px solid var(--purple-deep);outline-offset:-3px;}
.leaflet-control-attribution{background:rgba(255,255,255,.88)!important;color:#2c2a2a!important;font-family:var(--body);font-size:11px;}
.leaflet-control-attribution a{color:var(--purple-fill)!important;}

/* "Matches through its program: …" note in a directory card. */
.dir-match-note{font-weight:700;}
.dir-match-note::before{content:"↳ ";color:var(--purple-fill);}

/* ---- markers ---- */
.dir-cat-marker-wrap,.dir-loc-dot-wrap{background:none;border:0;}
/* overview LOCATION DOT: small, calm, high-contrast over light tiles */
.dir-loc-dot{display:block;width:12px;height:12px;border-radius:50%;background:var(--purple-fill);
  border:2px solid var(--ink);box-shadow:0 1px 2px rgba(34,30,31,.4);transition:transform .12s,box-shadow .12s;}
/* focused CODED marker: two-letter code + optional integrated "+N"; colour by interaction state */
.dir-cat-marker{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 4px;
  border:3px solid var(--ink);border-radius:16px;background:var(--paper);color:var(--ink);white-space:nowrap;
  font-family:var(--body);font-weight:800;font-size:12px;letter-spacing:.01em;
  box-shadow:0 1px 3px rgba(34,30,31,.45);transition:transform .12s,box-shadow .12s;}
.dir-cat-marker .mk-n{font-size:9px;font-weight:800;margin-left:2px;}
#dirMap.mmode-cat .dir-cat-marker{background:var(--lime);}
#dirMap.mmode-refine .dir-cat-marker{background:var(--lavender);}
/* multi-category: restrained ink double ring, in addition to the "+N" */
.dir-cat-marker.has-more{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink),0 1px 3px rgba(34,30,31,.45);}
/* hover / keyboard-focus / open-popup → purple ring + slight grow (never hover-only) */
.dir-cat-marker-wrap:hover .dir-cat-marker,
.leaflet-marker-icon:focus .dir-cat-marker,
.leaflet-marker-icon:focus-visible .dir-cat-marker{transform:scale(1.18);box-shadow:0 0 0 3px var(--purple-deep),0 2px 6px rgba(34,30,31,.5);}
.dir-loc-dot-wrap:hover .dir-loc-dot,
.leaflet-marker-icon:focus .dir-loc-dot,
.leaflet-marker-icon:focus-visible .dir-loc-dot{transform:scale(1.5);box-shadow:0 0 0 3px var(--purple-deep);}
.leaflet-marker-icon:focus,.leaflet-marker-icon:focus-visible{outline:none;}
@media (prefers-reduced-motion:reduce){ .dir-cat-marker,.dir-loc-dot{transition:none;} }

/* ---- service-card popups (brand colours only) ---- */
.leaflet-popup-content-wrapper{background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:14px;
  box-shadow:5px 5px 0 rgba(34,30,31,.22);}
.leaflet-popup-content{margin:13px 15px;font-family:var(--body);font-size:13.5px;line-height:1.5;color:var(--ink);max-width:250px;}
.leaflet-popup-content strong{font-family:var(--display,inherit);font-weight:700;font-size:16.5px;line-height:1.15;display:inline-block;margin-bottom:2px;}
.leaflet-popup-tip{background:var(--paper);border:3px solid var(--ink);}
.leaflet-popup-close-button{width:26px!important;height:26px!important;font-size:20px!important;color:var(--ink)!important;
  border:2px solid var(--ink)!important;border-radius:50%;background:var(--paper)!important;top:8px!important;right:8px!important;line-height:22px!important;}
.leaflet-popup-close-button:focus-visible{outline:3px solid var(--purple-deep);outline-offset:2px;}
.dir-map-pop-cats{display:block;margin-top:4px;font-weight:600;color:var(--ink);font-size:12px;}
.dir-map-pop-prog{color:var(--purple-fill);font-style:normal;font-weight:700;}
.dir-map-pop-site{display:block;font-weight:600;font-size:13px;color:var(--ink);}
.dir-map-pop-list{margin:8px 0 0;padding-left:18px;}
.dir-map-pop-list li{margin:0 0 8px;}
.leaflet-popup-content a[href^="https://www.google.com/maps"]{display:inline-flex;align-items:center;min-height:38px;
  margin-top:9px;padding:6px 14px;background:var(--lime);color:var(--ink);border:2px solid var(--ink);border-radius:20px;
  font-weight:700;text-decoration:none;font-size:12.5px;}
.leaflet-popup-content a[href^="https://www.google.com/maps"]:hover{background:var(--lime-deep);}
.leaflet-popup-content a[href^="https://www.google.com/maps"]:focus-visible{outline:3px solid var(--purple-deep);outline-offset:2px;}

/* ---- Leaflet zoom / attribution restyled to the Ya Estoy Aquí interface ---- */
.leaflet-bar{border:3px solid var(--ink);border-radius:11px;box-shadow:2px 2px 0 rgba(34,30,31,.25);overflow:hidden;}
.leaflet-bar a,.leaflet-bar a:hover{width:40px;height:40px;line-height:38px;background:var(--paper);color:var(--ink);
  font-weight:800;font-size:21px;border-bottom:2px solid var(--ink);}
.leaflet-bar a:last-child{border-bottom:0;}
.leaflet-bar a:hover{background:var(--lime);}
.leaflet-bar a:focus-visible{outline:3px solid var(--purple-deep);outline-offset:-3px;}
.leaflet-control-attribution{background:rgba(255,255,255,.88)!important;color:#2c2a2a!important;font-family:var(--body);font-size:11px;}
.leaflet-control-attribution a{color:var(--purple-fill)!important;}

/* "Matches through its program: …" note in a directory card — marks WHY an org appeared
   under a category/need when the match is program-owned, without implying the parent owns it. */
.dir-match-note{font-weight:700;}
.dir-match-note::before{content:"↳ ";color:var(--purple-fill);}

/* ---- markers: brand-only, coloured by interaction STATE (mode class on #dirMap) ---- */
.dir-cat-marker-wrap{background:none;border:0;}
.dir-cat-marker{display:flex;align-items:center;justify-content:center;width:28px;height:28px;
  border:3px solid var(--ink);border-radius:50%;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-weight:800;font-size:11.5px;letter-spacing:.01em;
  box-shadow:0 1px 3px rgba(34,30,31,.45);transition:transform .12s ease,box-shadow .12s ease;}
#dirMap.mmode-cat .dir-cat-marker{background:var(--lime);}
#dirMap.mmode-refine .dir-cat-marker{background:var(--lavender);}
/* multi-category location: a restrained ink double ring (no separate badge) */
.dir-cat-marker.has-more{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink),0 1px 3px rgba(34,30,31,.45);}
/* Default provider-door marker (ADR-0020): an honest verified door identity — CHC / SH / MW — from
   the explicit door flag, not a cryptic category badge, so it needs a wider pill that fits up to
   three letters and never shows a "+N" (a location's other categories live in its popup, not the pin). */
.dir-cat-marker.is-door{width:auto;min-width:36px;border-radius:16px;padding:0 8px;letter-spacing:.02em;}
/* hover / keyboard-focus / open-popup → purple ring + slight grow (never hover-only) */
.dir-cat-marker-wrap:hover .dir-cat-marker,
.leaflet-marker-icon:focus .dir-cat-marker,
.leaflet-marker-icon:focus-visible .dir-cat-marker{transform:scale(1.2);
  box-shadow:0 0 0 3px var(--purple-deep),0 2px 6px rgba(34,30,31,.5);}
.leaflet-marker-icon:focus,.leaflet-marker-icon:focus-visible{outline:none;}
@media (prefers-reduced-motion:reduce){ .dir-cat-marker,.dir-map-legend-toggle span{transition:none;} }
.hours{display:block;font-size:13px;margin-top:3px;}
/* v9.1 EarlyON presentation (record-by-record audit implementation, 2026-07-12) */
.eo-intro{background:var(--paper);border:3px solid var(--ink);padding:14px 16px;margin:0 0 16px;
  box-shadow:4px 4px 0 rgba(34,30,31,.25);}
.eo-intro p{margin:0 0 8px;font-size:14.5px;line-height:1.6;}
.eo-intro p:last-child{margin-bottom:0;}
.eo-intro .eo-src{font-size:12.5px;color:#4a4547;}
.eo-guided{border:3px dashed var(--ink);background:var(--paper);padding:14px 16px;margin:0 0 18px;}
.eo-guided .dir-q{margin:0 0 10px;}
.eo-chiprow{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 10px;}
.eo-choice{font:inherit;font-weight:700;font-size:13.5px;border:3px solid var(--ink);background:var(--paper);
  padding:9px 13px;cursor:pointer;min-height:44px;}
.eo-choice[aria-pressed="true"]{background:var(--lime);box-shadow:3px 3px 0 var(--ink);}
.eo-choice:focus-visible{outline:3px solid var(--purple-deep);outline-offset:2px;}
.eo-subrow .eo-choice{font-size:12.5px;padding:7px 11px;}
.eo-free{margin:0 0 6px;font-size:13.5px;font-weight:700;}
.eo-free-tag{background:var(--lime);border:2px solid var(--ink);padding:2px 8px;margin-right:8px;display:inline-block;}
.eo-status{margin:6px 0;font-size:13.5px;font-weight:600;}
.eo-childcare{margin:22px 0 6px;}
.eo-childcare h3{margin:0 0 8px;font-size:16px;}
.eo-childcare .dir-actions{margin-top:10px;}


/* ==== Find Care & Support level D (2026-07-16 reorganization) ==== */
/* Levels C and E were removed on 2026-08-31: the "Looking for something else?"
   ticket shortcuts and the Browse-all fallback that had been folded into that
   section's primary button. Their rules (.fcs-else, .tk-sec-h, .tk-sec-sub,
   .ticket-row, .ticket, .tk-need, .tk-act, .fcs-browse-all, .fcs-browse-cta)
   went with them; no page that loads this stylesheet uses them any more.
   CONNECT's postnatal tickets are unaffected — guide-connect.html carries its
   own inline copy of the ticket rules and does not load this file. */

/* Level D: tools row - compact, quiet, clearly not provider doors. */
.fcs-tools{background:#f7f5ee;border-top:3px solid var(--ink);}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:18px 0 6px;}
.tool-card{display:flex;flex-direction:column;gap:6px;background:var(--paper);border:2px solid var(--ink);
  padding:14px 16px;text-decoration:none;color:var(--ink);}
.tool-card:hover{background:#fffdf6;box-shadow:3px 3px 0 var(--ink);}
.tool-card:focus-visible{outline:3px solid var(--purple-deep);outline-offset:2px;}
.tool-icon{width:34px;height:34px;}
.tool-name{font-weight:800;font-size:14.5px;line-height:1.3;}
.tool-sub{font-size:12.5px;line-height:1.45;color:#4a4547;}

/* On paper, browsers drop backgrounds by default, so the band prints as white
   and --band-text (#FFFFFF on the ink band) would print invisibly — the band's
   heading and list already did; inheriting it would have taken the link with
   them. Force ink for print only. Pages that hide .key-band in their own
   @media print block are unaffected. Added 2026-08-31. */
@media print{.key-title,.key-list,.key-band a{color:var(--ink);}}