/* ============================================================================
   Psst design system.

   Soft pastel, rounded, mascot-led. Light is the primary world; dark is a real
   second theme, not an inversion, because the toggle is in the header.

   This is the only file with a hex code. Link-page themes are a runtime concern
   and live in js/themes.js.
   ============================================================================ */

:root {
  color-scheme: light;

  /* surfaces */
  --bg-a:        #FFF1F8;   /* page gradient, pink end */
  --bg-b:        #F3EDFF;   /* page gradient, lavender end */
  --surface:     #FFFFFF;
  --surface-2:   #FBF7FF;
  --surface-3:   #F5EEFC;
  --border:      #F2E6F8;
  --border-2:    #E7D8F2;

  /* text */
  --ink:         #2E1B4B;   /* headings */
  --text:        #6B5B81;   /* body */
  --muted:       #A294B5;   /* meta, captions */

  /* brand */
  --pink:        #FF4D8F;
  --pink-2:      #FF7AAC;
  --pink-soft:   #FFE6F0;
  --purple:      #7C5CE0;
  --purple-2:    #9C7CF0;
  --purple-soft: #EDE6FF;

  /* semantic */
  --star:        #FFC845;
  --blue:        #5B9BF8;
  --blue-soft:   #E4EFFF;
  --green:       #3DD68C;
  --danger:      #F4547A;

  /* mascot */
  --boo-body:     #FFFFFF;
  --boo-ink:      #3B2560;
  --boo-blush:    #FFB3CE;
  --boo-envelope: #C3AEF8;
  --boo-heart:    #FF4D8F;

  /* shape */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 30px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(94,58,132,.05), 0 2px 8px -2px rgba(94,58,132,.07);
  --shadow-md: 0 2px 4px rgba(94,58,132,.05), 0 10px 26px -10px rgba(94,58,132,.16);
  --shadow-lg: 0 4px 8px rgba(94,58,132,.06), 0 22px 48px -18px rgba(94,58,132,.26);
  --shadow-pink: 0 10px 26px -10px rgba(255,77,143,.55);

  --display: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* the app shell */
  --nav-h: 64px;
  --tabbar-h: 68px;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-a:        #1B1330;
  --bg-b:        #150F26;
  --surface:     #241B3C;
  --surface-2:   #2B2148;
  --surface-3:   #332752;
  --border:      #352A55;
  --border-2:    #443566;

  --ink:         #F6F0FF;
  --text:        #C6B8DC;
  --muted:       #8E7FAC;

  --pink:        #FF6BA3;
  --pink-2:      #FF8FBB;
  --pink-soft:   #40203A;
  --purple:      #A78BFA;
  --purple-2:    #BCA4FF;
  --purple-soft: #2E2350;

  --blue-soft:   #1E2A47;

  --boo-body:    #EFE7FF;
  --boo-ink:     #2A1B47;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 2px 8px -2px rgba(0,0,0,.4);
  --shadow-md: 0 2px 4px rgba(0,0,0,.3), 0 10px 26px -10px rgba(0,0,0,.6);
  --shadow-lg: 0 4px 8px rgba(0,0,0,.35), 0 22px 48px -18px rgba(0,0,0,.7);
  --shadow-pink: 0 10px 26px -10px rgba(255,107,163,.5);
}

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

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

body {
  margin: 0;
  min-height: 100svh;
  background: linear-gradient(150deg, var(--bg-a) 0%, var(--bg-b) 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

a { color: var(--pink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

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

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hidden { display: none !important; }

/* The `hidden` attribute must beat any author display rule.
   The browser implements `hidden` as `[hidden] { display: none }` in the UA
   stylesheet, which loses to ANY author-level display declaration. A view styled
   `.view { display: flex }` therefore ignores `hidden` completely and renders
   anyway. That shipped once and stacked every screen of the app on top of each
   other. Do not remove this rule. */
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ mascot */

.boo { display: block; overflow: visible; }
.boo-float { animation: float 4.2s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-9px) rotate(1.5deg); }
}

/* ----------------------------------------------------------------- buttons */

.btn {
  appearance: none;
  border: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  padding: 15px 26px;
  border-radius: var(--r-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-decoration: none;
  transition: transform .14s cubic-bezier(.3,.9,.4,1.3), box-shadow .18s ease,
              background-color .18s ease, opacity .18s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.965); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.btn-primary {
  background: linear-gradient(135deg, var(--pink) 0%, var(--pink-2) 100%);
  color: #fff;
  box-shadow: var(--shadow-pink);
}
.btn-primary:not([disabled]):hover { box-shadow: 0 14px 30px -10px rgba(255,77,143,.7); }

.btn-purple {
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-2) 100%);
  color: #fff;
  box-shadow: 0 10px 26px -10px rgba(124,92,224,.55);
}

.btn-soft {
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid var(--border-2);
  box-shadow: var(--shadow-sm);
}
.btn-soft:not([disabled]):hover { background: var(--surface-2); }

.btn-ghost { background: var(--purple-soft); color: var(--purple); }
.btn-ghost:not([disabled]):hover { background: var(--surface-3); }

.btn-block { width: 100%; }
.btn-sm { font-size: 14px; padding: 10px 18px; }
.btn-lg { font-size: 18px; padding: 18px 34px; }

.icon-btn {
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--muted);
  width: 42px; height: 42px;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  cursor: pointer; flex-shrink: 0;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.icon-btn:hover { color: var(--purple); border-color: var(--border-2); }

/* ------------------------------------------------------------------ inputs */

.field {
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--border-2);
  border-radius: var(--r-md);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  font-weight: 600;
  padding: 15px 18px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field::placeholder { color: var(--muted); font-weight: 400; }
.field:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 4px var(--pink-soft);
}
.field[aria-invalid="true"] { border-color: var(--danger); }

.label {
  font-family: var(--display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.error { color: var(--danger); font-size: 14px; font-weight: 600; line-height: 1.4; }
.error:empty { display: none; }

/* ------------------------------------------------------------------- cards */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 13.5px;
  padding: 8px 15px;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: all .16s ease;
  white-space: nowrap;
}
.chip:hover { border-color: var(--border-2); }
.chip[aria-pressed="true"], .chip.on {
  background: var(--pink-soft);
  color: var(--pink);
  border-color: transparent;
}
.chip .n {
  background: var(--surface-3);
  color: var(--muted);
  font-size: 11.5px;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}
.chip[aria-pressed="true"] .n, .chip.on .n { background: var(--pink); color: #fff; }

/* ------------------------------------------------------------------- toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));

  /* Hidden with visibility AND opacity, not just a transform.
     A percentage translate is relative to the element's own height, and an empty toast
     is only its padding tall, so `translate(-50%, 160%)` did not move it far enough to
     clear the offset it sits at. About 8px of a dark pill stayed parked at the bottom of
     every page, looking like a mystery button. Never rely on a percentage transform
     alone to move something off screen. */
  transform: translate(-50%, calc(100% + 40px));
  opacity: 0;
  visibility: hidden;

  background: var(--ink);
  color: #fff;
  font-family: var(--display);
  font-weight: 500;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-lg);
  transition: transform .32s cubic-bezier(.2,.9,.3,1.4),
              opacity .2s ease, visibility .32s;
  z-index: 200;
  max-width: calc(100vw - 36px);
  text-align: center;
  pointer-events: none;
}
.toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
}

/* ---------------------------------------------------------------- wordmark */

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 24px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -.02em;
}
.wordmark:hover { text-decoration: none; }
.wordmark .boo { width: 32px; height: 32px; }

/* ------------------------------------------------------------------ layout */

.shell { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 18px; }
.stack { display: flex; flex-direction: column; }