/* ==========================================================
   SMP BOARD — departures board + boarding pass (shared module)
   v2 · 2026-09-30 · Cologne page + homepage · pairs with
   assets/js/smp-board.js
   Loaded on /locations/cologne/ and on the front page (functions.php).
   One look for both: the Cologne rules are scoped to
   :is(.smp-cityboard,.smp-homeboard) (the homepage wraps its board in
   .smp-homeboard; same specificity, so Cologne renders as before).
   Page-shell rules from the preview (WordPress buttons, city cards,
   carousels) only apply off the front page: :where(body:not(.home)).
   Homepage-only differences: the HOMEPAGE MODE block at the end.

   Built from:
   1. home.css 3.5 §05 (the board, the pass, invites, the share card)
      and §14 (the round pause button, scoped to the board)
   2. the Cologne look from the approved preview v2
      (00_HQ/21_COLOGNE/build/boarding-pass-preview/: preview.css,
      arrival.css, v2.css; preview-only chrome removed, classes renamed:
      .smp-cityboard section, .smp-cityboard-* controls, .cb-* states)
   3. production additions at the end
   Motion: html[data-smp-motion=on|off] (set by smp-board.js from
   prefers-reduced-motion).
   ========================================================== */

/* §14 first: the board's own .smp-board__foot rules in §05 must win */
/* ==========================================================
   14. MOTION TOGGLE — pause / play on everything that loops
   (hero video on desktop, photo marquee, vibe clip). home.js
   injects it only while the element actually moves.
   ========================================================== */
.smp-board .smp-motion-toggle {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: rgba(5, 37, 64, .8);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color .2s ease, transform .2s ease;
}

.smp-board .smp-motion-toggle:hover {
  background: rgba(5, 37, 64, .95);
}

.smp-board .smp-motion-toggle:active {
  transform: scale(.94);
  transition-duration: var(--smp-press, 90ms);
}

.smp-board .smp-motion-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
}

.smp-board .smp-motion-toggle [hidden] {
  display: none;
}



/* ==========================================================
   05. DEPARTURES BOARD V3 — the city picker (3.2, 2026-09-28)
   A real split-flap ("Solari") departures board.

   Anatomy of one character (.smp-flap-c, built by home.js):
     top half  (static, the NEXT letter)      ┐ 1px hinge gap between
     bottom half (static, the CURRENT letter) ┘ the halves (--b-gap)
     falling flap (current letter's top)  → folds down 0 → -90°
     rising flap  (next letter's bottom)  → lands   90° → 0°
   Letters run through the drum in order (A, B, C … like the real
   mechanism) and the last flap lands with a small damped bounce.

   Choreography (home.js, one shot when 35 % of the board is visible,
   about 2.5 s): lights warm up → the DEPARTURES sign flips → rows
   cascade top to bottom (day, time, city, then the status) → the
   "next departure" countdown lands → one glass glint passes → still.
   Afterwards only real changes flip: the clock minute, the countdown,
   a status at 19:00 / 23:00. BOARDING rows get a lamp that pulses
   four times and then stays lit (phones: the amber row edge pulses).
   The countdown is always 10 flaps, so it never reshapes the strip.
   3.5 (David's mockup): day/time tile, square photo, status pills in
   SMP colours that turn over once on a change, bigger header tiles,
   no sound, no pin / SPECIAL tag, full-width boarding-pass button.
   The board rests flat: the rotation only exists while a flap falls.
   Reduced motion: final letters at once, no glint, no pill turns,
   no nudge shimmer.
   ========================================================== */
/* 3.5 (David, images 1 + 2): a condensed face for every split-flap
   letter. Barlow Condensed Bold (SIL OFL, assets/fonts/BarlowCondensed-
   OFL.txt), cut to the board's letters (A–Z, 0–9, Ä Ö Ü É, : ° ·) and
   served from the theme: 8.6 KB, no third-party request. */
@font-face {
  font-family: "SMP Board";
  src: url("../fonts/smp-board-condensed-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.smp-board {
  --b-bg: #03121f;
  --b-bezel: #020b14;
  --b-row-hover: #082a47;
  --b-gap: #01070d;          /* the hinge gap between the halves */
  --b-cell-hi: #16405f;      /* top half, upper edge */
  --b-cell-top: #10334f;
  --b-cell-bottom: #0c2b45;
  --b-cell-lo: #09233a;      /* bottom half, lower edge */
  --b-line: rgba(255, 255, 255, .08);
  --b-ink: #f6eed8;          /* warm paper-white — 15.9:1 on --b-bg */
  --b-muted: #b8c5d3;        /* 10.6:1 */
  --b-amber: #ffc43d;        /* 11.7:1 */
  --b-teal: #6fe0e8;         /* 12:1 */
  --b-red: #ff8a95;          /* 8.3:1 */
  --b-orange: #ffa05c;       /* 9.3:1 */
  --b-art: calc(var(--u, 12px) * 6.6); /* city photo (square) = day/time card height = the text block */
  --b-city-fs: 17px;         /* plain text (no JS) */
  --b-venue: #cfd8e3;        /* 3.5: venue line, 13:1 on --b-bg */

  position: relative;
  isolation: isolate;
  container-type: inline-size; /* 3.5: the header tiles size to the board */
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px 10px 8px;
  overflow: hidden;
  overflow: clip; /* 3.3: not a scroll container — focusing a form field can't shift the board sideways */
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(255, 196, 61, .07), transparent 60%),
    var(--b-bg);
  color: var(--b-ink);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 20px;
  box-shadow:
    0 30px 70px rgba(5, 37, 64, .32),
    0 2px 0 rgba(255, 255, 255, .04) inset,
    0 0 0 6px var(--b-bezel);
  font-variant-numeric: tabular-nums;
  text-align: left;
}

/* lights warm up when the board switches on */
.smp-board::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(90% 50% at 20% 0%, rgba(255, 196, 61, .10), transparent 65%);
  opacity: 0;
  transition: opacity .8s ease;
  pointer-events: none;
}

.smp-board.is-on::before,
.smp-board:not(.is-armed)::before {
  opacity: 1;
}

/* one glass glint after the last flap lands */
.smp-board::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  width: 40%;
  z-index: 3;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(255, 255, 255, .035) 40%,
    rgba(255, 255, 255, .09) 50%,
    rgba(255, 255, 255, .035) 60%,
    transparent 100%);
  opacity: 0;
  pointer-events: none;
}

.smp-board.is-lit::after {
  animation: smp-board-glint 1.15s cubic-bezier(.45, 0, .2, 1) forwards;
}

@keyframes smp-board-glint {
  0%   { transform: translateX(0);    opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(400%); opacity: 0; }
}

/* ---------- header: sign · clock (3.5: bigger tiles, no sound) ----------
   The DEPARTURES tiles grow with the board (container units): about
   19 px a tile at 390 px, 15 px at 320, the mockup's 24 px from about
   480 px. The clock is one step smaller, so the sign leads. */
.smp-board__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 8px 12px;
  --b-tw: clamp(12px, calc((100cqi - 84px) / 14.2), 24px);
}

.smp-board__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--b-amber);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.smp-board__plane {
  flex: 0 0 auto;
  width: calc(var(--b-tw) + 4px);
  height: calc(var(--b-tw) + 4px);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(45deg); /* nose to the upper right: a departure (icon, not a tilted element) */
  filter: drop-shadow(0 0 6px rgba(255, 196, 61, .35));
}

.smp-board__meta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
  color: var(--b-muted);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.smp-board__week {
  display: none; /* 3.5: the mockup's header is sign + clock only */
}

.smp-board__clock {
  color: var(--b-ink);
  font-size: 15px;
}

.smp-board__clock[hidden] {
  display: none;
}

/* ---------- the strip (3.5): YOUR CITY Hamburg │ BOARDING TOMORROW ----------
   Two groups. When they don't fit one line the second wraps under the
   first and the divider goes (home.js sets .is-wrapped). */
.smp-board__next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin: 0 0 6px !important;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  color: var(--b-muted);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.25;
}

.smp-board__next[hidden] {
  display: none;
}

.smp-board__next-mine,
.smp-board__next-go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.smp-board__next-mine {
  flex: 1 1 auto;
}

.smp-board__next-go {
  flex: 0 0 auto;
  position: relative;
}

.smp-board__next:not(.is-wrapped) .smp-board__next-go {
  padding-left: 14px;
}

.smp-board__next:not(.is-wrapped) .smp-board__next-go::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: rgba(255, 255, 255, .16);
}

.smp-board__next-label,
.smp-board__next-board {
  flex: 0 0 auto;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.smp-board__next-label {
  color: var(--b-amber);
}

.smp-board__next-board {
  color: var(--b-muted);
}

.smp-board__next-where {
  min-width: 0;
  color: var(--b-ink);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.15;
}

/* first visit: "Tap yours below" is an instruction, not a name */
.smp-board__next.is-nudge .smp-board__next-where {
  color: var(--b-teal);
  font-size: .9375rem;
  font-weight: 700;
}

.smp-board__next-when {
  flex: 0 0 auto;
  color: var(--b-amber);
  font-size: 13px;
}

.smp-board__next.is-boarding .smp-board__next-board {
  color: var(--b-amber);
}

.smp-board__next.is-boarding .smp-board__next-board::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: .45rem;
  vertical-align: 1px;
  border-radius: 50%;
  background: var(--b-amber);
  box-shadow: 0 0 8px rgba(255, 196, 61, .8);
}

.smp-board__cols {
  display: none; /* desktop only (≥ 1024 px) */
}

.smp-board__rows {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.smp-board__row {
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
}

.smp-board__row + .smp-board__row {
  border-top: 1px solid var(--b-line);
}

/* ---------- the row (3.5 round 3, David) ----------
   One line on every screen: day/time tiles │ photo │ city over venue │
   status tiles, always on the right. Everything is sized from ONE unit
   (--u, the width of a city tile) that follows the board's width, so
   when space runs out the whole row shrinks together instead of
   wrapping. Phones (< 600 px): no calendar button. Desktop (≥ 1024 px):
   the column heads Departs · Destination · Gate · Remarks, the venue
   in its own column. */
.smp-board {
  /* one row = day/time 5.5 (tiles + card) · photo 6.6 · city 10 tiles × 1.55 · arrow
     1.3 · gaps 2.8 units + ~30 px of paddings and tile gaps. The status
     sits under the venue, right, so city and venue get the full width. */
  --u: clamp(7.5px, calc((100cqi - 30px) / 31.7), 16px);
}

.smp-board__link {
  position: relative;
  display: grid;
  grid-template-columns: auto var(--b-art) minmax(0, 1fr) auto;
  grid-template-areas:
    "when art dest   go"
    "when art gate   go"
    "when art remark go";
  align-content: center;
  column-gap: calc(var(--u) * .8);
  row-gap: calc(var(--u) * .3);
  align-items: center;
  min-height: calc(var(--u) * 6.4);
  padding: calc(var(--u) * .8) 6px;
  border-radius: 14px;
  color: var(--b-ink) !important;
  text-decoration: none !important;
  transition:
    background-color .25s ease,
    box-shadow .25s ease,
    transform .2s ease;
}

.smp-board__link:hover {
  background-color: var(--b-row-hover);
}

.smp-board__link:active {
  transform: translateY(1px);
  transition-duration: var(--smp-press, 90ms);
}

.smp-board__link:focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: -3px;
}

/* ---------- urgency ladder (3.3, pills since 3.5) ----------
   BOARDING  orange pill (blinks, JS) + amber glow + edge light
   TONIGHT   orange outline pill + amber tint + amber edge, steady
   TOMORROW  teal pill
   ON TIME   quiet slate outline
   Only BOARDING moves, so the blink keeps its meaning. */
.smp-board__row[data-state="tonight"] .smp-board__link {
  background-image: linear-gradient(90deg, rgba(255, 196, 61, .12), rgba(255, 196, 61, .035) 55%, rgba(255, 196, 61, 0) 90%);
  box-shadow: inset 3px 0 0 var(--b-amber);
}

.smp-board__row[data-state="boarding"] .smp-board__link {
  background-image: linear-gradient(90deg, rgba(255, 196, 61, .26), rgba(255, 196, 61, .10) 60%, rgba(255, 196, 61, .05));
  box-shadow:
    inset 0 0 0 1px rgba(255, 196, 61, .30),
    0 0 26px rgba(255, 196, 61, .10);
}

/* the edge light of a boarding row (blinks with the pill) */
.smp-board__row[data-state="boarding"] .smp-board__link::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  border-radius: 14px 0 0 14px;
  background: var(--b-amber);
  box-shadow: 0 0 14px 2px rgba(255, 196, 61, .7);
  pointer-events: none;
}

/* ---------- the blink: off-phase (JS toggles .is-blink-off) ---------- */
.smp-board.is-blink-off .smp-board__row[data-state="boarding"] .smp-board__remark {
  opacity: .35;
  box-shadow: none;
}

.smp-board.is-blink-off .smp-board__next.is-boarding .smp-board__next-when .smp-flap-c i {
  opacity: .3;
  text-shadow: none;
}

.smp-board.is-blink-off .smp-board__next.is-boarding .smp-board__next-board::before {
  opacity: .2;
  box-shadow: none;
}

.smp-board.is-blink-off .smp-board__row[data-state="boarding"] .smp-board__link::after {
  opacity: .25;
  box-shadow: none;
}

/* day + time: individual flap tiles, stacked, inside one card (3.5
   round 4, David's close-up): lighter upper half, darker lower half,
   a hinge line between; the tiles sit softly inside it */
.smp-board__when {
  grid-area: when;
  align-self: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * .45);
  height: var(--b-art);   /* exactly as tall as the photo */
  padding: 0 calc(var(--u) * .5);
  border-radius: calc(var(--u) * .9);
  background: linear-gradient(180deg, #163a5e 0%, #12304f 49.6%, #0d253e 50.4%, #0a1f35 100%);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255, 255, 255, .07),
    inset 0 0 0 1px rgba(255, 255, 255, .05);
}

.smp-board__when::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - .5px);
  height: 1px;
  background: rgba(0, 0, 0, .5);
  pointer-events: none;
}

.smp-board__when .smp-flap-c {
  --b-cell-hi: rgba(255, 255, 255, .07);
  --b-cell-top: rgba(255, 255, 255, .04);
  --b-cell-bottom: rgba(0, 0, 0, .12);
  --b-cell-lo: rgba(0, 0, 0, .2);
  background: rgba(0, 0, 0, .35);
  box-shadow: none;
}

.smp-board__dest {
  grid-area: dest;
  display: flex;
  align-items: center;
  min-width: 0;
}

.smp-board__gate {
  grid-area: gate;
  min-width: 0;
  color: var(--b-venue);
  font-size: clamp(.8125rem, calc(var(--u) * 1.3), 1rem); /* 3.5: shrinks with the row */
  font-weight: 500;    /* David, image 2: lighter, more balanced */
  letter-spacing: .005em;
  line-height: 1.25;
  text-wrap: balance;  /* a long venue breaks evenly, no one-word last line */
}

/* Bonn until 1 Nov: "· New route" in the venue line (no badge) */
.smp-board__new {
  color: var(--b-teal);
  font-weight: 700;
  white-space: nowrap; /* "· New route" moves to line 2 as a whole */
}

.smp-board__note {
  display: block;
  margin-top: 2px;
  color: var(--b-red);
  font-weight: 700;
}

.smp-board__art {
  grid-area: art;
  align-self: center;
  width: var(--b-art);
  height: var(--b-art);
  object-fit: cover;
  border-radius: calc(var(--u) * .9);
  background: var(--b-cell-bottom);
  display: block;
  margin: 0 !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1);
}

.smp-board__art--special {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #d72638, var(--smp-orange-text, #c94600));
}

.smp-board__art--special svg {
  width: 56%;
  height: 56%;
  fill: #fff;
}

/* the row arrow (3.5 round 4, David): a navigation cue, not decoration */
.smp-board__go {
  grid-area: go;
  align-self: center;
  display: inline-flex;
  width: calc(var(--u) * 1.3);
  min-width: 12px;
  color: var(--b-muted);
  transition: color .2s ease, transform .2s ease;
}

.smp-board__go svg {
  width: 100%;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.smp-board__link:hover .smp-board__go,
.smp-board__link:focus-visible .smp-board__go {
  color: var(--b-amber);
  transform: translateX(3px);
}

/* ---------- the status (3.5 round 3): colour-coded flap tiles ----------
   One tile per letter, right-aligned (round 5: no blank filler tiles); the letters rattle to the new word (e.g. ON TIME → BOARDING at
   19:00). The tiles take the state's colour (SMP palette, word always
   shown). Contrast: navy on teal 6.0:1, navy on orange 5.1:1, white on
   red 5.0:1; the dark-tile states ≥ 8:1. */
.smp-board__remark {
  grid-area: remark;
  justify-self: end; /* always on the right */
  align-self: center;
  color: var(--b-muted);
}

.smp-board__remark.is-flapped {
  padding: 1.5px;
  border-radius: 5px;
  background: rgba(0, 0, 0, .35);
}

.smp-board__remark[data-pill="boarding"] {
  --b-cell-hi: #ff7a33;
  --b-cell-top: #ff6412;
  --b-cell-bottom: #f25500;
  --b-cell-lo: #d94c00;
  color: #052540;
}

.smp-board__remark[data-pill="tonight"] {
  color: var(--b-orange);
  box-shadow: inset 0 0 0 1.5px rgba(255, 160, 92, .8);
}

.smp-board__remark[data-pill="tomorrow"] {
  --b-cell-hi: #1ac3cf;
  --b-cell-top: #00b0bc;
  --b-cell-bottom: #00a2ad;
  --b-cell-lo: #00929c;
  color: #052540;
}

.smp-board__remark[data-pill="ontime"] {
  color: #d8e1ea;
}

.smp-board__remark[data-pill="tickets"] {
  --b-cell-hi: #e2404f;
  --b-cell-top: #d72638;
  --b-cell-bottom: #c81f30;
  --b-cell-lo: #b51b2b;
  color: #fff;
}

.smp-board__remark[data-pill="soon"] {
  color: var(--b-red);
  box-shadow: inset 0 0 0 1.5px rgba(255, 138, 149, .75);
}

.smp-board__remark[data-pill="paused"] {
  --b-cell-hi: #2b3c4d;
  --b-cell-top: #263545;
  --b-cell-bottom: #22303f;
  --b-cell-lo: #1d2935;
  color: var(--b-muted);
}

.smp-board__remark[data-pill="boarding"] .smp-flap-c,
.smp-board__remark[data-pill="tomorrow"] .smp-flap-c,
.smp-board__remark[data-pill="tickets"] .smp-flap-c {
  box-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}

.smp-board__remark[data-pill="boarding"] {
  filter: drop-shadow(0 0 10px rgba(255, 89, 0, .45));
}

/* without JS: a plain outlined word */
.smp-board__remark:not(.is-flapped) {
  padding: 3px 10px;
  border: 1.5px solid rgba(184, 197, 211, .45);
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- first visit: one soft shimmer down the city rows (T7.3b) ---------- */
.smp-board__link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent 20%, rgba(111, 224, 232, .16) 50%, transparent 80%);
  background-size: 250% 100%;
  background-position: 120% 0;
  opacity: 0;
  pointer-events: none;
}

.smp-board__rows.is-nudging .smp-board__row[data-smp-city] .smp-board__link::before {
  animation: smp-board-nudge 1.1s ease-in-out both;
}

.smp-board__rows.is-nudging .smp-board__row[data-smp-city]:nth-child(2) .smp-board__link::before { animation-delay: .16s; }
.smp-board__rows.is-nudging .smp-board__row[data-smp-city]:nth-child(3) .smp-board__link::before { animation-delay: .32s; }
.smp-board__rows.is-nudging .smp-board__row[data-smp-city]:nth-child(4) .smp-board__link::before { animation-delay: .48s; }
.smp-board__rows.is-nudging .smp-board__row[data-smp-city]:nth-child(5) .smp-board__link::before { animation-delay: .64s; }

@keyframes smp-board-nudge {
  0%   { opacity: 0; background-position: 120% 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; background-position: -20% 0; }
}

/* ---------- flap fields: plain text (no JS) and cells (JS) ---------- */
.smp-board [data-smp-flap] {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  text-transform: uppercase;
  font-family: "SMP Board", "Barlow Condensed", "Roboto Condensed", "Arial Narrow", var(--smp-font, "Rubik"), sans-serif;
  font-weight: 700;
  line-height: 1;
}

.smp-board__city {
  flex: 0 0 auto;
  color: #fff;
  font-size: var(--b-city-fs);
  letter-spacing: .06em;
}

.smp-board__day {
  color: #fff;
  font-size: 18px; /* plain text (no JS); the cells size themselves */
  letter-spacing: .08em;
}

.smp-board__time,
.smp-board__title-text,
.smp-board__next-when {
  color: var(--b-amber);
}

.smp-board__time {
  font-size: 20px;
  letter-spacing: .02em;
}

/* amber letters are back-lit */
.smp-board__time .smp-flap-c i,
.smp-board__title-text .smp-flap-c i,
.smp-board__next-when .smp-flap-c i {
  text-shadow: 0 0 6px rgba(255, 196, 61, .45);
}

/* ---------- the split-flap cell ---------- */
.smp-board .is-flapped {
  gap: 1px;
  letter-spacing: 0;
}

.smp-flap-c {
  position: relative;
  flex: 0 0 auto;
  display: inline-block;
  width: var(--fw, 12px);
  height: var(--fh, 18px);
  border-radius: 3px;
  background: var(--b-gap);
  perspective: calc(var(--fh, 18px) * 5);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .25);
}

.smp-flap-c > span {
  position: absolute;
  left: 0;
  right: 0;
  height: calc(50% - .5px);
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.smp-flap-c__top,
.smp-flap-c__ftop {
  top: 0;
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, var(--b-cell-hi), var(--b-cell-top));
  transform-origin: 50% 100%;
}

.smp-flap-c__bot,
.smp-flap-c__fbot {
  bottom: 0;
  border-radius: 1px 1px 3px 3px;
  background: linear-gradient(180deg, var(--b-cell-bottom), var(--b-cell-lo));
  transform-origin: 50% 0;
}

.smp-flap-c > span > i {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--fh, 18px);
  line-height: var(--fh, 18px);
  font-style: normal;
  text-align: center;
}

.smp-flap-c__top > i,
.smp-flap-c__ftop > i {
  top: 0;
}

.smp-flap-c__bot > i,
.smp-flap-c__fbot > i {
  top: calc(var(--fh, 18px) / -2 - .5px);
}

/* the moving flaps exist only while a letter changes */
.smp-flap-c__ftop,
.smp-flap-c__fbot {
  z-index: 2;
  visibility: hidden;
}

.smp-flap-c__ftop::after,
.smp-flap-c__fbot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
}

.smp-flap-c.is-f1 > span.smp-flap-c__ftop,
.smp-flap-c.is-f2 > span.smp-flap-c__ftop,
.smp-flap-c.is-f1 > span.smp-flap-c__fbot,
.smp-flap-c.is-f2 > span.smp-flap-c__fbot {
  visibility: visible;
}

/* two identical keyframe sets (…1 / …2) so every flip restarts;
   .is-land swaps the lower flap for the bounce */
.smp-flap-c.is-f1 .smp-flap-c__ftop { animation: smp-flap-top-1 var(--fd, 58ms) linear forwards; }
.smp-flap-c.is-f2 .smp-flap-c__ftop { animation: smp-flap-top-2 var(--fd, 58ms) linear forwards; }
.smp-flap-c.is-f1 .smp-flap-c__fbot { animation: smp-flap-bot-1 var(--fd, 58ms) linear forwards; }
.smp-flap-c.is-f2 .smp-flap-c__fbot { animation: smp-flap-bot-2 var(--fd, 58ms) linear forwards; }
.smp-flap-c.is-f1.is-land .smp-flap-c__fbot { animation-name: smp-flap-land-1; }
.smp-flap-c.is-f2.is-land .smp-flap-c__fbot { animation-name: smp-flap-land-2; }

.smp-flap-c.is-f1 .smp-flap-c__ftop::after { animation: smp-flap-shade-top-1 var(--fd, 58ms) linear forwards; }
.smp-flap-c.is-f2 .smp-flap-c__ftop::after { animation: smp-flap-shade-top-2 var(--fd, 58ms) linear forwards; }
.smp-flap-c.is-f1 .smp-flap-c__fbot::after { animation: smp-flap-shade-bot-1 var(--fd, 58ms) linear forwards; }
.smp-flap-c.is-f2 .smp-flap-c__fbot::after { animation: smp-flap-shade-bot-2 var(--fd, 58ms) linear forwards; }

/* the upper flap falls in the first half (accelerating, like gravity) */
@keyframes smp-flap-top-1 {
  0%   { transform: rotateX(0deg); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  50%, 100% { transform: rotateX(-90deg); }
}
@keyframes smp-flap-top-2 {
  0%   { transform: rotateX(0deg); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  50%, 100% { transform: rotateX(-90deg); }
}

/* the lower flap lands in the second half */
@keyframes smp-flap-bot-1 {
  0%, 50% { transform: rotateX(90deg); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  100%    { transform: rotateX(0deg); }
}
@keyframes smp-flap-bot-2 {
  0%, 50% { transform: rotateX(90deg); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  100%    { transform: rotateX(0deg); }
}

/* the last flap of a letter lands with a damped bounce */
@keyframes smp-flap-land-1 {
  0%, 40% { transform: rotateX(90deg); animation-timing-function: cubic-bezier(.3, .6, .5, 1); }
  68%     { transform: rotateX(-16deg); animation-timing-function: ease-in-out; }
  84%     { transform: rotateX(6deg); animation-timing-function: ease-in-out; }
  100%    { transform: rotateX(0deg); }
}
@keyframes smp-flap-land-2 {
  0%, 40% { transform: rotateX(90deg); animation-timing-function: cubic-bezier(.3, .6, .5, 1); }
  68%     { transform: rotateX(-16deg); animation-timing-function: ease-in-out; }
  84%     { transform: rotateX(6deg); animation-timing-function: ease-in-out; }
  100%    { transform: rotateX(0deg); }
}

/* light: a falling flap darkens as it turns away, a landing one brightens */
@keyframes smp-flap-shade-top-1 { 0% { opacity: 0; } 50%, 100% { opacity: .55; } }
@keyframes smp-flap-shade-top-2 { 0% { opacity: 0; } 50%, 100% { opacity: .55; } }
@keyframes smp-flap-shade-bot-1 { 0%, 50% { opacity: .55; } 100% { opacity: 0; } }
@keyframes smp-flap-shade-bot-2 { 0%, 50% { opacity: .55; } 100% { opacity: 0; } }

/* cell sizes per field — all from the row unit --u (3.5 round 3) */
.smp-board__city.is-flapped { --fw: calc(var(--u) * 1.55); --fh: calc(var(--u) * 2.55); }
/* the three day tiles span exactly the width of the time below
   (4 digits + a half-width colon + 4 gaps = 3 day tiles + 2 gaps) */
.smp-board__time.is-flapped { --fw: var(--u); --fh: calc(var(--u) * 2); }
.smp-board__day.is-flapped { --fw: calc(var(--u) * 1.5 + .67px); --fh: calc(var(--u) * 1.8); }
.smp-board__remark.is-flapped { --fw: clamp(11px, calc(var(--u) * 1.05), 14px); --fh: clamp(20px, calc(var(--u) * 1.9), 25px); }

/* HH:MM — the colon tile is half as wide (time + clock) */
.smp-board__time.is-flapped > .smp-flap-c:nth-child(3),
.smp-board__clock.is-flapped > .smp-flap-c:nth-child(3) {
  width: calc(var(--fw) * .5);
}
.smp-board__title-text.is-flapped { --fw: var(--b-tw); --fh: calc(var(--b-tw) * 1.45); }
.smp-board__clock.is-flapped { --fw: calc(var(--b-tw) * .8); --fh: calc(var(--b-tw) * 1.25); }
.smp-board__next-when.is-flapped { --fw: 11px; --fh: 21px; }

/* David, image 2: the condensed letters fill their tiles */
.smp-board [data-smp-flap].is-flapped { font-size: calc(var(--fh, 18px) * .74); }

/* rows glide when the order changes (a city moves to next week) */
.smp-board__row.is-moving {
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}

/* ---------- calendar, footer, boarding pass (3.3; 3.5 layout) ---------- */

/* your city: 3.5 — no pin; the strip names it and its row is first */

/* add to calendar: one 44 px button per row, beside the link (never
   inside it), centred on the row */
.smp-board__cal {
  position: absolute;
  z-index: 2;
  top: calc(50% - 22px);
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  color: var(--b-ink);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.smp-board__cal:hover {
  color: var(--b-ink);
  border-color: rgba(255, 255, 255, .42);
  background: rgba(255, 255, 255, .08);
}

.smp-board__cal:active {
  transform: scale(.94);
  transition-duration: var(--smp-press, 90ms);
}

.smp-board__cal:focus-visible,
.smp-board__pass-btn:focus-visible,
.smp-pass-btn:focus-visible,
.smp-board__foot .smp-motion-toggle:focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 2px;
}

.smp-board__cal.is-done {
  color: #052540;
  border-color: var(--b-amber);
  background: var(--b-amber);
}

.smp-board__cal [data-icon],
.smp-board__cal svg {
  display: block;
  width: 22px;
  height: 22px;
}

.smp-board__cal svg,
.smp-board__pass-btn svg,
.smp-pass-btn svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.smp-board__row[data-state="tonight"] .smp-board__cal,
.smp-board__row[data-state="boarding"] .smp-board__cal {
  color: var(--b-amber);
  border-color: rgba(255, 196, 61, .45);
}

/* the footer (3.5, T7.6): the pass button full width, "(Optional)"
   under it, both centred; the blink pause button (WCAG 2.2.2) sits
   under them while something blinks */
.smp-board__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 14px 4px 6px;
  border-top: 1px solid var(--b-line);
}

.smp-board__pass-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 0 18px;
  border: 1.5px solid rgba(255, 196, 61, .7);
  border-radius: 16px;
  background: rgba(255, 196, 61, .07);
  color: var(--b-amber);
  font: inherit;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}

.smp-board__pass-btn:hover {
  background: rgba(255, 196, 61, .15);
  transform: translateY(-1px);
}

.smp-board__pass-btn:active {
  transform: translateY(0) scale(.98);
  transition-duration: var(--smp-press, 90ms);
}

.smp-board__pass-btn[aria-expanded="true"] {
  background: rgba(255, 196, 61, .18);
}

.smp-board__pass-btn svg {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
}

.smp-board__pass-optional {
  margin: 0 !important;
  color: var(--b-muted);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

.smp-board__foot .smp-motion-toggle {
  position: static;
  flex: 0 0 auto;
  box-shadow: none;
}

.smp-board__foot .smp-motion-toggle[hidden] {
  display: none;
}

/* ---------- the printer: form → slot → the pass ---------- */
.smp-board__printer {
  padding: 6px 6px 10px;
}

.smp-board__printer[hidden] {
  display: none;
}

/* 3.4: one calm column for the form, the passes and their buttons */
.smp-board__printer > * {
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.smp-pass-form {
  display: grid;
  gap: 14px;
  padding: 16px 14px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

.smp-pass-form[hidden] {
  display: none;
}

.smp-pass-form__title {
  margin: 0 !important;
  color: var(--b-ink);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.2;
}

/* 3.5 (T7.6 / review #3): what the pass is for, before the name */
.smp-pass-form__intro {
  margin: -4px 0 0 !important;
  max-width: 46ch;
  color: var(--b-muted);
  font-size: .9375rem;
  line-height: 1.45;
}

.smp-pass-form__grid {
  display: grid;
  gap: 12px;
}

.smp-pass-field {
  display: grid;
  gap: 6px;
  margin: 0;
}

.smp-pass-field__label {
  padding: 0;
  color: var(--b-muted);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.smp-pass-field__label em {
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.smp-pass-field__input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 12px;
  background: #0a2236;
  color: var(--b-ink);
  font: inherit;
  font-size: 16px; /* no zoom-on-focus on iPhone */
  font-weight: 600;
}

.smp-pass-field__input::placeholder {
  color: #8f9fb1;
}

.smp-pass-field__input:focus {
  border-color: var(--b-amber);
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.smp-pass-field__input[aria-invalid="true"] {
  border-color: var(--b-red);
}

.smp-pass-cities {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.smp-pass-cities legend {
  margin-bottom: 8px;
}

.smp-pass-cities__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.smp-pass-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  color: var(--b-ink);
  font-size: .9375rem;
  font-weight: 700;
  cursor: pointer;
}

.smp-pass-chip input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.smp-pass-chip:has(input:checked) {
  border-color: var(--b-amber);
  background: var(--b-amber);
  color: #052540;
}

.smp-pass-chip:has(input:focus-visible) {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.smp-pass-form__error {
  margin: 0 !important;
  color: var(--b-red);
  font-size: .9375rem;
  font-weight: 700;
}

.smp-pass-form__error[hidden] {
  display: none;
}

.smp-pass-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.smp-pass-form__note {
  margin: 0 !important;
  color: var(--b-muted);
  font-size: .8125rem;
}

.smp-pass-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 13px;
  font: inherit;
  font-size: .9375rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}

.smp-pass-btn:hover {
  transform: translateY(-1px);
}

.smp-pass-btn:active {
  transform: translateY(0) scale(.98);
  transition-duration: var(--smp-press, 90ms);
}

.smp-pass-btn[disabled] {
  opacity: .6;
  cursor: progress;
}

.smp-pass-btn svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.smp-pass-btn--primary {
  background: var(--b-amber);
  color: #052540;
}

.smp-pass-btn--line {
  border-color: rgba(255, 255, 255, .28);
  background: transparent;
  color: var(--b-ink);
}

.smp-pass-btn--text {
  padding: 0 8px;
  background: transparent;
  color: var(--b-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* the slot the paper comes out of */
.smp-pass-slot {
  height: 8px;
  margin: 2px 4% 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #000, #0b2238);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .06);
}

/* paper feed: the bottom of the pass shows first, the head comes last */
.smp-pass-feed {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  margin: -4px 6% 14px;
  padding: 0 0 18px;
}

.smp-pass-feed.is-out {
  overflow: visible;
}

/* ---------- the pass (paper) ---------- */
.smp-pass {
  flex: 0 0 auto;
  font-variant-numeric: normal; /* the board's tabular digits widen ( ) in Rubik */
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 0 0 16px 16px;
  background: #fcfaf1;
  color: #052540;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .45);
  text-align: left;
}

.smp-pass:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.smp-pass__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2px 10px;
  padding: 14px 18px;
  background: #052540;
  color: #fff;
}

.smp-pass__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .9375rem;
  font-weight: 800;
  white-space: nowrap;
}

.smp-pass__brand svg,
.smp-pass__route-line svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.smp-pass__brand svg {
  color: var(--b-amber);
}

.smp-pass__kind {
  color: var(--b-amber);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.smp-pass__body {
  display: grid;
  gap: 14px;
  padding: 18px 18px 16px;
}

.smp-pass__f {
  display: grid;
  gap: 2px;
  min-width: 0;
  margin: 0 !important;
}

.smp-pass__f span {
  color: #5b6679;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.smp-pass__f b {
  overflow-wrap: anywhere;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.2;
}

.smp-pass__f--name b {
  font-size: 1.5rem;
  font-size: min(1.75rem, 9cqi); /* a long name shrinks instead of breaking */
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* FROM / TO: stacked on a phone-width pass, side by side with the
   plane between them once the pass is wide enough (container query) */
.smp-pass {
  container-type: inline-size;
}

.smp-pass__route {
  display: grid;
  gap: 14px;
}

.smp-pass__route b {
  overflow-wrap: normal;
  font-size: 1.25rem;
  font-size: min(1.375rem, 8cqi);
  text-transform: uppercase;
}

.smp-pass__route-line {
  display: none;
  padding-bottom: 5px;
  color: #0b7680;
}

@container (min-width: 380px) {
  .smp-pass__route {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: 10px;
  }

  .smp-pass__route-line {
    display: inline-flex;
  }

  .smp-pass__f--to {
    text-align: right;
  }
}

.smp-pass__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.smp-pass__pair b {
  text-transform: uppercase;
}

.smp-pass__stub {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 16px 18px 18px;
  border-top: 2px dashed rgba(5, 37, 64, .22);
}

/* the tear notches */
.smp-pass__stub::before,
.smp-pass__stub::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--b-bg);
}

.smp-pass__stub::before {
  left: -9px;
}

.smp-pass__stub::after {
  right: -9px;
}

.smp-pass__bars {
  display: flex;
  gap: 2px;
  height: 38px;
}

.smp-pass__bars i {
  display: block;
  height: 100%;
  background: #052540;
}

.smp-pass__note {
  margin: 0 !important;
  color: #3d4757;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
}

/* ---------- 3.4: after the pass prints ---------- */
.smp-pass-next {
  display: grid;
  gap: 6px;
  padding: 0 4px 4px;
  animation: smp-pass-next-in .35s ease both;
}

@keyframes smp-pass-next-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Rausgegangen's pair: the calendar leads, the invite sits beside it */
.smp-pass-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

/* phones: the pair stays side by side without its icons; below 360 px
   the two buttons stack */
@media (max-width: 419px) {
  .smp-pass-pair .smp-pass-btn {
    padding: 0 8px;
    font-size: .875rem;
  }

  .smp-pass-pair .smp-pass-btn svg {
    display: none;
  }
}

@media (max-width: 359px) {
  .smp-pass-pair {
    grid-template-columns: 1fr;
  }
}

.smp-pass-pair .smp-pass-btn {
  width: 100%;
  padding: 0 12px;
}

.smp-pass-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
}

.smp-pass-btn--tint {
  border-color: rgba(255, 196, 61, .45);
  background: rgba(255, 196, 61, .14);
  color: var(--b-amber);
}

.smp-pass-btn--tint:hover {
  background: rgba(255, 196, 61, .22);
}

.smp-pass-btn--wide {
  width: 100%;
}

/* the "Invitation" tag on a friend's pass */
.smp-pass__invite {
  justify-self: start;
  margin-top: -8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--b-amber);
  color: #052540;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---------- 3.4: invite a friend ---------- */
.smp-pass-invite {
  display: grid;
  gap: 8px;
  padding: 0 4px 4px;
}

.smp-pass-invite > [hidden],
.smp-pass-tab__body[hidden] {
  display: none;
}

.smp-pass-count {
  margin: 6px 4px 0 !important;
  color: var(--b-amber);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.smp-pass-invite__guests {
  display: grid;
  gap: 8px;
}

.smp-pass-invite__guests:empty,
.smp-pass-invite__stage:empty {
  display: none;
}

.smp-pass-invite__done {
  display: grid;
  gap: 6px;
  margin-top: 4px;
}

/* a printed pass folded to one line */
.smp-pass-tabwrap {
  display: grid;
  gap: 8px;
}

.smp-pass-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 60px;
  padding: 6px 8px 6px 4px;
  border-radius: 13px;
  background: #fcfaf1;
  color: #052540;
}

.smp-pass-tab--own {
  background: rgba(252, 250, 241, .08);
  color: var(--b-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}

.smp-pass-tab__main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 48px;
  padding: 0 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.smp-pass-tab__main > svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #0b7680;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.smp-pass-tab--own .smp-pass-tab__main > svg {
  stroke: var(--b-amber);
}

.smp-pass-tab__text {
  display: grid;
  min-width: 0;
}

.smp-pass-tab__text b {
  overflow: hidden;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smp-pass-tab__text small {
  overflow: hidden;
  color: #5b6679;
  font-size: .8125rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smp-pass-tab--own .smp-pass-tab__text small {
  color: var(--b-muted);
}

.smp-pass-tab__send {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 13px;
  background: var(--b-amber);
  color: #052540;
  font: inherit;
  font-size: .9375rem;
  font-weight: 800;
  cursor: pointer;
}

.smp-pass-tab__send svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.smp-pass-tab--own .smp-pass-tab__send {
  border: 1px solid rgba(255, 196, 61, .45);
  background: rgba(255, 196, 61, .14);
  color: var(--b-amber);
}

.smp-pass-tab__send.is-sent {
  background: transparent;
  color: #0b7680;
}

.smp-pass-tab__main:focus-visible,
.smp-pass-tab__send:focus-visible,
.smp-pass-stepper__btn:focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 2px;
}

.smp-pass-tab__body .smp-pass {
  margin-bottom: 6px;
}

/* −/+ passengers */
.smp-pass-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.smp-pass-stepper__label {
  color: var(--b-ink);
  font-size: 1rem;
  font-weight: 700;
}

.smp-pass-stepper__ctl {
  display: flex;
  align-items: center;
  gap: 12px;
}

.smp-pass-stepper__btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 13px;
  background: transparent;
  color: var(--b-ink);
  font: inherit;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.smp-pass-stepper__btn:disabled {
  opacity: .35;
  cursor: default;
}

.smp-pass-stepper__n {
  min-width: 24px;
  color: var(--b-ink);
  font-size: 1.375rem;
  font-weight: 800;
  text-align: center;
}

.smp-pass-invite__names {
  display: grid;
  gap: 10px;
}

/* ---------- 3.4: the SMP share card ---------- */
.smp-share {
  width: min(420px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: #fcfaf1;
  color: #052540;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.smp-share::backdrop {
  background: rgba(1, 7, 13, .62);
}

.smp-share__box {
  display: grid;
  gap: 14px;
  padding: 18px 16px 16px;
}

.smp-share__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
}

.smp-share__title {
  margin: 0 !important;
  padding: 0 44px;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}

.smp-share__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #052540;
  cursor: pointer;
}

.smp-share__link {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 48px;
  padding: 0 4px 0 14px;
  border: 1px solid rgba(5, 37, 64, .25);
  border-radius: 12px;
  background: #fff;
}

.smp-share__url {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #3d4757;
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  text-overflow: ellipsis;
}

.smp-share__url:focus {
  outline: none;
}

.smp-share__copy {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #052540;
  cursor: pointer;
}

.smp-share__copy.is-done {
  color: #0b7680;
}

.smp-share__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.smp-share__ch {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid rgba(5, 37, 64, .2);
  border-radius: 13px;
  background: #fff;
  color: #052540;
  font: inherit;
  font-size: .9375rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}

.smp-share__ch:hover {
  border-color: rgba(5, 37, 64, .45);
  background: #fff9ea;
}

.smp-share__ch[hidden] {
  display: none;
}

.smp-share__ch:disabled {
  opacity: .6;
  cursor: progress;
}

.smp-share__close svg,
.smp-share__copy svg,
.smp-share__ch svg {
  display: block;
  width: 22px;
  height: 22px;
  margin: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.smp-share__ch svg {
  flex: 0 0 auto;
  margin: 0;
}

.smp-share__close:focus-visible,
.smp-share__copy:focus-visible,
.smp-share__ch:focus-visible {
  outline: 3px solid #052540 !important;
  outline-offset: 2px;
}

.smp-share__hint {
  margin: -4px 2px 0 !important;
  color: #3d4757;
  font-size: .875rem;
  line-height: 1.4;
}

.smp-share__hint:empty {
  display: none;
}

@media (min-width: 600px) {
  .smp-pass-form__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- 600 px +: the calendar button returns ----------
   The unit now also leaves room for the 44 px button (56 px). */
@media (min-width: 600px) {
  .smp-board {
    --u: clamp(7.5px, calc((100cqi - 86px) / 31.7), 16px);
    --b-art: calc(var(--u) * 6.6);
  }

  .smp-board__link {
    padding-right: 62px; /* the calendar button sits in the last 62px */
  }

  .smp-board__next-when.is-flapped { --fw: 13px; --fh: 24px; }

  .smp-board__next-where {
    font-size: 1.25rem;
  }
}

/* phones: no calendar button (David, 3.5 round 3) — the row needs the
   width; "Add to calendar" stays after printing a boarding pass */
@media (max-width: 599px) {
  .smp-board__cal {
    display: none;
  }
}

/* ---------- desktop: Departs · Destination · Gate · Remarks ---------- */
@media (min-width: 1024px) {
  .smp-board {
    --u: 15px;
    --b-art: 64px;
    padding: 14px 16px 12px;
  }

  .smp-board__head {
    padding: 8px 10px 14px;
  }

  .smp-board__next {
    margin: 0 4px 4px !important;
    padding: 14px 18px;
    font-size: .9rem;
  }

  .smp-board__next-when.is-flapped { --fw: 15px; --fh: 28px; }
  .smp-board__remark.is-flapped { --fw: 15px; --fh: 27px; }

  .smp-board__cols,
  .smp-board__link {
    display: grid;
    grid-template-columns: 96px var(--b-art) minmax(0, 1fr) minmax(11rem, 15rem) 10rem 20px;
    column-gap: 18px;
  }

  .smp-board__cols {
    grid-template-areas: "c-when c-dest c-dest c-gate c-remark .";
    padding: 12px 76px 6px 12px;
    color: var(--b-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
  }

  .smp-board__cols span:nth-child(1) { grid-area: c-when; text-align: center; }
  .smp-board__cols span:nth-child(2) { grid-area: c-dest; }
  .smp-board__cols span:nth-child(3) { grid-area: c-gate; }
  .smp-board__cols span:nth-child(4) { grid-area: c-remark; text-align: right; }

  .smp-board__link {
    grid-template-areas: "when art dest gate remark go";
    min-height: 100px;
    padding: 14px 76px 14px 12px;
  }

  .smp-board__gate {
    font-size: 1rem;
  }

  .smp-board__cal {
    right: 12px;
  }

  .smp-board__pass-btn {
    max-width: 640px;
  }
}

/* very small phones (≤ 359 px): the header and footer one step smaller
   (the rows already shrink with --u) */
@media (max-width: 359px) {
  .smp-board {
    padding: 8px 6px 6px;
  }

  .smp-board__next-when.is-flapped { --fw: 9px; --fh: 18px; }

  .smp-board__next {
    padding: 10px 10px;
  }

  .smp-board__next-where {
    font-size: 1rem;
  }

  .smp-board__pass-btn {
    gap: 8px;
    padding: 0 10px;
    font-size: .9375rem;
  }

  .smp-board__pass-btn svg {
    width: 22px;
    height: 22px;
  }
}

/* reduced motion: letters are simply there, nothing moves */
@media (prefers-reduced-motion: reduce) {
  .smp-board::after,
  .smp-board.is-lit::after {
    animation: none !important;
    display: none;
  }

  .smp-flap-c > span,
  .smp-flap-c > span::after {
    animation: none !important;
  }

  .smp-flap-c__ftop,
  .smp-flap-c__fbot {
    visibility: hidden !important;
  }

  .smp-board__row.is-moving {
    transition: none;
  }

  .smp-board__link:hover .smp-board__go {
    transform: none;
  }

  .smp-board__link::before {
    animation: none !important;
  }

  .smp-pass-next {
    animation: none;
  }

  .smp-board__pass-btn:hover,
  .smp-pass-btn:hover {
    transform: none;
  }
}


/* ---------- Cologne look, from the preview: preview.css ---------- */
:where(body:not(.home)) .smp-ecard__cta--pass{gap:8px!important}
:where(body:not(.home)) .smp-ecard__note--pass{font-size:13px!important;margin-bottom:0!important}
:where(body:not(.home)) .smp-ecard__meetup{display:block;min-height:44px;align-content:center;text-align:center;font-size:13px;font-weight:500;color:#526376;text-underline-offset:4px;margin-top:4px}
.smp-cityboard{padding:80px 5vw 60px;background:radial-gradient(ellipse at 55% 38%,#ebe7db 0,transparent 63%),#f5f2e9!important;border-top:1px solid #e5e0d3}
.smp-cityboard__intro{max-width:680px;margin:0 auto 40px;text-align:center}
.smp-cityboard__eyebrow{color:#876523!important;letter-spacing:.15em;font-size:12px;font-weight:700;margin-bottom:14px}
.smp-cityboard__intro h2{font-size:clamp(32px,4vw,50px)!important;line-height:1.13!important;letter-spacing:-.04em;font-weight:800!important;color:#112b43!important;margin-bottom:16px!important;scroll-margin-top:68px}
.smp-cityboard__intro h2 span{color:#997326}
.smp-cityboard__intro>p:not(.smp-cityboard__eyebrow){font-size:17px;line-height:1.65;color:#4d5b66}
.smp-cityboard__back-link{display:inline-flex;align-items:center;min-height:44px;color:#526376!important;text-underline-offset:4px;font-size:13px;font-weight:500}
.smp-cityboard__machine{max-width:870px;margin:auto}
.smp-cityboard__caption{text-align:center;font-size:13px!important;color:#647078!important;margin:28px 0 0!important}
.smp-board{--b-bg:#091621;--b-bezel:#0b151e;--b-amber:#f4c655;--b-cell-hi:#2a4161;--b-cell-top:#1e3554;--b-cell-bottom:#152c46;--b-cell-lo:#11233a;padding:18px 18px 12px;border-radius:28px;box-shadow:0 20px 50px #132d4026,0 0 0 6px #0b151e}
.smp-board__head{padding:10px 10px 22px}
.smp-board__cols{display:none!important}
.smp-board__next{display:flex;align-items:center;justify-content:space-between;margin:0 4px 10px!important;padding:17px 20px;border-radius:17px;border:1px solid #ffffff0d;background:linear-gradient(105deg,#172a3e,#172238);color:var(--b-ink)}
.smp-board__next-mine{flex-direction:column;align-items:flex-start;gap:3px!important}
.smp-board__next-label{font-size:11px;letter-spacing:.08em;color:var(--b-amber)}
.smp-board__next-where{font-size:23px}
.smp-board__next-go{display:none!important}
.smp-cityboard-change{min-height:44px;padding:8px 18px;color:#edf0f5;border:1px solid #ffffff12;border-radius:25px;background:#ffffff05;font-size:13px;font-weight:500}
.smp-cityboard-change:hover{background:#ffffff12}
.smp-cityboard-change::before{content:'⇄';font-size:22px;line-height:1;vertical-align:-2px;margin-right:9px}
.smp-cityboard-picker{margin:12px 4px 18px;padding:18px;background:#142233;border:1px solid #ffffff17;border-radius:14px}
.smp-cityboard-picker p{font-weight:700;color:#faf3e2;font-size:15px;margin-bottom:12px}
.smp-cityboard-picker div{display:flex;gap:8px;flex-wrap:wrap}
.smp-cityboard-picker button{min-height:44px;border:1px solid #ffffff33;border-radius:24px;padding:10px 16px;color:#faf3e2;background:transparent;font-weight:600}
.smp-cityboard-picker button[aria-pressed=true]{background:var(--b-amber);color:#122942}
.smp-cityboard-picker small{display:block;margin-top:14px;font-size:12px;line-height:1.5;color:#bcc7d4}
.smp-board__row.is-mine .smp-board__link{background:#1b3b552b}
.smp-board__foot{padding-top:22px}
.smp-board__pass-btn{min-height:58px!important;background:var(--b-amber)!important;color:#112942!important;border:0!important;border-radius:17px;font-size:18px!important}
.smp-board__pass-optional{margin:8px 0 0!important;font-size:12px!important;font-weight:400!important;color:#bcc7d4!important}
.smp-board.cb-open .smp-board__foot{display:none}
.smp-board__printer{margin-top:24px}
.smp-pass-form{background:#ffffff04;border:1px solid #ffffff12;padding:24px;border-radius:18px}
.smp-pass-form__title{font-size:24px!important}
.smp-pass-form__intro{font-size:15px!important;font-weight:400!important;line-height:1.6!important}
.smp-cityboard-dest{display:grid;grid-template-columns:1fr;gap:4px;padding:15px 18px;margin:18px 0 22px;background:#192c40;border-left:3px solid var(--b-amber);border-radius:3px 12px 12px 3px}
.smp-cityboard-dest>span{color:#aebdd0;font-size:10px;letter-spacing:.12em;font-weight:700}
.smp-cityboard-dest strong{color:#f8efdb;font-size:20px}
.smp-cityboard-dest small{color:#c4cfdb;font-size:13px;line-height:1.5}
.smp-pass-field__label{font-size:12px!important;letter-spacing:.04em}
.smp-pass-field__input{font-size:16px!important;min-height:54px;border-radius:12px}
.smp-pass-form__note{font-size:12px!important;font-weight:400;line-height:1.5}
.smp-pass-btn{font-size:16px!important;min-height:48px}
.smp-pass-form__actions{margin-top:22px}
.smp-cityboard-ready{color:#f8d16c!important;text-align:center;font-size:15px!important;font-weight:600;margin:0 0 25px!important}
.smp-pass-links{margin-top:5px!important}
.smp-pass-links .smp-pass-btn{font-size:13px!important;color:#aebccc}
.smp-pass-tab__send{font-size:13px!important;min-height:44px}
.smp-share{max-width:calc(100vw - 32px)}
.smp-board .smp-board__cal{border-radius:50%;background:#20334c;border:1px solid #ffffff14}
.smp-board .smp-board__go{display:none!important}
.smp-board .smp-board__link{grid-template-columns:70px 76px minmax(0,1fr) 100px;grid-template-areas:'when art dest remark' 'when art gate remark';column-gap:14px;row-gap:7px;padding:19px 60px 19px 8px;min-height:115px}
.smp-board .smp-board__when{height:auto;background:none;box-shadow:none;padding:0;gap:5px}
.smp-board .smp-board__when::after{display:none}
.smp-board .smp-board__art{width:76px;height:76px;border-radius:11px}
.smp-board .smp-board__city.is-flapped{--fw:15px;--fh:28px}
.smp-board .smp-board__day.is-flapped{--fw:13px;--fh:23px}
.smp-board .smp-board__time.is-flapped{--fw:11px;--fh:24px}
.smp-board .smp-board__time .smp-flap-c{background:transparent;box-shadow:none}
.smp-board .smp-board__time .smp-flap-c i{background:none;box-shadow:none}
.smp-board .smp-board__time .smp-flap-c::after{display:none}
.smp-board .smp-board__gate{font-size:14px;line-height:1.4}
.smp-board .smp-board__remark{justify-self:end;align-self:center}
.smp-board .smp-board__remark.is-flapped{--fw:9px;--fh:19px}
.smp-board .smp-board__cal{display:inline-flex!important;right:4px}
.smp-board .smp-board__new{display:none}
.smp-board__row--special .smp-board__art{background:radial-gradient(circle at 75% 20%,#ec6946,#a8202d)!important}
.smp-board .smp-board__remark{max-width:none}
.smp-board__row[data-state=tomorrow] .smp-board__remark{color:#bdede3}
.smp-board__row[data-state=ontime] .smp-board__remark{color:#bdd4ff}
.smp-board__row--special .smp-board__remark{color:#ffd7dc}
@media(min-width:1000px){
  .smp-board .smp-board__link{grid-template-columns:70px 76px minmax(0,1fr) 100px;grid-template-areas:'when art dest remark' 'when art gate remark'}
  .smp-board__gate{display:block!important}
  .smp-pass-form__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:699px){
  .smp-cityboard{padding:54px 16px 36px}
  .smp-cityboard__intro{margin-bottom:28px}
  .smp-cityboard__intro h2{font-size:34px!important}
  .smp-cityboard__intro>p:not(.smp-cityboard__eyebrow){font-size:15px}
  .smp-cityboard__eyebrow{font-size:10px}
  .smp-cityboard__machine{margin:0 1px}
  .smp-board{padding:12px 8px 8px;border-radius:22px;box-shadow:0 15px 40px #132d4026,0 0 0 4px #0b151e}
  .smp-board__head{padding:7px 6px 18px;gap:8px}
  .smp-board__next{padding:13px 14px;margin:0 2px 8px!important;border-radius:14px}
  .smp-board__next-where{font-size:21px}
  .smp-board__next-label{font-size:10px}
  .smp-cityboard-change{padding:7px 12px;font-size:12px}
  .smp-board .smp-board__link{grid-template-columns:43px 51px minmax(0,1fr);grid-template-areas:'when art dest' 'when art gate' 'when art remark';padding:15px 48px 15px 2px;column-gap:10px;row-gap:4px;min-height:100px}
  .smp-board .smp-board__art{width:51px;height:62px;border-radius:9px}
  .smp-board .smp-board__city.is-flapped{--fw:9px;--fh:20px}
  .smp-board .smp-board__day.is-flapped{--fw:10px;--fh:18px}
  .smp-board .smp-board__time.is-flapped{--fw:8px;--fh:21px}
  .smp-board .smp-board__gate{font-size:12px;line-height:1.3;text-wrap:pretty;font-weight:400}
  .smp-board .smp-board__remark{justify-self:start}
  .smp-board .smp-board__remark.is-flapped{--fw:7.5px;--fh:16px}
  .smp-board .smp-board__cal{right:0;width:44px;height:44px;background:#192c41}
  .smp-board .smp-board__cal svg{width:18px;height:18px}
  .smp-board__foot{padding:18px 4px 10px}
  .smp-board__pass-btn{font-size:15px!important;min-height:55px!important;border-radius:14px;gap:9px}
  .smp-board__pass-optional{font-size:10px!important}
  .smp-pass-form{padding:20px 14px;border-radius:15px}
  .smp-pass-form__title{font-size:22px!important}
  .smp-pass-form__intro{font-size:14px!important}
  .smp-pass-form__grid{grid-template-columns:1fr}
  .smp-pass-field__input{min-height:52px}
  .smp-pass-btn{font-size:14px!important}
  .smp-pass-tab__send{font-size:12px!important;padding:10px 12px}
  .smp-pass-tab__main{min-width:0}
  .smp-pass-tab__main b{font-size:16px}
  .smp-pass-tab__main small{font-size:12px}
  .smp-pass-tab__main>svg{width:19px;min-width:19px}
  .smp-pass-tab__text{overflow-wrap:anywhere}
  .smp-cityboard-dest small{font-size:12px}
  .smp-cityboard-ready{font-size:13px!important}
}
@media(max-width:359px){
  .smp-board .smp-board__link{grid-template-columns:37px 43px minmax(0,1fr);column-gap:6px;padding-right:45px}
  .smp-board .smp-board__art{width:43px;height:58px}
  .smp-board .smp-board__city.is-flapped{--fw:7.4px;--fh:18px}
  .smp-board .smp-board__gate{font-size:11px}
  .smp-board .smp-board__remark.is-flapped{--fw:7px;--fh:15px}
  .smp-board__pass-btn{font-size:13px!important}
  .smp-board__pass-btn svg{width:19px!important}
  .smp-cityboard__intro h2{font-size:30px!important}
  .smp-pass-tab__send{max-width:100px}
  .smp-pass-tab__main{gap:7px}
  .smp-pass-pair{grid-template-columns:1fr!important}
  .smp-share__grid{grid-template-columns:1fr}
  .smp-pass-field__label{font-size:11px!important}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important}
}
/* WordPress shell primitives and final readability pass. */
:where(body:not(.home)) .wp-block-button__link{padding:15px 25px;border-radius:13px;font-weight:600;text-align:center;min-height:52px;line-height:1.3}
:where(body:not(.home)) .smp-reviews-carousel{overflow:hidden}
:where(body:not(.home)) .smp-city-trust-bar{width:100%;margin-left:0;margin-right:0;left:auto;right:auto}
:where(body:not(.home)) #how-it-works{overflow:clip}
.smp-board__printer{scroll-margin-top:155px}
.smp-board__remark.is-flapped{padding:7px 12px!important;border:1px solid #ffffff15;border-radius:22px;background:linear-gradient(135deg,#1e518d,#346adc);font-family:'SMP Board',sans-serif;font-size:15px!important;line-height:1;letter-spacing:.03em;white-space:nowrap;color:#fff!important}
.smp-board__remark.is-flapped>.smp-flap-c{display:none}
.smp-board__remark.is-flapped::after{content:attr(data-flap-text)}
.smp-board__row[data-state=tomorrow] .smp-board__remark{background:linear-gradient(135deg,#236b66,#448a7a)}
.smp-board__row[data-state=tickets] .smp-board__remark{background:linear-gradient(135deg,#b21832,#d7374b)}
.smp-board__time.is-flapped{display:block;font-family:'SMP Board',sans-serif;font-size:24px!important;color:#f4c655;line-height:1.1;letter-spacing:0}
.smp-board__time.is-flapped>.smp-flap-c{display:none}
.smp-board__time.is-flapped::after{content:attr(data-flap-text)}
@media(max-width:699px){
  .smp-board__remark.is-flapped{font-size:12px!important;padding:4px 8px!important}
  .smp-board__time.is-flapped{font-size:21px!important}
  .smp-board__printer{scroll-margin-top:130px}
  .smp-board__pass-btn{padding-left:12px;padding-right:12px}
  :where(body:not(.home)) .wp-block-button__link{padding:14px 20px}
  .smp-pass-form__title:focus{outline:none}
}
.smp-cityboard-dest{position:relative}
.smp-cityboard-dest__change{display:inline-flex;width:max-content;min-height:44px;align-items:center;padding:4px 0;border:0;background:none;color:#cbd8e7;font-size:12px;text-decoration:underline;text-underline-offset:3px;text-align:left}
.smp-board__next{scroll-margin-top:70px}

/* ---------- Cologne look, from the preview: arrival.css ---------- */
/* Refinement 2 — guided arrival, airport registers, compact check-in. */
:is(.smp-cityboard,.smp-homeboard) .smp-board{--b-cell-hi:#252e39; --b-cell-top:#202833; --b-cell-bottom:#1b222c; --b-cell-lo:#19202a;
  --b-gap:#070b11; --row-height:80px; --depart-width:66px; --art-width:70px; --status-width:100px;
  padding:18px 18px 12px; background:linear-gradient(140deg,#14202c 0%,#0a1520 55%);}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__head{--b-tw:clamp(23px,calc((100cqi - 60px)/18),30px);
  gap:16px;padding:12px 12px 22px;}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__title{gap:10px;font-size:20px}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__plane{width:calc(var(--b-tw) + 7px);height:calc(var(--b-tw) + 7px)}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__clock{font-size:18px}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__next{min-height:106px;margin:0 0 12px!important;padding:22px 22px;border-radius:18px;}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__next-label{font-size:14px}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__next-where{font-size:30px}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-cityboard-change{min-height:48px;padding:10px 18px;font-size:16px}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__link{grid-template-columns:var(--depart-width) var(--art-width) minmax(0,1fr) var(--status-width);
  grid-template-areas:'when art dest remark' 'when art gate .';
  grid-template-rows:32px 48px; align-items:start; align-content:start;
  gap:0 16px; padding:17px 12px; min-height:114px; border-radius:10px;}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__when{display:grid; grid-template-rows:36px 36px; align-content:start; gap:8px;
  width:var(--depart-width); height:var(--row-height); padding:0; align-self:start;background:none; box-shadow:none;}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__when::after{display:none}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__day.is-flapped,
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__time.is-flapped{display:flex; justify-content:center; width:var(--depart-width); --fh:36px;
  font-family:'SMP Board',sans-serif; font-size:26px!important; line-height:1; gap:2px; letter-spacing:0;}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__day.is-flapped{--fw:calc((var(--depart-width) - 4px)/3)}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__time.is-flapped{--fw:calc((var(--depart-width) - 8px)/4.5)}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__time.is-flapped::after{content:none}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__time.is-flapped>.smp-flap-c{display:inline-block}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__art{width:var(--art-width);height:var(--row-height);align-self:start;border-radius:8px;object-fit:cover}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__dest{container-type:inline-size;width:100%;min-width:0;height:32px;align-self:start;align-items:start}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__city.is-flapped{--fw:clamp(7px,calc((100cqi - 13.5px)/10),18px);--fh:30px;
  height:30px;font-size:22px!important;gap:1.5px;color:#f3f3e9;}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-flap-c{border-radius:1.5px;background:#070b11;box-shadow:0 1px 0 #0009;perspective:150px}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-flap-c__top,
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-flap-c__ftop{border-radius:1.5px 1.5px 0 0;background:linear-gradient(#252e39,#202833)}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-flap-c__bot,
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-flap-c__fbot{border-radius:0 0 1.5px 1.5px;background:linear-gradient(#1b222c,#202731)}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-flap-c>span>i{font-weight:700;text-shadow:none;letter-spacing:0}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-flap-c__bot>i,
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-flap-c__fbot>i{top:calc(var(--fh)/-2 - .5px)}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__gate{align-self:start;padding-top:7px;font-size:14px;line-height:1.45;font-weight:400;text-wrap:pretty}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__remark.is-flapped{grid-area:remark;justify-self:end;align-self:start;display:inline-flex;align-items:center;justify-content:center;
  min-height:28px;margin:0;padding:6px 10px!important;border-radius:20px;
  font-size:14px!important;font-family:'SMP Board',sans-serif;letter-spacing:.03em;line-height:1;}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__cal{top:53px;right:12px;width:44px;height:44px;background:#1b2b3d;border-color:#ffffff0c}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__title-text .smp-flap-c{--fh:calc(var(--b-tw)*1.45)}
:is(.smp-cityboard,.smp-homeboard) .smp-board__foot{padding:20px 8px 10px}
:is(.smp-cityboard,.smp-homeboard) .smp-board__pass-btn{position:relative;transform-origin:center;will-change:auto}
:is(.smp-cityboard,.smp-homeboard) .smp-board__pass-btn.is-beating{animation:smp-cb-heartbeat 1.35s ease-in-out 3;will-change:transform}
@keyframes smp-cb-heartbeat{0%,65%,100%{transform:scale(1);box-shadow:0 0 0 0 #f4c65500}15%{transform:scale(1.022);box-shadow:0 0 0 8px #f4c65519}30%{transform:scale(1)}43%{transform:scale(1.012);box-shadow:0 0 0 12px #f4c65500}}
.smp-cityboard-back{display:none}
:is(.smp-cityboard,.smp-homeboard) .smp-board.cb-checkin .smp-board__rows,
:is(.smp-cityboard,.smp-homeboard) .smp-board.cb-checkin .smp-board__next{display:none!important}
:is(.smp-cityboard,.smp-homeboard) .smp-board.cb-checkin .smp-board__head{padding-bottom:5px}
:is(.smp-cityboard,.smp-homeboard) .smp-board.cb-checkin .smp-cityboard-back{display:flex;align-items:center;justify-content:flex-start;min-height:44px;margin:0 8px 8px;
  padding:0;border:0;background:none;color:#c6d1dc;font-size:12px;text-decoration:underline;text-underline-offset:4px;}
:is(.smp-cityboard,.smp-homeboard) .smp-board__printer{margin:0 0 8px;scroll-margin-top:78px}
:is(.smp-cityboard,.smp-homeboard) .smp-board.cb-choosing .smp-cityboard-picker{display:block;max-width:540px;margin:10px auto 18px}
:is(.smp-cityboard,.smp-homeboard) .smp-cityboard-checkin{position:relative;display:grid;gap:12px;width:100%;max-width:540px;margin:0 auto 8px;
  padding:20px 24px 16px;border:0;border-radius:14px;background:#faf7ed;color:#142b41;box-shadow:0 12px 30px #0003;}
:is(.smp-cityboard,.smp-homeboard) .smp-cityboard-checkin .smp-cityboard-dest{display:flex;align-items:center;gap:14px;margin:-4px 0 2px;padding:0 45px 15px 0;
  border:0;border-bottom:1px dashed #b4b6af;border-radius:0;background:none;}
.smp-cityboard-dest__code{display:grid;gap:1px}
:is(.smp-cityboard,.smp-homeboard) .smp-cityboard-dest__code>span{font-size:9px;color:#61707b;letter-spacing:.12em;font-weight:700;white-space:nowrap}
:is(.smp-cityboard,.smp-homeboard) .smp-cityboard-dest__code strong{font-size:32px;line-height:1;color:#132c41;font-weight:800;letter-spacing:-.02em}
.smp-cityboard-dest__info{display:grid;gap:3px;flex:1;min-width:0}
.smp-cityboard-dest__info b{font-size:14px;line-height:1.1}
:is(.smp-cityboard,.smp-homeboard) .smp-cityboard-dest__info small{font-size:11px;line-height:1.3;color:#596875;white-space:nowrap}
:is(.smp-cityboard,.smp-homeboard) .smp-cityboard-dest__change{min-height:44px;align-self:center;padding:0;font-size:11px;color:#445969;white-space:nowrap}
:is(.smp-cityboard,.smp-homeboard) .smp-cityboard-checkin .smp-pass-form__title{color:#142b41;font-size:23px!important;margin:0!important;line-height:1.2}
:is(.smp-cityboard,.smp-homeboard) .smp-cityboard-checkin .smp-pass-form__intro{color:#586776;font-size:12px!important;line-height:1.45!important;margin:-5px 0 0!important}
:is(.smp-cityboard,.smp-homeboard) .smp-cityboard-checkin .smp-pass-form__grid{grid-template-columns:1fr;gap:13px}
:is(.smp-cityboard,.smp-homeboard) .smp-cityboard-checkin .smp-pass-field__label{color:#596b77;font-size:10px!important;letter-spacing:.07em}
:is(.smp-cityboard,.smp-homeboard) .smp-cityboard-checkin .smp-pass-field__input{min-height:48px;background:#fffef9;color:#122b41;border:1px solid #bac2c8;border-radius:8px;padding:10px 12px;font-weight:500;font-size:16px!important}
:is(.smp-cityboard,.smp-homeboard) .smp-cityboard-checkin .smp-pass-field__input::placeholder{color:#849099;font-weight:400}
:is(.smp-cityboard,.smp-homeboard) .smp-cityboard-checkin .smp-pass-field__input:focus-visible{outline:3px solid #0b7680!important;outline-offset:2px}
:is(.smp-cityboard,.smp-homeboard) .smp-cityboard-checkin .smp-pass-form__actions{margin:0;display:flex;gap:0}
:is(.smp-cityboard,.smp-homeboard) .smp-cityboard-checkin .smp-pass-form__actions>.smp-pass-btn{width:100%;min-height:48px;border-radius:10px;font-size:16px!important}
:is(.smp-cityboard,.smp-homeboard) .smp-cityboard-checkin .smp-pass-form__note{margin:0!important;text-align:center;font-size:10px!important;color:#68757e}
:is(.smp-cityboard,.smp-homeboard) .smp-cityboard-checkin .smp-cityboard-close{position:absolute;top:14px;right:14px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;padding:0;font-size:26px!important;line-height:1;text-decoration:none;color:#425967}
:is(.smp-cityboard,.smp-homeboard) .smp-cityboard-checkin .smp-pass-form__error{margin:0;font-size:12px;color:#ac2733}
:is(.smp-cityboard,.smp-homeboard) .smp-cityboard-ready{font-size:13px!important;margin:3px auto 15px!important}
:is(.smp-cityboard,.smp-homeboard) .smp-pass-feed{margin:0 3% 8px;padding-bottom:12px}
:is(.smp-cityboard,.smp-homeboard) .smp-pass__head{padding:12px 16px}
:is(.smp-cityboard,.smp-homeboard) .smp-pass__body{padding:16px;gap:11px}
:is(.smp-cityboard,.smp-homeboard) .smp-pass__route{display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);align-items:end;gap:8px}
:is(.smp-cityboard,.smp-homeboard) .smp-pass__route-line{display:block}
:is(.smp-cityboard,.smp-homeboard) .smp-pass__f--to{text-align:right}
:is(.smp-cityboard,.smp-homeboard) .smp-pass__f span{font-size:10px}
:is(.smp-cityboard,.smp-homeboard) .smp-pass__f b{font-size:15px}
:is(.smp-cityboard,.smp-homeboard) .smp-pass__f--name b{font-size:25px}
:is(.smp-cityboard,.smp-homeboard) .smp-pass__route b{font-size:18px}
:is(.smp-cityboard,.smp-homeboard) .smp-pass__stub{padding:13px 16px}
:is(.smp-cityboard,.smp-homeboard) .smp-pass__bars{height:30px}
:is(.smp-cityboard,.smp-homeboard) .smp-pass__note{font-size:11px;line-height:1.45}
:is(.smp-cityboard,.smp-homeboard) .smp-pass-links .smp-pass-btn{font-size:12px!important}
@media(max-width:699px){
  :is(.smp-cityboard,.smp-homeboard) .smp-board{--row-height:70px;--depart-width:44px;--art-width:48px;--status-width:74px;padding:12px 10px 8px}
  :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__head{--b-tw:clamp(14.5px,calc((100cqi - 70px)/14),18px);gap:8px;padding:10px 7px 16px}
  :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__title{gap:7px;font-size:16px}
  :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__clock{font-size:15px}
  :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__next{min-height:88px;margin:0 0 10px!important;padding:16px 14px;border-radius:14px}
  :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__next-label{font-size:11px}
  :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__next-where{font-size:25px}
  :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-cityboard-change{min-height:44px;padding:8px 12px;font-size:13px}
  :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__link{grid-template-rows:26px 44px;gap:0 8px;padding:15px 8px;min-height:100px}
  :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__when{grid-template-rows:33px 33px;gap:4px}
  :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__day.is-flapped,:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__time.is-flapped{--fh:33px;font-size:20px!important;gap:1px}
  :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__day.is-flapped{--fw:calc((var(--depart-width) - 2px)/3)}
  :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__time.is-flapped{--fw:calc((var(--depart-width) - 4px)/4.5)}
  :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__dest{height:26px}
  :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__city.is-flapped{--fw:clamp(6px,calc((100cqi - 9px)/10),14px);--fh:25px;height:25px;font-size:19px!important;gap:1px}
  :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__gate{padding-top:5px;font-size:11px;line-height:1.35}
  :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__remark.is-flapped{min-height:24px;padding:5px 8px!important;font-size:12px!important}
  :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__cal{top:41px;right:8px}
  :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__art{border-radius:6px}
  :is(.smp-cityboard,.smp-homeboard) .smp-board__foot{padding:16px 2px 7px}
  :is(.smp-cityboard,.smp-homeboard) .smp-board__pass-btn{font-size:15px!important}
  :is(.smp-cityboard,.smp-homeboard) .smp-cityboard-checkin{padding:17px 16px 14px;gap:11px}
  :is(.smp-cityboard,.smp-homeboard) .smp-cityboard-checkin .smp-cityboard-dest{gap:10px;padding-right:30px;margin-bottom:1px}
  :is(.smp-cityboard,.smp-homeboard) .smp-cityboard-dest__code strong{font-size:28px}
  :is(.smp-cityboard,.smp-homeboard) .smp-cityboard-dest__code>span{font-size:8px}
  :is(.smp-cityboard,.smp-homeboard) .smp-cityboard-dest__info b{font-size:13px}
  :is(.smp-cityboard,.smp-homeboard) .smp-cityboard-dest__info small{font-size:10px}
  :is(.smp-cityboard,.smp-homeboard) .smp-cityboard-checkin .smp-cityboard-close{right:7px;top:9px}
  :is(.smp-cityboard,.smp-homeboard) .smp-cityboard-checkin .smp-pass-form__title{font-size:21px!important}
  :is(.smp-cityboard,.smp-homeboard) .smp-cityboard-checkin .smp-pass-form__intro{font-size:11px!important}
  :is(.smp-cityboard,.smp-homeboard) .smp-cityboard-checkin .smp-pass-form__actions>.smp-pass-btn{font-size:15px!important}
  :is(.smp-cityboard,.smp-homeboard) .smp-board.cb-checkin .smp-board__head{padding-bottom:0}
  :is(.smp-cityboard,.smp-homeboard) .smp-board.cb-checkin .smp-cityboard-back{margin-bottom:5px}
  :is(.smp-cityboard,.smp-homeboard) .smp-pass__brand{font-size:12px}
  :is(.smp-cityboard,.smp-homeboard) .smp-pass__kind{font-size:9px}
  :is(.smp-cityboard,.smp-homeboard) .smp-pass__head{gap:6px}
  :is(.smp-cityboard,.smp-homeboard) .smp-pass__f b{font-size:14px}
  :is(.smp-cityboard,.smp-homeboard) .smp-pass__f--name b{font-size:24px}
}
@media(max-width:359px){
  :is(.smp-cityboard,.smp-homeboard) .smp-board{--depart-width:38px;--art-width:33px;--status-width:61px;padding-left:7px;padding-right:7px}
  :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__next{min-height:82px;padding:13px 11px}
  :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__next-where{font-size:23px}
  :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__link{column-gap:5px}
  :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__day.is-flapped,:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__time.is-flapped{font-size:18px!important}
  :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__city.is-flapped{font-size:17px!important}
  :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__remark.is-flapped{font-size:11px!important;padding:5px 6px!important}
  :is(.smp-cityboard,.smp-homeboard) .smp-cityboard-checkin{padding-left:12px;padding-right:12px}
  :is(.smp-cityboard,.smp-homeboard) .smp-cityboard-checkin .smp-pass-form__title{font-size:19px!important}
  :is(.smp-cityboard,.smp-homeboard) .smp-cityboard-checkin .smp-cityboard-dest{gap:7px}
  :is(.smp-cityboard,.smp-homeboard) .smp-cityboard-dest__info small{font-size:9px}
}
/* Scoped opt-in plays the board demo without changing device preferences. */
html[data-smp-motion=on] :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-flap-c.is-f1 .smp-flap-c__ftop{animation:smp-flap-top-1 var(--fd,58ms) linear forwards!important;visibility:visible!important}
html[data-smp-motion=on] :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-flap-c.is-f2 .smp-flap-c__ftop{animation:smp-flap-top-2 var(--fd,58ms) linear forwards!important;visibility:visible!important}
html[data-smp-motion=on] :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-flap-c.is-f1 .smp-flap-c__fbot{animation:smp-flap-bot-1 var(--fd,58ms) linear forwards!important;visibility:visible!important}
html[data-smp-motion=on] :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-flap-c.is-f2 .smp-flap-c__fbot{animation:smp-flap-bot-2 var(--fd,58ms) linear forwards!important;visibility:visible!important}
html[data-smp-motion=on] :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-flap-c.is-f1.is-land .smp-flap-c__fbot{animation-name:smp-flap-land-1!important}
html[data-smp-motion=on] :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-flap-c.is-f2.is-land .smp-flap-c__fbot{animation-name:smp-flap-land-2!important}
html[data-smp-motion=off] :is(.smp-cityboard,.smp-homeboard) .smp-board__pass-btn.is-beating{animation:none}
/* Refinement 3 — single departure capsule, navy split flaps, calm status key. */
:is(.smp-cityboard,.smp-homeboard) .smp-board{--b-cell-hi:#294663; --b-cell-top:#213b58; --b-cell-bottom:#1b344f; --b-cell-lo:#18314b;
  --b-gap:#10263d;}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-flap-c{border-radius:2px; background:#112b45;
  box-shadow:0 1px 0 #0716275e, inset 0 0 0 1px #69809a1a;}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-flap-c__top,
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-flap-c__ftop{background:linear-gradient(180deg,#294663,#213b58);}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-flap-c__bot,
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-flap-c__fbot{background:linear-gradient(180deg,#1b344f,#18314b);}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__when{--date-inline-space:12px;
  position:relative; grid-template-rows:1fr 1fr; gap:0;
  overflow:hidden; box-sizing:border-box; padding:5px; border:1px solid #314860; border-radius:8px;
  background:linear-gradient(180deg,#1c3049 0%,#1b3048 49.5%,#14263c 50.5%,#14263c 100%);
  box-shadow:inset 0 1px 0 #ffffff0b,0 2px 8px #0003;}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__when::after{content:"";display:block;position:absolute;top:calc(50% - 1px);left:0;right:0;height:2px;
  background:#0b1a2b;box-shadow:0 1px 0 #60789024;z-index:3;pointer-events:none;}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__day.is-flapped,
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__time.is-flapped{align-self:center;align-items:center; width:100%;height:32px;--fh:32px;font-size:22px!important;}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__day.is-flapped{--fw:calc((var(--depart-width) - var(--date-inline-space) - 4px)/3)}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__time.is-flapped{--fw:calc((var(--depart-width) - var(--date-inline-space) - 8px)/4.5)}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__when .smp-flap-c{background:transparent;box-shadow:none;border-radius:0;}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__when .smp-flap-c__top,
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__when .smp-flap-c__ftop{background:#1b3048;}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__when .smp-flap-c__bot,
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__when .smp-flap-c__fbot{background:#14263c;}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__remark.is-flapped{width:var(--status-width);height:28px;min-height:28px;padding:4px 4px!important;
  background:#2a4058!important;border:1px solid #455d75!important;border-radius:8px;color:#e8eff4!important;
  box-shadow:none;white-space:nowrap;text-align:center;}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__row--special .smp-board__remark.is-flapped{background:#514329!important;border-color:#77623b!important;color:#f5d786!important;}
@media(max-width:699px){
  :is(.smp-cityboard,.smp-homeboard) .smp-board{--depart-width:50px}
  :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__when{--date-inline-space:10px;padding:4px;border-radius:6px}
  :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__day.is-flapped,
  :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__time.is-flapped{--fh:28px;height:28px;font-size:17px!important}
  :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__day.is-flapped{--fw:calc((var(--depart-width) - var(--date-inline-space) - 2px)/3)}
  :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__time.is-flapped{--fw:calc((var(--depart-width) - var(--date-inline-space) - 4px)/4.5)}
  :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__remark.is-flapped{height:24px;min-height:24px;border-radius:6px}
}
@media(max-width:359px){
  :is(.smp-cityboard,.smp-homeboard) .smp-board{--depart-width:50px;--status-width:64px}
  :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__day.is-flapped,
  :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__time.is-flapped{font-size:16px!important}
  :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__remark.is-flapped{font-size:10px!important}
}
/* Today's pill signals timing; only the chosen city receives a row outline. */
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__row[data-state="tonight"]:not(.is-mine) .smp-board__link,
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__row[data-state="boarding"]:not(.is-mine) .smp-board__link{background-image:none;box-shadow:none;}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__row.is-mine .smp-board__link{box-shadow:inset 0 0 0 1px #f4c655a6;}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__row[data-state="boarding"] .smp-board__link::after{display:none}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__row[data-state="tonight"] .smp-board__remark.is-flapped{gap:5px;background:#f4c655!important;border-color:#f4c655!important;color:#10273d!important;
  box-shadow:0 0 0 1px #f4c65538;}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__row[data-state="tonight"] .smp-board__remark.is-flapped::before{content:"";display:block;flex:none;width:5px;height:5px;border-radius:50%;background:#10273d;}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__row.is-mine .smp-board__link::before{background:linear-gradient(90deg,#f4c6552b 0%,#f4c65513 62%,transparent 100%);
  background-size:100% 100%;background-position:0 0;}
html[data-smp-motion=on] :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__row[data-state="tonight"] .smp-board__remark.is-flapped::before{animation:smp-cb-today-signal 3.8s ease-in-out infinite;}
html[data-smp-motion=on] :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-board__row.is-mine .smp-board__link::before{animation:smp-cb-last-call 5s ease-in-out infinite!important;}
@keyframes smp-cb-today-signal{0%,70%,100%{opacity:.65;transform:scale(.85);box-shadow:0 0 0 0 #10273d00}
  32%,48%{opacity:1;transform:scale(1.15);box-shadow:0 0 0 4px #10273d20}}
@keyframes smp-cb-last-call{0%,16%,78%,100%{opacity:0}
  42%,56%{opacity:.72}}

/* ---------- Cologne look, from the preview: v2.css ---------- */
/* ==========================================================
   v2 · 29 Sep 2026 · David's decisions 1B · 2C · 3A · 4C · 5B
   Decisions layer (was v2.css).
   ========================================================== */
/* Card: "(Optional)" under the pass button, Meetup as a quiet text link */
:where(body:not(.home)) .container.p-1.content .smp-ecard .smp-ecard__note--pass{margin:.55rem 0 0!important}
:where(body:not(.home)) .container.p-1.content .smp-ecard .smp-ecard__meetup{display:block;margin:.7rem auto 0;width:max-content;min-height:44px;line-height:44px;color:#3d4757;font-weight:600;text-decoration:underline;text-underline-offset:3px}
/* Side by side, the ticket button lines up with the pass button
   (the weekly card carries "(Optional)" + the Meetup link under its button) */
@media (min-width:700px){
  :where(body:not(.home)) .container.p-1.content .smp-ecard--special .smp-ecard__cta:last-child{margin-bottom:calc(.55rem + 1.19rem + .7rem + 44px)}
}
/* Check-in: the name error hugs the name field */
:is(.smp-cityboard,.smp-homeboard) .smp-cityboard-checkin .smp-pass-form__grid > .smp-pass-form__error{margin:-6px 0 0}
/* ---------- 1B · Wednesday reminder after printing ----------
   Same markup + copy as smp_render_weekly_form('cologne'), no eyebrow.
   Sits on the board (no card inside the card): a tear line, then the form. */
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-city-reminder--pass{max-width:520px;margin:22px auto 4px;padding:20px 2px 0;
  background:none;border:0;border-top:1px dashed rgba(255,255,255,.22);border-radius:0;box-shadow:none;
  text-align:left;color:var(--b-ink,#f6eed8);}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-city-reminder--pass .smp-city-reminder__title{margin:0 0 6px!important;color:#fff;font-size:1.15rem!important;font-weight:800!important;line-height:1.25!important;}
@media(max-width:359px){
  :is(.smp-cityboard,.smp-homeboard) .smp-board .smp-city-reminder--pass .smp-city-reminder__title{font-size:1.02rem!important}
}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-city-reminder--pass .smp-city-reminder__copy{margin:0 0 14px!important;color:#b8c5d3;font-size:.95rem;line-height:1.45;}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-city-reminder--pass .smp-wl-form{max-width:none}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-city-reminder--pass .smp-wl-form__row{gap:10px}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-city-reminder--pass .smp-wl-form__input{flex:1 1 200px;min-height:48px;padding:0 14px;border:1px solid rgba(255,255,255,.2);border-radius:12px;
  background:#0a2236;color:#f6eed8;font-weight:600;}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-city-reminder--pass .smp-wl-form__input::placeholder{color:#8f9fb1}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-city-reminder--pass .smp-wl-form__input:focus{border-color:#ffc43d;box-shadow:none;outline:3px solid #fff;outline-offset:2px}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-city-reminder--pass .smp-wl-form__input[aria-invalid="true"]{border-color:#ff6b6b}
/* secondary weight, like "Invite a friend": the amber fill stays with Add to calendar */
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-city-reminder--pass .smp-wl-form__btn{min-height:48px;padding:0 18px!important;border:1px solid rgba(255,196,61,.45);border-radius:13px!important;
  background:rgba(255,196,61,.14);color:#ffc43d;box-shadow:none;font-size:.9375rem!important;font-weight:800!important;}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-city-reminder--pass .smp-wl-form__btn:hover,
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-city-reminder--pass .smp-wl-form__btn:focus-visible{background:rgba(255,196,61,.24);transform:none;box-shadow:none}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-city-reminder--pass .smp-wl-form__btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-city-reminder--pass .smp-wl-form__choice-legend{color:#e8eff4;font-size:.9rem;font-weight:700}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-city-reminder--pass .smp-wl-form__choice-option{border:1px solid rgba(255,255,255,.22);background:transparent;color:#e8eff4;font-size:.9rem;border-radius:12px;}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-city-reminder--pass .smp-wl-form__choice-option input{accent-color:#ffc43d}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-city-reminder--pass .smp-wl-form__choice-option:hover{border-color:rgba(255,255,255,.45)}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-city-reminder--pass .smp-wl-form__choice-option:has(input:checked){border-color:#ffc43d;background:rgba(255,196,61,.12)}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-city-reminder--pass .smp-wl-form__choice-option:has(input:focus-visible){outline:3px solid #fff;outline-offset:2px}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-city-reminder--pass .smp-wl-form__msg.is-error{color:#ff8a8a}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-city-reminder--pass .smp-wl-form__msg.is-success{color:#7fe0e6;font-size:1rem}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-city-reminder--pass .smp-wl-form__legal{color:#8f9fb1;font-size:.8rem}
/* Pass surface order: email · the required Yes/No · button (full width), so
   nobody taps "Remind me" before the choice. Markup: smp_render_weekly_form() surface 'pass'. */
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-city-reminder--pass .smp-wl-form__input{flex:1 1 100%}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-city-reminder--pass .smp-wl-form__btn{display:flex;width:100%;margin-top:14px}
:is(.smp-cityboard,.smp-homeboard) .smp-board .smp-city-reminder--pass .smp-wl-form.is-joined .smp-wl-form__btn{display:none}
/* ---------- WCAG 2.2.2 · the board's own pause button stops the loops ---------- */
html[data-smp-motion=on] :is(.smp-cityboard,.smp-homeboard) .smp-board.is-lights-paused .smp-board__row[data-state="tonight"] .smp-board__remark.is-flapped::before,
html[data-smp-motion=on] :is(.smp-cityboard,.smp-homeboard) .smp-board.is-lights-paused .smp-board__row.is-mine .smp-board__link::before{animation:none!important}

/* ---------- production additions (29 Sep) ---------- */
/* the preview ran with a global [hidden]{display:none!important}; keep
   that promise inside the section (the strip, the picker, the reminder…) */
:is(.smp-cityboard,.smp-homeboard) [hidden]{display:none!important}

/* tokens the board borrowed from the homepage scope */
.smp-board{--smp-muted-aa:#5b6679}

/* card buttons line up in any card mix (after 4 Oct: anniversary + weekly
   + waiting list): every card without the pass stack gets the pass card's
   "(Optional)" + Meetup height under its button */
@media (min-width:700px){
  :where(body:not(.home)) .container.p-1.content .smp-ecard:not(:has(.smp-ecard__cta--pass)) .smp-ecard__cta:last-child{margin-bottom:calc(.55rem + 18.2px + .7rem + 44px)}
  :where(body:not(.home)) .container.p-1.content .smp-ecard:not(:has(.smp-ecard__cta--pass)) .smp-ecard__cta + .smp-ecard__note:last-child{margin-bottom:calc(.65rem + 44px - 1.19rem + 18.2px)!important}
}

/* decision G: pass tabs keep their look; the name is text, the empty
   toggle button covers the row (no first name inside any button) */
.smp-pass-tab__main{position:relative;padding:0 8px}
.smp-pass-tab__toggle{position:absolute;inset:0;z-index:1;width:100%;min-height:44px;margin:0;padding:0;border:0;border-radius:10px;background:transparent;cursor:pointer}
.smp-pass-tab__toggle:focus-visible{outline:3px solid #fff!important;outline-offset:2px}
.smp-pass-tab__main:has(.smp-pass-tab__toggle:hover){background:rgba(5,37,64,.04)}
.smp-pass-tab--own .smp-pass-tab__main:has(.smp-pass-tab__toggle:hover){background:rgba(255,255,255,.04)}

/* ==========================================================
   HOMEPAGE MODE (3.6, hp8, 30 Sep 2026)
   00_HQ/20_HOMEPAGE/docs/DECISIONS_homepage-board-from-cologne_0930.md
   The homepage board sits in .smp-homeboard and gets the whole Cologne
   look above. Only what differs lives here; the options on the board
   markup (data-smp-board-strip / -mine / -foot / -cal, smp-board.js)
   do the rest: no footer, no pass, no calendar buttons, date order.
   ========================================================== */

/* 5A · the strip only as the first-visit nudge, one compact line:
   YOUR CITY · Tap yours below (it wraps under the label on very
   narrow phones rather than shrinking) */
.smp-homeboard .smp-board[data-smp-board-strip="nudge"] .smp-board__next{min-height:0;margin:0 0 10px!important;padding:13px 18px;border-radius:14px}
.smp-homeboard .smp-board[data-smp-board-strip="nudge"] .smp-board__next-mine{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 10px!important}
.smp-homeboard .smp-board[data-smp-board-strip="nudge"] .smp-board__next-label{font-size:12px}
.smp-homeboard .smp-board[data-smp-board-strip="nudge"] .smp-board__next-where{font-size:18px;line-height:1.25;color:var(--b-teal)}
.smp-homeboard .smp-board[data-smp-board-strip="nudge"] .smp-board__next-where::before{content:"·" / "";margin-right:10px;color:var(--b-muted)}
@media(max-width:699px){
  .smp-homeboard .smp-board[data-smp-board-strip="nudge"] .smp-board__next{padding:11px 14px;margin:0 0 8px!important}
  .smp-homeboard .smp-board[data-smp-board-strip="nudge"] .smp-board__next-label{font-size:11px}
  .smp-homeboard .smp-board[data-smp-board-strip="nudge"] .smp-board__next-where{font-size:16px}
}

/* 3A · rows are links wherever the board isn't in city mode: the
   chevron shows (the Cologne rows pick the pass city, so it stays off
   there). It sits at the right edge of the row's second line, in the
   cell the calendar button used to take. */
.smp-homeboard .smp-board:not([data-smp-board-city]) .smp-board__go{display:inline-flex!important;position:absolute;right:16px;bottom:22px;width:18px;min-width:0;height:18px;align-items:center;justify-content:center;color:var(--b-muted);pointer-events:none}
.smp-homeboard .smp-board:not([data-smp-board-city]) .smp-board__go svg{width:18px;height:18px}
@media(max-width:699px){
  .smp-homeboard .smp-board:not([data-smp-board-city]) .smp-board__go{right:10px;bottom:20px;width:16px;height:16px}
  .smp-homeboard .smp-board:not([data-smp-board-city]) .smp-board__go svg{width:16px;height:16px}
}
html[data-smp-motion=off] .smp-homeboard .smp-board__link:hover .smp-board__go{transform:none}

/* 7A (David, 30 Sep) · Bonn's "· New route" shows on the homepage until
   1 Nov, as decided on 28 Sep: teal, in the venue line, moves to line 2
   as a whole (the §05 .smp-board__new rule). smp-core.js removes the
   span on 1 Nov (data-smp-expires). The Cologne board keeps it hidden. */
.smp-homeboard .smp-board .smp-board__new{display:inline}