/* Surgical Tracks subpage — page-specific styles, tokens from tokens.css */

.track-hero {
  background: linear-gradient(160deg, var(--syhs-ground) 0%, var(--syhs-deep-violet) 62%, var(--syhs-navy) 100%);
  color: var(--syhs-white);
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
.track-hero__heading {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tighter);
  margin: 0 0 var(--space-3);
}
.track-hero__dek { max-width: 52ch; font-size: var(--fs-body-lg); color: rgba(255, 255, 255, 0.85); margin: 0; }

/* ===========================================================================
   TRACK DETAIL PAGE (track-detail.html)
   ========================================================================= */
.track-detail__hero { color: var(--syhs-white); padding-block: clamp(3rem, 6vw, 5rem); }
.track-detail__eyebrow { font-size: 0.78rem; text-transform: uppercase; letter-spacing: var(--tracking-wide); opacity: 0.8; margin: 0 0 0.5rem; }
.track-detail__name { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.6rem); font-weight: 700; letter-spacing: var(--tracking-tighter); margin: 0 0 0.7rem; }
.track-detail__blurb { max-width: 62ch; font-size: 1.05rem; color: rgba(255, 255, 255, 0.9); margin: 0; }
.track-detail__body { background: var(--syhs-paper); padding-block: clamp(2.5rem, 5vw, 4rem); }

.tier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.tier-card {
  display: flex;
  flex-direction: column;
  background: var(--syhs-white);
  border: 1px solid var(--syhs-line-on-light);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: 0 16px 40px -26px rgba(22, 18, 31, 0.3);
}
.tier-card__label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--syhs-signal-alt); margin: 0 0 0.6rem; }
.tier-card__audience { font-weight: 600; color: var(--syhs-ink); margin: 0 0 0.5rem; }
.tier-card__desc { color: var(--syhs-ink-soft); font-size: 0.95rem; margin: 0 0 var(--space-3); flex-grow: 1; }
.tier-card__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0 0 var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--syhs-line-on-light); }
.tier-card__meta dt { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--syhs-ink-soft); margin-bottom: 0.15rem; }
.tier-card__meta dd { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--syhs-ink); }
.tier-card__cta { text-align: center; justify-content: center; }
.tier-card--unavailable { align-items: flex-start; background: var(--syhs-paper); border-style: dashed; }
.tier-card__unavailable { color: var(--syhs-ink-soft); font-size: 0.92rem; margin: 0; }

@media (max-width: 720px) {
  .tier-grid { grid-template-columns: 1fr; }
}

.track-list { background: var(--syhs-paper); padding-block: clamp(3rem, 6vw, 5rem); }
.track-list__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.ticket-card {
  display: flex;
  flex-direction: column;
  background: var(--syhs-white);
  border: 1px solid var(--syhs-line-on-light);
  border-radius: var(--radius-md);
  overflow: clip;
  box-shadow: 0 12px 32px -18px rgba(22, 18, 31, 0.22);
  transition: box-shadow 220ms var(--ease-editorial);
}
/* transform on hover is GSAP-driven (script.js) */
.ticket-card:hover { box-shadow: 0 20px 40px -16px rgba(22, 18, 31, 0.3); }

.ticket-card__bar { height: 6px; }
.ticket-card[data-accent="a"] .ticket-card__bar { background: var(--syhs-signal-alt); }
.ticket-card[data-accent="b"] .ticket-card__bar { background: var(--syhs-tint-mint); }
.ticket-card[data-accent="c"] .ticket-card__bar { background: var(--syhs-ground); }
.ticket-card[data-accent="d"] .ticket-card__bar { background: var(--syhs-tint-violet); }
.ticket-card[data-accent="e"] .ticket-card__bar { background: var(--syhs-navy); }
.ticket-card[data-accent="f"] .ticket-card__bar { background: var(--syhs-deep-violet); }

.ticket-card__body { padding: var(--space-3); flex-grow: 1; }
.ticket-card__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--syhs-ink-soft);
  margin: 0 0 0.5rem;
}
.ticket-card__title { margin: 0 0 0.5rem; font-size: 1.35rem; font-weight: 700; letter-spacing: var(--tracking-tight); color: var(--syhs-ink); }
.ticket-card__desc { margin: 0 0 var(--space-3); color: var(--syhs-ink-soft); font-size: 0.95rem; }

.ticket-card__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin: 0; padding-top: var(--space-2); border-top: 1px solid var(--syhs-line-on-light); }
.ticket-card__meta dt { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--syhs-ink-soft); margin-bottom: 0.15rem; }
.ticket-card__meta dd { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--syhs-ink); }

.ticket-card__cta {
  display: block;
  text-align: center;
  padding: 0.85rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--syhs-white);
  background: var(--syhs-ground);
  text-decoration: none;
}
.ticket-card__cta:hover { background: var(--syhs-deep-violet); }

.track-list__note {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border: 1px dashed var(--syhs-line-on-light);
  border-radius: var(--radius-md);
  color: var(--syhs-ink-soft);
  font-size: 0.9rem;
  max-width: 70ch;
}

@media (max-width: 960px) {
  .track-list__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .track-list__grid { grid-template-columns: 1fr; }
  .ticket-card__meta { grid-template-columns: repeat(3, 1fr); }
}

/* ===========================================================================
   TRACK SHOWCASE — one large animated anatomical structure at a time
   Lively aurora background + shaded rotating structures + colourful tickets.
   ========================================================================= */
.track-stage {
  position: relative;
  overflow: hidden;
  background: var(--syhs-ground);
  color: var(--syhs-white);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.track-stage__aurora {
  position: absolute; inset: -25%;
  background:
    radial-gradient(38% 38% at 22% 28%, rgba(102,211,161,0.55), transparent 62%),
    radial-gradient(42% 42% at 80% 22%, rgba(150,130,202,0.6), transparent 62%),
    radial-gradient(48% 48% at 62% 86%, rgba(14,71,106,0.65), transparent 62%),
    radial-gradient(40% 40% at 15% 80%, rgba(63,154,118,0.5), transparent 62%);
  filter: blur(46px);
  animation: aurora 20s ease-in-out infinite alternate;
}
@keyframes aurora { to { transform: translate3d(5%, -4%, 0) rotate(9deg) scale(1.12); } }

.stage {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--space-3);
}
.stage__nav {
  width: 54px; height: 54px; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--syhs-white); cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 200ms, transform 200ms, border-color 200ms;
}
.stage__nav:hover { background: var(--syhs-tint-mint); color: var(--syhs-ground); border-color: var(--syhs-tint-mint); transform: scale(1.08); }

.stage__hero { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 60vh; justify-content: center; }
.stage__glow {
  position: absolute; top: 34%; width: min(46vw, 460px); aspect-ratio: 1;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(102,211,161,0.5), rgba(150,130,202,0.28) 45%, transparent 68%);
  filter: blur(34px);
  animation: glowpulse 5s ease-in-out infinite;
}
@keyframes glowpulse { 0%,100% { opacity: 0.7; transform: translateY(-50%) scale(1); } 50% { opacity: 1; transform: translateY(-50%) scale(1.12); } }
.stage__object {
  position: relative;
  width: min(60vw, 520px); height: min(60vw, 520px); max-width: 100%;
  perspective: 1000px;
  display: grid; grid-template: 1fr / 1fr; place-items: center;
}
.stage__object svg { width: 100%; height: 100%; transform-style: preserve-3d; }
.stage__tilt { position: relative; z-index: 3; width: 100%; transform-style: preserve-3d; will-change: transform; grid-area: 1 / 1; }
.stage__img { width: 100%; height: auto; display: block; transform-style: preserve-3d; -webkit-user-drag: none; user-select: none;
  filter: drop-shadow(0 26px 34px rgba(20,10,40,0.6)); }

/* Rotating glowing halo ring behind the structure */
.stage__halo {
  grid-area: 1 / 1; z-index: 1; align-self: center; justify-self: center;
  width: 108%; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0 6%, rgba(102,211,161,0.6) 16%, transparent 30%,
    rgba(150,130,202,0.65) 46%, transparent 58%,
    rgba(63,154,118,0.55) 72%, transparent 84%,
    rgba(102,211,161,0.45) 95%, transparent);
  -webkit-mask: radial-gradient(circle, transparent 55%, #000 60%, #000 74%, transparent 80%);
  mask: radial-gradient(circle, transparent 55%, #000 60%, #000 74%, transparent 80%);
  filter: blur(3px); opacity: 0.9;
  animation: haloSpin 18s linear infinite;
}
@keyframes haloSpin { to { transform: rotate(360deg); } }

/* Glowing spark dots orbiting the structure */
.stage__orbit { position: relative; grid-area: 1 / 1; z-index: 2; width: 96%; aspect-ratio: 1; align-self: center; justify-self: center; animation: orbitSpin 16s linear infinite; }
.stage__orbit i {
  position: absolute; width: 12px; height: 12px; margin: -6px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff, var(--syhs-tint-mint) 55%, rgba(102,211,161,0) 75%);
  box-shadow: 0 0 14px 3px rgba(102,211,161,0.75);
}
.stage__orbit i:nth-child(1) { top: 0;    left: 50%; }
.stage__orbit i:nth-child(2) { top: 50%;  left: 100%; width: 8px; height: 8px; margin: -4px; }
.stage__orbit i:nth-child(3) { top: 100%; left: 50%; width: 14px; height: 14px; margin: -7px; }
.stage__orbit i:nth-child(4) { top: 50%;  left: 0;   width: 9px; height: 9px; margin: -4.5px; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }

/* Soft contact shadow on the floor beneath the structure */
.stage__shadow {
  grid-area: 1 / 1; z-index: 0; align-self: end; justify-self: center;
  width: 50%; height: 6%; margin-bottom: 4%;
  background: radial-gradient(ellipse at center, rgba(10,4,24,0.6), transparent 72%);
  filter: blur(7px);
}

/* Hover the structure → name + supervisors + More drop in beneath it */
.stage__reveal {
  width: min(560px, 92%);
  margin-top: var(--space-3);
  text-align: center;
  opacity: 0; transform: translateY(14px);
  transition: opacity 300ms var(--ease-editorial), transform 300ms var(--ease-editorial);
  pointer-events: none;
}
.stage__hero:hover .stage__reveal,
.stage__hero:focus-within .stage__reveal { opacity: 1; transform: translateY(0); pointer-events: auto; }
.stage__track-name { font-size: 1.5rem; font-weight: 700; letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-3); }
.stage__track-name span { display: block; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 0.9rem; color: var(--syhs-tint-mint); letter-spacing: 0; }
.stage__sups { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin-bottom: var(--space-3); }
.stage__sup { width: 66px; margin: 0; text-align: center; }
.stage__sup img { width: 66px; height: 66px; border-radius: 999px; object-fit: cover; object-position: 50% 30%;
  border: 2px solid rgba(255,255,255,0.55); background: rgba(255,255,255,0.1); box-shadow: 0 4px 14px -6px rgba(0,0,0,0.5); }
.stage__sup figcaption { font-size: 0.6rem; color: rgba(255,255,255,0.75); margin-top: 0.25rem; line-height: 1.2; }
.stage__more { display: inline-flex; }

/* Track selector dots */
.stage__dots { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: var(--space-3); }
.stage__dot {
  border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.75); border-radius: 999px; padding: 0.4rem 0.85rem;
  font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer;
  transition: background 180ms, color 180ms, border-color 180ms;
}
.stage__dot:hover { color: var(--syhs-white); }
.stage__dot.is-active { background: var(--syhs-tint-mint); color: var(--syhs-ground); border-color: var(--syhs-tint-mint); }

/* --- Colourful two-ticket chooser -------------------------------------- */
.track-tickets { position: relative; z-index: 1; }
.track-tickets__back { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); color: var(--syhs-white); font: inherit; font-weight: 600; cursor: pointer; padding: 0.5rem 1rem; border-radius: 999px; margin-bottom: var(--space-3); }
.track-tickets__back:hover { background: var(--syhs-tint-mint); color: var(--syhs-ground); }
.track-tickets__head { color: var(--syhs-white); text-align: center; margin-bottom: var(--space-4); }
.track-tickets__eyebrow { font-size: 0.78rem; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--syhs-tint-mint); margin: 0 0 0.4rem; }
.track-tickets__name { font-size: clamp(2rem, 1.4rem + 2.5vw, 3rem); font-weight: 700; letter-spacing: var(--tracking-tight); margin: 0 0 0.4rem; }
.track-tickets__prompt { margin: 0; color: rgba(255,255,255,0.85); }

.ticket-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); max-width: 60rem; margin: 0 auto; }
.ticket {
  position: relative; display: flex; text-decoration: none; min-height: 190px;
  border-radius: 18px; overflow: hidden; color: var(--syhs-white);
  box-shadow: 0 24px 50px -22px rgba(20,10,40,0.7);
  transition: transform 240ms var(--ease-editorial), box-shadow 240ms;
}
.ticket:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 34px 60px -20px rgba(20,10,40,0.8); }
.ticket[data-accent="a"] { background: linear-gradient(135deg, var(--syhs-ground), var(--syhs-deep-violet)); }
.ticket[data-accent="b"] { background: linear-gradient(135deg, var(--syhs-navy), var(--syhs-deep-violet)); }
.ticket[data-accent="c"] { background: linear-gradient(135deg, var(--syhs-deep-violet), var(--syhs-tint-violet)); }
.ticket[data-accent="d"] { background: linear-gradient(135deg, var(--syhs-navy), var(--syhs-tint-mint)); }
.ticket[data-accent="e"] { background: linear-gradient(135deg, var(--syhs-ground), var(--syhs-tint-mint)); }
.ticket[data-accent="f"] { background: linear-gradient(135deg, var(--syhs-navy), var(--syhs-ground)); }
.ticket[data-accent="g"] { background: linear-gradient(135deg, var(--syhs-deep-violet), var(--syhs-navy)); }
.ticket[data-accent="h"] { background: linear-gradient(135deg, var(--syhs-ground), var(--syhs-signal-alt)); }
.ticket__stub { width: 66px; flex-shrink: 0; display: grid; place-items: center; border-inline-end: 2px dashed rgba(255,255,255,0.4); }
.ticket__stub span { writing-mode: vertical-rl; transform: rotate(180deg); text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; font-size: 0.78rem; }
.ticket__main { position: relative; flex: 1; padding: var(--space-4); display: flex; flex-direction: column; }
.ticket__punch { position: absolute; inset-inline-start: 60px; width: 16px; height: 16px; border-radius: 999px; background: var(--syhs-ground); z-index: 2; }
.ticket__punch--top { top: -8px; }
.ticket__punch--bottom { bottom: -8px; }
.ticket__tier { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--syhs-tint-mint); margin: 0 0 0.4rem; }
.ticket__audience { font-weight: 600; margin: 0 0 var(--space-3); font-size: 0.95rem; color: rgba(255,255,255,0.92); }
.ticket__price { margin-top: auto; display: flex; align-items: baseline; gap: 0.5rem; }
.ticket__price-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.7); }
.ticket__price-val { font-family: var(--font-sans); font-weight: 700; font-size: 1.5rem; }
.ticket__cta { margin-top: var(--space-2); font-weight: 600; color: var(--syhs-tint-mint); font-size: 0.9rem; }
.ticket--soon { opacity: 0.8; pointer-events: none; }

/* Live seats-remaining on the ticket */
.ticket__seats { margin: 0 0 var(--space-3); font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.9); }
.ticket__seats-num { font-family: var(--font-sans); font-weight: 800; font-size: 1.05rem; color: #fff; }
.ticket__seats--soft { color: rgba(255,255,255,0.8); font-weight: 600; }
.ticket__seats--low { color: #ffd9a8; }
.ticket__seats--full { color: #ffc2c2; font-weight: 700; }
.ticket__bar { display: block; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.22); margin-top: 0.4rem; overflow: hidden; }
.ticket__bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--syhs-tint-mint), #fff); }
.ticket__seats--low .ticket__bar > span { background: linear-gradient(90deg, #ffb347, #ffd9a8); }

/* Seats in the detail meta card + register note */
.seats-meta { display: inline-flex; align-items: baseline; gap: 0.3rem; }
.seats-meta strong { font-size: 1.05rem; }
.seats-meta--low { color: #b45309; }
.seats-meta--full { color: #b91c1c; }
.seats-meta__bar { display: block; height: 5px; border-radius: 999px; background: var(--syhs-line-on-light); margin-top: 0.45rem; overflow: hidden; }
.seats-meta__bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--syhs-signal), var(--syhs-signal-alt)); }
.detail-register__note { margin: 0.7rem 0 0; font-size: 0.9rem; color: var(--syhs-ink-soft); }
.detail-register__note strong { color: var(--syhs-ink); }
.btn.is-disabled { opacity: 0.55; pointer-events: none; cursor: not-allowed; }
.ticket__soon { font-weight: 700; margin: 0 0 0.4rem; }
.ticket__soon-note { font-size: 0.85rem; color: rgba(255,255,255,0.8); margin: 0; }

@media (max-width: 700px) {
  .stage__object { width: 74vw; }
  .stage__nav { width: 44px; height: 44px; }
  .ticket-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .track-stage__aurora, .stage__glow, .stage__halo, .stage__orbit { animation: none; }
}

/* --- Supervisor grid + gap flag (reused by track-detail.html) ----------- */
.supervisor-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin: 0 0 var(--space-4); }
.supervisor-card { width: 140px; text-align: center; }
.supervisor-card__photo { width: 100%; height: auto; aspect-ratio: 1/1; border-radius: 999px; object-fit: cover; object-position: 50% 30%; margin: 0 0 0.6rem;
  background: var(--syhs-white); box-shadow: 0 8px 22px -12px rgba(22,18,31,0.55); }
.supervisor-card__name { font-size: 0.82rem; font-weight: 700; color: var(--syhs-ink); margin: 0; line-height: 1.25; }
.supervisor-card__title { font-size: 0.72rem; color: var(--syhs-ink-soft); margin: 0.2rem 0 0; line-height: 1.3; }
.track-expand__gap {
  display: flex; gap: 0.6rem; align-items: flex-start;
  padding: var(--space-3); margin: 0 0 var(--space-4);
  background: rgba(200, 60, 60, 0.06);
  border: 1px dashed rgba(200, 60, 60, 0.35);
  border-radius: var(--radius-sm);
  color: var(--syhs-ink-soft); font-size: 0.88rem;
}

@media (max-width: 860px) {
  .track-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ticket-row { grid-template-columns: 1fr; }
  .track-reveal__sup { width: 54px; }
  .track-reveal__sup img { width: 54px; height: 54px; }
}

/* --- Track detail: back link, meta, objectives, schedule, speakers ------- */
.track-detail__back { display: inline-block; color: rgba(255,255,255,0.85); text-decoration: none; font-weight: 600; margin-bottom: var(--space-3); }
.track-detail__back:hover { color: #fff; }
.track-detail__sub { font-size: 0.8rem; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--syhs-ink-soft); margin: var(--space-5) 0 var(--space-3); }
.detail-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin: 0 0 var(--space-4); }
.detail-meta > div { background: var(--syhs-white); border: 1px solid var(--syhs-line-on-light); border-radius: var(--radius-sm); padding: var(--space-3); }
.detail-meta dt { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--syhs-ink-soft); margin-bottom: 0.2rem; }
.detail-meta dd { margin: 0; font-weight: 700; color: var(--syhs-ink); font-size: 0.95rem; }
.detail-desc { font-size: 1.05rem; line-height: 1.6; color: var(--syhs-ink); max-width: 68ch; margin: 0; }
.detail-list { margin: 0; padding-inline-start: 1.2rem; color: var(--syhs-ink); line-height: 1.7; max-width: 68ch; }
.detail-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.detail-chips li { background: var(--syhs-white); border: 1px solid var(--syhs-line-on-light); border-radius: 999px; padding: 0.35rem 0.8rem; font-size: 0.85rem; font-weight: 600; color: var(--syhs-ink); }
.schedule { display: grid; gap: var(--space-3); }
.schedule__day { background: var(--syhs-white); border: 1px solid var(--syhs-line-on-light); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.schedule__day-title { font-size: 1rem; font-weight: 700; color: var(--syhs-ground); margin: 0 0 var(--space-2); }
.schedule__list { margin: 0; }
.schedule__row { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-3); padding: 0.5rem 0; border-top: 1px solid var(--syhs-line-on-light); }
.schedule__row:first-child { border-top: none; }
.schedule__row dt { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--syhs-ink-soft); font-size: 0.85rem; }
.schedule__row dd { margin: 0; color: var(--syhs-ink); font-size: 0.92rem; }
.detail-register { margin-top: var(--space-5); }
@media (max-width: 640px) {
  .detail-meta { grid-template-columns: 1fr 1fr; }
  .schedule__row { grid-template-columns: 1fr; gap: 0.2rem; }
}

.detail-desc--muted { color: var(--syhs-ink-soft); font-size: 0.98rem; margin: 0 0 var(--space-3); max-width: 68ch; }

/* ===========================================================================
   v5 — bigger showcase title + supervisors, tall vertical tickets
   ========================================================================== */
/* Track name + supervisors on the 3D showcase */
.stage__track-name { font-size: clamp(2.1rem, 5vw, 3.6rem) !important; line-height: 1.02; margin-bottom: var(--space-2) !important; }
.stage__track-name span { font-size: clamp(0.95rem, 1.6vw, 1.25rem) !important; letter-spacing: 0.05em; }
.stage__sups-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 700; color: rgba(255,255,255,0.6); margin: 0 0 0.9rem; }
.stage__sups { gap: 1.1rem !important; }
.stage__sup { width: 128px !important; }
.stage__sup img { width: 128px !important; height: 128px !important; border-width: 3px !important;
  box-shadow: 0 10px 26px -10px rgba(0,0,0,0.65) !important; transition: transform 300ms var(--ease-editorial), border-color 300ms; }
.stage__sup:hover img { transform: translateY(-5px) scale(1.05); border-color: var(--syhs-tint-mint) !important; }
.stage__sup figcaption { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.5rem !important; }
.stage__sup-name { font-size: 0.8rem !important; font-weight: 700; color: #fff; line-height: 1.2; }
.stage__sup-title { font-size: 0.68rem; color: rgba(255,255,255,0.6); line-height: 1.25; }

/* Tickets — stacked vertically, big */
.ticket-row { grid-template-columns: 1fr !important; max-width: 46rem !important; gap: var(--space-4) !important; }
.ticket { min-height: 15rem; }
.ticket__main { padding: clamp(1.5rem, 3vw, 2.4rem) !important; }
.ticket__eyebrow { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: rgba(255,255,255,0.68); margin: 0 0 0.5rem; }
.ticket__tier { font-size: clamp(2.2rem, 5.4vw, 3.6rem) !important; font-weight: 800; line-height: 1; letter-spacing: var(--tracking-tighter);
  text-transform: uppercase; margin: 0 0 0.6rem !important; }
.ticket__audience { font-size: clamp(1rem, 1.6vw, 1.2rem) !important; margin-bottom: var(--space-3) !important; }
.ticket__seats { font-size: 0.95rem !important; }
.ticket__seats-num { font-size: 1.35rem !important; }
.ticket__price-label { font-size: 0.78rem !important; }
.ticket__price-val { font-size: 2rem !important; }
.ticket__stub span { font-size: 1.05rem !important; letter-spacing: 0.22em !important; }

/* Actions — the green one is the big primary */
.ticket__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: var(--space-4); }
.ticket__btn { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; font-weight: 800;
  border-radius: 999px; transition: transform 200ms var(--ease-editorial), background 200ms, box-shadow 200ms; }
.ticket__btn--go { background: var(--syhs-tint-mint); color: #10331f;
  font-size: clamp(1.05rem, 1.9vw, 1.35rem); padding: 1rem 2.1rem;
  box-shadow: 0 16px 34px -14px rgba(102,211,161,0.75); }
.ticket__btn--go:hover { transform: translateY(-3px) scale(1.03); background: #7ee6b6; box-shadow: 0 22px 44px -14px rgba(102,211,161,0.9); }
.ticket__btn--ghost { border: 1.5px solid rgba(255,255,255,0.45); color: #fff; font-size: 0.95rem; padding: 0.85rem 1.5rem; font-weight: 700; }
.ticket__btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,0.12); transform: translateY(-2px); }

/* ===========================================================================
   TRACK DETAIL v2 — organised, colourful, animated
   ========================================================================== */
:root { --td-c1: var(--syhs-ground); --td-c2: var(--syhs-deep-violet); }
.detail-hero--rich { position: relative; overflow: hidden; }
.detail-hero--rich::after { content: ""; position: absolute; inset: -40%;
  background: radial-gradient(45% 45% at 78% 30%, rgba(255,255,255,0.16), transparent 65%); pointer-events: none;
  animation: tdglow 14s ease-in-out infinite alternate; }
@keyframes tdglow { to { transform: translate3d(-6%, 6%, 0) scale(1.15); } }

/* Key facts */
.fact-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-5); }
.fact { background: var(--syhs-white); border: 1px solid var(--syhs-line-on-light); border-radius: var(--radius-md);
  padding: var(--space-3); position: relative; overflow: hidden; box-shadow: 0 14px 34px -26px rgba(22,18,31,0.45); }
.fact::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--td-c1), var(--td-c2)); }
.fact__k { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: var(--syhs-ink-soft); margin-bottom: 0.35rem; }
.fact__val { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.05; color: var(--syhs-ink); font-variant-numeric: tabular-nums; }
.fact__val small { font-size: 0.95rem; font-weight: 600; color: var(--syhs-ink-soft); }
.fact__val--sm { font-size: 0.98rem; font-weight: 700; line-height: 1.3; }
.fact__val--full { color: #b91c1c; font-size: 1.2rem; }
.fact__sub { display: block; font-size: 0.74rem; color: var(--syhs-ink-soft); margin-top: 0.25rem; }
.fact__bar { display: block; height: 6px; border-radius: 999px; background: var(--syhs-line-on-light); margin-top: 0.5rem; overflow: hidden; }
.fact__bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--syhs-signal), var(--syhs-signal-alt)); }

.detail-intro { font-size: clamp(1.05rem, 1.8vw, 1.32rem); line-height: 1.6; color: var(--syhs-ink); max-width: 58rem; margin: 0 0 var(--space-6); }
.detail-block { margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.detail-h { display: flex; align-items: baseline; gap: 0.8rem; font-size: clamp(1.4rem, 2.8vw, 2.1rem); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-3); color: var(--syhs-ink); }
.detail-h__num { font-family: var(--font-serif); font-style: italic; font-size: 0.85em; color: var(--td-c1); }
.detail-sub { color: var(--syhs-ink-soft); margin: -0.4rem 0 var(--space-4); max-width: 46rem; }

/* Objectives */
.gain-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-3); }
.gain { display: flex; gap: 0.9rem; background: var(--syhs-white); border: 1px solid var(--syhs-line-on-light); border-radius: var(--radius-md);
  padding: var(--space-3); transition: transform 240ms var(--ease-editorial), box-shadow 240ms, border-color 240ms; }
.gain:hover { transform: translateY(-4px); border-color: var(--td-c1); box-shadow: 0 20px 40px -26px rgba(22,18,31,0.5); }
.gain__n { font-weight: 800; font-size: 1.1rem; color: var(--td-c1); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.gain p { margin: 0; line-height: 1.45; color: var(--syhs-ink); font-size: 0.97rem; }

/* Programme timeline */
.timeline { display: grid; gap: var(--space-4); }
.tl-day { background: var(--syhs-white); border: 1px solid var(--syhs-line-on-light); border-radius: var(--radius-md); padding: var(--space-4); }
.tl-day__title { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; font-size: 1.05rem; margin: 0 0 var(--space-3); color: var(--syhs-ink); }
.tl-day__chip { background: linear-gradient(135deg, var(--td-c1), var(--td-c2)); color: #fff; font-size: 0.7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em; padding: 0.3rem 0.7rem; border-radius: 999px; }
.tl-list { list-style: none; margin: 0; padding: 0 0 0 0.4rem; border-left: 2px solid var(--syhs-line-on-light); display: grid; gap: 0.9rem; }
.tl-item { position: relative; display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.9rem; padding-left: 1.1rem; align-items: start; }
.tl-item__dot { position: absolute; left: -7px; top: 0.45em; width: 11px; height: 11px; border-radius: 50%;
  background: var(--td-c1); box-shadow: 0 0 0 3px var(--syhs-white); }
.tl-item__time { font-size: 0.82rem; font-weight: 700; color: var(--syhs-ink-soft); font-variant-numeric: tabular-nums; }
.tl-item__what { line-height: 1.45; color: var(--syhs-ink); font-size: 0.96rem; }

/* Full-programme PDF, under the timeline. Track colour, not a generic grey
   box — it's still part of this track's programme, not site furniture. */
.detail-pdf { margin: var(--space-4) 0 0; padding: 0.9rem 1.1rem; border-radius: var(--radius-sm);
  font-size: 0.92rem; line-height: 1.5; }
.detail-pdf--pending { background: color-mix(in srgb, var(--td-c1) 8%, var(--syhs-white));
  border: 1px dashed color-mix(in srgb, var(--td-c1) 35%, transparent); color: var(--syhs-ink-soft); }
.detail-pdf--pending strong { color: var(--syhs-ink); }
.detail-pdf__link { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700;
  color: #fff; background: linear-gradient(135deg, var(--td-c1), var(--td-c2));
  padding: 0.7rem 1.1rem; border-radius: 999px; text-decoration: none; }
.detail-pdf__link:hover { filter: brightness(1.08); }

/* Included */
.inc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-3); }
.inc { display: flex; align-items: center; gap: 0.8rem; background: color-mix(in srgb, var(--syhs-signal) 8%, var(--syhs-white));
  border: 1px solid color-mix(in srgb, var(--syhs-signal) 22%, transparent); border-radius: var(--radius-md); padding: var(--space-3); font-weight: 600; color: var(--syhs-ink); }
.inc__ic { font-size: 1.35rem; line-height: 1; }

/* Supervisors — larger */
.sup-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }
.sup-card { width: 160px; text-align: center; }
.sup-card__photo { width: 100%; height: auto; aspect-ratio: 1/1; border-radius: 999px; object-fit: cover; object-position: 50% 30%;
  margin: 0 0 0.7rem; background: var(--syhs-white); box-shadow: 0 14px 30px -16px rgba(22,18,31,0.6);
  transition: transform 280ms var(--ease-editorial), box-shadow 280ms; }
.sup-card:hover .sup-card__photo { transform: translateY(-6px) scale(1.04); box-shadow: 0 22px 44px -18px rgba(22,18,31,0.7); }
.sup-card__name { font-size: 0.95rem; font-weight: 800; color: var(--syhs-ink); margin: 0; line-height: 1.25; }
.sup-card__title { font-size: 0.76rem; color: var(--syhs-ink-soft); margin: 0.25rem 0 0; line-height: 1.35; }

/* Faculty — sponsor-style marquee of name cards */
.detail-block--faculty { background: var(--syhs-ground); color: #fff; border-radius: var(--radius-md); padding: clamp(1.5rem, 4vw, 2.5rem); overflow: hidden; }
.detail-block--faculty .detail-h { color: #fff; }
.detail-block--faculty .detail-h__num { color: var(--syhs-tint-mint); opacity: 0.9; }
.detail-block--faculty .detail-sub { color: rgba(255,255,255,0.75); }
.fac-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.fac-marquee__track { display: flex; width: max-content; animation: facscroll 34s linear infinite; }
.fac-marquee:hover .fac-marquee__track { animation-play-state: paused; }
.fac-marquee__group { display: flex; gap: var(--space-3); padding-inline-end: var(--space-3); }
@keyframes facscroll { to { transform: translateX(-50%); } }
.fac-card { display: inline-flex; align-items: center; gap: 0.7rem; white-space: nowrap; font-weight: 700; font-size: 1rem; color: #fff;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 0.7rem 1.4rem 0.7rem 0.7rem;
  transition: background 220ms, border-color 220ms, transform 220ms; }
.fac-card:hover { background: rgba(255,255,255,0.14); border-color: var(--syhs-tint-mint); transform: translateY(-3px); }
.fac-card__mark { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; font-weight: 800; font-size: 0.9rem;
  background: linear-gradient(135deg, var(--syhs-tint-mint), var(--syhs-signal-alt)); color: #0f2e20; }

/* Register CTA */
.detail-cta { background: linear-gradient(135deg, var(--td-c1), var(--td-c2)); color: #fff; border-radius: var(--radius-md);
  padding: clamp(1.6rem, 4vw, 2.6rem); box-shadow: 0 30px 60px -34px rgba(22,18,31,0.7); }
.detail-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.detail-cta__title { font-size: clamp(1.35rem, 3vw, 2.1rem); margin: 0 0 0.4rem; letter-spacing: var(--tracking-tight); }
.detail-cta__sub { margin: 0; color: rgba(255,255,255,0.88); }
.detail-cta__btn { display: inline-flex; align-items: center; gap: 0.6rem; background: var(--syhs-tint-mint); color: #10331f;
  text-decoration: none; font-weight: 800; font-size: clamp(1.05rem, 2vw, 1.3rem); padding: 1rem 2.1rem; border-radius: 999px;
  box-shadow: 0 16px 34px -14px rgba(0,0,0,0.6); transition: transform 200ms, background 200ms; }
.detail-cta__btn:hover { transform: translateY(-3px) scale(1.03); background: #7ee6b6; }

@media (max-width: 640px) {
  .tl-item { grid-template-columns: 1fr; gap: 0.2rem; }
  .sup-card { width: 130px; }
}

/* ============================================================================
   TRACK LIST — all eight tracks, visible at once
   Built to the client's reference sheet, then re-skinned on 2026-08-24 around
   the designed doctor cards they supplied (the "Doctors" folder).

   Each band carries, left to right:
     the track's image slot · the designed doctor cards · the track's name ·
     every supervisor's name in print

   COLOUR: each track's hue is sampled straight out of its own design, so the
   site and the cards cannot drift apart. The band darkens that hue (36% into
   ink) and lightens it for accents (62% toward white) — those two figures are
   the strongest the colour can be while every band still clears WCAG AA;
   the worst measured case is Dermatology at 4.63:1. Do not raise them without
   re-measuring: the yellow and the pale blue have almost no headroom.
   ========================================================================== */
.tracklist-sec { position: relative; overflow: hidden;
  background: var(--syhs-ink); color: var(--syhs-white);
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4rem, 9vw, 7rem); }
.tracklist-sec > .wrap { position: relative; z-index: 1; }
.tracklist-head { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.tracklist-head h2 { margin: 0 0 0.5rem; font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); letter-spacing: var(--tracking-tight); color: #fff; }
.tracklist-head p { margin: 0; font-size: var(--fs-body-lg); color: rgba(255,255,255,0.78); }

.tracklist { display: grid; gap: clamp(0.6rem, 1.4vw, 0.9rem); }

/* --- One track band ------------------------------------------------------ */
.tk { position: relative; display: grid; overflow: hidden; isolation: isolate;
  scroll-margin-block-start: 6rem;
  grid-template-columns: minmax(0, 2.3fr) minmax(0, 0.95fr) minmax(0, 0.8fr);
  align-items: center; gap: clamp(0.75rem, 1.6vw, 1.4rem);
  padding: clamp(0.7rem, 1.4vw, 1rem);
  border-radius: var(--radius-sm); text-decoration: none; color: inherit;
  background: linear-gradient(96deg,
      color-mix(in srgb, var(--tk-deep) 86%, #000) 0%,
      var(--tk-deep) 48%,
      color-mix(in srgb, var(--tk-hue) 42%, var(--syhs-ink)) 100%);
  transition: transform 260ms var(--ease-editorial), box-shadow 260ms; }
.tk:hover { transform: translateY(-3px); box-shadow: 0 26px 52px -30px rgba(0,0,0,0.95); }
.tk:focus-visible { outline: 3px solid var(--tk-bright); outline-offset: 3px; }

/* --- The track's own image, behind the whole band -------------------------
   Three layers: the colour gradient on .tk, the photograph over it, then a
   scrim of the same gradient over that. The scrim is what keeps the track's
   colour the thing you actually see — the photograph reads as texture.

   The three numbers below — photo brightness 0.9, scrim 0.9, and the 40% in
   --tk-bright — were solved together against the brightest 1% of each supplied
   image. They give the photograph as much presence as the text will allow:
   worst measured case is ENT's accent at 4.84:1, and the set still clears AA
   (4.69:1) if any image were swapped for a pure white one. Re-measure if a
   background is replaced with something markedly brighter. */
.tk__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--tk-bg); background-size: cover; background-position: center;
  filter: brightness(0.9) saturate(0.9); }
.tk__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.9;
  background: linear-gradient(96deg,
      color-mix(in srgb, var(--tk-deep) 92%, #000) 0%,
      var(--tk-deep) 48%,
      color-mix(in srgb, var(--tk-hue) 42%, var(--syhs-ink)) 100%); }
.tk > *:not(.tk__bg):not(.tk__scrim) { position: relative; z-index: 2; }

/* --- The designed doctor cards ------------------------------------ */
.tkp { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
/* These cards are mostly transparent by design — only the logo, the name panel
   and the cut-out figure are painted. So they get no plate behind them and no
   frame: the band's own colour is what shows through, which is how the artwork
   was drawn to be used. `contain`, not `cover`, so nothing is cropped. */
.tkp__slot { flex: 1 1 0; min-width: 0; max-width: 9rem;
  aspect-ratio: 560 / 586;
  transition: transform 300ms var(--ease-editorial); }
.tkp__img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tk:hover .tkp__slot { transform: translateY(-3px); }
.tk__soon-label { margin: 0; font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1.1rem, 0.85rem + 0.8vw, 1.5rem); color: rgba(255,255,255,0.82); }

/* --- The track's name -------------------------------------------- */
.tk__id { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.tk__name { margin: 0; font-weight: 800; line-height: 1.02;
  font-size: clamp(1.15rem, 0.75rem + 1.4vw, 2rem);
  letter-spacing: var(--tracking-tight); color: #fff; }
.tk__word { margin: 0.1rem 0 0; font-weight: 400; line-height: 1.05;
  font-size: clamp(0.95rem, 0.7rem + 0.9vw, 1.5rem); color: rgba(255,255,255,0.9); }
.tk__cta { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.55rem;
  font-size: 0.82rem; font-weight: 700; color: var(--tk-bright); }
.tk__cta span { transition: transform 200ms; }
.tk:hover .tk__cta span { transform: translateX(4px); }
/* 0.9, not 0.72: the yellow and pale-blue bands are light enough that a
   softer white drops under AA (Dermatology measured 3.99:1). */
.tk__cta--soon { color: rgba(255,255,255,0.9); font-weight: 600; }

/* --- Their names -------------------------------------------------- */
.tk__roster { display: flex; align-items: center; min-width: 0;
  padding-inline-start: clamp(0.4rem, 1vw, 0.9rem);
  border-inline-start: 1px solid color-mix(in srgb, var(--tk-hue) 35%, transparent); }
.tk__names { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.tk__names li { font-size: clamp(0.72rem, 0.62rem + 0.28vw, 0.88rem); line-height: 1.4;
  color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- The eight colours, taken from the designs ---------------------------- */
[data-track] {
  --tk-deep:   color-mix(in srgb, var(--tk-hue) 36%, var(--syhs-ink)); /* band wash */
  --tk-bright: color-mix(in srgb, var(--tk-hue) 40%, #fff);            /* text on that wash — see the note above .tk__bg */
  /* The light end of every gradient that carries white text — the detail hero,
     the day chips, the register panel. 38% is the cap: above it the three pale
     hues (Dermatology, ENT, Ophthalmology) push white text under AA. It was at
     72%, which put the Dermatology hero at 2.07:1. */
  --tk-mid:    color-mix(in srgb, var(--tk-hue) 38%, var(--syhs-ink));
}
:root[data-track] { --td-c1: var(--tk-deep); --td-c2: var(--tk-mid); }

/* Band gradients mix the hue 42% into the ink, not 46%.

   With the client's palette in place, 46% put white text on Dermatology's
   yellow at 4.41:1 against a 4.5 requirement — the lightest stop of the band
   gradient resolves to rgb(125,122,80), which is simply too pale to carry white.
   42% measures 5.00:1 on that same worst case and is not perceptibly less
   yellow. 44% would also pass, by 0.19, which is not a margin worth having.

   The client's own track palette, supplied 2026-09-03. These are the exact
   values from their colour sheet — earlier the site carried hues sampled from
   the doctor-card artwork, which were close but not these. */
[data-track="general-surgery"]    { --tk-hue: #2E4F88; }  /* navy      */
[data-track="orthopedic-surgery"] { --tk-hue: #3A6868; }  /* deep teal */
[data-track="plastic-surgery"]    { --tk-hue: #B43C51; }  /* red       */
[data-track="ent"]                { --tk-hue: #22E4EB; }  /* cyan      */
[data-track="dermatology"]        { --tk-hue: #F5F48A; }  /* yellow    */
[data-track="urology"]            { --tk-hue: #4B4B4B; }  /* graphite  */
[data-track="ophthalmology"]      { --tk-hue: #98D3FF; }  /* pale blue */
[data-track="obgyn"]              { --tk-hue: #8363D8; }  /* violet    */

/* --- Mobile is authored, not shrunk -------------------------------------- */
@media (max-width: 63.99em) {
  .tk { grid-template-columns: 1fr; align-items: start;
    gap: 0.75rem 0.9rem; padding: 0.9rem;
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--tk-deep) 86%, #000) 0%,
        var(--tk-deep) 55%,
        color-mix(in srgb, var(--tk-hue) 42%, var(--syhs-ink)) 100%); }
  .tk__id   { grid-row: 1; }
  .tkp      { grid-row: 2; overflow-x: auto; padding-bottom: 0.2rem;
              scrollbar-width: none; }
  .tkp::-webkit-scrollbar { display: none; }
  .tkp__slot { flex: 0 0 auto; }
  .tkp__img { height: 5.5rem; }
  .tk__roster { grid-row: 3; align-items: flex-start;
    border-inline-start: 0; border-block-start: 1px solid color-mix(in srgb, var(--tk-hue) 35%, transparent);
    padding: 0.6rem 0 0; }
  .tk__names { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.1rem 0.9rem; }
}
@media (max-width: 29.99em) {
  .tk__names { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .tk, .tkp__slot, .tk__cta span { transition: none; }
  .tk:hover, .tk:hover .tkp__slot { transform: none; }
}

/* ============================================================================
   TRACK SUPERVISORS — the faces, made prominent
   "For the Surgical Track, photos of all associated doctors/supervisors must be
   prominently displayed." They now sit directly under the workshop programme,
   at portrait size rather than thumbnail size, ringed in the track's colour.
   ========================================================================== */
/* Flex, not grid: supervisor counts are 3–6, so a trailing row of one should
   centre under the others rather than align to column 1. */
.sup-grid { display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.25rem, 3vw, 2.25rem); }
.sup-card { flex: 0 1 12rem; max-width: 13rem; margin: 0; text-align: center; }

/* The ring is the track colour, so the faces read as belonging to this track. */
.sup-card__ring { display: block; position: relative; margin: 0 0 0.9rem;
  border-radius: 999px; padding: 4px;
  background: linear-gradient(150deg, var(--td-c2), var(--td-c1));
  transition: transform 280ms var(--ease-editorial), box-shadow 280ms; }
.sup-card__photo { display: block; width: 100%; height: auto; aspect-ratio: 1/1;
  border-radius: 999px; object-fit: cover; object-position: 50% 28%;
  margin: 0; background: var(--syhs-white);
  border: 3px solid var(--syhs-white); }
/* A supervisor confirmed ahead of their photograph. Same circle, same ring, same
   footprint in the grid — so the row does not reflow when the picture arrives —
   with their initials in place of the face. Deliberately quiet: it should read
   as "not yet", not as a graphic element competing with the real portraits. */
.sup-card__initials { display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 1/1; border-radius: 999px;
  background: var(--syhs-white); border: 3px solid var(--syhs-white);
  font-size: 1.9rem; font-weight: 800; letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--td-c1) 55%, var(--syhs-ink)); }

.sup-card:hover .sup-card__ring { transform: translateY(-6px) scale(1.03);
  box-shadow: 0 24px 46px -20px color-mix(in srgb, var(--td-c1) 70%, transparent); }
.sup-card:hover .sup-card__photo { transform: none; }
.sup-card__name { font-size: 1.02rem; font-weight: 800; color: var(--syhs-ink); margin: 0; line-height: 1.25; }
.sup-card__title { font-size: 0.82rem; color: var(--syhs-ink-soft); margin: 0.3rem 0 0; line-height: 1.4; }

@media (max-width: 47.99em) {
  .sup-grid { gap: 1.25rem 1rem; }
  .sup-card { flex: 0 1 8rem; }
  .sup-card__name { font-size: 0.92rem; }
  .sup-card__title { font-size: 0.76rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sup-card__ring { transition: none; }
  .sup-card:hover .sup-card__ring { transform: none; }
}

/* ============================================================================
   TRACK DETAIL — the page carries its track's colour
   The hero was already coloured but everything below it was the same neutral
   light page on all eight tracks. The tint is deliberately faint (6% of the
   hue): enough that Plastic Surgery reads warm and ENT reads cool, nowhere
   near enough to threaten the dark body text.
   ========================================================================== */
:root[data-track] body { background: color-mix(in srgb, var(--tk-hue) 14%, #fff); }
:root[data-track] .track-detail__body { background: transparent; }
:root[data-track] .detail-block--faculty { background: color-mix(in srgb, var(--tk-hue) 22%, transparent); }

/* Blocks stay white so the copy inside them keeps its own contrast against a
   known ground; only their edges pick the colour up. */
:root[data-track] .fact,
:root[data-track] .gain,
:root[data-track] .inc,
:root[data-track] .tl-day {
  background: #fff;
  border-color: color-mix(in srgb, var(--tk-hue) 38%, var(--syhs-line-on-light)); }

/* --- Hero actions: jump to the programme, and switch tier ----------------- */
.detail-actions { display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(0.75rem, 2vw, 1.25rem); margin-top: clamp(1.25rem, 3vw, 1.75rem); }

.detail-actions__btn { display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 48px; padding: 0.8rem 1.5rem; border-radius: 999px;
  font-weight: 700; font-size: 1rem; text-decoration: none;
  background: #fff; color: var(--td-c1);
  transition: transform 200ms, box-shadow 200ms; }
.detail-actions__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -16px rgba(0,0,0,0.55); }
.detail-actions__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.detail-actions__btn span { transition: transform 200ms; }
.detail-actions__btn:hover span { transform: translateY(2px); }

/* The two tiers, side by side, so a track's second programme is never hidden. */
.tier-switch { display: flex; gap: 0.4rem; padding: 0.3rem; border-radius: 999px;
  background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.22); }
.tier-switch__opt { display: flex; flex-direction: column; line-height: 1.15;
  padding: 0.5rem 1rem; border-radius: 999px; text-decoration: none;
  font-size: 0.92rem; font-weight: 700; color: #fff;
  transition: background 180ms; }
.tier-switch__opt small { font-weight: 500; font-size: 0.72rem; color: rgba(255,255,255,0.82); }
.tier-switch__opt:hover { background: rgba(255,255,255,0.16); }
.tier-switch__opt.is-current { background: #fff; color: var(--td-c1); }
.tier-switch__opt.is-current small { color: var(--td-c1); opacity: 0.78; }
.tier-switch__opt.is-closed { color: rgba(255,255,255,0.72); cursor: default; }
.tier-switch__opt.is-closed:hover { background: none; }
.tier-switch__opt.is-closed small { color: rgba(255,255,255,0.66); }

@media (max-width: 40em) {
  .detail-actions { flex-direction: column; align-items: stretch; }
  .detail-actions__btn { justify-content: center; }
  .tier-switch { justify-content: center; }
  .tier-switch__opt { flex: 1 1 0; text-align: center; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .detail-actions__btn, .detail-actions__btn span { transition: none; }
  .detail-actions__btn:hover { transform: none; }
  .detail-actions__btn:hover span { transform: none; }
}

/* The supervisor card is now a link to that person's own page. */
.sup-card__link { display: block; text-decoration: none; color: inherit; border-radius: var(--radius-sm); }
.sup-card__link:focus-visible { outline: 3px solid var(--td-c1); outline-offset: 4px; }