/* The two days: one line across Wednesday and Thursday on programme.html.
   Tokens, type and bands come from assets/site.css; the full schedule
   below stays the list of record. Ported from prototypes/speakers-concepts. */
.programme-dial { min-height: 0; padding: var(--s-9) 0 var(--s-7); grid-template-columns: minmax(0, 1fr); }
.programme-dial > .shell { width: 100%; min-width: 0; }
.days-head { display: grid; gap: var(--s-4); margin-bottom: var(--s-7); }
.days-head .body { color: var(--ink-2); }
.days { min-width: 0; }
.days__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.days__ui[hidden] { display: none; }

/* The card for one session. */
.days__stage { position: relative; display: grid; min-height: 340px; touch-action: pan-y; }
.days__fallback { align-self: center; max-width: 60ch; padding: var(--s-6); background: var(--chalk); border: 1px solid var(--line); border-radius: 2px; color: var(--ink-2); }
.js .days.is-live .days__fallback { display: none; }
.days__slot { grid-area: 1 / 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s-7); align-items: center;
  padding: var(--s-6); background: var(--chalk); border: 1px solid var(--line); border-top: 3px solid var(--pc, var(--teal)); border-radius: 2px; }
.days__slot.is-in { animation: days-in 520ms var(--ease-out) both; }
.days__slot.is-in.from-left { animation-name: days-in-left; }
.days__slot.is-out { animation: days-out 320ms ease both; pointer-events: none; }
.days__slot.is-out.to-right { animation-name: days-out-right; }
@keyframes days-in { from { opacity: 0; transform: translateX(48px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes days-in-left { from { opacity: 0; transform: translateX(-48px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes days-out { to { opacity: 0; transform: translateX(-48px) scale(.97); } }
@keyframes days-out-right { to { opacity: 0; transform: translateX(48px) scale(.97); } }
.days__when { display: grid; gap: var(--s-2); min-width: 0; }
.days__day { font: 500 13px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.days__time { font: 600 clamp(52px, 7vw, 96px)/.95 var(--f-display); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.days__time small { font: 500 clamp(22px, 2.4vw, 30px)/1 var(--f-display); color: var(--muted); white-space: nowrap; }
.days__tz { font-size: 13px; color: var(--muted); }
.days__what { display: grid; gap: var(--s-3); min-width: 0; }
.days__tags { font: 500 12px/1.5 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--pc-text, var(--muted)); }
.days__slot[data-pillar] .days__tags::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 8px 1px 0; vertical-align: middle; border-radius: 50%; background: var(--pc); }
.days__session { font: italic 500 clamp(24px, 2.6vw, 34px)/1.15 var(--f-display); color: var(--ink); text-wrap: pretty; overflow-wrap: anywhere; }
.days__pending { font-size: 13px; color: var(--muted); }
.days__people { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.days__people a, .days__people .days__person { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-4); align-items: center; text-decoration: none; color: var(--ink); min-height: 64px; }
.days__people a:hover .days__pn, .days__people a:focus-visible .days__pn { text-decoration: underline; text-underline-offset: 4px; }
.days__people img, .days__initials { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--tint); }
.days__initials { display: grid; place-items: center; font: 600 22px/1 var(--f-display); color: var(--pc-text, var(--teal)); }
.days__pn { font: 600 20px/1.15 var(--f-display); display: block; overflow-wrap: anywhere; }
.days__pl { font: 500 13px/1.3 var(--f-ui); color: var(--teal); display: block; margin-top: 2px; }
.days__jump { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 500 15px/1.3 var(--f-ui); color: var(--ink); }
.days__jump .arw { color: var(--teal); }

/* The line: a time line. The faces, the slider, the hour ticks, the filled
   part and the Now mark share one lane, inset by half the handle, so the
   same minute sits at the same place on each. */
.days { --thumb: 26px; --strip-h: 52px; --lane-top: 0px; }
.days.has-now { --lane-top: 20px; }
.days__controls { display: flex; align-items: flex-start; gap: var(--s-4); margin-top: var(--s-6); }
.days__track { position: relative; flex: 1; min-width: 0; padding-top: var(--lane-top); }
.days__strip { position: relative; height: var(--strip-h); margin: 0 calc(var(--thumb) / 2); }
.days__split { position: absolute; left: 50%; top: 4px; bottom: 4px; width: 1px; background: var(--line); }
.days__dot { position: absolute; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; overflow: hidden;
  background: var(--tint); cursor: pointer; opacity: .55; box-shadow: 0 0 0 2px var(--tint), 0 0 0 3px var(--pc, var(--muted));
  transition: transform var(--t-move) var(--ease-out), opacity var(--t-surface) ease; }
.days__dot--twin { top: 18%; }
.days__dot--plain { width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--muted); }
.days__dot img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.8); }
.days__dot.is-on { opacity: 1; transform: scale(1.45); z-index: 2; }
.days__dot.is-on img { filter: none; }
.days__dot.is-near { opacity: .85; transform: scale(1.12); }
.days__now { position: absolute; top: calc(-1 * var(--lane-top)); bottom: -22px; width: 0; z-index: 3; pointer-events: none; }
.days__now[hidden] { display: none; }
.days__now::after { content: ""; position: absolute; left: -1px; top: 16px; bottom: 0; width: 2px; background: var(--coral); }
.days__now span { position: absolute; top: 0; left: 0; transform: translateX(-50%); padding: 0 6px; border-radius: 999px; background: var(--coral); color: var(--ink);
  font: 500 10px/16px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.days__step { flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%;
  margin-top: calc(var(--lane-top) + var(--strip-h) - 2px);
  background: var(--chalk); color: var(--ink); font: 500 18px/1 var(--f-ui); cursor: pointer; transition: border-color var(--t-colour) ease; }
.days__step:hover, .days__step:focus-visible { border-color: var(--ink); }
.days__step:disabled { opacity: .35; cursor: default; }
.days__rail-box { position: relative; }
.days__rail { position: absolute; left: calc(var(--thumb) / 2); right: calc(var(--thumb) / 2); top: 50%; height: 2px; margin-top: -1px; background: color-mix(in srgb, var(--ink) 30%, transparent); pointer-events: none; }
.days__fill { position: absolute; left: 0; top: -1px; height: 4px; width: 0; border-radius: 2px; background: var(--teal); }
.days__range { position: relative; z-index: 1; display: block; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.days__range:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.days__range::-webkit-slider-runnable-track { height: 2px; background: transparent; }
.days__range::-moz-range-track { height: 2px; background: transparent; }
.days__range::-webkit-slider-thumb { -webkit-appearance: none; width: var(--thumb); height: var(--thumb); margin-top: -12px; border-radius: 50%; background: var(--coral); border: 2px solid var(--ink); box-sizing: border-box; }
.days__range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--coral); border: 2px solid var(--ink); }
.days__hours { position: relative; height: 22px; margin: 0 calc(var(--thumb) / 2); }
.days__hour { position: absolute; top: 0; width: 1px; height: 5px; background: var(--ink-2); opacity: .45; }
.days__hour--day { height: 9px; top: -2px; opacity: .8; }
.days__hour-t { position: absolute; top: 8px; left: 0; transform: translateX(-50%); font: 500 10.5px/1.3 var(--f-mono); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.days__hour-t.is-start { transform: none; }
.days__hour-t.is-end { transform: translateX(-100%); }
.days__ticks { display: grid; grid-template-columns: 1fr 1fr; margin: 2px calc(var(--thumb) / 2) 0; font: 500 11px/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }

/* Play, and a peek at what comes next. */
.days__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); margin-top: var(--s-5); }
.days__play { display: inline-flex; align-items: center; gap: var(--s-3); min-width: 200px; min-height: 48px; padding: 5px var(--s-5) 5px 5px; border: 1px solid var(--ink); border-radius: 999px;
  background: var(--chalk); color: var(--ink); font: 500 15px/1.2 var(--f-ui); cursor: pointer; transition: background-color var(--t-colour) ease; }
.days__play:hover { background: var(--paper); }
.days__play:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.days__play-mark { position: relative; flex: none; width: 36px; height: 36px; display: grid; place-items: center; }
.days__play-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.days__play-mark circle { fill: none; stroke-width: 2; }
.days__play-base { stroke: var(--line); }
.days__play-ring { stroke: var(--teal); stroke-dasharray: 100; stroke-dashoffset: 100; }
.days__play.is-counting .days__play-ring { animation: days-dwell var(--dwell, 4500ms) linear forwards; }
@keyframes days-dwell { to { stroke-dashoffset: 0; } }
.days__play-icon { width: 0; height: 0; margin-left: 3px; border-left: 11px solid var(--ink); border-block: 7px solid transparent; }
.days__play[data-state="playing"] .days__play-icon { width: 11px; height: 12px; margin-left: 0; border: 0; border-inline: 3.5px solid var(--ink); }
.days__play[data-state="ended"] .days__play-icon { width: auto; height: auto; margin: 0; border: 0; }
.days__play[data-state="ended"] .days__play-icon::before { content: "↺"; font: 600 18px/1 var(--f-ui); color: var(--ink); }
.days__peek { margin: 0; min-width: 0; flex: 1 1 260px; display: flex; justify-content: flex-end; }
.days__peek-btn { display: inline-flex; align-items: baseline; gap: var(--s-2); max-width: 100%; min-height: 44px; padding: 10px 0; border: 0; background: none; color: var(--ink); cursor: pointer; text-align: left; font: 500 15px/1.3 var(--f-ui); }
.days__peek-k { flex: none; font: 500 11px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.days__peek-t { flex: none; font: 600 18px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.days__peek-s { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: italic 500 18px/1.3 var(--f-display); }
.days__peek-btn .arw { flex: none; color: var(--teal); }
.days__peek-btn:hover .days__peek-s, .days__peek-btn:focus-visible .days__peek-s { text-decoration: underline; text-underline-offset: 4px; }
.days__peek-end { font-size: 14px; color: var(--muted); align-self: center; }

/* On now, during the summit. */
.days__live { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin: var(--s-2) 0 0; padding: 2px 10px; border-radius: 999px; background: var(--coral-soft); color: var(--ink);
  font: 500 11px/1.6 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.days__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }

/* The two days and the full schedule read as one flow: the band keeps its
   top, and the space between it and the schedule is less than half what it was. */
.programme-dial + .programme-schedule { padding-top: var(--s-7); }

/* The session you jumped to glows for a moment. */
.agenda-card.is-flash { animation: days-flash 2600ms ease; }
@keyframes days-flash { 0%, 45% { box-shadow: 0 0 0 var(--s-3) var(--coral-soft), inset 0 0 0 100vmax var(--coral-soft); }
  100% { box-shadow: 0 0 0 var(--s-3) transparent, inset 0 0 0 100vmax transparent; } }

/* "See it in the full schedule" lands the session clear of the sticky day bar. */
main .agenda-card[id] { scroll-margin-top: var(--agenda-anchor-offset, 180px); }
.agenda-card:target { outline: 2px solid var(--coral); outline-offset: 4px; }

@media (max-width: 760px) {
  .programme-dial { padding: var(--s-8) 0 var(--s-6); }
  .programme-dial + .programme-schedule { padding-top: var(--s-6); }
  .days__slot { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); padding: var(--s-5); align-items: start; align-content: start; }
  .days__stage { min-height: 460px; }
  .days { --strip-h: 36px; }
  /* Too narrow for a face per session: a small pillar-coloured mark instead. */
  .days__dot { width: 10px; height: 10px; margin: -5px 0 0 -5px; background: var(--pc, var(--muted)); box-shadow: 0 0 0 2px var(--tint); opacity: .6; }
  .days__dot img { display: none; }
  .days__dot--twin { top: 22%; }
  .days__dot--plain { width: 6px; height: 6px; margin: -3px 0 0 -3px; }
  .days__dot.is-on { transform: scale(1.8); box-shadow: 0 0 0 2px var(--tint), 0 0 0 3px var(--ink); }
  .days__controls { gap: var(--s-3); }
  .days__bar { margin-top: var(--s-4); }
  .days__play { flex: 1 1 auto; justify-content: center; padding-right: var(--s-6); }
  .days__peek { flex-basis: 100%; justify-content: flex-start; }
}

/* Reduced motion: the card changes in place; nothing slides or grows. */
@media (prefers-reduced-motion: reduce) {
  .days__slot.is-in, .days__slot.is-out { animation: none !important; }
  .days__dot, .days__step { transition: none !important; }
  .days__dot.is-on, .days__dot.is-near { transform: none; }
  .days__play.is-counting .days__play-ring { animation: none; }
}

/* Print: the full schedule is the record; the dial is for the screen. */
@media print { .programme-dial { display: none; } }