/* Cicero Home — Shared styles (v2, Figma-synced)
 * Mirrors node 338:11679 of TA-Schools-Demo (yuQZwJTbt4oLudFXm0WSg6).
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--surface-container);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ────────────── Stage (isolated component preview) ────────────── */

.stage {
  min-height: 100vh;
  background: var(--surface-container);
  display: flex;
  flex-direction: column;
}

.stage-header {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--divider);
  background: var(--surface-container);
}

.stage-back {
  color: rgba(0, 0, 0, 0.4);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}

.stage-back:hover {
  color: var(--text-primary);
}

.stage-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

.stage-meta {
  margin-left: auto;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.4);
  font-variant-numeric: tabular-nums;
}

.stage-canvas {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
}

/* Grid for the showcase page */
.stage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 56px 32px;
  align-items: start;
  justify-items: center;
}

.stage-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.stage-slot__label {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.4);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Grouped sections (used when one showcase holds multiple card-state groups) */
.stage-sections {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
}

.stage-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.stage-section__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--divider);
}

.stage-section__title {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

.stage-section__desc {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
  margin: 0;
}

.stage-section__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 40px 32px;
  align-items: start;
  justify-items: center;
}

/* Pair: two sections side by side when viewport has room, stacks otherwise */
.stage-section-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  width: 100%;
}

.stage-section-pair > .stage-section {
  flex: 1 1 480px;
  min-width: 0;
}

.stage-section-pair .title-test {
  max-width: none;
}

/* Variation-count badge above a section or pair */
.variation-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.55);
  padding: 6px 12px;
  background: rgba(196, 102, 60, 0.08);
  border-radius: 999px;
  letter-spacing: -0.01em;
  margin-top: 8px;
  width: fit-content;
}

.variation-count strong {
  color: #9A4E2E;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.stage-slot__angle {
  font-size: 10px;
  color: #9A4E2E;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}

/* Title-only comparison card — shows the isolated text variants without the
 * surrounding card chrome, so copy can be read and compared as words. */
.title-test {
  background: #FFFFFF;
  border: 1px solid var(--divider);
  border-radius: 20px;
  padding: 24px 28px;
  width: 100%;
  max-width: 640px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.title-test__group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.title-test__state {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.4);
  margin: 0;
}

.title-test__row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 6px 0;
  border-top: 1px solid #F2F2F4;
}

.title-test__row:first-of-type { border-top: 0; padding-top: 0; }

.title-test__angle {
  flex: none;
  width: 110px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9A4E2E;
}

.title-test__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text-primary);
}

.title-test__caption {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.45);
  margin: 0 0 4px 0;
}

/* ────────────── Chip (→ Colosseum, 20 min walk, etc.) ────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  border-radius: var(--chip-radius);
  padding: var(--chip-pad-y) var(--chip-pad-x);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ────────────── Icon button ──────────────
 * Hit area: 60×60 (transparent).
 * Visible shape: 48.75×48.75, rendered via ::before so the HTML stays flat.
 * Fill/stroke lives on ::before; the SVG glyph sits on top at z-index 1.
 */

.icon-btn {
  width: var(--btn-size);
  height: var(--btn-size);
  position: relative;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 120ms ease;
  flex: none;
}

.icon-btn:active {
  transform: scale(0.96);
}

.icon-btn::before {
  content: '';
  position: absolute;
  inset: var(--btn-inset);
  border-radius: 50%;
  transition: background 120ms ease, border-color 120ms ease;
  pointer-events: none;
}

.icon-btn--filled::before {
  background: var(--btn-filled-bg);
}

.icon-btn--filled:hover::before {
  background: #1A1A1A;
}

.icon-btn--ghost::before {
  background: transparent;
  border: 1.5px solid var(--btn-ghost-border);
}

.icon-btn--ghost:hover::before {
  border-color: rgba(0, 0, 0, 0.35);
}

.icon-btn--filled {
  color: var(--btn-filled-ink);
}

.icon-btn--ghost {
  color: var(--btn-ghost-ink);
}

.icon-btn--ghost:hover {
  color: rgba(0, 0, 0, 0.7);
}

.icon-btn svg {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  display: block;
}

.icon-btn--filled .icon-play {
  margin-left: 2px; /* optical centering of the triangle */
}

/* ────────────── Place card ────────────── */
/* Card layout: flex row, items-end (right column bottom-aligns with photo). */

.place-card {
  width: var(--card-w);
  height: var(--card-h);
  display: flex;
  gap: var(--card-gap);
  align-items: flex-end;            /* Figma: items-end */
  background: transparent;
  border: none;
  padding: 0;
}

/* Photo card (media frame): 178×218, 32px radius, layered borders + shadow */
.place-card__media {
  position: relative;
  width: var(--photo-w);
  height: var(--card-h);
  border-radius: var(--photo-radius);
  background: var(--media-placeholder);
  overflow: hidden;
  box-shadow:
    0 0 0 1px var(--photo-border-outer),           /* outer 1px dark hairline */
    inset 0 0 0 2px var(--photo-border-inner),     /* inner 2px white highlight */
    var(--photo-shadow);                            /* drop shadow */
  flex: none;
}

.place-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay icons on the photo (top-right: 3-dot menu; bottom-right: expand) */
.place-card__media-icon {
  position: absolute;
  right: 17px;
  width: 24px;
  height: 24px;
  color: var(--photo-overlay-icon);
  pointer-events: auto;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.place-card__media-icon--top {
  top: 13px;
}

.place-card__media-icon--bottom {
  bottom: 17px;
}

.place-card__media-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* Info card (right column): 147w, flex-col, gap 11, items-start */
.place-card__body {
  width: var(--info-w);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--info-gap);
  flex: none;
}

/* Info block: title + chip group */
.place-card__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--info-block-gap);
  width: 100%;
}

/* Hook-and-name: title + subtitle, padded-left 5px */
.place-card__hook {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--info-hook-gap);
  padding-left: var(--info-hook-pl);
  width: 100%;
}

.place-card__title {
  font-family: var(--font-body);
  font-weight: 500;                   /* Inter Medium */
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.15px;
  color: var(--text-primary);
  margin: 0;
  width: 100%;
}

.place-card__subtitle {
  font-family: var(--font-body);
  font-weight: 500;                   /* Inter Medium (same as title) */
  font-size: 12px;
  line-height: 20px;
  letter-spacing: -0.12px;
  color: var(--text-secondary);
  margin: 0;
  width: 100%;
}

/* Action row holds a single icon-btn */
.place-card__action {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Dot-list meta — replaces the chip below the title. No container, no border.
 * Use `·` (middot) between items. Stays tight and typographic. */
.place-card__meta {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: rgba(0, 0, 0, 0.5);
  margin: 0;
}

/* ────────────── Move card — transit graphic variant ──────────────
 * Reuses the full .place-card chassis. The left media area becomes a
 * transit-themed graphic (line badge + time + destination) instead of a photo.
 * No overlay icons — this is a nudge card, not a place.
 */

.place-card__media--transit {
  background: #F4F7FC;
  display: flex;
  align-items: center;
  justify-content: center;
}

.transit-graphic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 12px;
}

.transit-graphic__badge {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--metro-b);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  box-shadow: 0 4px 12px rgba(0, 145, 212, 0.35);
}

.transit-graphic__badge--a { background: var(--metro-a); box-shadow: 0 4px 12px rgba(244, 125, 74, 0.35); }
.transit-graphic__badge--c { background: var(--metro-c); box-shadow: 0 4px 12px rgba(0, 170, 90, 0.35); }

.transit-graphic__time {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 700;
  color: #0A0A0A;
  letter-spacing: -0.025em;
  line-height: 1;
}

.transit-graphic__dest {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: #636366;
  letter-spacing: -0.01em;
  line-height: 1;
  text-align: center;
}

/* ────────────── Move · widget variants (AirJet/Tesla/Flighty aesthetic) ──────────────
 * A full-width 334×218 card where the JOURNEY is the hero: big station codes,
 * connecting arc with a train, line badge + status top, walk/time info bottom.
 * Two theme modifiers: --tint (pale blue gradient, Line-B themed) and --dark.
 */

.move-widget {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 28px;
  position: relative;
  overflow: hidden;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.08),
    0 4px 14px rgba(0, 0, 0, 0.12);
  font-family: var(--font-body);
}

.move-widget--tint {
  background: linear-gradient(135deg, #EAF4FF 0%, #D4E7FB 100%);
  color: #0A0A0A;
}

.move-widget--dark {
  background: #0A0A0A;
  color: #FFFFFF;
}

.move-widget__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.move-widget__brand {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.move-widget__status {
  font-weight: 500;
}

/* Tint variant header text is Line-B blue, not black */
.move-widget--tint .move-widget__brand,
.move-widget--tint .move-widget__status {
  color: var(--metro-b);
}

.move-widget--dark .move-widget__brand { color: #FFFFFF; }
.move-widget--dark .move-widget__status { color: rgba(255, 255, 255, 0.55); }

/* Journey uses absolute positioning so the big B can dominate the center,
 * the arc arches over it, and the stations flank left/right. */
.move-widget__journey {
  position: relative;
  width: 100%;
  height: 139px;
  flex: none;
}

.move-widget__station {
  position: absolute;
  width: 100px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.move-widget__station--origin {
  left: 5px;
  top: 57px;
  align-items: flex-start;
  text-align: left;
}

.move-widget__station--dest {
  left: 195px;
  top: 63px;
  align-items: flex-end;
  text-align: right;
}

.move-widget__station strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: -0.02em;
  color: #0A0A0A;
}

.move-widget__station small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  line-height: 13px;
  color: rgba(0, 0, 0, 0.5);
}

.move-widget--dark .move-widget__station strong { color: #FFFFFF; }
.move-widget--dark .move-widget__station small  { color: rgba(255, 255, 255, 0.55); }

/* Arc container — holds the arc-path SVG, the big B badge, and the metro-cart icon */
.move-widget__arc {
  position: absolute;
  left: 73px;
  top: -7px;
  width: 154px;
  height: 139px;
}

.move-widget__arc-path {
  position: absolute;
  left: 0;
  top: 0;
  width: 154px;
  height: 77px;
  display: block;
}

/* Big B badge — 90px Line-B circle with a soft blue glow, sits under the arc peak */
.move-widget__arc-badge {
  position: absolute;
  left: 32px;
  top: 67px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--metro-b);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 45px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  box-shadow: 0 8px 54px rgba(0, 145, 212, 0.3);
}

/* Metro cart riding the arc (static placeholder; travels along the curve later) */
.move-widget__train {
  position: absolute;
  left: 24px;
  top: 18px;
  width: 38px;
  height: 24px;
  transform: rotate(-24deg);
  z-index: 2;
}

.move-widget__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.move-widget--tint .move-widget__footer { color: rgba(0, 0, 0, 0.55); }
.move-widget--dark .move-widget__footer { color: rgba(255, 255, 255, 0.5); }

/* Widget-sized plus button (smaller than the 60px one) */
.move-widget__cta {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #0A0A0A;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform 120ms ease;
  flex: none;
}

.move-widget__cta:active { transform: scale(0.95); }

.move-widget--dark .move-widget__cta {
  background: #FFFFFF;
  color: #0A0A0A;
}

.move-widget__cta svg {
  width: 16px;
  height: 16px;
}

/* ════════════════════════════════════════════════════════════════════════════════
 * ZOOMED-OUT CARDS · City (at nation zoom) + Nation (at continent zoom)
 * Intentionally distinct from the in-city Move/Place system. Travel-poster,
 * postcard, flag, stamp energy. Each is self-contained — no shared chassis.
 * ════════════════════════════════════════════════════════════════════════════════ */

/* ── City · A · Boarding-pass ticket ────────────── */

.city-ticket {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 18px;
  background: #FBF4DF;
  position: relative;
  padding: 18px 20px 54px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  font-family: var(--font-body);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 6px 18px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.city-ticket::before,
.city-ticket::after {
  /* notches on the sides — ticket silhouette */
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: #FFFFFF;
  border-radius: 50%;
  top: 40px;
}
.city-ticket::before { left: -10px; }
.city-ticket::after { right: -10px; }

.city-ticket__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.55);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.city-ticket__mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.city-ticket__route {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  flex: 1;
  padding-top: 6px;
}

.city-ticket__city {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #0A0A0A;
}

.city-ticket__station--origin { text-align: left; }
.city-ticket__station--dest { text-align: right; }

.city-ticket__station-name {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.45);
  letter-spacing: 0.04em;
  margin-top: 4px;
}

.city-ticket__dash {
  width: 60px;
  height: 1.5px;
  background: rgba(0, 0, 0, 0.3);
  position: relative;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3) 50%, transparent 50%);
  background-size: 6px 1.5px;
  background-repeat: repeat-x;
}

.city-ticket__plane {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #C4663C;
  font-size: 14px;
}

.city-ticket__hook {
  font-size: 13px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.3;
  margin-top: 4px;
}

.city-ticket__cta {
  position: absolute;
  bottom: 14px;
  right: 14px;
}

/* ── Move · Ticket (same metaphor as City ticket, Line-B themed) ────────────── */

.move-ticket {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 18px;
  background: linear-gradient(135deg, #EAF4FF, #D4E7FB);
  position: relative;
  padding: 18px 20px 54px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  font-family: var(--font-body);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 6px 18px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.move-ticket::before,
.move-ticket::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: #FFFFFF;
  border-radius: 50%;
  top: 40px;
}
.move-ticket::before { left: -10px; }
.move-ticket::after { right: -10px; }

.move-ticket__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #0091D4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.move-ticket__mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.move-ticket__route {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  flex: 1;
  padding-top: 6px;
}

.move-ticket__station-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #0A0A0A;
}

.move-ticket__station--origin { text-align: left; }
.move-ticket__station--dest { text-align: right; }

.move-ticket__station-sub {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.45);
  letter-spacing: 0.04em;
  margin-top: 4px;
  text-transform: uppercase;
}

.move-ticket__dash {
  width: 52px;
  height: 1.5px;
  background-image: linear-gradient(to right, #0091D4 50%, transparent 50%);
  background-size: 6px 1.5px;
  background-repeat: repeat-x;
  position: relative;
}

.move-ticket__line-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0091D4;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0, 145, 212, 0.4);
}

.move-ticket__hook {
  font-size: 13px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.3;
  margin-top: 4px;
}

.move-ticket__cta {
  position: absolute;
  bottom: 14px;
  right: 14px;
}

/* ── Nation · C · Luggage tag (airline bag tag metaphor) ────────────── */

.nation-luggage {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 12px;
  background: linear-gradient(180deg, #FFD84D 0%, #F4B84A 100%);
  position: relative;
  overflow: hidden;
  padding: 16px 22px;
  font-family: var(--font-body);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nation-luggage__hole {
  position: absolute;
  top: 16px;
  left: 22px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

.nation-luggage__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 28px;
  color: #4A2C00;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nation-luggage__codes {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 6px;
  color: #2A1A00;
}

.nation-luggage__code {
  font-family: 'Courier New', 'Courier', monospace;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
}

.nation-luggage__arrow {
  font-size: 20px;
  font-weight: 700;
  color: #8B5C00;
}

.nation-luggage__country {
  font-family: var(--font-body);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #2A1A00;
  margin-top: 4px;
}

.nation-luggage__meta {
  display: flex;
  gap: 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.65);
  text-transform: uppercase;
  margin-top: auto;
}

.nation-luggage__barcode {
  position: absolute;
  bottom: 14px;
  left: 22px;
  right: 62px;
  height: 16px;
  background: repeating-linear-gradient(
    90deg,
    #2A1A00 0 2px,
    transparent 2px 4px,
    #2A1A00 4px 5px,
    transparent 5px 8px,
    #2A1A00 8px 9px,
    transparent 9px 12px
  );
  opacity: 0.75;
}

.nation-luggage__cta {
  position: absolute;
  bottom: 14px;
  right: 14px;
}

.nation-luggage__cta .icon-btn::before { background: #2A1A00; }
.nation-luggage__cta .icon-btn svg { color: #FFD84D; }

/* ── City · B · Vintage postcard ────────────── */

.city-postcard {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 6px;
  background: #E6D9B8;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.city-postcard__photo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #D0C088 0%, #A89870 50%, #887860 100%);
}

.city-postcard__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.2) 40%, transparent 70%);
}

.city-postcard__stamp {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 52px;
  background: rgba(255, 255, 255, 0.18);
  border: 2px dashed rgba(255, 255, 255, 0.75);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.95);
  font-family: 'Georgia', serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  transform: rotate(5deg);
  padding: 2px;
  text-align: center;
  line-height: 1.2;
}

.city-postcard__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 22px;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.city-postcard__name {
  font-family: 'Georgia', 'Playfair Display', serif;
  font-size: 40px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.city-postcard__sub {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.9;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 4px;
}

.city-postcard__cta {
  position: absolute;
  bottom: 14px;
  right: 14px;
}

.city-postcard__cta .icon-btn::before { background: #FFFFFF; }
.city-postcard__cta .icon-btn svg { color: #0A0A0A; }

/* ── City · C · Polaroid (personal / captured-moment) ────────────── */

.city-polaroid {
  width: var(--card-w);
  height: var(--card-h);
  background: #FDFBF5;
  padding: 12px 12px 22px;
  position: relative;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);
  transform: rotate(-1.2deg);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  font-family: var(--font-body);
  gap: 10px;
}

.city-polaroid__photo {
  flex: 1;
  background: linear-gradient(135deg, #C8B8A0, #A89878);
  border-radius: 2px;
  position: relative;
}

.city-polaroid__name {
  font-family: 'Georgia', 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 500;
  font-style: italic;
  color: #0A0A0A;
  letter-spacing: -0.02em;
  line-height: 1;
  padding-left: 4px;
}

.city-polaroid__sub {
  font-size: 11px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.5);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-left: 4px;
}

.city-polaroid__cta {
  position: absolute;
  bottom: 12px;
  right: 12px;
}

/* ── City · D · Map tile (abstract location marker) ────────────── */

.city-map-tile {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 20px;
  background: linear-gradient(135deg, #F4E8D2, #E8D0A8);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 6px 18px rgba(0, 0, 0, 0.1);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  font-family: var(--font-body);
}

.city-map-tile__pin {
  position: absolute;
  top: 32px;
  right: 48px;
}

.city-map-tile__pin-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #C4663C;
  border: 3px solid #FFFFFF;
  box-shadow: 0 2px 6px rgba(196, 102, 60, 0.45);
  position: relative;
  z-index: 2;
}

.city-map-tile__pin-pulse {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(196, 102, 60, 0.15);
  z-index: 1;
}

.city-map-tile__dashes {
  position: absolute;
  top: 42px;
  left: 40%;
  width: 90px;
  height: 1px;
  background-image: linear-gradient(to right, rgba(196, 102, 60, 0.4) 50%, transparent 50%);
  background-size: 6px 1px;
  background-repeat: repeat-x;
  transform: rotate(-8deg);
}

.city-map-tile__you-dot {
  position: absolute;
  top: 52px;
  left: 36px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid #FDFBF5;
}

.city-map-tile__name {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #2A1A00;
  line-height: 1;
}

.city-map-tile__meta {
  font-size: 11px;
  font-weight: 700;
  color: rgba(42, 26, 0, 0.6);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 6px;
}

.city-map-tile__hook {
  font-size: 13px;
  font-weight: 500;
  color: rgba(42, 26, 0, 0.75);
  font-style: italic;
  padding-right: 52px;
}

.city-map-tile__cta {
  position: absolute;
  bottom: 14px;
  right: 14px;
}

/* ── City · Panorama block ────────────────────────
 * Mirrors Nation flag chassis: top 50% panoramic city photo
 * (grey placeholder until real image), bottom 50% white body
 * with name, sub-meta, italic hook, and CTA bottom-right.
 */

.city-panorama {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 6px 18px rgba(0, 0, 0, 0.1);
  background: #FFFFFF;
}

.city-panorama__photo {
  height: 50%;
  background: var(--media-placeholder);
  position: relative;
}

.city-panorama__body {
  flex: 1;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.city-panorama__name {
  font-family: var(--font-body);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #0A0A0A;
  line-height: 1;
}

.city-panorama__sub {
  font-size: 11px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.55);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 4px;
}

.city-panorama__hook {
  font-size: 13px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.7);
  font-style: italic;
  padding-right: 50px;
}

.city-panorama__cta {
  position: absolute;
  bottom: 12px;
  right: 14px;
}

/* ── Nation · A · Flag color-block ────────────── */

.nation-flag {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 6px 18px rgba(0, 0, 0, 0.1);
  background: #FFFFFF;
}

.nation-flag__stripes {
  height: 50%;
  display: flex;
  /* default = France flag; override per country */
}

.nation-flag__stripes > span {
  flex: 1;
}

.nation-flag__stripes--france > span:nth-child(1) { background: #002395; }
.nation-flag__stripes--france > span:nth-child(2) { background: #FFFFFF; }
.nation-flag__stripes--france > span:nth-child(3) { background: #ED2939; }

.nation-flag__body {
  flex: 1;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.nation-flag__name {
  font-family: var(--font-body);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #0A0A0A;
  line-height: 1;
}

.nation-flag__sub {
  font-size: 11px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.55);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 4px;
}

.nation-flag__hook {
  font-size: 13px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.7);
  font-style: italic;
  padding-right: 50px;
}

.nation-flag__cta {
  position: absolute;
  bottom: 12px;
  right: 14px;
}

/* ── Nation · B · Passport stamp ────────────── */

.nation-stamp {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 18px;
  background: repeating-linear-gradient(135deg, #F4E8D8 0 8px, #EEE0CC 8px 16px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 6px 18px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.nation-stamp__circle {
  width: 148px;
  height: 148px;
  border: 3px solid #8B2C2C;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #8B2C2C;
  text-align: center;
  padding: 12px;
  transform: rotate(-8deg);
  position: relative;
}

.nation-stamp__circle::before {
  /* inner ring for stamp authenticity */
  content: '';
  position: absolute;
  inset: 6px;
  border: 1.5px solid #8B2C2C;
  border-radius: 50%;
  opacity: 0.6;
}

.nation-stamp__stars {
  font-size: 10px;
  letter-spacing: 0.3em;
  font-weight: 700;
  margin-bottom: 6px;
  opacity: 0.85;
}

.nation-stamp__name {
  font-family: 'Courier New', 'Courier', monospace;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
}

.nation-stamp__sub {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  margin-top: 6px;
  opacity: 0.85;
}

.nation-stamp__date {
  font-family: 'Courier New', 'Courier', monospace;
  font-size: 11px;
  font-weight: 700;
  margin-top: 8px;
  border-top: 1.5px solid #8B2C2C;
  padding-top: 6px;
  letter-spacing: 0.1em;
}

.nation-stamp__hook {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.6);
  font-style: italic;
}

.nation-stamp__cta {
  position: absolute;
  bottom: 14px;
  right: 14px;
}

/* ════════════════════════════════════════════════════════════════════════════════
 * TOWARDS X CARD · 3 design directions
 * Dynamic — updates as user moves toward an explicit anchor (e.g. Colosseum).
 * Distinct from Route (fixed curated path) and from Place w/ "→ X" meta (single
 * stop). This is the journey itself with persistent anchor + cycling next-thing.
 * ════════════════════════════════════════════════════════════════════════════════ */

/* ── Variant A · cycling next-thing photo + anchor badge ────────────── */

.towards-cycle {
  position: relative;
  width: var(--photo-w);
  height: var(--card-h);
  border-radius: var(--photo-radius);
  background: var(--media-placeholder);
  overflow: hidden;
  flex: none;
  box-shadow:
    0 0 0 1px var(--photo-border-outer),
    inset 0 0 0 2px var(--photo-border-inner),
    var(--photo-shadow);
}

.towards-cycle__photo {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: towards-photo-cycle 6s ease-in-out infinite;
}

.towards-cycle__photo[data-stop="1"] {
  background: linear-gradient(135deg, #C8B8A0, #A89888);
  animation-delay: 0s;
}
.towards-cycle__photo[data-stop="2"] {
  background: linear-gradient(135deg, #D0BCA0, #B0A088);
  animation-delay: 2s;
}
.towards-cycle__photo[data-stop="3"] {
  background: linear-gradient(135deg, #B8C0A8, #98A088);
  animation-delay: 4s;
}

@keyframes towards-photo-cycle {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  30%  { opacity: 1; }
  35%  { opacity: 0; }
  100% { opacity: 0; }
}

.towards-cycle__photo-label {
  position: absolute;
  bottom: 14px;
  left: 16px;
  right: 16px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: #FFFFFF;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
  letter-spacing: -0.015em;
}

.towards-cycle__anchor-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(10, 10, 10, 0.85);
  color: #FFFFFF;
  padding: 5px 11px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  z-index: 10;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ── Variant B · anchor-pinned deck (Route deck + persistent anchor) ────────────── */

.route-deck__anchor-pin {
  position: absolute;
  bottom: 6px;
  right: 4px;
  background: linear-gradient(135deg, #E08450, #C4663C);
  color: #FFFFFF;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  z-index: 15;
  box-shadow: 0 4px 12px rgba(196, 102, 60, 0.4);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Variant D · compass + stack (compass IS the front card, photo stops behind) */

.route-deck--compass-front .route-deck__layer--front {
  background: linear-gradient(135deg, #FFF0D8, #F4DAA0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px;
  box-sizing: border-box;
  gap: 3px;
}

.route-deck--compass-front .route-deck__layer--back {
  background: linear-gradient(135deg, #C8B8A0, #A89888);
}

.route-deck--compass-front .route-deck__layer--mid {
  background: linear-gradient(135deg, #B8C0A8, #98A088);
}

.route-deck-compass__arrow-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(196, 102, 60, 0.18);
}

.route-deck-compass__arrow svg {
  width: 22px;
  height: 22px;
  color: #C4663C;
}

.route-deck-compass__distance {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 800;
  color: #0A0A0A;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: 4px;
}

.route-deck-compass__anchor {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.55);
  letter-spacing: -0.01em;
}

.route-deck-compass__dots {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}

.route-deck-compass__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(196, 102, 60, 0.4);
}

.route-deck-compass__dot--first {
  background: #C4663C;
  width: 6px;
  height: 6px;
}

/* ── Variant C · compass card (abstract directional) ────────────── */

.towards-compass {
  width: var(--photo-w);
  height: var(--card-h);
  border-radius: var(--photo-radius);
  background: linear-gradient(135deg, #FFF0D8, #F4DAA0);
  position: relative;
  flex: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px;
  box-sizing: border-box;
  box-shadow:
    0 0 0 1px var(--photo-border-outer),
    inset 0 0 0 2px var(--photo-border-inner),
    var(--photo-shadow);
}

.towards-compass__arrow-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  box-shadow: 0 2px 10px rgba(196, 102, 60, 0.18);
}

.towards-compass__arrow svg {
  width: 30px;
  height: 30px;
  color: #C4663C;
}

.towards-compass__distance {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 800;
  color: #0A0A0A;
  letter-spacing: -0.03em;
  line-height: 1;
}

.towards-compass__anchor {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.55);
  letter-spacing: -0.01em;
}

.towards-compass__dots {
  display: flex;
  gap: 5px;
  margin-top: 6px;
  align-items: center;
}

.towards-compass__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(196, 102, 60, 0.4);
}

.towards-compass__dot--first {
  background: #C4663C;
  width: 8px;
  height: 8px;
}

/* ════════════════════════════════════════════════════════════════════════════════
 * NEIGHBORHOOD CARD · 3 design directions
 * Same Place chassis. Neighborhood is a polygon (an area), not a point — visual
 * needs to say "many things in one bounded place." Soft-pin on tap+.
 * ════════════════════════════════════════════════════════════════════════════════ */

/* ── Variant A · polygon-hint overlay (corner brackets on photo) ────────────── */

.nb-polygon-hint {
  position: absolute;
  inset: 14px;
  pointer-events: none;
  z-index: 5;
}

.nb-polygon-hint__corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1.75px solid rgba(255, 255, 255, 0.9);
  border-radius: 2px;
}

.nb-polygon-hint__corner--tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.nb-polygon-hint__corner--tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.nb-polygon-hint__corner--bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.nb-polygon-hint__corner--br { bottom: 0; right: 0; border-left: none; border-top: none; }

/* ── Variant B · mini-grid collage (4 photos representing variety) ────────────── */

.nb-collage {
  position: relative;
  width: var(--photo-w);
  height: var(--card-h);
  border-radius: var(--photo-radius);
  overflow: hidden;
  flex: none;
  background: #FFFFFF;
  box-shadow:
    0 0 0 1px var(--photo-border-outer),
    inset 0 0 0 2px var(--photo-border-inner),
    var(--photo-shadow);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
}

.nb-collage__tile {
  background: var(--media-placeholder);
}

.nb-collage__tile:nth-child(1) { background: linear-gradient(135deg, #C8C0B0, #A8A090); }
.nb-collage__tile:nth-child(2) { background: linear-gradient(135deg, #B8C5C0, #98A8A0); }
.nb-collage__tile:nth-child(3) { background: linear-gradient(135deg, #D0BCA0, #B0A088); }
.nb-collage__tile:nth-child(4) { background: linear-gradient(135deg, #B8B0A0, #98908A); }

/* ── B2 · Asymmetric 1 hero + 3 stack (one big tile left, 3 small stacked right) */
.nb-collage--hero3 {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}
.nb-collage--hero3 .nb-collage__tile:first-child {
  grid-row: span 3;
}

/* ── B3 · Asymmetric top hero + 2 below (one big top, 2 small bottom) */
.nb-collage--top1 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1.5fr 1fr;
}
.nb-collage--top1 .nb-collage__tile:first-child {
  grid-column: span 2;
}

/* ── B4 · Emoji color blocks (iconic, no photo placeholders) */
.nb-collage--emoji .nb-collage__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  line-height: 1;
}
.nb-collage--emoji .nb-collage__tile:nth-child(1) { background: linear-gradient(135deg, #F4A878, #E08450); }
.nb-collage--emoji .nb-collage__tile:nth-child(2) { background: linear-gradient(135deg, #A8D0BC, #82B299); }
.nb-collage--emoji .nb-collage__tile:nth-child(3) { background: linear-gradient(135deg, #C8B8E0, #A898C8); }
.nb-collage--emoji .nb-collage__tile:nth-child(4) { background: linear-gradient(135deg, #F0C4A0, #D0A480); }

.nb-collage__badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(10, 10, 10, 0.85);
  color: #FFFFFF;
  padding: 5px 11px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  z-index: 2;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ── Variant C · hero photo + inside-count badge overlay ────────────── */

.nb-count-badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(255, 255, 255, 0.92);
  color: #0A0A0A;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  z-index: 5;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ════════════════════════════════════════════════════════════════════════════════
 * QUESTION CARD
 * 334×218 · no photo · question text + answer chips + optional progress dots.
 * Multi-choice (2-5 options) is the primary shape; text input and combo come later.
 * ════════════════════════════════════════════════════════════════════════════════ */

.question-card {
  width: var(--card-w);
  /* min-height keeps shorter Qs feeling like a card; longer ones (4-5+ stacked
   * options) can grow naturally — Q cards aren't height-bound the way Place is. */
  min-height: var(--card-h);
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  position: relative;
  font-family: var(--font-body);
}

/* Top-aligned variant — answers sit right below the question instead of at the
 * card bottom. Use for text-input cards: keeps the field within easy thumb-reach
 * since the card lives on the lower half of the screen. */
.question-card--top {
  justify-content: flex-start;
  gap: 14px;
}

.question-card__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: var(--info-hook-pl);
}

.question-card__progress {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 8px;
  align-items: center;
}

.question-card__progress-text {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.5);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.question-card__progress-dots {
  display: flex;
  align-items: center;
  gap: 4px;
}

.question-card__progress-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
}

.question-card__progress-dot--done {
  background: rgba(0, 0, 0, 0.55);
}

.question-card__progress-dot--current {
  background: var(--metro-b);
  width: 7px;
  height: 7px;
}

.question-card__title {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0;
  padding-right: 60px; /* keeps progress dots from overlapping long titles */
}

.question-card__answers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-left: var(--info-hook-pl);
  align-items: flex-start;
}

/* Stacked vertical layout — best for 2-3 options, scan top-to-bottom */
.question-card__answers--stack {
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  padding-right: var(--info-hook-pl);
}

/* 2-column grid layout — Millionaire-style, 4 options as 2x2, 5 as 2x2 + full-width */
.question-card__answers--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding-right: var(--info-hook-pl);
}

.question-card__answers--grid .q-answer--full {
  grid-column: 1 / -1;
}

/* Answer button — letter badge + text. Bigger, more button-like than the tag chips. */
.q-answer {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 14px;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
  text-align: left;
  min-height: 40px;
  box-sizing: border-box;
}

.q-answer:hover {
  border-color: rgba(0, 0, 0, 0.32);
}

.q-answer:active {
  transform: scale(0.98);
}

.q-answer__letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--text-primary);
  flex: none;
  line-height: 1;
}

.q-answer__text {
  flex: 1;
  min-width: 0;
}

.q-answer--selected {
  background: #0A0A0A;
  color: #FFFFFF;
  border-color: #0A0A0A;
}

.q-answer--selected .q-answer__letter {
  background: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
}

/* ── Question UI experiments ───────────── */

/* Big emoji header (variant: emoji) */
.q-emoji {
  font-size: 30px;
  line-height: 1;
  padding-left: var(--info-hook-pl);
  margin: 0;
}

/* Slider scale (variant: ordinal Qs like energy) */
.q-scale {
  padding: 0 var(--info-hook-pl);
}

.q-scale__track {
  position: relative;
  height: 6px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  margin: 18px 12px 8px 12px;
}

.q-scale__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--metro-b);
  border-radius: 999px;
}

.q-scale__thumb {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0A0A0A;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  cursor: grab;
}

.q-scale__ticks {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.45);
  letter-spacing: 0.02em;
  margin-top: 4px;
}

/* Picture-card answers (variant: visual answers with thumbnails) */
.q-pics {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 0 var(--info-hook-pl);
}

.q-pic {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: center;
  font-family: var(--font-body);
  transition: transform 120ms ease;
}

.q-pic:active { transform: scale(0.97); }

.q-pic__image {
  width: 100%;
  aspect-ratio: 1.1;
  border-radius: 14px;
  background: var(--media-placeholder);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.q-pic__name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.1;
}

/* Mascot speech bubble (variant: Cicero asks via bubble) */
.q-bubble {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding-left: 0;
}

.q-bubble__mascot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #E08450, #C4663C);
  flex: none;
  position: relative;
}

.q-bubble__mascot::after {
  content: '';
  position: absolute;
  top: 12px;
  left: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}

.q-bubble__body {
  flex: 1;
  background: #F2F2F4;
  border-radius: 16px 16px 16px 4px;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* ── Acknowledgment experiments ──────────── */

/* Recap as chips (ack variant: shows what was answered) */
.q-recap-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-left: var(--info-hook-pl);
  margin-top: 6px;
}

.q-recap-chip {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
  background: rgba(0, 0, 0, 0.05);
  padding: 4px 9px;
  border-radius: 999px;
  letter-spacing: -0.01em;
}

/* Compact one-liner ack */
.q-ack-compact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(0, 145, 212, 0.08);
  border-radius: 999px;
  width: fit-content;
  margin-left: var(--info-hook-pl);
}

.q-ack-compact__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--metro-b);
  color: #FFFFFF;
  flex: none;
}

.q-ack-compact__text {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

/* "Tweak" inline action */
.q-ack-tweak {
  display: inline-block;
  padding-left: var(--info-hook-pl);
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--metro-b);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Answer chip — pill with subtle border, dark fill on selected */
.q-chip {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--text-primary);
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
  white-space: nowrap;
}

.q-chip:hover {
  border-color: rgba(0, 0, 0, 0.3);
}

.q-chip:active {
  transform: scale(0.97);
}

.q-chip--selected {
  background: #0A0A0A;
  color: #FFFFFF;
  border-color: #0A0A0A;
}

/* Open text input chip-style */
.q-input {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--text-primary);
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  padding: 10px 16px;
  outline: none;
  flex: 1;
  min-width: 140px;
  max-width: 240px;
  transition: border-color 120ms ease;
}

.q-input::placeholder {
  color: rgba(0, 0, 0, 0.35);
  font-weight: 400;
}

.q-input:focus {
  border-color: var(--metro-b);
}

/* ── Date range picker (From → To pills) ──────────────── */

.q-date-range {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.q-date-field {
  flex: 1;
  min-width: 0;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 14px;
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color 120ms ease;
}

.q-date-field:hover {
  border-color: rgba(0, 0, 0, 0.3);
}

.q-date-field__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
}

.q-date-field__value {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.q-date-field--empty .q-date-field__value {
  color: rgba(0, 0, 0, 0.3);
  font-weight: 500;
}

.q-date-range__arrow {
  color: rgba(0, 0, 0, 0.35);
  font-size: 14px;
  flex: none;
}

/* ── Number picker (stepper) ──────────────────────────── */

.q-number-picker {
  display: inline-flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}

.q-number-step {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease;
}

.q-number-step:hover {
  background: rgba(0, 0, 0, 0.05);
}

.q-number-step:disabled {
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
}

.q-number-value {
  min-width: 28px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  padding: 0 4px;
}

/* ════════════════════════════════════════════════════════════════════════════════
 * ROUTE CARD · 3 design directions
 * Same Place chassis (334×218 outer, photo-left + info-right). Only the LEFT
 * visual area differs. Right column keeps title/subtitle/meta/button.
 * ════════════════════════════════════════════════════════════════════════════════ */

/* ── Variant A · stops-bar overlay on photo ────────────── */

.route-stops-bar {
  position: absolute;
  bottom: 12px;
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.94);
  padding: 7px 12px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 5;
}

.route-stops-bar__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
  flex: none;
}

.route-stops-bar__dot--current {
  background: var(--metro-b);
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 3px rgba(0, 145, 212, 0.2);
}

.route-stops-bar__line {
  flex: 1;
  height: 1.5px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 1px;
}

/* ── Variant B · stacked deck (multiple photos fanned) ────────────── */

.route-deck {
  position: relative;
  width: var(--photo-w);
  height: var(--card-h);
  flex: none;
}

.route-deck__layer {
  position: absolute;
  border-radius: 24px;
  border: 3px solid #FFFFFF;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.route-deck__layer--back {
  width: 130px;
  height: 175px;
  top: 14px;
  left: 6px;
  transform: rotate(-7deg);
  background: linear-gradient(135deg, #D2D2D8, #BFBFC5);
  z-index: 1;
}

.route-deck__layer--mid {
  width: 130px;
  height: 175px;
  top: 14px;
  left: 42px;
  transform: rotate(7deg);
  background: linear-gradient(135deg, #DEDEE2, #C8C8CC);
  z-index: 2;
}

.route-deck__layer--front {
  width: 142px;
  height: 196px;
  top: 4px;
  left: 18px;
  background: var(--media-placeholder);
  z-index: 3;
}

.route-deck__count {
  position: absolute;
  bottom: 12px;
  right: 8px;
  background: rgba(10, 10, 10, 0.9);
  color: #FFFFFF;
  border-radius: 999px;
  padding: 5px 11px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  z-index: 10;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ── Variant B+ · cycling deck ──────────────
 * Front layer crossfades through all stops every ~700ms.
 * In production this would sync with the map: the visible photo's
 * pin highlights, route line + current location stay in view.
 */

.route-deck--cycle .route-deck__layer--front {
  position: relative;
  overflow: hidden;
  background: transparent;
}

.route-deck__photo {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: route-photo-cycle 10s ease-in-out infinite;
}

.route-deck__photo[data-stop="1"] {
  background: linear-gradient(135deg, #B8C5D0, #98A8B8);
  animation-delay: 0s;
}
.route-deck__photo[data-stop="2"] {
  background: linear-gradient(135deg, #CCB89C, #AC9C84);
  animation-delay: 2s;
}
.route-deck__photo[data-stop="3"] {
  background: linear-gradient(135deg, #DCC8AC, #C0AC94);
  animation-delay: 4s;
}
.route-deck__photo[data-stop="4"] {
  background: linear-gradient(135deg, #B0A88C, #948C70);
  animation-delay: 6s;
}
.route-deck__photo[data-stop="5"] {
  background: linear-gradient(135deg, #D0BC94, #B4A07C);
  animation-delay: 8s;
}

@keyframes route-photo-cycle {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  18%  { opacity: 1; }
  22%  { opacity: 0; }
  100% { opacity: 0; }
}

.route-deck__photo-label {
  position: absolute;
  bottom: 14px;
  left: 16px;
  right: 16px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: #FFFFFF;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55), 0 0 2px rgba(0, 0, 0, 0.3);
  letter-spacing: -0.015em;
  line-height: 1.2;
  z-index: 2;
}

/* Cycling stop counter — same animation cycle, layered spans */
.route-deck__counter {
  position: absolute;
  top: 12px;
  left: 32px;
  width: 36px;
  height: 18px;
  background: rgba(10, 10, 10, 0.7);
  border-radius: 999px;
  z-index: 10;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.route-deck__counter span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  animation: route-photo-cycle 10s ease-in-out infinite;
}

.route-deck__counter span[data-num="1"] { animation-delay: 0s; }
.route-deck__counter span[data-num="2"] { animation-delay: 2s; }
.route-deck__counter span[data-num="3"] { animation-delay: 4s; }
.route-deck__counter span[data-num="4"] { animation-delay: 6s; }
.route-deck__counter span[data-num="5"] { animation-delay: 8s; }

/* ── Variant C · route diagram (transit-map style replaces the photo) ────────────── */

.route-diagram {
  width: var(--photo-w);
  height: var(--card-h);
  background: #F4F7F2;
  border-radius: var(--photo-radius);
  position: relative;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  flex: none;
  box-shadow:
    0 0 0 1px var(--photo-border-outer),
    inset 0 0 0 2px var(--photo-border-inner),
    var(--photo-shadow);
}

.route-diagram__line {
  position: absolute;
  left: 23px;
  top: 32px;
  bottom: 32px;
  width: 2px;
  background: rgba(10, 10, 10, 0.22);
  z-index: 1;
}

.route-diagram__stop {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: #0A0A0A;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 2;
}

.route-diagram__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0A0A0A;
  flex: none;
  box-shadow: 0 0 0 3px #F4F7F2;
}

.route-diagram__stop--start .route-diagram__dot,
.route-diagram__stop--end .route-diagram__dot {
  background: var(--metro-b);
  width: 12px;
  height: 12px;
}

/* ────────────── Brain pill (Cicero's voice, sits above a card in a cluster) ──────────────
 * Minimal v1: mascot placeholder (terracotta gradient circle with a subtle white eye-dot)
 * + speech text. Max width matches the card (334px). Gently pulses "alive" via the eye.
 */

.brain-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #FFFFFF;
  border-radius: 999px;
  padding: 8px 18px 8px 8px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 2px 10px rgba(0, 0, 0, 0.05);
  max-width: 334px;
  min-height: 44px;
  box-sizing: border-box;
}

.brain-pill__mascot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #E08450, #C4663C);
  flex: none;
  position: relative;
}

.brain-pill__mascot::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
  animation: brain-blink 4s infinite;
}

@keyframes brain-blink {
  0%, 92%, 100% { opacity: 1; transform: scaleY(1); }
  95%           { opacity: 0.2; transform: scaleY(0.2); }
}

.brain-pill__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #0A0A0A;
}

/* Cluster: wraps a brain pill + card as a single unit in the showcase grid */
.cluster {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* ────────────── Metro line dot (used in chip) ────────────── */

.metro-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  margin-right: 2px;
}

.metro-dot--a { background: var(--metro-a); }
.metro-dot--b { background: var(--metro-b); }
.metro-dot--c { background: var(--metro-c); }

/* ────────────── Focused Place (dashed frame) ────────────── */
/* Unified treatment for "this place needs your attention right now."
 * Two semantic triggers (same visual):
 *   (a) chose it as Next Up          → combine with .place-card--next-up for pulse
 *   (b) plus-pinned when far, now near (resurfacing) → dashed frame alone
 * Frame = dashed outer rectangle, offset 10px from the photo edge.
 * Golden rule: outer radius (42) = photo radius (32) + offset (10).
 */

.place-card--focused {
  position: relative;
}

.place-card--focused::before {
  content: '';
  position: absolute;
  inset: -10px;
  border: 2px dashed var(--nextup-frame);
  border-radius: 42px;
  pointer-events: none;
  z-index: 0;
}

/* ────────────── Next Up · Single (Focused + pulsing CTA) ────────────── */
/* Modifier layered on top of .place-card--focused. Adds a pulse ring
 * around the primary play/plus button so the "about to commit" rhythm
 * distinguishes this trigger from plain resurfacing. */

.place-card--next-up .icon-btn--filled::after {
  content: '';
  position: absolute;
  inset: var(--btn-inset);
  border-radius: 50%;
  pointer-events: none;
  animation: nextup-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  z-index: 0;
}

@keyframes nextup-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(10, 10, 10, 0.4);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(10, 10, 10, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(10, 10, 10, 0);
  }
}

/* ────────────── Next Up · Selector (3-option picker) ────────────── */

.next-up-selector {
  width: var(--card-w);
  background: #FFFFFF;
  border: var(--nextup-frame-width) dashed var(--nextup-frame);
  border-radius: var(--nextup-frame-radius);
  /* Apple-style continuous corner smoothing (100%). Modern browsers honor
   * corner-shape; others fall back gracefully to plain rounded corners. */
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  padding: 16px 18px 19px 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  box-sizing: border-box;
}

.next-up-selector__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 19px;
  color: var(--suggested-label);
  margin: 0;
  padding-left: 4px;
}

.next-up-selector__options {
  display: flex;
  gap: 8px;
  height: 150px;                        /* was 135 — "a little bit higher" */
  width: 100%;
}

.next-up-option {
  flex: 1;
  height: 100%;
  background: var(--tile-bg);
  border: none;
  border-radius: var(--tile-radius);
  /* Squircle corners — matches outer selector */
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  padding: 11px;                         /* equal on all sides (was 11/11/18) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease, box-shadow 160ms ease;
  font-family: var(--font-body);
  box-shadow: inset 0 0 0 0 transparent;
}

.next-up-option:hover {
  background: #EEF0F6;
}

.next-up-option:active {
  transform: scale(0.97);
}

.next-up-option--selected {
  background: var(--tile-bg-selected);
  box-shadow: inset 0 0 0 1.5px var(--tile-border-selected);
}

.next-up-option__emoji {
  font-size: 23px;
  line-height: 1;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.next-up-option__title {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.15;
  color: var(--tile-ink);
  text-align: center;
  margin: 0;
  width: 100%;
}

.next-up-option__min {
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  color: var(--tile-min-ink);
  text-align: center;
  margin: 0;
  width: 100%;
}