@font-face { font-family: "Bowlby One"; src: url(/fonts/BowlbyOne-Regular.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "Baloo 2"; src: url(/fonts/Baloo2-SemiBold.ttf) format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Baloo 2"; src: url(/fonts/Baloo2-ExtraBold.ttf) format("truetype"); font-weight: 800; font-display: swap; }

/* the card's roller-disco palette */
:root {
  --night: #2b1763; --deep: #1a0f45; --cream: #fff6e6; --ink: #1a0f45; --muted: #5b4f86;
  --red: #ff3d3d; --orange: #ff9b1a; --yellow: #ffd60a; --green: #36d67c; --blue: #38a8ff; --pink: #ff4fb8;
  --line: #e4d9c4; --radius: 18px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--night); color: var(--cream);
  font: 600 17px/1.45 "Baloo 2", system-ui, sans-serif;
}
a { color: inherit; }
h1, h2 { font-family: "Bowlby One", "Baloo 2", sans-serif; font-weight: 400; line-height: 1.1; margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

.rainbow { height: 10px; background: linear-gradient(90deg, var(--red) 0 20%, var(--orange) 0 40%, var(--yellow) 0 60%, var(--green) 0 80%, var(--blue) 0); }

.panel {
  background: var(--cream); color: var(--ink); border-radius: var(--radius);
  box-shadow: 0 6px 0 var(--deep); padding: 22px;
}
.panel h2 { font-size: 26px; margin-bottom: 6px; }
.muted { color: var(--muted); }
.small { font-size: 15px; }

label { display: block; font-weight: 800; margin: 16px 0 6px; }
input[type=text], input[type=email], input[type=number], textarea {
  width: 100%; padding: 11px 13px; border: 2px solid var(--line); border-radius: 12px; background: #fff;
}
input:focus, textarea:focus { border-color: var(--blue); outline: none; }
textarea { min-height: 88px; resize: vertical; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; padding: 12px 24px; cursor: pointer; font-weight: 800;
  background: var(--pink); color: #fff; box-shadow: 0 4px 0 #b3237b; text-decoration: none;
}
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #b3237b; }
.btn:disabled { opacity: .55; cursor: default; }
.btn.quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }
.btn.blue { background: var(--blue); box-shadow: 0 4px 0 #1b6fb0; }
.btn.danger { background: var(--red); box-shadow: 0 4px 0 #a81f1f; }

/* yes / maybe / no */
.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.choice {
  border: 3px solid var(--line); background: #fff; border-radius: 16px; padding: 14px 6px 10px;
  cursor: pointer; text-align: center; font-weight: 800; line-height: 1.15;
}
.choice span { display: block; font-family: "Bowlby One", sans-serif; font-weight: 400; font-size: 22px; }
.choice small { display: block; font-weight: 600; font-size: 14px; color: var(--muted); }
.choice[aria-pressed=true][data-v=yes] { border-color: var(--green); background: #e3fbee; }
.choice[aria-pressed=true][data-v=maybe] { border-color: var(--orange); background: #fff1dd; }
.choice[aria-pressed=true][data-v=no] { border-color: var(--red); background: #ffe7e7; }

.counts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stepper { display: flex; align-items: center; border: 2px solid var(--line); border-radius: 12px; background: #fff; }
.stepper button { width: 48px; height: 46px; border: 0; background: none; font-size: 24px; font-weight: 800; cursor: pointer; color: var(--blue); }
.stepper output { flex: 1; text-align: center; font-size: 20px; font-weight: 800; }

.pill { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: 14px; font-weight: 800; white-space: nowrap; }
.pill.yes { background: #c9f5dc; color: #0b5c2e; }
.pill.maybe { background: #ffe2b8; color: #7a4200; }
.pill.no { background: #ffd2d2; color: #8a1414; }
.pill.waiting { background: #ece6f7; color: var(--muted); }

.note { border-radius: 14px; padding: 14px 16px; margin-top: 16px; }
.note.good { background: #e3fbee; }
.note.warn { background: #fff1dd; }
.note.bad { background: #ffe7e7; }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }