/* Route guides: long reading pages built from still images, so they draw nothing at rest. */
.guide-hero { max-width: var(--max); margin: 0 auto; padding: clamp(32px, 6vw, 72px) var(--gutter); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.guide-hero__copy { display: grid; gap: 22px; justify-items: start; }
.guide-hero h1 { font-family: var(--display); font-stretch: 112%; font-weight: 850; font-size: clamp(2.6rem, 6.4vw, 5rem); line-height: 1; letter-spacing: -.02em; }
.guide-hero p { max-width: 34em; color: var(--muted); font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.55; }
.guide-facts { display: flex; flex-wrap: wrap; gap: 10px 28px; color: var(--muted); font-weight: 650; }
.guide-facts b { color: var(--fg); font-family: var(--display); font-stretch: 108%; font-weight: 850; font-size: 1.75rem; margin-right: 4px; }

.guide-phone { justify-self: center; width: min(100%, 340px); }
.guide-phone img, .guide-shots img { display: block; width: 100%; height: auto; border-radius: 38px; border: 6px solid #1C1D22; }

.guide-section { max-width: var(--max); margin: 0 auto; padding: clamp(36px, 6vw, 72px) var(--gutter); }
.guide-section h2 { color: var(--fg); font-family: var(--display); font-stretch: 108%; font-weight: 800; font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height: 1.08; }
.guide-read { max-width: 42em; display: grid; gap: 16px; color: var(--muted); font-size: 1.0625rem; line-height: 1.65; justify-items: start; }
.guide-map { margin-top: 32px; }
.guide-map img { display: block; width: 100%; height: auto; border-radius: 24px; }
.guide-map figcaption { margin-top: 10px; color: var(--dim); font-size: .9375rem; }

.guide-title { margin-bottom: 32px; }
.guide-stops { display: grid; gap: clamp(28px, 4vw, 44px); }
.guide-stops li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 52px); align-items: center; }
.guide-stops img { display: block; width: 100%; height: auto; border-radius: 20px; }
.guide-stops li > div { display: grid; gap: 8px; }
.guide-stops span { font: 800 .75rem/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); }
.guide-stops h3 { color: var(--fg); font-family: var(--display); font-stretch: 108%; font-weight: 800; font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.12; }
.guide-stops p { color: var(--muted); font-size: 1.0625rem; line-height: 1.6; }

.guide-how { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 72px); align-items: center; }
.guide-steps { display: grid; gap: 8px; padding-left: 1.3em; list-style: decimal; }
.guide-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.guide-shots img { border-radius: 28px; border-width: 4px; }

.guide-faq dl { display: grid; gap: 8px; max-width: 42em; }
.guide-faq dt { color: var(--fg); font-weight: 750; font-size: 1.125rem; margin-top: 14px; }
.guide-faq dd { margin: 0; color: var(--muted); font-size: 1.0625rem; line-height: 1.6; }
.guide-note { max-width: 46em; margin-top: 32px; color: var(--dim); font-size: .875rem; line-height: 1.55; }

/* Your city map */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.city-hero { max-width: 860px; margin: 0 auto; padding: clamp(32px, 6vw, 72px) var(--gutter) 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; justify-items: center; text-align: center; }
.city-hero h1 { font-family: var(--display); font-stretch: 112%; font-weight: 850; font-size: clamp(2.5rem, 6.4vw, 4.75rem); line-height: 1; letter-spacing: -.02em; }
.city-hero > p { max-width: 34em; color: var(--muted); font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.5; }
.city-form { display: flex; gap: 8px; width: min(100%, 560px); padding: 6px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.city-form input { flex: 1; min-width: 0; height: 52px; padding: 0 16px; border: 0; background: none; color: var(--fg); font: 600 1.0625rem var(--ui); outline: none; }
.city-form button { flex: none; height: 52px; padding: 0 22px; border: 0; border-radius: 15px; background: var(--fg); color: var(--bg); font: 750 1rem var(--ui); cursor: pointer; }
.city-form:focus-within { border-color: var(--violet); }
.city-chips, .city-themes, .city-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.city-chips button, .city-themes button, .city-actions button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font: 650 .9375rem var(--ui); cursor: pointer; }
.city-chips button:hover, .city-themes button:hover, .city-actions button:hover { background: var(--line); }
.city-themes button[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.city-actions button:first-child { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.city-status { min-height: 1.5em; color: var(--dim); font-size: .9375rem; }
.city-tool { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) 24px; display: grid; gap: 14px; }
.city-name { text-align: center; color: var(--fg); font-family: var(--display); font-stretch: 108%; font-weight: 800; font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height: 1.08; }
.city-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 24px; background: var(--surface); }
.city-stage > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.city-stage.is-live > img { display: none; }
.city-stage--wall { aspect-ratio: 9 / 19.5; width: min(100%, 360px); justify-self: center; }
.city-formats { display: flex; justify-content: center; gap: 8px; }
.city-formats button { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font: 650 .9375rem var(--ui); cursor: pointer; }
.city-formats button[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* Countdown and missions */
.count { display: flex; justify-content: center; gap: clamp(14px, 4vw, 36px); }
.count div { display: grid; gap: 4px; min-width: 76px; }
.count b { font-family: var(--display); font-stretch: 108%; font-weight: 850; font-size: clamp(2.75rem, 8vw, 4.5rem); line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; }
.count span { color: var(--dim); font-weight: 650; }
.mission-score { color: var(--muted); margin: -20px 0 24px; }
.mission-score b { color: var(--fg); }
.missions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.missions label { display: flex; gap: 14px; height: 100%; padding: 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; }
.missions input { flex: none; width: 24px; height: 24px; margin-top: 2px; accent-color: var(--violet); }
.missions span { display: grid; gap: 4px; color: var(--muted); line-height: 1.5; }
.missions small { font: 800 .75rem/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.missions b { color: var(--fg); font-size: 1.125rem; }
.missions .is-today label { border-color: var(--violet); }
.missions .is-done b { text-decoration: line-through; }
.night li { padding: 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.night a { color: var(--accent-ink); }
.night span { display: block; }
.night small, .night b { display: block; margin-bottom: 6px; }

/* Meme card maker */
.meme { max-width: var(--max); margin: 0 auto; padding: 8px var(--gutter) 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
.meme canvas { display: block; width: 100%; height: auto; border-radius: 20px; background: var(--surface); }
.meme__controls { display: grid; gap: 14px; }
.meme label { color: var(--fg); font-weight: 750; font-size: 1.125rem; }
.meme textarea { width: 100%; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font: 600 1.0625rem/1.4 var(--ui); resize: vertical; }
.meme .city-formats, .meme .city-actions { justify-content: flex-start; flex-wrap: wrap; }

/* Download calculator */
.dl-form { display: flex; gap: 8px; width: min(100%, 420px); padding: 6px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.dl-form select { flex: none; }
.dl-form input, .dl-form select { height: 56px; border: 0; background: none; color: var(--fg); font: 750 1.25rem var(--ui); outline: none; padding: 0 16px; }
.dl-form input { flex: 1; min-width: 0; width: 100%; }
.dl-result { display: grid; gap: 6px; }
.dl-result span { color: var(--dim); font-weight: 650; }
.dl-result b { font-family: var(--display); font-stretch: 108%; font-weight: 850; font-size: clamp(2.75rem, 8vw, 4.5rem); line-height: 1.05; color: var(--fg); }
.dl-result p { color: var(--muted); }

/* Headline generator and cover */
.news-text { color: var(--fg); font-weight: 700; font-size: 1.25rem; line-height: 1.35; }
.news-place { height: 52px; padding: 0 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font: 600 1.0625rem var(--ui); }
.cover-photo { justify-self: center; display: inline-flex; flex-direction: column; gap: 8px; text-align: center; color: var(--fg); font-weight: 700; }
.cover-photo input { color: var(--muted); font: 600 .9375rem var(--ui); max-width: 100%; }
.cover-photo-note { text-align: center; color: var(--dim); font-size: .875rem; }
.cover-status { text-align: center; scroll-margin-top: 100px; }
.city-actions button:disabled { opacity: .65; cursor: progress; }
.city-result[hidden] { display: none; }
.city-result { display: block; justify-self: center; width: min(100%, 480px); height: auto; border-radius: 20px; }

/* Birthday, poster and out-of-office tools */
.news-date { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.news-date > div { display: grid; gap: 6px; }
.news-date select { height: 52px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font: 600 1.0625rem var(--ui); }
.cover-photo--left { justify-self: start; text-align: left; }
.cover-photo-note--left { text-align: left; }
.office { align-items: start; }
.office__output { display: grid; gap: 16px; }
.office__text { min-height: 230px; padding: 24px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); color: var(--fg); font-size: 1.125rem; line-height: 1.55; white-space: pre-line; }
.office .city-actions { justify-content: flex-start; }

@media (max-width: 760px) {
  body:not([data-city-mode]) .city-stage { aspect-ratio: 4 / 5; }
  .city-form { flex-wrap: wrap; }
  .city-form button { width: 100%; }
  .guide-hero, .guide-how, .meme { grid-template-columns: minmax(0, 1fr); }
  .guide-phone { width: min(78%, 300px); }
  .guide-stops li { grid-template-columns: minmax(0, 1fr); }
}