/* Styles for Schedule component */
@layer components {
    .schedule {
        /*
         * The table or the day tabs is a question about how much room the
         * schedule itself has, not about how wide the screen is - the same
         * component sits in a full-width band on a laptop and in a narrow
         * column on a large monitor. A container query asks the right question.
         */
        container-type: inline-size;
        container-name: schedule;

        /* Every element that is colour-coded reads its colour from here, so the
           mapping semantic-name -> theme-aware colour lives in exactly one place. */
        & [data-color="gold"] { --slot-color: var(--color-discipline-gold); }
        & [data-color="steel"] { --slot-color: var(--color-discipline-steel); }
        & [data-color="chalk"] { --slot-color: var(--color-discipline-chalk); }
        & [data-color="concrete"] { --slot-color: var(--color-discipline-concrete); }

        & .schedule__title {
            font-size: var(--size-step-1);
            margin-block-end: var(--space-m);
            /* The anchor lands here, so it needs to clear the sticky header. */
            scroll-margin-block-start: calc(var(--header-height) + var(--space-m));
        }

        & .schedule__table-wrap {
            display: none;
        }

        & .schedule__tabs {
            display: block;
        }

        & .schedule__tablist {
            display: flex;
            gap: var(--space-3xs);
            margin-block-end: var(--space-s);
            border-block-end: 1px solid var(--color-border);
        }

        & .schedule__tab {
            flex: 1;
            padding-block: var(--space-2xs);
            border: none;
            border-block-end: 2px solid transparent;
            margin-block-end: -1px;
            background: none;
            color: var(--color-text-muted);
            font-family: var(--font-body);
            font-size: var(--size-step--1);
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            cursor: pointer;
            transition:
                color var(--duration-fast) var(--ease-jab),
                border-color var(--duration-fast) var(--ease-jab);

            & abbr {
                text-decoration: none;
            }

            &:hover {
                color: var(--color-text);
            }

            /* Exception: the open day. */
            &[aria-selected="true"] {
                color: var(--color-accent);
                border-block-end-color: var(--color-accent);
            }
        }

        & .schedule__panel[hidden] {
            display: none;
        }

        & .schedule__day-list {
            display: flex;
            flex-direction: column;
            gap: var(--space-2xs);
            padding: 0;
            list-style: none;
        }

        & .schedule__day-item {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 0 var(--space-s);
            align-items: baseline;
            padding: var(--space-xs);
            padding-inline-start: calc(var(--space-xs) - 3px);
            background-color: var(--color-surface-raised);
            border-inline-start: 3px solid var(--slot-color, var(--color-border-strong));
        }

        & .schedule__day-time {
            grid-row: span 2;
            font-family: var(--font-mono);
            font-size: var(--size-step--1);
            font-variant-numeric: tabular-nums;
            color: var(--color-text-muted);
        }

        & .schedule__group {
            font-weight: 600;
            line-height: 1.2;
        }

        & .schedule__discipline {
            font-size: var(--size-step--1);
            color: var(--color-text-muted);
        }

        /* Exception: groups a complete beginner can walk into. */
        & [data-beginner="true"] .schedule__group::after,
        & .schedule__slot[data-beginner="true"] .schedule__group::after {
            content: '';
            display: inline-block;
            inline-size: 0.4rem;
            block-size: 0.4rem;
            margin-inline-start: 0.4em;
            translate: 0 -0.15em;
            border-radius: 50%;
            background-color: var(--color-accent);
        }

        & .schedule__legend {
            margin-block-start: var(--space-m);
        }

        & .schedule__legend-title {
            font-family: var(--font-body);
            font-size: var(--size-step--1);
            font-weight: 600;
            letter-spacing: 0.22em;
            color: var(--color-text-muted);
            margin-block-end: var(--space-2xs);
        }

        & .schedule__legend-list {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-2xs) var(--space-s);
            padding: 0;
            list-style: none;
            font-size: var(--size-step--1);
        }

        & .schedule__legend-item {
            display: flex;
            align-items: center;
            gap: var(--space-3xs);
        }

        & .schedule__legend-swatch {
            inline-size: 0.75rem;
            block-size: 0.75rem;
            background-color: var(--slot-color, transparent);
        }

        & .schedule__legend-item[data-beginner="true"] .schedule__legend-swatch {
            border-radius: 50%;
            inline-size: 0.5rem;
            block-size: 0.5rem;
            background-color: var(--color-accent);
        }

        & .schedule__note {
            margin-block-start: var(--space-m);
            font-size: var(--size-step--1);
            line-height: 1.7;
            color: var(--color-text-muted);
        }
    }

    /* Where the band is wide but the week still shows as tabs, the day list
       must not sprawl across the whole width - a row holding "16:00 – 17:30
       Deti" does not need 800px. */
    @container schedule (width >= 34rem) {
        .schedule .schedule__tabs {
            max-inline-size: 44rem;
        }
    }

    /*
     * 56rem is the measured floor: the time column plus seven weekday columns
     * wide enough that the longest group name stays on one line. Below it the
     * day tabs are the honest presentation; above it the whole week fits in a
     * table and the tabs are redundant.
     */
    @container schedule (width >= 56rem) {
        .schedule {
            & .schedule__table-wrap {
                display: block;
            }

            & .schedule__tabs {
                display: none;
            }

            & .schedule__table {
                inline-size: 100%;
                border-collapse: collapse;
                table-layout: fixed;
            }

            & .schedule__time-head,
            & .schedule__day-head {
                padding-block: var(--space-2xs);
                border-block-end: 1px solid var(--color-border-strong);
                font-family: var(--font-body);
                font-size: var(--size-step--1);
                font-weight: 600;
                letter-spacing: 0.14em;
                text-transform: uppercase;
                color: var(--color-text-muted);
                text-align: center;

                & abbr {
                    text-decoration: none;
                }
            }

            & .schedule__time-head {
                /* Fixed so the seven day columns share what is left equally - a
                   group name must never be the thing that decides how wide a
                   weekday is. Sized for one stacked time plus its gutter, with
                   slack for a wider fallback mono face. */
                inline-size: 5.75rem;
                text-align: start;
            }

            & .schedule__time {
                display: flex;
                flex-direction: column;
                align-items: start;
                justify-content: center;
                padding-block: var(--space-2xs);
                padding-inline-end: var(--space-s);
                font-family: var(--font-mono);
                font-size: var(--size-step--1);
                font-weight: 400;
                font-variant-numeric: tabular-nums;
                line-height: 1.35;
                text-align: start;
                color: var(--color-text-muted);
            }

            /* The end time reads as the quieter half of the range. */
            & .schedule__time-part + .schedule__time-part {
                color: color-mix(in srgb, var(--color-text-muted) 70%, transparent);
            }

            & .schedule__cell {
                padding: 3px;
                text-align: center;
                vertical-align: stretch;
            }

            & .schedule__slot {
                display: flex;
                flex-direction: column;
                gap: 0.1em;
                block-size: 100%;
                padding: var(--space-2xs) var(--space-3xs);
                background-color: color-mix(in srgb, var(--slot-color) 14%, var(--color-surface-raised));
                border-block-start: 2px solid var(--slot-color);
                /* Fixed, not fluid: these cells are the narrowest text on the
                   page and must stay inside their column at every width. */
                font-size: 0.82rem;
                line-height: 1.25;
                overflow-wrap: break-word;
            }

            & .schedule__slot .schedule__discipline {
                font-size: 0.88em;
            }

            & .schedule__empty {
                color: var(--color-border-strong);
            }

            & tbody tr + tr .schedule__time,
            & tbody tr + tr .schedule__cell {
                border-block-start: 1px solid var(--color-border);
            }
        }
    }
}