/* ================= day calendar as a countdown timeline (built by js/days-timeline.js) =================
   One thin line under the countdown tiles: a label row above it (one stop's name and weekday at a time),
   the stops on it, their date numerals under it. Gold on the dark page; light.css remaps the tokens for cream. */

.mf-tl{position:relative;width:min(100%,560px);height:96px;margin:14px auto 0}
.mf-in{position:absolute;inset:0 26px}           /* every left:% below is a share of this box, the line's own length */
.mf-track{position:absolute;left:0;right:0;top:52px;height:2px}
.mf-track i{position:absolute;top:0;height:2px;border-radius:2px}
.mf-track .line{right:0;background:linear-gradient(90deg,var(--line),var(--gold))}
.mf-track .lead{left:0;background:repeating-linear-gradient(90deg,var(--gold) 0 4px,transparent 4px 9px);opacity:.7}
.mf-track .done{height:3px;top:-.5px;background:var(--gold);box-shadow:0 0 10px rgba(255,170,60,.7)}

/* the stops: 44 px wide buttons on the line; the dot sits on the line, the numeral under it */
.mf-stop{position:absolute;top:30px;width:48px;height:58px;margin-left:-24px;padding:0;border:0;background:none;color:var(--ink);
  font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mf-stop .dot{position:absolute;left:50%;top:22px;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:var(--deep);border:2px solid var(--gold);transition:transform .2s}
.mf-stop.past .dot{background:var(--gold);opacity:.55}
.mf-stop .num{position:absolute;left:50%;top:32px;translate:-50% 0;white-space:nowrap;font-size:.86rem;font-weight:600;color:var(--gold);
  font-variant-numeric:tabular-nums;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.mf-stop.next .dot,.mf-stop.now .dot{width:16px;height:16px;margin:-8px 0 0 -8px;background:var(--gold);border-color:#fff4e0;
  box-shadow:0 0 0 4px rgba(255,210,122,.25),0 0 16px rgba(255,170,60,.9)}
.mf-stop.next .num,.mf-stop.now .num{font-size:1rem;top:34px}
.mf-stop:hover .dot,.mf-stop.on .dot{transform:scale(1.25)}
.mf-stop:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:10px}

/* the label above the line: one at a time */
.mf-stop .tip{position:absolute;bottom:calc(100% - 14px);left:50%;translate:-50% 0;display:none;white-space:nowrap;
  padding:4px 12px;border-radius:999px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:.78rem;line-height:1.35;color:var(--ink);box-shadow:0 6px 16px rgba(0,0,0,.3)}
.mf-stop .tip b{color:var(--gold);font-weight:700;margin-right:.4em}
.mf-stop.on .tip{display:block}
.mf-stop.el .tip{left:0;translate:0 0}
.mf-stop.er .tip{left:auto;right:0;translate:0 0}

/* today: a small marker on the line with its word under it */
.mf-today{position:absolute;top:44px;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:.7rem;font-weight:700;color:var(--gold);pointer-events:none;white-space:nowrap}
.mf-today i{width:2px;height:18px;border-radius:2px;background:#fff4e0;box-shadow:0 0 8px rgba(255,210,122,.9)}

:where(html[data-theme="light"]) .mf-today i{background:var(--red);box-shadow:none}
:where(html[data-theme="light"]) .mf-stop .num{text-shadow:0 1px 8px rgba(255,248,236,.9)}
:where(html[data-theme="light"]) .mf-stop.next .dot,:where(html[data-theme="light"]) .mf-stop.now .dot{background:var(--saff);border-color:#fff}
:where(html[data-theme="light"]) .mf-stop .tip{box-shadow:0 6px 16px rgba(120,50,20,.14)}

@media (prefers-reduced-motion:reduce){.mf-stop .dot{transition:none}}

/* the timeline replaces the day section; the finder follows the hero and reads as the main event */
#days{display:none}
#finder{padding-top:28px}
#finder .eyebrow{font-size:1rem;font-weight:600}
#finder h2.title{font-size:clamp(2.1rem,7.6vw,3.6rem);margin:0 0 .15em;padding-top:.1em}
#finder .orn{margin-bottom:1.4rem}