/* Card Daddy styles
   Designed for phones first. On a computer, the same phone-width
   column sits in the middle of the screen.
   Look: bold condensed capitals (Anton), strong blue and soft blue,
   lime and orange-red accents, and playful flower and splat shapes. */

/* ---- Colors, fonts and sizes in one place, easy to rebrand later ---- */
:root {
  --accent: #1e6faf;        /* strong blue: headings, main buttons, picked answers */
  --accent-dark: #165a8f;   /* pressed buttons */
  --accent-soft: #dbe7f4;   /* light blue tint (focus rings, pressed rows) */
  --sky: #8fb4db;           /* soft blue: answer tiles, blue screens */
  --lime: #e6ff99;          /* lime: highlights and the "go" button */
  --orange: #d54a26;        /* orange-red: accent shapes */
  --periwinkle: #6e84e6;    /* periwinkle: accent shapes */
  --ink: #111111;           /* black: landing background, dark text */
  --text: #111111;
  --text-muted: #4c5566;
  --border: #c3d3e6;
  --background: #e9e8ed;    /* soft grey page */
  --surface: #ffffff;
  --error: #c92a2a;
  --radius: 16px;
  --tap: 52px;              /* minimum height of anything you tap */
  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --body: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* the scalloped flower shape, used behind the card and the artwork thumbnails */
  --flower-lime: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='%23e6ff99'%3E%3Ccircle cx='100' cy='100' r='62'/%3E%3Ccircle cx='100' cy='38' r='38'/%3E%3Ccircle cx='100' cy='162' r='38'/%3E%3Ccircle cx='38' cy='100' r='38'/%3E%3Ccircle cx='162' cy='100' r='38'/%3E%3Ccircle cx='56' cy='56' r='38'/%3E%3Ccircle cx='144' cy='56' r='38'/%3E%3Ccircle cx='56' cy='144' r='38'/%3E%3Ccircle cx='144' cy='144' r='38'/%3E%3C/g%3E%3C/svg%3E");
  --flower-periwinkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='%236e84e6'%3E%3Ccircle cx='100' cy='100' r='62'/%3E%3Ccircle cx='100' cy='38' r='38'/%3E%3Ccircle cx='100' cy='162' r='38'/%3E%3Ccircle cx='38' cy='100' r='38'/%3E%3Ccircle cx='162' cy='100' r='38'/%3E%3Ccircle cx='56' cy='56' r='38'/%3E%3Ccircle cx='144' cy='56' r='38'/%3E%3Ccircle cx='56' cy='144' r='38'/%3E%3Ccircle cx='144' cy='144' r='38'/%3E%3C/g%3E%3C/svg%3E");
  --flower-orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='%23d54a26'%3E%3Ccircle cx='100' cy='100' r='62'/%3E%3Ccircle cx='100' cy='38' r='38'/%3E%3Ccircle cx='100' cy='162' r='38'/%3E%3Ccircle cx='38' cy='100' r='38'/%3E%3Ccircle cx='162' cy='100' r='38'/%3E%3Ccircle cx='56' cy='56' r='38'/%3E%3Ccircle cx='144' cy='56' r='38'/%3E%3Ccircle cx='56' cy='144' r='38'/%3E%3Ccircle cx='144' cy='144' r='38'/%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--background);
  /* keep content away from the notch and rounded corners */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  transition: background-color 0.25s;
}
/* Steps 7-10, the print shop screen and the card preview sit on soft blue */
body.sky { background: var(--sky); }

button { font: inherit; color: inherit; }

/* ---- Header: "CARD DADDY" wordmark ---- */
.site-header {
  text-align: center;
  padding: 16px 16px 4px;
  padding-top: calc(16px + env(safe-area-inset-top));
}
.site-header h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--accent);
}
.tagline {
  margin: 4px 0 0;
  color: var(--text-muted);
  white-space: nowrap;      /* always one line */
  font-size: min(16px, 3.7vw); /* shrinks a little on narrow phones so it fits */
}
body.compact .site-header { padding-top: calc(10px + env(safe-area-inset-top)); padding-bottom: 0; }
body.compact .site-header h1 { font-size: 26px; }
body.compact .tagline { display: none; }
body.sky .site-header h1 { color: var(--surface); }

main {
  max-width: 480px;
  margin: 0 auto;
  padding: 4px 16px 28px;
}

/* ---- Top bar: Back button, "Step 2 of 10" pill, step tracker ---- */
.topbar {
  display: flex;
  align-items: center;
  min-height: 48px;
}
.back-btn,
.topbar-spacer {
  flex: 0 0 80px;
}
.back-btn {
  min-height: 48px;
  padding: 0 8px 0 0;
  border: 0;
  background: none;
  text-align: left;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.back-btn[hidden] { display: block !important; visibility: hidden; }
.step-count {
  flex: 0 1 auto;
  margin: 0 auto;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--surface);
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}
.progress {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  margin: 6px 0 22px;
}
.progress i {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--sky);
  transition: background-color 0.3s;
}
.progress i.done { background: var(--accent); }
body.sky .back-btn { color: var(--surface); }
body.sky .step-count { background: var(--surface); color: var(--accent); }
body.sky .progress i { background: rgba(255, 255, 255, 0.45); }
body.sky .progress i.done { background: var(--surface); }

/* ---- One question screen ---- */
.screen.enter { animation: slide-in 0.22s ease-out; }
@keyframes slide-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}
/* While auto-advancing, ignore extra taps */
.screen.is-advancing { pointer-events: none; }

.question {
  margin: 0 0 8px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 38px;
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--accent);
  outline: none;
}
body.sky .question { color: var(--surface); }
.optional-tag {
  font-family: var(--body);
  font-weight: 600;
  text-transform: none;
  color: var(--text-muted);
  font-size: 16px;
}
.hint {
  margin: 0 0 14px;
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 600;
}
body.sky .hint { color: var(--surface); }
.question + .choices,
.question + .field-box { margin-top: 16px; }

/* ---- Answer tiles: soft blue; the picked one turns strong blue ---- */
.choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.choices.wide { grid-template-columns: 1fr; }
.choice {
  min-height: var(--tap);
  padding: 10px 12px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: var(--sky);
  color: var(--surface);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.12s, border-color 0.12s;
}
.choices.wide .choice { text-align: left; padding: 14px 16px; }
/* Full-width answers (like step 1) use the condensed capitals, so long answers fit on one line */
.choices.wide .choice:not(.multi):not(.prefer-not) {
  font-family: var(--display);
  font-weight: 400;
  font-size: min(19px, 4.5vw); /* shrinks a little on narrow phones so it stays on one line */
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.choice:active { background: #7ba3cf; }
.choice.full { grid-column: 1 / -1; }
.choice.selected { background: var(--accent); color: var(--surface); }
/* "Other (type your own)": dashed outline until picked */
.choice.full:not(.prefer-not):not(.multi) {
  background: transparent;
  border: 2px dashed var(--accent);
  color: var(--accent);
}
.choice.full:not(.prefer-not):not(.multi).selected {
  background: var(--accent);
  border-style: solid;
  color: var(--surface);
}
.choice-sub {
  display: block;
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
}

/* Steps 7-10: white pills (no round dot since Nov 5, like the buttons on steps 1-6); the picked one turns dark blue like steps 1-6 */
.choice.multi,
.choices.wide .choice.multi {
  position: relative;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  text-align: center;
}
.choice.multi:active { background: #f1f5fa; }
/* (listed twice so it beats ".choices.wide .choice.multi" above; before Nov 5 the picked color never showed) */
.choice.multi.selected,
.choices.wide .choice.multi.selected { background: var(--accent); color: var(--surface); }
.choice.multi .choice-sub { color: var(--text-muted); }
.choice.multi.selected .choice-sub { color: rgba(255, 255, 255, 0.85); }

/* ---- Text and number boxes ---- */
.field-box { margin-top: 12px; }
/* New baby: "Baby's name (optional)" under the choices (Nov 3) */
.name-box { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
.name-label { font-weight: 700; font-size: 16px; }
input[type="text"],
textarea {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: 12px 16px;
  font: inherit;
  font-size: 17px;          /* 16px or more stops iPhones zooming in */
  color: var(--text);
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
}
textarea { resize: vertical; }
input.number-input {
  font-family: var(--display);
  font-size: 32px;
  text-align: center;
  max-width: 160px;
  margin: 0 auto;
}
input:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.error {
  margin: 8px 0 0;
  color: var(--error);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

/* ---- Buttons: big pills in condensed capitals ---- */
.btn {
  display: block;
  width: 100%;
  min-height: var(--tap);
  margin-top: 14px;
  padding: 12px 16px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 2px solid var(--accent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary {
  background: var(--accent);
  color: var(--surface);
}
.btn-primary:active { background: var(--accent-dark); }
.btn-primary:disabled,
.btn-lime:disabled {
  background: #cfd5de;
  border-color: #cfd5de;
  color: #7f8898;
  cursor: default;
}
.btn-secondary {
  background: var(--surface);
  color: var(--accent);
}
.btn-secondary:active { background: var(--accent-soft); }
.btn-lime {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink);
}
.btn-lime:active { background: #d6f27a; }

/* ---- Card preview ---- */
.preview-heading {
  margin: 4px 0 2px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  color: var(--surface);
  outline: none;
}
.preview-note {
  margin: 0 0 18px;
  text-align: center;
  color: var(--surface);
  font-size: 16px;
  font-weight: 600;
}
.card-label {
  margin: 0 0 8px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}
.card {
  background: var(--surface);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(17, 17, 17, 0.18);
  margin-bottom: 24px;
  aspect-ratio: 5 / 7;      /* standard greeting card shape */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}
/* The inside: long messages shrink to fit (see fitMessages in app.js);
   slimmer side margins give poems more room on small phones */
.card-inside { overflow: hidden; padding: 22px 16px; }
/* Front of the card: the picture fills it, with the title printed on top */
.card-front {
  padding: 0;
  overflow: hidden;
  justify-content: flex-start;
  container-type: inline-size;
}
.art {
  position: relative;
  flex: 1;
  width: 100%;
  background: var(--accent-soft);
}
.art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* fill the card, trimming the edges slightly */
  object-position: top center; /* if trimming is needed, keep the sky (where the title goes) */
  transition: opacity 0.4s;
}
.art.is-loading img { opacity: 0.25; }
/* The title sits centered in the top third of the card (the space the art leaves empty) */
.card-title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 34%;
  margin: 0;
  padding: 0 8%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-wrap: balance;
  overflow: hidden;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 9cqi;
  line-height: 1.15;
  color: #2b2b2b;
  /* soft white glow keeps the title readable on any picture */
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.95), 0 0 14px rgba(255, 255, 255, 0.85), 0 0 24px rgba(255, 255, 255, 0.6);
}
.art-loading,
.art-error {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  color: var(--accent-dark);
}
.art-loading p { margin: 0; }
/* One wait (Nov 2): while the words are being written, the inside shows this instead of the message */
.writing-note { margin: 0; text-align: center; font-weight: 700; font-size: 17px; color: var(--accent-dark); }
.writing-note .dots::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: writing-dots 1.2s steps(4, end) infinite; }
@keyframes writing-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.preview.writing #preview-message,
.preview.writing #preview-front-message { display: none; }
.art-loading .art-loading-note { max-width: 15em; padding: 0 12px; font-weight: 600; text-align: center; line-height: 1.3; }
.art-error {
  max-width: 84%;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94);
  font-size: 16px;
  text-align: center;
}
.art-error p { margin: 0; }
.art-retry { min-height: 48px; padding: 0 28px; }
.card-message {
  width: 100%;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;          /* smaller inside text; long messages shrink further to fit */
  line-height: 1.55;
}
/* Each line of the message is its own row */
/* "pretty" asks the browser not to leave a single word alone on the last line */
.msg-line { display: block; text-wrap: pretty; }
/* Short lines (poem lines, a quote's author) never wrap; the message shrinks instead */
.msg-line.keep { white-space: nowrap; }
/* Mad Lib lines: roomy spacing so each blank's hint fits underneath its line */
.msg-line.madlib { line-height: 2.5; margin-bottom: 0.35em; }
.blank {
  display: inline-block;
  position: relative;
  height: 1.05em;
  margin: 0 0.15em;
  border-bottom: 1px solid currentColor;
  vertical-align: baseline;
}
.blank-hint {
  position: absolute;
  top: 100%;
  left: -1em;
  right: -1em;
  margin-top: 0.1em;
  font-size: 0.62em;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  opacity: 0.75;
}

/* Shown if the AI couldn't write the card */
.preview-notice {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--lime);
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

/* Spinner (shown on the card front while the picture is being made) */
.spinner {
  width: 48px;
  height: 48px;
  border: 5px solid rgba(255, 255, 255, 0.45);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* "Everything on the front": picture on top, message underneath */
.card-front.front-only .art { flex: 0 0 72%; }
.front-message {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.4;
}
.blank-note {
  color: var(--text-muted);
  font-style: italic;
}

/* ---- Card fonts: each card type gets a title font and an easy-to-read message font ---- */
[data-font="sentimental"] .card-title { font-family: "Great Vibes", cursive; font-weight: 400; font-size: 14cqi; line-height: 1.05; }
[data-font="sentimental"] .card-message { font-family: "Lora", Georgia, serif; }

/* Brian's picks (Nov 1). Funny: chunky cartoon capitals */
[data-font="funny"] .card-title { font-family: "Luckiest Guy", system-ui, sans-serif; font-weight: 400; font-size: 10cqi; line-height: 1.1; letter-spacing: 0.02em; }
[data-font="funny"] .card-message { font-family: "Nunito", system-ui, sans-serif; }
/* Silly and cute: soft bubble letters */
[data-font="silly"] .card-title,
[data-font="cute"] .card-title { font-family: "Sniglet", system-ui, sans-serif; font-weight: 800; font-size: 10.5cqi; line-height: 1.1; }
[data-font="silly"] .card-message { font-family: "Quicksand", system-ui, sans-serif; font-weight: 500; }
/* Cute: rounded text */
[data-font="cute"] .card-message { font-family: "Nunito", system-ui, sans-serif; }
/* Elegant: tall, delicate title; classic book text */
[data-font="elegant"] .card-title { font-family: "Italiana", Georgia, serif; font-weight: 400; font-size: 11cqi; line-height: 1.15; }
[data-font="elegant"] .card-message { font-family: "EB Garamond", Georgia, serif; font-size: 17px; }
/* Inspirational: bold headline, clean text */
[data-font="inspirational"] .card-title { font-family: "Abril Fatface", Georgia, serif; font-weight: 400; font-size: 11cqi; line-height: 1.1; }
[data-font="inspirational"] .card-message { font-family: "Lato", system-ui, sans-serif; }
/* Sympathetic: calm serif */
[data-font="sympathetic"] .card-title { font-family: "Playfair Display", Georgia, serif; font-weight: 600; font-size: 10.5cqi; }
[data-font="sympathetic"] .card-message { font-family: "Source Serif 4", Georgia, serif; }

/* "(Blank inside)" notes keep the plain style */
[data-font] .card-message.blank-note { font-family: Georgia, "Times New Roman", serif; }

/* ---- Wording switcher: "Wording: 1 2 3" under the inside of the card ---- */
.wording-options {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -10px 0 24px;
}
.wording-label {
  font-family: var(--display);
  font-size: 20px;
  text-transform: uppercase;
  color: var(--ink);
}
.wording-tabs { display: flex; gap: 10px; }
.wording-tab {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wording-tab.selected {
  background: var(--accent);
  color: var(--surface);
}

/* ---- Artwork options: each picture made for this card sits in a little flower ---- */
.art-options { margin: -8px 0 24px; }
.art-options-label {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 20px;
  text-transform: uppercase;
  color: var(--ink);
}
/* 3 per row; a shorter last row (4-5 pictures) is centered under the first (Brian, Nov 5) */
.art-thumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.art-thumb {
  position: relative;
  flex: 0 0 calc((100% - 20px) / 3);
  aspect-ratio: 1 / 1;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: var(--flower-lime) center / contain no-repeat;
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s;
}
/* Each option gets its own flower color: lime, periwinkle, orange, then again on the next row (up to 5) */
.art-thumb:nth-child(3n+2) { background-image: var(--flower-periwinkle); }
.art-thumb:nth-child(3n+3) { background-image: var(--flower-orange); }
.art-thumb img {
  width: 64%;
  height: 64%;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
/* The picked option lifts up, with a blue ring around the picture and a blue number */
.art-thumb.selected { transform: scale(1.08); }
.art-thumb.selected img { box-shadow: 0 0 0 4px var(--accent), 0 4px 12px rgba(17, 17, 17, 0.25); }
.art-thumb-number {
  position: absolute;
  left: 8%;
  bottom: 8%;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 12px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 700;
  line-height: 24px;
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(17, 17, 17, 0.18);
}
.art-thumb.selected .art-thumb-number { background: var(--accent); color: var(--surface); }

/* Collapsible list of the customer's answers */
.answers {
  background: var(--surface);
  border-radius: 20px;
  padding: 0 18px;
}
.answers summary {
  min-height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--display);
  font-size: 20px;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;          /* hide the browser's tiny arrow */
  -webkit-tap-highlight-color: transparent;
}
.answers summary::-webkit-details-marker { display: none; }
/* Clear hint on the right that changes when opened or closed */
.answers summary::after {
  content: "Tap to show and edit \25BE";
  font-family: var(--body);
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
  color: var(--accent);
}
.answers[open] summary::after { content: "Tap to hide \25B4"; }
.answers[open] summary { border-bottom: 1px solid #e3e8ef; }
.answers-hint {
  margin: 10px 0 4px;
  font-size: 16px;
  color: var(--text-muted);
}
.answer-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}
.answer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: var(--tap);
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid #eef1f5;
  background: none;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.answer-list li:last-child .answer-item { border-bottom: 0; }
.answer-item:active { background: var(--accent-soft); }
.answer-text { flex: 1; }
.answer-question {
  display: block;
  font-size: 16px;
  color: var(--text-muted);
}
.answer-value { display: block; font-weight: 700; }
.answer-change {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
}

.preview-actions { margin-top: 8px; }
/* "Print this card": the big final button */
.btn-print {
  margin-top: 22px;
  min-height: 64px;
  font-size: 28px;
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}
.btn-print:active { background: #333; }

/* ============================================================
   LANDING PAGE (black, with bold type and playful shapes)
   Only "transform" and "opacity" are animated, so the motion stays
   smooth even on older phones.
   ============================================================ */
body.on-landing .site-header,
body.on-landing main { display: none; }

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

.landing {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* top padding leaves room for the big "CARD DADDY" title, so the card never sits under it */
  padding: calc(34px + min(21vw, 100px) + env(safe-area-inset-top)) 16px calc(84px + env(safe-area-inset-bottom));
  overflow: hidden;
  background: var(--ink);
  color: var(--surface);
}

/* Background shapes */
.shape { position: absolute; z-index: 0; display: block; pointer-events: none; }
.shape-splat-left { width: 150px; left: -50px; top: 22%; color: var(--accent); transform: rotate(-8deg); }
.shape-splat-right { width: 130px; right: -44px; top: 14%; color: var(--orange); transform: rotate(18deg); }
/* Small purple splat behind "Pick up locally or have it mailed to you" (inside the button area) */
.shape-burst { width: 110px; right: -34px; top: -38px; color: var(--periwinkle); z-index: -1; }

.landing-body {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

/* ---- The card ---- */
.card-stage {
  perspective: 1400px;
  /* room for the card once it's open (two pages wide) */
  width: calc(min(42vw, 190px, 25vh) * 2);
  display: flex;
  justify-content: center;
}
.open-card {
  position: relative;
  width: min(42vw, 190px, 25vh);
  aspect-ratio: 5 / 7;
  transform-style: preserve-3d;
  /* slides right as it opens, so the open card ends up centered */
  animation: card-slide 1.3s cubic-bezier(0.45, 0, 0.2, 1) both, card-float 4s ease-in-out 2.4s infinite;
  animation-delay: 0.7s, 2.4s;
}
@keyframes card-slide {
  from { transform: translateX(0) rotate(-3deg); }
  to   { transform: translateX(50%) rotate(0); }
}
@keyframes card-float {
  0%, 100% { transform: translateX(50%) translateY(0); }
  50%      { transform: translateX(50%) translateY(-6px); }
}

/* Right-hand inside page with the tagline */
.card-page {
  position: absolute;
  inset: 0;
  border-radius: 4px 10px 10px 4px;
  background: var(--surface);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* The tagline, written inside the card */
.page-tagline {
  margin: 0;
  padding: 0 10%;
  font-family: var(--display);
  font-weight: 400;
  font-size: min(6.4vw, 28px);
  line-height: 1;
  text-transform: uppercase;
  text-wrap: balance;       /* even line lengths, so no single word sits alone */
  color: var(--ink);
  animation: line-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: 1.5s;
}
.page-tagline-2 {
  margin-top: 12px;
  color: var(--accent);
  animation-delay: 1.85s;
}
@keyframes line-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.92); }
  to   { opacity: 1; transform: none; }
}

/* "CARD DADDY" across the top of the screen, almost the full width */
.landing-header {
  position: absolute;
  z-index: 1;
  top: calc(14px + env(safe-area-inset-top));
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--display);
  font-weight: 400;
  font-size: min(21vw, 100px);
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--surface);
  animation: fade-in 0.6s ease-out both;
  animation-delay: 1.9s;
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* The cover: swings open to the left on its spine */
.card-cover {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  animation: cover-open 1.3s cubic-bezier(0.45, 0, 0.2, 1) both;
  animation-delay: 0.7s;
}
@keyframes cover-open {
  /* translateZ(1px) keeps the cover just in front of the page, so they don't flicker */
  from { transform: translateZ(1px) rotateY(0deg); }
  to   { transform: translateZ(1px) rotateY(-178deg); }
}
.cover-front,
.cover-back {
  position: absolute;
  inset: 0;
  border-radius: 4px 10px 10px 4px;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.cover-front {
  background: var(--surface);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}
.cover-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
/* "CARD DADDY" on the front of the card */
.cover-front span {
  position: absolute;
  top: 10%;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--display);
  font-weight: 400;
  font-size: min(9vw, 40px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.95), 0 0 14px rgba(255, 255, 255, 0.85), 0 0 22px rgba(255, 255, 255, 0.7);
}
/* Inside of the cover (seen on the left once the card is open) */
.cover-back {
  transform: rotateY(180deg);
  border-radius: 10px 4px 4px 10px;
  background: var(--lime);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  text-align: center;
}
.cover-back p { margin: 0; }
/* "Support local artists!" on the yellow left side, smaller than the right side's lines */
.cover-back .support-local {
  padding: 0 12%;
  font-family: var(--display);
  font-weight: 400;
  font-size: min(4.6vw, 20px);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--orange);
}

/* ---- Button rises in once the card is open ---- */
.landing-cta {
  position: relative;
  z-index: 0;
  width: 100%;
  text-align: center;
  animation: rise-in 0.6s ease-out both;
  animation-delay: 2.1s;
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
/* "Pick up locally or have it mailed to you" between the card and the button */
.landing-pickup {
  position: relative;
  margin: 0 0 22px;
  font-family: var(--display);
  font-weight: 400;
  font-size: min(6vw, 24px);
  line-height: 1.1;
  text-transform: uppercase;
  text-wrap: balance;       /* even lines, so no word sits alone */
  color: var(--orange);
}
.start-btn {
  margin-top: 0;
  min-height: 60px;
  font-size: 26px;
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink);
}
.start-btn:active { background: #d6f27a; }
.landing-small {
  margin: 12px 0 0;
  font-size: 16px;
  color: #bdbdbd;
}

/* Scrolling "CARD DADDY" banner along the bottom of the landing page */
.marquee {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom);
  overflow: hidden;
  background: var(--accent);
  color: var(--background);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 56s linear infinite; /* 12 repeats per copy: same speed as before (was 14s for 3) */
}
.marquee-track span {
  padding: 8px 18px 4px 0;
  font-family: var(--display);
  font-size: 40px;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* Tapping the landing page skips straight to the open card and the button */
.landing.skip .open-card { animation: card-float 4s ease-in-out infinite; }
.landing.skip .card-cover { animation: none; transform: rotateY(-178deg); }
.landing.skip .page-tagline,
.landing.skip .landing-header,
.landing.skip .landing-cta { animation: none; opacity: 1; transform: none; }

[hidden] { display: none !important; }

/* Respect people who turn off animations on their phone */
@media (prefers-reduced-motion: reduce) {
  .screen.enter { animation: none; }
  .progress i { transition: none; }
  .spinner { animation-duration: 3s; }
  .marquee-track { animation: none; }
  /* Landing page: show the card already open, with a gentle fade */
  .open-card { animation: none; transform: translateX(50%); }
  .card-cover { animation: none; transform: rotateY(-178deg); }
  .page-tagline, .landing-header { animation: none; }
  .landing-cta { animation: rise-in 0.4s ease-out both; animation-delay: 0.2s; }
}

/* ============================================================
   PICK YOUR PRINT SHOP (after "Pick it up at a local print shop", before the questions)
   ============================================================ */
.shop .question,
.shop .hint { text-align: center; }
.shop .question { margin-top: 4px; }
.zip-row {
  display: flex;
  gap: 10px;
  margin: 4px 0 14px;
}
.zip-input {
  flex: 1;
  min-width: 0;
  font-family: var(--display) !important;
  font-size: 26px !important;
  letter-spacing: 0.08em;
  text-align: center;
}
.zip-btn { width: auto; flex: none; margin-top: 0; padding: 12px 22px; }

/* The map box */
.shop-map {
  height: 260px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--accent-soft);
  margin-bottom: 16px;
  box-shadow: 0 6px 16px rgba(17, 17, 17, 0.15);
}
.shop-map-missing {
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: center;
  font-size: 16px;
  color: var(--text-muted);
}
/* A star for every shop */
.shop-star {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--surface);
  color: var(--lime);
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(17, 17, 17, 0.35);
}

/* The list of shops, nearest first */
.shop-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.shop-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  min-height: var(--tap);
  padding: 14px 16px;
  border: 3px solid transparent;
  border-radius: 20px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.shop-item.selected { background: var(--lime); border-color: var(--ink); }
.shop-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.shop-name { font-family: var(--display); font-size: 22px; text-transform: uppercase; line-height: 1.1; }
.shop-miles { font-weight: 700; font-size: 16px; color: var(--accent); white-space: nowrap; }
.shop-address { font-size: 16px; color: var(--text-muted); }
.shop-item.selected .shop-address { color: var(--ink); }
.shop-extra { font-size: 16px; color: var(--text-muted); }

/* "Not in your area yet" */
.shop-none {
  padding: 18px;
  border-radius: 20px;
  background: var(--surface);
  text-align: center;
}
.shop-none p { margin: 0 0 6px; }
.shop-none-title { font-family: var(--display); font-size: 26px; text-transform: uppercase; color: var(--orange); }

/* "Pick up at: ..." on the card page */
.pickup-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 22px 0 0;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 16px;
}
.pickup-change {
  flex: none;
  min-height: 48px;
  padding: 0 12px;
  border: 0;
  background: none;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
}
.pickup-line + .btn-print { margin-top: 12px; }

/* Title on a busy picture: a soft white haze laid over the top of the picture, behind the
   title. It covers the title's space (--title-area, set by app.js) plus a little extra below,
   then fades out, so even the title's last line is never on busy art. */
.card-title { z-index: 2; }
.art-loading, .art-error { z-index: 3; }
.art.busy-top::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--title-area, 34%) + 12%);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.86) 78%, rgba(255, 255, 255, 0) 100%);
}

/* ---- "Anything you'd like changed?" pop-up (new wording / new artwork) ---- */
.change-dialog {
  width: min(420px, calc(100% - 32px));
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}
.change-dialog::backdrop { background: rgba(17, 17, 17, 0.45); }
.change-form { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 22px 18px 16px; }
.change-title {
  margin: 0 0 4px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--accent);
}
/* "You've made 5 pictures for this card..." under the New artwork button (Nov 5) */
.art-full { margin: -4px 0 4px; font-size: 16px; font-weight: 600; text-align: center; color: var(--ink); }

/* "Questions or problems? Contact us" (Nov 3) */
.help-open {
  display: block;
  width: 100%;
  min-height: var(--tap);
  margin-top: 14px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}
.help-intro { margin: -4px 0 4px; font-size: 16px; color: var(--text-muted); }
/* Once a message is sent, only the thank-you and Close show */
#help-dialog[data-sent] .change-form > :not(#help-status):not(#help-cancel) { display: none; }
#help-dialog[data-sent] #help-status { font-size: 18px; margin: 8px 0 0; }
.help-email { min-height: var(--tap); padding: 10px 14px; font-size: 17px; }
.help-thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.help-thumbs:empty { display: none; }
.help-thumb { position: relative; width: 72px; height: 72px; }
.help-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; }
.help-thumb button {
  position: absolute; top: -10px; right: -10px; width: 32px; height: 32px; border-radius: 50%;
  border: 0; background: var(--ink); color: #fff; font-size: 18px; line-height: 1; cursor: pointer;
}
/* Looks 32px but the tap area is 48px */
.help-thumb button::after { content: ""; position: absolute; inset: -8px; }
/* "Change front title": a one-line box */
.title-input { min-height: var(--tap); padding: 10px 14px; }
.change-note { font-size: 17px; }
.change-counter, .change-hint { margin: 0; font-size: 16px; color: var(--text-muted); }
.change-hint { font-weight: 600; }
.change-cancel {
  min-height: var(--tap);
  border: 0;
  background: none;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
}

/* ---- "Ready to print?" summary before Stripe's payment page ---- */
.print-dialog .btn-print { margin-top: 6px; font-size: 20px; }
.print-summary { display: flex; align-items: center; gap: 14px; }
.print-img {
  flex: none;
  width: 96px;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.print-wording { margin: 0; font-size: 17px; font-weight: 700; }
.print-dialog .pickup-line { margin: 0; padding: 4px 0; background: none; }
.print-price-row { margin: 0; font-size: 18px; }
.print-dialog .error { margin: 0; }

/* ---- Thank-you screen (after paying) ---- */
.order-status {
  margin: 12px 0 0;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 17px;
  font-weight: 600;
  text-align: center;
}
.order-number-label { margin: 18px 0 0; font-size: 16px; color: var(--surface); text-align: center; }
.order-number {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: 44px;
  line-height: 1.1;
  color: var(--surface);
  text-align: center;
}
.order-card { max-width: 280px; margin: 0 auto; }
.order-receipt { margin: 14px 0 0; font-size: 16px; font-weight: 600; color: var(--surface); text-align: center; }
.order .btn { margin-top: 18px; }

/* Step 10's "art from a local artist": two of the site's splats peek out from behind it */
.choice.standout { position: relative; z-index: 1; isolation: isolate; font-weight: 800; }
.choice.standout .splat {
  position: absolute;
  z-index: -2;
  pointer-events: none;
  background: center / contain no-repeat;
}
.choice.standout .splat-orange { width: 84px; height: 84px; right: -8px; top: -34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon fill='%23d54a26' points='100,50 85.6,58.1 95,69.8 80.5,70.6 82.6,85.4 69.2,79.6 64.6,94 54.9,83.6 45.1,94 40.4,79.6 27,85.4 29.5,70.6 15,69.8 24.4,58.1 10,50 24.4,41.9 15,30.2 29.5,29.4 27,14.6 40.4,20.4 45.1,6 54.9,16.4 64.6,6 69.2,20.4 82.6,14.6 80.5,29.4 95,30.2 85.6,41.9'/%3E%3C/svg%3E"); transform: rotate(12deg); }
.choice.standout .splat-periwinkle { width: 64px; height: 64px; left: -12px; bottom: -26px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon fill='%236e84e6' points='100,50 85.6,58.1 95,69.8 80.5,70.6 82.6,85.4 69.2,79.6 64.6,94 54.9,83.6 45.1,94 40.4,79.6 27,85.4 29.5,70.6 15,69.8 24.4,58.1 10,50 24.4,41.9 15,30.2 29.5,29.4 27,14.6 40.4,20.4 45.1,6 54.9,16.4 64.6,6 69.2,20.4 82.6,14.6 80.5,29.4 95,30.2 85.6,41.9'/%3E%3C/svg%3E"); }
/* Behind the white pill, not on top of it */
.choice.standout::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--lime); box-shadow: 0 0 0 3px var(--ink); z-index: -1; }
.pickup-phone { color: var(--accent); font-weight: 700; }

/* "How would you like to get your card?" */
.deliver-list { margin-top: 18px; }
.deliver-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  min-height: var(--tap);
  padding: 20px 18px;
  border: 3px solid transparent;
  border-radius: 20px;
  background: var(--surface);
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.deliver-item:active { background: var(--lime); border-color: var(--ink); }
.deliver-item .shop-address { color: var(--text-muted); }
.deliver-item .shop-name { font-size: 26px; }
.deliver-icon { font-size: 30px; line-height: 1; }