/* The site's chrome: the one header and the one footer, for every page.
   Extracted from the machine page so there is a single source; the markup
   that goes with it is injected by functions/_middleware.js, so no page
   carries a second copy of either.

   The header is deliberately NOT given a background of its own: it is
   translucent over --nav-bg, which each page sets to whatever is actually
   behind the bar. Over the white legal document that is white, so the bar
   reads white with dark text and a filled dark pill; over the machine's
   dark sections it reads dark. Hardcoding a colour here is what made the
   legal pages look like a different component. */

  /* ---------- nav ----------
     One bar on every page. Wordmark and glyph left, the two tabs centred,
     the one action right. It takes its colour from the section under it,
     so it is dark on the landing and ink-on-tint on the light pages. */
  /* The bar takes its tint from whatever is under it right now — dark
     sections a translucent dark, light ones a translucent light, the blue
     page its blue — the same 84% tint and the same blur in every case.
     The tint dissolves over --dur-nav. The text does not dissolve with it:
     a colour crossfade of ink to paper passes through grey-on-grey, so the
     type switches in one step at 40% of the dissolve, where paper on the
     darkening bar and ink on the lightening one both still clear 4:1. */
  .nav{
    position:fixed;top:0;left:0;right:0;z-index:70;height:var(--nav-h);
    background:color-mix(in srgb, var(--nav-bg) 84%, transparent);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--nav-rule);
    color:var(--nav-fg);
    transition:background-color var(--dur-nav) linear, border-color var(--dur-nav) linear,
               color 0s linear calc(var(--dur-nav) * .4);
  }
  .nav:not(.nav-ready){transition:none}
  @media (prefers-reduced-transparency: reduce){ .nav{background:var(--nav-bg);backdrop-filter:none;-webkit-backdrop-filter:none} }
  .nav-in{
    max-width:var(--maxw);margin:0 auto;height:100%;padding:0 24px;
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  }
  .nav a{color:inherit;text-decoration:none}
  .nav-brand{
    justify-self:start;display:inline-flex;align-items:center;gap:9px;
    font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  }
  .nav-glyph{height:18px;width:auto;display:block;opacity:.9}
  .nav-tabs{display:flex;gap:26px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
  .nav-tabs a{
    position:relative;padding:6px 2px;
    color:color-mix(in srgb, currentColor 78%, transparent);
    transition:color var(--dur-hover) ease;
  }
  .nav-tabs a::after{
    content:"";position:absolute;left:2px;right:2px;bottom:1px;height:1px;
    background:currentColor;opacity:0;transition:opacity var(--dur-hover) ease;
  }
  @media (hover:hover) and (pointer:fine){ .nav-tabs a:hover{color:inherit} }
  .nav-tabs a[aria-current="page"]{color:inherit}
  .nav-tabs a[aria-current="page"]::after{opacity:1}
  .nav-cta{
    justify-self:end;
    display:inline-flex;align-items:center;min-height:36px;padding:0 16px;
    font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
    background:var(--nav-fg);color:var(--nav-bg) !important;border-radius:var(--r-pill);
    transition:transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out),
               background-color 0s linear calc(var(--dur-nav) * .4), color 0s linear calc(var(--dur-nav) * .4);
  }
  @media (hover:hover) and (pointer:fine){ .nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.25)} }
  .nav-cta:active{transform:scale(.97);transition-duration:var(--dur-press)}
  main{padding-top:var(--nav-h)}
  @media (max-width:640px){
    .nav-in{grid-template-columns:auto minmax(0,1fr) auto;gap:10px;padding:0 16px}
    .nav-brand span{display:none}
    /* three tabs do not fit a phone in one row; the row scrolls and says so
       at its edge, the same way the ticker does */
    .nav-tabs{
      gap:14px;justify-self:stretch;min-width:0;font-size:10.5px;
      overflow-x:auto;white-space:nowrap;scrollbar-width:none;
      -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);
      mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);
    }
    .nav-tabs::-webkit-scrollbar{display:none}
    .nav-tabs a{flex:none}
    .nav-cta{white-space:nowrap;padding:0 12px;font-size:10.5px;min-height:34px}
  }

  /* ---------- footer ----------
     The footer is the bottom of whatever page it sits on, not a band under
     it: it declares its own background AND its own text colour as a pair,
     and the page says which ground that is via --footer-bg / --footer-fg.
     That pairing is what stops the ground moving underneath fixed-colour
     text, which is how the footer once went invisible. */
  footer{background:var(--footer-bg);color:var(--footer-fg);padding:24px 0 64px;
         font-family:var(--mono);font-size:12px;line-height:2}
  .foot-in{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
  .foot-links{display:flex;flex-wrap:wrap;gap:14px 22px;font-family:var(--mono);font-size:12px;letter-spacing:.06em}
  .foot-links a{color:var(--footer-fg);text-decoration:none}
  .foot-links a:hover,.foot-links a:focus-visible{color:var(--footer-fg-strong)}