/* ============================================================
   navsheet — mobile navigation for the public site
   ------------------------------------------------------------
   Every public page except index.html hid .nav-links below 920px
   with nothing replacing it: on a 375px screen the free calculator
   showed a wordmark and one button, and Pricing, the calculator,
   About, the blog and every in-page anchor were unreachable. This
   is the one implementation; navsheet.js builds the sheet from the
   page's own nav markup so the two can't drift apart.

   Tokens are read with fallbacks because the public pages run two
   different systems (v2/v3 on the landing set, style.css on the
   blog set) and this file has to look native in both.
   ============================================================ */

/* ── the wordmark ────────────────────────────────────
   The logo was three different logos. The landing set draws it with
   .wordmark at 18px/800 and -0.028em; style.css draws the blog and legal
   set with .nav-brand at 18px/700 and -0.3px; changelog and 404 each ship
   their own .nav-logo at 20px/800. Walking between Pricing and the blog
   changed the weight of the company name.

   The landing set's values are canonical, because that is the primary
   brand surface. style.css is the app's sheet and is not ours to edit
   this session, so the correction lands here: this file already loads
   after it on every page that carries the .nav-brand markup, and it is
   already the shared sheet for that nav. Tracking is in em so it holds
   if the size ever moves. */
.site-nav .nav-brand {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.028em;
}

.nav-burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  padding: 0; margin-left: 2px;
  border: 1px solid var(--border2, #c8cad8);
  border-radius: 0;
  background: var(--surface, #fff);
  color: var(--text, #1a1d27);
  cursor: pointer;
}
.nav-burger svg { width: 20px; height: 20px; }

.nav-sheet {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10, 12, 20, 0.5);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.nav-sheet.open { opacity: 1; }

.nav-sheet-panel {
  position: absolute; inset: 0 0 auto 0;
  max-height: 100%; overflow-y: auto;
  padding: 14px 20px 22px;
  background: var(--bg, #fff);
  border-bottom: 1px solid var(--border, #e0e2ed);
  transform: translateY(-8px);
  transition: transform 0.18s ease;
}
.nav-sheet.open .nav-sheet-panel { transform: none; }

.nav-sheet-top {
  display: flex; align-items: center; justify-content: space-between;
  height: 44px;
}
.nav-sheet-top .nss-tag {
  font-size: 13px; font-weight: 600; letter-spacing: 0.4px;
  color: var(--text3, #666c8a);
}
.nav-sheet-x {
  width: 44px; height: 44px; margin-right: -6px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border2, #c8cad8);
  border-radius: 0;
  background: var(--surface, #fff);
  color: var(--text, #1a1d27);
  cursor: pointer;
}
.nav-sheet-x svg { width: 19px; height: 19px; }

.nav-sheet-links { display: flex; flex-direction: column; margin-top: 6px; }
.nav-sheet-links a {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px;
  font-size: 17px; font-weight: 700;
  color: var(--text, #1a1d27);
  text-decoration: none;
  border-bottom: 1px solid var(--border, #e0e2ed);
}
.nav-sheet-links.alt a {
  min-height: 50px;
  font-size: 15px; font-weight: 600;
  color: var(--text2, #4a4f6a);
}
.nav-sheet-links a .tag {
  margin-left: auto;
  padding: 2px 7px;
  border: 1px solid var(--accent-line, rgba(58, 98, 224, 0.22));
  border-radius: 5px;
  background: var(--accent-wash, rgba(58, 98, 224, 0.07));
  color: var(--accent, #3a62e0);
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: 11px; font-weight: 700; letter-spacing: 0.8px;
}
.nav-sheet-links a[aria-current="page"] { color: var(--accent, #3a62e0); }

.nav-sheet-sep { height: 18px; }

.nav-sheet-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.nav-sheet-cta a {
  display: flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 18px;
  border-radius: 0;
  font-size: 15px; font-weight: 700;
  text-decoration: none;
}
.nav-sheet-cta .ns-primary {
  background: var(--accent, #3a62e0);
  color: #fff;
  border: 1px solid var(--accent, #3a62e0);
}
.nav-sheet-cta .ns-ghost {
  background: transparent;
  color: var(--text, #1a1d27);
  border: 1px solid var(--border2, #c8cad8);
}

.nav-sheet-fine {
  margin: 16px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--text3, #666c8a);
}
.nav-sheet-fine a { color: var(--text2, #4a4f6a); }

.nav-sheet :where(a, button):focus-visible {
  outline: 2px solid var(--accent, #3a62e0);
  outline-offset: 2px;
  border-radius: 5px;
}

@media (max-width: 920px) { .nav-burger { display: flex; } }
@media (min-width: 921px) { .nav-sheet { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .nav-sheet, .nav-sheet-panel { transition-duration: 0.001ms; }
}

/* The blog nav's action group is display:block, and style.css collapses its
   theme button and Sign In link below 920px. Dropping a 44px trigger into
   that made the CTA and the burger overlap. A flex row lays them out; the
   CTA stays visible because the sheet's own primary action is the trial,
   not this page's "Open Tool". */
@media (max-width: 920px) {
  .nav-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }
  .nav-actions > .nav-cta { flex: 0 0 auto; }
}

/* ── the thumb has to hit it ─────────────────────────────
   Measured across 320-480px: .nav-cta rendered 107x36 on blog, privacy and
   terms, and changelog's own nav gave 107x37 for the CTA, 25x26 for the theme
   button and 57x29 for the wordmark. All under the 44px minimum, on the
   surface PRODUCT.md calls primary: a phone, in a truck, in gloves.

   .nav-cta, .nav-login and .theme-btn are declared in style.css, which is the
   app's sheet and off limits for public-site work, so the correction lands
   here alongside the rest of the mobile nav. Padding rather than height, so
   the label keeps its own vertical rhythm and only the hit area grows. */
@media (max-width: 920px) {
  .site-nav .nav-cta,
  .site-nav .nav-login {
    min-height: 44px;
    padding-top: 0; padding-bottom: 0;
    display: inline-flex; align-items: center;
  }
  .site-nav .theme-btn,
  .theme-btn { min-width: 44px; min-height: 44px; }
  .site-nav .nav-brand,
  .nav-logo { min-height: 44px; display: inline-flex; align-items: center; }
  /* A 44px target that flex can squeeze is not a 44px target. changelog's
     burger measured 37x44 because it was the only shrinkable thing left. */
  .nav-burger, .nav-sheet-x { flex: 0 0 44px; min-width: 44px; }
}

/* Raising those targets made the row wider, which pushed this set's own
   burger off a 320px screen: blog, privacy and terms all reported 332px of
   content in 320px of viewport. Fixing the thumb broke the reach. Below
   400px the CTA gives way, exactly as on the landing set, because the sheet
   carries a way in ("Start free trial", "Sign In") and the burger is the one
   control that must never be unreachable. */
@media (max-width: 400px) {
  .site-nav { padding-left: 14px; padding-right: 14px; }
  .site-nav .nav-cta { display: none; }
  .site-nav .nav-actions { gap: 8px; }
}