/* ==========================================================================
   Conference programme (conference page)
   ========================================================================== */

.prog-hero-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; color: var(--gold-400); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--gold-400) 45%, transparent);
}
.prog-hero-link::after { content: '↓'; transition: transform var(--t) var(--ease); }
.prog-hero-link:hover::after { transform: translateY(3px); }

.prog { position: relative; }

/* Each kind of item has its colour, used for its dot, tag and edge. */
.prog-item { --tc: var(--line-strong); }
.prog-item.t-opening, .prog-item.t-closing { --tc: var(--gold-600); }
.prog-item.t-keynote { --tc: var(--accent); }
.prog-item.t-parallel { --tc: var(--info); }
.prog-item.t-plenary { --tc: var(--ok); }
.prog-item.t-break { --tc: var(--faint); }
.prog-item.t-transition { --tc: var(--line-strong); }

/* Loading */
.prog-loading { display: grid; gap: .8rem; }
.prog-loading span { height: 74px; border-radius: var(--r-md); background: linear-gradient(90deg, var(--surface-2), var(--surface-sunken), var(--surface-2)); background-size: 200% 100%; animation: prog-shimmer 1.4s linear infinite; }
@keyframes prog-shimmer { to { background-position: -200% 0; } }

/* Status note */
.prog-note {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .8rem 1.1rem; margin-bottom: var(--gap-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.prog-note p { margin: 0; flex: 1; min-width: 14rem; font-size: .92rem; color: var(--ink-2); }

/* Live bar: countdown before, now and next during, thanks after */
.prog-live {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  padding: 1.1rem 1.3rem; margin-bottom: var(--gap-4);
  color: #E9EEF6; background: linear-gradient(120deg, var(--navy-800), var(--navy-600));
  border-radius: var(--r-lg); box-shadow: var(--shadow-2);
}
.prog-live a:not(.btn) { color: var(--gold-400); }
.prog-live p { margin: 0; }
.prog-live-text { flex: 1; min-width: 14rem; display: grid; gap: .35rem; }
.prog-live-kicker { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-400); }
.prog-live-count { display: grid; padding-right: 1.2rem; border-right: 1px solid rgba(255, 255, 255, .14); }
.prog-live-count b { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; color: #FFF; letter-spacing: -.02em; }
.prog-live-count span { font-size: .78rem; color: #93A1B6; }
.prog-live-next { font-size: .9rem; color: #B8C3D4; }
.prog-progress { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .14); overflow: hidden; max-width: 28rem; }
.prog-progress i { display: block; height: 100%; border-radius: inherit; background: var(--gold-400); transition: width 600ms var(--ease); }
.prog-live.is-after { background: linear-gradient(120deg, #123D2E, #1F5A43); }

/* Tools: filters, search, time zone, print */
.prog-tools { display: flex; align-items: center; justify-content: space-between; gap: .8rem 1rem; flex-wrap: wrap; margin-bottom: var(--gap-4); }
.prog-filters, .prog-tools-right { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.prog-chip {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 38px;
  padding: .4rem .9rem; font: inherit; font-size: .88rem; font-weight: 500;
  color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill);
  cursor: pointer; transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.prog-chip svg { width: 16px; height: 16px; }
.prog-chip:hover { border-color: var(--accent); }
.prog-chip[aria-pressed='true'] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); font-weight: 600; }
.prog-search {
  display: flex; align-items: center; gap: .45rem; min-height: 38px; padding: 0 .85rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill);
}
.prog-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.prog-search svg { width: 16px; height: 16px; color: var(--faint); flex: none; }
.prog-search input { width: min(16rem, 52vw); padding: .45rem 0; font: inherit; font-size: .9rem; color: var(--ink); background: none; border: 0; outline: none; }

/* Layout */
.prog-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--gap-5); align-items: start; }
@media (max-width: 980px) { .prog-grid { grid-template-columns: 1fr; } }

/* The running order */
.prog-list { list-style: none; margin: 0; padding: 0; }
.prog-item { display: grid; grid-template-columns: 76px 26px minmax(0, 1fr); gap: 0 .7rem; scroll-margin-top: calc(var(--header-h) + 24px); }
.prog-time { display: grid; align-content: start; gap: .1rem; padding-top: 1.05rem; text-align: right; font-variant-numeric: tabular-nums; }
.prog-time b { font-family: var(--font-display); font-size: 1.12rem; color: var(--ink); letter-spacing: -.01em; }
.prog-time span { font-size: .85rem; color: var(--muted); }
.prog-time small { font-size: .72rem; color: var(--faint); }
.prog-time .prog-sast { color: var(--muted); }

.prog-rail { position: relative; display: flex; justify-content: center; }
.prog-rail::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: var(--line); }
.prog-item:first-child .prog-rail::before { top: 1.45rem; }
.prog-item:last-child .prog-rail::before { bottom: auto; height: 1.45rem; }
.prog-dot {
  position: relative; z-index: 1; width: 14px; height: 14px; margin-top: 1.2rem;
  border-radius: 50%; background: var(--surface); border: 3px solid var(--tc);
}
.prog-item.t-keynote .prog-dot, .prog-item.t-parallel .prog-dot { width: 18px; height: 18px; margin-top: 1.05rem; background: var(--tc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tc) 18%, transparent); }

.prog-card {
  margin-bottom: .85rem; padding: 1rem 1.15rem 1.1rem;
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--tc);
  border-radius: var(--r-md); box-shadow: var(--shadow-1);
  transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease-out);
}
.prog-card:hover { box-shadow: var(--shadow-2); }
.prog-item.t-break .prog-card, .prog-item.t-transition .prog-card { padding-block: .7rem .8rem; background: var(--surface-2); box-shadow: none; }
.prog-item.t-break .prog-card h3, .prog-item.t-transition .prog-card h3 { font-size: .98rem; font-weight: 600; color: var(--ink-2); }

.prog-card-top { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.prog-tag {
  padding: .18rem .6rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--tc) 80%, var(--ink)); background: color-mix(in srgb, var(--tc) 13%, transparent); border-radius: var(--r-pill);
}
.prog-venue { font-size: .8rem; color: var(--muted); }
.prog-venue::before { content: '·'; margin-right: .5rem; color: var(--faint); }
.prog-next-tag { font-size: .72rem; font-weight: 700; color: var(--gold-600); }
.prog-actions { margin-left: auto; display: flex; gap: .2rem; }
.prog-icon {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  color: var(--faint); background: none; border: 1px solid transparent; border-radius: 9px; cursor: pointer;
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
}
.prog-icon svg { width: 17px; height: 17px; }
.prog-icon:hover { color: var(--ink); background: var(--surface-2); border-color: var(--line); }
.prog-icon.is-done { color: var(--ok); }

.prog-card h3 { margin-top: .45rem; font-size: var(--step-1); line-height: 1.3; letter-spacing: -.01em; }
.prog-talk { margin-top: .35rem; font-family: var(--font-display); font-size: 1.02rem; font-style: italic; color: var(--ink-2); }
.prog-details { margin-top: .5rem; font-size: .92rem; color: var(--muted); }
mark { padding: 0 .1em; color: inherit; background: color-mix(in srgb, var(--accent) 38%, transparent); border-radius: 3px; }

.prog-speaker { display: flex; align-items: center; gap: .7rem; margin-top: .75rem; }
.prog-speaker > span:last-child { display: grid; }
.prog-speaker b { font-size: .95rem; }
.prog-speaker small { font-size: .82rem; color: var(--muted); }
.prog-avatar {
  display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%;
  font-family: var(--font-display); font-weight: 700; font-size: .9rem;
  color: var(--accent-ink); background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
}
.prog-speaker.is-tbc .prog-avatar { color: var(--faint); background: var(--surface-2); border: 1.5px dashed var(--line-strong); }
.prog-speaker.is-tbc b { color: var(--ink-2); font-weight: 600; }
.prog-tbc { color: var(--faint); font-style: italic; }

/* Parallel sessions: rooms side by side */
.prog-rooms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: .7rem; margin-top: .9rem; }
.prog-room { padding: .8rem .9rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
.prog-room-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.prog-room-head b { font-family: var(--font-display); font-size: .92rem; }
.prog-track { margin-top: .25rem; font-size: .88rem; font-weight: 500; color: var(--ink-2); }
.prog-chair { margin-top: .15rem; font-size: .8rem; color: var(--muted); }
.prog-pres { margin: .6rem 0 0; padding-left: 1.1rem; display: grid; gap: .45rem; }
.prog-pres li { font-size: .86rem; }
.prog-pres li::marker { color: var(--info); font-weight: 700; }
.prog-pres b { display: block; font-weight: 600; line-height: 1.35; }
.prog-pres span { font-size: .8rem; color: var(--muted); }
.prog-empty { margin-top: .55rem; font-size: .8rem; color: var(--faint); font-style: italic; }
.prog-join {
  display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .65rem;
  font-size: .78rem; font-weight: 700; color: #FFF; background: #5B5FC7; border-radius: var(--r-pill); text-decoration: none;
}
.prog-join svg { width: 14px; height: 14px; }

/* Where the day is */
.prog-item.is-past .prog-card { opacity: .62; box-shadow: none; }
.prog-item.is-past .prog-dot { background: var(--tc); }
.prog-item.is-live .prog-card { border-color: var(--danger); border-left-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 16%, transparent), var(--shadow-2); }
.prog-item.is-live .prog-dot { border-color: var(--danger); background: var(--danger); animation: prog-pulse 1.8s ease-out infinite; }
@keyframes prog-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 45%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
.prog-item.is-flash .prog-card { animation: prog-flash 2.2s ease-out; }
@keyframes prog-flash { 0%, 30% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent), var(--shadow-2); } 100% { box-shadow: var(--shadow-1); } }

.prog-none { padding: 2rem; text-align: center; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }
.prog-none p { margin-bottom: .9rem; color: var(--ink-2); }

/* Side panel */
.prog-side { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: .9rem; }
@media (max-width: 980px) { .prog-side { position: static; } }
.prog-panel { padding: 1.1rem 1.15rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.prog-panel-quiet { background: transparent; box-shadow: none; }
.prog-panel-title { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.prog-panel .btn { white-space: normal; text-align: center; line-height: 1.3; }
.prog-panel .btn svg { flex: none; width: 16px; height: 16px; margin-right: .4rem; }
.prog-side, .prog-panel { min-width: 0; }
.prog-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem .7rem; margin-top: .8rem; }
.prog-stats div { display: grid; }
.prog-stats b { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.15; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.prog-stats span { font-size: .78rem; color: var(--muted); }
.prog-team { list-style: none; margin: .6rem 0 0; padding: 0; }
.prog-team li { display: grid; gap: .05rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.prog-team li:first-child { border-top: 0; }
.prog-team span { font-size: .78rem; color: var(--muted); }
.prog-team b { font-size: .9rem; font-weight: 600; }
.prog-print-foot { display: none; }

/* Phones */
@media (max-width: 600px) {
  .prog-item { grid-template-columns: 54px 18px minmax(0, 1fr); gap: 0 .45rem; }
  .prog-time b { font-size: 1rem; }
  .prog-time span, .prog-time small { font-size: .72rem; }
  .prog-card { padding: .85rem .9rem .95rem; }
  .prog-tools, .prog-tools-right { align-items: stretch; }
  .prog-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -1rem; padding-inline: 1rem; }
  .prog-filters::-webkit-scrollbar { display: none; }
  .prog-chip { flex: none; }
  .prog-search { flex: 1; }
  .prog-search input { width: 100%; }
  .prog-live-count { border-right: 0; padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .prog-loading span, .prog-item.is-live .prog-dot, .prog-item.is-flash .prog-card { animation: none; }
}

/* Printing: only the programme, in ink-friendly colours */
@media print {
  body.is-printing-programme { background: #FFF; }
  body.is-printing-programme > *:not(main),
  body.is-printing-programme main > section:not(#programme),
  body.is-printing-programme .mchat-launcher,
  body.is-printing-programme .prog-tools,
  body.is-printing-programme .prog-live,
  body.is-printing-programme .prog-actions,
  body.is-printing-programme .prog-panel-quiet,
  body.is-printing-programme .prog-panel .btn { display: none !important; }
  body.is-printing-programme #programme { padding: 0; }
  body.is-printing-programme .prog-grid { display: block; }
  body.is-printing-programme .prog-side { position: static; display: block; margin-top: 1rem; break-inside: avoid; }
  body.is-printing-programme .prog-card, body.is-printing-programme .prog-panel { box-shadow: none; break-inside: avoid; }
  body.is-printing-programme .prog-item.is-past .prog-card { opacity: 1; }
  body.is-printing-programme .prog-print-foot { display: block; margin-top: 1rem; font-size: .8rem; color: #555; }
  body.is-printing-programme [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Keynote speakers */
.prog-speakers { margin-bottom: var(--gap-5); }
.prog-speakers-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .9rem; }
.prog-speakers-head span { font-size: .82rem; color: var(--muted); }
.prog-speaker-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--gap-3); }
.prog-sp {
  display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease);
}
.prog-sp:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); }
.prog-sp-photo {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 3.6; padding: 0; overflow: hidden;
  background: linear-gradient(160deg, var(--navy-700), var(--navy-900)); border: 0; cursor: pointer;
}
.prog-sp-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: transform 700ms var(--ease-out); }
.prog-sp:hover .prog-sp-photo img { transform: scale(1.04); }
.prog-sp-photo::after { content: ''; position: absolute; inset: auto 0 0; height: 38%; background: linear-gradient(to top, rgba(10, 18, 32, .45), transparent); pointer-events: none; }
.prog-sp-photo > span { display: grid; place-items: center; height: 100%; font-family: var(--font-display); font-size: 3rem; font-weight: 700; color: var(--gold-400); }
.prog-sp.is-tba { border-style: dashed; box-shadow: none; background: var(--surface-2); }
.prog-sp.is-tba:hover { transform: none; box-shadow: none; }
.prog-sp.is-tba .prog-sp-photo { cursor: default; background: repeating-linear-gradient(135deg, var(--surface-sunken) 0 14px, var(--surface-2) 14px 28px); }
.prog-sp.is-tba .prog-sp-photo::after { display: none; }
.prog-sp.is-tba .prog-sp-photo > span { color: var(--faint); }
.prog-sp-body { display: grid; align-content: start; gap: .3rem; padding: 1rem 1.15rem 1.2rem; }
.prog-sp-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-600); }
[data-theme='dark'] .prog-sp-kicker { color: var(--gold-400); }
.prog-sp-kicker a { color: inherit; }
.prog-sp h3 { font-size: var(--step-1); letter-spacing: -.01em; }
.prog-sp-line { font-size: .86rem; color: var(--muted); line-height: 1.45; }
.prog-sp-talk { margin-top: .2rem; font-family: var(--font-display); font-size: .95rem; font-style: italic; color: var(--ink-2); }
.prog-sp-more { justify-self: start; margin-top: .45rem; padding: 0; font: inherit; font-size: .86rem; font-weight: 600; color: var(--link); background: none; border: 0; cursor: pointer; }
.prog-sp-more::after { content: ' →'; }
.prog-sp-more:hover { text-decoration: underline; }

.prog-avatar.is-photo { object-fit: cover; object-position: center 20%; background: var(--surface-2); }
.prog-name-link { padding: 0; font: inherit; font-size: .95rem; font-weight: 700; color: var(--ink); text-align: left; background: none; border: 0; border-bottom: 1px dotted var(--faint); cursor: pointer; }
.prog-name-link:hover { color: var(--link); border-bottom-color: currentColor; }

/* Biography dialog */
/* The site's reset removes the margin that centres a dialog; put it back. */
.prog-dialog { position: fixed; inset: 0; margin: auto; height: fit-content; width: min(760px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; color: var(--ink); background: var(--surface); border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-3); }
.prog-dialog::backdrop { background: rgba(7, 12, 21, .6); backdrop-filter: blur(4px); }
.prog-dialog[open] { animation: prog-pop 280ms var(--ease-out); }
@keyframes prog-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.prog-dialog-inner { position: relative; display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.prog-dialog-photo { width: 100%; height: 100%; min-height: 320px; object-fit: cover; object-position: center 20%; }
.prog-dialog-text { display: grid; align-content: start; gap: .4rem; padding: 1.6rem 1.7rem 1.7rem; overflow-y: auto; max-height: calc(100dvh - 2rem); }
.prog-dialog-text h3 { font-size: var(--step-3); letter-spacing: -.02em; }
.prog-dialog-bio { display: grid; gap: .8rem; margin-top: .6rem; color: var(--ink-2); line-height: 1.7; }
.prog-dialog-text .btn { justify-self: start; }
.prog-dialog-x { position: absolute; top: .6rem; right: .6rem; z-index: 1; width: 38px; height: 38px; font-size: 1.5rem; line-height: 1; color: var(--ink); background: color-mix(in srgb, var(--surface) 85%, transparent); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; }
@media (max-width: 640px) {
  .prog-dialog-inner { grid-template-columns: 1fr; }
  .prog-dialog-photo { min-height: 0; height: 260px; }
}
@media (prefers-reduced-motion: reduce) { .prog-dialog[open], .prog-sp, .prog-sp-photo img { animation: none; transition: none; } }
@media print { body.is-printing-programme .prog-sp-more, body.is-printing-programme .prog-dialog { display: none !important; } body.is-printing-programme .prog-sp { break-inside: avoid; box-shadow: none; } }

/* Phones: speakers as compact cards, photo beside the words */
@media (max-width: 600px) {
  .prog-speaker-grid { gap: .7rem; }
  .prog-sp { grid-template-rows: none; grid-template-columns: 112px minmax(0, 1fr); }
  .prog-sp-photo { aspect-ratio: auto; height: 100%; min-height: 150px; }
  .prog-sp-photo > span { font-size: 2rem; }
  .prog-sp-body { padding: .8rem .9rem .9rem; }
  .prog-sp h3 { font-size: 1.05rem; }
  .prog-sp-line { font-size: .8rem; }
  .prog-sp-talk { font-size: .86rem; }
  .prog-sp.is-tba .prog-sp-photo { min-height: 110px; }
  .prog-venue::before { display: none; }
}