/* ============================================================
   BASE — reset, layout scaffolding (chrome comes from gi-tool-kit.css)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ol, ul, dl, dd, figure, fieldset { margin: 0; }
ol, ul { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
button { font: inherit; color: inherit; }
a { color: inherit; }
img, svg { max-width: 100%; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
::selection { background: var(--brand-soft); color: var(--brand-active); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--inverse); color: #fff; padding: 10px 16px;
  border-radius: var(--r-md); font-size: 13px; font-weight: 500; text-decoration: none;
}
.skip:focus { left: 12px; top: 12px; }

.scroll { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box;
}

/* ---------- Layout ---------- */

.shell { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
/* Same width and gutters as .gi-appbar-in / .gi-toolhead-in, so edges line up. */
.wrap { width: 100%; max-width: var(--gi-wrap); margin: 0 auto; padding-left: var(--gi-gutter); padding-right: var(--gi-gutter); }

.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.grow { flex: 1; min-width: 0; }

/* ---------- Inline privacy note ---------- */

.privacy-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.privacy-inline svg { width: 14px; height: 14px; color: var(--success); flex: none; }

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- file:// fallback notice ---------- */
#bootError { display: none; }
#bootError[data-show="1"] { display: block; }