/* ============================================================================
   HTGF Design System — shell.css                        v1 · 2026-08-29 (night build)
   The ONE shared chrome: unity bar (rings) + Menu v3 header + footer + mobile
   tab bar + sheet + recall strip. Markup is injected by shell.js.
   Requires tokens.css first.
   ========================================================================== */

/* ===== THE UNITY BAR — identical on every ring (Guides · Atlas · Compass) ===== */
header.htgf-site{background:var(--forest-deep);color:var(--hdr);position:sticky;top:0;z-index:50;box-shadow:0 2px 14px rgba(0,0,0,.18)}
header.htgf-site>.wrap{display:flex;align-items:center;gap:16px;min-height:64px;flex-wrap:wrap}
.htgf-brand{font-family:var(--font-display);font-weight:900;font-size:1.1rem;color:#fff;text-decoration:none;white-space:nowrap;display:flex;align-items:center;gap:9px}
.htgf-brand svg{width:26px;height:26px;flex:0 0 auto}
/* ring switcher — the three doors of the brand, always visible, current one lit */
.rings{display:flex;gap:2px;background:rgba(255,255,255,.08);border-radius:var(--r-pill);padding:3px}
.rings a{font-family:var(--font-display);font-weight:800;font-size:.76rem;color:var(--hdr);text-decoration:none;border-radius:var(--r-pill);padding:6px 13px;opacity:.85;white-space:nowrap}
.rings a:hover{opacity:1}
.rings a.on{background:var(--cream);color:var(--forest);opacity:1}
.rings a .beta{font-size:.56rem;font-weight:800;letter-spacing:.06em;background:var(--mustard);color:#173829;border-radius:6px;padding:1px 4px;margin-left:4px;vertical-align:2px;text-transform:uppercase}
@media(max-width:560px){.rings a{padding:6px 10px;font-size:.7rem}}

/* ===== Menu v3 (unchanged classes — same markup the kit/v8 already ship) ===== */
nav.main{display:none;gap:16px;align-items:center;flex:1;font-family:var(--font-display);font-weight:700;font-size:.86rem}
nav.main>a,nav.main .navdrop>a{color:var(--hdr);opacity:.92;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;transition:border-color var(--t-fast),opacity var(--t-fast);display:inline-flex;align-items:center;gap:5px}
nav.main>a:hover,nav.main .navdrop>a:hover{opacity:1;border-color:var(--mustard)}
.navdrop{position:relative}
.navdrop .dd{position:absolute;top:100%;left:-10px;min-width:250px;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:var(--r-md);padding:8px;box-shadow:var(--shadow);display:none;flex-direction:column;gap:2px;z-index:60}
.navdrop:hover .dd,.navdrop:focus-within .dd{display:flex}
.navdrop .dd a{padding:9px 12px;border-radius:var(--r-sm);text-decoration:none;font-weight:700;font-size:.86rem}
.navdrop .dd a:hover{background:var(--warm)}
.navdrop .dd .teaser{font-size:.82rem;color:var(--muted);padding:6px 12px 4px;font-family:var(--font-body);font-weight:600}
.navdrop .dd .cta{background:var(--mustard);color:#173829;text-align:center;margin-top:4px}
.navdrop .dd a.lga-dd{color:#173829;background:var(--peach-wash);font-weight:800}
@media (prefers-color-scheme:dark){.navdrop .dd a.lga-dd{color:var(--rose);background:var(--peach-wash)}}
.app-badge{font-size:.62rem;font-weight:800;font-family:var(--mono);letter-spacing:.08em;background:var(--mustard);color:#173829;border-radius:6px;padding:2px 5px;margin-left:2px;text-transform:uppercase}
nav.main a.recall-link{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:.8rem;color:#fff!important;background:var(--recall);border-radius:var(--r-pill);padding:6px 12px!important;border-bottom:0!important;opacity:1!important;margin-left:auto;white-space:nowrap}
.rl-dot{width:7px;height:7px;border-radius:50%;background:#fff;display:inline-block}
nav.main a.lga-link{color:var(--rose)!important;font-weight:800}
.lang{display:flex;gap:1px;font-weight:800;font-size:.78rem;color:#CFE0D5}
.lang a{padding:8px 7px;border-radius:7px;min-width:32px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.lang a.active{background:rgba(255,255,255,.12);color:#fff}
.nav-util{display:flex;gap:8px;align-items:center;margin-left:auto}
.nav-ic{color:var(--hdr);display:inline-flex;padding:8px;border-radius:var(--r-sm);position:relative}
/* the "personal" dot — lights when the account layer holds something for this visitor */
.nav-ic .pdot{position:absolute;top:5px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--mustard);border:2px solid var(--forest-deep);display:none}
.nav-ic.has-p .pdot{display:block}
.join{display:none;background:var(--mustard);color:#173829;font-weight:800;font-size:.8rem;border-radius:var(--r-pill);padding:9px 14px;text-decoration:none;white-space:nowrap;align-items:center;font-family:var(--font-display)}
@media(min-width:1000px){nav.main{display:flex}.join{display:inline-flex}.nav-util{margin-left:0}}

/* ===== surface strip — a second row app surfaces (Atlas/Compass) own ===== */
.surface-strip{background:var(--forest-deep);border-top:1px solid rgba(255,255,255,.07)}
.surface-strip .wrap{display:flex;align-items:center;gap:6px;padding-top:8px;padding-bottom:10px;flex-wrap:wrap}
.surface-strip .stab{font-family:var(--font-display);font-weight:800;font-size:.82rem;color:#fff;background:rgba(255,255,255,.08);border:0;border-radius:var(--r-pill);padding:8px 18px;text-decoration:none;cursor:pointer}
.surface-strip .stab.on{background:var(--cream);color:var(--forest)}
.surface-strip .stab.soon{opacity:.55;cursor:default}

/* ===== recall strip (safety — never personalised away, never restyled) ===== */
.recall-strip{background:var(--recall);color:#fff;font-weight:700;font-size:.9rem}
.recall-strip .wrap{display:flex;align-items:center;gap:12px;padding:10px var(--wrap-pad);flex-wrap:wrap}
.recall-strip .rs-tx{flex:1;min-width:200px}
.recall-strip .rs-cta{color:#fff;font-family:var(--font-display);font-weight:800;white-space:nowrap}

/* ===== sections ===== */
section{padding:var(--sec-pad) 0}
.sec-h{display:flex;align-items:baseline;gap:14px;margin-bottom:1.3rem;flex-wrap:wrap}
.sec-h h2{font-size:var(--fs-h2);font-weight:900;letter-spacing:-.02em}
.sec-h .k{font-size:var(--fs-fine);color:var(--muted)}
.eyebrow{font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:.16em;font-size:var(--fs-eyebrow);color:var(--mustard-deep)}
.on-dark .eyebrow,.hero .eyebrow{color:var(--mustard)}

/* ===== FOOTER — one footer, every ring; carries the charter line ===== */
footer.htgf-foot{background:var(--forest-deep);color:#CBDDD2;padding:26px 0 calc(22px + 70px);border-top:1px solid rgba(255,255,255,.08);font-size:.84rem}
@media(min-width:1000px){footer.htgf-foot{padding-bottom:26px}}
.foot-charter{font-family:var(--font-display);font-weight:800;color:#fff;font-size:.95rem;margin-bottom:4px}
.foot-charter b{color:var(--mustard)}
.foot-rings{margin:.35rem 0 1.1rem;color:#9fb8aa}
.foot-rings a{color:#CBDDD2;text-decoration:none;font-weight:700}
.foot-rings a:hover{color:#fff}
.foot-inner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.08);padding-top:16px}
.foot-links{display:flex;gap:4px 16px;flex-wrap:wrap}
.foot-links a{color:#CBDDD2;text-decoration:none;font-weight:700}
.foot-links a:hover{color:#fff}
.socials{display:flex;gap:10px}
.socials a{display:inline-flex;padding:6px;border-radius:var(--r-sm);background:rgba(255,255,255,.08)}
.foot-imprint{margin-top:12px;opacity:.7}

/* ===== mobile tab bar + sheet (same ids kit.js expects) ===== */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:49;background:var(--forest-deep);display:flex;justify-content:space-around;padding:6px 4px max(6px,env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.08)}
.tabbar a,.tabbar button{color:var(--hdr);background:none;border:0;font:800 .68rem var(--font-display);display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 10px;min-width:60px;text-decoration:none}
.tabbar .ic{width:22px;height:22px}
@media(min-width:1000px){.tabbar{display:none}}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:58;display:none}.scrim.show{display:block}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:59;background:var(--cream);border-radius:var(--r-lg) var(--r-lg) 0 0;padding:14px 16px max(18px,env(safe-area-inset-bottom));transform:translateY(105%);transition:transform var(--t-med) ease;max-height:85vh;overflow:auto}
.sheet.open{transform:none}
.sh-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.sh-title{font:900 .8rem var(--font-display);letter-spacing:.1em;color:var(--muted)}
.sh-close{background:none;border:1px solid var(--line);border-radius:50%;width:36px;height:36px;font-size:1rem;color:var(--text)}
.sheet nav{display:grid;gap:8px}
.sheet nav a{padding:13px 12px;border-radius:var(--r-md);font-weight:800;color:var(--forest);background:var(--warm);border:1px solid var(--line);min-height:48px;display:flex;align-items:center;text-decoration:none;gap:8px}
.sheet nav a.hl{background:var(--peach-wash)}
.sheet nav a.recall-link{background:var(--recall);color:#fff;border-color:var(--recall)}
.sheet .join{display:inline-flex;margin-top:10px;width:100%;justify-content:center}

/* ===== scroll reveal (restrained: once, on entry, never on safety text) ===== */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(18px);transition:opacity var(--t-reveal) ease,transform var(--t-reveal) var(--ease)}
  .reveal.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}