/* MauiCoqui.com: what every page shares (the map page and the reading pages). Loaded before app.css and before each
   page's own <style>, so a page can still set its own width (--wrap) and its own components.
   Design review 2026-10-21 (docs/design/phone-review-2026-10-21/REVIEW.md §4): one header, white on every page (user's choice). */
:root{
  --bg:#f6f5f1; --panel:#ffffff; --ink:#1d2321; --mute:#586360; --line:#d5d9d3;
  --accent:#1f6b57; --on-accent:#ffffff; --field:#fbfbf9;
  --brand:#14261c; --orange:#ff6b1a; --note:#fff6ec;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#151816; --panel:#1f2321; --ink:#e8ebe8; --mute:#a3ada8; --line:#3a413e;
    --accent:#6cc3a8; --on-accent:#08201a; --field:#171a19; --note:#2b2219;
  }
}

/* ---------- the header: logo, name, support line, one control on the right ---------- */
.site-header{background:var(--panel);color:var(--ink);border-bottom:1px solid var(--line)}
.site-header .logo{flex:none;display:block;width:40px;height:40px}
.site-header .name{display:block;margin:0;font-size:18px;font-weight:800;line-height:1.2;color:var(--ink);text-decoration:none;white-space:nowrap}
.site-header .support{display:block;color:var(--accent);font-size:12.5px;font-weight:600;line-height:1.3;text-decoration:none}
.site-header .support:hover{text-decoration:underline}
.site-header .support .lg{display:none}
@media (min-width:1000px){.site-header .support .lg{display:inline}.site-header .support .sm{display:none}}

/* reading pages: one row */
.site-header .hwrap{max-width:var(--wrap,860px);margin:0 auto;padding:8px 16px;min-height:60px;display:flex;align-items:center;gap:10px}   /* 16px: in line with the page text */
.site-header .hwrap>div{min-width:0}

/* the control on the right: "← Map" here, Sign in / the account menu on the map (app.css .btn has the same look) */
.site-header .back{margin-left:auto;flex:none;display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;
  border:1px solid var(--line);border-radius:10px;background:var(--field);color:var(--ink);font-weight:600;text-decoration:none;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.site-header .back:hover{border-color:var(--accent)}}
.site-header .back:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.site-header .tagline{color:var(--mute);font-size:12.5px;font-weight:600;line-height:1.3}