/* Shared shell: navigation first, appearance on demand. Brandbook §22. */
.site-header #navigation a{min-height:44px;display:inline-flex;align-items:center}
.display-toggle{display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;padding:var(--space-2) var(--space-3);background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:6px;font-size:var(--text-label);font-weight:600;white-space:nowrap;cursor:pointer}
.display-toggle svg{width:20px;height:20px;flex-shrink:0}
.display-toggle:hover,.display-toggle[aria-expanded=true]{background:var(--tint);border-color:var(--accent);color:var(--accent)}
.display-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
#display-panel{position:fixed;inset:auto;margin:0;width:min(20rem,calc(100vw - 2 * var(--space-4)));padding:var(--card-inset);background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);overflow:auto;z-index:var(--z-popup);box-shadow:0 8px 24px var(--scrim)}
#display-panel:not([hidden]){display:grid;justify-content:stretch;justify-items:stretch;gap:var(--space-4)}
#display-panel[popover]:not(:popover-open),#display-panel[hidden]{display:none}
#display-panel .display-group{display:grid;width:100%;grid-template-columns:minmax(0,1fr) repeat(3,44px);align-items:center;gap:var(--space-2)}
#display-panel .control-caption{display:block;margin:0;color:var(--muted);font-size:var(--text-label)}
#display-panel .display-group button{min-width:44px;min-height:44px;padding:var(--space-2);margin:0}
.site-footer .footer-routes h2{margin-bottom:var(--space-2)}
.site-footer .footer-next .button{margin-bottom:var(--space-3)}
@media(min-width:1001px){.site-header #navigation{order:0;width:auto;flex:1;justify-content:center;margin:0}.site-header .display-toggle{margin-left:auto}.site-header{gap:var(--space-4)}}
@media(min-width:621px) and (max-width:1000px){.site-header .display-toggle{margin-left:auto}.site-header #navigation{order:3;width:100%}}
@media(max-width:620px){
  .site-header{gap:var(--space-3);justify-content:space-between}
  .site-header .menu-toggle{order:0;margin-left:auto;min-height:44px}
  .site-header .display-toggle{order:1;margin-left:0}
  .site-header #navigation{order:2}
  .site-footer .footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-6) var(--space-4)}
  .site-footer .footer-identity{grid-column:1/-1}
  .site-footer .footer-next{grid-column:1/-1;grid-row:2;padding-bottom:var(--space-6);border-bottom:1px solid var(--line)}
  .site-footer .footer-routes h2{font-size:var(--text-body)}
  .site-footer .footer-routes a{padding-inline:var(--space-1);gap:var(--space-1);hyphens:none}
  .site-footer .footer-routes a span{display:none}
}

@media(max-width:370px){.site-footer .footer-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:450px){:root[data-font=large] .site-footer .footer-grid{grid-template-columns:minmax(0,1fr)}}