/* ==========================================================================
   Base — reset, typography, focus, utilities
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-base);
  color: var(--tx-1);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv05" 1, "cv08" 1, "ss03" 1, "tnum" 0;
  overscroll-behavior-y: none;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

h1 { font-size: var(--fs-24); line-height: var(--lh-tight); font-weight: 640; letter-spacing: -.018em; }
h2 { font-size: var(--fs-18); line-height: var(--lh-snug); font-weight: 620; letter-spacing: -.012em; }
h3 { font-size: var(--fs-15); line-height: var(--lh-snug); font-weight: 600; letter-spacing: -.006em; }
h4 { font-size: var(--fs-13); line-height: var(--lh-snug); font-weight: 620; }

a { color: var(--tx-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}
button { background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; }

img, svg, canvas, video { display: block; max-width: 100%; }
svg { flex: none; }

hr { border: 0; border-top: 1px solid var(--br-1); margin: var(--s-8) 0; }

table { border-collapse: collapse; border-spacing: 0; width: 100%; }

kbd {
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: 600;
  line-height: 1;
  display: inline-block;
  min-width: 1.4em;
  text-align: center;
  padding: 3px 5px;
  border: 1px solid var(--br-2);
  border-bottom-width: 2px;
  border-radius: var(--r-4);
  background: var(--bg-sunken);
  color: var(--tx-2);
}

code, .mono { font-family: var(--font-mono); font-size: .92em; }

/* ---- focus ---- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--a-500);
  outline-offset: 2px;
  border-radius: var(--r-3);
}
.focus-inset:focus-visible { outline-offset: -2px; }

/* ---- selection ---- */
::selection { background: var(--a-100); color: var(--a-900); }
:root[data-theme="dark"] ::selection { background: var(--a-800); color: #fff; }

/* ---- scrollbars ---- */
* { scrollbar-width: thin; scrollbar-color: var(--n-300) transparent; }
:root[data-theme="dark"] * { scrollbar-color: #39434f transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--tx-4) 46%, transparent);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--tx-3) 72%, transparent); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ---- utilities ---- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: -60px; left: 12px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--br-2);
  border-radius: var(--r-8);
  box-shadow: var(--sh-lg);
  font-weight: 600;
  transition: top var(--dur-2) var(--ease-out);
}
.skip-link:focus { top: 12px; text-decoration: none; }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nowrap { white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); }
.gap-5 { gap: var(--s-5); } .gap-6 { gap: var(--s-6); } .gap-8 { gap: var(--s-8); }
.gap-10 { gap: var(--s-10); }
.grow { flex: 1 1 auto; min-width: 0; }
.spacer { flex: 1 1 auto; }
.hidden { display: none !important; }
.muted { color: var(--tx-3); }
.dim { color: var(--tx-2); }
.strong { font-weight: 600; }
.t-11 { font-size: var(--fs-11); } .t-12 { font-size: var(--fs-12); }
.t-13 { font-size: var(--fs-13); } .t-15 { font-size: var(--fs-15); }
.t-center { text-align: center; }
.t-right { text-align: right; }
.upper { text-transform: uppercase; letter-spacing: .06em; }
.pointer { cursor: pointer; }
.no-select { user-select: none; -webkit-user-select: none; }
.grabbing, .grabbing * { cursor: grabbing !important; }
.resizing, .resizing * { user-select: none !important; }

/* ---- boot screen ---- */
.boot {
  position: fixed; inset: 0;
  display: grid; place-content: center; justify-items: center;
  gap: var(--s-8);
  background: var(--bg-app);
  z-index: 200;
  transition: opacity var(--dur-4) var(--ease-out);
}
.boot--out { opacity: 0; pointer-events: none; }
.boot__mark { color: var(--a-500); animation: bootPulse 1.6s var(--ease) infinite; }
.boot__bar { width: 168px; height: 3px; border-radius: 999px; background: var(--n-150); overflow: hidden; }
.boot__bar i { display: block; height: 100%; width: 40%; border-radius: 999px; background: var(--a-500); animation: bootSlide 1.15s var(--ease) infinite; }
.boot__text { font-size: var(--fs-13); color: var(--tx-3); }
@keyframes bootSlide { 0% { transform: translateX(-110%); } 100% { transform: translateX(360%); } }
@keyframes bootPulse { 0%,100% { opacity: .55; transform: scale(.97); } 50% { opacity: 1; transform: scale(1); } }

.overlays { position: relative; z-index: var(--z-modal); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* User preference: reduce motion (Settings → Profile → Appearance) */
:root[data-motion="reduced"] *,
:root[data-motion="reduced"] *::before,
:root[data-motion="reduced"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}