/* ============================================================
   Base — reset, document defaults, keyframes, utilities
   ============================================================ */

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

/* The hidden attribute must win over any display rule a component sets */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
}

a          { color: var(--brand); text-decoration: none; }
a:hover    { color: var(--brand-deep); }

button {
  font: inherit;
  color: inherit;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

input, textarea, select { font: inherit; color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--ink-soft); opacity: .7; }

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -.2px; }

/* ---- app shell ---------------------------------------------------------- */
.app        { display: flex; flex-direction: column; min-height: 100vh; }
.page       { flex: 1; width: 100%; max-width: var(--page-max); margin: 0 auto;
              padding: var(--space-6) clamp(14px, 3vw, 26px) 70px; }

/* ---- utilities --------------------------------------------------------- */
.u-spacer   { flex: 1; }
.u-num      { font-variant-numeric: tabular-nums; }
.u-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-hidden   { display: none !important; }
.u-soft     { color: var(--ink-soft); }
.u-center   { text-align: center; }

/* Horizontal scroll rail — scrollbar hidden, snap-free */
.rail {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  padding: var(--space-1) var(--space-1) var(--space-2);
  margin: 0 calc(var(--space-1) * -1);
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }

/* ---- motion ------------------------------------------------------------ */
@keyframes pop   { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes toast { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

.anim-pop  { animation: pop  var(--dur) ease; }
.anim-fade { animation: fade var(--dur) ease; }

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