/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   site.css — the header, the footer, the typeface, the buttons. ONE definition, shared by every
   public page.

   WHY THIS FILE EXISTS. Every page used to carry its own copy of these rules: index, about and
   manual each had a full nav block inline, auth.css had another, and each had drifted. The header
   was a different height, a different weight and a different font depending which page you were
   on, the call to action had three different labels, and two pages rendered in a font the others
   did not load. Fixing it by appending overrides to four files made it worse — four definitions
   fighting on cascade order, where any rule missed in one file kept that page different.

   So: this file owns the chrome. It is linked LAST in every <head>, after each page's own <style>,
   so it wins on order without needing !important or specificity games. Page stylesheets own their
   own content and nothing else.

   If you are changing the header, change it here, and only here.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── TYPEFACE ─────────────────────────────────────────────────────────────────────────────────
   Self-hosted on purpose. It used to come from Google Fonts, which the production CSP blocks
   (font-src 'self' data:) — so the deployed site silently fell back while localhost looked right,
   and every visitor's IP went to Google on every page view. One variable file covers 400-900. */
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('vendor/fonts/hanken-grotesk.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  /* NOT `swap`. swap paints the fallback first and replaces it when the webfont lands, and because
     this @font-face lives in a stylesheet linked LAST the browser did not even discover the file
     until it had parsed everything else — so every page visibly re-set itself: heavier, then back.
     `optional` gives the font a short window and then commits to whatever it has for that load,
     so nothing ever reflows mid-paint. Paired with the preload in every <head>, the window is
     almost always won and the real face is what you see. */
  font-display: optional;
}

/* The fallback, metrics-matched. The other half of "no jump": on the rare load where the webfont
   misses its window, a fallback with different metrics would still shift the layout. These numbers
   make system-ui occupy the same space as Hanken Grotesk, so the two are interchangeable at the
   pixel level and the page cannot move whichever one it gets. */
@font-face {
  font-family: 'Hanken Fallback';
  src: local('Segoe UI'), local('Helvetica Neue'), local('Arial');
  size-adjust: 97%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}

:root { --font-sans: 'Hanken Grotesk', 'Hanken Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }

html, body, button, input, select, textarea, nav, footer {
  font-family: var(--font-sans);
  /* Pin it. Left to the browser, text switches between subpixel and greyscale antialiasing the
     moment an ancestor is composited — which is what made buttons look like they changed weight
     when pressed. Fixed here so the whole site renders glyphs one way, always. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── TYPE SCALE ───────────────────────────────────────────────────────────────────────────────
   Headings heavy, body medium. Weights previously ran 400 to 800 with no pattern, and manual.html
   carried none at all — its headings rode the browser default, lighter than everything else. */
h1, h2, h3 { font-weight: 800; letter-spacing: -.02em; }
h4, h5     { font-weight: 750; }
p, li, td, dd { font-weight: 500; }
strong, b  { font-weight: 750; }

/* ── HEADER ───────────────────────────────────────────────────────────────────────────────────
   Same markup on all seven pages: About · Manual · Pricing · Sign in · START FREE. */
nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding: 14px 48px;
  display: flex; align-items: center; justify-content: space-between;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
nav .logo {
  display: inline-flex; flex-direction: column;
  font-size: 15.5px; font-weight: 800; line-height: .92; letter-spacing: .06em;
  color: var(--white); text-decoration: none; user-select: none;
}
nav .logo span { display: block; }
nav .logo span + span { color: var(--accent); }

.nav-right { display: flex; align-items: center; gap: 15px; }

.theme-toggle {
  background: none; border: 1px solid var(--border); border-radius: 8px;
  color: var(--text2); cursor: pointer; padding: 8px 9px; line-height: 0;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, border-color .15s;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.icon-sun { display: block; }
.icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: none; }
[data-theme="dark"] .icon-moon { display: block; }

.nav-plain {
  color: var(--text); text-decoration: none;
  font-size: 15px; font-weight: 800; letter-spacing: -.01em;
  transition: color .15s;
}
.nav-plain:hover,
.nav-plain.here { color: var(--accent); text-decoration: none; }

/* ── BUTTONS ──────────────────────────────────────────────────────────────────────────────────
   Uppercase, heavy, centred. The call to action was 13px at weight 600 in sentence case, losing
   against the nav links beside it — the one control the page exists to get pressed. */
.nav-cta, .btn-primary, .primary, .btn-quiet, .oauth,
.tier .cta button, .about-cta .btn-primary, .about-cta .btn-quiet {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-sans);
  font-size: 13.5px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .07em;
  text-decoration: none; border: none; cursor: pointer;
  padding: 12px 22px; border-radius: 10px;
  transition: filter .15s, transform .15s, background .15s, border-color .15s;
}
.nav-cta, .btn-primary, .primary, .tier .cta button.primary, .about-cta .btn-primary {
  background: var(--accent); color: #fff;
}
.nav-cta:hover, .btn-primary:hover, .primary:hover,
.tier .cta button.primary:hover, .about-cta .btn-primary:hover {
  background: color-mix(in srgb, var(--accent) 88%, #000);
  box-shadow: none; text-decoration: none;
}
.nav-cta:active, .btn-primary:active, .primary:active,
.tier .cta button.primary:active { background: color-mix(in srgb, var(--accent) 78%, #000); }
/* Secondary: same shape and case, outlined rather than filled. One uppercase button beside one
   sentence-case button reads as a mistake. */
.btn-quiet, .about-cta .btn-quiet, .tier .cta button:not(.primary) {
  background: transparent; color: var(--text);
  border: 1px solid var(--border);
}
.btn-quiet:hover, .tier .cta button:not(.primary):hover { border-color: var(--accent); color: var(--accent); }
.tier .cta button:disabled { opacity: .55; cursor: default; }
.tier .cta button:disabled:hover { border-color: var(--border); color: var(--text); transform: none; }
/* The in-page buttons are the same thing, one step larger. */
.btn-primary, .about-cta .btn-primary, .about-cta .btn-quiet { font-size: 14.5px; padding: 16px 30px; }
.oauth { letter-spacing: .04em; }

/* ── FOOTER ───────────────────────────────────────────────────────────────────────────────────
   Deliberately dark in BOTH themes: it closes the document, and a light footer on a light page
   just trails off. Fixed values rather than tokens, for that reason. */
footer {
  background: #0d1017;
  border-top: 1px solid #1b2030;
  color: #8892ab;
}
footer a { color: #aab3c8; }
footer a:hover { color: var(--accent); }
footer .footer-logo span:first-child { color: #eef1fa; }
footer .footer-logo span:last-child  { color: var(--accent); }

@media (max-width: 760px) {
  nav { padding: 12px 20px; }
  .nav-plain { font-size: 14px; }
}
