/* SFF 2026 - Timeline. Scoped to .sff26-tl. Wrapper, heading and spacing match the SFF 2026 Info Table so the section
   lines up with its neighbours. Amber = now: the current stage's stroke, the track fill up to today, the Today marker,
   the countdown tiles and the open step's date. Hover is amber too (the site's hover rule). Past steps get a green
   tick, never a fade. Desktop: one horizontal track; below 1100px: a vertical track.
   The only !important is phone typography (the theme sets h2 / h3 / p sizes on phones with !important). */
.sff26-tl {
  --sff26-line: rgba(255, 255, 252, .16);
  --sff26-muted: #cfcfcf;
  --sff26-soft: #bdbdbd;
  --sff26-amber: #FCB316;
  --sff26-ink: #141414;
  --sff26-ease: cubic-bezier(.22, .8, .24, 1);
  --sff26-gut: 20px;
  --sff26-max: var(--forum-content-max, 1416px);
  box-sizing: border-box;
  position: relative;
  padding: 120px 0 0;
  color: #fff;
  font-family: var(--forum-font, "Open Sans", Arial, sans-serif);
}
.sff26-tl *,
.sff26-tl *::before,
.sff26-tl *::after { box-sizing: border-box; }
.sff26-tl.sff26-tl--space-small { padding-top: 64px; }
.sff26-tl.sff26-tl--space-none { padding-top: 0; }
@media (min-width: 768px) { .sff26-tl { --sff26-gut: var(--forum-gutter, 40px); } }
@media (max-width: 1199px) { .sff26-tl { padding-top: 96px; } .sff26-tl.sff26-tl--space-small { padding-top: 56px; } }
@media (max-width: 767px) { .sff26-tl { padding-top: 72px; } .sff26-tl.sff26-tl--space-small { padding-top: 44px; } }
.sff26-tl .sff26-tl__w { max-width: calc(var(--sff26-max) + 2 * var(--sff26-gut)); margin: 0 auto; padding: 0 var(--sff26-gut); }
.sff26-tl .sff26-tl__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* header: the live status line (or the fallback heading) with the countdown beside it, the lead under them, and an
   optional button on the right */
.sff26-tl .sff26-tl__hd { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; margin: 0 0 64px; }
.sff26-tl .sff26-tl__hc { flex: 1 1 560px; min-width: 0; }
.sff26-tl .sff26-tl__hrow { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; }
.sff26-tl .sff26-tl__acts { flex: none; }
.sff26-tl .sff26-tl__h2 {
  min-width: 0;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.018em;
  color: #fff;
  text-transform: none;
  text-wrap: balance;
}
.sff26-tl .sff26-tl__lead { max-width: 60ch; margin: 18px 0 0; padding: 0; font-size: 18px; line-height: 1.5; font-weight: 400; color: var(--sff26-muted); }
.sff26-tl .sff26-tl__lead[hidden] { display: none; }

/* the countdown: four amber tiles, numbers in the page's ink */
.sff26-tl .sff26-tl__clock { display: flex; flex: none; gap: 10px; }
.sff26-tl .sff26-tl__clock[hidden] { display: none; }
.sff26-tl .sff26-tl__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 72px;
  overflow: hidden;
  border-radius: 8px;
  background: #E53935;
  color: #fff;
}
.sff26-tl .sff26-tl__num { display: block; font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.sff26-tl .sff26-tl__num--tick { animation: sff26-tl-roll .45s var(--sff26-ease); }
@keyframes sff26-tl-roll { from { opacity: .15; transform: translateY(-45%); } to { opacity: 1; transform: none; } }
.sff26-tl .sff26-tl__lab { display: block; margin-top: 5px; font-size: 13px; line-height: 1; font-weight: 600; }

/* the track */
.sff26-tl .sff26-tl__list { position: relative; display: grid; grid-template-columns: repeat(var(--sff26-n, 5), minmax(0, 1fr)); column-gap: 32px; margin: 0; padding: 0; list-style: none; }
.sff26-tl .sff26-tl__list::before { content: ""; position: absolute; top: 17px; left: 0; right: 0; height: 2px; background: var(--sff26-line); }
.sff26-tl .sff26-tl__fill { position: absolute; top: 17px; left: 0; z-index: 1; width: 0; height: 2px; background: var(--sff26-amber); pointer-events: none; }
.sff26-tl .sff26-tl__today { position: absolute; top: 18px; left: 0; z-index: 3; opacity: 0; transform: translate(-50%, -50%); pointer-events: none; }
.sff26-tl .sff26-tl__dot { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--sff26-amber); }
.sff26-tl .sff26-tl__tlab {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--sff26-amber);
  color: var(--sff26-ink);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
  transform: translateX(-50%);
}
.sff26-tl.sff26-tl--placed .sff26-tl__today { opacity: 1; }
.sff26-tl.sff26-tl--placed .sff26-tl__dot { animation: sff26-tl-pulse 2s ease-out infinite; }
@keyframes sff26-tl-pulse { 0% { box-shadow: 0 0 0 0 rgba(252, 179, 22, .6); } 70% { box-shadow: 0 0 0 14px rgba(252, 179, 22, 0); } 100% { box-shadow: 0 0 0 0 rgba(252, 179, 22, 0); } }

.sff26-tl .sff26-tl__ph { position: relative; margin: 0; padding: 60px 0 0; list-style: none; }
.sff26-tl .sff26-tl__ph::marker,
.sff26-tl .sff26-tl__step::marker { content: none; }
.sff26-tl .sff26-tl__node {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 15px;
  height: 36px;
  background: var(--c);
  clip-path: polygon(45% 0, 100% 0, 55% 100%, 0 100%);
  transition: background-color .25s ease, transform .35s var(--sff26-ease);
}
.sff26-tl .sff26-tl__ph:hover .sff26-tl__node,
.sff26-tl .sff26-tl__ph.is-current .sff26-tl__node { background: var(--sff26-amber); }
.sff26-tl .sff26-tl__ph:hover .sff26-tl__node { transform: translateY(-3px); }
.sff26-tl .sff26-tl__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  padding: 0;
  font-family: inherit;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff;
  text-transform: none;
}
.sff26-tl .sff26-tl__tag { display: inline-block; padding: 4px 8px; border-radius: 4px; background: var(--sff26-amber); color: var(--sff26-ink); font-size: 12px; line-height: 1; font-weight: 700; letter-spacing: .01em; }
.sff26-tl .sff26-tl__steps { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.sff26-tl .sff26-tl__step { margin: 0; padding: 0; }
.sff26-tl .sff26-tl__when { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; padding: 0; font-size: 16px; line-height: 1.35; font-weight: 600; color: #fff; }
.sff26-tl .sff26-tl__what { margin: 0; padding: 0; font-size: 15px; line-height: 1.5; font-weight: 400; color: var(--sff26-soft); }
.sff26-tl .sff26-tl__tick { display: none; flex: none; width: 15px; height: 15px; color: #76C893; }
.sff26-tl .sff26-tl__step.is-done .sff26-tl__tick { display: inline-block; }
.sff26-tl .sff26-tl__step.is-open .sff26-tl__when { color: var(--sff26-amber); }
.sff26-tl .sff26-tl__note { margin: 48px 0 0; padding: 22px 0 0; border-top: 1px solid var(--sff26-line); font-size: 15px; line-height: 1.5; color: var(--sff26-soft); }
.sff26-tl .sff26-tl__note p { margin: 0; }
.sff26-tl .sff26-tl__note a { color: var(--sff26-amber); text-decoration: none; }
.sff26-tl .sff26-tl__note a:hover { text-decoration: underline; }

/* the countdown column: the tiles stay centred on the heading line; "N of M booking windows left" hangs under them */
.sff26-tl .sff26-tl__clockcol { position: relative; display: flex; flex: none; flex-direction: column; gap: 10px; }
.sff26-tl .sff26-tl__wl { margin: 0; padding: 0; font-size: 15px; line-height: 1.3; font-weight: 600; color: #fff; white-space: nowrap; }
.sff26-tl .sff26-tl__wl b { font-weight: 700; color: var(--sff26-amber); }
.sff26-tl .sff26-tl__wl[hidden] { display: none; }
/* nothing to show in it (no countdown, no windows line, or no JS): out of the row, so the heading keeps its width */
.sff26-tl .sff26-tl__clockcol:has(> .sff26-tl__clock[hidden]):has(> .sff26-tl__wl[hidden]) { display: none; }
@media (min-width: 1100px) { .sff26-tl .sff26-tl__wl { position: absolute; top: calc(100% + 10px); left: 0; } }
/* module.js: the tiles wrapped under a long heading, so the line follows them in the flow instead */
.sff26-tl .sff26-tl__clockcol--below .sff26-tl__wl { position: static; }

/* a deadline stage (a gate): a straight white bar across the track, an amber date, the track after it dashed */
.sff26-tl .sff26-tl__ph--deadline .sff26-tl__node { left: 4px; top: -8px; width: 6px; height: 52px; border-radius: 2px; background: #fff; clip-path: none; }
.sff26-tl .sff26-tl__ph--deadline .sff26-tl__when { color: var(--sff26-amber); }
.sff26-tl .sff26-tl__list.has-cut::after { content: ""; position: absolute; top: 17px; left: var(--sff26-cut, 100%); right: 0; height: 2px; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(255,255,252,.4) 0 8px, var(--sff26-ink) 8px 15px); }

/* a results row under a stage's steps (not a step): after a hairline, the date in bold white, a green tick once past;
   on desktop the rows line up across the stages */
.sff26-tl .sff26-tl__res { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid var(--sff26-line); font-size: 15px; line-height: 1.4; color: var(--sff26-soft); }
.sff26-tl .sff26-tl__res b { font-weight: 600; color: #fff; }
.sff26-tl .sff26-tl__res.is-done .sff26-tl__tick { display: inline-block; }
@media (min-width: 1100px) { .sff26-tl .sff26-tl__ph { display: flex; flex-direction: column; } .sff26-tl .sff26-tl__steps:not(:last-child) { margin-bottom: 16px; } .sff26-tl .sff26-tl__res { margin-top: auto; } }

/* load: the track draws, the stages rise in, then the amber fill runs to today (module.js adds --armed, then --in) */
.sff26-tl.sff26-tl--armed .sff26-tl__ph { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .7s var(--sff26-ease); transition-delay: calc(var(--i, 0) * 90ms + .1s); }
.sff26-tl.sff26-tl--armed.sff26-tl--in .sff26-tl__ph { opacity: 1; transform: none; }
.sff26-tl.sff26-tl--armed .sff26-tl__list::before { transform: scaleX(0); transform-origin: left; transition: transform .8s var(--sff26-ease); }
.sff26-tl.sff26-tl--armed.sff26-tl--in .sff26-tl__list::before { transform: none; }
.sff26-tl.sff26-tl--armed .sff26-tl__fill { transition: width 1.4s var(--sff26-ease) .5s, height 1.4s var(--sff26-ease) .5s; }
.sff26-tl.sff26-tl--armed .sff26-tl__today { transition: left 1.4s var(--sff26-ease) .5s, top 1.4s var(--sff26-ease) .5s, opacity .3s ease .5s; }
.sff26-tl.sff26-tl--armed .sff26-tl__list.has-cut::after { opacity: 0; transition: opacity .4s ease .8s; }
.sff26-tl.sff26-tl--armed.sff26-tl--in .sff26-tl__list.has-cut::after { opacity: 1; }

@media (max-width: 1099px) {
  .sff26-tl .sff26-tl__list { grid-template-columns: minmax(0, 1fr); row-gap: 40px; padding-left: 40px; }
  .sff26-tl .sff26-tl__list::before { top: 8px; bottom: 8px; left: 7px; right: auto; width: 2px; height: auto; }
  .sff26-tl.sff26-tl--armed .sff26-tl__list::before { transform: scaleY(0); transform-origin: top; }
  .sff26-tl .sff26-tl__fill { top: 8px; left: 7px; width: 2px; height: 0; }
  .sff26-tl .sff26-tl__today { top: 8px; left: 8px; }
  .sff26-tl .sff26-tl__tlab { display: none; }
  .sff26-tl .sff26-tl__ph { padding-top: 0; }
  .sff26-tl .sff26-tl__node { top: -3px; left: -40px; width: 14px; height: 32px; }
  .sff26-tl .sff26-tl__name { margin-bottom: 14px; font-size: 20px; }
  .sff26-tl .sff26-tl__steps { gap: 14px; }
  .sff26-tl .sff26-tl__hd { margin-bottom: 48px; }
  .sff26-tl .sff26-tl__ph--deadline .sff26-tl__node { left: -44px; top: 10px; width: 22px; height: 6px; }
  .sff26-tl .sff26-tl__list.has-cut::after { top: var(--sff26-cut, 100%); bottom: 8px; left: 7px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, rgba(255,255,252,.4) 0 8px, var(--sff26-ink) 8px 15px); }
  .sff26-tl .sff26-tl__res { max-width: 340px; margin-top: 12px; padding-top: 10px; }
}
@media (max-width: 767px) {
  .sff26-tl .sff26-tl__hd { margin-bottom: 40px; }
  .sff26-tl .sff26-tl__hrow { gap: 16px; }
  .sff26-tl .sff26-tl__clock { gap: 8px; }
  .sff26-tl .sff26-tl__unit { width: 60px; height: 62px; }
  .sff26-tl .sff26-tl__acts,
  .sff26-tl .sff26-tl__acts .cta-button { width: 100%; }
  .sff26-tl .sff26-tl__note { margin-top: 36px; }
  /* Phone type: the theme sets h2 / h3 / p sizes and weights on phones with !important */
  .sff26-tl .sff26-tl__h2 { font-size: 32px !important; line-height: 1.12 !important; font-weight: 600 !important; }
  .sff26-tl .sff26-tl__lead { font-size: 16px !important; line-height: 1.5 !important; }
  .sff26-tl .sff26-tl__num { font-size: 28px !important; line-height: 1 !important; font-weight: 700 !important; }
  .sff26-tl .sff26-tl__lab { font-size: 12px !important; line-height: 1 !important; }
  .sff26-tl .sff26-tl__name { font-size: 20px !important; line-height: 1.2 !important; font-weight: 600 !important; }
  .sff26-tl .sff26-tl__when { font-size: 16px !important; line-height: 1.35 !important; font-weight: 600 !important; }
  .sff26-tl .sff26-tl__what { font-size: 15px !important; line-height: 1.5 !important; }
  .sff26-tl .sff26-tl__note { font-size: 15px !important; line-height: 1.5 !important; }
  .sff26-tl .sff26-tl__res { font-size: 15px !important; line-height: 1.4 !important; }
  .sff26-tl .sff26-tl__wl { font-size: 15px !important; line-height: 1.3 !important; font-weight: 600 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .sff26-tl.sff26-tl--armed .sff26-tl__ph,
  .sff26-tl.sff26-tl--armed .sff26-tl__list::before { opacity: 1; transform: none; transition: none; }
  .sff26-tl.sff26-tl--armed .sff26-tl__fill,
  .sff26-tl.sff26-tl--armed .sff26-tl__today { transition: none; }
  .sff26-tl.sff26-tl--placed .sff26-tl__dot,
  .sff26-tl .sff26-tl__num--tick { animation: none; }
  .sff26-tl .sff26-tl__node { transition: none; }
  .sff26-tl.sff26-tl--armed .sff26-tl__list.has-cut::after { opacity: 1; transition: none; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Other forums (12 Oct, user: "globalise the new modules to be used on other forums"). Everything below applies only
   OFF SFF (".sff26-tl:not(.skin-sff *)"), so SFF keeps exactly the values above. The module reads the forum skin's tokens
   (the bss.css contract: --forum-text, --forum-text-body, --forum-text-muted, --forum-text-faint, --forum-surface,
   --forum-surface-raised, --forum-line, --forum-highlight, --forum-dark, the brand palette --forum-gold / -accent /
   -orchid / -teal) and the BSS layout (--bss-max, --bss-gutter), each falling back to SFF's value. A light edition
   (BSS Cambodia) sets --forum-highlight-text to its text colour: brand colours never as small text on a light page.
   BSS forces p / li to var(--forum-text-body) !important, so each text role sets that token to its own colour.
   --------------------------------------------------------------------------------------------------------------- */
.sff26-tl:not(.skin-sff *) {
  --sff26-gut: 15px; /* BSS's phone gutter (from 768px: --bss-gutter, below) */
  --sff26-max: var(--forum-content-max, var(--bss-max, 1416px));
  --sff26-amber: var(--forum-highlight, #FCB316);
  --sff26-hl-text: var(--forum-highlight-text, var(--forum-highlight, #FCB316));
  --sff26-fg: var(--forum-text, #fff);
  --sff26-pal-amber: var(--forum-gold, var(--forum-highlight, #FCB316));
  --sff26-pal-red: var(--forum-highlight, #E53935);
  --sff26-pal-blue: var(--forum-accent, #3399FF);
  --sff26-pal-pink: var(--forum-orchid, #FF88A2);
  --sff26-pal-green: var(--forum-teal, #76C893);
  --sff26-line: var(--forum-line, rgba(255, 255, 252, .16));
  --sff26-muted: var(--forum-text-muted, #cfcfcf);
  --sff26-soft: var(--forum-text-muted, #bdbdbd);
  --sff26-ink: var(--forum-dark, #141414); /* text on the highlight (tiles, Today, Open now); below, from its lightness */
  --forum-text-body: var(--sff26-muted);
  color: var(--sff26-fg);
}
@supports (color: oklch(from red l c h)) {
  /* ink on the highlight: white on a dark one (BSS India's purple), a near-black on a light one (River Stone's oklch) */
  .sff26-tl:not(.skin-sff *) { --sff26-ink: oklch(from var(--sff26-amber) clamp(0.245, (0.62 - l) * 1000, 1) clamp(0, (l - 0.62) * 1000, 0.017) 248); }
}
@media (min-width: 768px) {
  .sff26-tl:not(.skin-sff *) { --sff26-gut: var(--forum-gutter, var(--bss-gutter, 40px)); }
}
.sff26-tl:not(.skin-sff *) .sff26-tl__h2,
.sff26-tl:not(.skin-sff *) .sff26-tl__name,
.sff26-tl:not(.skin-sff *) .sff26-tl__res b { color: var(--sff26-fg); }
.sff26-tl:not(.skin-sff *) .sff26-tl__when,
.sff26-tl:not(.skin-sff *) .sff26-tl__wl { --forum-text-body: var(--sff26-fg); color: var(--sff26-fg); }
.sff26-tl:not(.skin-sff *) .sff26-tl__what,
.sff26-tl:not(.skin-sff *) .sff26-tl__res,
.sff26-tl:not(.skin-sff *) .sff26-tl__note { --forum-text-body: var(--sff26-soft); }
.sff26-tl:not(.skin-sff *) .sff26-tl__step.is-open .sff26-tl__when,
.sff26-tl:not(.skin-sff *) .sff26-tl__ph--deadline .sff26-tl__when,
.sff26-tl:not(.skin-sff *) .sff26-tl__wl b,
.sff26-tl:not(.skin-sff *) .sff26-tl__note a { --forum-text-body: var(--sff26-hl-text); color: var(--sff26-hl-text); }
.sff26-tl:not(.skin-sff *) .sff26-tl__tick { color: var(--sff26-pal-green); }
/* a white stage and a deadline's bar are drawn in the page's text colour (white would vanish on a light page);
   hover and the current stage still turn them to the highlight */
.sff26-tl:not(.skin-sff *) .sff26-tl__ph[style*="--c: #FFFFFF"] .sff26-tl__node,
.sff26-tl:not(.skin-sff *) .sff26-tl__ph--deadline .sff26-tl__node { background: var(--sff26-fg); }
.sff26-tl:not(.skin-sff *) .sff26-tl__ph:hover .sff26-tl__node,
.sff26-tl:not(.skin-sff *) .sff26-tl__ph.is-current .sff26-tl__node { background: var(--sff26-amber); }
/* the dashed track after a deadline: dashes in the text colour, the gaps in the page's colour */
.sff26-tl:not(.skin-sff *) .sff26-tl__list.has-cut::after { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--sff26-fg) 40%, transparent) 0 8px, var(--forum-page, #141414) 8px 15px); }
@media (max-width: 1099px) {
  .sff26-tl:not(.skin-sff *) .sff26-tl__list.has-cut::after { background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--sff26-fg) 40%, transparent) 0 8px, var(--forum-page, #141414) 8px 15px); }
}
/* the Today marker pulses in the forum's highlight */
@keyframes sff26-tl-pulse-forum { 0% { box-shadow: 0 0 0 0 rgba(var(--forum-highlight-rgb, 252, 179, 22), .6); } 70% { box-shadow: 0 0 0 14px rgba(var(--forum-highlight-rgb, 252, 179, 22), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--forum-highlight-rgb, 252, 179, 22), 0); } }
@media (prefers-reduced-motion: no-preference) {
  .sff26-tl:not(.skin-sff *).sff26-tl--placed .sff26-tl__dot { animation-name: sff26-tl-pulse-forum; }
}
/* the countdown boxes (red #E53935 with white text on SFF since 12 Oct): off SFF the forum's highlight with the ink
   computed from it, as the other highlight fills here (white on red fails 4.5:1 on a light page) */
.sff26-tl:not(.skin-sff *) .sff26-tl__unit { background: var(--sff26-amber); color: var(--sff26-ink); }