/* ============================================================
   KikoMix · Base
   Reset, background atmosphere, typography scale, layout shell,
   safe-area handling, focus visibility, selection, scrollbars,
   reduced-motion guard.
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: dark; /* native controls + scrollbars render dark */
}

body {
  font-family: var(--font-stack);
  font-size: var(--ts-body-lg);
  line-height: var(--lh-body);
  color: var(--on-surface);
  background-color: var(--surface);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: var(--on-primary-container); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { list-style: none; }

/* ---------- Atmosphere ----------
   A whisper of orange nebula behind everything, plus a faint
   drifting waveform strip. Decorative, pointer-transparent,
   and much quieter than before — tonal, not neon. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 40% at 50% -6%, rgba(255, 128, 0, .07), transparent 70%),
    radial-gradient(45% 35% at 85% 110%, rgba(110, 168, 242, .05), transparent 70%);
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: auto 0 0 0;
  height: 140px;
  z-index: -1;
  opacity: .1;
  /* Wide waveform strip (200% wide) so a -50% drift loops seamlessly. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='140' viewBox='0 0 480 140'%3E%3Cg fill='none' stroke='%23FF8000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M0 70 Q 15 40 30 70 T 60 70 T 90 70 T 120 70'/%3E%3Cpath d='M120 70 Q 135 25 150 70 T 180 70' stroke='%23d95359'/%3E%3Cpath d='M180 70 Q 195 100 210 70 T 240 70 T 270 70'/%3E%3Cpath d='M270 70 Q 285 35 300 70 T 330 70' stroke='%236ea8f2'/%3E%3Cpath d='M330 70 Q 345 105 360 70 T 390 70 T 420 70 T 450 70'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 480px 140px;
  background-repeat: repeat-x;
  animation: waveDrift 28s linear infinite;
  pointer-events: none;
}
/* The drifting waveform strip decorates the mobile layout only; on
   tablet/desktop it would peek out from behind the player bar and the
   navigation rail, so it is removed there. */
@media (min-width: 600px) {
  body::after { display: none; }
}

/* ---------- Typography scale (M3) ---------- */
h1, .hero { font-size: var(--ts-display); line-height: var(--lh-tight); font-weight: var(--weight-bold); letter-spacing: -.02em; }
h2, .title { font-size: var(--ts-headline); line-height: var(--lh-tight); font-weight: var(--weight-bold); letter-spacing: -.01em; }
h3 { font-size: var(--ts-title-lg); font-weight: var(--weight-bold); letter-spacing: -.01em; }
h4 { font-size: var(--ts-title-md); font-weight: var(--weight-semibold); }
.small { font-size: var(--ts-body-md); color: var(--on-surface-variant); }
.tiny, caption { font-size: var(--ts-body-sm); color: var(--on-surface-variant); }

/* ---------- App layout shell ----------
   Max 720px centered column on a 16/24 spacing rhythm.
   Bottom padding reserves room for the fixed navigation bar plus
   the device safe-area inset, so content never hides under it. */
main,
.app {
  display: block;
  width: 100%;
  max-width: var(--app-max);
  margin-inline: auto;
  padding: var(--space-4) var(--space-4) 0;
  padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px) + var(--space-6));
  min-height: 100dvh;
}

.screen { display: block; }
.screen[hidden] { display: none !important; }

/* Tab sections: only the active one shows. */
main .tab { display: none; }
main .tab.active { display: block; animation: fadeIn var(--dur-med) var(--ease); }

/* ---------- Focus visibility ----------
   2px signature-orange ring, always visible on dark. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--shape-sm);
}

/* ---------- Selection ---------- */
::selection {
  background: color-mix(in srgb, var(--primary) 38%, transparent);
  color: var(--on-surface);
}

/* ---------- Scrollbars: thin, tonal, unobtrusive ---------- */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--on-surface) 22%, transparent) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--on-surface) 18%, transparent);
  border-radius: var(--shape-full);
  border: 3px solid var(--surface);
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--on-surface) 30%, transparent);
}

/* ---------- Reduced motion ----------
   Kills all animation and smooth scrolling. Decorative layers hide.
   This also stills the Solar Flare glow (which additionally has its
   own .still path in js/solarflare.js) — never a strobe. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  body::after { display: none; }
  main .tab.active { animation: none; }
}