/* PowPlanet site chrome: dark header, footer, phone bottom nav. Every class is pp- prefixed so it can sit beside site.css.
   Token values below must match ds.css (apply_chrome.py --check compares them). Fonts are the same self-hosted SIL OFL files. */
@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-grotesque.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url(fonts/geist.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

.pp-head,.pp-foot,.pp-bottomnav{
  --snow:#F7F9FB; --ink:#0B1B2E; --slate:#5B6B7F; --line:#DDE4EC; --glacier:#2F6FED; --sunset:#F2622E;
  --on-ink:#C6D3E0; --on-ink-2:#9FB3C8;
  --r-card:12px; --r-pill:999px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --f-display:"Bricolage Grotesque","Geist",system-ui,sans-serif;
  --f-ui:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --shadow:0 1px 2px rgba(11,27,46,.06),0 8px 24px rgba(11,27,46,.08);
  font:400 16px/1.5 var(--f-ui);
}
.pp-head *,.pp-foot *,.pp-bottomnav *{box-sizing:border-box}
.pp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pp-wrap{max-width:1180px;margin:0 auto;padding:var(--s3) var(--s4);display:flex;align-items:center;gap:var(--s4)}
.pp-wrap.pp-wide{max-width:1440px}
@media(min-width:900px){.pp-wrap.pp-wide{padding-left:40px;padding-right:40px}}

/* Header */
.pp-head{position:relative;z-index:40;background:var(--ink);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.pp-head a:focus-visible,.pp-head input:focus-visible,.pp-foot a:focus-visible,.pp-foot button:focus-visible,.pp-bottomnav a:focus-visible{outline:3px solid #8DBBEB;outline-offset:2px;border-radius:6px}
.pp-skip{position:absolute;left:var(--s4);top:-80px;z-index:100;background:#fff;color:var(--ink);border-radius:var(--r-pill);padding:0 20px;min-height:44px;display:inline-flex;align-items:center;font:600 15px var(--f-ui);text-decoration:none}
.pp-skip:focus{top:var(--s2)}
.pp-head .pp-brand{display:flex;align-items:center;gap:var(--s2);min-height:44px;font:700 18px/1 var(--f-display);letter-spacing:-.01em;color:#fff;text-decoration:none;flex:none}
.pp-brand img{width:30px;height:30px;border-radius:8px;display:block}
.pp-head .pp-nav{display:none;gap:var(--s5);margin:0 0 0 var(--s4)}
.pp-head .pp-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0;font:500 15px var(--f-ui);color:var(--on-ink);text-decoration:none}
.pp-head .pp-nav a:hover,.pp-head .pp-nav a[aria-current=page]{color:#fff}
.pp-head .pp-nav a[aria-current=page]{box-shadow:inset 0 -2px 0 var(--sunset)}
.pp-search{position:relative;margin-left:auto;flex:1 1 auto;min-width:0;max-width:360px}
.pp-search svg{position:absolute;left:14px;top:12px;width:18px;height:18px;stroke:var(--on-ink-2);fill:none;stroke-width:1.5;stroke-linecap:round;pointer-events:none}
.pp-search input{width:100%;min-height:44px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;padding:0 var(--s4) 0 40px;font:400 16px var(--f-ui);-webkit-appearance:none;appearance:none}
.pp-search input::placeholder{color:var(--on-ink-2);opacity:1}
.pp-results{position:absolute;left:0;right:0;top:50px;z-index:50;margin:0;padding:var(--s1);list-style:none;background:#fff;color:var(--ink);border-radius:var(--r-card);box-shadow:var(--shadow)}
.pp-results[hidden]{display:none}
.pp-results li{display:flex;justify-content:space-between;gap:var(--s3);min-height:44px;align-items:center;padding:0 12px;border-radius:8px;font:500 15px var(--f-ui);cursor:pointer}
.pp-results li small{color:var(--slate);font-weight:400;white-space:nowrap}
.pp-results li[aria-selected=true],.pp-results li:hover{background:var(--snow)}
.pp-results li.pp-empty{cursor:default;color:var(--slate)}
@media(min-width:900px){.pp-head .pp-nav{display:flex}}

/* Footer */
.pp-foot{background:var(--ink);color:var(--on-ink-2);margin-top:48px;font-size:14px}
.pp-foot-grid{display:block;padding-top:var(--s5);padding-bottom:var(--s5)}
.pp-foot p{margin:var(--s2) 0;max-width:80ch}
.pp-foot a{color:var(--on-ink);text-decoration:underline;text-underline-offset:3px}
.pp-foot .pp-foot-links{display:flex;flex-wrap:wrap;gap:0 var(--s5);margin-bottom:var(--s4)}
.pp-foot .pp-foot-links a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:500;color:#fff}
.pp-foot .pp-foot-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3)}
.pp-foot .units-toggle{min-height:44px;margin:0 0 0 var(--s2);padding:0 14px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;font:500 14px var(--f-ui);cursor:pointer}
.pp-foot .units-toggle:hover{background:rgba(255,255,255,.1)}

/* Phone bottom nav (hidden once the header nav shows) */
.pp-bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;background:rgba(255,255,255,.96);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.pp-bottomnav a{flex:1;min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:600 11px var(--f-ui);color:var(--slate);text-decoration:none}
.pp-bottomnav a[aria-current=page]{color:var(--ink)}
.pp-bottomnav a{position:relative}
.pp-badge{position:absolute;top:8px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--sunset);color:var(--ink);font:700 11px/18px var(--f-ui);text-align:center}
.pp-badge[hidden]{display:none}
.pp-bottomnav svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:899px){body:has(.pp-bottomnav){padding-bottom:calc(72px + env(safe-area-inset-bottom))}}
@media(min-width:900px){.pp-bottomnav{display:none}}
@media(prefers-reduced-motion:reduce){.pp-head *,.pp-foot *,.pp-bottomnav *{transition:none!important}}