/* Approved site header and footer, 25 Oct 2026 — copied unchanged from Blog index — proposal/blog.css (header, footer, install dialog). */
/* ---------- Site header (25 Oct 2026) ----------
   Desktop: one 64 px row — brand left; Getting started, Blog, Add to Chrome right. Plate = toolbar plate.
   Phone (≤ 640): two rows — brand + Add to Chrome, then Getting started · Blog. No burger, no scrolling. */
.site-header{gap:16px}
.site-nav{margin-left:auto;display:flex}
.site-nav ul{margin:0;padding:0;list-style:none;display:flex;align-items:center;gap:4px}
.site-nav a{height:36px;padding:0 12px;display:inline-flex;align-items:center;border-radius:var(--radius-8);color:var(--text);text-decoration:none;font:500 14px/20px var(--font-ui);white-space:nowrap;transition:background-color 120ms cubic-bezier(.2,0,0,1),color 120ms cubic-bezier(.2,0,0,1)}
.site-nav a:hover,.site-nav a.is-hover{background:var(--hover);color:var(--primary)}
.site-nav a:active{background:var(--pressed);color:var(--primary)}
.site-nav a:focus-visible,.site-nav a.is-focus{outline:2px solid var(--focus);outline-offset:2px}
.site-nav a[aria-current="page"]{background:var(--selected);color:var(--primary);font-weight:600}   /* fill + weight + colour */
.site-brand:hover span{color:var(--primary)}
.site-brand.is-focus{outline:2px solid var(--focus);outline-offset:2px}
.site-header .btn.is-hover{background:var(--primary-hover)}

/* ---------- Install dialog (existing message until the store page is live) ---------- */
.install-dialog{width:480px;max-width:calc(100% - 32px);padding:24px;border:0;border-radius:var(--radius-16);background:var(--surface);color:var(--text);box-shadow:var(--shadow-large)}
.install-dialog::backdrop{background:var(--backdrop)}
.install-dialog h2{margin:0;font:600 18px/26px var(--font-ui)}
.install-dialog p{margin:8px 0 0;font:400 15px/24px var(--font-read);color:var(--text-secondary)}
.install-dialog form{margin:20px 0 0;display:flex;justify-content:flex-end}
body:has(.install-dialog[open]){overflow:hidden}

@media (max-width:640px){
  .site-header{height:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand cta" "nav nav";align-items:center;column-gap:8px;row-gap:0;padding:8px 8px 4px 10px}
  .site-brand{grid-area:brand;font-size:15px;min-width:0;white-space:nowrap}
  .site-brand img{width:24px;height:24px}
  .site-header>.btn{grid-area:cta}
  .site-nav{grid-area:nav;margin:8px 0 0;padding-top:4px;border-top:1px solid var(--border)}
  .site-nav a{height:40px}
}
@media (max-width:360px){.site-header>.btn{padding:0 10px}.site-brand{gap:8px}}
@media (prefers-reduced-motion:reduce){.site-nav a{transition:none!important}}

/* Approved site footer, 25 Oct 2026 — copied unchanged from Blog index — proposal/blog.css. */
/* ---------- Site footer (25 Oct 2026) ---------- */
.site-footer{display:block;max-width:var(--article-wide);margin:56px auto 0;padding:32px 0 32px;border-top:1px solid var(--border);font-family:var(--font-ui)}
.footer-row{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:20px 48px}
.site-footer .footer-brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font:600 16px/24px var(--font-ui);border-radius:var(--radius-8)}
.footer-brand img{width:24px;height:24px;display:block}
.site-footer .footer-brand:hover{color:var(--primary)}
.footer-desc{margin:8px 0 0;font:400 14px/22px var(--font-ui);color:var(--text-secondary)}
.footer-links{margin:-6px -10px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:4px 8px}  /* text edges line up with the brand and the container */
.site-footer .footer-links a{height:36px;padding:0 10px;display:inline-flex;align-items:center;border-radius:var(--radius-8);color:var(--text);text-decoration:none;font:500 14px/20px var(--font-ui);white-space:nowrap;transition:background-color 120ms cubic-bezier(.2,0,0,1),color 120ms cubic-bezier(.2,0,0,1)}
.site-footer .footer-links a:hover,.site-footer .footer-links a.is-hover{background:var(--hover);color:var(--primary)}
.footer-links a:focus-visible,.footer-links a.is-focus,.footer-brand:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.footer-copy{margin:24px 0 0;font:400 13px/18px var(--font-ui);color:var(--text-secondary)}
@media (max-width:640px){
  .site-footer{margin-top:40px;padding:28px 8px 28px}
  .footer-row{flex-direction:column;gap:16px}
  .footer-links{display:grid;grid-template-columns:repeat(2,max-content);gap:4px 8px;margin:0 0 0 -10px}
}