/* Shared site chrome: the header and footer every page carries.
 *
 * Until now each page kept its own copy of this CSS and its own slightly
 * different footer — five pages had no navigation at all, and the three that
 * did disagreed about what belonged in it. Seven copies of the same rules is
 * seven chances to drift, and they had already drifted.
 *
 * A same-origin stylesheet is what `style-src 'self'` is for. Page-specific
 * styles stay in each page's own <style> block, which is loaded after this
 * file — so a page can still override a token (the dashboard uses a warmer
 * --bg-alt) simply by declaring it.
 */

:root {
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --faint: #75757a;
  --line: #d2d2d7;
  --bg: #ffffff;
  --bg-alt: #f5f5f7;
  --gold: #b3954e;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;
}

.wrap { width: 100%; max-width: 980px; margin: 0 auto; padding: 0 22px; }

/* ---------- header ---------- */

.nav-bar {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.nav-bar nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 48px;
}

.brand {
  display: inline-flex; flex-direction: column; gap: 3px;
  padding-bottom: 5px; border-bottom: 2px solid var(--gold);
  line-height: 1; flex: 0 0 auto; text-decoration: none;
}
.brand-top { font-size: 16px; font-weight: 700; letter-spacing: 0.22em; margin-right: -0.22em; color: var(--ink); }
.brand-sub { font-size: 8px; font-weight: 500; letter-spacing: 0.36em; margin-right: -0.36em; color: var(--muted); text-align: right; }

.nav-links {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px 28px; font-size: 13px; color: var(--muted);
}
.nav-links a, .nav-links button {
  color: inherit; text-decoration: none; transition: color .2s ease;
  background: none; border: 0; padding: 0; font: inherit; font-size: 13px; cursor: pointer;
  /* WCAG 2.5.5: the visual weight stays light, the target does not. */
  min-height: 44px; display: inline-flex; align-items: center;
}
.nav-links a:hover, .nav-links button:hover { color: var(--ink); }
/* Signed-in state. Quiet, but distinguishable from the navigation around it. */
.nav-links .nav-out { color: var(--faint); }

/* The three marketing links sit in a wrapper so they can move as a group on a
   phone. On a wide screen the wrapper is transparent to layout, so they lay out
   in the bar exactly as they did before it existed. */
.nav-menu { display: contents; }

/* Created by nav.js, so it never appears without the script that operates it —
   a dead Menu button would be worse than the links simply not being there. */
/* `.nav-links button` above also sets display, and one class plus one element
   outranks a lone class — so both of this button's display rules have to carry
   the extra class or the toggle shows up on desktop. */
.nav-links .nav-toggle { display: none; }
.nav-toggle {
  background: none; border: 0; padding: 0 2px; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--muted);
  min-height: 44px; align-items: center; gap: 7px;
}
.nav-toggle:hover { color: var(--ink); }
/* Three rules, drawn rather than an icon font or an SVG request. The word
   carries the meaning; the bars are what the eye finds. */
.nav-toggle-bars { display: block; width: 15px; height: 9px; position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after,
.nav-toggle-bars span {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px;
  background: currentColor; border-radius: 2px;
}
.nav-toggle-bars::before { top: 0; }
.nav-toggle-bars span { top: 3.75px; }
.nav-toggle-bars::after { bottom: 0; }

/* Four links plus the account wrap into two cramped rows on a phone and collide
   with the wordmark. They used to be dropped outright, which left a phone with
   no route to About, Plan or How it works at all. They move behind a Menu
   button instead: the bar stays as quiet as it was, and the account link keeps
   its place there, since reaching your own hosting shouldn't cost a tap. */
@media (max-width: 560px) {
  .nav-links { gap: 8px 16px; }
  .nav-links .nav-toggle { display: inline-flex; }

  .nav-menu {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    padding: 2px 22px 10px;
    background: var(--bg);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.07);
  }
  .nav-open .nav-menu { display: flex; }
  /* Full-width rows in the panel: the target is the line, not the word. */
  .nav-menu a {
    justify-content: flex-start;
    font-size: 15px; color: var(--ink);
    border-top: 1px solid var(--bg-alt);
  }
  .nav-menu a:first-child { border-top: 0; }
}

/* Under ~340px the wordmark, account link and Menu button stop fitting on one
   line. Drop the button's label and keep the bars — by that width the icon is
   doing the work anyway. */
@media (max-width: 380px) {
  .nav-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nav-toggle { padding: 0 6px; }
}

/* ---------- footer ---------- */

footer { border-top: 1px solid var(--line); padding: 24px 0 40px; margin-top: 60px; }
.foot-row { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.foot-row p { margin: 0; font-size: 12px; color: var(--faint); }
.foot-row a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.foot-row a:hover { color: var(--ink); }
/* The footer's own links are small text, not controls, so they keep the text
   line-height rather than a 44px box — spacing between them does the work. */
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }

/* On a phone the row wrapped into "About Privacy Terms Cookies", then the
   support address and the copyright together on one line — a run-on that made
   the copyright read as a fifth link, and left the whole block hanging off the
   left edge of a page that is otherwise centred.

   Rebuilt as four centred blocks — wordmark, links, address, copyright — each
   separated by the same 1.25rem, so the footer has one rhythm instead of three
   competing ones. The policy links stack rather than sharing a line: four
   underlined words in a row read as one run of text at this size, and stacked
   they also stop being 18px-tall touch targets sitting on top of each other. */
@media (max-width: 560px) {
  /* The section above already ends in 72px of its own padding. Another 48px of
     margin on top of that put most of a phone screen of nothing between the
     last sentence and the footer rule. */
  footer { margin-top: 0; padding: 34px 0 40px; }

  /* One rhythm for the whole block. The links carry padding for their touch
     targets, which would otherwise make two of the three gaps 6px wider than
     the third — so the gaps that sit against a padded link subtract it back. */
  .foot-row { --foot-gap: 1.25rem; --foot-link-pad: 6px; }

  .foot-row {
    flex-direction: column; align-items: center;
    text-align: center; gap: 0;
  }
  .foot-row .brand { margin-bottom: calc(var(--foot-gap) - var(--foot-link-pad)); }

  .foot-links { flex-direction: column; align-items: center; gap: 0; }
  /* 6px above and below turns an 18px line into a 30px target, which is both
     the visual rhythm and the reason adjacent links are no longer a mis-tap. */
  .foot-links a { padding: var(--foot-link-pad) 0; font-size: 13px; }

  /* Its own block, not a fifth link: set apart by the same 1.25rem as every
     other block, and carrying the page's ink rather than the muted grey and
     permanent underline the nav links share. The underline returns on hover
     and focus, so the affordance is there when a pointer or keyboard is. */
  .foot-links a[href^="mailto:"] {
    flex: 1 0 100%;
    margin-top: calc(var(--foot-gap) - var(--foot-link-pad)); padding: 0;
    font-size: 12.5px; color: var(--ink); text-decoration: none;
  }
  .foot-links a[href^="mailto:"]:hover,
  .foot-links a[href^="mailto:"]:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

  /* Last, and quietest — but quiet by size and spacing, not by tone.
     --faint (#75757a) measures 4.58:1 on white, which is the 4.5:1 floor with
     nothing to spare: opacity .9 already drops it to 3.78:1 and .7 to 2.67:1.
     There is no lighter grey in this palette that a person can still read, so
     the 11px and the 1.25rem above it do the work the opacity would have. */
  .foot-links span {
    flex: 1 0 100%;
    margin-top: var(--foot-gap); font-size: 11px;
  }
}