@import url("./base.css");

.calendar-error-stack {
    position: fixed;
    z-index: 10000;
    left: 50%;
    bottom: max(28px, env(safe-area-inset-bottom));
    display: flex;
    width: min(92vw, 440px);
    flex-direction: column-reverse;
    align-items: center;
    gap: 8px;
    transform: translateX(-50%);
    pointer-events: none;
}

.calendar-error-toast {
    max-width: 100%;
    color: var(--ui-danger);
    text-align: center;
    animation: calendar-error-toast-in 180ms ease-out both;
    transition: opacity 350ms ease, transform 350ms ease;
}

.calendar-error-toast.is-leaving {
    opacity: 0;
    transform: translateY(12px);
}

@keyframes calendar-error-toast-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.mobile-calendar-navigation {
    display: none;
}

/* Continuous, full-size AM/PM calendar; cells are intentionally inert. */

.calendar-page {
    color: #fff;
}

.calendar-page > header,
.calendar-page > footer {
    display: none;
}

.calendar-page main {
    max-width: none;
    padding: 38px 0 28px 5vw;
    overflow: hidden;
}

.calendar-title {
    display: flex;
    justify-content: space-between;
    gap: 24px;
}

.calendar-title a {
    color: var(--ui-muted);
    font-size: 0.85rem;
}

.calendar-navigation input {
    accent-color: #ddd;
}

.calendar-viewport {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
}

.calendar-viewport::-webkit-scrollbar {
    display: none;
}

.calendar-track {
    --calendar-day-gap: 150px;
    display: flex;
    gap: var(--calendar-day-gap);
    width: max-content;
    padding-right: 5vw;
}

.calendar-boot-placeholder {
    display: grid;
    flex: 1 1 auto;
    min-height: 45vh;
    place-items: center;
    color: var(--ui-muted);
}

.calendar-boot-date {
    display: block;
    min-width: 0;
    min-height: 48px;
    border-radius: 2px;
    background: var(--ui-panel-hover);
    opacity: 0.6;
}

.calendar-date {
    position: relative;
    isolation: isolate;
    flex: none;
    width: 1064px;
    background: var(--ui-background);
    padding-right: 8px;
    box-sizing: content-box;
}
.calendar-date:nth-child(even)::after {
    content: "";
    position: absolute;
    inset: 0 calc(var(--calendar-day-gap) / -2);
    z-index: -1;
    background: var(--calendar-day-alternate-bg);
    pointer-events: none;
}
.calendar-date + .calendar-date::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--calendar-day-gap) / -2);
    width: 1px;
    background: var(--calendar-day-divider);
    pointer-events: none;
}

.calendar-date h2 {
    font-size: 1.15rem;
    margin: 0 0 4px 64px;
    font-weight: 650;
}

.calendar-day-schedule {
    display: none;
}

.calendar-main-column.is-schedule-view > .calendar-viewport {
    overflow-y: auto;
    touch-action: pan-x pan-y;
}

.calendar-main-column.is-schedule-view .calendar-date > h2 {
    display: none;
}

.calendar-main-column.is-schedule-view .calendar-day-schedule {
    display: block;
}

.calendar-main-column.is-schedule-view .calendar-halves {
    display: none;
}

.calendar-day-schedule .schedule-day {
    margin: 0;
}

.calendar-day-schedule .schedule-day h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin: 0 0 10px;
    color: #fff;
    font-size: 1.15rem;
}

.calendar-day-schedule .schedule-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.calendar-day-schedule .schedule-table {
    width: 100%;
    min-width: 610px;
    border-collapse: collapse;
    table-layout: fixed;
    text-align: left;
}

.calendar-day-schedule .schedule-table thead {
    color: #777;
    font-size: 0.82rem;
    font-style: italic;
}

.calendar-day-schedule .schedule-table thead th {
    height: 34px;
    padding: 4px 10px;
    font-weight: 600;
}

.calendar-day-schedule .schedule-table th:nth-child(1) { width: 20%; }
.calendar-day-schedule .schedule-table th:nth-child(2) { width: 23%; }
.calendar-day-schedule .schedule-table th:nth-child(3) { width: 18%; }
.calendar-day-schedule .schedule-table th:nth-child(4) { width: 27%; }
.calendar-day-schedule .schedule-table th:nth-child(5) { width: 12%; min-width: 100px; }

.calendar-day-schedule .schedule-event {
    height: 48px;
    background: #000;
    transition: background-color 120ms ease;
}

.calendar-day-schedule .schedule-event:nth-child(even) {
    background: #212121;
}

.calendar-day-schedule .schedule-event:hover,
.calendar-day-schedule .schedule-event:focus-within {
    background: #141414;
}

.calendar-day-schedule .schedule-event:nth-child(even):hover,
.calendar-day-schedule .schedule-event:nth-child(even):focus-within {
    background: #292929;
}

.calendar-day-schedule .schedule-event > :is(td, th) {
    padding: 6px 10px;
    color: #eee;
    font-size: 0.95rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.calendar-day-schedule .schedule-event time {
    font-variant-numeric: tabular-nums;
    font-weight: 400;
}

.calendar-day-schedule .schedule-socials {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.calendar-day-schedule .schedule-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: none;
}

.calendar-day-schedule .schedule-social-link img {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.calendar-day-schedule .schedule-no-socials,
.calendar-day-schedule .schedule-free {
    color: #b9b9b9;
}

.calendar-day-schedule .schedule-free {
    margin: 18px 10px;
    font-size: 1rem;
}

.calendar-day-schedule .schedule-place-bid {
    display: inline-block;
    margin: 0 10px 10px;
    color: rgb(255 255 255 / 80%);
    font-size: 0.85rem;
    text-decoration: none;
}

.calendar-day-schedule .schedule-place-bid:hover,
.calendar-day-schedule .schedule-place-bid:focus-visible {
    color: #fff;
    text-decoration: underline;
}

.calendar-day-schedule .schedule-share {
    flex: none;
    margin-left: auto;
    padding: 6px 8px;
    border: 0;
    background: transparent;
    color: #888;
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

.calendar-day-schedule .schedule-share:hover,
.calendar-day-schedule .schedule-share:focus-visible {
    color: #ddd;
}

.calendar-day-schedule .schedule-row-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 7px;
}

.calendar-day-schedule .schedule-bookmark-control {
    position: relative;
    display: inline-flex;
    flex: 0 0 22px;
    width: 22px;
    height: 26px;
}

.calendar-day-schedule .schedule-bookmark-count {
    position: absolute;
    top: calc(100% - 6px);
    left: 50%;
    z-index: 1;
    color: #b9b9b9;
    font-size: 9px;
    font-weight: 500;
    line-height: 9px;
    transform: translateX(-50%);
    pointer-events: none;
}

.calendar-day-schedule .schedule-row-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 26px;
    padding: 2px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    opacity: 1;
    pointer-events: auto;
}

.calendar-day-schedule .schedule-event:hover .schedule-row-actions button,
.calendar-day-schedule .schedule-event:focus-within .schedule-row-actions button,
.calendar-day-schedule .schedule-row-actions button:focus-visible {
    opacity: 1;
    pointer-events: auto;
}

.calendar-day-schedule .schedule-row-actions button img {
    display: block;
    width: 17px;
    height: 17px;
    object-fit: contain;
    filter: invert(73%);
    transition: filter 120ms ease;
}

.calendar-day-schedule .schedule-row-actions button:hover img,
.calendar-day-schedule .schedule-row-actions button:focus-visible img {
    filter: invert(79%);
}

.calendar-day-schedule .schedule-row-actions button:disabled {
    cursor: default;
}

.calendar-day-schedule .schedule-row-actions button:disabled img {
    filter: invert(45%);
}

.calendar-day-schedule .schedule-row-actions button[aria-pressed="true"] img {
    filter: none;
}

@media (hover: none) {
    .calendar-day-schedule .schedule-row-actions button {
        opacity: 1;
        pointer-events: auto;
    }
}

.calendar-page #schedule-entry-menu {
    position: fixed;
    inset: auto;
    z-index: 1000;
    width: 220px;
    max-width: calc(100vw - 16px);
    margin: 0;
    padding: 6px;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    background: var(--ui-background);
    color: var(--ui-text);
    box-shadow: 0 8px 28px #0008;
}

.calendar-page #schedule-entry-menu > strong {
    display: block;
    padding: 8px 10px;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.calendar-page #schedule-entry-menu :is(a, button) {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 10px;
    border: 0;
    border-radius: 6px !important;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
}

.calendar-page #schedule-entry-menu button:disabled {
    background: var(--ui-panel);
    color: var(--ui-muted);
    cursor: default;
}

.calendar-page #schedule-entry-menu .schedule-menu-bid {
    background: var(--action-bid);
    color: var(--action-bid-text);
    font-weight: 700;
}

.calendar-page #schedule-entry-menu .schedule-menu-bid:hover {
    background: var(--action-bid-hover);
}

#calendar-schedule-share-status {
    position: sticky;
    bottom: 12px;
    z-index: 2;
    margin: 0;
    padding: 6px 10px;
    background: #111;
}

#calendar-schedule-share-status:empty,
#calendar-schedule-share-copy[hidden] {
    display: none;
}

#calendar-schedule-share-copy {
    width: 100%;
    min-height: 180px;
    font: inherit;
}

.calendar-halves {
    display: flex;
    gap: 40px;
}

.time-grid {
    border-collapse: collapse;
    table-layout: fixed;
    width: 512px;
    flex: none;
    font-size: 0.85rem;
}

.time-grid th {
    font-weight: 600;
}

.time-grid thead th {
    height: 30px;
    text-align: left;
    padding: 0 0 0 8px;
    color: #ddd;
}

.time-grid th:first-child {
    width: 64px;
    padding: 0 10px 0 0;
    text-align: right;
}

.time-grid thead .half-label {
    color: var(--ui-muted);
    font-size: 0.75rem;
}

.time-grid tbody th {
    vertical-align: top;
    padding-top: 8px;
    white-space: nowrap;
}

.time-grid td {
    border: 1px solid #303030;
    height: 46px;
    width: 112px;
    padding: 0;
    position: relative;
    vertical-align: top;
    font-size: 0.85rem;
    line-height: 1.3;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.calendar-page .skip {
    color: #000;
}

@media (max-width: 600px) {
    .calendar-page main {
        padding-top: 24px;
        padding-left: 16px;
    }

    .calendar-title a {
        font-size: 0.75rem;
    }

    .time-grid td {
        height: 46px;
    }
}

/* Reserve a separate bottom row for the selection cart. */

.calendar-page main {
    height: 100svh;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}

.calendar-title,
.calendar-navigation {
    flex-shrink: 0;
}

.calendar-viewport {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.calendar-cart > div {
    margin-right: auto;
}

.calendar-cart strong {
    font-size: 0.95rem;
    font-weight: 600;
}

.cart-note {
    display: block;
    font-size: 0.75rem;
    color: var(--ui-muted);
    margin-top: 3px;
}

.airtime-cell {
    width: 100%;
    min-height: 35px;
    height: 100%;
    padding: 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ui-muted);
    text-align: left;
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
}

.airtime-cell .tile-price,
.airtime-cell .tile-owner {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.airtime-cell .tile-owner {
    color: currentColor;
}

.airtime-cell:hover {
    background: #202020;
    color: white;
}

.airtime-cell[aria-pressed="true"] {
    font-weight: 700;
}

.airtime-cell:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -3px;
}

/* Group labels are visual only; each underlying cell retains its hit target. */
.time-grid td:has(.reservation-cell.tile-bid) {
    --reservation-fill: var(--action-bid);
    --reservation-text: var(--action-bid-text);
}
.time-grid td:has(.reservation-cell.tile-locked) {
    --reservation-fill: var(--action-lock-disabled);
    --reservation-text: var(--action-lock-disabled-text);
}
.time-grid td:has(.reservation-cell.is-past) {
    --reservation-fill: var(--status-past-bg);
    --reservation-text: var(--status-past-fg);
}
.time-grid td:has(.reservation-cell.is-upcoming-locked) {
    --reservation-fill: var(--ui-panel);
    --reservation-text: var(--ui-text);
}
.time-grid td:has(.reservation-cell.tile-bid.is-upcoming-locked) {
    --reservation-fill: var(--action-bid-disabled);
    --reservation-text: var(--action-bid-disabled-text);
}
.time-grid td:has(.reservation-cell.tile-locked.is-upcoming-locked) {
    --reservation-fill: var(--action-lock-disabled);
    --reservation-text: var(--action-lock-disabled-text);
}
.time-grid td:has(.reservation-cell.is-on-air) {
    --reservation-fill: currentColor;
    --reservation-text: #fff;
    color: #469373;
    animation: takeover-hue 6s linear infinite;
}
/* Fill the table cell too: mobile zoom can leave fractional seams around
   the button, even when adjoining reservation borders have matching colors. */
.time-grid td:has(.reservation-cell) {
    background: var(--reservation-fill);
}
.time-grid td.reservation-join-right {
    border-right-color: var(--reservation-fill);
}
.time-grid td.reservation-join-right + td {
    border-left-color: var(--reservation-fill);
}
.time-grid td.reservation-join-down {
    border-bottom-color: var(--reservation-fill);
}
.time-grid td.reservation-join-up {
    border-top-color: var(--reservation-fill);
}
.reservation-cell .tile-owner,
.reservation-cell .tile-price {
    visibility: hidden;
}
.reservation-cell:hover:not(.tile-bid) .tile-price,
.reservation-cell:focus-visible:not(.tile-bid) .tile-price {
    visibility: visible;
    position: absolute;
    right: 4px;
    bottom: 2px;
}
.reservation-cell.is-on-air:hover .tile-price,
.reservation-cell.is-on-air:focus-visible .tile-price {
    visibility: hidden !important;
}
.reservation-label {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: var(--reservation-text);
    overflow: hidden;
}
.reservation-label strong {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
}
.reservation-label > span {
    font-size: 0.7rem;
}
.reservation-cell:hover:not(.tile-bid) {
    box-shadow: inset 0 0 0 2px currentColor;
}
.reservation-cell.is-on-air:hover,
.reservation-cell.is-on-air:focus-visible {
    box-shadow: none;
}
.airtime-cell:not(:disabled) {
    cursor: pointer;
}
.calendar-track.is-dragging,
.calendar-track.is-dragging * {
    cursor: grabbing !important;
}

.airtime-cell[aria-pressed="true"]:focus-visible {
    outline-color: var(--ui-panel);
}

@media (max-width: 600px) {
    .calendar-cart > div {
        flex-basis: 100%;
    }

    .calendar-cart strong {
        font-size: 0.85rem;
    }

    #cart-bid {
        margin-left: auto;
    }
}

.airtime-cell.tile-locked {
    cursor: default;
    font-weight: 700;
}

.airtime-cell.tile-bid:hover:not([aria-pressed="true"]) {
    background: var(--action-bid-hover);
}

.calendar-checkout {
    width: min(720px, calc(100% - 28px));
    max-width: 720px;
    min-height: min(640px, calc(100vh - 40px));
    background: #050505;
    color: white;
    border: 1px solid #555;
    padding: 26px;
    box-shadow: none;
}

.calendar-checkout::backdrop {
    background: #000b;
}

.calendar-checkout .dialog-head {
    border-bottom: 1px solid #888;
    padding-bottom: 14px;
}

.calendar-checkout .dialog-head h2 {
    font-size: 1.7rem;
}

.calendar-checkout .checkout-close {
    background: transparent;
    border: 1px solid #555;
    color: white;
    padding: 5px 12px;
    font-size: 1.3rem;
}

.checkout-heading {
    font-weight: 700;
    margin: 16px 0 8px;
}

#calendar-checkout-form {
    display: flex;
    flex-direction: column;
    min-height: 500px;
}

.checkout-page {
    display: none;
    flex: 1;
    min-height: 500px;
    flex-direction: column;
}

.checkout-page.is-active {
    display: flex;
}

.checkout-items {
    max-height: 320px;
    overflow: auto;
    border-bottom: 1px solid #333;
}

.checkout-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    padding: 13px 2px;
    border-top: 1px solid #222;
}

.checkout-item > div:first-child {
    display: grid;
    gap: 2px;
}

.checkout-item span {
    font-size: 0.8rem;
    color: var(--ui-muted);
}

.checkout-item strong {
    font-size: 0.95rem;
}

.bid-stepper {
    display: flex;
    align-items: center;
    gap: 5px;
}

.bid-stepper input {
    width: 104px;
    background: var(--ui-panel);
    color: white;
    border-color: #666;
    text-align: right;
    font-weight: 700;
    padding: 8px;
}

.bid-stepper button {
    width: 34px;
    height: 38px;
    padding: 0;
    background: var(--ui-panel);
    color: white;
    border-color: #555;
}

.lock-price {
    min-width: 90px;
    text-align: right;
}

.checkout-promo {
    margin: 16px 0;
}
.checkout-promo-entry {
    display: flex;
    gap: 8px;
    align-items: center;
}
.checkout-promo-entry input {
    flex: 1;
    min-width: 0;
}
.checkout-promo-entry button {
    flex: 0 0 auto;
}
.checkout-promo [data-promo-status] {
    font-size: 14px;
}
.checkout-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding: 24px 2px 10px;
    text-transform: uppercase;
    font-weight: 700;
}

.checkout-total strong {
    font-size: 1.25rem;
}

.checkout-fineprint {
    color: var(--ui-muted);
    font-size: 0.8rem;
    margin: 0 2px 10px;
}

.checkout-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 12px;
}

.checkout-actions button {
    font-size: 1.05rem;
    font-weight: 700;
}

.checkout-actions .checkout-cancel {
    background: #ddd;
    color: var(--ui-panel);
    border-color: #ddd;
}

.calendar-checkout .error {
    min-height: 1.5em;
    margin: 0;
}

.checkout-info {
    display: grid;
    gap: 4px;
}

.checkout-info label {
    margin-top: 16px;
}

.checkout-info input {
    background: var(--ui-panel);
    color: white;
    border-color: #666;
}

.checkout-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    max-width: 100%;
    cursor: pointer;
}

.checkout-checkbox input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--ui-primary);
}

.checkout-checkbox span {
    font-weight: 600;
}

@media (max-width: 600px) {
    .calendar-checkout {
        padding: 18px;
        min-height: calc(100vh - 20px);
    }

    .checkout-item {
        gap: 10px;
    }

    .checkout-item strong {
        font-size: 0.85rem;
    }

    .bid-stepper input {
        width: 78px;
    }

    .bid-stepper button {
        width: 30px;
    }

    .checkout-actions {
        gap: 10px;
    }
}

.calendar-title > a {
    margin-left: auto;
}

#calendar-help-button {
    flex-shrink: 0;
    border-radius: 50%;
    color: white;
    padding: 0;
    font-size: 1.2rem;
}

#calendar-help-button:hover {
    background: #222;
}

#calendar-help-dialog {
    background: var(--ui-panel);
    color: #eee;
    border-color: #555;
    max-width: 680px;
}
#calendar-help-dialog.is-first-open[open] {
    animation: calendar-help-slide-in 900ms linear both;
}
@keyframes calendar-help-slide-in {
    from {
        transform: translateY(-100vh);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
@media (prefers-reduced-motion: reduce) {
    #calendar-help-dialog.is-first-open[open] {
        animation: none;
    }
}

#calendar-help-dialog .dialog-head button {
    background: transparent;
    color: white;
    border: 1px solid #666;
    font-size: 1.3rem;
    padding: 4px 12px;
}

.calendar-help-content {
    color: #ccc;
    line-height: 1.7;
}

.calendar-help-content ol {
    padding-left: 24px;
}

.calendar-help-content li {
    padding-left: 6px;
    margin: 16px 0;
}

.calendar-help-content strong {
    color: white;
}

.calendar-help-content .intro-prototype {
    font-size: 0.85rem;
    color: var(--ui-muted);
}

/* Radix Colors dark scales: bronze8/12, sage8/12, blue7/12, gray12/3.
   Source: https://github.com/radix-ui/colors/blob/main/src/dark.ts */

.calendar-page {
    font-family: "Inter", system-ui, sans-serif;
    background: #000;
}

.calendar-page button {
    border-radius: 2px;
    box-shadow: none;
}

.calendar-page #calendar-help-button {
    border-radius: 50%;
}

.airtime-cell .tile-owner {
    order: -1;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    opacity: 1;
    max-width: 100%;
}

.airtime-cell:not(.tile-empty) .tile-price {
    font-size: 0.7rem;
    font-weight: 400;
    opacity: 1;
}

.tile-lock-icon {
    display: block;
    width: 1em;
    height: 1em;
    object-fit: contain;
}

/* Explicit state colors replace the shared disabled-button fade. */
.airtime-cell:disabled {
    opacity: 1;
    pointer-events: none;
}

.airtime-cell.tile-empty {
    color: #b4b4b4;
    font-size: 0.75rem;
}

.airtime-cell.tile-bid {
    background: var(--action-bid);
    color: var(--action-bid-text);
}

.airtime-cell.tile-locked,
.airtime-cell.tile-locked:hover {
    background: var(--action-lock-disabled);
    color: var(--action-lock-disabled-text);
}

.airtime-cell.tile-checkout:not(.is-on-air):not(.is-past),
.airtime-cell.tile-checkout:not(.is-on-air):not(.is-past):hover {
    background: var(--status-past-bg);
    color: var(--status-past-fg);
    cursor: default;
}
.airtime-cell .tile-checkout-note {
    display: block;
    font-size: calc(0.65rem * var(--calendar-content-scale, 1));
    line-height: 1.15;
}

.airtime-cell[aria-pressed="true"] {
    background: var(--status-selected-bg);
    color: var(--status-selected-fg);
    box-shadow: inset 0 0 0 1px #f0ede6;
}
.airtime-cell[aria-pressed="true"] .tile-price {
    visibility: visible;
    position: absolute;
    right: 4px;
    bottom: 2px;
}
.time-grid td:has(.airtime-cell[aria-pressed="true"]) {
    background: var(--status-selected-bg);
    border-color: var(--status-selected-bg);
    --reservation-fill: var(--status-selected-bg);
}
.airtime-cell[aria-pressed="true"] {
    position: relative;
    z-index: 2;
    box-shadow: 0 0 0 1px var(--status-selected-bg);
}
.calendar-track .time-grid td,
.calendar-track .airtime-cell {
    height: var(--calendar-row-height, 46px);
}
.calendar-track .calendar-date {
    width: calc(1064px * var(--calendar-content-scale, 1));
}
.calendar-track .time-grid {
    width: calc(512px * var(--calendar-content-scale, 1));
    font-size: calc(0.85rem * var(--calendar-content-scale, 1));
}
.calendar-track .calendar-halves {
    gap: calc(40px * var(--calendar-content-scale, 1));
}
.calendar-track .airtime-cell .tile-price,
.calendar-track .reservation-label > span {
    font-size: calc(0.75rem * var(--calendar-content-scale, 1));
}
.calendar-track .airtime-cell .tile-owner,
.calendar-track .reservation-label strong {
    font-size: calc(0.95rem * var(--calendar-content-scale, 1));
}

.calendar-page [hidden] {
    display: none !important;
}

/* Calendar clock states take precedence over booking colors. */

.airtime-cell.is-past,
.airtime-cell.is-past:hover {
    background: var(--status-past-bg);
    color: var(--status-past-fg);
    cursor: default;
}
.airtime-cell.is-past:hover {
    box-shadow: none;
}
.airtime-cell.is-upcoming-locked {
    color: var(--status-upcoming-fg);
    cursor: default;
}
.airtime-cell.tile-bid.is-upcoming-locked,
.airtime-cell.tile-bid.is-upcoming-locked:hover {
    background: var(--action-bid-disabled);
    color: var(--action-bid-disabled-text);
}
.airtime-cell.tile-locked.is-upcoming-locked,
.airtime-cell.tile-locked.is-upcoming-locked:hover {
    background: var(--action-lock-disabled);
    color: var(--action-lock-disabled-text);
}
.airtime-cell.tile-empty.is-upcoming-locked,
.airtime-cell.tile-empty.is-upcoming-locked:hover {
    background: var(--ui-panel);
    color: var(--ui-text);
}
.airtime-cell.tile-locked:not(.is-on-air),
.airtime-cell.tile-locked:not(.is-on-air):hover {
    background: var(--action-lock-disabled);
    color: var(--action-lock-disabled-text);
}
.time-grid td:has(.reservation-cell.tile-locked:not(.is-on-air)) {
    --reservation-fill: var(--action-lock-disabled);
    --reservation-text: var(--action-lock-disabled-text);
}
.airtime-cell.tile-locked.is-on-air,
.airtime-cell.tile-locked.is-on-air:hover {
    background: currentColor;
    color: #469373;
    animation: takeover-hue 6s linear infinite;
}
.airtime-cell.tile-locked.is-on-air :is(.tile-price, .tile-owner),
.time-grid td:has(.reservation-cell.tile-locked.is-on-air) .reservation-label {
    color: #fff;
    font-weight: 700;
}
.time-grid td:has(.reservation-cell.tile-locked.is-on-air) {
    --reservation-fill: currentColor;
    --reservation-text: #fff;
    color: #469373;
    animation: takeover-hue 6s linear infinite;
}
.airtime-cell.is-on-air .reservation-label,
.time-grid td:has(.reservation-cell.is-on-air) .reservation-label {
    color: #fff;
    font-weight: 700;
}
.airtime-cell.is-on-air,
.airtime-cell.is-on-air:hover {
    background-color: currentColor;
    color: #469373;
    animation: takeover-hue 6s linear infinite;
    cursor: pointer;
    opacity: 1;
}

.airtime-cell.is-on-air :is(.tile-price, .tile-owner) {
    color: #fff;
    font-weight: 700;
}

/* Past airtime uses the same neutral dark fill as free calendar time,
   regardless of its former bid or lock-in state. */
.airtime-cell.is-past:not(.is-on-air),
.airtime-cell.is-past:not(.is-on-air):hover {
    background: var(--ui-panel);
}
.time-grid td:has(.reservation-cell.is-past:not(.is-on-air)) {
    --reservation-fill: var(--ui-panel);
    --reservation-text: var(--status-past-fg);
}

@media (prefers-reduced-motion: reduce) {
    .airtime-cell.is-on-air,
    .airtime-cell.is-on-air:hover,
    .airtime-cell.tile-locked.is-on-air,
    .airtime-cell.tile-locked.is-on-air:hover,
    .time-grid td:has(.reservation-cell.tile-locked.is-on-air),
    .time-grid td:has(.reservation-cell.is-on-air) {
        animation: none;
        color: #469373;
    }
}

/* Calendar shell; the grid rules above remain independent. */

@font-face {
    font-family: "Calendar Inter";
    font-style: normal;
    font-weight: 400;
    src: url("/images/theme-1/inter-regular.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Calendar Inter";
    font-style: normal;
    font-weight: 700;
    src: url("/images/theme-1/inter-bold.ttf") format("truetype");
    font-display: swap;
}

html[data-route="calendar"] #main {
    position: relative;
    padding: 0;
    background: #000;
}

.calendar-title,
.calendar-cart,
.calendar-timezone,
.calendar-scroll-date {
    font-family: "Calendar Inter", "Inter", sans-serif;
}

.calendar-title {
    height: 96px;
    min-height: 96px;
    align-items: center;
    padding: 4px 24px;
}

.calendar-heading {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
}

.calendar-brand {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 15px;
}

.calendar-home-link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: clamp(42px, 6vw, 76px);
    height: clamp(42px, 6vw, 76px);
    overflow: hidden;
    padding: 8px;
    border-radius: 0 0 0 14px;
    background: #75c9bb;
}

.calendar-home-link img {
    display: block;
    width: 150%;
    height: 150%;
    max-width: none;
    flex: 0 0 150%;
    object-fit: contain;
}

.calendar-tools {
    display: grid;
    justify-items: end;
    gap: 12px;
}
.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--ui-muted);
    font-size: 11px;
    line-height: 16px;
}
.calendar-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.calendar-legend i {
    width: 10px;
    height: 10px;
    border-width: 1px;
    border-style: solid;
    border-radius: 2px;
}
.legend-bid {
    background: var(--action-bid);
    border-color: var(--action-bid-text);
}
.legend-locked {
    background: var(--action-lock-disabled);
    border-color: var(--action-lock-disabled);
}
.legend-live {
    background: currentColor;
    color: #469373;
    border-color: #000;
    animation: takeover-hue 6s linear infinite;
}
.legend-selected {
    background: var(--status-selected-bg);
    border-color: #f0ede6;
}

.calendar-title h1 {
    margin: 0;
    font-size: 72px;
    font-weight: 700;
    line-height: 88px;
    letter-spacing: 0;
}

.calendar-actions {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-top: 0;
}

.calendar-actions #schedule-toggle {
    width: auto;
    text-align: left;
}

.calendar-actions a {
    width: auto;
}

.calendar-actions a,
.calendar-text-action {
    color: #bfbfbf;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    text-decoration: none;
    font-weight: bold;
    text-underline-offset: 3px;
}

.calendar-text-action {
    appearance: none;
    min-height: 0;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.calendar-text-action:hover:not(:disabled),
.calendar-actions a:hover {
    color: #fff;
}

.calendar-text-action:disabled {
    cursor: default;
    opacity: 1;
}

#calendar-help-button {
    /* width: 64px;
  height: 60px; */
    margin: 0;
    align-self: center;
    border: 0;
    background: transparent;
}

#calendar-help-button img {
    display: block;
}

.calendar-navigation {
    position: relative;
    --scroll-position: 10px;
    height: 48px;
    margin: 0 24px;
    padding: 14px 0;
}

.calendar-scroll-ticks {
    position: absolute;
    top: 15px;
    left: 0;
    right: 0;
    height: 5px;
    pointer-events: none;
}
.calendar-scroll-ticks i {
    position: absolute;
    width: 1px;
    height: 5px;
    background: var(--ui-text);
    transform: translateX(-50%);
}

.calendar-navigation input {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 20px;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    touch-action: none;
    cursor: ew-resize;
}

.calendar-navigation input::-webkit-slider-runnable-track {
    height: 9px;
    border: 1px solid #fff;
    border-radius: 9px;
    background: linear-gradient(
        to right,
        #fff 0 var(--scroll-position),
        #414141 var(--scroll-position) 100%
    );
}

.calendar-navigation input::-moz-range-track {
    height: 7px;
    border: 1px solid #fff;
    border-radius: 9px;
    background: linear-gradient(
        to right,
        #fff 0 var(--scroll-position),
        #414141 var(--scroll-position) 100%
    );
}

.calendar-navigation input::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    margin-top: -6.5px;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: 50%;
    background: #fff;
}

.calendar-navigation input::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: #fff;
}

.calendar-scroll-date {
    position: absolute;
    z-index: 2;
    top: -33px;
    min-width: 82px;
    height: 30px;
    padding: 6px 8px;
    border-radius: 5px;
    background: #fff;
    color: #000;
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    white-space: nowrap;
    transform: translateX(-50%);
    pointer-events: none;
}

.calendar-scroll-date::after {
    content: "";
    position: absolute;
    top: 100%;
    left: calc(50% + var(--pointer-offset, 0px));
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 9px solid #fff;
    transform: translateX(-50%);
}

.calendar-viewport {
    padding-bottom: 10px;
}

.calendar-cart {
    flex-shrink: 0;
    align-items: center;
    background: #000;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    min-height: 104px;
    gap: 16px;
    margin: 0 24px;
    padding: 16px 0 32px 200px;
    border-top: 1px solid #444;
}

.calendar-cart-summary {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.calendar-timezone {
    position: absolute;
    z-index: 2;
    bottom: 12px;
    left: 24px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 14px;
    line-height: 18px;
}

.calendar-timezone strong {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.calendar-timezone .calendar-text-action {
    margin: 0;
    font-size: 14px;
    line-height: 16px;
    color: var(--ui-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.calendar-cart > .calendar-cart-summary {
    text-align: left;
    margin-right: 16px;
    flex: 0 1 300px;
}

#selection-summary {
    display: flex;
    gap: 24px;
    white-space: nowrap;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
}

.calendar-cart .cart-note {
    margin-top: 6px;
    font-size: 14px;
    line-height: 20px;
    color: var(--ui-muted);
    white-space: nowrap;
}

.calendar-cart button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    gap: 16px;
    height: 48px;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    white-space: nowrap;
}

.calendar-cart button strong {
    font-size: 18px;
    font-weight: 700;
}

.calendar-cart .clear-selection {
    background: none;
    min-width: 88px;
    color: #fff;
    border-color: #fff;
}

.calendar-cart button:disabled {
    color: var(--ui-muted);
    border-color: var(--ui-border);
    cursor: not-allowed;
}

#cart-bid {
    min-width: 144px;
    gap: 16px;
    padding: 0 18px;
    background: var(--action-bid);
    border-color: var(--action-bid);
    color: var(--action-bid-text);
}

#cart-lock {
    min-width: 192px;
    border-color: var(--action-lock);
    background: var(--action-lock);
    color: var(--action-lock-text);
}

#cart-bid:hover:not(:disabled) {
    background: var(--action-bid-hover);
    border-color: var(--action-bid-hover);
}
#cart-lock:hover:not(:disabled) {
    background: var(--action-lock-hover);
    border-color: var(--action-lock-hover);
}

#cart-bid:disabled {
    background: var(--action-bid-disabled);
    border-color: var(--action-bid-disabled);
    color: var(--action-bid-disabled-text);
}
#cart-lock:disabled {
    background: var(--action-lock-disabled);
    border-color: var(--action-lock-disabled);
    color: var(--action-lock-disabled-text);
}

@media (max-width: 1100px) {
    .calendar-cart {
        padding-left: 0;
        gap: 16px;
        min-height: 112px;
        padding-bottom: 34px;
    }

    .calendar-cart > .calendar-cart-summary {
        margin-right: auto;
        flex-basis: auto;
    }

    .calendar-cart .cart-note {
        font-size: 14px;
    }

    .calendar-actions {
        gap: 28px;
    }

    .calendar-title h1 {
        font-size: 64px;
    }

    .calendar-actions #schedule-toggle,
    .calendar-actions a {
        width: auto;
        font-size: 18px;
    }

    .calendar-cart button {
        font-size: 18px;
        gap: 16px;
        padding: 0 16px;
    }

    .calendar-cart button strong {
        font-size: 18px;
    }

    .calendar-cart .clear-selection {
        min-width: 90px;
    }

    #cart-bid {
        min-width: 140px;
    }

    #cart-lock {
        min-width: 180px;
    }
}

@media (max-width: 760px) {
    .calendar-tools {
        width: 100%;
        justify-items: stretch;
        gap: 8px;
        padding-bottom: 8px;
    }
    .calendar-title {
        height: auto;
        min-height: 94px;
        flex-wrap: wrap;
        gap: 4px;
        padding: 4px 16px;
    }

    .calendar-title h1 {
        font-size: 48px;
        line-height: 66px;
    }

    .calendar-heading {
        gap: 12px;
    }

    .calendar-home-link {
        display: none;
    }

    .calendar-actions {
        width: 100%;
        justify-content: space-between;
        margin-top: 0;
    }

    .calendar-actions a,
    .calendar-actions button {
        font-size: 16px;
    }

    .calendar-actions #schedule-toggle,
    .calendar-actions a {
        width: auto;
    }

    .calendar-navigation {
        margin: 0 16px;
    }

    .calendar-cart {
        display: grid;
        grid-template-columns: 1fr auto auto;
        gap: 10px;
        margin: 0 16px;
        padding: 12px 0 40px;
    }

    .calendar-cart > .calendar-cart-summary {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        margin-right: 0;
    }

    #selection-summary {
        font-size: 14px;
        gap: 12px;
        flex-shrink: 0;
    }

    .calendar-cart .cart-note {
        margin-top: 0;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .calendar-cart button {
        padding: 0 12px;
        gap: 12px;
        height: 44px;
        min-height: 44px;
        font-size: 16px;
    }

    .calendar-cart button strong {
        font-size: 16px;
    }

    .calendar-cart .clear-selection,
    #cart-bid,
    #cart-lock {
        min-width: 0;
        margin-left: 0;
    }
}

/* Calendar menus follow the configuration page's dark panels and controls. */

.calendar-page :is(#calendar-help-dialog, .calendar-checkout) {
    font-family: "Calendar Inter", "Inter", sans-serif;
    color-scheme: dark;
    width: min(580px, calc(100vw - 32px));
    max-width: 580px;
    min-height: 0;
    max-height: calc(100dvh - 32px);
    padding: 20px;
    border: 1px solid #555;
    border-radius: 4px;
    background: var(--ui-panel);
    color: #fff;
}

.calendar-page :is(#calendar-help-dialog, .calendar-checkout)::backdrop {
    background: rgb(0 0 0 / 70%);
}

.calendar-page :is(#calendar-help-dialog, .calendar-checkout) .dialog-head {
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #444;
}

.calendar-page :is(#calendar-help-dialog, .calendar-checkout) .dialog-head h2 {
    font-size: 22px;
    line-height: 1.2;
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.calendar-page :is(#calendar-help-dialog, .calendar-checkout) button {
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid #ffffff50;
    border-radius: 3px;
    background: transparent;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.calendar-page
    :is(#calendar-help-dialog, .calendar-checkout)
    button:hover:not(:disabled) {
    background: #ffffff10;
    border-color: var(--ui-muted);
}

.calendar-page
    :is(#calendar-help-dialog, .calendar-checkout)
    .dialog-head
    button {
    flex-shrink: 0;
    width: 40px;
    min-height: 40px;
    padding: 6px;
    font-size: 24px;
}

.calendar-page .calendar-help-content {
    font-size: 15px;
    line-height: 1.55;
    color: #bbb;
}

.calendar-page .calendar-help-content > p:first-child {
    margin-top: 20px;
}

.calendar-page .calendar-help-content ol {
    margin: 24px 0;
    padding-left: 24px;
}

.calendar-page .calendar-help-content li {
    margin: 12px 0;
    padding-left: 4px;
}

.calendar-help-content .calendar-help-gif {
    float: right;
    width: min(190px, 38%);
    min-width: 112px;
    max-width: 42%;
    height: auto;
    margin: 0 0 10px 16px;
    border: 1px solid #444;
}

.calendar-help-content li::after {
    content: "";
    display: block;
    clear: both;
}

.calendar-page .calendar-help-content .intro-prototype {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #333;
    font-size: 13px;
}

.calendar-page #calendar-checkout-form {
    min-height: 0;
}

.calendar-page .checkout-page {
    min-height: 0;
}

.calendar-page .checkout-heading {
    margin: 18px 0 4px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.calendar-page .checkout-items {
    max-height: min(320px, 35dvh);
    border-bottom: 1px solid #333;
}

.calendar-page .checkout-item {
    gap: 16px;
    padding: 16px 0;
}

.calendar-page .checkout-item > div:first-child {
    gap: 6px;
}

.calendar-page .checkout-item strong {
    font-size: 14px;
    line-height: 20px;
}

.calendar-page .bid-stepper {
    gap: 8px;
}

.calendar-page .calendar-checkout .bid-stepper button {
    width: 44px;
    min-height: 44px;
    height: 44px;
    padding: 6px;
    font-size: 20px;
    border-radius: 0;
}

.calendar-page .calendar-checkout input:not([type="checkbox"]) {
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid #808080;
    border-radius: 3px;
    background: #000;
    color: #fff;
}

.calendar-page .calendar-checkout .bid-stepper input {
    width: 76px;
    min-height: 44px;
    height: 44px;
    padding: 6px 8px;
    font-size: 15px;
    border-radius: 0;
    font-variant-numeric: tabular-nums;
}

.calendar-page .checkout-info {
    gap: 8px;
}

.calendar-page .checkout-info label {
    margin: 12px 0 0;
    font-size: 14px;
    font-weight: 400;
}

.calendar-page .calendar-checkout input::placeholder {
    color: #808080;
}

.calendar-page .checkout-total {
    margin-top: 16px;
    padding: 0 0 12px;
    text-transform: none;
}

.calendar-page .checkout-total strong {
    font-size: 22px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.calendar-page .checkout-fineprint {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 20px;
    color: var(--ui-muted);
}

.calendar-page .calendar-checkout .error {
    color: var(--ui-danger);
}

.calendar-page .calendar-checkout .error:empty {
    display: none;
}

.calendar-page .checkout-checkbox {
    margin: 16px 0;
    color: #bbb;
    font-size: 14px;
}

.calendar-page .checkout-checkbox input {
    accent-color: var(--ui-primary);
}

.calendar-page .checkout-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid #333;
}

.calendar-page .calendar-checkout .checkout-actions button {
    min-height: 44px;
    font-weight: 500;
}

.calendar-page .calendar-checkout .booking-share-label {
    display: block;
    margin: 14px 0 4px;
    font-weight: 700;
}

.calendar-page .calendar-checkout .booking-share-input {
    display: block;
    width: min(100%, 560px);
    min-height: 40px;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid #222;
    border-radius: 4px;
    background: #171717;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

.calendar-page .calendar-checkout .booking-share-input:hover {
    border-color: #555;
}

.calendar-page .calendar-checkout #booking-share-status {
    display: block;
    min-height: 1.2em;
    font-size: 0.85em;
}

.calendar-page
    #calendar-checkout-form
    :is(.checkout-next, button[type="submit"]) {
    background: var(--action-continue);
    border-color: var(--action-continue);
    color: var(--action-continue-text);
    padding-inline: 26px;
    font-weight: 700;
}
.calendar-page
    #calendar-checkout-form
    :is(.checkout-next, button[type="submit"]):hover:not(:disabled) {
    background: var(--action-continue-hover);
    border-color: var(--action-continue-hover);
}
.calendar-page
    #calendar-checkout-form
    :is(.checkout-next, button[type="submit"]):disabled {
    background: var(--action-continue-disabled);
    border-color: var(--action-continue-disabled);
    color: var(--action-continue-disabled-text);
}

.calendar-page .calendar-checkout a {
    color: var(--status-locked-fg);
    text-underline-offset: 3px;
}

@media (max-width: 600px) {
    .calendar-page :is(#calendar-help-dialog, .calendar-checkout) {
        padding: 20px;
        width: min(580px, calc(100vw - 32px));
        max-width: 580px;
        border-radius: 4px;
    }

    .calendar-page
        :is(#calendar-help-dialog, .calendar-checkout)
        .dialog-head
        h2 {
        font-size: 20px;
        line-height: 28px;
    }

    .calendar-page .checkout-item {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding: 12px 0;
    }

    .calendar-page .bid-stepper {
        justify-self: end;
        gap: 0;
    }

    .calendar-page .checkout-actions button {
        flex: 1;
    }
}

/* Mobile calendar: one day and one half-day per screen. */
@media (max-width: 760px) {
    html[data-route="calendar"] #main {
        padding-bottom: 140px;
    }
    .calendar-page .calendar-navigation {
        display: none;
    }
    .mobile-calendar-navigation {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 8px 16px 12px;
        flex-shrink: 0;
    }
    .mobile-calendar-day {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .mobile-calendar-day strong {
        font-size: 18px;
    }
    .mobile-calendar-navigation button {
        min-width: 44px;
        min-height: 44px;
        padding: 6px 14px;
        background: transparent;
        color: var(--ui-text);
        border: 1px solid var(--ui-border);
        border-radius: 6px;
    }
    .mobile-calendar-navigation button:disabled {
        color: var(--ui-muted);
        border-color: transparent;
    }
    .mobile-calendar-period {
        display: flex;
        gap: 8px;
    }
    .mobile-calendar-period button {
        flex: 1;
    }
    .mobile-calendar-period button[aria-pressed="true"] {
        background: var(--ui-panel-hover);
        border-color: var(--ui-text);
        font-weight: 700;
    }
    .calendar-viewport {
        scroll-snap-type: x mandatory;
    }
    .calendar-track {
        width: 100%;
        gap: 0;
        padding-right: 0;
    }
    .calendar-track .calendar-date {
        width: 100%;
        padding: 0 16px 190px 0;
        box-sizing: border-box;
        scroll-snap-align: start;
        flex-shrink: 0;
    }
    .calendar-date h2 {
        display: none;
    }
    .calendar-date::before,
    .calendar-date::after {
        display: none;
    }
    .calendar-track .calendar-halves {
        display: block;
    }
    .calendar-track .time-grid {
        width: 100%;
    }
    .calendar-track[data-period="am"] .time-grid:nth-child(2),
    .calendar-track[data-period="pm"] .time-grid:first-child {
        display: none;
    }
    .calendar-track .time-grid td {
        width: auto;
    }
    .calendar-track .time-grid th:first-child {
        width: 52px;
    }
    .calendar-page .calendar-cart {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10;
        margin: 0;
        padding: 12px 16px max(38px, env(safe-area-inset-bottom));
        background: var(--ui-background);
    }
    .calendar-timezone {
        position: static;
        z-index: auto;
        flex-shrink: 0;
        padding: 0;
        min-height: 0;
        background: transparent;
        flex-wrap: nowrap;
    }
    .calendar-timezone .calendar-text-action {
        min-height: 32px;
    }
    .calendar-cart:has(#clear-selection:not(:disabled)) .cart-note {
        display: none;
    }
    .calendar-cart #clear-selection {
        border: 0;
        background: transparent;
        text-decoration: underline;
    }
}

.calendar-timezone-dialog {
    background: var(--ui-background);
    color: var(--ui-text);
}
.calendar-timezone-dialog select {
    max-width: 100%;
}

/* Desktop calendar workspace: keep the existing grid and slider together,
   with date navigation and the selection cart in a dedicated side column. */
@media (min-width: 761px) {
    html[data-route="calendar"] {
        --site-scale: 0.8;
    }

    .calendar-page main {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: calc(100svh / var(--site-scale));
        padding: 0;
        overflow: hidden;
    }

    .calendar-main-column {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-width: 0;
        height: 100%;
        padding-left: 0;
    }

    .calendar-title {
        height: clamp(62px, 10svh, 96px);
        min-height: clamp(62px, 10svh, 96px);
        padding: 0 24px 0 0;
        align-items: flex-start;
    }

    .calendar-heading {
        height: 100%;
        overflow: hidden;
        border-radius: 0 0 24px 0;
        background: #75c9bb;
    }

    .calendar-home-link {
        width: clamp(70px, 9.6vw, 132px);
        height: 100%;
        padding-left: 30px;
        padding-right: 27px;
        border-radius: 0;
        background: transparent;
    }

    .calendar-title h1 {
        margin: 0;
        padding: 0 clamp(14px, 2vw, 26px) 5px;
        border-radius: 0;
        background: transparent;
        color: #050505;
        font-size: clamp(46px, 7.8svh, 76px);
        line-height: 1.08;
    }

    .calendar-navigation {
        flex: 0 0 auto;
        margin-right: 24px;
    }

    .calendar-navigation input {
        accent-color: #75c9bb;
    }

    .calendar-actions {
        transform: translateY(20px);
    }

    .calendar-viewport {
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: auto;
        overflow-y: hidden;
        margin-bottom: 36px;
        touch-action: pan-x;
    }

    .calendar-day-schedule .schedule-day h2 {
        margin-left: 64px;
    }

    .calendar-main-column.is-schedule-view .calendar-viewport {
        visibility: visible;
        overflow-y: auto;
    }

    .calendar-track {
        --calendar-day-gap: calc(
            150px * var(--calendar-content-scale, 1) * 0.94
        );
        gap: var(--calendar-day-gap);
    }

    .calendar-track .calendar-date {
        width: calc(1064px * var(--calendar-content-scale, 1) * 0.94);
    }

    .calendar-track .time-grid {
        width: calc(512px * var(--calendar-content-scale, 1) * 0.94);
    }

    .calendar-track .calendar-halves {
        gap: calc(40px * var(--calendar-content-scale, 1) * 0.94);
    }

    .calendar-sidebar {
        display: flex;
        flex: 0 0 clamp(360px, 34vw, 500px);
        flex-direction: column;
        gap: 12px;
        height: 100%;
        min-height: 0;
        container-type: inline-size;
        background: #000;
        border-left: 1px solid #292929;
    }

    .calendar-date-picker {
        display: flex;
        flex: 0 0 40%;
        flex-direction: column;
        gap: 14px;
        min-height: 0;
        padding: 16px 18px;
        overflow-y: auto;
        background: #1b1b1b;
        border-bottom-left-radius: 14px;
    }

    .calendar-view-toggle {
        display: grid;
        gap: 8px;
        margin-top: auto;
        padding-top: 20px;
    }

    .calendar-picker-months {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        gap: 14px;
        min-height: 0;
    }

.calendar-view-toggle-mobile {
    display: none;
}

    .calendar-view-toggle > span {
        color: #999;
        font-size: 1rem;
        font-weight: 700;
    }

    .calendar-view-toggle > div {
        display: grid;
        grid-template-columns: 1fr 1fr;
        overflow: hidden;
        border-radius: 24px;
        background: rgba(117, 201, 187, 0.6);
        box-shadow: 0 3px 9px rgba(0, 0, 0, 0.45);
    }

    .calendar-view-toggle button {
        min-width: 0;
        min-height: 48px;
        padding: 8px 12px;
        border: 0;
        border-radius: 0;
        background: rgba(117, 201, 187, 0.6);
        color: #050505;
        font-size: clamp(15px, 1.4cqw, 20px);
        font-weight: 700;
        white-space: nowrap;
        cursor: pointer;
        transition: background-color 120ms ease, box-shadow 120ms ease;
    }

    .calendar-view-toggle button[aria-pressed="true"] {
        background: #75c9bb;
        cursor: default;
    }

    .calendar-view-toggle button[aria-pressed="false"] {
        background: rgba(117, 201, 187, 0.45);
    }

    .calendar-view-toggle button[aria-pressed="false"]:hover {
        background: rgba(117, 201, 187, 0.75);
        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3);
    }

    .calendar-view-toggle button:first-child {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .calendar-view-toggle button:last-child {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .calendar-view-toggle button:focus-visible {
        position: relative;
        z-index: 1;
        outline: 2px solid #fff;
        outline-offset: -3px;
    }

    .calendar-picker-month h2 {
        margin: 0 0 8px;
        color: #fff;
        font-size: 1.45rem;
        font-weight: 700;
    }

    .calendar-picker-days {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 4px;
    }

    .calendar-picker-day {
        display: flex;
        min-width: 0;
        min-height: 48px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        padding: 3px 1px;
        border: 1px solid transparent;
        background: transparent;
        color: #888;
        cursor: pointer;
    }

    .calendar-picker-day strong {
        font-size: 1.1rem;
        font-weight: 700;
        line-height: 1.1;
        color: inherit;
    }

    .calendar-picker-day:hover,
    .calendar-picker-day:focus-visible,
    .calendar-picker-day[aria-current="date"] {
        border-color: transparent;
        color: #fff;
        outline: none;
    }

    .calendar-cart {
        position: relative;
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        min-height: 0;
        gap: 10px;
        margin: 0;
        padding: 14px 16px 18px;
        border: 0;
        border-top-left-radius: 14px;
        background: #2d2c31;
    }

    .calendar-cart > .calendar-cart-summary {
        flex: 0 0 auto;
        margin: 0;
    }

    #selection-summary {
        gap: 10px;
        font-size: 1.2rem;
        line-height: 1.3;
    }

    .calendar-cart .cart-note {
        margin-top: 3px;
        font-size: 0.95rem;
        line-height: 1.35;
        white-space: normal;
    }

    .calendar-selected-list {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        gap: 2px;
        min-height: 0;
        margin: 0;
        padding: 0 2px 0 0;
        overflow-y: auto;
        list-style: none;
        scrollbar-color: #555 transparent;
        scrollbar-width: thin;
    }

    .calendar-selected-list li {
        display: flex;
        flex: 0 0 auto;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        padding: 4px 0;
        color: #ddd;
        font-size: 0.95rem;
        line-height: 1.3;
    }

    .calendar-selected-list li strong {
        flex: 0 0 auto;
        color: #ddd;
        font-size: inherit;
    }

    .calendar-cart-actions {
        display: grid;
        grid-template-columns: minmax(84px, 0.9fr) minmax(104px, 1.15fr) minmax(
                122px,
                1.35fr
            );
        gap: 4px;
        margin-top: auto;
    }

    .calendar-cart-actions > button {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        min-height: 44px;
        height: 44px;
        gap: 4px;
        padding: 0 5px;
        border-radius: 2px;
        font-size: clamp(0.82rem, 2.8cqw, 0.95rem);
        white-space: nowrap;
    }

    .calendar-cart-actions > button strong {
        font-size: inherit;
    }

    .calendar-cart-actions .clear-selection {
        min-width: 0;
    }

    .calendar-track .time-grid {
        font-size: calc(1.05rem * var(--calendar-content-scale, 1));
    }

    .calendar-track .airtime-cell {
        min-height: 0;
        padding: 3px 4px;
    }

    .calendar-track .airtime-cell .tile-price,
    .calendar-track .reservation-label > span {
        font-size: calc(0.95rem * var(--calendar-content-scale, 1));
    }

    .calendar-track .airtime-cell .tile-owner,
    .calendar-track .reservation-label strong {
        font-size: calc(1.05rem * var(--calendar-content-scale, 1));
    }
}

@media (max-width: 760px) {
    .calendar-main-column,
    .calendar-sidebar {
        display: contents;
    }

    .calendar-date-picker,
    .calendar-selected-list {
        display: none;
    }

    .calendar-cart-actions {
        display: contents;
    }

    /* Keep the view toggle anchored below the mobile checkout controls. */
    .calendar-cart > .calendar-cart-summary {
        grid-row: 1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 4px 12px;
    }

    .calendar-cart > .calendar-cart-summary .cart-note {
        display: none;
    }

    .calendar-cart > .calendar-cart-summary .calendar-timezone {
        grid-column: 2;
        grid-row: 1;
        padding: 0;
        font-size: 12px;
    }

    .calendar-cart-actions > #clear-selection,
    .calendar-cart-actions > #cart-bid,
    .calendar-cart-actions > #cart-lock {
        grid-row: 2;
    }

    .calendar-cart-actions > #clear-selection {
        grid-column: 1;
    }

    .calendar-cart-actions > #cart-bid {
        grid-column: 2;
    }

    .calendar-cart-actions > #cart-lock {
        grid-column: 3;
    }

    .calendar-day-schedule .schedule-date-label {
        display: none;
    }

    .calendar-day-schedule .schedule-day h2 {
        justify-content: flex-end;
    }

    .calendar-view-toggle-mobile {
        display: grid;
        grid-column: 1 / -1;
        grid-row: 3;
        width: 100%;
        gap: 6px;
        margin: 0;
        padding: 0;
    }

    .calendar-cart:has(.calendar-view-toggle-mobile [data-calendar-view="schedule"][aria-pressed="true"])
        .calendar-cart-actions > button {
        display: none;
        pointer-events: none;
    }

    .calendar-view-toggle-mobile > span {
        color: #999;
        font-size: 13px;
        font-weight: 700;
    }

    .calendar-view-toggle-mobile > div {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        overflow: hidden;
        border-radius: 24px;
        background: rgba(117, 201, 187, 0.6);
        box-shadow: 0 3px 9px rgba(0, 0, 0, 0.45);
    }

    .calendar-view-toggle-mobile button {
        width: 100%;
        min-width: 0;
        min-height: 42px;
        padding: 6px 8px;
        border: 0;
        border-radius: 0;
        background: rgba(117, 201, 187, 0.45);
        color: #050505;
        font-size: clamp(13px, 3.7vw, 17px);
        font-weight: 700;
        white-space: nowrap;
        cursor: pointer;
        transition: background-color 120ms ease, box-shadow 120ms ease;
    }

    .calendar-view-toggle-mobile button[aria-pressed="true"] {
        background: #75c9bb;
        cursor: default;
    }

    .calendar-view-toggle-mobile button[aria-pressed="false"]:hover {
        background: rgba(117, 201, 187, 0.75);
        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3);
    }
}