/* ============================================================
   CANOPY — BASE (structural layer shared by all design variants)
   ------------------------------------------------------------
   Mechanics only: layout scaffolding, show/hide states, overlays,
   accessibility. Zero personality — all look & feel lives in the
   theme files (theme-*.css).
   ============================================================ */

:root {
  --t-fast: 160ms; --t-med: 340ms; --t-slow: 600ms;
  --ease: cubic-bezier(.32, .8, .34, 1);
  --col: 720px;
  --focus: currentColor;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100dvh; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; padding: 0; }
a { color: inherit; }
h1, h2, h3 { margin: 0; }

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

.skip-link { position: absolute; left: -999px; top: 8px; z-index: 300; padding: .6rem 1rem; }
.skip-link:focus { left: 8px; }

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

/* ---------- header / entry ---------- */
.top-bar { max-width: var(--col); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; }
.brand { display: flex; align-items: center; gap: .6rem; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.top-actions { display: flex; gap: .5rem; align-items: center; }
.hero { max-width: var(--col); margin: 0 auto; position: relative; z-index: 2; }
.entry { max-width: var(--col); margin: 0 auto; position: relative; z-index: 3; }

.search-wrap { display: flex; align-items: center; gap: .5rem; }
.search-leaf { flex: none; }
#search { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: inherit; }
.search-clear { flex: none; display: none; align-items: center; justify-content: center; }
.search-clear.on { display: flex; }
.entry-hint { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.privacy-note { display: inline-flex; align-items: center; gap: .35rem; }
.privacy-note svg { width: 12px; height: 12px; flex: none; }

/* ---------- ground ---------- */
.ground { max-width: var(--col); margin: 0 auto; }
#results-zone { min-height: 40px; }
.result-list { display: flex; flex-direction: column; gap: .75rem; }
.res-card { display: block; width: 100%; text-align: left; position: relative; }
.res-top { display: flex; align-items: baseline; gap: .5rem; justify-content: space-between; flex-wrap: wrap; }
.badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.badge { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.guided-btn { width: 100%; display: flex; align-items: center; gap: 1rem; text-align: left; position: relative; }
.guided-btn .g-arrow { margin-left: auto; flex: none; display: flex; align-items: center; justify-content: center; }
.cat-grid { display: grid; gap: .75rem; }
.cat-sticker { text-align: left; position: relative; }
.cat-icon { display: flex; align-items: center; justify-content: center; flex: none; }
.cat-icon svg { width: 17px; height: 17px; }
.no-results { text-align: center; }
.section-label { display: flex; align-items: center; gap: .75rem; }

/* ---------- personalized results + assist (structure) ---------- */
.path-row { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.path-edit { margin-left: auto; }
.results-foot { text-align: center; margin-top: 1.2rem; display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.assist-choices { display: flex; flex-direction: column; gap: .6rem; }
.assist-choice { display: flex; align-items: center; gap: .6rem; text-align: left; flex-wrap: wrap; }
.assist-choice .t-go { margin-left: auto; }
.assist-thinking { text-align: center; }

/* ---------- resource sheet ---------- */
.sheet-veil { position: fixed; inset: 0; z-index: 100; opacity: 0; pointer-events: none; transition: opacity var(--t-med) var(--ease); }
.sheet-veil.on { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; z-index: 110; left: 0; right: 0; bottom: 0;
  max-height: 92dvh; transform: translateY(104%);
  transition: transform var(--t-med) var(--ease);
  display: flex; flex-direction: column;
}
.sheet.on { transform: translateY(0); }
@media (min-width: 760px) {
  .sheet { left: 50%; right: auto; width: 620px; transform: translate(-50%, 104%); }
  .sheet.on { transform: translate(-50%, 0); }
}
.sheet-handle { display: flex; justify-content: center; flex: none; cursor: grab; padding: .65rem 0 .35rem; }
.sheet-scroll { overflow-y: auto; overscroll-behavior: contain; }
.sheet-head { display: flex; align-items: flex-start; gap: .75rem; }
.sheet-close { margin-left: auto; flex: none; display: flex; align-items: center; justify-content: center; }
.sheet-cat { display: inline-block; }
.action-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.act { flex: 1 1 auto; min-width: 130px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; text-decoration: none; }
.act svg { width: 16px; height: 16px; flex: none; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; }
.fact h4 { margin: 0 0 .15rem; }
.fact p { margin: 0; }
.also-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.verified { display: inline-flex; align-items: center; gap: .4rem; width: 100%; }

/* ---------- guided tree ---------- */
.tree-overlay {
  position: fixed; inset: 0; z-index: 90;
  transform: translateY(4%); opacity: 0; pointer-events: none;
  transition: transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease);
  overflow-y: auto;
}
.tree-overlay.on { transform: none; opacity: 1; pointer-events: auto; }
.tree-inner { max-width: 620px; margin: 0 auto; padding-bottom: 6rem; }
.tree-bar { display: flex; justify-content: space-between; align-items: center; }
.tree-choices { display: flex; flex-direction: column; gap: .75rem; }
.tree-choice { display: flex; align-items: center; gap: .75rem; text-align: left; }
.tree-choice .t-go { margin-left: auto; flex: none; }

/* ---------- SOS ---------- */
.sos {
  position: fixed; z-index: 120;
  bottom: calc(env(safe-area-inset-bottom) + 14px);
  left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap;
}
.sos svg { width: 17px; height: 17px; flex: none; }

/* ---------- crisis ---------- */
.crisis { position: fixed; inset: 0; z-index: 200; overflow-y: auto; opacity: 0; pointer-events: none; transition: opacity var(--t-med) var(--ease); }
.crisis.on { opacity: 1; pointer-events: auto; }
.crisis-inner { max-width: 560px; margin: 0 auto; }
.line-card { display: flex; align-items: center; gap: .75rem; }
.line-info { min-width: 0; }
.line-acts { margin-left: auto; display: flex; gap: .45rem; flex: none; }
.line-act { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; }
.line-act svg { width: 14px; height: 14px; flex: none; }
.crisis-leave { display: block; margin: 2.5rem auto 0; }

.confirm-veil, .about-veil, .helper-info-veil { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 1rem; }
.confirm-veil { z-index: 210; }
.about-veil, .helper-info-veil { z-index: 150; }
.confirm-veil.on, .about-veil.on, .helper-info-veil.on { display: flex; }
.confirm-box, .about-box { width: 100%; }
.confirm-box { max-width: 380px; text-align: center; }
.about-box { max-width: 440px; }
.confirm-box .act { width: 100%; margin-bottom: .5rem; }

/* ---------- toast / footer ---------- */
.toast {
  position: fixed; z-index: 300; left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 84px);
  transform: translateX(-50%) translateY(8px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.footer { text-align: center; }

/* ---------- variant switcher (prototype-only chrome) ---------- */
.v-switch {
  position: fixed; z-index: 80; left: 12px;
  bottom: calc(env(safe-area-inset-bottom) + 14px);
  display: flex; gap: 6px; align-items: center;
}
.v-switch a {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: .7rem; font-weight: 700; text-decoration: none;
}
@media (max-width: 640px) { .v-switch { display: none; } }

/* ---------- small screens ---------- */
@media (max-width: 420px) {
  .facts { grid-template-columns: 1fr; }
  .line-card { flex-wrap: wrap; }
  .line-acts { margin-left: 0; width: 100%; }
  .line-act { flex: 1; justify-content: center; }
}