/* Shared header and footer for every robouse.ai page (markup: tools/chrome.py). Namespaced site-* so page styles never collide.
   Header: the wordmark and the nav share one text baseline. Footer: three columns (credit, theme picker, place) with the
   theme picker centred on the page, all on one centre line; one centred column on phones. */
.site-wrap{box-sizing:border-box;width:100%;max-width:var(--wide);margin:0 auto;padding:0 var(--gutter);padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:center;gap:var(--sp-16)}
.site-bar{padding:var(--sp-28) 0 0}
.site-bar .site-wrap{align-items:baseline}
.site-mark{font:500 var(--fs-h3)/1 var(--serif);letter-spacing:-.005em;color:var(--ink);text-decoration:none;border-radius:var(--r-xs)}
.site-bar nav{display:flex;align-items:baseline;gap:var(--sp-24)}
.site-bar nav a{font:400 var(--fs-small)/1 var(--sans);color:var(--muted);text-decoration:none;border-radius:var(--r-xs);transition:color var(--t-fast)}
.site-bar nav a:hover,.site-bar nav a[aria-current]{color:var(--ink)}
.site-foot{margin:0;padding:var(--sp-56) 0 max(var(--sp-24),env(safe-area-inset-bottom));border:0;max-width:none}
.site-foot .site-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;font:400 var(--fs-meta)/1.4 var(--sans);color:var(--faint,var(--muted))}
.site-foot .site-wrap > :first-child{justify-self:start}
.site-foot .site-wrap > :last-child{justify-self:end;text-align:right}
.site-foot a{color:inherit;text-decoration:none;border-radius:var(--r-xs);transition:color var(--t-fast)}
.site-foot a:hover{color:var(--muted)}
.site-bf{display:inline-flex;align-items:center;gap:var(--sp-8)}
.site-bf svg{flex:none;width:12px;height:12px}
.theme-pick{display:inline-flex;gap:var(--sp-2);align-items:center}
.theme-pick button{margin:0;padding:0 var(--sp-6);border:0;border-radius:var(--r-xs);background:none;font:inherit;color:var(--faint,var(--muted));cursor:pointer;transition:color var(--t-fast)}
.theme-pick button:hover{color:var(--ink)}
.theme-pick button:active{color:var(--ink2)}
.theme-pick button[aria-pressed="true"]{color:var(--ink2)}
@media (pointer:coarse),(max-width:640px){
  .site-bar{padding-top:var(--sp-16)}
  .site-bar nav{gap:var(--sp-12)}
  .site-bar nav a,.site-mark,.theme-pick button,.site-foot a{display:inline-flex;align-items:center;min-height:var(--touch)}
  .theme-pick button{padding:0 var(--sp-10)}
}
@media (max-width:560px){
  .site-foot .site-wrap{grid-template-columns:minmax(0,1fr);justify-items:center;row-gap:var(--sp-4);text-align:center}
  .site-foot .site-wrap > :first-child,.site-foot .site-wrap > :last-child{justify-self:center;text-align:center}
}