/* Site chrome shared by every surface: the landing, the generated article and
   legal pages, and the web app at /app/. The app cannot load ds.css — that
   sheet sizes bare h1/h2/h3 and would rewrite the side panel's typography — so
   the nav, footer and button rules the app also needs live here, class-scoped
   and safe to load next to src/sidepanel.css.

   Markup for the nav and footer comes from scripts/siteChrome.js. */

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  padding-inline: max(var(--edge, 20px), calc((100% - 1200px) / 2 + var(--edge, 20px)));
  border-bottom: none;
}
.nav-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav-brand img { width: 28px; height: 28px; }
.nav a { color: inherit; text-decoration: none; font-size: 14px; white-space: nowrap; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border: 1px solid var(--color-divider); border-radius: 0;
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); border-color: transparent; }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — footer — */
.site-footer {
  display: flex; flex-wrap: wrap; gap: var(--half, 12px) var(--leading, 24px);
  justify-content: space-between; align-items: center;
  padding: calc(2 * var(--leading, 24px)) 0;
  border-top: 1px solid var(--color-divider);
  font-size: 13px; color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--half, 12px) var(--leading, 24px); }
.footer-legal a { color: inherit; }
.footer-legal a:hover { color: var(--color-accent); }

/* Five short items fit on a phone once they wrap, so the nav stays usable
   instead of collapsing to the brand alone (there is no mobile menu). */
@media (max-width: 640px) {
  .nav { flex-wrap: wrap; gap: var(--half, 12px); padding-block: var(--half, 12px); }
  .nav-brand { margin-right: 0; flex-basis: 100%; font-size: 16px; }
  .nav a { font-size: 13px; }
  .nav .btn { padding-block: 6px; }
}