/* Public site chrome: one header, navigation and night footer for the homepage, guides, comparisons, pricing,
   legal pages and the 404 page. Load after tokens.css, components.css and bench.css. Page CSS owns only the content
   between header and footer. Markup lives in src/web/public-pages.ts (HEADER, FOOTER); static pages copy it verbatim. */
html { scroll-padding-top: 96px; }

.guide-header, .guide-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-6); width: 100%; }

/* Header: paper, ink rule and an orange read-progress line. 80px tall with a 2rem logo; 72px and 1.5rem at 800px. */
.guide-header { position: sticky; top: 0; z-index: var(--z-sticky, 10); min-height: 80px; padding: 0 max(var(--space-8), calc((100% - var(--content-width)) / 2)); background: var(--color-header); border-bottom: var(--rule-width) solid var(--color-ink); }
.guide-brand { font-size: 2rem; }
.guide-mobile-nav { display: none; }
.guide-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-8); }
:where(.guide-nav a, .guide-nav button) { min-height: var(--control-height); display: inline-flex; align-items: center; color: var(--color-ink); font: var(--weight-label) var(--text-body)/1 var(--font-body); text-decoration: none; }
:where(.guide-nav a:not(.primary-button, .secondary-button, .text-button)):hover, .guide-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--color-signal); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.guide-header::after { content: ""; position: absolute; left: 0; bottom: calc(-1 * var(--rule-width)); width: 100%; height: 3px; background: var(--color-signal); transform-origin: 0 50%; scale: 0 1; }
@keyframes guide-read-progress { to { scale: 1 1; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .guide-header::after { animation: guide-read-progress linear both; animation-timeline: scroll(root); }
  }
}

/* Footer: night band with reverse controls. */
.guide-footer { margin-top: var(--space-16); padding: var(--space-10) max(var(--space-8), calc((100% - var(--content-width)) / 2)) var(--space-8); background: var(--color-night); color: var(--color-on-night-muted); font-size: var(--text-small); }
.guide-footer :where(a, button):not(.brand, .primary-button, .secondary-button, .text-button) { min-height: var(--control-height); display: inline-flex; align-items: center; color: var(--color-on-night); font-size: inherit; }
.guide-footer :where(a, button):not(.brand, .primary-button, .secondary-button, .text-button):hover { color: var(--color-action-reverse); }
.guide-footer a:focus-visible, .guide-footer button:focus-visible { outline-color: var(--color-action-reverse); }
.guide-footer .brand { font-size: 1.75rem; }
.guide-footer .guide-nav { margin-left: auto; gap: var(--space-2) var(--space-6); }
:where(.guide-footer .guide-nav a, .guide-footer .guide-nav button) { font-weight: 400; }
.guide-footer .ds-nav-link { color: var(--color-on-night); font-size: inherit; font-weight: 400; }
.guide-footer .ds-nav-link:hover { color: var(--color-action-reverse); text-decoration: none; }
.guide-footer-note { width: 100%; margin: 0; }

/* Compact native navigation: collapse before the links run out of room, so the header never wraps under the logo. */
@media (max-width: 900px) {
  .guide-header:has(.guide-nav--responsive) { flex-wrap: nowrap; }
  .guide-nav--responsive { flex: none; flex-wrap: nowrap; gap: var(--space-2); }
  .guide-nav--responsive > :not(.guide-mobile-nav, .secondary-button) { display: none; }
  .guide-mobile-nav { display: block; }
}
@media (max-width: 800px) {
  .guide-header:has(.guide-nav--responsive) { min-height: 72px; padding: var(--space-2) var(--space-4); gap: var(--space-2); }
  .guide-header .guide-brand { font-size: 1.5rem; }
}
@media (max-width: 640px) {
  .guide-header { position: relative; min-height: 64px; padding: var(--space-2) var(--space-5); }
  .guide-footer { padding-inline: var(--space-5); }
  .guide-footer .guide-nav { margin-left: 0; }
  .guide-nav { gap: var(--space-1) var(--space-4); }
}
@media (max-width: 359px) {
  .guide-header .guide-brand { font-size: var(--text-section); }
}