/* Toastly: guest page and the plain pages.
   Neutral and quiet. System fonts, black on white (white on black at night),
   grey for everything secondary, and one accent that marks only what can be
   tapped. The reading text carries the page. */

:root {
  --bg: #FFFFFF;
  --surface: #F2F2F4;
  --text: #111113;
  --muted: #6E6E73;
  --line: #E4E4E8;
  --accent: #C23B65;
  --on-accent: #FFFFFF;
  --veil: rgba(255, 255, 255, .86);
  --shadow: rgba(17, 17, 19, .14);

  --gutter: clamp(1.25rem, 6vw, 2rem);
  --column: 36rem;
  --reading: 21px;
  --radius: 14px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --surface: #1C1C1E;
    --text: #F5F5F7;
    --muted: #98989F;
    --line: #2C2C2E;
    --veil: rgba(0, 0, 0, .82);
    --shadow: rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

/* Must beat every display value that comes later */
[hidden] { display: none !important; }

* { box-sizing: border-box; }

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

body {
  margin: 0 auto;
  max-width: calc(var(--column) + 2 * var(--gutter));
  padding: 0 var(--gutter);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a, button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

a { color: var(--accent); }

button {
  font: inherit;
  color: var(--text);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

/* --- Guest page -------------------------------------------------------- */

body.guest {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  overscroll-behavior-y: contain;
}

body.guest main {
  flex: 1;
  padding-bottom: 6rem;
}

#top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 calc(var(--gutter) * -1) 1.75rem;
  padding: .7rem var(--gutter);
  padding-top: calc(.7rem + env(safe-area-inset-top));
  background: var(--veil);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
}

#title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* Language picker as a segmented control, the pattern everyone knows */
#picker {
  flex: none;
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface);
  border-radius: 999px;
}

#picker button {
  min-width: 2.4rem;
  min-height: 2.1rem;
  padding: 0 .55rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
}

#picker button[aria-pressed="true"] {
  background: var(--bg);
  color: var(--accent);
  box-shadow: 0 1px 3px var(--shadow);
}

#size {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  font-weight: 600;
  line-height: 1;
}
/* The A grows with the step, or nobody sees where it stands */
#size[data-step="0"] { font-size: 15px; }
#size[data-step="1"] { font-size: 19px; }
#size[data-step="2"] { font-size: 23px; }

/* The language question stands alone before anything runs */
#question {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 62dvh;
}

.ask {
  margin: 0;
  font-size: 20px;
  line-height: 1.35;
  color: var(--muted);
}

.ask.first {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--text);
  margin-bottom: .2rem;
}

#choices {
  margin-top: 1.75rem;
}

#choices button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 3.6rem;
  margin-bottom: .6rem;
  padding: 1rem 1.2rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 20px;
  text-align: left;
}

#choices button::after {
  content: "\203A";
  color: var(--accent);
  font-size: 24px;
  line-height: 1;
}

#choices button:active { opacity: .7; }

/* Waiting: one dot breathes, so it is clear the page is listening */
#waiting, #missing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 62dvh;
  text-align: center;
}

#waitingText, #missingText {
  margin: .9rem 0 0;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.01em;
}

#missingText { max-width: 20em; font-size: 20px; }

#hint {
  margin: 0;
  max-width: 20em;
  color: var(--muted);
}

.dot {
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: var(--muted);
  animation: breathe 2.8s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: .25; transform: scale(.75); }
  50% { opacity: 1; transform: scale(1); }
}

#speaker {
  margin: 0 0 1.25rem;
  font-size: 15px;
  color: var(--muted);
}

#speakerLabel::after { content: " \00B7  "; }
#speakerName { color: var(--text); font-weight: 600; }

/* The reading text */
.reading {
  font-size: var(--reading);
  line-height: 1.6;
  letter-spacing: -.003em;
  -webkit-hyphens: auto;
  hyphens: auto;
  /* Names must not break: hyphenate only long words */
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
  hyphenate-limit-chars: 8 3 3;
  text-wrap: pretty;
}

.reading p { margin: 0 0 1.1em; }
.reading p:last-child { margin-bottom: 0; }

/* The only motion: a new block fades in. Opacity only, never position,
   or the text jumps under the eye. */
@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade { animation: fade .45s ease-out; }

#ended {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  margin: 2.5rem 0 0;
  font-size: 14px;
  color: var(--muted);
}

#ended::before, #ended::after {
  content: "";
  width: 2rem;
  height: 1px;
  background: var(--line);
}

#jump {
  position: fixed;
  left: 50%;
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 20;
  min-height: 2.9rem;
  padding: .7rem 1.4rem;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 6px 20px var(--shadow);
}

#brand {
  padding: 1.5rem 0 calc(1.5rem + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 12px;
}

#brand a {
  color: var(--muted);
  text-decoration: none;
}

.note { color: var(--muted); padding: 2rem 0; }

@media (prefers-reduced-motion: reduce) {
  .fade, .dot { animation: none; }
  * { scroll-behavior: auto !important; }
}

@media (prefers-reduced-transparency: reduce) {
  #top { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* --- Plain pages: index, privacy, terms, support ------------------------- */

body.page {
  padding-top: calc(3rem + env(safe-area-inset-top));
  padding-bottom: 4rem;
}

.page .mark {
  display: inline-block;
  margin-bottom: 2.5rem;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.01em;
  color: var(--text);
  text-decoration: none;
}

.page h1 {
  margin: 0 0 .5rem;
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -.025em;
}

.page .lead {
  margin: 0 0 2.5rem;
  font-size: 20px;
  line-height: 1.5;
  color: var(--muted);
}

.page h2 {
  margin: 2.25rem 0 .5rem;
  font-size: 19px;
  letter-spacing: -.01em;
}

.page p, .page li { color: var(--text); }
.page ul { padding-left: 1.2rem; }
.page li { margin-bottom: .4rem; }
.page .muted { color: var(--muted); }

.page nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 15px;
}

.page nav a { text-decoration: none; }