/* The Makan Passport (Phase 3, step 7): cook stamps, neighbourhood stamps and festival stamps.
   A game part: Simple mode hides it (base.css), and this page says so instead. */

.passport__simple { display: none; margin: 0 0 var(--space-4); font-weight: 400; }
:root[data-simple="on"] .passport__simple { display: block; }
.passport[hidden] { display: none; }
.passport section { margin-top: var(--space-6); }
.passport__summary { margin: 0 0 var(--space-4); font-size: var(--fs-lg); font-weight: 800; }
.passport__note, .passport__empty { margin: 0 0 var(--space-3); color: var(--text-muted); font-weight: 400; }
.passport__empty[hidden] { display: none; }
.passport__fine { margin: var(--space-6) 0 0; color: var(--text-muted); font-size: var(--fs-sm); }
.passport__back { margin: var(--space-5) 0 0; }

.passport__share { display: grid; gap: var(--space-2); }
.passport__share[hidden] { display: none; }
.passport__picture {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  justify-self: center;
  border: var(--outline-w) solid var(--outline);
  border-radius: var(--radius);
}
.passport__share .field__hint { margin: 0; }
.passport__share .form-status:empty { display: none; }

/* A stall's stamp: a round, inked ring with its cook, then its name and month. */
.stamps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: var(--space-4) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.page__body .stamps, .page__body .fest-stamps { padding: 0; } /* beats ".page__body ul" */
.page__body .stamps li + li, .page__body .fest-stamps li + li, .page__body .area-stamps li + li { margin-top: 0; }

.stamp { position: relative; --ink: #D6336C; --ink-light: #F783AC; }
.stamp--ink-1 { --ink: #0B74AF; --ink-light: #74C0FC; } /* darker inks so the date passes contrast (Phase 3 quality check) */
.stamp--ink-2 { --ink: #23834A; --ink-light: #8CE99A; }
.stamp--ink-3 { --ink: #C2410C; --ink-light: #FFA94D; }
.stamp--tilt-0 .stamp__ring { transform: rotate(-6deg); }
.stamp--tilt-1 .stamp__ring { transform: rotate(-3deg); }
.stamp--tilt-2 .stamp__ring { transform: rotate(0deg); }
.stamp--tilt-3 .stamp__ring { transform: rotate(3deg); }
.stamp--tilt-4 .stamp__ring { transform: rotate(6deg); }

.stamp__face {
  display: grid;
  justify-items: center;
  gap: .15rem;
  color: var(--text);
  text-align: center;
  text-decoration: none;
}
a.stamp__face:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--radius); }

.stamp__ring {
  display: grid;
  place-items: center;
  width: 6.5rem;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--surface);
  border: 4px double var(--ink);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--ink);
}
.stamp__cook { width: 78%; height: auto; margin-top: 12%; }
.stamp__name { margin-top: var(--space-2); font-weight: 800; font-size: var(--fs-sm); line-height: 1.2; overflow-wrap: anywhere; }
.stamp__date { color: var(--ink); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
/* Dark mode: a lighter ink for the date, so it's easy to read on the dark page. */
:root[data-theme="dark"] .stamp__date { color: var(--ink-light); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stamp__date { color: var(--ink-light); } }

.stamp__new {
  position: absolute;
  top: -.3rem;
  right: 0;
  padding: .05rem .5rem;
  color: var(--ink-900);
  background: var(--accent-yellow);
  border: 2px solid var(--ink-900);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 800;
}

/* Neighbourhoods: every area, by region. Tried ones are stamped in their region's colour. */
.area-stamps { display: grid; gap: var(--space-4); }
.area-stamps__title { margin: 0 0 var(--space-2); font-size: var(--fs-base); }
.area-stamps__list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.page__body .area-stamps__list { padding: 0; }

.area-stamp {
  position: relative;
  display: grid;
  padding: .3rem .7rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 800;
  line-height: 1.25;
}
.area-stamp--empty { color: var(--text-muted); border: 2px dashed var(--border); font-weight: 700; opacity: .8; }
.area-stamp--got { color: var(--ink-900); background: var(--region); border: 2px solid var(--ink-900); }
.area-stamp--north { --region: #9BE3B4; }
.area-stamp--north-east { --region: #D4C2FF; }
.area-stamp--east { --region: #A8DEFF; }
.area-stamp--west { --region: #FFC99A; }
.area-stamp--central { --region: #FFB8CF; }
.area-stamp__date { font-size: var(--fs-xs); font-weight: 700; }
.area-stamp .stamp__new { display: none; }
.area-stamp.stamp--new { box-shadow: 0 0 0 3px var(--accent-yellow); }

/* Festival stamps: earned ones in the festival's colours; trails on now with 3 dots. */
.fest-stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: var(--space-3); margin: 0; list-style: none; }
.fest-stamp {
  position: relative;
  display: grid;
  justify-items: start;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  color: var(--ink-900);
  background: linear-gradient(135deg, var(--fest-a), var(--fest-b));
  border: 2px dashed var(--ink-900);
  border-radius: var(--radius-lg);
}
.fest-stamp--got { border-style: solid; box-shadow: 0 4px 0 var(--ink-900); }
.fest-stamp__name { font: 600 var(--fs-lg) / 1.2 var(--font-display); overflow-wrap: anywhere; }
.fest-stamp__when { font-size: var(--fs-sm); font-weight: 800; }
.fest-stamp__link { color: var(--ink-900); font-weight: 800; }
.fest-stamp__dots { display: flex; gap: .4rem; }
.fest-stamp__dot { width: 1rem; height: 1rem; background: rgb(255 255 255 / .6); border: 2px solid var(--ink-900); border-radius: 50%; }
.fest-stamp__dot--on { background: var(--ink-900); }

/* The Collection Book (Phase 3, step 8): a page for every cuisine. Tried ones show your review
   photo (or a cook); the rest are empty dashed pages. */
.book {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
  gap: var(--space-2);
  margin: 0;
  list-style: none;
}
.page__body .book { padding: 0; }
.page__body .book li + li { margin-top: 0; }

.book-page {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .15rem;
  padding: var(--space-2) var(--space-1) var(--space-2);
  text-align: center;
  border-radius: var(--radius);
}
.book-page--got { background: var(--surface-sunk); border: 2px solid var(--outline); }
.book-page--empty { color: var(--text-muted); border: 2px dashed var(--border); opacity: .8; }

.book-page__frame {
  display: grid;
  place-items: end center;
  width: calc(100% - var(--space-2));
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--sky-scene);
  border-radius: var(--radius-sm);
}
/* An empty page is short, so the book isn't mostly blank space on a phone. */
.book-page--empty { align-content: center; }
.book-page--empty .book-page__frame { aspect-ratio: auto; height: 1.5rem; background: transparent; }
.book-page__frame--photo { place-items: stretch; }
.book-page__photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.book-page__cook { width: 62%; height: auto; }
.book-page__name { margin-top: var(--space-1); font-size: var(--fs-sm); font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.book-page__count { font-size: var(--fs-xs); font-weight: 700; line-height: 1.2; }
.book-page--got .book-page__count { color: var(--text-muted); }
.book-page.stamp--new { box-shadow: 0 0 0 3px var(--accent-yellow); }
.book + .passport__note { margin-top: var(--space-3); }

/* Taster levels (Phase 3, step 9). Done or not is in words and an icon, never colour alone. */
.passport section.taster { margin: 0 0 var(--space-5); padding: var(--space-4); background: var(--surface-sunk); border: 2px solid var(--outline); border-radius: var(--radius); }
.passport section.taster[hidden] { display: none; }
.taster__now { display: flex; align-items: center; gap: var(--space-3); }
.taster__badge { width: 72px; height: 72px; flex: none; }
.taster__words p { margin: 0; }
.taster__name { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 800; line-height: 1.15; }
.taster__next { margin-top: var(--space-1); font-weight: 700; }
.taster__needs { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.page__body .taster__needs { padding: 0; }
.page__body .taster__needs li + li { margin-top: 0; }
.taster__need { display: flex; gap: var(--space-2); align-items: flex-start; }
.taster__need svg { flex: none; width: 1.2em; height: 1.2em; margin-top: .15em; color: var(--text-muted); }
.taster__need--done svg { color: var(--success-text); }
.taster__state { font-weight: 800; }
.passport .taster__note { margin: var(--space-3) 0; font-size: var(--fs-sm); }
.taster .form-status:empty { display: none; }

/* The once-only "You're now a Food Friend!" card (like the Order Board's stall level card). */
.level-up { display: flex; gap: var(--space-4); align-items: center; margin: 0 0 var(--space-5); padding: var(--space-4); background: var(--surface); border: var(--outline-w) solid var(--outline); border-radius: var(--radius); box-shadow: 0 3px 0 var(--outline); }
.level-up__picture { width: 96px; height: 96px; flex: none; }
.page__body .level-up__title { margin: 0 0 var(--space-2); }
.level-up p { margin: 0 0 var(--space-3); }
@media (max-width: 420px) { .level-up { flex-direction: column; text-align: center; } }

/* The monthly challenge (Trina, 17 Oct 2026): this month's card, then a round stamp for each
   month done. Done or not is in words, never only by colour. */
#challenge-part[hidden], .challenge__stamps-title[hidden] { display: none; }
.challenge__card { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); background: var(--surface-sunk); border: 2px dashed var(--border); border-radius: var(--radius); }
.challenge__card--done { background: var(--success-bg); border: 2px solid var(--outline); }
.challenge__card p { margin: 0; }
.challenge__name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; }
.challenge__how { font-size: var(--fs-sm); }
.challenge__state { font-size: var(--fs-sm); font-weight: 800; }
.challenge__stamps-title { margin: var(--space-4) 0 var(--space-2); font-size: var(--fs-base); }
.challenge-stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.page__body .challenge-stamps { padding: 0; }
.page__body .challenge-stamps li + li { margin-top: 0; }
.cstamp { position: relative; display: grid; justify-items: center; gap: var(--space-1); text-align: center; }
.cstamp__face {
  display: grid;
  place-content: center;
  width: 5.5rem;
  height: 5.5rem;
  color: var(--tangerine-600);
  border: 3px double currentColor;
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 6px currentColor;
  transform: rotate(-8deg);
}
.cstamp:nth-child(even) .cstamp__face { color: var(--sky-700); transform: rotate(6deg); }
.cstamp__month { font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1; text-transform: uppercase; }
.cstamp__year { font-size: var(--fs-xs); font-weight: 800; }
.cstamp__name { font-size: var(--fs-xs); font-weight: 800; }
.cstamp.stamp--new .cstamp__face { box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 6px currentColor, 0 0 0 3px var(--accent-yellow); }
:root[data-theme="dark"] .cstamp__face { color: var(--tangerine-300); }
:root[data-theme="dark"] .cstamp:nth-child(even) .cstamp__face { color: var(--sky-300); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cstamp__face { color: var(--tangerine-300); }
  :root:not([data-theme="light"]) .cstamp:nth-child(even) .cstamp__face { color: var(--sky-300); }
}

/* Thank-you stickers (Trina, 17 Oct 2026): a little sticker wall, newest first. */
#stickers-part[hidden] { display: none; }
.stickers { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.page__body .stickers { padding: 0; }
.page__body .stickers li + li { margin-top: 0; }
.sticker { position: relative; display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-3) var(--space-2); text-align: center; background: var(--surface-sunk); border-radius: var(--radius); }
.sticker:nth-child(odd) .sticker__picture { transform: rotate(-6deg); }
.sticker:nth-child(even) .sticker__picture { transform: rotate(5deg); }
.sticker__picture { width: 96px; height: 96px; }
.sticker__from { font-size: var(--fs-sm); overflow-wrap: anywhere; }
.sticker__from a, .sticker__from strong { font-weight: 800; }
.sticker__date { font-size: var(--fs-xs); color: var(--text-muted); }
.sticker.stamp--new { box-shadow: 0 0 0 3px var(--accent-yellow); }

/* Badges for trying things (Phase 3, step 10b). Earned or not is in words ("Earned 3 Oct 2026"
   or "Not yet"), never only by the faded picture. */
#badges-part[hidden] { display: none; }
.cbadges { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.page__body .cbadges { padding: 0; }
.page__body .cbadges li + li { margin-top: 0; }
.cbadge { position: relative; display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border-radius: var(--radius); }
.cbadge--got { background: var(--surface-sunk); border: 2px solid var(--outline); }
.cbadge--not-yet { border: 2px dashed var(--border); }
.cbadge--not-yet .cbadge__picture { opacity: .45; filter: grayscale(.8); }
.cbadge__picture { width: 64px; height: 64px; flex: none; }
.cbadge__words p { margin: 0; }
.cbadge__name { font-weight: 800; }
.cbadge__state { font-size: var(--fs-sm); font-weight: 800; color: var(--text-muted); }
.cbadge__how { font-size: var(--fs-sm); color: var(--text-muted); }
.cbadge.stamp--new { box-shadow: 0 0 0 3px var(--accent-yellow); }

/* Your character (Phase 3, step 11). The tiles stay light in dark mode, like the setup page's
   cooks, so the characters look the same either way. */
.passport section.diner { margin: 0 0 var(--space-5); padding: var(--space-4); background: var(--surface-sunk); border: 2px solid var(--outline); border-radius: var(--radius); }
.passport section.diner[hidden] { display: none; }
.page__body .diner h2 { margin-top: 0; }
.diner h2:focus { outline: none; }
.diner__now { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-3); }
.diner__picture { width: 96px; height: auto; flex: none; padding: var(--space-1); background: var(--sky-50); border: 2px solid var(--outline); border-radius: var(--radius); }
.diner__words p { margin: 0 0 var(--space-2); }
.diner__name { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 800; line-height: 1.15; }
.diner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.page__body .diner-grid { padding: 0; }
.page__body .diner-grid li + li { margin-top: 0; }
.diner-choice {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  width: 100%;
  height: 100%;
  padding: var(--space-1) var(--space-1) var(--space-2);
  color: var(--ink-900);
  background: var(--sky-50);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  cursor: pointer;
}
.diner-choice__picture { width: 100%; height: auto; aspect-ratio: 240 / 322; object-fit: contain; }
.diner-choice__name { font-size: var(--fs-xs); font-weight: 800; line-height: 1.2; text-align: center; }
.diner-choice[aria-pressed="true"] { background: var(--sunshine-100); border-color: var(--outline); box-shadow: 0 3px 0 var(--outline); }
/* A tick on your character, so it isn't shown by colour alone. */
.diner-choice[aria-pressed="true"]::after {
  content: "✓";
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--ink-900);
  background: var(--leaf-300);
  border: 2px solid var(--outline);
  border-radius: 50%;
  font-weight: 900;
  line-height: 1;
}
.diner-choice:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.diner-choice:disabled { opacity: .6; cursor: progress; }
.diner .form-status:empty { display: none; }
@media (min-width: 560px) { .diner-grid { grid-template-columns: repeat(4, 1fr); } }

/* "New outfit!" (Phase 3, step 12): a character in its new outfit, and two choices. */
.level-up__picture--cook { width: 72px; height: 96px; object-fit: contain; }
.level-up__buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (max-width: 420px) { .level-up__buttons { justify-content: center; } }

/* Outfits (Phase 3, step 12): locked ones are faded, with how to unlock them in words. */
.diner__outfit { font-weight: 700; color: var(--text-muted); }
.diner__outfits { margin-bottom: var(--space-3); }
.page__body .diner__outfits-title { margin: 0 0 var(--space-2); font-size: var(--fs-lg); }
.diner-choice--locked { cursor: default; background: var(--surface); border-style: dashed; }
.diner-choice--locked .diner-choice__picture { opacity: .45; filter: grayscale(.6); }
.diner-choice--locked .diner-choice__name { color: var(--text); }
.diner-choice__lock { font-size: var(--fs-xs); font-weight: 700; line-height: 1.2; text-align: center; color: var(--text-muted); }

/* The signed-out sample page (plan Section 16.3, step 11): a real-looking page, clearly marked
   "Sample", above "Sign in". */
.passport-sample { margin-bottom: var(--space-5); padding: var(--space-4); border: 2px dashed var(--border); border-radius: var(--radius-lg); }
.passport-sample h2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: 0; }
.sample-tag { display: inline-block; padding: .1rem .6rem; color: var(--text); background: var(--surface-sunk); border: 2px solid var(--outline); border-radius: var(--radius-pill); font: 800 var(--fs-sm) / 1.4 var(--font-body); }
.passport-sample .stamps { margin-block: var(--space-4); }
.page__body .passport-sample__badges { padding: 0; }

/* Step 23: the neighbourhoods you've tried, then all 55 folded; the new-customer part. */
.area-stamps__tried { margin: 0 0 var(--space-3); }
.area-stamps__tried:empty { display: none; }
.area-stamps__all > summary { display: inline-flex; align-items: center; min-height: var(--tap); gap: var(--space-2); font-weight: 800; color: var(--link); cursor: pointer; }
.area-stamps__all[open] > summary { margin-bottom: var(--space-2); }
.passport__new { display: grid; gap: var(--space-4); margin-bottom: var(--space-5); }
.passport__new[hidden],
.passport__summary[hidden] { display: none; }
.passport__new .passport-sample { margin-top: 0; }