/* Watch Live CTA — [mypl_watch_live_cta]
   Sized for a DARK backdrop (the home hero). .hero-section paints
   background-color:var(--hero-overlay) = rgba(15,23,42,.9) with
   background-blend-mode:multiply; multiply only ever darkens, so white text
   measures >=12:1 even over the lightest part of the hero photograph.

   Every selector is prefixed .mycta. Nothing here may match inside #sv2. */

/* Every colour below is a token so the component can sit on a dark or a light
   surface without a second copy of the rules. The DARK values are the literals
   this file has always shipped, so the home hero is byte-for-byte unmoved. */
.mycta {
    --mycta-ink:         #fff;                  /* heading, note, caption, digits */
    --mycta-solid-bg:    #fff;                  /* the Watch live pill */
    --mycta-solid-ink:   #111827;
    --mycta-solid-hover: #e5e7eb;
    --mycta-ghost-ink:   #fff;                  /* the View agenda pill */
    --mycta-ghost-hover: rgba(255, 255, 255, .14);
    --mycta-ring:        #fff;                  /* focus outline */

    /* .hero-section sets gap:0, so this supplies its own separation. */
    margin-top: 24px;
    text-align: center;
}

/* Light surface - the /agenda header (.sponsor-hero, background
   var(--bg-primary) = #FFF). The solid pill inverts to the site's --bg-inverse:
   #FFF on #111827 = 17.4:1, the same ratio as the dark hero's pill, the other
   way up. Fallbacks on every var() because these tokens live in the
   Oxygen-generated uploads/oxygen/css/variables.css, which can be regenerated. */
.mycta[data-mycta-theme="light"] {
    --mycta-ink:         var(--text-primary, #111827);
    --mycta-solid-bg:    var(--bg-inverse,   #111827);
    --mycta-solid-ink:   var(--text-inverse, #fff);
    --mycta-solid-hover: #374151;               /* #FFF on it = 9.0:1 */
    --mycta-ghost-ink:   var(--text-primary, #111827);
    --mycta-ghost-hover: rgba(17, 24, 39, .08);
    --mycta-ring:        var(--text-primary, #111827);

    /* The margin above separates this from the hero it sits under. Here the
       element is EMPTY for most of the event's life - before the stream opens
       and after it ends - and a margin on an empty flex item is not collapsed
       away, so it would sit under the pills as a permanent ghost gap.
       .spo-btn-cont already contributes padding-bottom:20px, which is exactly
       the gap between the pills themselves. */
    margin-top: 0;
}

/* An element with display:inline-flex ignores the [hidden] attribute unless we
   say so. All three forms on purpose: a descendant-only rule misses the root,
   and getting this wrong renders EVERY configured day at once, stacked. */
.mycta [hidden],
.mycta-live-wrap [hidden],
.mycta[hidden] {
    display: none !important;
}

/* ── phase visibility ─────────────────────────────────────────────────
   The server emits every phase group and states NO phase; the first paint
   writes data-phase and one rule below reveals the right one. A guest page
   can be 24h stale from Breeze's shared cache, so the server must never
   assert which phase is current. */
.mycta-countdown,
.mycta-live-wrap                                   { display: none; }
.mycta[data-phase="countdown"] .mycta-countdown    { display: block; }
.mycta[data-phase="open"]  .mycta-live-wrap,
.mycta[data-phase="ended"] .mycta-live-wrap,
.mycta[data-phase="none"]  .mycta-live-wrap        { display: block; }

/* Before the first paint there is no data-phase. Show the countdown, because
   its digits are server-rendered and correct without JS - the element this
   replaced worked that way and losing it would be a regression. */
.mycta:not([data-phase]) .mycta-countdown          { display: block; }

/* `ended` and `none` keep the watch control in the DOM but never show it: it
   is the window carrier aggState() reads to know the day has finished.
   Removing it would make the phase uncomputable. */
.mycta[data-phase="ended"] .mycta-day,
.mycta[data-phase="none"]  .mycta-day              { display: none; }

/* The caption is the text alternative to digits nobody can follow by ear, so
   it stays in the accessibility tree in EVERY phase - visually hidden rather
   than removed once the buttons are showing. */
.mycta[data-phase="open"]  .mycta-cap,
.mycta[data-phase="ended"] .mycta-cap,
.mycta[data-phase="none"]  .mycta-cap,
.mycta[data-caption="off"] .mycta-cap,
.mycta-status {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── countdown ────────────────────────────────────────────────────────
   Lifted verbatim from the Oxygen PHP element this replaces (block 64965,
   node 105) so the hero is visually unchanged, then scoped under .mycta.
   These classes have zero rules anywhere else on the site - verified across
   oxy-selectors.css, post-64965.css, all postmeta and all options. */
.mycta .countdown-wrapper {
    display: flex;
    gap: 14px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.mycta .countdown-box {
    background: color-mix(in srgb, var(--bg-primary) 10%, transparent);
    border-radius: 18px;
    /* min-width, not width: the original fixed 92px crowds a 3-digit day
       count, and padStart(2) never truncates so 100+ days does render. */
    min-width: 92px;
    height: 92px;
    padding: 0 6px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--bg-inverse) 12%, transparent);
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--text-inverse) 5%, transparent),
        0 10px 30px color-mix(in srgb, var(--text-inverse) 18%, transparent);
    -webkit-backdrop-filter: blur(12px);   /* without this the glass silently
                                              drops on Safari <=17 and iOS <=17 */
    backdrop-filter: blur(12px);
    transition: all 0.3s ease;
}
.mycta .countdown-box:hover { transform: translateY(-3px); }
.mycta .countdown-number {
    font-size: 28px;
    font-weight: 800;
    color: var(--mycta-ink);
    line-height: 1;
    text-shadow: 0 2px 10px color-mix(in srgb, var(--text-inverse) 15%, transparent);
}
.mycta .countdown-unit {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--mycta-ink);
    margin-top: 8px;
}

/* The old .countdown-label, now shared by all three phase headings. */
.mycta-heading {
    font-size: 15px;
    padding: 5px;
    border-radius: 5px;
    letter-spacing: 3px;
    color: var(--mycta-ink);
    text-align: center;
    margin: 0 0 14px;
    text-transform: uppercase;
    font-weight: 700;
}
.mycta-heading:empty { display: none; }

.mycta-note {
    margin: 0 0 12px;
    color: var(--mycta-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}
.mycta-note:empty { display: none; }

@media (max-width: 479px) {
    .mycta .countdown-wrapper { gap: 10px; }
    .mycta .countdown-box     { min-width: 68px; height: 68px; border-radius: 14px; }
    .mycta .countdown-number  { font-size: 25px; }
    .mycta .countdown-unit    { font-size: 11px; letter-spacing: 1.5px; }
}

.mycta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* Visibility is driven by data-phase (above), not by .is-painted. The buttons
   are display:none until a phase is known, so a stale Breeze-cached guess can
   never flash; the <noscript> rule in the markup removes them when JS is off. */
.mycta-live-wrap { position: relative; }

/* ── the two pills ───────────────────────────────────────────────────── */

.mycta-btn,
.mycta-toggle,
.mycta-agenda {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    /* ~40px tall: comfortably over the 24x24 floor (WCAG 2.5.8). Do not trim. */
    padding: 12px 22px;
    border-radius: 999px;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

/* Solid: dark #111827 on white #FFF, or white on dark - 17.4:1 either way.
   The border and the fill were always the same literal; one token says so. */
.mycta-btn,
.mycta-toggle {
    border: 2px solid var(--mycta-solid-bg);
    background: var(--mycta-solid-bg);
    color: var(--mycta-solid-ink);
}
.mycta-btn:hover,
.mycta-toggle:hover { background: var(--mycta-solid-hover); border-color: var(--mycta-solid-hover); }

/* Ghost: text and border in the same ink, >=12:1 on either surface. */
.mycta-agenda {
    border: 2px solid var(--mycta-ghost-ink);
    background: transparent;
    color: var(--mycta-ghost-ink);
}
.mycta-agenda:hover { background: var(--mycta-ghost-hover); color: var(--mycta-ghost-ink); }

/* The outline is the inverse of the surface, so it is clear of the solid pill
   and clear of the ghost pill's own border on both themes. */
.mycta-btn:focus-visible,
.mycta-toggle:focus-visible,
.mycta-agenda:focus-visible,
.mycta-track:focus-visible {
    outline: 3px solid var(--mycta-ring);
    outline-offset: 3px;
}
.mycta-btn:focus,
.mycta-toggle:focus,
.mycta-agenda:focus,
.mycta-track:focus { outline: 3px solid var(--mycta-ring); outline-offset: 3px; }
.mycta-btn:focus:not(:focus-visible),
.mycta-toggle:focus:not(:focus-visible),
.mycta-agenda:focus:not(:focus-visible),
.mycta-track:focus:not(:focus-visible) { outline: none; }

/* ── icon: a drawn triangle, never the "▶" character ──────────────────
   Screen readers announce U+25B6 as "black right-pointing triangle" and font
   coverage for it is patchy. */
.mycta-icon {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent currentColor;
}

/* Live: the triangle becomes a pulsing dot. #ef4444 on #FFF = 3.76:1, over the
   3:1 that 1.4.11 asks of a non-text indicator. It is never the ONLY signal —
   the caption says "Live now" in words (1.4.1). */
.mycta-btn[data-state="in"] .mycta-icon,
.mycta-toggle[data-state="in"] .mycta-icon {
    width: 11px;
    height: 11px;
    border: 0;
    border-radius: 50%;
    background: #ef4444;
    animation: mycta-pulse 2s ease-in-out infinite;
}
@keyframes mycta-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
}

/* Outlink icon: only on controls that genuinely window.open(...,'_blank') -
   the single button and each track item, never the toggle/denied/login. */
.mycta-outlink {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    font-size: 0.8em;
    opacity: 0.85;
}

.mycta-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* .mycta-track is flex-direction:column (name/time stacked); this wraps just
   the name + outlink icon into their own row so the icon sits beside the
   name instead of becoming a third stacked line. */
.mycta-track-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.mycta-caret {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    margin-left: 2px;
    border-style: solid;
    border-width: 6px 5px 0 5px;
    border-color: currentColor transparent transparent transparent;
    transition: transform .15s ease;
}
.mycta-toggle[aria-expanded="true"] .mycta-caret { transform: rotate(180deg); }

/* ── caption ─────────────────────────────────────────────────────────── */

/* Full opacity. NEVER dim caption text with opacity — that is exactly what
   dropped the agenda pill to 2.88:1 and failed 1.4.3. */
.mycta-cap {
    margin: 10px 0 0;
    color: var(--mycta-ink);
    font-size: 14px;
    line-height: 1.4;
}

/* .mycta-status is visually hidden by the phase block above. */

/* ── multi-track disclosure ──────────────────────────────────────────── */

.mycta-group { position: relative; display: inline-flex; }

.mycta-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    min-width: 260px;
    margin: 0;
    padding: 6px;
    list-style: none;
    text-align: left;
    background: #111827;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.mycta-menu li { margin: 0; padding: 0; list-style: none; }

.mycta-track {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    /* ~38px tall — over the 24x24 floor. */
    padding: 10px 14px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.mycta-track:hover { background: rgba(255, 255, 255, .12); }
.mycta-track-name { font-weight: 700; font-size: 15px; }
/* #D1D5DB on #111827 = 11.6:1. A solid lighter grey, not opacity. */
.mycta-track-when { color: #d1d5db; font-size: 13px; }

/* ── responsive ──────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .mycta { width: 100%; }
    .mycta-row { flex-direction: column; align-items: stretch; }
    .mycta-live-wrap,
    .mycta-group,
    .mycta-btn,
    .mycta-toggle,
    .mycta-agenda { width: 100%; box-sizing: border-box; }
    .mycta-menu {
        left: 0;
        right: 0;
        width: 100%;
        min-width: 0;
        transform: none;
        box-sizing: border-box;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mycta-btn[data-state="in"] .mycta-icon,
    .mycta-toggle[data-state="in"] .mycta-icon { animation: none; }
    .mycta-caret { transition: none; }
    /* The countdown box came with transition:all and a hover lift; the original
       element's own reduced-motion block did not cover them. */
    .mycta .countdown-box { transition: none; }
    .mycta .countdown-box:hover { transform: none; }
}

@media print {
    .mycta { display: none !important; }
}