/* Shared by index.html, changelog.html, legal.html and new-look.html: the top nav, the footer, the sign-in
   control, the back-to-top button and the brand motion. Buttons are ui.css .btn; this file only sizes them. */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(10,10,10,0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  min-height: 64px;
  padding-top: var(--s2);
  padding-bottom: var(--s2);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  min-height: 44px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: var(--t20);
  color: var(--text);
  text-decoration: none;
}
.brand-mark { width: 32px; height: 30px; display: inline-block; flex: none; }
.brand-dot { color: var(--brand); font-weight: 700; }
.brand-ca { color: var(--text-dim); font-weight: 500; }
.nav-links { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--t14);
  font-weight: 500;
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--text); border-bottom-color: var(--text); }
.nav .signin-msg { flex-basis: 100%; text-align: right; }

/* Size step for page buttons; colour and hover stay ui.css .btn and .btn.primary. */
.btn.lg { min-height: 48px; padding: 0 var(--s5); font-size: var(--t16); }

/* Sign in with Google, dark theme: dark fill, grey stroke, light label, the G on white. */
.btn.google { min-height: 44px; background: #131314; border-color: #8e918f; color: #e3e3e3; gap: var(--s3); padding-left: var(--s2); }
.btn.google:hover:not(:disabled) { background: #232325; }
.btn.google .g-mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r-pill); background: #ffffff; flex: none; }
.btn.google .g-mark svg { width: 18px; height: 18px; }
/* Nav sign-in: the Google G on a white disc, then "Sign in" (a label Google offers for its own button). */
.nav-signin { display: inline-flex; align-items: center; gap: var(--s2); }
.nav-signin .g-mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--r-pill); background: #ffffff; flex: none; }
.nav-signin .g-mark svg { width: 14px; height: 14px; }
.signin-msg { margin: var(--s2) 0 0; font-size: var(--t14); color: var(--text); }
.signin-msg[hidden] { display: none; }

/* Footer: identical on index, changelog and legal (scripts/landing.mjs compares them). */
.site-footer { border-top: 1px solid var(--border); }
.footer-inner { padding-top: var(--s6); padding-bottom: var(--s7); font-size: var(--t14); color: var(--text-dim); }
.footer-line { margin: 0 0 var(--s3); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.footer-links a { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; color: var(--text); text-decoration: none; }
.footer-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.gh-mark { width: 16px; height: 16px; flex: none; }

/* Back to top: the aorti mark as the up caret, on the brand red. Static: no pulse, no glow. */
.to-top {
  position: fixed;
  bottom: var(--s5);
  right: var(--s5);
  z-index: var(--z-menu);
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--brand);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.to-top.visible { opacity: 1; pointer-events: auto; }
.to-top:hover { background: #c93d3c; }
.to-top svg { width: 24px; height: 22px; display: block; margin-top: -2px; }

@media (max-width: 760px) {
  .nav-inner { min-height: 56px; gap: var(--s2) var(--s3); }
  .nav-link { display: none; }
  .to-top { bottom: var(--s4); right: var(--s4); }
}
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* Brand motion (S43): the border trail ring comes from site.js. Plays with reduced motion on (Khal 2026-10-12). */
.trail-host { position: relative; }
.trail { position: absolute; z-index: 1; overflow: visible; pointer-events: none; opacity: 0; transition: opacity .15s ease-out; }
.trail-on > .trail, .trail-focus > .trail { opacity: 1; transition: none; }
.trail rect { fill: none; stroke: var(--warn-high); }
.trail-rest { opacity: 0; }
.trail-focus > .trail .trail-rest { opacity: .35; }
/* Questions: a 1px red line grows from the left over the row's bottom border; it replaces the underline. */
.faq-item { position: relative; }
.faq-item::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--warn-high);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
.faq-item:has(> summary:hover)::after { transform: scaleX(1); }
details.faq-item > summary:hover { text-decoration: none; }
/* Logo: one gentle beat on hover. */
.brand-mark { transform-origin: 50% 60%; }
.brand:hover .brand-mark { animation: brand-beat .52s ease-out 1; }
@keyframes brand-beat { 0% { transform: scale(1); } 28% { transform: scale(1.1); } 52% { transform: scale(.97); } 100% { transform: scale(1); } }

/* No widows: a paragraph never ends with one word alone on its last line (Khal 2026-10-12). Headings balance. */
p, li, figcaption, summary, dd, blockquote, .lede { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }