/*
 * RatherQuestions — hand-drawn zine on butter paper.
 * 1px indigo ink borders, no shadows. Sunflower is the only action color;
 * tangerine and periwinkle mark options A and B; teal is decoration only.
 */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #fdf6e9;      /* page canvas: warm butter paper */
  --card: #ffffff;       /* raised surfaces */
  --ink: #1d1a3a;        /* text, borders, outlines: deep indigo, never pure black */
  --ink-soft: #2d2a4a;
  --muted: #5a5670;
  --hairline: #e4dccb;
  --action: #ffd23f;     /* sunflower: the only button / highlight color */
  --action-hover: #ffc61a;
  --opt-a: #ff8a5c;      /* tangerine: option A, decoration */
  --opt-b: #9b8cff;      /* periwinkle: option B, decoration */
  --teal: #2ec4b6;       /* decoration only */
  --grape: #4b2bbd;      /* list numbers, small accents */
  --focus: #6b5cff;

  --font-display: 'Fraunces', 'DM Serif Display', Georgia, serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --radius-sm: 4px;
  --radius-btn: 12px;
  --radius-card: 16px;
  --radius-lg: 40px;
  --radius-pill: 9999px;

  --page-max: 1200px;
  --gutter: 16px;
  --section-gap: 96px;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: var(--gutter);
  top: var(--gutter);
  z-index: 50;
  background: var(--card);
  border: 1px solid var(--ink);
  border-radius: var(--radius-btn);
  padding: 8px 16px;
}

.wrap {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Type ---------- */

h1,
h2,
h3,
.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'SOFT' 100, 'WONK' 0;
  letter-spacing: -0.028em;
  line-height: 1.05;
  margin: 0;
}

h1 {
  font-size: clamp(44px, 9vw, 96px);
}

h2 {
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.1;
}

h3 {
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.lede {
  font-size: 20px;
  max-width: 600px;
  color: var(--ink-soft);
}

.eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Hand-drawn highlighter swash behind a keyword. Max two per headline. */
.swash {
  position: relative;
  white-space: nowrap;
  z-index: 0;
}

.swash::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -0.12em;
  right: -0.12em;
  top: 0.42em;
  bottom: 0.02em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath fill='%23ffd23f' d='M6 34C4 18 30 8 70 6s104-2 120 10c10 8 8 24-6 32-20 10-70 9-112 8C34 55 8 50 6 34z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform: rotate(-2deg);
}

.swash--alt::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath fill='%239b8cff' d='M4 30C6 14 38 6 80 5s100 3 112 14c9 9 4 24-12 30-22 8-74 7-114 5C30 52 2 46 4 30z'/%3E%3C/svg%3E");
  transform: rotate(1.5deg);
}

/* ---------- Confetti ---------- */

.confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.confetti i {
  position: absolute;
  display: block;
  border-radius: 50%;
}

.c-sun { background: var(--action); }
.c-tangerine { background: var(--opt-a); }
.c-periwinkle { background: var(--opt-b); }
.c-teal { background: var(--teal); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 20px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--ink);
  font: 700 18px/1.2 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.btn:hover {
  background: var(--card);
}

.btn--primary {
  background: var(--action);
}

.btn--primary:hover {
  background: var(--action-hover);
}

.btn--pill {
  white-space: nowrap;
  border-radius: var(--radius-pill);
  min-height: 40px;
  padding: 6px 18px;
  font-size: 16px;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Header / nav ---------- */

.site-header {
  padding: 20px 0;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-variation-settings: 'SOFT' 100;
  font-size: 26px;
  letter-spacing: -0.03em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.wordmark img {
  width: 40px;
  height: 40px;
}

.nav-links {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 4px;
}

.nav-links a {
  display: inline-block;
  padding: 8px 14px;
  font-size: 16px;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: var(--radius-pill);
}

.nav-links a:hover,
.nav-links a[aria-current='page'] {
  color: var(--ink);
  background: var(--card);
}

.nav-links {
  align-items: center;
}

/* Dropdown: <details> so it opens without JS; site.js closes it on outside click / Esc. */
.nav-menu {
  position: relative;
}

.nav-menu summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 16px;
  color: var(--ink-soft);
  border-radius: var(--radius-pill);
  cursor: pointer;
  list-style: none;
}

.nav-menu summary::-webkit-details-marker {
  display: none;
}

.nav-menu summary::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.18s ease;
}

.nav-menu details[open] summary::after {
  transform: translateY(1px) rotate(225deg);
}

.nav-menu summary:hover,
.nav-menu summary.is-current,
.nav-menu details[open] summary {
  color: var(--ink);
  background: var(--card);
}

.nav-sub {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  min-width: 220px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--ink);
  border-radius: var(--radius-card);
}

.nav-menu:last-child .nav-sub {
  left: auto;
  right: 0;
}

.nav-sub a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: var(--radius-btn);
}

.nav-sub a:hover,
.nav-sub a[aria-current='page'] {
  background: var(--paper);
}

.nav-sub .chip {
  flex: none;
  white-space: nowrap;
  padding: 2px 8px;
  font-size: 12px;
  background: var(--action);
}

@media (min-width: 900px) {
  .nav-links {
    display: flex;
  }
}

/* ---------- Mobile menu (< 900px) ---------- */

.site-header .wrap {
  position: relative;
}

.header-cta {
  display: none;
}

.mobile-menu summary {
  list-style: none;
  min-height: 44px;
  padding: 6px 14px;
  background: var(--card);
}

@media (max-width: 899px) {
  .site-header .wrap {
    gap: 12px;
  }

  .wordmark {
    font-size: 22px;
    gap: 6px;
  }

  .wordmark img {
    width: 32px;
    height: 32px;
  }
}

.mobile-menu summary::-webkit-details-marker {
  display: none;
}

.mobile-menu .icon-close,
.mobile-menu[open] .icon-open {
  display: none;
}

.mobile-menu[open] .icon-close {
  display: block;
}

.mobile-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: var(--gutter);
  right: var(--gutter);
  z-index: 40;
  padding: 16px 20px 20px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
}

.mobile-panel h2 {
  font-size: 18px;
  margin: 12px 0 4px;
}

.mobile-panel h2:first-child {
  margin-top: 0;
}

.mobile-panel ul {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.mobile-panel a {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--radius-btn);
  text-decoration: none;
  font-size: 17px;
}

.mobile-panel a:hover,
.mobile-panel a[aria-current='page'] {
  background: var(--paper);
}

.mobile-panel .chip {
  padding: 1px 8px;
  font-size: 12px;
  background: var(--action);
  white-space: nowrap;
}

@media (min-width: 900px) {
  .header-cta {
    display: inline-flex;
  }

  .mobile-menu {
    display: none;
  }
}

/* Narrow desktops: the wordmark and the nav need the room more than the CTA. */
@media (min-width: 900px) and (max-width: 1079px) {
  .header-cta {
    display: none;
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: 24px 0 28px;
}

@media (min-width: 900px) {
  .hero {
    padding: 40px 0 56px;
  }
}

/* Mobile: the generator must be above the fold, so the hero stays lean. */
@media (max-width: 899px) {
  .hero .btn-row,
  .hero--category .hero-mascot {
    display: none;
  }
}

.hero .wrap {
  position: relative;
  z-index: 1;
}

.hero h1 {
  max-width: 14ch;
}

.hero .lede {
  margin: 20px 0 0;
}

.hero--home {
  text-align: center;
  padding-top: 24px;
}

.hero--home h1,
.hero--home .lede {
  margin-left: auto;
  margin-right: auto;
}

.hero--home .lede {
  margin-top: 20px;
}

.hero-mascot {
  width: 96px;
  margin: 0 auto 4px;
}

@media (min-width: 900px) {
  .hero-mascot {
    position: absolute;
    left: 0;
    bottom: -40px;
    width: 210px;
    margin: 0;
  }

  .hero--category .hero-mascot {
    left: auto;
    right: var(--gutter);
    bottom: -20px;
  }
}

/* ---------- Generator ---------- */

.play {
  scroll-margin-top: 16px;
}

.section.play {
  padding-top: 0;
}

.card {
  background: var(--card);
  border: 1px solid var(--ink);
  border-radius: var(--radius-card);
}

.generator {
  position: relative;
  padding: 28px 20px 24px;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

.generator__label {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'SOFT' 100;
  font-size: 22px;
  margin: 0 0 20px;
}

.choices {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
}

.choices__or {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  align-self: center;
  justify-self: center;
}

@media (min-width: 700px) {
  .generator {
    padding: 40px;
  }

  .choice {
    min-height: 120px;
  }

  .choices {
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
  }
}

.choice {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 96px;
  padding: 24px 20px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-card);
  background: var(--paper);
  color: var(--ink);
  font: 700 22px/1.3 var(--font-body);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.choice:hover:not(:disabled) {
  background: var(--card);
}

.choice:disabled {
  cursor: default;
}

.choice__text {
  position: relative;
  z-index: 1;
  display: block;
}

/* Option pictures (kid-directed pages): small beside the text on phones so
   the card stays above the fold, larger above it from 700px. */
.choice--pic {
  display: grid;
  grid-template-columns: 76px 1fr;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  text-align: left;
}

.choice__pic {
  position: relative;
  z-index: 1;
  width: 76px;
  height: 76px;
  object-fit: contain;
  padding: 4px;
  box-sizing: border-box;
  border: 1px solid var(--ink);
  border-radius: 12px;
  background: var(--card);
}

.choice--pic .choice__pct {
  grid-column: 2;
}

@media (min-width: 700px) {
  .choice--pic {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 20px;
    text-align: center;
  }

  .choice__pic {
    width: 150px;
    height: 150px;
    padding: 8px;
    border-radius: 16px;
  }

  .choice--pic .choice__pct {
    grid-column: auto;
  }
}

/* Result state: a fill bar grows from the left, percentage underneath. */
.choice__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  z-index: 0;
  transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.choice--a .choice__bar { background: var(--opt-a); }
.choice--b .choice__bar { background: var(--opt-b); }

.choice__pct {
  position: relative;
  z-index: 1;
  display: none;
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 36px;
  line-height: 1;
}

.is-voted .choice__pct {
  display: block;
}

.choice.is-picked {
  outline: 3px solid var(--ink);
  outline-offset: -4px;
}

.generator__meta {
  margin: 20px 0 0;
  min-height: 1.5em;
  font-size: 15px;
  color: var(--muted);
}

.generator__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

/* ---------- Sections ---------- */

.section {
  padding: 56px 0;
}

@media (min-width: 900px) {
  .section {
    padding: calc(var(--section-gap) / 2) 0;
  }
}

.section > .wrap > h2 {
  margin-bottom: 24px;
}

.prose {
  max-width: 680px;
}

.prose p {
  margin: 0 0 16px;
}

/* ---------- Question list ---------- */

.qlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  counter-reset: q;
}

.qlist li {
  counter-increment: q;
}

.qlist a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  align-items: baseline;
  padding: 16px 20px;
  background: var(--card);
  border: 1px solid var(--ink);
  border-radius: var(--radius-card);
  text-decoration: none;
  transition: background-color 0.18s ease;
}

.qlist a:hover {
  background: #fffdf7;
}

.qlist a::before {
  content: counter(q);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  min-width: 2ch;
  color: var(--grape);
}

.qlist__split {
  grid-column: 2;
  font-size: 14px;
  color: var(--muted);
}

@media (min-width: 900px) {
  .qlist {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Category chips / grid ---------- */

.chip {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  background: var(--card);
}

.chip--tangerine { background: var(--opt-a); }
.chip--periwinkle { background: var(--opt-b); }
.chip--teal { background: var(--teal); }

.cat-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.cat-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  text-decoration: none;
  transition: background-color 0.18s ease;
}

.cat-card:hover {
  background: #fffdf7;
}

.cat-card h3 {
  font-size: 20px;
}

.cat-card p {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}

.cat-group + .cat-group {
  margin-top: 40px;
}

.cat-group > h3 {
  margin-bottom: 16px;
}

/* ---------- FAQ ---------- */

.faq {
  display: grid;
  gap: 12px;
  max-width: 800px;
}

.faq details {
  padding: 20px 24px;
}

.faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 19px;
}

.faq details p {
  margin: 12px 0 0;
}

/* ---------- Breadcrumbs ---------- */

.crumbs {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 16px;
}

.crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.crumbs li + li::before {
  content: '/';
  margin-right: 6px;
}

/* ---------- Footer ---------- */

.site-footer {
  margin-top: 48px;
  padding: 48px 0 40px;
  border-top: 1px solid var(--ink);
  font-size: 15px;
}

.footer-cols {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.site-footer h2 {
  font-size: 20px;
  margin-bottom: 12px;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.site-footer a {
  text-decoration-color: var(--hairline);
}

.site-footer .small {
  margin-top: 40px;
  color: var(--muted);
}

/* ---------- Cookie banner (vanilla-cookieconsent) ---------- */

#cc-main {
  --cc-font-family: var(--font-body);
  --cc-bg: var(--card);
  --cc-primary-color: var(--ink);
  --cc-secondary-color: var(--muted);
  --cc-link-color: var(--ink);
  --cc-modal-border-radius: var(--radius-card);
  --cc-btn-border-radius: var(--radius-btn);
  --cc-btn-primary-bg: var(--action);
  --cc-btn-primary-color: var(--ink);
  --cc-btn-primary-border-color: var(--ink);
  --cc-btn-primary-hover-bg: var(--action-hover);
  --cc-btn-primary-hover-color: var(--ink);
  --cc-btn-primary-hover-border-color: var(--ink);
  --cc-btn-secondary-bg: var(--card);
  --cc-btn-secondary-color: var(--ink);
  --cc-btn-secondary-border-color: var(--ink);
  --cc-btn-secondary-hover-bg: var(--paper);
  --cc-btn-secondary-hover-color: var(--ink);
  --cc-btn-secondary-hover-border-color: var(--ink);
  --cc-separator-border-color: var(--hairline);
  --cc-toggle-on-bg: var(--ink);
  --cc-toggle-off-bg: #a8a3b8;
  --cc-toggle-readonly-bg: var(--hairline);
  --cc-cookie-category-block-bg: var(--paper);
  --cc-cookie-category-block-border: var(--hairline);
  --cc-cookie-category-block-hover-bg: #fbf0dc;
  --cc-cookie-category-block-hover-border: var(--hairline);
  --cc-cookie-category-expanded-block-bg: var(--paper);
  --cc-cookie-category-expanded-block-hover-bg: #fbf0dc;
  --cc-footer-bg: var(--paper);
  --cc-footer-border-color: var(--hairline);
  --cc-footer-color: var(--muted);
}

/* No shadows anywhere: an ink outline instead, like every other card. */
#cc-main .cm,
#cc-main .pm {
  border: 1px solid var(--ink);
  box-shadow: none;
}

#cc-main .cm__title,
#cc-main .pm__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'SOFT' 100;
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------- Utilities ---------- */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.center {
  text-align: center;
}

/* ------------------------------------------------------------------
   /daily, share box, Slack waitlist
   ------------------------------------------------------------------ */

.daily-callout {
  padding-top: 0;
}

.daily-callout__card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 20px 24px;
  color: var(--ink);
  text-decoration: none;
  font-size: 18px;
}

.daily-callout__card:hover {
  background: var(--action);
}

.daily-callout__text {
  flex: 1 1 260px;
}

.daily-callout__text strong {
  margin-right: 6px;
}

.share-section {
  padding-top: 0;
}

.share {
  display: grid;
  gap: 12px;
  justify-items: start;
  max-width: 640px;
  margin: 0 auto;
  padding: 24px;
}

.share {
  position: relative;
}

.share__mascot {
  position: absolute;
  top: -56px;
  right: 16px;
  width: 104px;
  height: auto;
}

.share__label {
  margin: 0;
  font-weight: 700;
}

.share__preview {
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  box-sizing: border-box;
  border-radius: var(--radius-btn);
  background: var(--paper);
  font: 16px/1.5 var(--font-body);
  white-space: pre-wrap;
}

.share__btn {
  display: none;
}

.has-js .share__btn {
  display: inline-flex;
}

.share__copied {
  color: var(--muted);
  font-size: 15px;
}

.waitlist {
  display: grid;
  gap: 24px;
  padding: clamp(24px, 4vw, 40px);
}

@media (min-width: 900px) {
  .waitlist {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.waitlist h2 {
  margin-top: 0;
}

.waitlist__copy p {
  margin: 12px 0 0;
  color: var(--ink-soft);
}

.waitlist__form {
  display: grid;
  gap: 14px;
}

.waitlist__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 520px) {
  .waitlist__row {
    grid-template-columns: 1fr;
  }
}

.waitlist__field {
  display: grid;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
}

.waitlist__field input,
.waitlist__field select {
  min-height: 48px;
  padding: 10px 14px;
  box-sizing: border-box;
  border: 1px solid var(--ink);
  border-radius: var(--radius-btn);
  background: var(--card);
  color: var(--ink);
  font: 400 17px var(--font-body);
}

.waitlist__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.waitlist__form .btn {
  justify-self: start;
}

.waitlist__fine {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.waitlist__error {
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-btn);
  background: color-mix(in srgb, var(--opt-a) 30%, white);
  font-size: 15px;
}

.waitlist__done p {
  margin: 0;
}

.waitlist__done img {
  flex: none;
  width: 80px;
  height: auto;
}

.waitlist__done {
  display: flex;
  align-items: center;
  gap: 16px;
  align-self: center;
  margin: 0;
  padding: 16px 24px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-btn);
  background: var(--action);
  font-size: 18px;
}

/* ------------------------------------------------------------------
   Teacher tools: list toolbar, /classroom hub, present mode, print sheets
   ------------------------------------------------------------------ */

.btn--sm {
  min-height: 40px;
  padding: 6px 14px;
  font-size: 15px;
}

.list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
}

.list-head__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.teacher-resource {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding: 24px;
  margin-bottom: 24px;
}

.teacher-resource > div {
  flex: 1 1 280px;
}

.teacher-resource .teacher-resource__label {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
}

.teacher-resource h3 {
  margin: 0 0 8px;
}

.teacher-resource p {
  margin: 0;
}

.teacher-resource > .btn {
  flex-shrink: 0;
}

.classroom-set h3 a {
  color: inherit;
  text-decoration: none;
}

.classroom-set__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

/* Present mode: fills the screen, readable from the back of a classroom. */
.present-body {
  background: var(--paper);
}

.present {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 16px clamp(16px, 3vw, 40px);
  box-sizing: border-box;
}

.present__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.present__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.present__mode,
.present__count,
.present__keys {
  color: var(--muted);
  font-weight: 400;
}

.present__count {
  margin: 0;
  font-size: 18px;
}

.present__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.present__tools .btn {
  min-height: 40px;
  padding: 6px 16px;
  font-size: 15px;
}

.present__stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(16px, 3vh, 32px);
  padding: clamp(16px, 4vh, 48px) 0;
}

.present__ask {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-variation-settings: 'SOFT' 100;
  letter-spacing: -0.028em;
  font-size: clamp(32px, 4.5vw, 72px);
  line-height: 1;
}

.present__options {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(12px, 2vw, 32px);
}

.present__opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34vh;
  padding: clamp(24px, 4vw, 56px) clamp(20px, 3vw, 48px);
  border: 2px solid var(--ink);
  border-radius: var(--radius-lg);
  text-align: center;
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 64px);
  line-height: 1.15;
  text-wrap: balance;
}

.present__opt--pic {
  flex-direction: column;
  gap: clamp(12px, 2vh, 24px);
}

.present__pic {
  width: clamp(120px, 28vh, 300px);
  height: clamp(120px, 28vh, 300px);
  object-fit: contain;
  padding: 10px;
  box-sizing: border-box;
  border: 2px solid var(--ink);
  border-radius: 24px;
  background: var(--paper);
}

.present__opt--a { background: var(--opt-a); }
.present__opt--b { background: var(--opt-b); }

.present__letter {
  position: absolute;
  top: 16px;
  left: 20px;
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--card);
  font-size: clamp(16px, 1.6vw, 26px);
}

.present__or {
  align-self: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(24px, 3vw, 48px);
}

.present__timer {
  align-self: center;
  min-width: 2.2em;
  padding: 4px 24px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--action);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(32px, 4vw, 64px);
  line-height: 1.2;
}

.present__timer.is-done {
  background: var(--card);
}

.present__results {
  align-self: center;
  width: min(100%, 720px);
  text-align: center;
  font-size: 18px;
}

.present__results summary {
  cursor: pointer;
  color: var(--muted);
  text-decoration: underline;
}

.present__split {
  display: flex;
  margin-top: 12px;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 22px;
}

.present__bar-a,
.present__bar-b {
  padding: 8px 12px;
  white-space: nowrap;
}

.present__bar-a { background: var(--opt-a); }
.present__bar-b { background: var(--opt-b); text-align: right; }

.present__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.present__keys {
  margin: 0;
  font-size: 14px;
}

/* Timer, fullscreen and key hints need JS; site.js reveals them. */
.present__js,
.print-tools__js {
  display: none;
}

.has-js .present__js,
.has-js .print-tools__js {
  display: inline-flex;
}

.has-js .present__keys {
  display: block;
}

@media (max-width: 760px) {
  .present__options {
    grid-template-columns: 1fr;
  }

  .present__opt {
    min-height: 22vh;
  }

  .present__or {
    justify-self: center;
  }

  .present__keys {
    display: none !important;
  }
}

/* Print sheets: a page preview on screen, plain paper in print. */
.print-body {
  background: var(--paper);
}

.print-tools {
  padding: 16px 0;
  border-bottom: 1px solid var(--ink);
}

.print-tools .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.print-tools__formats {
  display: flex;
  gap: 8px;
  margin-right: auto;
}

.print-tools .btn {
  min-height: 40px;
  padding: 6px 16px;
  font-size: 15px;
}

.print-tools [aria-current="page"] {
  background: var(--action);
}

.sheet {
  max-width: 8.5in;
  margin: 32px auto 64px;
  padding: 0.6in;
  box-sizing: border-box;
  border: 1px solid var(--ink);
  border-radius: var(--radius-card);
  background: #fff;
  font-size: 16px;
  line-height: 1.45;
}

.sheet__head h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.1;
}

.sheet__how {
  margin: 8px 0 0;
  color: var(--ink-soft);
}

.sheet__name {
  display: flex;
  gap: 24px;
  margin: 20px 0 0;
}

.sheet__name span {
  flex: 1;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--ink);
  font-weight: 700;
}

.sheet__name span:last-child {
  flex: 0 0 30%;
}

.sheet__list {
  margin: 24px 0 0;
  padding-left: 1.8em;
}

.sheet__list li {
  padding: 8px 0;
  border-bottom: 1px dotted #b9b4a8;
  break-inside: avoid;
}

.sheet__q {
  color: var(--muted);
}

.sheet__pick {
  font-weight: 700;
}

.sheet__circle {
  display: inline-grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.3em;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  font-size: 0.8em;
  vertical-align: 0.1em;
}

.sheet__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 24px;
}

.sheet__card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 2.25in;
  padding: 0.25in;
  box-sizing: border-box;
  border: 1.5px dashed #8d8878;
  margin: -0.75px;
  text-align: center;
  break-inside: avoid;
}

.sheet__card p {
  margin: 0;
}

.sheet__card-ask {
  font-family: var(--font-display);
  font-weight: 900;
  font-variation-settings: 'SOFT' 100;
  font-size: 20px;
}

.sheet__card-opt {
  margin-top: 6px !important;
  font-weight: 700;
  font-size: 17px;
}

.sheet__card-or {
  color: var(--muted);
}

.sheet__card-url {
  margin-top: 10px !important;
  color: var(--muted);
  font-size: 11px;
}

.sheet__foot {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

@media print {
  @page {
    margin: 0.5in;
  }

  body,
  .print-body {
    background: #fff !important;
  }

  .skip-link,
  #cc-main,
  .print-tools,
  .site-header,
  .site-footer,
  .play,
  .list-head__tools,
  .confetti,
  .hero-mascot,
  #debug-icon {
    display: none !important;
  }

  .sheet {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 12pt;
  }

  .sheet__card {
    min-height: 2.3in;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}

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