/* CANM I.Map 3.0 — merge layer
   1) token bridge so engine components (assistant) inherit the design system
   2) small additions the prototype had no surface for: gate errors, map engage hint, EN/FR toggle, ask button */

/* ---- 1. token bridge (design tokens → engine token names) ---- */
html{
  --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Helvetica,Arial,sans-serif;
  --font-condensed:var(--font-display);
  --r-pill:999px;--tabbar-h:0px;
  --dur-fast:160ms;--dur-mid:280ms;--dur-panel:480ms;--ease-out:cubic-bezier(.25,.1,.25,1);--ease-emphatic:cubic-bezier(.32,.72,0,1);
  --ink-100:var(--text);--ink-85:var(--text);--ink-70:var(--text-2);--ink-55:var(--text-2);--ink-40:var(--text-3);--ink-on-accent:#fff;
  --stroke-faint:var(--hairline-2);--stroke-soft:var(--hairline);--stroke-violet:var(--accent);
  --fg-04:var(--chip);--fg-05:var(--chip);--fg-06:var(--chip);--fg-08:var(--chip);--fg-10:var(--chip);--fg-18:var(--hairline);
  --bg-glass-2:var(--card);
  --violet-500:var(--accent);--violet-300:var(--accent);--violet-700:var(--red);--violet-a14:var(--red-soft);
  --tint-violet:var(--red-soft);--tint-violet-bd:transparent;--tint-violet-ink:var(--accent);
  --tint-amber:var(--violet-soft);--tint-amber-bd:transparent;--tint-amber-ink:var(--violet);
  --cyan:var(--violet);--green:var(--accent);
  --c-hospital:var(--accent);--c-clinic:var(--violet);--c-cancer:var(--accent);--c-research:var(--violet);
  --shadow-panel:0 30px 90px -20px rgba(0,0,0,.55);--shadow-glow:0 14px 40px -12px rgba(232,37,58,.55);--shadow-chip:0 2px 10px rgba(0,0,0,.18);
}
html[data-theme="light"]{--shadow-panel:0 30px 80px -24px rgba(0,0,0,.28);--shadow-chip:0 2px 10px rgba(0,0,0,.08)}

/* ---- 2a. gate: access code + error ---- */
.gate__error{min-height:18px;font-size:12.5px;color:var(--accent);margin:-2px 0 0}
.gate__req{font-size:13px;color:var(--text-3)}
.gate__req a{color:var(--text-2)}.gate__req a:hover{color:var(--text)}
.gate__card.is-shake{animation:gate-shake .42s}
@keyframes gate-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.gate__form input{letter-spacing:.08em;text-align:center}

/* ---- 2b. map: engage hint (desktop) ---- */
.map-engage{position:absolute;right:16px;top:calc(var(--nav-h) + 16px);z-index:4;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border:1px solid var(--hairline);border-radius:999px;padding:7px 12px;pointer-events:none;opacity:.9;transition:opacity .3s var(--ease)}
.is-engaged .map-engage{opacity:0}
@media (max-width:900px){.map-engage{display:none}}

/* ---- 2c. panel: EN / FR toggle ---- */
.panel h4.panel__h--split{display:flex;align-items:center;justify-content:space-between}
.lang{display:inline-flex;border:1px solid var(--hairline);border-radius:999px;overflow:hidden}
.lang button{font-size:10.5px;font-weight:700;letter-spacing:.1em;padding:3px 9px;color:var(--text-3)}
.lang button.is-on{background:var(--text);color:var(--bg)}
.panel__note{font-size:12.5px;color:var(--text-3);margin-top:10px}

/* ---- 2d. nav "Ask" button + assistant placement ---- */
.nav__ask{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-2);transition:color .2s}
.nav__ask:hover{color:var(--text)}
.nav__ask svg{width:15px;height:15px}
@media (max-width:900px){.nav__ask span{display:none}}
.assist-launcher{z-index:58}
.footer__vintage{font-size:12px;color:var(--text-3)}

/* ---- 2e. placement: the nav "Ask" is the entry point on desktop; the floating launcher only appears once the hero rail is out of the way ---- */
.assist-launcher{opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
html.is-scrolled .assist-launcher{opacity:1;pointer-events:auto;transform:none}
/* zoom control sits clear of the card rail */
.hero .mapboxgl-ctrl-bottom-right{bottom:auto;top:calc(var(--nav-h) + 58px);right:6px}
@media (max-width:900px){.hero .mapboxgl-ctrl-bottom-right{display:none}}

/* ---- preview release pill (phase 1 launch label; remove when CONFIG.RELEASE becomes "stable") */
.nav__preview{display:inline-flex;align-items:center;align-self:center;margin-left:10px;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:600;line-height:1.6;letter-spacing:.08em;text-transform:uppercase;color:var(--accent,#e8253a);border:1px solid color-mix(in srgb,var(--accent,#e8253a) 45%,transparent);background:color-mix(in srgb,var(--accent,#e8253a) 10%,transparent);white-space:nowrap}
@media (max-width:640px){.nav__preview{display:none}}


/* ---- partners: subtle corner ribbon, modal, tiered section, text acknowledgements */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ihero{position:relative}
.pribbon{position:fixed;top:0;right:0;z-index:70;pointer-events:none}
.pribbon__clip{width:150px;height:150px;overflow:hidden;position:absolute;top:0;right:0}
/* band centre on x+y = 160px from the corner: it crosses the nav's empty right gutter and clears the Sign in / Sign out button */
.pribbon__band{pointer-events:auto;position:absolute;top:71px;right:-40px;width:230px;transform:rotate(45deg);background:var(--glass,rgba(10,10,12,.72));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--text-2);border:0;border-top:1px solid var(--hairline-2);border-bottom:1px solid var(--hairline-2);padding:8px 0 9px;font-family:inherit;font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.22);cursor:pointer;transition:color .2s,border-color .2s}
.pribbon__band:hover,.pribbon.is-open .pribbon__band{color:var(--accent,#e8253a);border-color:color-mix(in srgb,var(--accent,#e8253a) 45%,transparent)}
.pribbon__pop{pointer-events:auto;position:absolute;top:calc(var(--nav-h) + 90px);right:16px;width:min(360px,calc(100vw - 32px));padding:20px 20px 18px;border-radius:var(--r-lg,18px);background:var(--card);border:1px solid var(--hairline-2);box-shadow:0 24px 60px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transform:translateY(-6px);visibility:hidden;transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s .22s}
.pribbon.is-open .pribbon__pop{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.pribbon__title{margin:0 0 10px;font-family:var(--font-display);font-size:22px;line-height:1.1}
.pribbon__body{margin:0 0 8px;font-size:13px;line-height:1.5;color:var(--text-2)}
.pribbon__body b{font-weight:600;color:var(--text-1,inherit)}
.pribbon__note{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--hairline-2);font-size:12px;line-height:1.5;color:var(--text-3)}
.pribbon__cta{display:inline-block;margin-top:12px;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--accent,#e8253a);text-decoration:none}
.pribbon__cta:hover{text-decoration:underline}
.ptiers{margin-top:clamp(28px,4vw,48px);display:grid;gap:clamp(24px,3vw,40px)}
.ptiers__label{margin:0 0 4px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent,#e8253a)}
.ptiers__names{margin:0 0 14px;font-size:13px;color:var(--text-3)}
.ptiers__grid{display:grid;gap:12px}
.ptiers__grid--principal{grid-template-columns:repeat(4,minmax(0,1fr))}
.ptiers__grid--supporting{grid-template-columns:repeat(5,minmax(0,1fr))}
.ptile{margin:0;background:var(--tile-logo,rgba(255,255,255,.06));border:1px solid var(--hairline-2);border-radius:var(--r-md,12px);display:grid;place-items:center;padding:18px}
.ptile--principal{height:118px}.ptile--principal img{max-height:56px;max-width:84%;object-fit:contain}
.ptile--supporting{height:84px;padding:14px}.ptile--supporting img{max-height:36px;max-width:80%;object-fit:contain;opacity:.92}
.ptiers__disclaimer{margin:22px 0 0;font-size:13px;color:var(--text-3)}
.gate__partners{margin:18px 0 0;font-size:12.5px;line-height:1.5;color:var(--text-3)}
.gate__partners a{color:var(--accent,#e8253a);text-decoration:none}.gate__partners a:hover{text-decoration:underline}
.panel__correct{margin-top:22px;padding:12px 14px;border:1px dashed var(--hairline-2);border-radius:var(--r-md,12px);font-size:12.5px;line-height:1.5;color:var(--text-3)}
.panel__correct a{color:var(--accent,#e8253a);font-weight:600;text-decoration:none}.panel__correct a:hover{text-decoration:underline}
.correct{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,4vw,56px);align-items:center}
.correct .section__sub{max-width:56ch}
@media (max-width:900px){.ptiers__grid--principal{grid-template-columns:repeat(2,minmax(0,1fr))}.ptiers__grid--supporting{grid-template-columns:repeat(3,minmax(0,1fr))}.correct{grid-template-columns:1fr}}
@media (max-width:900px){.pribbon{top:var(--nav-h)}.pribbon__clip{width:118px;height:118px}.pribbon__band{top:26px;right:-58px;width:210px;font-size:8.5px;padding:6px 0 7px}.pribbon__pop{top:100px;right:12px}}
/* stack at the hero's top-right: ribbon (viewport corner, ~110px below the nav) → engage hint → zoom control */
.nav__word{white-space:nowrap}
.map-engage{top:calc(var(--nav-h) + 118px)}
.hero .mapboxgl-ctrl-top-right,.hero .mapboxgl-ctrl-bottom-right{top:calc(var(--nav-h) + 156px)}

/* ---- completeness pill + popover (the nav pill shows a live figure once data loads) */
.nav__preview{cursor:pointer;transition:background .2s,border-color .2s}
.nav__preview:hover,.nav__preview[aria-expanded="true"]{background:color-mix(in srgb,var(--accent,#e8253a) 18%,transparent);border-color:color-mix(in srgb,var(--accent,#e8253a) 70%,transparent)}
.cpop{position:fixed;top:calc(var(--nav-h) + 10px);left:50%;transform:translate(-50%,-6px);z-index:71;width:min(420px,calc(100vw - 32px));padding:20px 20px 18px;border-radius:var(--r-lg,18px);background:var(--card);border:1px solid var(--hairline-2);box-shadow:0 24px 60px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;visibility:hidden;transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s .22s}
.cpop.is-open{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
.cpop__title{margin:0;font-family:var(--font-display);font-size:30px;line-height:1}
.cpop__sub{margin:6px 0 14px;font-size:12.5px;line-height:1.5;color:var(--text-3)}
.cpop__rows{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.cpop__rows li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:10px;align-items:center;font-size:12.5px}
.cpop__label{color:var(--text-2)}
.cpop__bar{height:6px;border-radius:999px;background:var(--hairline-2);overflow:hidden}
.cpop__bar i{display:block;height:100%;border-radius:999px;background:var(--accent,#e8253a)}
.cpop__n{font-variant-numeric:tabular-nums;color:var(--text-3);font-size:11.5px;white-space:nowrap}
.cpop__note{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--hairline-2);font-size:12px;line-height:1.5;color:var(--text-3)}
.cpop__cta{display:inline-block;margin-top:12px}
@media (max-width:640px){.nav__preview{display:inline-flex}.nav__preview{margin-left:6px;padding:2px 6px;font-size:9.5px}}

/* ---- accessibility + legal page */
.skip-link{position:fixed;top:-60px;left:16px;z-index:200;padding:10px 14px;border-radius:10px;background:var(--accent,#e8253a);color:#fff;font-weight:600;text-decoration:none;transition:top .15s}
.skip-link:focus{top:12px;outline:2px solid #fff}
.nav__preview:focus-visible,.pribbon__band:focus-visible{outline:2px solid var(--accent,#e8253a);outline-offset:2px}
.gate__legal{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--text-3)}
.gate__legal a{color:var(--accent,#e8253a);text-decoration:none}.gate__legal a:hover{text-decoration:underline}
.legal{padding-top:calc(var(--nav-h) + 24px)}
.legal__inner{max-width:820px}
.legal__toc{display:flex;flex-wrap:wrap;gap:8px 18px;margin:22px 0 40px;font-size:13px}
.legal__toc a{color:var(--text-2);text-decoration:none;border-bottom:1px solid var(--hairline-2);padding-bottom:2px}.legal__toc a:hover{color:var(--accent,#e8253a);border-color:currentColor}
.legal__doc{padding:34px 0;border-top:1px solid var(--hairline-2)}
.legal__doc h2{font-family:var(--font-display);font-weight:400;font-size:clamp(26px,3vw,36px);line-height:1.1;margin:0 0 18px}
.legal__doc p,.legal__doc li{font-size:15px;line-height:1.65;color:var(--text-2);margin:0 0 14px}
.legal__doc b{color:var(--text-1,inherit);font-weight:600}
.legal__doc ul{padding-left:20px;margin:0 0 14px}
.legal__doc a{color:var(--accent,#e8253a);text-decoration:none}.legal__doc a:hover{text-decoration:underline}
.legal__date{font-size:13px;color:var(--text-3)}

/* gate: visible checking state while the code is verified (PBKDF2 can take a few hundred ms on phones) */
[data-gate-form][aria-busy="true"] button[type="submit"]{opacity:.65;cursor:progress}
[data-gate-form][aria-busy="true"] input{opacity:.7}

/* ---- language toggle */
.lang-btn{height:32px;padding:0 11px;border-radius:999px;border:1px solid var(--hairline-2);background:transparent;color:var(--text-2);font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.1em;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.lang-btn:hover{color:var(--accent,#e8253a);border-color:color-mix(in srgb,var(--accent,#e8253a) 50%,transparent)}