@import url("./tokens.css");

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom);
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font: var(--step-0)/1.6 var(--font-ui);
  overflow-wrap: break-word;
}

h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 var(--space-4); }
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
p  { margin: 0 0 var(--space-4); max-width: var(--measure); }

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

a { color: var(--accent); text-underline-offset: .18em; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-sm); }

.wrap {
  width: min(100% - 2 * var(--space-4), 1080px);
  margin-inline: auto;
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}
.stack > * + * { margin-top: var(--space-4); }
.grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
/* Without this, .btn { display: inline-flex } beats the hidden attribute. */
[hidden] { display: none !important; }

/* Language switch, top-right of every page (ADR-0009). In the page flow, so it
   never sits on top of a room's header on a narrow phone. */
lang-switch {
  display: flex; justify-content: flex-end;
  padding: max(var(--space-2), env(safe-area-inset-top)) max(var(--space-4), env(safe-area-inset-right)) 0;
}
.lang-pill { display: flex; gap: 2px; padding: 3px; border-radius: var(--radius-full); background: var(--surface); box-shadow: var(--shadow); }
.lang-btn {
  min-width: var(--tap); min-height: var(--tap); padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius-full); background: transparent; color: var(--ink-soft);
  font: 600 var(--step-0)/1 var(--font-ui); cursor: pointer; touch-action: manipulation;
}
.lang-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

/* Top of every room: back button and title. */
.room-top { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-4); }
.room-top h1 { font-size: var(--step-2); margin: 0; min-width: 0; }
.room-top .btn { flex-shrink: 0; white-space: nowrap; }   /* long titles wrap, the Back button doesn't */

/* Small label on a room card, e.g. "try-out". */
.badge {
  display: inline-block; margin-bottom: var(--space-2); padding: 0 var(--space-3);
  border-radius: var(--radius-full); background: var(--accent); color: var(--accent-ink);
  font: 600 var(--step--1)/1.8 var(--font-ui);
}

/* Big friendly button — sized for a 9-year-old's finger on an iPad. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap); padding: var(--space-3) var(--space-6);
  border: 0; border-radius: var(--radius-full);
  background: var(--accent); color: var(--accent-ink);
  font: 600 var(--step-0)/1 var(--font-ui);
  text-decoration: none; cursor: pointer;
  touch-action: manipulation;
  transition: transform .12s ease, filter .12s ease;
}
/* iOS zooms the whole page when a control under 16px takes focus. */
input, select, textarea { font-size: max(1rem, 16px); font-family: inherit; }

.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(2px) scale(.99); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }

.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow);
}
.card--link { display: block; color: inherit; text-decoration: none; }
.card--link:hover { filter: brightness(1.04); }

[data-site="alice"] .card:nth-child(3n+1) { rotate: -.6deg; }
[data-site="alice"] .card:nth-child(3n)   { rotate:  .7deg; }