/* Base / layout — spec §0, §2, §5 */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--fs-body);
  color: var(--text-1);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 1s ease;
}
body[data-dim="true"] { background: var(--bg-dim); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 300; margin: 0; }

/* App shell: narrow centered panel, ambient bg fills the sides on desktop (§2) */
.app {
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  position: relative;
}
.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 15% 10%, var(--accent-fill), transparent 70%),
    radial-gradient(55% 45% at 85% 90%, var(--accent-fill), transparent 70%);
  opacity: 0.5;
  transition: opacity 1s ease;
}
body[data-dim="true"] .ambient { opacity: 0; }

/* Desktop "aurora": two big blurred light-blobs in the space accent, drifting
   very slowly. Pure CSS — simple, alive, never busy. */
@media (min-width: 1024px) {
  .ambient { opacity: 1; }
  .ambient::before,
  .ambient::after {
    content: "";
    position: absolute;
    width: 55vw;
    height: 55vw;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-fill) 0%, transparent 65%);
    filter: blur(70px);
  }
  .ambient::before { top: -18%; left: -12%; }
  .ambient::after  { bottom: -22%; right: -10%; }
  @media (prefers-reduced-motion: no-preference) {
    .ambient::before { animation: drift 52s ease-in-out infinite alternate; }
    .ambient::after  { animation: drift 67s ease-in-out infinite alternate-reverse; }
  }
  /* film-grain overlay — kills banding on the big gradients, adds texture */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.6"/></svg>');
    background-size: 180px 180px;
  }
}
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(7vw, 6vh) scale(1.18); }
}

.room {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  min-height: 100dvh;
  padding: 0 var(--sp-4) calc(var(--sp-8) + env(safe-area-inset-bottom, 0));
  display: flex;
  flex-direction: column;
  background: var(--bg-room);
  transition: background 1s ease;
}
@media (min-width: 768px) {
  .room {
    max-width: 420px;          /* tablet: narrow panel (spec §2) */
    min-height: 100dvh;
    border-left: 1px solid var(--border-soft);
    border-right: 1px solid var(--border-soft);
  }
}

/* Desktop gets its own identity (product decision, overrides spec §2):
   full-width immersive layout on the aurora backdrop — no phone panel. */
@media (min-width: 1024px) {
  .room {
    max-width: 1200px;
    padding: 0 48px 48px;
    border: none;
    background: transparent;   /* the aurora IS the room */
  }
  .topbar { padding-top: 28px; }
  .brand { font-size: 22px; }
}

/* Header */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: calc(var(--sp-4) + env(safe-area-inset-top, 0)) 0 var(--sp-2);
}
.brand { font-family: var(--font-display); font-size: var(--fs-title); letter-spacing: .2px; }
.topbar-actions { display: flex; align-items: center; gap: var(--sp-2); }

/* Stage: where the breathing circle / pomodoro ring lives */
.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  position: relative;
  padding: var(--sp-6) 0;
}

.muted { color: var(--text-2); }
.dim-text { color: var(--text-3); }
.micro { font-size: var(--fs-micro); }
.small { font-size: var(--fs-small); }
.hidden { display: none !important; }

/* Sections fade in dim mode (§5) */
body[data-dim="true"] .dimmable { opacity: 0.12; transition: opacity 1s ease; }
.dimmable { transition: opacity 1s ease; }

/* Begin overlay (§4 no-autoplay, §6) */
.begin {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  text-align: center;
  padding: var(--sp-6);
  background: var(--bg-base);
}
.begin h1 { font-size: var(--fs-display); }
.begin p { color: var(--text-2); max-width: 30ch; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  body, .room, .ambient { transition: none; }
}