/* Program module: the visual countdown (templates/program/_countdown.twig: the home page,
   /ambassadors, the country pages, /account, My Move and the admin Cycles page), the actions under
   it (templates/program/_early_actions.twig) and the /account cards "Your Ambassador", "Become an
   Ambassador" and "Voting begins". Builds on base.css tokens; logical properties only (RTL-ready).
   Written for older readers: big, calm numbers, plain words, one clear action.
   Colours are the Blend tokens (WCAG 2.1 AA): numbers and words navy ink (13.5:1 on the tile,
   12.9:1 on its lower half, --tile-low; 12.1:1 on foam), units and hints navy soft (6.8:1 on the
   tile, 6.3:1 on foam), "Opening now…" red-coral ink (4.9:1 on foam, 4.6:1 on the coral-tint sun), the calendar
   red-coral icon (3.6:1 or more; icons need 3:1). */

.countdown [hidden] { display: none; }

.countdown {
  --countdown-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='4.5' y='7' width='23' height='20' rx='3' fill='none' stroke='black' stroke-width='2.4'/%3E%3Cpath d='M4.5 13h23M11 4v5M21 4v5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3Crect x='9' y='17' width='5' height='5' rx='1'/%3E%3C/svg%3E");
  display: grid;
  gap: var(--space-xs);
  justify-items: start;
}
.countdown > * { margin: 0; }

/* ---- The clock: day, hour and minute tiles, like the pages of a desk calendar ----------------- */

.countdown-clock { display: grid; justify-items: inherit; }
.countdown-tiles {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(0.5rem, 0.3rem + 1vw, 0.9rem);
}
.countdown-tile {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.4rem;
  min-inline-size: clamp(5.4rem, 3.8rem + 6vw, 7.8rem);
  padding-block: 0.8rem 0.75rem;
  padding-inline: 0.55rem;
  border-block-start: 0.55rem solid var(--coral);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--white) 0 55%, var(--tile-low) 55% 100%);
  box-shadow: var(--shadow), inset 0 0 0 2px var(--foam-deep);
  text-align: center;
}
.countdown-num {
  display: block;
  font: 900 clamp(2.5rem, 1.5rem + 3.6vw, 4.1rem)/1 var(--display);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.countdown-unit {
  display: block;
  font: 800 clamp(0.95rem, 0.85rem + 0.35vw, 1.1rem)/1.2 var(--display);
  color: var(--ink-soft);
  hyphens: manual; /* one word under a number: never "Stun-den" (base.css hyphenates German) */
}

/* Under the tiles: "The Ambassador program starts on …, Dominican Republic time." */
.countdown-when { max-inline-size: 42ch; font-size: var(--text-l); line-height: 1.45; }
.countdown-when time { font-weight: 700; }
/* Under a heading that already says what starts: the date alone, as a calendar chip. The icon
   flows with the words, so on a phone it starts the first line instead of taking a row of its own. */
.countdown-date {
  display: inline-block;
  max-inline-size: 100%;
  padding-block: 0.45rem;
  padding-inline: 0.8rem 1rem;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: inset 0 0 0 2px var(--foam-deep);
  font-family: var(--display);
  font-size: var(--text-m);
  line-height: 1.35;
  text-wrap: balance;
}
.countdown-date::before {
  content: "";
  display: inline-block;
  inline-size: 1.4rem;
  block-size: 1.4rem;
  margin-inline-end: 0.5rem;
  vertical-align: -0.3em;
  background: var(--coral-icon);
  -webkit-mask: var(--countdown-calendar) center / contain no-repeat;
  mask: var(--countdown-calendar) center / contain no-repeat;
}
.countdown-date time { font-weight: 800; }
.countdown-zone { color: var(--ink-soft); }
.countdown-local { color: var(--ink-soft); }
.countdown-refresh { margin: 0; }
/* At zero, the script shows "Opening now…" in place of the hidden sentence. */
.countdown-text:not(.visually-hidden) { font: 800 var(--text-xl)/1.3 var(--display); color: var(--coral-ink); }

/* ---- No numbers: starting soon, opening soon, open, closed ------------------------------------ */

.countdown-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font: 900 clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem)/1.2 var(--display);
  letter-spacing: -0.015em;
  color: var(--ink);
}
.countdown-status::before {
  content: "";
  flex: none;
  inline-size: 1.15em;
  block-size: 1.15em;
  background: var(--coral-icon);
  -webkit-mask: var(--countdown-calendar) center / contain no-repeat;
  mask: var(--countdown-calendar) center / contain no-repeat;
}
.countdown-hint { max-inline-size: 42ch; color: var(--ink-soft); }
.countdown-open .countdown-status { color: var(--ok); }
.countdown-open .countdown-status::before { background: var(--ok); -webkit-mask-image: var(--icon-ok); mask-image: var(--icon-ok); }

/* ---- Compact: the country pages, the /account cards, My Move, the admin dashboard -------------- */

.countdown-compact { gap: var(--space-2xs); }
.countdown-compact .countdown-tiles { gap: 0.45rem; }
.countdown-compact .countdown-tile {
  gap: 0.2rem;
  min-inline-size: 4.4rem;
  padding-block: 0.5rem 0.45rem;
  padding-inline: 0.4rem;
  border-block-start-width: 0.35rem;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-s), inset 0 0 0 1.5px var(--foam-deep);
}
.countdown-compact .countdown-num { font-size: 1.9rem; }
.countdown-compact .countdown-unit { font-size: 0.9rem; }
.countdown-compact .countdown-when { font-size: var(--text-m); }
.countdown-compact .countdown-status { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }

/* On a narrow phone the three tiles share the width equally: the large ones, and the compact
   ones too (at 320 px a card or a ticket leaves about 230 px, less than three 4.4rem tiles). The
   unit words stay on one line ("Stunden", "минут"); below 360 px they get a little smaller and the
   cards a little less padding, so three equal tiles still hold them. */
@media (max-width: 26rem) {
  .countdown-large .countdown-clock, .countdown-large .countdown-tiles,
  .countdown-compact .countdown-clock, .countdown-compact .countdown-tiles { justify-self: stretch; inline-size: 100%; }
  .countdown-large .countdown-unit { font-size: 0.95rem; }
  .countdown-large .countdown-tile { flex: 1 1 0; min-inline-size: 0; padding-inline: 0.3rem; }
  .countdown-large .countdown-num { font-size: clamp(1.9rem, 9vw, 2.5rem); }
  .countdown-compact .countdown-tile { flex: 1 1 0; min-inline-size: 0; padding-inline: 0.25rem; }
}
@media (max-width: 22.5rem) {
  .countdown-unit, .countdown-large .countdown-unit, .countdown-compact .countdown-unit { font-size: 0.8rem; letter-spacing: -0.01em; }
  .account-dashboard > .card.program-card { --card-pad: 0.9rem; }
}

/* ---- The actions under a public countdown (program/_early_actions.twig) ----------------------- */

.early-actions { display: grid; gap: 0.6rem; justify-items: inherit; }
.early-actions > * { margin: 0; }
.early-buttons { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
/* One action: who it is for (optional), then its button. */
.early-action { display: grid; gap: 0.3rem; margin: 0; max-inline-size: none; }
.early-who { font: 800 0.95rem/1.3 var(--display); color: var(--ink-soft); }
.early-hint { max-inline-size: 44ch; color: var(--ink-soft); }
/* On a phone the buttons take the full width; a long label wraps into a rounded box (not a tall
   oval), in balanced, centred lines that start with the icon, never broken inside a word. */
@media (max-width: 34rem) {
  .early-buttons, .early-action { inline-size: 100%; }
  .early-buttons .button {
    display: block;
    inline-size: 100%;
    padding-block: 0.9rem;
    padding-inline: var(--space-s);
    border-radius: var(--radius);
    font-size: 1.05rem;
    hyphens: manual;
    text-wrap: balance;
  }
  .early-buttons .button .icon { display: inline-block; inline-size: 1.2em; block-size: 1.2em; margin-inline-end: 0.45rem; vertical-align: -0.24em; }
}

/* ---- The admin Cycles page and dashboard (English, admin.css around it) ------------------------ */

.admin .countdown-tile { background: var(--white); }
.program-launch {
  display: grid;
  gap: var(--space-s);
  margin-block: var(--space-m);
  padding: var(--space-m);
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--foam), var(--white) 70%);
  box-shadow: inset 0 0 0 2px var(--foam-deep);
}
.program-launch > * { margin: 0; }
.program-launch h2 { font-size: 1.35rem; }
.program-panel-launch { display: grid; gap: var(--space-2xs); margin-block: var(--space-s); }
.program-panel-launch > * { margin: 0; }

/* The years on the Cycles page: one row per program year, the strip of the public timeline. */
.program-how { margin-block: var(--space-m); padding: var(--space-m); border-radius: var(--radius); background: var(--gold-tint); }
.program-how h2 { margin-block-start: 0; font-size: 1.2rem; }
.program-how ul { margin-block-end: 0; padding-inline-start: 1.2rem; display: grid; gap: 0.35rem; }
.program-years { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-m); }
.program-year {
  display: grid;
  gap: var(--space-s);
  max-inline-size: none;
  padding: var(--space-m);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--sand-deep);
}
.program-year > * { margin: 0; }
.program-year-current { box-shadow: inset 0 0 0 3px var(--lagoon-deep); }
.program-year-next { box-shadow: inset 0 0 0 2px var(--coral); }
.program-year-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.program-year-head > * { margin: 0; }
.program-year-head h3 { font-size: 1.25rem; }
.program-year-sub { color: var(--ink-soft); }
.program-year .cycle-strip { box-shadow: inset 0 0 0 1px var(--foam-deep); }
.program-year-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.program-year-actions .admin-mini-form { margin: 0; }
.program-create { margin-block-start: var(--space-m); }
.program-fill { display: grid; gap: var(--space-2xs); }
.program-fill > * { margin: 0; }
.program-calendar { margin-block-start: var(--space-xl); min-inline-size: 0; }
/* On a phone the calendar table scrolls inside its frame, never the page. */
.program-calendar > form, .program-calendar .admin-table-wrap { min-inline-size: 0; max-inline-size: 100%; }
/* Its visually hidden labels are positioned: keep them inside the scrolling frame. */
.program-calendar .admin-table-wrap { position: relative; }
.program-calendar-table select, .program-calendar-table input { min-inline-size: 0; }
.program-calendar-day { inline-size: 5rem; }

/* ---- /account: "Become an Ambassador" and "Voting begins", drawn as tickets ------------------ */

.program-card {
  --program-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2.2'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  display: flex;
  flex-direction: column;
}
.program-card h2 { margin-block: 0; }
.program-card-top { display: grid; gap: var(--space-2xs); justify-items: start; }
.program-card-top > * { margin: 0; }
.program-card-icon { margin-block-end: var(--space-3xs); }
/* The class this card is about: "The 2028 Ambassadors · chosen during 2027". */
.program-card-class { font: 800 0.95rem/1.3 var(--display); color: var(--coral-ink); }
.program-card-prize {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-block-start: var(--space-3xs);
  padding-block: 0.65rem;
  padding-inline: 0.75rem 0.9rem;
  border-radius: var(--radius);
  background: var(--gold-tint);
  font: 800 1.05rem/1.4 var(--display);
}
.program-card-prize .icon { inline-size: 1.7rem; block-size: 1.7rem; margin-block-start: -0.1rem; }
.program-card-prize .program-star { fill: var(--gold); stroke: var(--gold-line); stroke-width: 1.4; }
/* "Voting begins": the voter's note, drawn like the prize in the lagoon's foam. */
.program-card-note { background: var(--foam); }
.program-card-note .icon { color: var(--lagoon-deep); }

/* Below the tear line: the date and Notify me. The line runs from edge to edge, with a round
   notch cut out at each end (the page colour). */
.program-card-ticket {
  position: relative;
  display: grid;
  gap: var(--space-xs);
  margin-block-start: var(--space-s);
  margin-inline: calc(-1 * var(--card-pad, 1.5rem));
  padding-block: var(--space-m) 0;
  padding-inline: var(--card-pad, 1.5rem);
  border-block-start: 3px dashed var(--sand-deep);
}
.program-card-ticket::before,
.program-card-ticket::after {
  content: "";
  position: absolute;
  inset-block-start: -1.05rem;
  inline-size: 1.9rem;
  block-size: 1.9rem;
  border-radius: 50%;
  background: var(--shell);
}
.program-card-ticket::before { inset-inline-start: -0.95rem; }
.program-card-ticket::after { inset-inline-end: -0.95rem; }
.program-card-ticket > * { margin: 0; }
.program-card-ticket .countdown-status { font-size: clamp(1.25rem, 3vw, 1.5rem); }
.program-card-state {
  font-family: var(--display);
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 800;
  line-height: 1.3;
}
.program-card-open .program-card-state { color: var(--ok); }
.program-card-subscribed {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  color: var(--ok);
  font-weight: 700;
}
.program-card-subscribed::before {
  content: "";
  flex: none;
  inline-size: 1.3em;
  block-size: 1.3em;
  margin-block-start: 0.1em;
  background: currentColor;
  -webkit-mask: var(--program-tick) center / contain no-repeat;
  mask: var(--program-tick) center / contain no-repeat;
}
.program-card .notice { max-inline-size: none; }
.program-notify { margin: 0; }

/* ---- /account: "Your Ambassador" (pre-launch: an empty round frame, never a person) ----------- */

/* Beside a taller card in the same row, the frame, the words, the countdown and the link stay
   together in the middle instead of leaving a gap above the link. */
.card.program-card.program-ambassador { justify-content: center; background: var(--foam); box-shadow: none; }
.card.program-card.program-ambassador > .program-ambassador-link { margin-block-start: 0; }
.program-ambassador-row { display: flex; flex-wrap: wrap; gap: var(--space-m); align-items: center; }
.program-ambassador-row > * { margin: 0; }
.program-ambassador-frame { position: relative; inline-size: 6.5rem; block-size: 6.5rem; flex: none; }
.program-empty {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  padding: 0.3rem;
  overflow: hidden;
  border: 3px dashed var(--lagoon-deep);
  border-radius: 50%;
  background: var(--white);
}
.program-empty-bg { fill: var(--white); }
.program-empty-sun { fill: var(--coral-tint); }
.program-empty-person { fill: var(--foam-deep); }
.program-ambassador-pin {
  position: absolute;
  inset-inline-end: -0.35rem;
  inset-block-end: -0.1rem;
  display: grid;
  place-items: center;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0 3px var(--foam), var(--shadow-s);
  color: var(--ink);
}
.program-ambassador-pin .icon { inline-size: 1.7rem; block-size: 1.7rem; }
.program-ambassador-body { display: grid; gap: var(--space-2xs); flex: 1 1 14rem; }
.program-ambassador-body > * { margin: 0; }
.program-ambassador-when { display: grid; gap: var(--space-2xs); margin-block: var(--space-m) var(--space-s); }
.program-ambassador-when > * { margin: 0; }
.program-ambassador-coming { font: 800 1.2rem/1.35 var(--display); }
/* One idea per line, each with its icon: who chooses, when it opens, nothing to do now. */
.program-ambassador-lines { list-style: none; display: grid; gap: 0.55rem; margin-block: var(--space-m) 0; padding: 0; max-inline-size: none; }
.program-ambassador-lines li { display: flex; gap: 0.6rem; align-items: flex-start; max-inline-size: none; font-size: var(--text-l); line-height: 1.4; }
.program-ambassador-lines .icon { flex: none; inline-size: 1.5rem; block-size: 1.5rem; margin-block-start: 0.05rem; color: var(--lagoon-deep); }
.program-ambassador-lines time { font-weight: 700; }
.program-ambassador-email { margin-block: 0 var(--space-xs); font: 800 1.1rem/1.4 var(--display); }
.program-ambassador-class { margin-block: var(--space-s); font: 700 var(--text-l)/1.4 var(--display); color: var(--ink-soft); }
.card.program-card.program-ambassador > .program-notify { margin-block-end: var(--space-s); }
.program-ambassador-link { margin: 0; }

/* ---- The yearly Ambassador timeline (program/_timeline.twig): the home page's Ambassador band
   and /ambassadors. A new class every year, named by the year it serves ("the 2028 Ambassadors,
   chosen during 2027"): which class, where we are now ("You are here"), the dates in order, the
   13-month strip with the registration and voting bars and the results star, and what comes next.
   Words in navy ink on white, foam or coral tint (AA everywhere: ink 12.1:1 on foam, 11.6:1 on
   coral tint; ink-soft 6.3:1 on foam); the strip is decoration (the list says it all in words). */

.cycle { display: grid; gap: var(--space-m); inline-size: 100%; text-align: start; }
.cycle > * { margin: 0; }

/* The class before, during the January overlap: one gold line on top. */
.cycle-previous {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  justify-self: center;
  max-inline-size: 40rem;
  padding-block: 0.75rem;
  padding-inline: 0.9rem 1.1rem;
  border-radius: var(--radius);
  background: var(--gold-tint);
  box-shadow: inset 0 0 0 2px var(--gold-line);
  font: 800 var(--text-l)/1.4 var(--display);
}
.cycle-previous .icon { flex: none; inline-size: 1.7rem; block-size: 1.7rem; margin-block-start: -0.05rem; }

.cycle-head { display: grid; gap: var(--space-2xs); justify-items: center; text-align: center; }
.cycle-head > * { margin: 0; }
.cycle-eyebrow { color: var(--coral-ink); }
.cycle-title { font-size: var(--h2); letter-spacing: -0.02em; text-wrap: balance; }
.cycle-class { max-inline-size: 36ch; font: 700 var(--text-xl)/1.4 var(--display); color: var(--ink-soft); text-wrap: balance; }

.cycle-countdown { display: grid; gap: var(--space-xs); justify-items: center; text-align: center; }
.cycle-countdown > * { margin: 0; }
.cycle-countdown .countdown { justify-items: center; }
.cycle-countdown .countdown-when { margin-inline: auto; }
.cycle-starts { font: 900 var(--h3)/1.3 var(--display); }
.cycle > .early-actions { justify-items: center; text-align: center; }
.cycle > .early-actions .early-buttons { justify-content: center; }

/* ---- The strip: 13 months, January of the selection year to January of the term year -------- */

.cycle-strip {
  display: grid;
  gap: var(--space-xs);
  padding-block: var(--space-s) var(--space-xs);
  padding-inline: clamp(0.6rem, 2vw, 1.2rem);
  border-radius: var(--radius-l);
  background: var(--white);
  box-shadow: inset 0 0 0 2px var(--foam-deep);
}
.cycle-strip > * { margin: 0; }
.cycle-strip-grid {
  display: grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  grid-template-rows: auto 2.3rem 2.3rem auto;
  row-gap: 0.45rem;
}
.cycle-month {
  grid-row: 1;
  text-align: center;
  font: 800 0.9rem/1.2 var(--display);
  color: var(--ink-soft);
  white-space: nowrap;
}
.cycle-month-narrow { display: none; }
.cycle-bar {
  display: flex;
  align-items: center;
  min-inline-size: 0;
  margin-inline: 2px;
  padding-inline: 0.7rem;
  overflow: hidden;
  border-radius: var(--radius-pill);
  font: 800 0.95rem/1.1 var(--display);
  color: var(--ink);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cycle-bar-registration { grid-row: 2; background: var(--coral-tint); box-shadow: inset 0 0 0 2px var(--coral); }
.cycle-bar-voting { grid-row: 3; background: var(--foam); box-shadow: inset 0 0 0 2px var(--lagoon); }
.cycle-star { grid-row: 2 / span 2; align-self: center; justify-self: center; display: grid; place-items: center; }
.cycle-star .icon { inline-size: 2.2rem; block-size: 2.2rem; }
.cycle-today-line {
  grid-row: 1 / span 3;
  justify-self: center;
  inline-size: 0;
  margin-block: -0.2rem;
  border-inline-start: 3px dashed var(--ink);
  z-index: 1;
}
.cycle-year {
  grid-row: 4;
  padding-block-start: 0.3rem;
  border-block-start: 2px solid var(--sand-deep);
  font: 800 0.9rem/1.2 var(--display);
  color: var(--ink-soft);
}
.cycle-year-next { padding-inline-start: 0.3rem; border-inline-start: 2px solid var(--sand-deep); white-space: nowrap; }
.cycle-legend { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m); justify-content: center; font: 800 0.9rem/1.3 var(--display); color: var(--ink-soft); }
.cycle-legend:empty { display: none; }
.cycle-legend > span { display: inline-flex; gap: 0.4rem; align-items: center; }
.cycle-legend .icon { inline-size: 1.3rem; block-size: 1.3rem; }
.cycle-legend-today::before { content: ""; inline-size: 0; block-size: 1.2rem; border-inline-start: 3px dashed var(--ink); }
.cycle-from-1 { grid-column-start: 1; } .cycle-from-2 { grid-column-start: 2; } .cycle-from-3 { grid-column-start: 3; }
.cycle-from-4 { grid-column-start: 4; } .cycle-from-5 { grid-column-start: 5; } .cycle-from-6 { grid-column-start: 6; }
.cycle-from-7 { grid-column-start: 7; } .cycle-from-8 { grid-column-start: 8; } .cycle-from-9 { grid-column-start: 9; }
.cycle-from-10 { grid-column-start: 10; } .cycle-from-11 { grid-column-start: 11; } .cycle-from-12 { grid-column-start: 12; }
.cycle-from-13 { grid-column-start: 13; }
.cycle-to-2 { grid-column-end: 2; } .cycle-to-3 { grid-column-end: 3; } .cycle-to-4 { grid-column-end: 4; }
.cycle-to-5 { grid-column-end: 5; } .cycle-to-6 { grid-column-end: 6; } .cycle-to-7 { grid-column-end: 7; }
.cycle-to-8 { grid-column-end: 8; } .cycle-to-9 { grid-column-end: 9; } .cycle-to-10 { grid-column-end: 10; }
.cycle-to-11 { grid-column-end: 11; } .cycle-to-12 { grid-column-end: 12; } .cycle-to-13 { grid-column-end: 13; }
.cycle-to-14 { grid-column-end: 14; }
/* On a phone the months are letters and the bars a little slimmer. */
@media (max-width: 40rem) {
  .cycle-month-short { display: none; }
  .cycle-month-narrow { display: inline; }
  .cycle-strip-grid { grid-template-rows: auto 2.1rem 2.1rem auto; }
  .cycle-bar { padding-inline: 0.5rem; font-size: 0.9rem; }
  .cycle-star .icon { inline-size: 1.7rem; block-size: 1.7rem; }
}

/* ---- The dates, in order, with "You are here" between them ----------------------------------- */

.cycle-steps {
  list-style: none;
  display: grid;
  justify-self: center;
  inline-size: 100%;
  max-inline-size: 40rem;
  margin: 0;
  padding: 0;
}
.cycle-step {
  --dot: 2.4rem;
  position: relative;
  display: grid;
  grid-template-columns: var(--dot) minmax(0, 1fr);
  column-gap: var(--space-s);
  align-items: center;
  max-inline-size: none;
  padding-block: 0.55rem;
}
/* The line that joins the dots (behind them). */
.cycle-step::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(var(--dot) / 2 - 1.5px);
  border-inline-start: 3px solid var(--foam-deep);
}
.cycle-step:first-child::before { inset-block-start: 50%; }
.cycle-step:last-child::before { inset-block-end: 50%; }
.cycle-dot {
  grid-row: 1 / span 2;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: var(--dot);
  block-size: var(--dot);
  border-radius: 50%;
  background: var(--white);
  box-shadow: inset 0 0 0 3px var(--lagoon-line);
  color: var(--white);
}
.cycle-dot .icon { inline-size: 1.35rem; block-size: 1.35rem; }
.cycle-step-what { grid-column: 2; font: 800 var(--text-l)/1.3 var(--display); }
.cycle-step-when { grid-column: 2; color: var(--ink-soft); }
.cycle-step-when time { font-weight: 700; color: var(--ink); }
.cycle-step.is-done .cycle-dot { background: var(--lagoon-deep); box-shadow: none; }
.cycle-step.is-done .cycle-step-what { color: var(--ink-soft); }
.cycle-step.is-done .cycle-step-when time { color: var(--ink-soft); }
.cycle-step-results .cycle-dot { background: var(--gold-tint); box-shadow: inset 0 0 0 3px var(--gold-line); }
.cycle-step-results.is-done .cycle-dot { background: var(--lagoon-deep); }
.cycle-step-results .cycle-dot .icon { inline-size: 1.6rem; block-size: 1.6rem; }
/* "You are here": a coral card on the line, the dot glowing. */
.cycle-here {
  margin-block: 0.35rem;
  margin-inline: -0.75rem;
  padding-block: 0.8rem;
  padding-inline: 0.75rem;
  border-radius: var(--radius);
  background: var(--coral-tint);
  box-shadow: inset 0 0 0 2px var(--coral);
}
.cycle-here::before { inset-inline-start: calc(0.75rem + var(--dot) / 2 - 1.5px); }
.cycle-here .cycle-dot { background: var(--coral); box-shadow: 0 0 0 6px rgb(255 138 102 / 0.28); }
.cycle-here-tag { grid-column: 2; font: 900 0.95rem/1.2 var(--display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--coral-ink); }
.cycle-here-text { grid-column: 2; font: 800 var(--text-l)/1.35 var(--display); }
.cycle-dr { justify-self: center; font-size: var(--text-s); color: var(--ink-soft); text-align: center; }

/* ---- What comes next: the following class -------------------------------------------------- */

.cycle-next {
  display: grid;
  gap: 0.35rem;
  justify-items: center;
  padding-block-start: var(--space-m);
  border-block-start: 3px dashed var(--lagoon-line);
  text-align: center;
}
.cycle-next > * { margin: 0; }
.cycle-next-title { font: 900 var(--h3)/1.3 var(--display); }
.cycle-next-when { font-size: var(--text-l); }
.cycle-every { font-size: var(--text-s); color: var(--ink-soft); }