.public-schedule-page {
    --ink: var(--text-primary);
    --ink-2: var(--text-muted);
    --muted: var(--text-muted);
    --faint: var(--text-dim);
    --surface: var(--dark-card);
    --line: var(--card-border);
    --brand: var(--court-green);
    --brand-deep: var(--court-green);
}

.availability-page { max-width: 1180px; margin: 0 auto; padding: 3rem 1.25rem; }
.availability-page__head { text-align: center; margin-bottom: 1.5rem; }
.availability-page h1 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; margin-bottom: 0.5rem; }
.availability-page__head p, #availability-status { color: var(--text-muted); }
.availability-page__controls { display: flex; justify-content: center; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.availability-page input { background: var(--dark-card); color: var(--text-primary); border: 1px solid var(--card-border); border-radius: 0.5rem; padding: 0.5rem 0.75rem; }
.availability-page__legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem; font-size: 0.85rem; }
.availability-page__legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.availability-page__legend i { width: 0.8rem; height: 0.8rem; border: 1px solid currentColor; border-radius: 3px; }
.availability-page__grid { overflow-x: auto; border-radius: 1rem; border: 1px solid var(--card-border); background: var(--dark-card); }
.availability-page__grid:empty { display: none; }
.availability-page table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 0.85rem; }
.availability-page th, .availability-page td { padding: 0.85rem 1rem; text-align: center; white-space: nowrap; border-bottom: 1px solid var(--card-border); border-right: 1px solid var(--card-border); }
.availability-page th:first-child { position: sticky; left: 0; z-index: 1; background: var(--dark-card); text-align: left; }
.availability-page small { display: block; font-size: 0.75rem; margin-top: 0.25rem; }
.availability-free { background: #dcfce7; color: #166534; }
.availability-booked { background: #dbeafe; color: #1e40af; }
.availability-closed { background: #f1f5f9; color: #64748b; }
.availability-page__booking { text-align: center; margin-top: 1.5rem; }
#availability-status { text-align: center; }

.schedule-page-brand { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-width: 0; padding: 1.25rem clamp(0.75rem, 2vw, 2rem) 0.5rem; }
.schedule-page-brand img { display: block; flex: none; width: auto; height: auto; max-width: min(34%, 180px); max-height: 64px; object-fit: contain; object-position: left center; }
.schedule-page-brand__name { min-width: 0; margin-left: auto; font-family: var(--font-body, sans-serif); font-size: clamp(1.125rem, 2.2vw, 1.75rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.025em; text-align: right; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.public-schedule-page--minimal .public-schedule { padding: 1rem 0 1.5rem; }
.public-schedule-page--minimal .public-schedule__inner { max-width: none; padding: 0 clamp(0.75rem, 2vw, 2rem); }
.public-schedule-page--minimal .availability-page { max-width: none; padding: 1rem clamp(0.75rem, 2vw, 2rem) 1.5rem; }

/* Venue displays keep the page still; only the grid owns the scrolling. */
body.public-schedule-page--fit-screen { height: 100vh; height: 100dvh; overflow: hidden; }
.public-schedule-page--fit-screen #main-content { height: 100%; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.public-schedule-page--fit-screen .schedule-page-brand { flex: none; padding-top: 0.75rem; padding-bottom: 0.5rem; }
.public-schedule-page--fit-screen .schedule-page-brand img { max-height: 48px; }
.public-schedule-page--fit-screen .public-schedule,
.public-schedule-page--fit-screen .public-schedule__inner,
.public-schedule-page--fit-screen #schedule-container { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.public-schedule-page--fit-screen .public-schedule { padding: 0.5rem 0 0.75rem; }
.public-schedule-page--fit-screen .public-schedule__inner { width: 100%; box-sizing: border-box; }
.public-schedule-page--fit-screen #schedule-date-nav,
.public-schedule-page--fit-screen #schedule-type-tabs,
.public-schedule-page--fit-screen #schedule-legend { flex: none; }
.public-schedule-page--fit-screen #schedule-type-tabs { flex-wrap: nowrap; overflow-x: auto; margin-bottom: 0.5rem; }
.public-schedule-page--fit-screen #schedule-type-tabs > button { flex: none; }
.public-schedule-page--fit-screen #schedule-grid { flex: 1; min-height: 0; }
.public-schedule-page--fit-screen .schedule-grid { height: 100%; box-sizing: border-box; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.public-schedule-page--fit-screen .schedule-grid:focus-visible { outline: 2px solid var(--court-green); outline-offset: -2px; }
.public-schedule-page--fit-screen .schedule-grid thead th { z-index: 20; }
.public-schedule-page--fit-screen .schedule-grid thead th.time-col { z-index: 25; }
.public-schedule-page--fit-screen #public-schedule .schedule-legend { margin-top: 0.5rem; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; }
.public-schedule-page--fit-screen .schedule-legend-pill { flex: none; }
.public-schedule-page--fit-screen #public-schedule .ps-cart { position: static; flex: none; margin-top: 0.5rem; }
.public-schedule-page--fit-screen .availability-page { width: 100%; box-sizing: border-box; display: flex; flex-direction: column; flex: 1; min-height: 0; padding-top: 0.5rem; padding-bottom: 0.75rem; }
.public-schedule-page--fit-screen .availability-page__grid { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.public-schedule-page--fit-screen .availability-page thead th { position: sticky; top: 0; z-index: 2; background: var(--dark-card); }
.public-schedule-page--fit-screen .availability-page thead th:first-child { z-index: 3; }
@media (max-height: 600px) {
    .public-schedule-page--fit-screen .schedule-page-brand { padding-top: 0.25rem; padding-bottom: 0.25rem; }
    .public-schedule-page--fit-screen .schedule-page-brand img { max-height: 28px; }
    .public-schedule-page--fit-screen .schedule-page-brand__name { font-size: 1.125rem; }
    .public-schedule-page--fit-screen #schedule-date-nav { margin-bottom: 0.5rem; }
    .public-schedule-page--fit-screen #public-schedule .ps-cart { padding: 0.4rem 0.75rem; }
}