/**
 * HubSpot: this file must be named module.css in the custom module folder (auto-loaded).
 * Repo copy: styles.css (same contents, for local reference).
 *
 * AC Single Game Tickets — v2. Forked from hubspot/Schedule/styles.css.
 *
 * Everything stays scoped under .acfc-schedule-2026, which is the scope the whole
 * sheet is written against and the selector the script boots from. SGT-only
 * overrides are scoped under .acfc-sgt-2026 and collected at the end of the file
 * rather than edited inline, so a diff against the schedule module still reads.
 * Legacy .custom-schedule-wrp selectors are kept only where the HubSpot theme
 * depends on them.
 */

 /* ==========================================================================
   Tokens
   ========================================================================== */

   .acfc-schedule-2026 {
    user-select: none;
    /* Brand */
    --acfc-sch-rosa: #f1b1a5;
    --acfc-sch-rosa-faint: #f1b1a580; /* 50 % opacity — sidebar scrollbar at rest */
    --acfc-sch-rosa-dark: #e0a094;
    --acfc-sch-rosa-soft: rgba(241, 177, 165, 0.16);
    --acfc-sch-rosa-glow: rgba(241, 177, 165, 0.32);
    --acfc-sch-ink: #1c1c1c;
    --acfc-sch-ink-soft: #3d3d3d;
    --acfc-sch-muted: #6b7280;
    --acfc-sch-faint: #898c8f;

    /* Surfaces */
    --acfc-sch-panel: #ffffff;
    --acfc-sch-surface: #fafaf8;
    --acfc-sch-surface-warm: #f6f4f1;
    --acfc-sch-edge: #e8e6e3;
    --acfc-sch-edge-soft: rgba(0, 0, 0, 0.07);

    /* Elevation: e1 hairline, e2 cards, e3 floating surfaces */
    --acfc-sch-shadow-e1: 0 1px 2px rgba(28, 20, 16, 0.05), 0 1px 3px rgba(28, 20, 16, 0.04);
    --acfc-sch-shadow-e2: 0 8px 28px rgba(28, 20, 16, 0.1), 0 2px 6px rgba(28, 20, 16, 0.05);
    --acfc-sch-shadow-e3: 0 22px 60px rgba(28, 20, 16, 0.18), 0 4px 12px rgba(28, 20, 16, 0.07);
    --acfc-sch-shadow-rosa: 0 22px 60px rgba(28, 20, 16, 0.16), 0 0 0 1px rgba(241, 177, 165, 0.3);

    /* Geometry */
    --acfc-sch-radius-sm: 8px;
    --acfc-sch-radius-md: 14px;
    --acfc-sch-radius-lg: 20px;
    --acfc-sch-radius-full: 9999px;

    /* Optical correction for icons set beside all-caps type, and zero by default
       because the body font does not need one.

       Centring an icon against caps only needs correcting when the cap band is
       off-centre in its line box. Cap centre sits capHeight/2 above the baseline;
       the line box centre sits (ascent - descent)/2 above it. So the correction
       needed is (capHeight - (ascent - descent))/2, which is zero whenever
       ascent - descent == capHeight.

       Inter: 0.969 - 0.242 = 0.727, and capHeight is 0.727. Identical, so caps are
       already centred at any line-height and any lift here makes icons ride high.

       The whole module is Inter now, so 0px is the right answer everywhere and
       this token exists mainly as the place that records why. The button rule
       used to override it to 0.5px for Anton, whose caps genuinely do sit high;
       that override is gone with the font. Two components still override it —
       .acfc-sch-broadcast__label and .acfc-sch-chip — on the strength of how they
       actually render rather than this arithmetic. */
    --acfc-sch-icon-lift: 0px;

    /* Motion */
    --acfc-sch-ease: cubic-bezier(0.23, 1, 0.32, 1);
    --acfc-sch-lift: 0 -3px;
    --acfc-sch-lift-transition: translate 0.32s var(--acfc-sch-ease), box-shadow 0.32s var(--acfc-sch-ease), border-color 0.32s ease;

    /* Layout.
       Height of the pinned site header, and the line everything sticky in this
       module rests below. The AnnouncementBar module pins the header at the
       viewport top with `position: sticky` and `z-index: 9998` at every
       breakpoint, and 9998 beats this module's 60 outright, so anything of ours
       that pins above this line is simply covered for the whole scroll.

       Desktop measures a 40px announcement strip plus a ~63px nav row. The strip
       is the part that moves: it tightens to 38px at 768px and grows to 46px at
       480px to fit a wrapped two-line promo, while the nav row drops to 56px at
       991px. Those are the tiers in the responsive section.

       This is a sticky `top` offset, not margin: it only decides where things
       settle while scrolling and adds no gap at page load. Drop it to 0px on any
       page that renders no pinned header. */
    --acfc-sch-header-clear: 153px;
    /* How far a scroll target must clear to land below both the header and the
       docked nav: the header, plus the bar's own height (40px control + padding
       and borders ≈ 64px) and its 1.5rem bottom margin. Used by the view panels,
       month dividers and cards, so a fragment jump or a calendar click lands
       under the nav rather than behind it. */
    --acfc-sch-nav-clear: calc(var(--acfc-sch-header-clear) + 88px);
    /* Caps the card list column. Without it the list runs to whatever the theme
       container gives it and the rows read as mostly whitespace between the
       opponent and the CTA. The shell is wider than this to fit the sidebar. */
    --acfc-sch-max-width: 750px;
    /* Desktop sidebar calendar column, and the gap between it and the list. */
    /* 232px of panel plus the 8px scrollbar gutter below. Widened rather than
       taken out of the panels, so the cards keep their size and the whole column
       gains the gutter — the three shell max-widths built on this token grow with
       it, which is right, because the column really is 8px wider now. */
    --acfc-sch-sidebar-width: 240px;
    /* Clear space between the panels and the scrollbar. Without it the thumb runs
       flush against the card edges, reading as a stripe attached to them. */
    --acfc-sch-sidebar-gutter: 8px;
    --acfc-sch-layout-gap: 24px;
    /* Space either side of the rule dividing the schedule from the promo row:
       .acfc-sch-layout's padding-bottom above it, .acfc-sch-promo's padding-top
       below. A token rather than the clamp twice, because the two only look
       right while they match — editing one alone puts the rule off centre. */
    --acfc-sch-promo-rule-gap: clamp(1.5rem, 3vw, 2.25rem);
    /* Both tokens are the same stack on purpose. Display type used to be Anton,
       which carried the distinction by family alone; it is now carried by weight
       and tracking, following 2027Renewals:

         - headings: 800, negative tracking (-0.01em to -0.03em, tighter as the
           size grows, because Inter uppercase sprawls at display sizes)
         - small caps controls and labels: 700, tracking left positive, since at
           those sizes letters need separating rather than pulling in
         - body: inherits 400

       The token is kept rather than folded into --acfc-sch-body so the ~20 rules
       that opt into display type still say so, and so reintroducing a display
       face later is a one-line change. */
    --acfc-sch-display: Inter, 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    --acfc-sch-body: Inter, 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
}

/* The module reads left-aligned regardless of theme text-align settings. */
.text-center .acfc-schedule-2026,
.acfc-schedule-2026.text-center {
    text-align: left !important;
}

.acfc-schedule-2026 {
    font-family: var(--acfc-sch-body);
    color: var(--acfc-sch-ink);
}

.acfc-schedule-2026 *,
.acfc-schedule-2026 *::before,
.acfc-schedule-2026 *::after {
    box-sizing: border-box;
}

.acfc-schedule-2026 [hidden] {
    display: none !important;
}

.acfc-schedule-2026 .acfc-sch-icon {
    flex: none;
    display: block;
}

/* A plain block wrapper, so it does not establish a containing block and the
   nav's position: sticky and the popup's position: fixed both still work.
   Sized for the list column plus the sidebar, not the list alone. */
.acfc-schedule-2026 .acfc-sch-shell {
    max-width: calc(var(--acfc-sch-max-width) + var(--acfc-sch-sidebar-width) + var(--acfc-sch-layout-gap));
    margin-inline: auto;
}

.acfc-schedule-2026 .acfc-sch-layout {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: var(--acfc-sch-layout-gap);
    /* Segment switches scroll here to reset the list. This element's top edge is
       where the nav sits in normal flow, so matching the nav's own sticky top
       exactly lands it in its pinned position — any added offset here leaves it
       short of the pin and the bar floats below the header instead of docking.
       Cards below need the taller --acfc-sch-nav-clear instead, because they have
       to clear the pinned bar rather than become it. */
    scroll-margin-top: var(--acfc-sch-header-clear);
    /* Owns the module's bottom spacing, and deliberately sits here rather than on
       .acfc-sch-main, because this element is also the sticky sidebar's containing
       block. A sticky item parks when it reaches its containing block's *content*
       box, so padding here stops the sidebar level with the last card and then
       holds this gap below both columns. The same padding on .acfc-sch-main would
       instead extend the content box, letting the sidebar slide on past the last
       card and end up flush against the page footer.

       Shared with .acfc-sch-promo's padding-top so the rule between them sits
       centred in the gap. */
    padding-bottom: var(--acfc-sch-promo-rule-gap);
}

.acfc-schedule-2026 .acfc-sch-main {
    flex: 1 1 0;
    min-width: 0;
    max-width: var(--acfc-sch-max-width);
}

/* Rides along as the list scrolls. align-self keeps the column from stretching to
   the list's full height, which is what lets sticky actually engage. The offset
   clears the sticky nav bar above it. */
/* Pins below the site header and the module's own nav, not below the nav alone.
   The header is what makes the difference: it pins over the viewport top, so a
   column resting inside that band is hidden behind it for the whole scroll. The
   76px on top of the header clears the nav's ~63px and leaves a small gap. */
.acfc-schedule-2026 .acfc-sch-sidebar {
    flex: 0 0 var(--acfc-sch-sidebar-width);
    position: sticky;
    /* Same offset as .acfc-sch-nav, so the calendar's top edge pins level with the
       nav bar rather than 76px below it. initNavShadow's one measurement then
       describes both, which is what keeps is-nav-stuck honest. */
    top: var(--acfc-sch-header-clear);
    align-self: flex-start;
    /* Only as tall as the pinned viewport allows, so the bottom of the column
       stays reachable when the panels outgrow a short laptop screen. overflow-y
       is auto rather than scroll: when the panels do fit, which the extra 76px
       reclaimed above makes the common case, no scrollbar appears at all.

       No bottom inset subtracted here on purpose. Any breathing gap taken off
       this value shrinks the box by that much, so a column whose panels would
       have just fitted gets clipped and pushed behind a scrollbar instead. Full
       available height is what keeps the deposits card at the bottom visible. */
    max-height: calc(100svh - var(--acfc-sch-header-clear));
    overflow-y: auto;
    overscroll-behavior: contain;
    /* The scrollbar is laid inside the padding box, hard against the border edge,
       so padding-right is what opens a gap between the panels and the thumb. The
       column's flex basis already carries this width (see the token), so the
       panels are the same size they were. */
    padding-right: var(--acfc-sch-sidebar-gutter);
}

/* Run-off under the last panel, so the deposits card can be scrolled clear of the
   bottom edge instead of ending flush against it with its shadow cut off.

   Applied only while the column actually overflows — initSidebarOverflow sets the
   class. Unconditional padding would be charged against the same capped height the
   panels are, so a column that currently just fits would start overflowing because
   of the gap, and earn a scrollbar it had no need for. */
.acfc-schedule-2026 .acfc-sch-sidebar.is-scrollable {
    padding-bottom: 0.75rem;
}

/* Firefox: rosa thumb on a transparent track, matching the module palette instead of
   the OS default grey. No radius, because Firefox offers no control over it.

   Gated to engines *without* the pseudo-elements rather than declared outright.
   Blink and WebKit ignore every ::-webkit-scrollbar-* rule for as long as either
   standard property holds a non-initial value, so setting them here made everything
   below dead code: the bar rendered as the platform's square 10px `thin` scrollbar
   rather than the 6px rounded one it asks for. Measured 10px square before, 6px
   rounded after.

   Suppressing them here rather than resetting them to auto further down, because a
   reset has to out-specify every state variant that also sets a scrollbar property —
   the broadcast row's .is-scroll-active rule quietly beat exactly that on three
   classes to two, and one surviving declaration is enough to switch the whole
   element back to the platform bar. */
@supports not selector(::-webkit-scrollbar) {
    .acfc-schedule-2026 .acfc-sch-sidebar {
        scrollbar-width: thin;
        /* Faint at rest; hover is handled by :hover on the element itself below. */
        scrollbar-color: var(--acfc-sch-rosa-faint) transparent;
    }
    .acfc-schedule-2026 .acfc-sch-sidebar:hover {
        scrollbar-color: var(--acfc-sch-rosa) transparent;
    }
}

/* 4px. Narrow enough to read as an indicator rather than a control, which is what
   it is here — the column is scrolled by wheel and trackpad, and the 8px gutter
   beside it gives the thumb room to be seen without being wide. */
.acfc-schedule-2026 .acfc-sch-sidebar::-webkit-scrollbar {
    width: 4px;
}

/* Rounded to match the thumb so the channel reads as a capsule rather than a
   square slot once the track carries any tint. */
.acfc-schedule-2026 .acfc-sch-sidebar::-webkit-scrollbar-track {
    border-radius: var(--acfc-sch-radius-full);
    background: transparent;
}

.acfc-schedule-2026 .acfc-sch-sidebar::-webkit-scrollbar-thumb {
    border-radius: var(--acfc-sch-radius-full);
    /* 50 % opacity at rest so the thumb is present but unobtrusive. */
    background: var(--acfc-sch-rosa-faint);
}

.acfc-schedule-2026 .acfc-sch-sidebar:hover::-webkit-scrollbar-thumb,
.acfc-schedule-2026 .acfc-sch-sidebar::-webkit-scrollbar-thumb:hover {
    /* Full colour when the user is actively hovering the column or the thumb. */
    background: var(--acfc-sch-rosa);
}

/* Docked flush under the header alongside the nav bar, so the calendar squares
   the same two corners the nav does and the pair reads as one attached row. */
.acfc-schedule-2026.is-nav-stuck .acfc-sch-minical {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* The month grid is a calendar in its own right, so pairing it with the sidebar
   mini-calendar would show the same month twice. Dropping the column also gives
   the grid the full shell width, which is what makes seven columns readable. */
.acfc-schedule-2026.is-calendar-view .acfc-sch-sidebar {
    display: none;
}

.acfc-schedule-2026.is-calendar-view .acfc-sch-main {
    max-width: none;
}

.acfc-schedule-2026 :focus-visible {
    /*outline: 2px solid var(--acfc-sch-ink);
    outline-offset: 2px;*/
    border-radius: 4px;
}

/* ==========================================================================
   Hero — ported from 2027Renewals, rebuilt on this module's tokens
   ========================================================================== */

.acfc-schedule-2026 .acfc-sch-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(360px, 52svh, 520px);
    margin-bottom: clamp(1.5rem, 4vw, 2.75rem);
    overflow: hidden;
    background: var(--acfc-sch-ink);
}

.acfc-schedule-2026 .acfc-sch-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* A slight push on the source photo that settles once, so the frame resolves
   into place instead of snapping in flat. */
.acfc-schedule-2026 .acfc-sch-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: saturate(1.06) contrast(1.04);
    animation: acfc-sch-hero-settle 2.6s var(--acfc-sch-ease) both;
}

@keyframes acfc-sch-hero-settle {
    from {
        transform: scale(1.07);
    }

    to {
        transform: scale(1);
    }
}

/* A dense pocket behind the copy that clears quickly to the right, so the crowd
   stays legible rather than sitting under a flat grey wash. */
.acfc-schedule-2026 .acfc-sch-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(125% 105% at 0% 50%, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.66) 28%, rgba(0, 0, 0, 0.22) 60%, transparent 84%),
        linear-gradient(to top, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.14) 36%, transparent 66%),
        radial-gradient(145% 125% at 50% 45%, transparent 52%, rgba(0, 0, 0, 0.45) 100%);
}

.acfc-schedule-2026 .acfc-sch-hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: clamp(2rem, 4vw, 3.25rem) 0;
}

/* Matches the shell below, so hero copy lines up with the schedule list. */
.acfc-schedule-2026 .acfc-sch-hero__inner {
    max-width: calc(var(--acfc-sch-max-width) + var(--acfc-sch-sidebar-width) + var(--acfc-sch-layout-gap));
    margin-inline: auto;
    padding-inline: clamp(1rem, 3vw, 1.5rem);
}

.acfc-schedule-2026 .acfc-sch-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.9rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--acfc-sch-rosa);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

.acfc-schedule-2026 .acfc-sch-hero__dot {
    width: 7px;
    height: 7px;
    display: none;
    flex: none;
    border-radius: 50%;
    background: var(--acfc-sch-rosa);
    animation: acfc-sch-hero-pulse 2s var(--acfc-sch-ease) infinite;
}

@keyframes acfc-sch-hero-pulse {
    0% {
        box-shadow: 0 0 0 0 var(--acfc-sch-rosa-glow);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(241, 177, 165, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(241, 177, 165, 0);
    }
}

/* Both lines are one size, with rosa alone carrying the accent. A tight edge
   shadow for legibility plus a wide soft one for depth — a single large blur
   muddies the letterforms at this size.

   Sized for Inter rather than inherited from the condensed face. The old ceiling
   was 4.4rem, which was calibrated to Anton: condensed and light in the stem, so
   it read tall without dominating. Inter 800 puts far more ink on the page at the
   same measurement, and matching Anton's height overwhelmed the hero. Tracking is
   negative for the same reason — uppercase Inter sprawls at display sizes. */
.acfc-schedule-2026 .acfc-sch-hero__title {
    margin: 0 0 clamp(0.9rem, 1.6vw, 1.25rem);
    font-family: var(--acfc-sch-display);
    font-size: clamp(2.2rem, 6vw, 3.9rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 0.92;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.38), 0 10px 34px rgba(0, 0, 0, 0.45);
}

.acfc-schedule-2026 .acfc-sch-hero__title-line {
    display: block;
}

/* No font-size and no font-weight: the accent line inherits both from the title
   so the two lines match, leaving the rosa colour to carry the emphasis on its
   own. 2027Renewals steps its accent up to 900, which is deliberately not copied
   here — these two lines were made deliberately equal in size, and a weight jump
   would reintroduce the same imbalance by another route. */
.acfc-schedule-2026 .acfc-sch-hero__title em {
    display: block;
    margin-top: 0.06em;
    font-style: normal;
    color: var(--acfc-sch-rosa);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 34px rgba(0, 0, 0, 0.4);
}

.acfc-schedule-2026 .acfc-sch-hero__body {
    max-width: 44ch;
    margin: 0 0 clamp(1.5rem, 3vw, 2rem);
    font-size: clamp(0.9rem, 1.5vw, 1.02rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.84);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.acfc-schedule-2026 .acfc-sch-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

/* The module default for --primary is ink fill / white text, which disappears
   against the dark hero photo. Flip to rosa fill / ink text here so the primary
   CTA reads clearly in both the hero and the sticky footer bar below. */
.acfc-schedule-2026 .acfc-sch-hero__actions .acfc-sch-btn--primary {
    background: var(--acfc-sch-rosa);
    border-color: var(--acfc-sch-rosa);
    color: var(--acfc-sch-ink);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.34);
}

/* ——— Why the hover states below are gated ———
   On a touchscreen :hover latches when the button is tapped and stays latched
   until something else is tapped, so these buttons sat in their hover treatment
   long after the finger left — reading as stuck rather than pressed.

   Both conditions are needed, for different halves of the problem:

   (hover: hover) catches the real cause, which is the input device rather than
   the screen size — a phone reports (hover: none) at any width, and so does a
   tablet far wider than this breakpoint.

   (min-width: 769px) catches the case that condition misses: a desktop browser
   narrowed to the mobile layout still reports (hover: hover), so it kept the
   colour change while showing the phone card. Pairing the two means the mobile
   layout never carries a hover treatment in any environment, which also makes
   the behaviour testable by resizing rather than only on a device. 769px is the
   exact complement of the 768px layout breakpoint.

   :focus-visible rides along inside the queries rather than being pulled out to
   avoid duplicating each block. Nothing is lost for keyboard users, because the
   global .acfc-schedule-2026 :focus-visible rule above already draws a 2px ink
   outline on anything focused. */
@media (hover: hover) and (min-width: 769px) {
    .acfc-schedule-2026 .acfc-sch-hero__actions .acfc-sch-btn--primary:hover,
    .acfc-schedule-2026 .acfc-sch-hero__actions .acfc-sch-btn--primary:focus-visible {
        background: #fff;
        border-color: #fff;
        color: var(--acfc-sch-ink);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42);
    }
}

/* Hero buttons sit on photography, so the secondary gets a glass fill rather than
   the solid panel surface that --ghost uses elsewhere.

   The fill is carried high enough that the button reads as a surface in its own
   right instead of a thin outline over the photo — at a lower alpha a dark frame
   in the image showed straight through and swallowed it. The border is rosa
   rather than white so the accent, not just brightness, is what separates it from
   the background, and the shadow matches the primary's so the pair lift off the
   photo by the same amount. */
.acfc-schedule-2026 .acfc-sch-btn--glass {
    background: rgba(255, 255, 255, 0.20);
    border-color: rgba(241, 177, 165, 0.55);
    color: #fff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Same ungated color pin as primary above — glass always has white text. */
.acfc-schedule-2026 .acfc-sch-btn--glass:hover,
.acfc-schedule-2026 .acfc-sch-btn--glass:focus-visible,
.acfc-schedule-2026 .acfc-sch-btn--glass:active {
    color: #fff;
}

/* Gated for the sticky-tap reason documented on the hero primary above. */
@media (hover: hover) and (min-width: 769px) {
    .acfc-schedule-2026 .acfc-sch-btn--glass:hover,
    .acfc-schedule-2026 .acfc-sch-btn--glass:focus-visible {
        background: rgba(255, 255, 255, 0.36);
        border-color: var(--acfc-sch-rosa);
        color: #fff;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42);
    }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.acfc-schedule-2026 .acfc-sch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    /* Symmetric again. The old 0.67/0.77 split existed because Anton's cap-height
       sat above the line-box midpoint, which made evenly padded labels read high.
       Inter's caps are centred in their line box at any line-height, so the split
       now tips the label low instead. Same reason --acfc-sch-icon-lift is no
       longer overridden here: the global 0px is already right. */
    padding: 0.72rem 1.35rem;
    min-height: 44px;
    border: 1.5px solid transparent;
    border-radius: var(--acfc-sch-radius-full);
    font-family: var(--acfc-sch-display);
    /* 0.85rem was set while these were uppercase, where Inter 800 ran wide enough
       to push the nav row and overrun the 220px mobile CTA cap. Mixed case is
       appreciably narrower, so there is headroom here now if the labels want to
       come back up — kept as is so this change is case only. */
    font-size: 0.85rem;
    font-weight: 800;
    /* Zero, not the 0.02em this carried. Positive tracking is a small-caps device:
       it separates letters that are all one height. On mixed case the ascenders
       and descenders already do that, and the same value just reads loose. */
    letter-spacing: 0;
    line-height: 1;
    /* Explicit rather than absent, since text-transform inherits and most labels
       in this module are uppercased. CTAs carry their capitalisation in the
       markup instead, so the wording can differ per button. */
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease,
        box-shadow 0.22s var(--acfc-sch-ease);
}

.acfc-schedule-2026 .acfc-sch-btn--primary {
    background: var(--acfc-sch-ink);
    border-color: var(--acfc-sch-ink);
    color: #fff;
}

/* Ungated color pin for all primary buttons. The background/border hover
   changes live inside (hover: hover) to prevent sticky-tap on touch, but
   the site theme's a:hover { color: #1C1C1C } is not gated, so without this
   it beats the white text on any hover — including the brief :hover fired on
   tap. Pinning color only avoids the sticky-tap visual problem while keeping
   text legible in every state. */
.acfc-schedule-2026 .acfc-sch-btn--primary:hover,
.acfc-schedule-2026 .acfc-sch-btn--primary:focus-visible,
.acfc-schedule-2026 .acfc-sch-btn--primary:active {
    color: #fff;
}

/* Hero primary is rosa fill / ink text (see the rule below). Override the white
   pin above so the ink text is also preserved on hover and active. */
.acfc-schedule-2026 .acfc-sch-hero__actions .acfc-sch-btn--primary:hover,
.acfc-schedule-2026 .acfc-sch-hero__actions .acfc-sch-btn--primary:focus-visible,
.acfc-schedule-2026 .acfc-sch-hero__actions .acfc-sch-btn--primary:active {
    color: var(--acfc-sch-ink);
}

/* Gated for the sticky-tap reason documented on the hero primary above. This is
   the rule the card's Tickets/Watch button uses — .acfc-sch-card__cta declares
   no hover of its own — so gating it here is what settles that button too. */
@media (hover: hover) and (min-width: 769px) {
    .acfc-schedule-2026 .acfc-sch-btn--primary:hover,
    .acfc-schedule-2026 .acfc-sch-btn--primary:focus-visible {
        background: var(--acfc-sch-rosa);
        border-color: var(--acfc-sch-rosa);
        color: var(--acfc-sch-ink);
        box-shadow: 0 10px 26px var(--acfc-sch-rosa-glow);
    }
}

.acfc-schedule-2026 .acfc-sch-btn--ghost {
    background: var(--acfc-sch-panel);
    border-color: var(--acfc-sch-edge);
    color: var(--acfc-sch-ink);
}

.acfc-schedule-2026 .acfc-sch-btn--ghost:hover,
.acfc-schedule-2026 .acfc-sch-btn--ghost:focus-visible {
    border-color: var(--acfc-sch-rosa);
    background: var(--acfc-sch-rosa-soft);
    /* Ungated: pins ink text so the site theme's a:hover { color } cannot
       override it, whether on a pointer device or via sticky-tap on touch. */
    color: var(--acfc-sch-ink);
}

/* Disabled / coming-soon state. A <span> rather than <a> or <button> in the markup
   so it carries no interactive role and cannot be tabbed to. The visual treatment
   signals "not yet available" without screaming broken: the colours are the same
   structure as the primary button but washed back by going through the edge/muted
   palette rather than ink/white. No :hover and pointer-events: none stops any
   inherited or descendant rule from reinstating an interactive appearance. */
.acfc-schedule-2026 .acfc-sch-btn--disabled {
    background: var(--acfc-sch-edge);
    border-color: var(--acfc-sch-edge);
    color: var(--acfc-sch-muted);
    cursor: default;
    pointer-events: none;
}

/* Caret sits flush against the primary button to read as one control. */
.acfc-schedule-2026 .acfc-sch-btn--caret {
    background: var(--acfc-sch-ink);
    border-color: var(--acfc-sch-ink);
    border-left-color: rgba(255, 255, 255, 0.22);
    color: #fff;
    padding: 0.72rem 0.85rem;
    min-width: 44px;
}

/* is-open is deliberately left outside the query below: it is a real state, and
   on touch it is the only thing telling the reader the dropdown they just
   tapped is the one that opened. Only hover is gated, and it duplicates this
   block rather than joining it so the two cannot be conflated later. */
.acfc-schedule-2026 .acfc-sch-menu-wrap.is-open .acfc-sch-btn--caret {
    background: var(--acfc-sch-rosa);
    border-color: var(--acfc-sch-rosa);
    border-left-color: rgba(28, 28, 28, 0.18);
    color: var(--acfc-sch-ink);
}

/* Gated for the sticky-tap reason documented on the hero primary above. Without
   it the caret stayed rosa after the menu was tapped shut. */
@media (hover: hover) and (min-width: 769px) {
    .acfc-schedule-2026 .acfc-sch-btn--caret:hover,
    .acfc-schedule-2026 .acfc-sch-btn--caret:focus-visible {
        background: var(--acfc-sch-rosa);
        border-color: var(--acfc-sch-rosa);
        border-left-color: rgba(28, 28, 28, 0.18);
        color: var(--acfc-sch-ink);
    }
}

.acfc-schedule-2026 .acfc-sch-btn--caret .acfc-sch-icon {
    transition: transform 0.24s var(--acfc-sch-ease);
}

.acfc-schedule-2026 .acfc-sch-menu-wrap.is-open .acfc-sch-btn--caret .acfc-sch-icon {
    transform: rotate(180deg);
}

.acfc-schedule-2026 .acfc-sch-linkbtn {
    background: none;
    border: 0;
    padding: 0;
    font-family: var(--acfc-sch-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--acfc-sch-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.acfc-schedule-2026 .acfc-sch-linkbtn:hover {
    color: var(--acfc-sch-ink);
}

/* ==========================================================================
   Pills and tags
   ========================================================================== */

/* line-height: 1 across the small uppercase components below buys predictable
   geometry — the box is the type size, so vertical padding is the whole story and
   these chips stay compact at any inherited body leading. It is not doing any
   centering work: in the body font a cap band is centered in its line box at any
   line-height, so align-items: center already puts caps and icons on the same
   line. See --acfc-sch-icon-lift for why. Vertical padding has to absorb the
   height the leading used to supply, and stays symmetric. */
.acfc-schedule-2026 .acfc-sch-pill {
    display: inline-flex;
    align-items: center;
    /* Trailing letter-spacing renders as blank space after the final glyph, which
       pushes the text visually left inside a pill this tight; the right pad gives
       that space back. */
    padding: 0.4rem 0.5rem 0.4rem 0.6rem;
    border-radius: var(--acfc-sch-radius-full);
    border: 1px solid var(--acfc-sch-edge);
    background: var(--acfc-sch-surface-warm);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--acfc-sch-muted);
    white-space: nowrap;
}

.acfc-schedule-2026 .acfc-sch-pill--home {
    background: var(--acfc-sch-rosa);
    border-color: var(--acfc-sch-rosa);
    color: var(--acfc-sch-ink);
}

.acfc-schedule-2026 .acfc-sch-pill--league {
    background: var(--acfc-sch-ink);
    border-color: var(--acfc-sch-ink);
    color: #fff;
}

.acfc-schedule-2026 .acfc-sch-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0.42rem 0.6rem 0.42rem 0.65rem;
    border-radius: var(--acfc-sch-radius-sm);
    border: 1px solid var(--acfc-sch-edge);
    background: var(--acfc-sch-panel);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--acfc-sch-muted);
    white-space: nowrap;
}

.acfc-schedule-2026 .acfc-sch-tag .acfc-sch-icon {
    color: var(--acfc-sch-rosa-dark);
}

.acfc-schedule-2026 .acfc-sch-tag--theme {
    border-color: rgba(241, 177, 165, 0.6);
    background: var(--acfc-sch-rosa-soft);
    color: var(--acfc-sch-ink);
}

/* ==========================================================================
   Floating nav
   ========================================================================== */

.acfc-schedule-2026 .acfc-sch-nav {
    position: sticky;
    top: var(--acfc-sch-header-clear);
    z-index: 60;
    margin: 0 auto 1.5rem;
    border-radius: var(--acfc-sch-radius-md);
    border: 1px solid var(--acfc-sch-edge);
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: var(--acfc-sch-shadow-e1);
    transition: box-shadow 0.3s var(--acfc-sch-ease), border-color 0.3s ease,
        border-radius 0.3s ease;
    max-width: 750px;
}

/* Docked flush beneath the pinned header, so the top corners square off and the
   bar reads as attached to it rather than floating with clipped corners. Three
   classes deep, which beats the two-class border-radius override in the 768px
   tier regardless of source order. border-radius is in the transition above so
   the corners ease in step with the shadow instead of snapping. */
.acfc-schedule-2026 .acfc-sch-nav.is-stuck {
    box-shadow: var(--acfc-sch-shadow-e2);
    border-color: rgba(241, 177, 165, 0.5);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Capped and centred, so the controls hold the list's measure in both views. The
   list view already constrains them via .acfc-sch-main, but calendar view unsets
   that cap to give the grid its full width, which stretched the controls across
   it. Capping here rather than on .acfc-sch-nav keeps the sticky panel itself
   full width, which is what lets it dock edge to edge with squared corners. */
.acfc-schedule-2026 .acfc-sch-nav__bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    width: 100%;
    max-width: var(--acfc-sch-max-width);
    margin-inline: auto;
    padding: 0.7rem 0.9rem;
}

/* Full width and space-between, so the controls run edge to edge: segment group
   left, view toggle right, the rest distributed. Left shrink-to-fit and centred
   this collapsed to its content width inside a full-width bar, which read as
   heavy left and right padding while the controls themselves sat cramped
   together. `gap` stays as the floor that keeps them apart as space runs out. */
.acfc-schedule-2026 .acfc-sch-nav__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
}

.acfc-schedule-2026 .acfc-sch-nav__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    min-height: 40px;
    border-radius: var(--acfc-sch-radius-full);
    border: 1px solid var(--acfc-sch-edge);
    background: var(--acfc-sch-panel);
    font-family: var(--acfc-sch-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0em;
    line-height: 1;
    color: var(--acfc-sch-ink);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s var(--acfc-sch-ease);
}

/* Open state, ungated: aria-expanded is what tells the reader which button the
   filters panel below belongs to, and on touch it is the only thing doing so. */
.acfc-schedule-2026 .acfc-sch-nav__btn[aria-expanded='true'] {
    border-color: var(--acfc-sch-rosa);
    background: var(--acfc-sch-rosa-soft);
}

/* Hover, gated: see the note above .acfc-sch-hero__actions. On touch :hover
   latches on tap and stays latched, so the last nav button the reader pressed sat
   tinted afterwards, reading as a filter still applied. */
@media (hover: hover) and (min-width: 769px) {
    .acfc-schedule-2026 .acfc-sch-nav__btn:hover {
        border-color: var(--acfc-sch-rosa);
        background: var(--acfc-sch-rosa-soft);
    }
}

.acfc-schedule-2026 .acfc-sch-nav__btn .acfc-sch-icon:last-child {
    transition: transform 0.24s var(--acfc-sch-ease);
}

.acfc-schedule-2026 .acfc-sch-nav__btn[aria-expanded='true'] .acfc-sch-icon:last-child {
    transform: rotate(180deg);
}

.acfc-schedule-2026 .acfc-sch-nav__count {
    /*display: inline-flex;*/
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: var(--acfc-sch-radius-full);
    background: var(--acfc-sch-ink);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
}

/* Segmented control */
.acfc-schedule-2026 .acfc-sch-seg {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: var(--acfc-sch-radius-full);
    border: 1px solid var(--acfc-sch-edge);
    background: var(--acfc-sch-surface-warm);
}

.acfc-schedule-2026 .acfc-sch-seg__btn {
    padding: 0.45rem 0.95rem;
    min-height: 34px;
    border: 0;
    border-radius: var(--acfc-sch-radius-full);
    background: transparent;
    font-family: var(--acfc-sch-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0em;
    line-height: 1;
    color: var(--acfc-sch-muted);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* Gated: the segment is the one control where a latched :hover actively lies.
   Tapping Away darkens it, then tapping Home darkens Home and leaves Away dark
   too until something else is touched — two of three buttons looking selected
   while only one is. .is-active below is the real state and is not gated. */
@media (hover: hover) and (min-width: 769px) {
    .acfc-schedule-2026 .acfc-sch-seg__btn:hover {
        color: var(--acfc-sch-ink);
    }
}

.acfc-schedule-2026 .acfc-sch-seg__btn.is-active {
    background: var(--acfc-sch-rosa);
    color: var(--acfc-sch-ink);
    box-shadow: 0 3px 12px var(--acfc-sch-rosa-glow);
}

/* View toggle */
.acfc-schedule-2026 .acfc-sch-viewtoggle {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border-radius: var(--acfc-sch-radius-full);
    border: 1px solid var(--acfc-sch-edge);
    background: var(--acfc-sch-panel);
}

.acfc-schedule-2026 .acfc-sch-viewtoggle__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 38px;
    border: 0;
    background: transparent;
    color: var(--acfc-sch-muted);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.acfc-schedule-2026 .acfc-sch-viewtoggle__btn + .acfc-sch-viewtoggle__btn {
    border-left: 1px solid var(--acfc-sch-edge);
}

/* Gated for the same reason as the segment: .is-active carries the real state,
   and a latched hover on the other button competes with it. */
@media (hover: hover) and (min-width: 769px) {
    .acfc-schedule-2026 .acfc-sch-viewtoggle__btn:hover {
        background: var(--acfc-sch-rosa-soft);
        color: var(--acfc-sch-ink);
    }
}

.acfc-schedule-2026 .acfc-sch-viewtoggle__btn.is-active {
    background: var(--acfc-sch-ink);
    color: #fff;
}

/* Filter panel */
.acfc-schedule-2026 .acfc-sch-filters {
    padding: 0.9rem;
    border-top: 1px solid var(--acfc-sch-edge);
    background: var(--acfc-sch-surface);
    border-radius: 0 0 var(--acfc-sch-radius-md) var(--acfc-sch-radius-md);
}

/* Three explicit columns rather than auto-fit. Four until Home / Away moved out
   to the nav segment, and that fourth track is why the count is explicit: the
   panel is the full width of the nav, about 721px once its own padding is off,
   and auto-fit needed 4 x 180px + 3 x 12px = 756px before it would lay four
   tracks. Thirty-five pixels short, so it silently dropped to three and wrapped
   Broadcast onto a second row. Three fits with room to spare, but auto-fit would
   reintroduce the same failure the next time a filter is added.

   minmax(0, 1fr) rather than 1fr so a long option label cannot push a track past
   its share; the selects are width: 100% and follow whatever they get. The 768px
   tier below takes this to a single column. */
.acfc-schedule-2026 .acfc-sch-filters__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.acfc-schedule-2026 .acfc-sch-filters__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--acfc-sch-edge);
}

.acfc-schedule-2026 .acfc-sch-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    /* Grid items floor at min-content by default, and a select's min-content is
       driven by its longest option, so without this the track above can be
       forced wider than its share and the row overflows. */
    min-width: 0;
}

.acfc-schedule-2026 .acfc-sch-field__label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--acfc-sch-muted);
}

.acfc-schedule-2026 .acfc-sch-select {
    width: 100%;
    min-height: 44px;
    padding: 0.55rem 2.1rem 0.55rem 0.85rem;
    border: 1px solid var(--acfc-sch-edge);
    border-radius: var(--acfc-sch-radius-sm);
    background-color: var(--acfc-sch-panel);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231c1c1c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) center;
    font-family: var(--acfc-sch-body);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--acfc-sch-ink);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.acfc-schedule-2026 .acfc-sch-select:hover {
    border-color: var(--acfc-sch-rosa);
}

.acfc-schedule-2026 .acfc-sch-check {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--acfc-sch-ink);
    cursor: pointer;
}

.acfc-schedule-2026 .acfc-sch-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--acfc-sch-rosa-dark);
    cursor: pointer;
}

/* ==========================================================================
   Month divider
   ========================================================================== */

.acfc-schedule-2026 .acfc-sch-monthdiv {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0 1rem;
    /* Calendar jumps target these; without it the sticky nav covers the landing. */
    scroll-margin-top: var(--acfc-sch-nav-clear);
}

/* The leading month needs no separation from the nav above it, only from the
   cards below. Keyed to a class rather than :first-child because the Home/Away
   segment can hide every card in the opening months, leaving the DOM-first
   divider off screen — index.html seeds this and apply() maintains it. */
.acfc-schedule-2026 .acfc-sch-monthdiv.is-first {
    margin-top: 1rem;
}

/* A divider label, not a headline: it separates groups of cards and should not
   compete with the opponent names inside them. At Anton's width 1.4rem read as a
   quiet rule; in Inter 800 it outweighed the cards it was introducing. */
.acfc-schedule-2026 .acfc-sch-monthdiv__label {
    font-family: var(--acfc-sch-display);
    font-size: clamp(0.95rem, 1.9vw, 1.15rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--acfc-sch-ink);
    white-space: nowrap;
}

.acfc-schedule-2026 .acfc-sch-monthdiv__rule {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, var(--acfc-sch-rosa) 0%, var(--acfc-sch-edge) 45%, transparent 100%);
}

/* ——— Today boundary ———
   Splits played matches from upcoming ones in the single continuous list, and is
   where the page opens. Centred and ruled on both sides rather than left-aligned
   like a month divider: this is a break in the list, not another heading in the
   same series, and a reader arriving here mid-list needs to read it as the reason
   the schedule starts where it does.

   Margins are wider than .acfc-sch-monthdiv's on purpose — a month heading
   introduces the cards under it, so it sits close to them, while this separates
   two runs and belongs to neither. */
.acfc-schedule-2026 .acfc-sch-timenow {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 2.75rem 0 2rem;
    /* Both the load landing and the hero CTA aim here, so it carries the same
       sticky-nav clearance the calendar jump targets do. */
    scroll-margin-top: var(--acfc-sch-nav-clear);
}

/* Set as a chip rather than bare type. Bare, at this size, it read as a smaller
   month heading — the same ink on the same white, differing only in tracking. The
   rosa field carries the accent that the label itself cannot: ink stays on the
   text because --acfc-sch-rosa-dark against white is around 2:1, fine for a 1px
   rule and not for 0.7rem caps. */
.acfc-schedule-2026 .acfc-sch-timenow__label {
    flex: none;
    padding: 0.36rem 0.75rem 0.32rem;
    border: 1px solid rgba(241, 177, 165, 0.55);
    border-radius: var(--acfc-sch-radius-full);
    background: var(--acfc-sch-rosa-soft);
    font-family: var(--acfc-sch-display);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--acfc-sch-ink);
    white-space: nowrap;
}

/* Mirrored pair: each rule runs from transparent at the outer edge to rosa where
   it meets the label, so the weight collects at the centre. Written as two
   gradients rather than one rule plus scaleX(-1), because a flipped element also
   flips its own sub-pixel rounding and the two halves stopped matching at the
   seam on fractional widths. */
.acfc-schedule-2026 .acfc-sch-timenow__rule {
    flex: 1 1 auto;
    height: 1px;
}

.acfc-schedule-2026 .acfc-sch-timenow__rule:first-child {
    background: linear-gradient(90deg, transparent 0%, var(--acfc-sch-edge) 55%, var(--acfc-sch-rosa) 100%);
}

.acfc-schedule-2026 .acfc-sch-timenow__rule:last-child {
    background: linear-gradient(90deg, var(--acfc-sch-rosa) 0%, var(--acfc-sch-edge) 45%, transparent 100%);
}

/* ==========================================================================
   Game card
   ========================================================================== */

.acfc-schedule-2026 .acfc-sch-list {
    display: block;
}

.acfc-schedule-2026 .acfc-sch-card {
    position: relative;
    /* z-index: 1 gives each card its own stacking context so open dropdown menus
       render above it. Cards with an open menu get z-index: 10 below so their
       menu appears above the next card in DOM order. */
    z-index: 1;
    scroll-margin-top: var(--acfc-sch-nav-clear);
    border: 1px solid var(--acfc-sch-edge);
    border-radius: var(--acfc-sch-radius-md);
    background: var(--acfc-sch-panel);
    box-shadow: var(--acfc-sch-shadow-e1);
    overflow: visible;
    transition: var(--acfc-sch-lift-transition);
}

/* When a card is the first match of a month (immediately follows a monthdiv),
   give it enough extra scroll-margin-top to pull the month heading into view.
   The monthdiv contributes: 2rem margin-top + ~1rem label height + 1rem margin-
   bottom ≈ 4rem of visual space above the card. Without this, the heading is
   clipped just above the nav when the anchor scrolls directly to the card. */
.acfc-schedule-2026 .acfc-sch-list .acfc-sch-monthdiv + article {
    scroll-margin-top: calc(var(--acfc-sch-nav-clear) + 4rem);
}

/* Gap between cards, in two parts so the corrected version can lean on :has()
   without the uncorrected one depending on it.

   The DOM-order approximation. Left as the base because if the rule below is
   dropped this still spaces the list correctly everywhere except the one edge the
   bug lives on — a trailing gap is wrong, but cards sitting flush would be worse. */
.acfc-schedule-2026 .acfc-sch-list .acfc-sch-card:not(:last-child) {
    margin-bottom: 1rem;
}

/* And the correction: no gap unless another *visible* card follows.
   
   :last-child counts DOM children, not rendered ones, and filtering hides cards
   with the hidden attribute. On the Results tab every upcoming card still sits
   after the last past one, so that card read as "not last" and kept its margin,
   leaving a stray gap under the final result. Any filter narrow enough to leave
   the last match mid-list did the same, as did an ad band trailing the last card.

   The sibling combinator looks past dividers and bands to the next visible card,
   which is what the margin actually depends on: those bring their own spacing, so
   a gap is only ever wanted ahead of another card.

   Scoped to the list, so the popup clones further down keep their own margin: 0. */
.acfc-schedule-2026 .acfc-sch-list .acfc-sch-card:not(:has(~ .acfc-sch-card:not([hidden]))) {
    margin-bottom: 0;
}

/* Lift the card that owns the open dropdown above its siblings AND above the
   sticky nav bar (z-index: 60). Without this, a menu--up panel opens upward
   into the nav and is clipped behind it because the card's stacking context
   (z-index: 10) sat below the nav's (z-index: 60). 70 clears the nav while
   staying well below any overlay layers. The JS class is the fallback for
   browsers that do not support :has(). */
.acfc-schedule-2026 .acfc-sch-card:has(.acfc-sch-menu-wrap.is-open),
.acfc-schedule-2026 .acfc-sch-card.has-open-dropdown {
    z-index: 70;
}

/* Away cards have no home-ticket action so the rosa lift/glow would imply an
   interactivity that isn't there. Hover feedback stays on home and past cards. 
.acfc-schedule-2026 .acfc-sch-card:not(.acfc-sch-card--away):hover {
    translate: var(--acfc-sch-lift);
    box-shadow: var(--acfc-sch-shadow-rosa);
    border-color: rgba(241, 177, 165, 0.55);
}*/

/* Applied for ~1.6s after the sidebar calendar scrolls a card into view, so the
   arrival target is obvious once the smooth scroll settles. */
.acfc-schedule-2026 .acfc-sch-card.is-flash {
    border-color: var(--acfc-sch-rosa);
    box-shadow: var(--acfc-sch-shadow-rosa);
    animation: acfc-sch-card-flash 1.6s ease-out;
}

@keyframes acfc-sch-card-flash {
    0%,
    45% {
        background: var(--acfc-sch-rosa-soft);
    }

    100% {
        background: var(--acfc-sch-panel);
    }
}

.acfc-schedule-2026 .acfc-sch-card--past {
    background: var(--acfc-sch-surface);
}

/* Friendlies are exhibitions, not table fixtures — flag them without shouting. */
.acfc-schedule-2026 .acfc-sch-card--friendly {
    background: linear-gradient(180deg, #fff8f6 0%, var(--acfc-sch-panel) 40%);
    border-style: dashed;
    border-color: rgba(241, 177, 165, 0.55);
}

.acfc-schedule-2026 .acfc-sch-card--past .acfc-sch-card__crest img {
    filter: grayscale(1);
    opacity: 0.75;
}

.acfc-schedule-2026 .acfc-sch-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    padding: 0.6rem 1.1rem;
    border-bottom: 1px solid var(--acfc-sch-edge);
    background: var(--acfc-sch-surface-warm);
    border-radius: var(--acfc-sch-radius-md) var(--acfc-sch-radius-md) 0 0;
}

.acfc-schedule-2026 .acfc-sch-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--acfc-sch-muted);
}

.acfc-schedule-2026 .acfc-sch-card__meta-item .acfc-sch-icon {
    color: var(--acfc-sch-rosa-dark);
}

.acfc-schedule-2026 .acfc-sch-card__meta-spacer {
    flex: 1 1 auto;
}

/* Sits in the footer row, right-aligned by the parent's space-between. */
.acfc-schedule-2026 .acfc-sch-card__info-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid transparent;
    border-radius: var(--acfc-sch-radius-full);
    background: transparent;
    font-family: var(--acfc-sch-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--acfc-sch-muted);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.acfc-schedule-2026 .acfc-sch-card__info-toggle:hover {
    border-color: var(--acfc-sch-edge);
    background: var(--acfc-sch-panel);
    color: var(--acfc-sch-ink);
}

.acfc-schedule-2026 .acfc-sch-card__info-toggle .acfc-sch-icon:last-child {
    transition: transform 0.24s var(--acfc-sch-ease);
}

.acfc-schedule-2026 .acfc-sch-card__info-toggle[aria-expanded='true'] .acfc-sch-icon:last-child {
    transform: rotate(180deg);
}

.acfc-schedule-2026 .acfc-sch-card__body {
    /* Exposed so the date rail can cancel this padding and sit flush to the
       card edge without either value being restated in two places. */
    --acfc-sch-body-pad-y: 1.1rem;
    --acfc-sch-body-pad-x: 1.1rem;
    display: flex;
    align-items: center;
    gap: clamp(0.85rem, 2vw, 1.6rem);
    padding: var(--acfc-sch-body-pad-y) var(--acfc-sch-body-pad-x);
}

/* Date rail — the focal point of the card.
   A full-bleed tinted column rather than an inset box, so the date reads first
   and the tint doubles as the home / away signal. This is what replaced the old
   4px .acfc-sch-card--home::before spine. */
.acfc-schedule-2026 .acfc-sch-card__date {
    flex: 0 0 auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    /* Sized for the longest weekday ("WEDNESDAY") at the tracking below, not for
       the kickoff time. */
    min-width: 148px;
    /* Cancel the body padding on three sides; the rail supplies its own. */
    margin-top: calc(var(--acfc-sch-body-pad-y) * -1);
    margin-bottom: calc(var(--acfc-sch-body-pad-y) * -1);
    margin-left: calc(var(--acfc-sch-body-pad-x) * -1);
    padding: 1rem 0.85rem;
    border-right: 1px solid var(--acfc-sch-edge);
    background: var(--acfc-sch-surface-warm);
    text-align: center;
    /* The rail is the card's top-left corner now that the meta strip above it is
       commented out. The card sets overflow: visible so open dropdowns are not
       clipped, which means this tinted column has to round its own corner or its
       square edge paints outside the card's radius. */
    border-top-left-radius: var(--acfc-sch-radius-md);
}

.acfc-schedule-2026 .acfc-sch-card--home .acfc-sch-card__date {
    border-right-color: rgba(241, 177, 165, 0.5);
    background: linear-gradient(180deg, rgba(241, 177, 165, 0.24) 0%, rgba(241, 177, 165, 0.1) 100%);
}

.acfc-schedule-2026 .acfc-sch-card--past .acfc-sch-card__date {
    background: var(--acfc-sch-surface);
}

.acfc-schedule-2026 .acfc-sch-card__date-dow {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--acfc-sch-ink-soft);
}

/* Two digits inside a rail that narrows to 92px, so the tracking goes further
   negative here than elsewhere — numerals carry no cap-spacing argument for
   positive tracking, and pulling them together is what keeps the date reading as
   a single unit rather than two loose figures.

   This is still the largest type in the card because the date is the scanning
   anchor, but it took the biggest cut of the Inter pass: Inter 800 numerals are
   both wider and much heavier than Anton's, so holding the old 2.35rem made the
   rail shout over the opponent name it is meant to support. */
.acfc-schedule-2026 .acfc-sch-card__date-day {
    font-family: var(--acfc-sch-display);
    font-size: clamp(1.4rem, 2.9vw, 1.8rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 0.95;
    text-transform: uppercase;
    color: var(--acfc-sch-ink);
}

.acfc-schedule-2026 .acfc-sch-card--past .acfc-sch-card__date-day {
    color: var(--acfc-sch-ink-soft);
}

.acfc-schedule-2026 .acfc-sch-card__date-time {
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--acfc-sch-ink);
}

/* The timezone is a qualifier, not the fact — keeping it small is what lets the
   kickoff time itself grow without widening the rail. */
.acfc-schedule-2026 .acfc-sch-card__date-time em {
    margin-left: 0.2em;
    font-size: 0.62rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--acfc-sch-faint);
}

/* Matchup */
.acfc-schedule-2026 .acfc-sch-card__matchup {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
}

.acfc-schedule-2026 .acfc-sch-card__crest {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
}

.acfc-schedule-2026 .acfc-sch-card__crest img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.acfc-schedule-2026 .acfc-sch-card__teams {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

/* Eyebrow above the opponent: "HOME · BMO Stadium". Now a container for two spans
   with different treatments, so typography moved down to the children. baseline
   rather than center because the tracked caps label and the proper-case venue have
   different visual centres but share a baseline. */
.acfc-schedule-2026 .acfc-sch-card__vs {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--acfc-sch-faint);
}

/* Keeps the tracked-caps treatment the whole eyebrow used to have. Home darkens to
   ink-soft while away stays faint, so the two separate at a glance and away finally
   has a signal of its own — the date rail tints for home only.

   Deliberately not rosa. Every rosa in the palette tops out at #e0a094, which is
   roughly 2:1 on white: as a 0.68rem label it would make the home card the harder
   of the two to read, inverting the hierarchy it is meant to create. The rail
   already carries the brand hue for home, so this can carry weight instead. */
.acfc-schedule-2026 .acfc-sch-card__side {
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
}

.acfc-schedule-2026 .acfc-sch-card--home .acfc-sch-card__side {
    color: var(--acfc-sch-ink-soft);
}

/* Proper case, not uppercase, and barely tracked. This is a width decision as much
   as a stylistic one: "Northwestern Medicine Field at Martin Stadium" is 45
   characters, and in tracked caps it runs about 390px against a teams column of
   roughly 262px. Proper case brings it to about 245px, which fits on one line. */
.acfc-schedule-2026 .acfc-sch-card__venue {
    letter-spacing: 0.02em;
    color: var(--acfc-sch-muted);
    overflow-wrap: break-word;
}

/* Separator lives here rather than in the markup so it cannot strand: no venue
   span, no middot. */
.acfc-schedule-2026 .acfc-sch-card__venue::before {
    content: "\00b7";
    margin: 0 0.45em;
    color: var(--acfc-sch-faint);
}

/* Size steps down as well as tracking in: the longest names ("North Carolina
   Courage") shared a row with the date rail and the crest, and Inter 800 needs
   the headroom that the condensed face did not. */
.acfc-schedule-2026 .acfc-sch-card__opponent {
    font-family: var(--acfc-sch-display);
    font-size: clamp(0.95rem, 2vw, 1.2rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--acfc-sch-ink);
    /* The name is what gives when the row is tight, so it has to be able to break
       a single long word ("Louisville") and not just wrap at spaces — otherwise
       it establishes a min-content floor that pushes the overflow back out onto
       the card. The 480px tier adds word-break and hyphens on top of this. */
    overflow-wrap: break-word;
}

.acfc-schedule-2026 .acfc-sch-card__score {
    display: inline-flex;
    /* center rather than baseline. The score line has two sizes: 1.1rem digits and
       0.66rem "FINAL" label. Baseline alignment ties everything to the tallest
       item's baseline (the digits), which leaves the badge's align-self:center
       centring against the full line-box height rather than the digit ink — the
       badge rides noticeably low as a result. Center alignment makes all three
       items (digits, "FINAL", badge) share one horizontal midline, which is what
       the eye expects for a compact inline group of mixed sizes. */
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.2rem;
    font-family: var(--acfc-sch-display);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--acfc-sch-ink);
}

/* The font-family here used to be the whole contrast — body against the score's
   Anton. Both tokens are the same stack now, so weight carries it instead: 700
   against the 800 above, on top of the existing size and tracking difference. */
.acfc-schedule-2026 .acfc-sch-card__score em {
    font-family: var(--acfc-sch-body);
    font-size: 0.66rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--acfc-sch-faint);
}

/* W / L / D badge, appended to .acfc-sch-card__score by module.js after the
   optaSync fetch resolves. Absent until then, so nothing shifts if the request
   fails. */
/* Matches the circular W/L/D token MatchResults uses, so a result reads the same
   on both pages. Traffic-light green/red is deliberately not used: it is off-brand
   and it makes every loss shout. Rosa carries the win, ink carries the loss, and
   the contrast between them does the work that hue would have. */
.acfc-schedule-2026 .acfc-sch-card__result {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* The score container now uses align-items: center, so every item — digits,
       "FINAL" label and this disc — share the same horizontal midline. align-self
       is still explicit here as a safeguard against any inherited baseline context
       above the score container. The translateY nudge that compensated for the old
       baseline alignment is removed; it would now over-correct. */
    align-self: center;
    /* Sized against the 1.1rem score it now annotates rather than the opponent
       name it used to sit beside. At the old 1.9rem the disc stood taller than
       the score's own line box and read as the louder of the two. */
    width: 1.45rem;
    height: 1.45rem;
    min-width: 1.45rem;
    /* Inter's cap-height (~0.73em) ends at the baseline, leaving a descender
       well below it that W and L never occupy. With line-height:normal the
       anonymous text block is ~1.2em tall, so align-items:center centres that
       block — not the ink — in the circle, putting the actual glyph ~1px above
       the midline. padding-top:2px (absorbed by the module's border-box reset)
       shifts the centering zone down by 1px, landing the ink on the midline. */
    padding: 0;
    padding-top: 0px;
    border: 1px solid transparent;
    border-radius: 50%;
    flex-shrink: 0;
    font-family: var(--acfc-sch-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: l;
    color: var(--acfc-sch-ink);
    background: var(--acfc-sch-surface-warm);
    border-color: var(--acfc-sch-edge);
}

.acfc-schedule-2026 .acfc-sch-card__result--W {
    color: var(--acfc-sch-ink);
    background: var(--acfc-sch-rosa);
    border-color: var(--acfc-sch-rosa);
}

.acfc-schedule-2026 .acfc-sch-card__result--L {
    color: #fff;
    background: var(--acfc-sch-ink);
    border-color: var(--acfc-sch-ink);
}

/* Theme night row — a band spanning the card between the body and the footer.
   The wash fades left to right so the row reads as a highlight on the card
   rather than as a second card stacked inside it. */
.acfc-schedule-2026 .acfc-sch-card__theme {
    padding: 0.8rem 1.1rem;
    border-top: 1px solid var(--acfc-sch-edge);
    background: linear-gradient(90deg, var(--acfc-sch-rosa-soft) 0%, rgba(241, 177, 165, 0.07) 58%, rgba(241, 177, 165, 0) 100%);
}

/* CTA cluster */
.acfc-schedule-2026 .acfc-sch-card__cta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin-left: auto;
}

.acfc-schedule-2026 .acfc-sch-card__cta .acfc-sch-btn--primary:not(:only-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding-right: 1.1rem;
}

.acfc-schedule-2026 .acfc-sch-card__cta .acfc-sch-btn--caret {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
}

/* Tag row */
.acfc-schedule-2026 .acfc-sch-card__tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0 1.1rem 0.9rem;
}

.acfc-schedule-2026 .acfc-sch-card__tags:empty {
    display: none;
}

/* Footer */
.acfc-schedule-2026 .acfc-sch-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    padding: 0.7rem 1.1rem;
    border-top: 1px solid var(--acfc-sch-edge);
    background: var(--acfc-sch-surface);
    border-radius: 0 0 var(--acfc-sch-radius-md) var(--acfc-sch-radius-md);
}

/* No broadcasts means no footer, so whichever block now ends the card has to
   round off. The card cannot just use overflow: hidden — the CTA dropdown menus
   are absolutely positioned and would be clipped. */
.acfc-schedule-2026 .acfc-sch-card--no-footer .acfc-sch-card__theme {
    border-radius: 0 0 var(--acfc-sch-radius-md) var(--acfc-sch-radius-md);
}

/* Unthemed: the full-bleed date rail is what reaches the bottom edge. */
.acfc-schedule-2026 .acfc-sch-card--no-footer:not(.acfc-sch-card--theme) .acfc-sch-card__date {
    border-bottom-left-radius: var(--acfc-sch-radius-md);
}

/* ─── Past-card score footer ─────────────────────────────────────────────────
   Past cards replace the broadcast footer with a compact score strip.
   JS (liftScoreToFooter) moves .acfc-sch-card__score here; CSS hides the
   broadcast footer so the score strip is the visual bottom of the card. */

/* Hide the broadcast footer on all past cards — the score strip replaces it. */
.acfc-schedule-2026 .acfc-sch-card--past .acfc-sch-card__footer {
    display: none;
}

/* When a score footer is present the theme band no longer ends the card, so
   its bottom-radius that --no-footer normally grants must be zeroed out. */
.acfc-schedule-2026 .acfc-sch-card:has(.acfc-sch-card__score-footer) .acfc-sch-card__theme {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.acfc-schedule-2026 .acfc-sch-card:has(.acfc-sch-card__score-footer) .acfc-sch-card__date {
    border-bottom-left-radius: 0;
}

/* The score strip itself: same surface/border treatment as the broadcast
   footer it replaces, always rounding the card's bottom corners. */
.acfc-schedule-2026 .acfc-sch-card__score-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.65rem 1.1rem;
    border-top: 1px solid var(--acfc-sch-edge);
    background: var(--acfc-sch-surface);
    border-radius: 0 0 var(--acfc-sch-radius-md) var(--acfc-sch-radius-md);
}

/* In the footer the score can be slightly larger and loses its inline
   margin-top (that nudge was for alignment within the teams column). */
.acfc-schedule-2026 .acfc-sch-card__score-footer .acfc-sch-card__score {
    margin-top: 0;
    font-size: 1.25rem;
    gap: 0.5rem;
}

/* Expandable game info */
.acfc-schedule-2026 .acfc-sch-card__info {
    padding: 1rem 1.1rem 1.2rem;
    border-top: 1px dashed var(--acfc-sch-edge);
    background: var(--acfc-sch-surface);
    border-radius: 0 0 var(--acfc-sch-radius-md) var(--acfc-sch-radius-md);
}

.acfc-schedule-2026 .acfc-sch-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.9rem 1.5rem;
    margin: 0;
}

.acfc-schedule-2026 .acfc-sch-info-grid__item {
    min-width: 0;
}

.acfc-schedule-2026 .acfc-sch-info-grid dt {
    margin: 0 0 0.2rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--acfc-sch-faint);
}

.acfc-schedule-2026 .acfc-sch-info-grid dd {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--acfc-sch-ink);
}

.acfc-schedule-2026 .acfc-sch-info-grid__sub {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--acfc-sch-muted);
}

.acfc-schedule-2026 .acfc-sch-info-note {
    margin-top: 0.9rem;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--acfc-sch-ink-soft);
}

.acfc-schedule-2026 .acfc-sch-info-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.9rem;
}

.acfc-schedule-2026 .acfc-sch-info-links:empty {
    display: none;
}

.acfc-schedule-2026 .acfc-sch-info-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--acfc-sch-edge);
    border-radius: var(--acfc-sch-radius-full);
    background: var(--acfc-sch-panel);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: var(--acfc-sch-ink);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.acfc-schedule-2026 .acfc-sch-info-links a:hover {
    border-color: var(--acfc-sch-rosa);
    background: var(--acfc-sch-rosa-soft);
}

/* ==========================================================================
   In-feed ad bands — Google Ad Manager creatives between cards
   ========================================================================== */

.acfc-schedule-2026 .acfc-sch-adband {
    display: block;
    margin-bottom: 1rem;
    /* Stop the browser's scroll anchoring from chasing the band as it fills,
       collapses or resizes — otherwise the list jumps under the reader. */
    overflow-anchor: none;
}

.acfc-schedule-2026 .acfc-sch-adband__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 970px;
    margin: 0 auto;
    padding: 0.5rem;
    border: 1px solid var(--acfc-sch-edge);
    border-radius: var(--acfc-sch-radius-md);
    background: var(--acfc-sch-surface);
    /* Reserve the tallest desktop size (970x250) up front; module.js snaps this
       down to the size GAM actually served so a 90px leaderboard leaves no void. */
    min-height: 250px;
    transition: min-height 0.2s ease;
}

.acfc-schedule-2026 .acfc-sch-adband__unit {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--acfc-sch-radius-sm);
    background: linear-gradient(100deg,
        rgba(28, 28, 28, 0.04) 30%,
        rgba(28, 28, 28, 0.09) 40%,
        rgba(28, 28, 28, 0.04) 50%);
    background-size: 400% 100%;
    animation: acfc-sch-ad-shimmer 1.6s ease-in-out infinite;
}

/* Width anchors the slot to its allotted space; height is deliberately omitted
   so the box grows to whatever GAM serves (90, 250 or 300px). */
.acfc-schedule-2026 .acfc-sch-adband__unit--desktop {
    width: 970px;
}

.acfc-schedule-2026 .acfc-sch-adband__unit.is-filled {
    background: none;
    animation: none;
}

.acfc-schedule-2026 .acfc-sch-adband__unit iframe,
.acfc-schedule-2026 .acfc-sch-adband__unit img {
    display: block;
    max-width: 100%;
}

/* Parent overflow:hidden does not clip cross-origin iframes, so round the iframe itself. */
.acfc-schedule-2026 .acfc-sch-adband__unit iframe {
    border-radius: var(--acfc-sch-radius-sm);
}

@keyframes acfc-sch-ad-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

/* Collapse entirely when GAM returns no creative, or when the band is between
   two cards that a filter has hidden. */
.acfc-schedule-2026 .acfc-sch-adband.is-empty,
.acfc-schedule-2026 .acfc-sch-adband[hidden] {
    display: none;
}

/* Only one unit is ever in flow — the other is display:none, so GAM never
   renders a desktop creative into a phone viewport. */
.acfc-schedule-2026 .acfc-sch-adband__unit--mobile {
    display: none;
}

@media (max-width: 767px) {

    .acfc-schedule-2026 .acfc-sch-adband__unit--desktop {
        display: none;
    }

    .acfc-schedule-2026 .acfc-sch-adband__unit--mobile {
    display: flex;
        width: 320px;
    }

    .acfc-schedule-2026 .acfc-sch-adband__inner {
        max-width: 320px;
        /* Tallest mobile size (320x100); module.js snaps this down after render. */
        min-height: 100px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .acfc-schedule-2026 .acfc-sch-adband__unit {
        animation: none;
    }
}

/* ==========================================================================
   Theme night block
   ========================================================================== */

/* Two columns: the eyebrow/title/sponsor lockup on the left, every detail line
   stacked on the right. Exactly two grid items reach this — the lockup and
   __detail, which module.js wraps the detail lines in — so auto-placement puts them
   side by side with no explicit placement. __raw is the third child but is display:
   none once parsed, so it never becomes a grid item.

   The wrapper is what keeps the two columns independent. Placing the detail lines
   as grid items in their own right gave each one a grid row, and the lockup spanned
   only the first of them, so that row stretched to the lockup's height and shoved
   everything after it down. See module.js for the full note.

   Gated on .is-parsed because laying out the raw rich-text fallback would
   scramble it. */
.acfc-schedule-2026 .acfc-sch-theme.is-parsed {
    display: grid;
    /* fit-content sizes this side to its content and caps how far it can grow, so a
       future partner with a very long name cannot starve the detail column.

       21rem, because the widest lockup in the table — "Presented by Yuhaaviatam of
       San Manuel Nation" — measures 328.4px on one line, and the cap has to clear
       that or it wraps to two. 19rem did not, which is what put that card's label
       and partner name on separate lines. Every other partner fits inside 273px, and
       the longest title is 253px, so this only binds on that one lockup. It leaves
       the detail column 360px of the 713px band, enough for two chips side by side.

       Raise it if a longer partner ever ships, and re-measure: the wrap is set by
       the name's length, not by the viewport. */
    grid-template-columns: fit-content(21rem) minmax(0, 1fr);
    /* start, not the old `center`: a short lockup against a tall detail column reads
       as floating when centred against it. */
    align-items: start;
    gap: 0.4rem 1.5rem;
}

/* One grid cell, stacking internally. The gap here is the only thing setting the
   space between a chip row and its fine print, which is why it is tight. */
.acfc-schedule-2026 .acfc-sch-theme__detail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    min-width: 0;
}

/* The grid and flex gaps own all spacing; these carry default p/ul margins that
   would otherwise double it. */
.acfc-schedule-2026 .acfc-sch-theme.is-parsed .acfc-sch-theme__head,
.acfc-schedule-2026 .acfc-sch-theme.is-parsed .acfc-sch-theme__desc,
.acfc-schedule-2026 .acfc-sch-theme.is-parsed .acfc-sch-theme__chips,
.acfc-schedule-2026 .acfc-sch-theme.is-parsed .acfc-sch-theme__bullets,
.acfc-schedule-2026 .acfc-sch-theme.is-parsed .acfc-sch-theme__fine {
    margin: 0;
    min-width: 0;
}

.acfc-schedule-2026 .acfc-sch-theme__head {
    display: flex;
    flex-direction: column;
    /* Each line shrinks to its own text. At the default `stretch` every child was as
       wide as the whole column, so the h3's box ran the full 304px behind a 250px
       title — invisible at rest, but it is a 54px dead target and it made the
       heading look mis-set under inspection. The mobile tier overrides this to
       `center`, which needs the same shrink-to-fit to centre anything. */
    align-items: flex-start;
    gap: 0.15rem;
    margin-bottom: 0.5rem;
}

.acfc-schedule-2026 .acfc-sch-theme__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--acfc-sch-rosa-dark);
}

/* Deliberately below .acfc-sch-card__opponent: the theme night is a secondary
   band under the fixture, so it should not read as the card's headline. */
.acfc-schedule-2026 .acfc-sch-theme__title {
    margin: 0;
    font-family: var(--acfc-sch-display);
    font-size: clamp(0.92rem, 1.8vw, 1.1rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--acfc-sch-ink);
}

/* Label beside the partner where there is room, label above it where there is not.
   flex-wrap does that without a breakpoint, because flexbox breaks lines on each
   item's max-content size: the partner name only moves down once the pair genuinely
   stops fitting, and then has the full row to itself.

   center, not baseline. Sharing a baseline sounds like the right answer for two runs
   on one line, and it is when they are the same size. These are not: 0.62rem tracked
   caps against 0.85rem proper case. Both runs then end on the baseline while the
   larger one's capitals rise 2.7px further, so the name reads as floating above the
   label. Measured on rendered ink, its optical centre sat 1.58px high.

   Centring the line-height boxes instead lands that difference at 0.08px. It works
   because the boxes are close to proportional to the cap heights they contain, which
   makes this an approximation of centring the two cap blocks — the alignment the eye
   is actually looking for between a micro-label and a name. Note that it therefore
   depends on the leading set on the two children below: changing either line-height
   moves this alignment, so re-measure if they change.

   Row gap used to be 0, on the reasoning that the two line boxes separate the lines
   on their own. They do not by enough: the label sets line-height 1, so its box is
   cropped to the glyphs, and measuring glyph-to-glyph left 0.9px between the two
   lines — reading as touching.

   The row gap only shows when the lockup wraps, which the 21rem column cap keeps to
   roughly 350px and below: every partner fits on one line above that. So this is a
   narrow-phone case, not the common presentation.

   0.2rem lands the ink gap at 4.1px. Deliberately tighter than the 6.4px column gap
   used side by side — stacked, the two lines are already separated by their own line
   boxes, and matching the horizontal figure pushed them apart enough to stop reading
   as one lockup. Note this depends on the leading set on the two children below, so
   re-measure if either line-height changes. */
.acfc-schedule-2026 .acfc-sch-theme__sponsor {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.2rem 0.4rem;
    margin-top: 0.45rem;
}

.acfc-schedule-2026 .acfc-sch-theme__sponsor-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--acfc-sch-faint);
    /* No leading at all, which is free here: the phrase never wraps, so its leading
       is pure padding, and uppercase has no descenders to clip at line-height 1.
       Inherited `normal` gave this 13px for a 9.92px font, and all 3px of that sat
       between the two lines when the lockup stacked. */
    line-height: 1;
    /* Never break "Presented by" across lines. On a narrow card it was splitting to
       "PRESENTED / BY" next to a name that was also wrapping, and two ragged columns
       of two lines each read as four unrelated fragments. Keeping the phrase intact
       is what forces the name onto its own row instead. */
    white-space: nowrap;
}

.acfc-schedule-2026 .acfc-sch-theme__sponsor-name {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--acfc-sch-ink);
    /* Tighter than the inherited `normal` to close the stacked gap, but not as tight
       as the label: unlike the label this can wrap, and it does on the narrowest
       cards. 1.3 leaves about 1.2px between its own lines at this size, where 1.25
       brings them within half a pixel of touching. */
    line-height: 1.3;
    /* Wraps at spaces on its own row without help; this is only for a partner whose
       name is one long unbroken word.

       anywhere rather than break-word, which does nothing here: break-word is
       ignored when computing intrinsic sizes, so this flex item's automatic minimum
       stayed as wide as the unbroken word and it overflowed the band instead of
       breaking. anywhere feeds into min-content, letting the item shrink to the row
       and break. Neither breaks a name that has spaces in it, which is all of them. */
    overflow-wrap: anywhere;
}

.acfc-schedule-2026 .acfc-sch-theme__sponsor-logo {
    max-height: 26px;
    max-width: 130px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.acfc-schedule-2026 .acfc-sch-theme__desc {
    margin: 0 0 0.55rem;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--acfc-sch-ink-soft);
}

.acfc-schedule-2026 .acfc-sch-theme__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
}

/* This chip is the one place in the module where two different font sizes share a
   row: a 0.62rem all-caps label against a 0.78rem mixed-case value. align-items:
   center would centre each one's line box independently, which puts their
   baselines at different heights — the label ends up floating above the value.
   Baseline alignment is the fix, and it is the only correct answer here; no
   amount of padding or nudging makes two centred boxes of different sizes share
   a baseline.

   line-height must stay normal, not 1. It is what lets the centred icon land on
   the value's cap band without a nudge — see the icon rule below. */
.acfc-schedule-2026 .acfc-sch-theme__chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.42rem 0.7rem;
    border-radius: var(--acfc-sch-radius-full);
    border: 1px solid rgba(241, 177, 165, 0.55);
    background: var(--acfc-sch-rosa-soft);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: normal;
    color: var(--acfc-sch-ink);
}

/* The icon opts out of the baseline group — it has no baseline to contribute —
   and centres on the row instead. No nudge, because with line-height: normal the
   centre it lands on is already the right one.

   The row's height comes from the value's line box, which at normal line-height is
   exactly ascent + descent. Centring in that box puts the icon's centre
   (ascent - descent) / 2 above the baseline, and the value's cap band centres
   capHeight / 2 above the same baseline. Inter makes those equal, so centring is
   the alignment rather than an approximation of it.

   Setting line-height: 1 here shrinks the box below ascent + descent, which drops
   the baseline relative to the box and is what made these icons read high. */
.acfc-schedule-2026 .acfc-sch-theme__chip .acfc-sch-icon {
    align-self: center;
    color: var(--acfc-sch-rosa-dark);
}

/* Sharing a baseline is correct for the layout but leaves the label looking low:
   its caps are 0.72 x 0.62rem tall against the value's 0.72 x 0.78rem, so from a
   common baseline the label's cap band centres about 1px below the value's. The
   lift is visual only — transforms run after layout, so the baseline the value
   aligns to is unaffected. */
.acfc-schedule-2026 .acfc-sch-theme__chip b {
    transform: translateY(-1px);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--acfc-sch-muted);
}

.acfc-schedule-2026 .acfc-sch-theme__bullets {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0 0 0.4rem;
    padding: 0;
    list-style: none;
}

.acfc-schedule-2026 .acfc-sch-theme__bullets li {
    position: relative;
    padding-left: 0.9rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--acfc-sch-ink-soft);
}

.acfc-schedule-2026 .acfc-sch-theme__bullets li::before {
    content: '';
    position: absolute;
    top: 0.55em;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--acfc-sch-rosa-dark);
}

.acfc-schedule-2026 .acfc-sch-theme__bullets a {
    color: var(--acfc-sch-ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.acfc-schedule-2026 .acfc-sch-theme__fine {
    margin: 0;
    font-size: 0.72rem;
    font-style: italic;
    line-height: 1.4;
    color: var(--acfc-sch-faint);
}

/* Unparsed fallback: the raw HubDB rich text, tamed enough to be readable if
   module.js never runs.

   Hidden on .acfc-sch-js rather than on .is-parsed. .is-parsed only lands at
   DOMContentLoaded, so between first paint and that point every themed card showed
   its raw HubDB source — headings, rules and all — and then swapped. The class is
   set by an inline script inside the module element, during parse, so the hidden
   state is in place before anything is painted. A browser running no JS never sets
   it and still gets the fallback. */
.acfc-schedule-2026.acfc-sch-js .acfc-sch-theme__raw {
    display: none;
}

/* Parsing produced nothing usable, so the raw text goes back rather than leaving an
   empty band. initThemes sets this per card. */
.acfc-schedule-2026.acfc-sch-js .acfc-sch-theme.is-raw .acfc-sch-theme__raw {
    display: block;
}

.acfc-schedule-2026 .acfc-sch-theme__raw h1,
.acfc-schedule-2026 .acfc-sch-theme__raw h2,
.acfc-schedule-2026 .acfc-sch-theme__raw h3,
.acfc-schedule-2026 .acfc-sch-theme__raw h4,
.acfc-schedule-2026 .acfc-sch-theme__raw h5,
.acfc-schedule-2026 .acfc-sch-theme__raw h6 {
    margin: 0 0 0.3rem;
    font-family: var(--acfc-sch-display);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    color: var(--acfc-sch-ink);
}

.acfc-schedule-2026 .acfc-sch-theme__raw h6 {
    font-family: var(--acfc-sch-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--acfc-sch-muted);
}

.acfc-schedule-2026 .acfc-sch-theme__raw pre {
    margin: 0.4rem 0 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--acfc-sch-body);
    font-size: 0.85rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--acfc-sch-ink-soft);
}

.acfc-schedule-2026 .acfc-sch-theme__raw hr {
    margin: 0.5rem 0;
    border: 0;
    border-top: 1px solid var(--acfc-sch-edge);
}

.acfc-schedule-2026 .acfc-sch-theme__raw p,
.acfc-schedule-2026 .acfc-sch-theme__raw li {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--acfc-sch-ink-soft);
}

/* ==========================================================================
   Broadcast chips
   ========================================================================== */

.acfc-schedule-2026 .acfc-sch-broadcasts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    min-width: 0;
}

.acfc-schedule-2026 .acfc-sch-broadcast {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-width: 0;
}

.acfc-schedule-2026 .acfc-sch-broadcast__label {
    /* Inter's cap centre sits ~0.45em from the line-box top, not 0.5em, so
       align-items: center places caps ~0.5px above the icon's geometric centre.
       The token lifts the icon by the same amount to compensate. */
    --acfc-sch-icon-lift: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    line-height: normal;
    text-transform: uppercase;
    color: var(--acfc-sch-faint);
}

/* Every icon that sits beside an all-caps label gets the optical lift. Grouped
   rather than repeated per component so they cannot drift apart. The dropdown
   caret is excluded because it carries its own rotate transform, which would
   overwrite a translate declared here. */
.acfc-schedule-2026 .acfc-sch-broadcast__label .acfc-sch-icon,
.acfc-schedule-2026 .acfc-sch-broadcast__links .acfc-sch-icon,
.acfc-schedule-2026 .acfc-sch-chip .acfc-sch-icon,
.acfc-schedule-2026 .acfc-sch-tag .acfc-sch-icon,
.acfc-schedule-2026 .acfc-sch-card__meta-item .acfc-sch-icon,
.acfc-schedule-2026 .acfc-sch-theme__eyebrow .acfc-sch-icon,
.acfc-schedule-2026 .acfc-sch-nextmatch__eyebrow .acfc-sch-icon,
.acfc-schedule-2026 .acfc-sch-btn:not(.acfc-sch-btn--caret) .acfc-sch-icon {
    transform: translateY(calc(var(--acfc-sch-icon-lift) * -1));
}

.acfc-schedule-2026 .acfc-sch-broadcast__label .acfc-sch-icon {
    color: var(--acfc-sch-muted);
}

.acfc-schedule-2026 .acfc-sch-broadcast__links {
    display: flex;
    align-items: center;
        flex-wrap: wrap;
    gap: 0.35rem;
    min-width: 0;
}

/* Parsed chips */
.acfc-schedule-2026 .acfc-sch-chip {
    /* Same inter cap-centre correction as the broadcast label. */
    --acfc-sch-icon-lift: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.46rem 0.68rem 0.46rem 0.72rem;
    border: 1px solid var(--acfc-sch-edge);
    border-radius: var(--acfc-sch-radius-full);
    background: var(--acfc-sch-panel);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1;
    /* uppercase is right for call letters (ION, KWKW), but broadcast labels like
       "iHeartRadio" or "NWSL+" have intentional mixed case. The span below resets
       it so the HubDB value is shown verbatim; call-letter chips are entered in
       caps in the CMS, so they stay caps either way. */
    text-transform: uppercase;
    text-decoration: none;
    color: var(--acfc-sch-ink);
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s var(--acfc-sch-ease);
}

/* Let the label text inside a chip carry its own case. The icon SVG is a sibling,
   not a child, so it is unaffected by this reset. */
.acfc-schedule-2026 .acfc-sch-chip > span {
    text-transform: none;
}

/* Watch-party chip: desktop shows the short label, mobile shows the full one
   (the broadcast__label is hidden at the mobile breakpoint so the chip text
   needs to be self-explanatory). Use the > child combinator + element type to
   ensure specificity beats any theme-level span rule. */
.acfc-schedule-2026 .acfc-sch-chip > span.acfc-sch-chip__label--mobile {
    display: none;
}

@media (max-width: 768px) {
    .acfc-schedule-2026 .acfc-sch-chip > span.acfc-sch-chip__label--desktop {
        display: none;
    }
    .acfc-schedule-2026 .acfc-sch-chip > span.acfc-sch-chip__label--mobile {
        display: inline;
    }
}

/* focus-visible stays ungated so keyboard navigation still shows a visible ring on
   all devices. The hover lift is touch-only excluded — same guard as the card and
   hero buttons — because a sticky :hover state on the last-tapped chip reads as a
   selection indicator rather than a rollover, which is misleading. */
@media (hover: hover) {
    .acfc-schedule-2026 a.acfc-sch-chip:hover {
        border-color: var(--acfc-sch-rosa);
        background: var(--acfc-sch-rosa-soft);
        transform: translateY(-1px);
    }
}

.acfc-schedule-2026 a.acfc-sch-chip:focus-visible {
    border-color: var(--acfc-sch-rosa);
    background: var(--acfc-sch-rosa-soft);
}

.acfc-schedule-2026 .acfc-sch-chip .acfc-sch-icon {
    color: var(--acfc-sch-faint);
}

/* Unparsed fallback: raw HubDB anchors read as chips too. */
.acfc-schedule-2026 .acfc-sch-broadcast__links p {
    display: inline;
    margin: 0;
}

.acfc-schedule-2026 .acfc-sch-broadcast__links br {
    display: none;
}

/* :not() keeps this off the parsed chips, which style themselves. */
.acfc-schedule-2026 .acfc-sch-broadcast__links a:not(.acfc-sch-chip) {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    margin: 0 0.2rem 0.2rem 0;
    border: 1px solid var(--acfc-sch-edge);
    border-radius: var(--acfc-sch-radius-full);
    background: var(--acfc-sch-panel);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--acfc-sch-ink);
}

/* ==========================================================================
   Dropdown menus
   ========================================================================== */

.acfc-schedule-2026 .acfc-sch-menu-wrap {
    position: relative;
    display: inline-flex;
}

.acfc-schedule-2026 .acfc-sch-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 200;
    min-width: 288px;
    max-width: min(340px, calc(100vw - 32px));
    padding: 0.4rem;
    border: 1px solid var(--acfc-sch-edge);
    border-radius: var(--acfc-sch-radius-md);
    background: var(--acfc-sch-panel);
    box-shadow: var(--acfc-sch-shadow-e3);
    animation: acfc-sch-menu-in 0.18s var(--acfc-sch-ease);
}

.acfc-schedule-2026 .acfc-sch-menu--up {
    top: auto;
    bottom: calc(100% + 8px);
}

/* Nav menus hang off the right edge of their trigger so they stay on screen. */
.acfc-schedule-2026 .acfc-sch-menu--end {
    right: 0;
    left: auto;
}

@keyframes acfc-sch-menu-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.acfc-schedule-2026 .acfc-sch-menu__item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: 0;
    border-radius: var(--acfc-sch-radius-sm);
    background: transparent;
    font-family: var(--acfc-sch-body);
    text-align: left;
    text-decoration: none;
    color: var(--acfc-sch-ink);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.18s ease;
}

/* Keyboard focus stays ungated — it is never latched, and it is the only thing
   marking position in the menu for a reader tabbing through it. */
.acfc-schedule-2026 .acfc-sch-menu__item:focus-visible {
    background: var(--acfc-sch-rosa-soft);
}

.acfc-schedule-2026 .acfc-sch-menu__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--acfc-sch-radius-sm);
    background: var(--acfc-sch-surface-warm);
    color: var(--acfc-sch-ink);
}

/* Both menu hover treatments, gated together. These items navigate away, so on
   touch the latch outlives the page: tap Premium Suites, come back, and the row
   is still lit as though it were about to be pressed. Nothing is lost by dropping
   it — a finger is already on the row it is pointing at. */
@media (hover: hover) and (min-width: 769px) {
    .acfc-schedule-2026 .acfc-sch-menu__item:hover {
        background: var(--acfc-sch-rosa-soft);
    }

    .acfc-schedule-2026 .acfc-sch-menu__item:hover .acfc-sch-menu__icon {
        background: var(--acfc-sch-rosa);
    }
}

.acfc-schedule-2026 .acfc-sch-menu__body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.acfc-schedule-2026 .acfc-sch-menu__title {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.3;
    color: var(--acfc-sch-ink);
}

.acfc-schedule-2026 .acfc-sch-menu__desc {
    font-size: 0.74rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--acfc-sch-muted);
}

.acfc-schedule-2026 .acfc-sch-menu__slot:empty {
    display: none;
}

.acfc-schedule-2026 .acfc-sch-menu__sep {
    margin: 0.35rem 0.7rem 0.2rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--acfc-sch-edge);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--acfc-sch-faint);
}

/* ==========================================================================
   Empty state
   ========================================================================== */

.acfc-schedule-2026 .acfc-sch-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem 1.5rem;
    border: 1px dashed var(--acfc-sch-edge);
    border-radius: var(--acfc-sch-radius-md);
    background: var(--acfc-sch-surface);
    text-align: center;
}

.acfc-schedule-2026 .acfc-sch-empty__title {
    margin: 0;
    font-family: var(--acfc-sch-display);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    color: var(--acfc-sch-ink);
}

.acfc-schedule-2026 .acfc-sch-empty__body {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    color: var(--acfc-sch-muted);
}

/* ==========================================================================
   Views
   ========================================================================== */

/* The hero's "View Full Schedule" is a fragment link to #event-list, and a
   fragment jump parks the target's top edge at the viewport top — exactly where
   the nav docks, so the first card landed behind it. This stops the jump a nav's
   height short, which puts the nav at its resting position with the first match
   directly below it. */
.acfc-schedule-2026 .acfc-sch-view {
    display: none;
    scroll-margin-top: var(--acfc-sch-nav-clear);
}

.acfc-schedule-2026 .acfc-sch-view.is-active {
    display: block;
}

/* ==========================================================================
   Sidebar mini-calendar — desktop companion to the list
   ========================================================================== */

/* e1, not e2. This is a resting panel, and the module spends e2 on interaction —
   the nav once it sticks, a calendar chip on hover — so a static e2 here read as
   permanently lifted. It also sat a tier above the Next Home Match panel directly
   beneath it, which is what made the column look like two unrelated widgets
   instead of one stack. */
.acfc-schedule-2026 .acfc-sch-minical {
    padding: 0.9rem 1rem 1rem;
    border: 1px solid var(--acfc-sch-edge);
    border-radius: var(--acfc-sch-radius-md);
    background: var(--acfc-sch-panel);
    box-shadow: var(--acfc-sch-shadow-e1);
    /* Matches the nav's own radius transition so the two corners square off
       together rather than one snapping while the other eases. */
    transition: border-radius 0.3s ease;
}

.acfc-schedule-2026 .acfc-sch-minical__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    margin-bottom: 0.7rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--acfc-sch-edge);
}

/* Sized against the tightest budget in the module rather than by eye. The 232px
   sidebar less the panel's 1rem sides leaves 200px; the prev/next pair takes 56px
   and the head gap 6px, so this label gets ~138px. "SEPTEMBER 2026" is the worst
   case and lands near 123px here — at the 0.9rem this carried under the condensed
   face it measures ~137px in Inter and wraps the header onto two lines. */
.acfc-schedule-2026 .acfc-sch-minical__month {
    margin: 0;
    font-family: var(--acfc-sch-display);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--acfc-sch-ink);
}

.acfc-schedule-2026 .acfc-sch-minical__nav {
    display: flex;
    gap: 0.25rem;
}

.acfc-schedule-2026 .acfc-sch-minical__nav button {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--acfc-sch-edge);
    border-radius: var(--acfc-sch-radius-sm);
    background: var(--acfc-sch-surface-warm);
    color: var(--acfc-sch-ink);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.acfc-schedule-2026 .acfc-sch-minical__nav button:hover:not(:disabled) {
    border-color: var(--acfc-sch-rosa);
    background: var(--acfc-sch-rosa-soft);
}

.acfc-schedule-2026 .acfc-sch-minical__nav button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.acfc-schedule-2026 .acfc-sch-minical__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 3px;
}

.acfc-schedule-2026 .acfc-sch-minical__weekdays span {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    color: var(--acfc-sch-faint);
}

.acfc-schedule-2026 .acfc-sch-minical__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

/* Alignment in a 7-column grid of ~26px squares is unforgiving: any drift shows up
   as a ragged column of numerals. Two things are needed. Flex centering, because
   place-items on a button does not center its anonymous text in every engine.
   tabular-nums, so '1' occupies the same advance as '8' and single digits stay
   centered instead of floating inside a proportional glyph's side bearings.

   Inter's cap centre sits ~0.45em from the line-box top vs. the geometric 0.5em
   centre, so align-items: center leaves numerals ~0.58px above the cell's visual
   midpoint. 1px of top padding shifts the flex content area down, compensating
   without touching the font or line-height. */
.acfc-schedule-2026 .acfc-sch-minical__day {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    padding: 1px 0 0;
    border: 1px solid transparent;
    border-radius: var(--acfc-sch-radius-sm);
    background: transparent;
    font-family: var(--acfc-sch-body);
    font-size: 0.72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    -moz-font-feature-settings: 'tnum';
    font-feature-settings: 'tnum';
    line-height: 1;
    color: var(--acfc-sch-ink-soft);
    -webkit-appearance: none;
    appearance: none;
}

/* Padding cells for the leading / trailing week. */
.acfc-schedule-2026 .acfc-sch-minical__day--pad {
    visibility: hidden;
    pointer-events: none;
}

/* Only game days are interactive; everything else is a plain read-only cell. */
.acfc-schedule-2026 .acfc-sch-minical__day--game {
    font-weight: 800;
    color: var(--acfc-sch-ink);
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.acfc-schedule-2026 .acfc-sch-minical__day--home {
    border-color: rgba(241, 177, 165, 0.6);
    background: var(--acfc-sch-rosa-soft);
}

.acfc-schedule-2026 .acfc-sch-minical__day--away {
    border-style: dashed;
    border-color: var(--acfc-sch-edge);
    background: var(--acfc-sch-surface-warm);
}

.acfc-schedule-2026 .acfc-sch-minical__day--game:hover {
    border-style: solid;
    border-color: var(--acfc-sch-rosa);
    background: rgba(241, 177, 165, 0.26);
}

.acfc-schedule-2026 .acfc-sch-minical__day--today {
    box-shadow: inset 0 0 0 2px var(--acfc-sch-rosa-dark);
}

.acfc-schedule-2026 .acfc-sch-minical__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.7rem;
    margin-top: 0.7rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--acfc-sch-edge);
}

.acfc-schedule-2026 .acfc-sch-minical__legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--acfc-sch-muted);
}

.acfc-schedule-2026 .acfc-sch-minical__legend i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    border: 1px solid rgba(241, 177, 165, 0.6);
    background: var(--acfc-sch-rosa-soft);
}

.acfc-schedule-2026 .acfc-sch-minical__legend i.is-away {
    border-style: dashed;
    border-color: var(--acfc-sch-edge);
    background: var(--acfc-sch-surface-warm);
}

/* ==========================================================================
   Next Home Match — sidebar companion card
   ========================================================================== */

/* ==========================================================================
   Next Home Match — sidebar companion card

   Shares the mini-calendar's panel treatment so the column reads as two panels
   of one thing rather than two unrelated widgets. Height is the binding
   constraint: this sits under a ~300px calendar inside a sticky column capped to
   the viewport, so every band is sized to the smallest that still reads.
   ========================================================================== */

.acfc-schedule-2026 .acfc-sch-nextmatch {
    display: block;
    margin-top: 0.7rem;
    border: 1px solid var(--acfc-sch-edge);
    border-radius: var(--acfc-sch-radius-md);
    background: var(--acfc-sch-panel);
    box-shadow: var(--acfc-sch-shadow-e1);
    overflow: hidden;
    text-decoration: none;
    transition: var(--acfc-sch-lift-transition);
}

/* Warm strip, matching the card meta rows in the list. The rosa rule underneath
   is what separates it from the calendar's own header without adding weight. */
.acfc-schedule-2026 .acfc-sch-nextmatch__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.32rem;
    margin: 0;
    padding: 0.5rem 0.8rem;
    border-bottom: 1px solid var(--acfc-sch-rosa);
    background: var(--acfc-sch-surface-warm);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--acfc-sch-ink-soft);
}

.acfc-schedule-2026 .acfc-sch-nextmatch__eyebrow .acfc-sch-icon {
    color: var(--acfc-sch-rosa-dark);
}

.acfc-schedule-2026 .acfc-sch-nextmatch__body {
    padding: 0.75rem 0.8rem 0.8rem;
}

.acfc-schedule-2026 .acfc-sch-nextmatch__matchup {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.acfc-schedule-2026 .acfc-sch-nextmatch__crest {
    display: grid;
    flex: none;
    height: auto;
    place-items: center;
    width: 26px;
}

.acfc-schedule-2026 .acfc-sch-nextmatch__crest img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.acfc-schedule-2026 .acfc-sch-nextmatch__teams {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    min-width: 0;
}

/* Date, time and zone on one line. The stacked date lockup this replaces spent
   ~90px of column height to say what fits on a single 12px line. */
.acfc-schedule-2026 .acfc-sch-nextmatch__when {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--acfc-sch-rosa-dark);
}

.acfc-schedule-2026 .acfc-sch-nextmatch__when em {
    font-style: normal;
    font-size: 0.9em;
    color: var(--acfc-sch-faint);
}

/* Kept in step with .acfc-sch-deposits__heading below. Smaller than the list's
   opponent name on purpose — this is a 232px summary panel, and at 1.02rem Inter
   800 the longer names broke onto three lines and dominated the sidebar. */
.acfc-schedule-2026 .acfc-sch-nextmatch__opponent {
    font-family: var(--acfc-sch-display);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--acfc-sch-ink);
    overflow-wrap: break-word;
}

.acfc-schedule-2026 .acfc-sch-nextmatch__vs {
    margin-right: 0.28rem;
    font-family: var(--acfc-sch-body);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    vertical-align: 0.14em;
    color: var(--acfc-sch-faint);
}

/* Only rendered when the ground is not the usual one, so it reads as an exception
   rather than a field. Pin icon carries that: the eyebrow above uses the same glyph,
   and repeating it here says "location" without a label. Proper case, since a
   45-character name in tracked caps would run three lines in a 232px column. */
.acfc-schedule-2026 .acfc-sch-nextmatch__venue {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    margin-top: 0.1rem;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--acfc-sch-muted);
    overflow-wrap: break-word;
}

/* flex-start above rather than center, so a name that wraps to two lines keeps the
   pin beside the first line instead of floating to the middle of the block. The
   nudge re-centres it against that first line. */
.acfc-schedule-2026 .acfc-sch-nextmatch__venue .acfc-sch-icon {
    flex: 0 0 auto;
    margin-top: 0.15em;
    color: var(--acfc-sch-faint);
}

/* Theme night is deliberately not repeated here. The list card below carries the
   full version, and in a sidebar the height it costs is worth more than the
   duplication is. */

.acfc-schedule-2026 .acfc-sch-nextmatch__cta {
    /* Full-width buttons need display:flex so engines respect align-items:center.
       inline-flex + width:100% can default cross-axis to stretch in some browsers,
       pushing content to the top of the padded box instead of centering it. */
    display: flex;
    width: 100%;
    /* Matches .acfc-sch-deposits__cta, for the reason given there: the eyebrow
       strip separates this panel's content well enough that the button no longer
       needs to buy its own separation with a gap. */
    margin-top: 0.6rem;
    min-height: 40px;
    max-height: 40px;
    line-height: normal;
    padding-inline: 0.8rem;
    background: var(--acfc-sch-rosa);
    border-color: var(--acfc-sch-rosa);
    color: var(--acfc-sch-ink);
    /* Below the 0.85rem module button, and matched by .acfc-sch-deposits__cta.
       These two sit in a 232px column against 0.92rem headings, so the button
       label has to stay under the heading it belongs to. */
    font-size: 0.75rem;
}

/* Keyed to the tile, not the button span: the tile is now the anchor, so hovering
   anywhere on it should darken the CTA — same pattern as .acfc-sch-deposits. */
.acfc-schedule-2026 .acfc-sch-nextmatch:hover .acfc-sch-nextmatch__cta,
.acfc-schedule-2026 .acfc-sch-nextmatch:focus-visible .acfc-sch-nextmatch__cta {
    background: var(--acfc-sch-rosa-dark);
    border-color: var(--acfc-sch-rosa-dark);
}

/* ==========================================================================
   Sidebar: 2027 deposits promo
   ========================================================================== */

/* The whole tile is the link, so it takes the card border treatment rather than
   nesting a button inside it.

   Anatomy deliberately matches .acfc-sch-nextmatch above — bordered panel, then
   a full-bleed header strip, then padded content. Previously this was a flat
   tile with a diagonal gradient, which made the third panel in the column the
   odd one out. Distinction now comes from the rosa border and the rosa button
   instead of a wash, so it still reads as the promo without being a different
   shape of object.

   The panel fill is what gives the warm header strip something to sit against;
   on a warm body the strip loses its edge and only the rosa rule under it
   survives. Same pairing as .acfc-sch-nextmatch, for the same reason.

   The padding is a local token because the header strip below bleeds itself out
   with a matching negative margin; hard-coding both invites them to drift. No
   top padding — the strip supplies its own, and overflow keeps it inside the
   rounded corners. */
.acfc-schedule-2026 .acfc-sch-deposits {
    --acfc-sch-dep-pad: 0.8rem;
    display: block;
    margin-top: 0.7rem;
    padding: 0 var(--acfc-sch-dep-pad) 0.85rem;
    border: 1px solid var(--acfc-sch-edge);
    border-radius: var(--acfc-sch-radius-md);
    background: var(--acfc-sch-panel);
    box-shadow: var(--acfc-sch-shadow-e1);
    overflow: hidden;
    text-decoration: none;
    transition: var(--acfc-sch-lift-transition);
}


/* Identical to .acfc-sch-nextmatch__eyebrow, down to the warm fill and ink-soft
   text — the two strips sit one above the other in the same column, so a rosa
   fill here read as a mismatch rather than as emphasis. The tile keeps its rosa
   border and rosa button to mark it as the promo.

   Only the margin differs, and only because it has to: this strip bleeds itself
   out to the tile edges with a negative margin rather than sitting inside a
   wrapper element, which is what keeps the markup a flat anchor. */
.acfc-schedule-2026 .acfc-sch-deposits__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.32rem;
    margin: 0 calc(var(--acfc-sch-dep-pad) * -1) 0.7rem;
    padding: 0.5rem var(--acfc-sch-dep-pad);
    border-bottom: 1px solid var(--acfc-sch-rosa);
    background: var(--acfc-sch-surface-warm);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--acfc-sch-ink-soft);
}

.acfc-schedule-2026 .acfc-sch-deposits__eyebrow .acfc-sch-icon {
    color: var(--acfc-sch-rosa-dark);
}

/* margin-top: 0 because the strip above owns the gap now. Size and line-height
   both match .acfc-sch-nextmatch__opponent so the two sidebar panels sit on the
   same rhythm — change one and change the other. */
.acfc-schedule-2026 .acfc-sch-deposits__heading {
    margin: 0;
    font-family: var(--acfc-sch-display);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--acfc-sch-ink);
}

.acfc-schedule-2026 .acfc-sch-deposits__body {
    margin: 0.3rem 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--acfc-sch-muted);
}

/* Matches .acfc-sch-nextmatch__cta so the two sidebar panels present the same
   button. Same reason for display:flex over inline-flex: a full-width button
   needs it for engines to honour align-items:center.

   max-height pairs with min-height for the same reason it does on the sibling:
   without it the button grows with the flex line and stops matching.

   0.8rem rather than the 1.15rem this had. That figure was set when the eyebrow
   and heading ran straight into the copy with no divider, so the button needed
   the extra air to separate itself; the header strip now does that work higher
   up, which left this gap reading as a hole. */
.acfc-schedule-2026 .acfc-sch-deposits__cta {
    display: flex;
    width: 100%;
    margin-top: 0.6rem;
    min-height: 40px;
    max-height: 40px;
    padding-inline: 0.8rem;
    line-height: normal;
    background: var(--acfc-sch-rosa);
    border-color: var(--acfc-sch-rosa);
    color: var(--acfc-sch-ink);
    font-size: 0.75rem;
}

/* Keyed to the tile, not the span: the anchor is the whole card, so the button
   has to respond to hover anywhere on it rather than only over itself. */
.acfc-schedule-2026 .acfc-sch-deposits:hover .acfc-sch-deposits__cta,
.acfc-schedule-2026 .acfc-sch-deposits:focus-visible .acfc-sch-deposits__cta {
    background: var(--acfc-sch-rosa-dark);
    border-color: var(--acfc-sch-rosa-dark);
}

/* Short viewports. Keyed to height, not width, because a wide window can still be
   short. The calendar legend is the safest thing to drop — the home/away tinting
   on the day cells already carries that information. */
@media (min-width: 1080px) and (max-height: 720px) {
    .acfc-schedule-2026 .acfc-sch-minical {
        padding: 0.75rem 0.85rem 0.85rem;
    }
.acfc-schedule-2026 .acfc-sch-nextmatch__opponent {
    font-size: .85rem;
  }
.acfc-sch-deposits__heading {
  display: none;
  }
    .acfc-schedule-2026 .acfc-sch-minical__legend {
        display: none;
    }

    .acfc-schedule-2026 .acfc-sch-nextmatch__crest {
        height: auto;
        width: 26px;
    }

    /* Same reasoning as the legend: the eyebrow, heading and CTA already carry
       the offer, so the supporting sentence is what gives back sidebar height. 
    .acfc-schedule-2026 .acfc-sch-deposits__body {
        display: none;
    }*/

    /* __nextmatch__venue is deliberately NOT hidden here. It only renders when the
       ground is unusual or unknown, which makes it the most valuable line in the
       panel whenever it appears — dropping it to save 14px would reintroduce the
       exact "assumed BMO" failure it exists to prevent. The legend and crest above
       give back more height and cost nothing. */
}

/* ==========================================================================
   Sticky footer CTA bar
   ========================================================================== */

.acfc-schedule-2026 .acfc-sch-footerbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9000;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--acfc-sch-edge);
    /* Translucent enough for the blur above to actually read as frosted glass.
       The opacity declarations below are the reveal transition and must stay
       independent of this — folding the two together would fade the buttons. */
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: 0 -8px 32px rgba(28, 20, 16, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    transition: opacity 0.35s var(--acfc-sch-ease), transform 0.35s var(--acfc-sch-ease), visibility 0.35s;
}

.acfc-schedule-2026 .acfc-sch-footerbar.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* An open card dropdown wins: the bar would otherwise cover its menu items. */
.acfc-schedule-2026.has-open-menu .acfc-sch-footerbar.is-visible {
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
}

/* Reserve room so the bar never hides the last card in view. */
.acfc-schedule-2026.is-footerbar-visible .acfc-sch-view--list {
    padding-bottom: 76px;
}

/* Without backdrop-filter these translucent surfaces sit directly over scrolling
   cards and their labels wash out, so fall back to near-opaque. Same convention
   as 2027Renewals, which this module takes its tokens from. */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
    .acfc-schedule-2026 .acfc-sch-footerbar {
        background: rgba(255, 255, 255, 0.96);
    }

    .acfc-schedule-2026 .acfc-sch-nav {
        background: rgba(255, 255, 255, 0.98);
    }
}

.acfc-schedule-2026 .acfc-sch-footerbar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: var(--acfc-sch-max-width);
    margin: 0 auto;
}

/* ==========================================================================
   Calendar view — month grid

   Replaces a FullCalendar embed. That build measured its own scroll container
   to size itself, and because this panel is display:none until the view toggle
   switches, it measured zero and shipped a clipped grid with an inner
   scrollbar. A plain CSS grid has nothing to measure and no scroller.

   Hairlines come from `gap: 1px` over an edge-coloured background rather than
   borders on each cell, which is what keeps them a true 1px with no doubling
   at the seams. It does mean every cell needs an opaque background, including
   the leading and trailing pads, or the gap colour bleeds through the cell.
   ========================================================================== */

.acfc-schedule-2026 .acfc-sch-cal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--acfc-sch-edge);
}

/* Larger than .acfc-sch-monthdiv__label because in calendar view this is the
   page's heading rather than a divider between groups, but scaled with it. */
.acfc-schedule-2026 .acfc-sch-cal__month {
    margin: 0;
    font-family: var(--acfc-sch-display);
    font-size: clamp(1.1rem, 2.6vw, 1.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--acfc-sch-ink);
}

.acfc-schedule-2026 .acfc-sch-cal__nav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Same treatment as the sidebar mini-calendar's pager, so the two calendars
   read as one system rather than two widgets. */
.acfc-schedule-2026 .acfc-sch-cal__step {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--acfc-sch-edge);
    border-radius: var(--acfc-sch-radius-sm);
    background: var(--acfc-sch-surface-warm);
    color: var(--acfc-sch-ink);
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.acfc-schedule-2026 .acfc-sch-cal__today {
    padding: 0 0.9rem;
    height: 34px;
    border: 1px solid var(--acfc-sch-edge);
    border-radius: var(--acfc-sch-radius-full);
    background: var(--acfc-sch-panel);
    font-family: var(--acfc-sch-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--acfc-sch-ink);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.acfc-schedule-2026 .acfc-sch-cal__step:hover:not(:disabled),
.acfc-schedule-2026 .acfc-sch-cal__today:hover:not(:disabled) {
    border-color: var(--acfc-sch-rosa);
    background: var(--acfc-sch-rosa-soft);
}

.acfc-schedule-2026 .acfc-sch-cal__step:disabled,
.acfc-schedule-2026 .acfc-sch-cal__today:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Carries the same 1px gap as the grid below it, otherwise the gaps would make
   the grid's columns narrower than the header's and the two would drift apart
   across the width. The gaps are invisible here because they show the ink
   background through transparent cells. */
.acfc-schedule-2026 .acfc-sch-cal__weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border-radius: var(--acfc-sch-radius-sm) var(--acfc-sch-radius-sm) 0 0;
    background: var(--acfc-sch-ink);
}

.acfc-schedule-2026 .acfc-sch-cal__weekdays span {
    padding: 0.65rem 0.25rem;
    font-family: var(--acfc-sch-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    color: var(--acfc-sch-rosa);
}

/* Both labels ship in the markup and CSS picks one, so switching between the
   three-letter and single-letter forms needs no re-render. */
.acfc-schedule-2026 .acfc-sch-cal__weekdays b {
    font-weight: inherit;
}

.acfc-schedule-2026 .acfc-sch-cal__weekdays i {
    display: none;
    font-style: normal;
}

.acfc-schedule-2026 .acfc-sch-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--acfc-sch-edge);
    border-top: 0;
    border-radius: 0 0 var(--acfc-sch-radius-sm) var(--acfc-sch-radius-sm);
    background: var(--acfc-sch-edge);
}

/* min-height rather than aspect-ratio: grid rows already equalise to the
   tallest cell in the row, so a fixed ratio would only add clipping risk once
   a day holds two fixtures. */
.acfc-schedule-2026 .acfc-sch-cal__day {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-height: 112px;
    padding: 0.45rem;
    background: var(--acfc-sch-panel);
}

.acfc-schedule-2026 .acfc-sch-cal__day--pad {
    background: var(--acfc-sch-surface);
}

.acfc-schedule-2026 .acfc-sch-cal__day--home {
    background: var(--acfc-sch-rosa-soft);
    /* Inset rather than border-top so the rule cannot alter the cell's box and
       knock the 1px hairlines out of true. */
    box-shadow: inset 0 3px 0 var(--acfc-sch-rosa);
}

/* After the home and away rules so a played home match reads as finished. The
   rosa top rule survives it, since that is a box-shadow and this is only a
   background, which keeps home and away legible in past months. */
.acfc-schedule-2026 .acfc-sch-cal__day--past {
    background: var(--acfc-sch-surface);
}

.acfc-schedule-2026 .acfc-sch-cal__date {
    font-family: var(--acfc-sch-body);
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    -moz-font-feature-settings: 'tnum';
    font-feature-settings: 'tnum';
    line-height: 1;
    color: var(--acfc-sch-ink-soft);
}

.acfc-schedule-2026 .acfc-sch-cal__day--past .acfc-sch-cal__date {
    color: var(--acfc-sch-faint);
}

/* Today is a filled disc, so it needs the same optical correction the
   mini-calendar documents: Inter's cap centre sits above the line box's
   geometric centre, so 1px of top padding brings the numeral back to the
   middle of the circle. */
.acfc-schedule-2026 .acfc-sch-cal__day--today .acfc-sch-cal__date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    width: 22px;
    height: 22px;
    padding: 1px 0 0;
    border-radius: 50%;
    background: var(--acfc-sch-ink);
    color: #ffffff;
}

.acfc-schedule-2026 .acfc-sch-cal__match {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    margin: 0;
    padding: 0.35rem 0.4rem;
    border: 1px solid var(--acfc-sch-edge);
    border-radius: 7px;
    background: var(--acfc-sch-panel);
    box-shadow: var(--acfc-sch-shadow-e1);
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.acfc-schedule-2026 .acfc-sch-cal__match:hover {
    border-color: var(--acfc-sch-rosa);
    box-shadow: var(--acfc-sch-shadow-e2);
}

.acfc-schedule-2026 .acfc-sch-cal__match--past {
    background: var(--acfc-sch-panel);
    opacity: 0.75;
}

.acfc-schedule-2026 .acfc-sch-cal__crest {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    object-fit: contain;
}

/* min-width: 0 is what lets the name below actually wrap — a flex item floors at
   its content's minimum width, so without it the longest word would push the
   chip wider than its cell instead of breaking onto a second line. */
.acfc-schedule-2026 .acfc-sch-cal__match-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* Wraps rather than truncating: an ellipsis on a seven-column grid clipped most
   opponents to a couple of words ("vs Portland Thor…"), which is the one thing a
   day cell has to communicate. Grid rows equalise to their tallest cell, so a
   two-line name lifts its whole week evenly instead of leaving one cell ragged.
   break-word is the backstop for a long unbroken word in a narrow column. */
.acfc-schedule-2026 .acfc-sch-cal__match-name {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.25;
    overflow-wrap: break-word;
    color: var(--acfc-sch-ink);
}

.acfc-schedule-2026 .acfc-sch-cal__match-detail {
    overflow: hidden;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--acfc-sch-muted);
}

.acfc-schedule-2026 .acfc-sch-cal__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.9rem;
    margin-top: 0.8rem;
}

.acfc-schedule-2026 .acfc-sch-cal__legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--acfc-sch-muted);
}

.acfc-schedule-2026 .acfc-sch-cal__legend i {
    width: 10px;
    height: 10px;
    border: 1px solid rgba(241, 177, 165, 0.6);
    border-radius: 3px;
    background: var(--acfc-sch-rosa-soft);
}

.acfc-schedule-2026 .acfc-sch-cal__legend i.is-away {
    border-style: dashed;
    border-color: var(--acfc-sch-edge);
    background: var(--acfc-sch-surface-warm);
}

/* ==========================================================================
   Calendar day popup
   ========================================================================== */

.acfc-schedule-2026 .popup-wrapper {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.5rem 1rem;
    text-align: center;
    opacity: 0;
    transition: opacity 0.2s linear;
}

.acfc-schedule-2026 .popup-wrapper.model-open {
    z-index: 99999;
    opacity: 1;
}

.acfc-schedule-2026 .bg-overlay {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.2s linear;
}

.acfc-schedule-2026 .popup-wrapper.model-open .bg-overlay {
    z-index: 99;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.acfc-schedule-2026 .popup-inner {
    position: relative;
    z-index: 999;
        display: inline-block;
    width: 1000px;
    max-width: 100%;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: var(--acfc-sch-radius-lg);
    background: var(--acfc-sch-surface);
    box-shadow: var(--acfc-sch-shadow-e3);
    transform: translateY(-18px);
    transition: transform 0.3s var(--acfc-sch-ease);
    text-align: left;
}

.acfc-schedule-2026 .popup-wrapper.model-open .popup-inner {
    transform: translateY(0);
}

.acfc-schedule-2026 .popup-heading-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.acfc-schedule-2026 .popup-heading-left .heading {
    margin: 0;
    font-family: var(--acfc-sch-display);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    color: var(--acfc-sch-ink);
}

.acfc-schedule-2026 .popup-wrapper .close-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--acfc-sch-edge);
    border-radius: var(--acfc-sch-radius-full);
    background: var(--acfc-sch-panel);
    font-family: var(--acfc-sch-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--acfc-sch-ink);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.acfc-schedule-2026 .popup-wrapper .close-btn:hover {
    background: var(--acfc-sch-rosa);
    transform: translateY(-1px);
}

.acfc-schedule-2026 .popup-inner-wrap {
    display: none;
}

.acfc-schedule-2026 .popup-inner-wrap .acfc-sch-card {
    margin-bottom: 0;
}

.acfc-schedule-2026 .popup-inner-wrap .acfc-sch-card:not(.acfc-sch-card--away):hover {
    translate: none;
    box-shadow: var(--acfc-sch-shadow-e1);
}

/* ==========================================================================
   Bottom promo row
   ==========================================================================
   Three square tiles below the schedule. Modelled on HomepageScrollingHero's
   .acfc-hp-promo-row, but reduced to what three static tiles actually need:
   the track is an overflow-x scroller with snap points, which gives desktop a
   plain three-up row (the tiles happen to fill it exactly) and mobile a native
   swipe carousel with no JS and no nav buttons. */

.acfc-schedule-2026 .acfc-sch-promo {
    /* Matches .acfc-sch-shell so the tiles and the rule above them align with the
       schedule content, rather than with the narrower list column on its own. */
    max-width: calc(var(--acfc-sch-max-width) + var(--acfc-sch-sidebar-width) + var(--acfc-sch-layout-gap));
    margin-inline: auto;
    /* Same gradient as .acfc-sch-monthdiv__rule: rosa at the left fading through
       the neutral edge colour and disappearing to transparent. A border-top cannot
       carry a gradient, so the rule lives in a ::before pseudo-element instead.
       position:relative here is what keeps the absolute pseudo inside the promo. */
    position: relative;
    padding-top: var(--acfc-sch-promo-rule-gap);
    padding-bottom: clamp(2rem, 4vw, 3.25rem);
}

/* Gradient rule matching .acfc-sch-monthdiv__rule exactly: rosa → edge → transparent. */
.acfc-schedule-2026 .acfc-sch-promo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--acfc-sch-rosa) 0%, var(--acfc-sch-edge) 45%, transparent 100%);
}

.acfc-schedule-2026 .acfc-sch-promo__track {
    display: flex;
    gap: 1rem;
    /* The scroller is always on, at every width. On desktop the three tiles add
       up to exactly 100% so it never actually scrolls; on mobile the wider
       flex-basis below overflows it and the same rules become the carousel. */
    overflow-x: auto;
    overflow-y: hidden;
    /* Stops the browser restoring scroll position into this track on navigation,
       which would land the user mid-carousel. */
    overflow-anchor: none;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* pan-y as well as pan-x, so a vertical swipe that starts on a tile still
       scrolls the page instead of being swallowed by the track. */
    touch-action: pan-x pan-y;
    /* No visible scrollbar: the peek of the next tile on mobile (see the 768px
       block) is what signals that the row scrolls. */
    scrollbar-width: none;
}

.acfc-schedule-2026 .acfc-sch-promo__track::-webkit-scrollbar {
    display: none;
}

.acfc-schedule-2026 .acfc-sch-promo__slide {
    /* Three equal tiles filling the row exactly: two 1rem gaps removed from the
       width before the split. flex-basis rather than width so the tiles cannot
       be shrunk below it by the flex algorithm. */
    flex: 0 0 calc((100% - 2rem) / 3);
    min-width: 0;
    scroll-snap-align: start;
    display: block;
    border-radius: var(--acfc-sch-radius-md);
    /* Clips the image's hover scale to the tile's rounded corners. */
    overflow: hidden;
    box-shadow: var(--acfc-sch-shadow-e1);
    /* The images carry their own artwork and wordmarks, so the link needs no
       text decoration or colour of its own. */
    text-decoration: none;
}

.acfc-schedule-2026 .acfc-sch-promo__slide img {
    display: block;
    width: 100%;
    height: auto;
    /* The sources are all 1080x1080. Declaring the ratio reserves the box before
       they load, so the row does not shift the page as three tiles arrive. */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Gated for the same reason as every other hover state in this module — see the
   comment above the first (hover: hover) block. A latched hover here would leave
   a tile permanently zoomed after a tap. */
@media (hover: hover) and (min-width: 769px) {
    .acfc-schedule-2026 .acfc-sch-promo__slide:hover img,
    .acfc-schedule-2026 .acfc-sch-promo__slide:focus-visible img {
        transform: scale(1.03);
    }

    .acfc-schedule-2026 .acfc-sch-promo__slide:hover,
    .acfc-schedule-2026 .acfc-sch-promo__slide:focus-visible {
        box-shadow: var(--acfc-sch-shadow-e2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .acfc-schedule-2026 .acfc-sch-promo__slide img {
        transition: none;
    }

    .acfc-schedule-2026 .acfc-sch-promo__slide:hover img,
    .acfc-schedule-2026 .acfc-sch-promo__slide:focus-visible img {
        transform: none;
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
    .acfc-schedule-2026 .acfc-sch-card__body {
        flex-wrap: wrap;
    }

    /* flex-basis 0, and it has to be 0 rather than auto for as long as the body
       above can wrap.

       Flexbox decides which items share a line before it shrinks any of them,
       and it makes that decision on each item's hypothetical main size — for
       basis:auto that is the content's max-content width, the whole opponent
       name on one line. min-width:0 on this box lets it shrink once it is on a
       line but has no say in whether it lands there, so a long name like "Racing
       Louisville FC" measured wider than the space left beside the date rail and
       the whole matchup dropped to its own line under the rail.

       Basis 0 makes the hypothetical size 0, so the matchup always collects onto
       the rail's line and then grows into whatever is left, and the name wraps
       inside it instead of the block moving. */
    .acfc-schedule-2026 .acfc-sch-card__matchup {
        flex: 1 1 0;
    }

    .acfc-schedule-2026 .acfc-sch-card__cta {
        order: 3;
    }
}

/* Below the two-column threshold there is no room for a second column, so the
   sidebar drops out entirely and the list reclaims the full shell. */
@media (max-width: 1079px) {
    .acfc-schedule-2026 .acfc-sch-sidebar {
        display: none;
    }

    .acfc-schedule-2026 .acfc-sch-shell {
        max-width: var(--acfc-sch-max-width);
    }

    .acfc-schedule-2026 .acfc-sch-main {
        max-width: none;
    }
}

/* Must stay above the 900px block: these are descending max-width queries, so a
   991px rule placed after 900px would win at 850px and undo it.
   The site header switches to its mobile layout here — the nav row drops from
   ~63px to 56px while the announcement strip is still 40px. */
@media (max-width: 991px) {
    .acfc-schedule-2026 {
        --acfc-sch-header-clear: 96px;
    }
}

@media (max-width: 900px) {
    .acfc-schedule-2026 .acfc-sch-nav__btn-text {
        display: none;
    }

    /* Once the labels above are gone the controls shrink to roughly half the
       bar, and space-between would strand them as icons separated by voids.
       Back to centred, which is also how the 768px tier below expects them. */
    .acfc-schedule-2026 .acfc-sch-nav__actions {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .acfc-schedule-2026 {
        /* Announcement strip tightens to 38px, nav row stays 56px. */
        --acfc-sch-header-clear: 94px;
        /* Back to bare header clearance, because the nav is static from this tier
           down (see .acfc-sch-nav below). With nothing pinned over the list there
           is no bar for a scroll target to clear, and keeping the desktop
           allowance would drop every card ~133px lower than needed. */
        --acfc-sch-nav-clear: var(--acfc-sch-header-clear);
        /* Width cap for the card's primary CTA on phones. Shared with the
           dropdown menu so the menu can match the button group it hangs off
           without the two values drifting apart. */
        --acfc-sch-cta-max: 220px;
    }

    .acfc-schedule-2026 .acfc-sch-hero {
        min-height: clamp(300px, 60svh, 420px);
    }

    /* The left-weighted scrim is wrong once the copy centers.
    
       It was also still bottom-weighted, which the centred layout does not suit: the
       linear gradient was at its thinnest near the top and the radial was fully
       transparent through the middle, so the sub-copy landed in the one band nothing
       was covering. Measured against the default photo that left it at 4.6:1 — over
       the 4.5:1 line, but only just, so a shorter hero or a brighter image tipped it
       under, and on a brighter crop it read about 3:1.

       So the veil evens out rather than piling more darkness at the bottom. Tuned to
       roughly 9.5:1 on both the default photo and a deliberately bright test image,
       which buys headroom for whatever gets uploaded later without flattening the
       crowd into grey — a heavier version measured 12.6:1 and looked murky. */
    .acfc-schedule-2026 .acfc-sch-hero__scrim {
        background:
            linear-gradient(to top, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.62) 50%, rgba(0, 0, 0, 0.5) 100%),
            radial-gradient(140% 110% at 50% 45%, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.42) 100%);
    }

    .acfc-schedule-2026 .acfc-sch-hero__inner {
        text-align: center;
    }

    /* Full white, not the 84% of the desktop rule. At 84% the glyphs composite to
       about 214 rather than 255, which was throwing away a third of the available
       contrast against the brightest part of the photo. The heavier shadow gives the
       type its own local contrast so it survives a busy crop regardless of the
       scrim, which is the part contrast maths cannot express. */
    .acfc-schedule-2026 .acfc-sch-hero__body {
        margin-inline: auto;
        color: #fff;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 2px 12px rgba(0, 0, 0, 0.6);
    }

    .acfc-schedule-2026 .acfc-sch-hero__actions {
        justify-content: center;
    }

    /* Static on phones: pinned, the two-row bar eats roughly a third of a short
       viewport, leaving very little room for the card it is meant to sit above.
       It scrolls away with the list instead and stays a plain header.

       top is reset so the sticky offset cannot leak in, and z-index is dropped
       with it — the value only existed so the pinned bar painted over the cards
       it slid across, and z-index is inert on a static box anyway. The docked
       is-stuck treatment is suppressed in initNavShadow, which checks the
       computed position rather than duplicating this breakpoint in JS. */
    .acfc-schedule-2026 .acfc-sch-nav {
        position: static;
        top: auto;
        border-radius: var(--acfc-sch-radius-sm);
    }

    /* The nav is now static, so it sits in the flow directly above #event-list.
       Give the view panel extra scroll-margin so "Back to the Schedule" lands
       with the nav fully visible and ~1.5rem of air between it and the first
       month heading rather than landing flush against it. */
    .acfc-schedule-2026 .acfc-sch-view {
        scroll-margin-top: calc(var(--acfc-sch-header-clear) + 1.5rem);
    }

    .acfc-schedule-2026 .acfc-sch-nav__bar {
        padding: 0.6rem 0.7rem;
    }

    .acfc-schedule-2026 .acfc-sch-nav__actions {
        width: 100%;
    }

    .acfc-schedule-2026 .acfc-sch-seg {
        flex: 1 1 100%;
    }

    .acfc-schedule-2026 .acfc-sch-seg__btn {
        flex: 1 1 0;
        min-height: 40px;
    }

    /* Tighter than the desktop 2.75/2rem. Cards are taller here and only one is
       ever fully on screen, so the boundary already has separation from the run on
       either side of it without buying more with margin. */
    .acfc-schedule-2026 .acfc-sch-timenow {
        gap: 0.6rem;
        margin: 1.75rem 0 1.35rem;
    }

    .acfc-schedule-2026 .acfc-sch-card__meta {
        padding: 0.55rem 0.85rem;
        gap: 0.3rem 0.7rem;
    }

    .acfc-schedule-2026 .acfc-sch-card__meta-spacer {
        display: none;
    }

    .acfc-schedule-2026 .acfc-sch-card__body {
        /* stretch rather than flex-start. flex-start was causing the rail to stop
           short of the matchup's bottom edge whenever the matchup column was taller
           than the rail — the tinted column would not fill the row because the flex
           line's cross-axis was sized to flex-start, not the full row height. The
           CTA wraps to its own flex line (order: 3, flex-basis: 100%), so it is
           unaffected by this axis change. */
        align-items: stretch;
        /* padding-bottom: 0 prevents a visible gap between the body and the CTA
           separator. The date rail uses margin-bottom: 0 (below) so the body's
           padding-bottom is fully exposed — it is not cancelled by the rail's
           negative margin the way padding-top is. The CTA already owns the space
           above the button via its own padding-top, so the body needs none here. */
        padding-bottom: 0;
        /* The base gap applies to rows as well as columns, so once the CTA wrapped
           to its own line it was adding a row gap on top of the CTA's own spacing
           and opening a visible void above the button. The CTA owns that spacing
           now; the column gap still divides the rail from the matchup. */
        row-gap: 0;
    }

    /* The rail narrows but stays full-bleed; the negative margins track the
       body padding variables above, so nothing needs restating here.

       margin-bottom is dropped to 0 so the rail's tint ends exactly on the flex
       line, which is where the CTA row's separator sits. Left negative it bled
       past that line and the tint ran on underneath the rule. */
    /* Widened across all three phone tiers below. The rail is sized for the
       longest weekday rather than the kickoff time, and at the reduced tracking
       these tiers use it was running close enough to the edge that "WEDNESDAY"
       had no air around it. */
    .acfc-schedule-2026 .acfc-sch-card__date {
        min-width: 128px;
        padding: 0.85rem 0.6rem;
        margin-bottom: 0;
    }

    .acfc-schedule-2026 .acfc-sch-card__date-dow {
        font-size: 0.72rem;
        letter-spacing: 0.08em;
    }

    .acfc-schedule-2026 .acfc-sch-card__date-time {
        font-size: 0.84rem;
    }

    /* The CTA wraps to its own row here, so the rail no longer reaches the card's
       bottom edge and rounding it would notch the middle of the card. */
    .acfc-schedule-2026 .acfc-sch-card--no-footer:not(.acfc-sch-card--theme) .acfc-sch-card__date {
        border-bottom-left-radius: 0;
    }

    /* stretch overrides the body's align-items: flex-start above, which was
       pinning the crest and opponent to the top of a rail-height row. The
       matchup is itself a centred flex row, so filling the line is what
       actually centres its contents against the date.

       The negative top margin is the other half of that: the rail cancels the
       body's top padding, so its box starts at the card's inner top edge while
       this one started a full --acfc-sch-body-pad-y lower. Both being stretched,
       each then centred on its own axis and the matchup sat half that padding
       below the date. Cancelling the same padding here gives them one axis.

       justify-content centres the crest and opponent as one group in the space
       beside the rail. Note it centres the group only — .acfc-sch-card__teams
       keeps its inherited left alignment on purpose, so the vs/at line and the
       opponent name both start on the crest's right edge and stay flush with
       each other. Centring inside __teams instead ragged those two lines
       against the crest. */
    .acfc-schedule-2026 .acfc-sch-card__matchup {
        /* No flex here: the 1100px tier's flex: 1 1 0 has to survive down through
           this tier, and restating it as 1 1 auto is what let the matchup wrap
           below the rail on phones. See the note there. */
        align-self: stretch;
        margin-top: calc(var(--acfc-sch-body-pad-y) * -1);
        justify-content: center;
        /* Tighter than the desktop 0.8rem so the crest and the name read as one
           lockup at this scale, and it pays for most of the larger crest below. */
        gap: 0.4rem;
        /* With __body now align-items: stretch, this box fills the full flex line
           height. Its own items need centering on the cross-axis so the crest and
           teams column sit in the middle of that space rather than at the top. */
        align-items: center;
    }

    /* Larger than desktop's 58px would suggest for a smaller screen, and larger
       than the 46px this used to be. With the CTA on its own row the matchup no
       longer competes with it for width, so the crest can be the anchor the
       stacked card needs. The narrowed gap above offsets most of the extra. */
    .acfc-schedule-2026 .acfc-sch-card__crest {
        width: 56px;
        height: 56px;
    }

    /* Owns the separator above the button, as a single full-bleed border-top
       rather than a border on each of the two boxes in the row above. The
       negative side margins cancel the body padding so the rule reaches both
       card edges — split across the rail and the matchup it could leave a gap
       wherever their heights or bleeds disagreed.

       padding-top pairs with the body's own padding-bottom below the button, so
       the button sits optically centred in its strip. justify-content centres it
       across the card, overriding the desktop margin-left: auto. */
    .acfc-schedule-2026 .acfc-sch-card__cta {
        flex: 1 1 100%;
        order: 3;
        justify-content: center;
        margin-inline: calc(var(--acfc-sch-body-pad-x) * -1);
        margin-top: 0;
        padding: var(--acfc-sch-body-pad-y) var(--acfc-sch-body-pad-x);
        border-top: 1px solid var(--acfc-sch-edge);
    }

    /* A past card with no recap link in HubDB reaches this with nothing in it, and
       the rule above then draws its full-bleed divider and 17.6rem of padding-top
       around that nothing — a false separator under the matchup and about 19px of
       dead height, on every such card in the Results tab.

       :not(:has(*)) rather than :empty, which would not match: the template leaves
       the newlines between its {% if %} branches inside the div, and whitespace text
       counts as a child for :empty. This tests for element children instead.

       No JS fallback needed, unlike the :has() rule on .acfc-sch-card above. A
       browser that drops this selector just keeps today's empty strip. */
    .acfc-schedule-2026 .acfc-sch-card__cta:not(:has(*)) {
        display: none;
    }

    /* Capped so a phone-width card does not read the primary action as a banner.
       flex still lets it grow into the space up to that cap, and the caret sits
       alongside, so the pair stays a button group rather than a full-width slab. */
    .acfc-schedule-2026 .acfc-sch-card__cta .acfc-sch-btn--primary {
        flex: 1 1 auto;
        max-width: var(--acfc-sch-cta-max);
    }

    /* Sized to the button group above it. The menu is absolutely positioned with
       right: 0 against .acfc-sch-menu-wrap, which contains only the caret, so
       giving it the group's full width walks its left edge back to the primary
       button's left edge with no repositioning.

       min-width: 0 is load-bearing: the base rule sets a 288px floor, and a
       min-width beats an explicit width, so the width below would be ignored
       without it. The +43px is the caret's 44px min-width less the 1px it
       overlaps the primary by, which is what the joined pair measures.

       Centring with translateX was rejected here — acfc-sch-menu-in animates
       transform, so the offset would vanish for the length of the open
       animation and the menu would snap sideways. */
    .acfc-schedule-2026 .acfc-sch-menu {
        min-width: 0;
        width: calc(var(--acfc-sch-cta-max) + 43px);
        max-width: calc(100vw - 20px);
    }

    .acfc-schedule-2026 .acfc-sch-card__tags,
    .acfc-schedule-2026 .acfc-sch-card__theme,
    .acfc-schedule-2026 .acfc-sch-card__footer,
    .acfc-schedule-2026 .acfc-sch-card__info {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    /* ——— Broadcast footer: one line, scrolled sideways ———
       Stream and Radio were wrapping onto separate rows and doubling the footer's
       height. All three levels below set flex-wrap: wrap at base, so all three
       have to be unset — leaving any one wrapping keeps a break somewhere in the
       row. .acfc-sch-broadcasts becomes the scroll container instead.

       The paired justify-content is deliberate: plain `center` on a scroll
       container puts the overflow's start out of reach in several engines, since
       there is no scrollable area on the leading side. `safe` degrades the
       alignment to flex-start exactly when the content overflows. Older engines
       drop the second declaration and keep the centred fallback. */
    .acfc-schedule-2026 .acfc-sch-card__footer {
        flex-wrap: nowrap;
        justify-content: center;
        justify-content: safe center;
        /* Gives up most of its bottom padding to the scroll gutter below, so
           reserving that strip costs no extra footer height. The pair adds back
           to the 0.7rem the base rule sets. */
        padding-bottom: 0.3rem;
    }

    .acfc-schedule-2026 .acfc-sch-broadcasts {
        flex-wrap: nowrap;
        justify-content: center;
        justify-content: safe center;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        /* The bar is an overlay on phones, painted at the inner bottom edge, so
           without a gutter it sat across the chips. Padding on a scroll
           container is inside the scrollable region, which puts the bar below
           the chips rather than over them. Unconditional, because CSS cannot
           ask whether the row actually overflows — hence the footer above
           trading its own padding for it. */
        padding-bottom: 0.4rem;
        /* Thinner than the sidebar's 6px, which would crowd a single chip row.

           Transparent until the reader reaches for the row, when initBroadcastScrollbars
           adds is-scroll-active. Styling ::-webkit-scrollbar at all opts the container
           out of Blink's overlay scrollbars, so the rosa bar was painted from first
           load on every card that overflowed — an always-on bar reads as clutter, not
           as an affordance.

           Colour is the only thing that changes; the 4px track below stays reserved
           either way, so revealing the bar cannot shift the chips it sits under. */
    }

    /* Firefox's half of the reveal, gated away from Blink and WebKit for the reason
       given on the sidebar rules: any non-initial standard property here switches the
       element back to the platform scrollbar and drops the 4px height and the radius
       below. */
    @supports not selector(::-webkit-scrollbar) {
        .acfc-schedule-2026 .acfc-sch-broadcasts {
            scrollbar-width: thin;
            scrollbar-color: transparent transparent;
        }

        .acfc-schedule-2026 .acfc-sch-broadcasts.is-scroll-active {
            scrollbar-color: var(--acfc-sch-rosa) transparent;
        }
    }

    .acfc-schedule-2026 .acfc-sch-broadcasts::-webkit-scrollbar {
        height: 4px;
    }

    .acfc-schedule-2026 .acfc-sch-broadcasts::-webkit-scrollbar-track {
        border-radius: var(--acfc-sch-radius-full);
        background: transparent;
    }

    .acfc-schedule-2026 .acfc-sch-broadcasts::-webkit-scrollbar-thumb {
        border-radius: var(--acfc-sch-radius-full);
        background: transparent;
    }

    .acfc-schedule-2026 .acfc-sch-broadcasts.is-scroll-active::-webkit-scrollbar-thumb {
        background: var(--acfc-sch-rosa);
    }

    .acfc-schedule-2026 .acfc-sch-broadcast,
    .acfc-schedule-2026 .acfc-sch-broadcast__links {
        flex-wrap: nowrap;
    }

    /* Without this the flex items shrink to fit rather than overflowing, and the
       chips compress into unreadable slivers instead of scrolling. */
    .acfc-schedule-2026 .acfc-sch-broadcast,
    .acfc-schedule-2026 .acfc-sch-broadcast__label,
    .acfc-schedule-2026 .acfc-sch-chip,
    .acfc-schedule-2026 .acfc-sch-broadcast__links a:not(.acfc-sch-chip) {
        flex: none;
    }

    /* The theme band is two columns on desktop, where it has the width to hold the
       lockup and the detail lines side by side. On phones it collapses to one so
       neither gets compressed to an unreadable sliver. justify-items does here
       what align-items did when this was a flex column. */
    .acfc-schedule-2026 .acfc-sch-theme.is-parsed {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 0.5rem;
        text-align: center;
    }

    /* A little breathing room so bullets and chips don't sit flush against the card
       edges. The band's own 0.85rem padding already provides the outer offset; this
       adds a bit more inside the detail section itself. */
    .acfc-schedule-2026 .acfc-sch-theme__detail {
        padding-inline: 0.4rem;
        align-items: center;
    }

    /* justify-items on the stacked parent above only centres these blocks; each is
       its own flex container, so the eyebrow/title lockup and the chip row need
       centring on their own cross and main axes respectively. */
    .acfc-schedule-2026 .acfc-sch-theme__head {
        align-items: center;
    }

    /* Same reason as the chip row. Once the sponsor lockup wraps it is as wide as the
       head rather than shrink-to-fit, so its own lines need centring — the parent's
       justify-items only centres the box, not what is inside it. */
    .acfc-schedule-2026 .acfc-sch-theme__sponsor {
        justify-content: center;
        margin-top: 0.15rem;
    }

    /* The bullet list is the only element that must left-align: its marker is a
       pseudo-element pinned to left: 0, so centred text leaves the dot stranded off
       the left of a ragged block, and prose-length items like "Charm Keychain
       Giveaway presented by BMO (10,000 quantity)" are hard to scan when centred.

       align-self: stretch + text-align: left scope this entirely to the list — the
       chips, fine print and desc above/below stay centred because the detail column
       keeps its own align-items: center. */
    .acfc-schedule-2026 .acfc-sch-theme__bullets {
        align-self: center;
        text-align: left;
    }

    /* Chips are a flex-wrap row whose default justify-content is flex-start, so
       even though align-items: center on the detail column centres the chips box,
       the chips within it stay left-anchored. Center them explicitly on mobile. */
    .acfc-schedule-2026 .acfc-sch-theme__chips {
        justify-content: center;
    }

    /* Fine print is always centered on mobile — it reads as a caption to the band,
       not as a continuation of the bullet list above it. */
    .acfc-schedule-2026 .acfc-sch-theme__fine {
        text-align: center;
    }

    /* Filters panel: the auto-fit grid collapses to a single column, which is
       correct, but the selects need a little breathing room. */
    .acfc-schedule-2026 .acfc-sch-filters__grid {
        grid-template-columns: 1fr;
        gap: 0.55rem;
    }

    .acfc-schedule-2026 .acfc-sch-filters select {
        width: 100%;
        max-width: 100%;
    }

    .acfc-schedule-2026 .acfc-sch-menu {
        /* calc(100vw - 40px) can overflow when the menu is right-anchored and the
           card sits near the viewport left edge. max-width: min(...) is inherited
           from the base rule and already handles this correctly — just remove the
           width override so it takes effect. */
        min-width: 0;
        max-width: min(340px, calc(100vw - 20px));
    }

    .acfc-schedule-2026 .acfc-sch-footerbar__inner {
        gap: 0.4rem;
    }

    .acfc-schedule-2026 .acfc-sch-footerbar .acfc-sch-btn {
        flex: 1 1 auto;
        padding: 0.65rem 0.7rem;
        font-size: 0.78rem;
    }

    .acfc-schedule-2026 .acfc-sch-cal__day {
        min-height: 92px;
        padding: 0.35rem;
    }

    .acfc-schedule-2026 .popup-inner {
        padding: 1rem;
    }

    /* The desktop three-up row becomes a swipe carousel. Nothing about the
       scrolling changes — the track was already an overflow-x scroller with snap
       points — this only widens the tiles past the track so there is something
       to scroll.

       The divisor is what does the work, and it is fractional on purpose: the
       remainder leaves part of the next tile showing past the right edge, and
       that peek is the only affordance the row has, since the scrollbar is
       hidden. A whole number would align the tiles flush to the edge and the row
       would read as a static grid.

       2.2 rather than the phone tier's 1.15 (see the 640px block) because these
       tiles are square: at this width a single-tile layout makes each one about
       620px tall, so one promo would occupy more vertical space than a match
       card. Two-up halves that while still showing the peek. */
    .acfc-schedule-2026 .acfc-sch-promo__track {
        gap: 0.75rem;
    }

    .acfc-schedule-2026 .acfc-sch-promo__slide {
        flex-basis: calc((100% - (2 * 0.75rem)) / 2.2);
    }
}

/* Seven columns cannot carry text at phone widths, so a match day reduces to
   its crest and the tap target stays the whole chip. It stays a calendar rather
   than degrading into an agenda list, because the list view is one toggle away
   and duplicating it here would leave the toggle with nothing to switch. */
@media (max-width: 640px) {
    .acfc-schedule-2026 .acfc-sch-cal__weekdays b {
        display: none;
    }

    .acfc-schedule-2026 .acfc-sch-cal__weekdays i {
        display: inline;
    }

    .acfc-schedule-2026 .acfc-sch-cal__weekdays span {
        padding: 0.5rem 0.15rem;
        letter-spacing: 0.04em;
    }

    /* min-height rather than a square aspect-ratio: a day with two fixtures
       stacks two crests, and a fixed ratio would clip the second. Letting the
       cell grow takes its whole week row with it, which keeps the grid regular. */
    .acfc-schedule-2026 .acfc-sch-cal__day {
        min-height: 46px;
        gap: 0.2rem;
        padding: 0.3rem 0.15rem;
    }

    .acfc-schedule-2026 .acfc-sch-cal__date {
        font-size: 0.7rem;
        text-align: center;
    }

    .acfc-schedule-2026 .acfc-sch-cal__day--today .acfc-sch-cal__date {
        align-self: center;
        width: 19px;
        height: 19px;
    }

    /* Crest centred in what is left of the cell, and the whole chip stays the
       tap target. The border and shadow come off: at this size they read as
       noise rather than affordance, and the crest is the affordance. */
    .acfc-schedule-2026 .acfc-sch-cal__match {
        justify-content: center;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
    }

    .acfc-schedule-2026 .acfc-sch-cal__match:hover {
        border: 0;
        box-shadow: none;
    }

    .acfc-schedule-2026 .acfc-sch-cal__match-body {
        display: none;
    }

    .acfc-schedule-2026 .acfc-sch-cal__crest {
        width: 24px;
        height: 24px;
    }

    .acfc-schedule-2026 .acfc-sch-cal__legend {
        gap: 0.3rem 0.6rem;
        margin-top: 0.6rem;
    }

    /* Phone tier for the promo row: one tile plus a peek, down from the 2.2 the
       768px block sets for tablets. Two-up stops paying off here — at 375px it
       would leave each square about 145px, too small for artwork that carries
       its own headline and, on the fixtures tile, three dated rows. */
    .acfc-schedule-2026 .acfc-sch-promo__slide {
        flex-basis: calc((100% - 0.75rem) / 1.15);
    }
}

@media (max-width: 480px) {
    /* Announcement strip grows to 46px here to fit a wrapped two-line promo. */
    .acfc-schedule-2026 {
        --acfc-sch-header-clear: 146px;
    }

    .acfc-schedule-2026 .acfc-sch-hero__img {
        object-position: center center;
    }

    /* Stacked full-width CTAs, so neither wraps its label mid-word. */
    .acfc-schedule-2026 .acfc-sch-hero__actions {
        flex-direction: column;
        align-items: stretch;
        max-width: 260px;
        margin-inline: auto;
    }

    /* nowrap type inside a hard 260px cap is the one combination here that can
       actually overflow rather than reflow. "View Full Schedule" is the longest
       label in the module and clears 260px by only a few pixels at the 0.85rem
       base, so it gives up a little more size at the narrowest tier. */
    .acfc-schedule-2026 .acfc-sch-hero__actions .acfc-sch-btn {
        padding-inline: 1.1rem;
        font-size: 0.8rem;
    }

    .acfc-schedule-2026 .acfc-sch-card__date {
        min-width: 110px;
        padding: 0.75rem 0.5rem;
    }

    .acfc-schedule-2026 .acfc-sch-card__date-day {
        font-size: 1.3rem;
    }

    /* Tracking, not size, is what gives back the width for the full weekday here. */
    .acfc-schedule-2026 .acfc-sch-card__date-dow {
        font-size: 0.68rem;
        letter-spacing: 0.04em;
    }

    .acfc-schedule-2026 .acfc-sch-card__date-time {
        font-size: 0.78rem;
        letter-spacing: 0;
    }

    .acfc-schedule-2026 .acfc-sch-card__date-time em {
        font-size: 0.56rem;
        letter-spacing: 0.04em;
    }

    /* No font-size here any more. This tier used to pull the opponent down to
       1.05rem, but the base clamp now floors at 0.95rem from ~760px down, so the
       override had inverted into a bump back up above the desktop floor. */

    .acfc-schedule-2026 .acfc-sch-footerbar .acfc-sch-btn span {
        display: none;
    }

    .acfc-schedule-2026 .acfc-sch-footerbar .acfc-sch-btn {
        padding: 0.7rem 0.5rem;
    }

    /* Keep the primary label visible even when the ghost buttons collapse. */
    .acfc-schedule-2026 .acfc-sch-footerbar .acfc-sch-btn--primary span {
        display: inline;
    }

    .acfc-schedule-2026 .acfc-sch-broadcast__label span {
        display: none;
    }

    /* Long names like "North Carolina Courage" overflow at 100px rail width.
       Wrapping onto two lines is preferable to truncation, and the opponent
       block already uses flex-direction: column, so this just permits it. */
    .acfc-schedule-2026 .acfc-sch-card__opponent {
        overflow-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
    }
}

/* Restores the clearance the sponsor lockup loses when it wraps.
 *
 * Side by side, the flex line is as tall as the 0.85rem name and align-items: center
 * pushes the shorter label down 3.88px inside it, which incidentally opens 8.66px
 * under the theme title. Wrapped, the label has a line to itself that is only as tall
 * as its own box — and its line-height is 1, so there is almost no half-leading — so it
 * lands 4.78px under the title instead. Half the gap, on the layout where the lockup is
 * two lines and needs it most.
 *
 * A width query rather than something exact, because CSS cannot ask whether a flex
 * container wrapped, and every construction that adds space above the label adds the
 * same half-leading below it: a taller line-height or an inline strut would put the
 * label-to-name gap straight back to the ~19px this stylesheet just brought down to
 * 14.92px, or would move the label inside the centred line and undo its optical
 * alignment.
 *
 * Width is only a proxy, because what decides the wrap is the length of the partner
 * name, not the viewport. The longest name currently in the data stacks at and below
 * 350 and sits inline from 360, so 400px covers that fold with room for a somewhat
 * longer name to fold later and still be caught.
 *
 * That headroom costs an inline lockup between 360 and 400 the extra 4px it does not
 * need, opening its gap to about 12.7px. Deliberately the direction to err in: a
 * two-line lockup crowded against the title is the reported problem, while a slightly
 * generous gap on a narrow phone reads as breathing room. If a much longer partner
 * name ever ships, this bound is what needs revisiting. */
@media (max-width: 400px) {
    .acfc-schedule-2026 .acfc-sch-theme__sponsor {
        /* 0.15rem base plus the 3.88px the wrap gives up, which lands the stacked gap
           at 8.78px — level with the side-by-side case rather than beyond it. */
        margin-top: 0.4rem;
    }
}

/* Sub-360px: the very smallest viewport tier. The 480px rules have already
   compressed the layout as far as possible without dropping content; this tier
   tightens padding and geometry further so nothing clips. */
@media (max-width: 360px) {
    /* Venue is the one thing dropped at this tier. The teams column is down to
       roughly 137px here, where the longest ground name runs to three or four
       lines and buries the opponent it sits above. The Home/Away label stays, so
       the card still says which it is — only the detail goes. */
    .acfc-schedule-2026 .acfc-sch-card__venue {
        display: none;
    }

    .acfc-schedule-2026 .acfc-sch-card__date {
        min-width: 92px;
        padding: 0.65rem 0.4rem;
    }

    .acfc-schedule-2026 .acfc-sch-card__date-day {
        font-size: 1.2rem;
    }

    .acfc-schedule-2026 .acfc-sch-card__date-dow {
        font-size: 0.6rem;
        letter-spacing: 0.02em;
    }

    .acfc-schedule-2026 .acfc-sch-card__date-time {
        font-size: 0.72rem;
    }

    /* Steps down from the 56px above, but only to 44px. Dropping the crest
       entirely was the old way of buying width for the opponent name here, and
       36px was the compromise after that; with the rail down to 84px and the
       name already wrapping at this tier, there is room to keep it legible. */
    .acfc-schedule-2026 .acfc-sch-card__crest {
        width: 44px;
        height: 44px;
    }

    .acfc-schedule-2026 .acfc-sch-nav__bar {
        padding: 0.5rem 0.6rem;
        gap: 0.4rem;
    }

    .acfc-schedule-2026 .acfc-sch-footerbar .acfc-sch-btn {
        padding: 0.65rem 0.35rem;
        font-size: 0.72rem;
    }

    .acfc-schedule-2026 .acfc-sch-hero {
        min-height: 260px;
    }

    .acfc-schedule-2026 .acfc-sch-menu {
        max-width: calc(100vw - 12px);
    }
}

/* ==========================================================================
   Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .acfc-schedule-2026 *,
    .acfc-schedule-2026 *::before,
    .acfc-schedule-2026 *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .acfc-schedule-2026 .acfc-sch-card:not(.acfc-sch-card--away):hover {
        translate: none;
    }
}

/* ==========================================================================
   Print — compact one-line-per-match table, no interactive chrome
   ========================================================================== */

@media print {
    .acfc-schedule-2026 .acfc-sch-nav,
    .acfc-schedule-2026 .acfc-sch-footerbar,
    .acfc-schedule-2026 .acfc-sch-view--calendar,
    .acfc-schedule-2026 .popup-wrapper,
    .acfc-schedule-2026 .acfc-sch-card__cta,
    .acfc-schedule-2026 .acfc-sch-card__info-toggle,
    .acfc-schedule-2026 .acfc-sch-card__tags,
    .acfc-schedule-2026 .acfc-sch-adband,
    .acfc-schedule-2026 .acfc-sch-sidebar,
    .acfc-schedule-2026 .acfc-sch-hero,
    .acfc-schedule-2026 .acfc-sch-empty,
    .acfc-schedule-2026 .sr-module-label {
        display: none !important;
    }

    .acfc-schedule-2026 .acfc-sch-view {
        display: block !important;
    }

    .acfc-schedule-2026 .acfc-sch-card {
        page-break-inside: avoid;
        break-inside: avoid;
        margin-bottom: 0;
        border: 0;
        border-bottom: 1px solid #ccc;
        border-radius: 0;
        box-shadow: none;
        background: none !important;
    }

    .acfc-schedule-2026 .acfc-sch-card__meta {
        padding: 0;
        border: 0;
        background: none;
    }

    /* Flattened to a plain letter: a solid ink disc is a lot of toner for one
       character, and the rosa fill prints as an unreadable grey wash. */
    .acfc-schedule-2026 .acfc-sch-card__result {
        width: auto;
        min-width: 0;
        height: auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        font-size: 9pt;
        color: #000 !important;
        background: none !important;
    }

    .acfc-schedule-2026 .acfc-sch-card__meta-item {
        font-size: 8pt;
    }

    .acfc-schedule-2026 .acfc-sch-card__meta .acfc-sch-icon {
        display: none;
    }

    .acfc-schedule-2026 .acfc-sch-card__body {
        /* Zeroed so the date rail's negative margins collapse — a full-bleed
           tinted column is screen chrome, not something to spend ink on. */
        --acfc-sch-body-pad-y: 0pt;
        --acfc-sch-body-pad-x: 0pt;
        gap: 10pt;
        padding: 4pt 0;
    }

    .acfc-schedule-2026 .acfc-sch-card__date {
        min-width: 60pt;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none !important;
    }

    .acfc-schedule-2026 .acfc-sch-card__date-day {
        font-size: 13pt;
    }

    /* The on-screen emphasis on weekday and kickoff is a scanning aid; on paper
       the whole rail can sit at footnote scale. */
    .acfc-schedule-2026 .acfc-sch-card__date-dow,
    .acfc-schedule-2026 .acfc-sch-card__date-time {
        font-size: 8pt;
        letter-spacing: 0;
    }

    .acfc-schedule-2026 .acfc-sch-card__date-time em {
        font-size: 7pt;
    }

    .acfc-schedule-2026 .acfc-sch-card__crest {
        width: 28pt;
        height: 28pt;
    }

    .acfc-schedule-2026 .acfc-sch-card__opponent {
        font-size: 12pt;
    }

    .acfc-schedule-2026 .acfc-sch-card__theme {
        margin: 0;
        padding: 3pt 0;
        border-top: 1pt solid #eee;
        background: none !important;
    }

    .acfc-schedule-2026 .acfc-sch-theme.is-parsed {
        gap: 2pt 8pt;
    }

    .acfc-schedule-2026 .acfc-sch-theme__chips,
    .acfc-schedule-2026 .acfc-sch-theme__bullets,
    .acfc-schedule-2026 .acfc-sch-theme__desc,
    .acfc-schedule-2026 .acfc-sch-theme__fine {
        font-size: 8pt;
    }

    .acfc-schedule-2026 .acfc-sch-theme__chip {
        border: 1pt solid #ccc;
        background: none;
    }

    .acfc-schedule-2026 .acfc-sch-card__footer {
        padding: 0 0 4pt;
        border: 0;
        background: none;
    }

    .acfc-schedule-2026 .acfc-sch-broadcast__links a,
    .acfc-schedule-2026 .acfc-sch-chip {
        border: 0;
        padding: 0 4pt 0 0;
        font-size: 8pt;
        background: none;
    }

    .acfc-schedule-2026 .acfc-sch-monthdiv {
        margin: 10pt 0 4pt;
    }

    /* The boundary is worth keeping on paper — a printed schedule with results and
       fixtures running together needs the break more than the screen does, where
       the scores make it obvious. The chip loses its fill for the same reason every
       other tinted element here does. */
    .acfc-schedule-2026 .acfc-sch-timenow {
        margin: 12pt 0 6pt;
    }

    .acfc-schedule-2026 .acfc-sch-timenow__label {
        border: 1pt solid #ccc;
        padding: 2pt 6pt;
        font-size: 7pt;
        background: none;
    }

    .acfc-schedule-2026 .acfc-sch-card__info {
        display: none !important;
    }
}

/* ==========================================================================
   SGT overrides
   Everything below applies only on the Single Game Tickets page, via the
   .acfc-sgt-2026 class the module adds alongside .acfc-schedule-2026. Kept in
   one block at the end rather than edited into the rules above, so this file
   still diffs cleanly against hubspot/Schedule/styles.css.
   ========================================================================== */

/* Two filters here, not three: Broadcast is gone with the card footer it
   filtered on. Guarded by min-width because the mobile block above already
   collapses this grid to a single column, and an unguarded rule this late in
   the file would outrank it. */
@media (min-width: 769px) {
    .acfc-sgt-2026 .acfc-sch-filters__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* space-between was doing the work of separating the theme-night checkbox from
   the reset button. With the checkbox gone the button is an only child, and
   space-between leaves an only child at the start of the line — reading as a
   stray link under the filters rather than the row's action. */
.acfc-sgt-2026 .acfc-sch-filters__foot {
    justify-content: flex-end;
}


/* --------------------------------------------------------------------------
   How to buy walkthrough
   Structure is the 2027Renewals Select-A-Seat pattern (.acfc-rnw-sas-item);
   the values are this module's tokens, because that module's rnw and sol
   variables are not loaded on this page. New namespace, acfc-sgt-, since none
   of it exists in the schedule module.

   Every text-bearing rule below names a font, which looks redundant next to
   the font-family on .acfc-schedule-2026 but is not. Inheritance loses to any
   rule that targets the element directly, and the HubSpot theme sets a display
   face on h2 and h3 sitewide, so the two headings here would have picked it up.
   Buttons are worse: they do not inherit font at all, so an unstyled one falls
   back to the browser's UI font. Both tokens resolve to Inter, matching
   2027Renewals; they are used rather than a literal 'Inter' so this section
   follows the module if its type stack ever changes.
   -------------------------------------------------------------------------- */

.acfc-sgt-2026 .acfc-sgt-steps {
    /* Warm surface, so the section reads as a band under the white schedule
       rather than as more of the same page. Full-bleed background with the
       content capped inside, which is why the padding is here and the width
       cap is on __inner. */
    background: var(--acfc-sch-surface-warm);
    border-top: 1px solid var(--acfc-sch-edge);
    /* Top padding matches the section's visual weight; bottom matches the hero's
       own margin-bottom so the gap below the section and the gap below the hero
       feel like the same breathing room. */
    padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem clamp(1.5rem, 4vw, 2.75rem);
}

.acfc-sgt-2026 .acfc-sgt-steps__inner {
    /* Narrower than the schedule shell above it. Two columns of screenshot at
       the shell's full width would run each shot to ~600px, which is wider
       than the text it explains and pushes step 3 off the fold. */
    max-width: 1080px;
    margin-inline: auto;
}

.acfc-sgt-2026 .acfc-sgt-steps__head {
    text-align: center;
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.acfc-sgt-2026 .acfc-sgt-steps__eyebrow {
    font-family: var(--acfc-sch-display);
    font-size: clamp(0.72rem, 1.6vw, 0.8rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--acfc-sch-rosa-dark);
    margin: 0 0 0.65rem;
}

.acfc-sgt-2026 .acfc-sgt-steps__title {
    font-family: var(--acfc-sch-display);
    font-size: clamp(1.5rem, 3.5vw, 2.4rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--acfc-sch-ink);
    margin: 0 0 0.5rem;
    text-wrap: balance;
}

/* Same rosa accent the hero title uses, so the two headings are recognisably
   the same lockup at two sizes. */
.acfc-sgt-2026 .acfc-sgt-steps__title em {
    font-style: normal;
    color: var(--acfc-sch-rosa-dark);
}

.acfc-sgt-2026 .acfc-sgt-steps__lead {
    font-family: var(--acfc-sch-body);
    font-size: clamp(0.95rem, 1.8vw, 1.05rem);
    color: var(--acfc-sch-ink-soft);
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto;
}

.acfc-sgt-2026 .acfc-sgt-steps__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.acfc-sgt-2026 .acfc-sgt-step {
    display: flex;
    flex-direction: column;
    /* Grid rows stretch every card to the tallest in the row; the column flex
       is what lets the copy sit under a media frame of fixed ratio without the
       two cards in a row disagreeing about where the text starts. */
    height: 100%;
    background: var(--acfc-sch-panel);
    border: 1px solid var(--acfc-sch-edge);
    border-radius: var(--acfc-sch-radius-lg);
    padding: clamp(0.75rem, 1.5vw, 1rem);
    box-shadow: var(--acfc-sch-shadow-e1);
    /* Nothing on the page links to the steps now that the jump chips are gone,
       but the ids are still there for campaigns and support, and a landing
       needs to clear the sticky site header. */
    scroll-margin-top: var(--acfc-sch-header-clear);
    transition: box-shadow 0.28s var(--acfc-sch-ease), border-color 0.28s var(--acfc-sch-ease);
}

@media (hover: hover) and (min-width: 769px) {
    .acfc-sgt-2026 .acfc-sgt-step:hover {
        border-color: var(--acfc-sch-rosa);
        box-shadow: var(--acfc-sch-shadow-e2);
    }
}

.acfc-sgt-2026 .acfc-sgt-step__media {
    /* A button, so the frame is keyboard-operable without a role or a
       tabindex. Everything below is undoing button chrome, including the font:
       buttons do not inherit it, and the hint span inside would otherwise
       render in the browser's UI font. */
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    margin: 0;
    font-family: var(--acfc-sch-body);
    color: inherit;
    /* Three of the four shots are about 2.16:1. One shared ratio keeps the
       two cards in a row the same height, which per-image ratios would not. */
    aspect-ratio: 1898 / 877;
    overflow: hidden;
    border-radius: var(--acfc-sch-radius-md);
    background: var(--acfc-sch-surface);
    cursor: zoom-in;
    -webkit-appearance: none;
    appearance: none;
}

.acfc-sgt-2026 .acfc-sgt-step__media img {
    width: 100%;
    height: 100%;
    /* contain, not cover: these are UI screenshots, and cropping one cuts off
       the part of the screen the step is describing. */
    object-fit: contain;
    display: block;
    transition: scale 0.4s var(--acfc-sch-ease);
}

/* The one photo in the set. It has no UI to preserve and is a different shape,
   so it fills the shared frame instead of letterboxing inside it. */
.acfc-sgt-2026 .acfc-sgt-step__media--cover img {
    object-fit: cover;
}

@media (hover: hover) and (min-width: 769px) {
    .acfc-sgt-2026 .acfc-sgt-step__media:hover img,
    .acfc-sgt-2026 .acfc-sgt-step__media:focus-visible img {
        scale: 1.03;
    }
}

/* A filled badge rather than a bare number with a drop shadow. Three of the
   four screenshots are mostly white in the corner the number sits in, where
   white-on-white held together only by a text-shadow was doing badly; the
   pill carries its own background so legibility does not depend on the shot
   underneath it. */
.acfc-sgt-2026 .acfc-sgt-step__num {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    z-index: 2;
    display: grid;
    place-items: center;
    min-width: 2.15rem;
    height: 2.15rem;
    padding: 0 0.5rem;
    border-radius: var(--acfc-sch-radius-full);
    background: var(--acfc-sch-rosa);
    color: var(--acfc-sch-ink);
    font-family: var(--acfc-sch-display);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.acfc-sgt-2026 .acfc-sgt-step__hint {
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    z-index: 3;
    padding: 0.3rem 0.6rem;
    border-radius: var(--acfc-sch-radius-full);
    background: rgba(28, 28, 28, 0.88);
    color: #fff;
    font-family: var(--acfc-sch-display);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.24s var(--acfc-sch-ease);
}

/* Shown on hover and on keyboard focus only. Parked on every frame at all
   times it was four labels competing with the screenshots they sat on; it is
   an affordance, so it belongs where the reader is already pointing. Touch
   never gets it at all — see the coarse-pointer block near the end. */
@media (hover: hover) and (min-width: 769px) {
    .acfc-sgt-2026 .acfc-sgt-step__media:hover .acfc-sgt-step__hint,
    .acfc-sgt-2026 .acfc-sgt-step__media:focus-visible .acfc-sgt-step__hint {
        opacity: 1;
    }
}

.acfc-sgt-2026 .acfc-sgt-step__content {
    padding: 0.9rem 0.35rem 0.25rem;
}

.acfc-sgt-2026 .acfc-sgt-step__title {
    font-family: var(--acfc-sch-display);
    font-size: clamp(0.95rem, 1.6vw, 1.15rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--acfc-sch-ink);
    margin: 0 0 0.4rem;
    line-height: 1.2;
}

.acfc-sgt-2026 .acfc-sgt-step__body {
    font-family: var(--acfc-sch-body);
    font-size: 0.88rem;
    color: var(--acfc-sch-ink-soft);
    line-height: 1.6;
    margin: 0;
}

/* --- Good to know --- */

.acfc-sgt-2026 .acfc-sgt-tips {
    display:none !important;
    margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
    padding: clamp(1rem, 2vw, 1.35rem) clamp(1.1rem, 2.2vw, 1.5rem);
    background: var(--acfc-sch-panel);
    /* Rosa edge on the leading side only, the same way the month dividers and
       the promo rule mark a break without drawing a full box around it. */
    border: 1px solid var(--acfc-sch-edge);
    border-left: 3px solid var(--acfc-sch-rosa);
    border-radius: var(--acfc-sch-radius-md);
}

.acfc-sgt-2026 .acfc-sgt-tips__title {
    font-family: var(--acfc-sch-display);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--acfc-sch-ink);
    margin: 0 0 0.6rem;
}

.acfc-sgt-2026 .acfc-sgt-tips__list {
    font-family: var(--acfc-sch-body);
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--acfc-sch-ink-soft);
}

.acfc-sgt-2026 .acfc-sgt-tips__list li + li {
    margin-top: 0.5rem;
}

.acfc-sgt-2026 .acfc-sgt-tips__list a,
.acfc-sgt-2026 .acfc-sgt-tips__list a:visited {
    color: var(--acfc-sch-rosa-dark);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.acfc-sgt-2026 .acfc-sgt-tips__list a:hover,
.acfc-sgt-2026 .acfc-sgt-tips__list a:focus-visible {
    color: var(--acfc-sch-ink);
}

/* --- Closing actions --- */

.acfc-sgt-2026 .acfc-sgt-steps__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* .acfc-sch-btn already carries the module's type, so these only fix the width
   floor: side by side under a 1080px section the two buttons looked incidental
   next to the screenshots above them. */
.acfc-sgt-2026 .acfc-sgt-steps__actions .acfc-sch-btn {
    min-width: 210px;
    justify-content: center;
}

/* The ghost style (white panel / ink text) disappears against the warm section
   background. Use the rosa fill instead so both buttons are legible and read
   as a pair — primary for Buy Tickets, rosa for Back to Schedule. */
.acfc-sgt-2026 .acfc-sgt-steps__actions .acfc-sch-btn--ghost {
    background: var(--acfc-sch-rosa);
    border-color: var(--acfc-sch-rosa);
    color: var(--acfc-sch-ink);
}

/* Desktop hover: flip to black background + white text.
   color: #fff is gated here — not ungated — because on touch, :hover latches
   after a tap and would show white text on the rosa base indefinitely. The base
   rule already sets color: var(--acfc-sch-ink), which is correct for all other
   states (including touch active, handled below). */
@media (hover: hover) and (min-width: 769px) {
    .acfc-sgt-2026 .acfc-sgt-steps__actions .acfc-sch-btn--ghost:hover,
    .acfc-sgt-2026 .acfc-sgt-steps__actions .acfc-sch-btn--ghost:focus-visible {
        background: var(--acfc-sch-ink);
        border-color: var(--acfc-sch-ink);
        color: #fff;
    }
}

/* Touch active states. (hover: hover) gates all the button hover rules above,
   which means on touch devices there is no feedback at all when a finger lifts.
   :active fires on tap and gives the reader a momentary response before the
   navigation completes — a brief darkening for the primary and a darkening of
   the rosa fill for the ghost. */
@media (hover: none) {
    .acfc-sgt-2026 .acfc-sgt-steps__actions .acfc-sch-btn--primary:active {
        background: var(--acfc-sch-rosa);
        border-color: var(--acfc-sch-rosa);
        color: var(--acfc-sch-ink);
    }

    .acfc-sgt-2026 .acfc-sgt-steps__actions .acfc-sch-btn--ghost:active {
        background: var(--acfc-sch-ink);
        border-color: var(--acfc-sch-ink);
        color: #fff;
    }
}

/* --- Lightbox --- */

.acfc-sgt-2026 .acfc-sgt-lightbox {
    position: fixed;
    inset: 0;
    /* Over the site header, which the AnnouncementBar module pins at 9998. A
       lower value here and the panel opens underneath it. */
    z-index: 100050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(0.75rem, env(safe-area-inset-top)) 0.75rem max(0.75rem, env(safe-area-inset-bottom));
    overscroll-behavior: none;
}

/* [hidden] alone loses to display: flex above. */
.acfc-sgt-2026 .acfc-sgt-lightbox[hidden] {
    display: none !important;
}

.acfc-sgt-2026 .acfc-sgt-lightbox__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.acfc-sgt-2026 .acfc-sgt-lightbox__dialog {
    position: relative;
    z-index: 1;
    width: min(1100px, 100%);
    max-height: min(94vh, 920px);
    display: flex;
    flex-direction: column;
    background: var(--acfc-sch-panel);
    border: 1px solid var(--acfc-sch-edge);
    border-radius: var(--acfc-sch-radius-lg);
    box-shadow: var(--acfc-sch-shadow-e3);
    overflow: hidden;
}

.acfc-sgt-2026 .acfc-sgt-lightbox__close {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 5;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(28, 28, 28, 0.08);
    color: var(--acfc-sch-ink);
    font-family: var(--acfc-sch-body);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.24s ease, color 0.24s ease;
}

.acfc-sgt-2026 .acfc-sgt-lightbox__close:hover,
.acfc-sgt-2026 .acfc-sgt-lightbox__close:focus-visible {
    background: var(--acfc-sch-rosa);
}

.acfc-sgt-2026 .acfc-sgt-lightbox__figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.acfc-sgt-2026 .acfc-sgt-lightbox__img {
    width: 100%;
    /* min-height: 0 on the flex parent plus this cap is what keeps a tall
       screenshot from pushing the caption out of the dialog. */
    max-height: min(80vh, 780px);
    object-fit: contain;
    background: var(--acfc-sch-surface);
    display: block;
}

.acfc-sgt-2026 .acfc-sgt-lightbox__caption {
    flex-shrink: 0;
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--acfc-sch-edge);
    background: var(--acfc-sch-surface-warm);
    color: var(--acfc-sch-ink-soft);
    font-family: var(--acfc-sch-body);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Body scroll lock while the lightbox is open. Set on <html> by module.js. */
.acfc-sgt-lightbox-open,
.acfc-sgt-lightbox-open body {
    overflow: hidden;
}

/* Touch has no hover to reveal the hint with, and tapping a screenshot to
   enlarge it is the expected gesture there anyway. */
@media (hover: none), (pointer: coarse) {
    .acfc-sgt-2026 .acfc-sgt-step__hint {
        display: none;
    }

    .acfc-sgt-2026 .acfc-sgt-step__media {
        cursor: pointer;
    }
}

@media (max-width: 768px) {
    /* One column. Two 2.16:1 frames side by side on a phone leaves each about
       150px wide, at which point the screenshots show nothing. */
    .acfc-sgt-2026 .acfc-sgt-steps__list {
        grid-template-columns: 1fr;
    }

    /* Full width, stacked. Two 210px buttons do not fit a 390px viewport side
       by side, and letting them wrap left the second one hanging half-width. */
    .acfc-sgt-2026 .acfc-sgt-steps__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .acfc-sgt-2026 .acfc-sgt-steps__actions .acfc-sch-btn {
        min-width: 0;
    }

    /* Ghost override is handled above at all breakpoints — nothing extra needed. */
}

@media print {
    /* The walkthrough is screen scaffolding: four screenshots of a website
       nobody can click on paper, and a lightbox that cannot open. The schedule
       is what gets printed. */
    .acfc-sgt-2026 .acfc-sgt-steps,
    .acfc-sgt-2026 .acfc-sgt-lightbox {
        display: none !important;
    }
}