@layer base, layout, components;

@layer base {
    *, *::before, *::after {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        min-block-size: 100dvh;
        container-type: inline-size;
        background: var(--color-surface);
        color: var(--color-text);
        font: var(--font-size-body) / 1.5 var(--font-body);
    }

    h1 {
        font-size: var(--font-size-h1);
        margin-block: 0 var(--spacing-md);
    }

    a {
        color: var(--color-primary);
    }

    :focus-visible {
        outline: 3px solid var(--color-focus);
        outline-offset: 2px;
    }

    .visually-hidden {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@layer layout {
    body {
        display: grid;
        grid-template-areas: "header" "main" "footer";
        grid-template-rows: auto 1fr auto;
    }

    header {
        grid-area: header;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
        background: var(--color-surface-raised);
        border-block-end: 1px solid var(--color-border);
    }

    main {
        grid-area: main;
        padding: var(--spacing-md);
        inline-size: min(100%, 72rem);
        margin-inline: auto;
    }

    footer {
        grid-area: footer;
        padding: var(--spacing-md);
        color: var(--color-text-muted);
    }

    nav ul {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--spacing-md);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .skip {
        position: absolute;
        inset-inline-start: var(--spacing-sm);
        inset-block-start: -4rem;
        padding: var(--spacing-sm);
        background: var(--color-primary);
        color: var(--color-primary-text);
    }

    .skip:focus {
        inset-block-start: var(--spacing-sm);
    }
}

@layer components {
    button, input, select {
        font: inherit;
        color: inherit;
    }

    button {
        padding: var(--spacing-sm) var(--spacing-md);
        border: 1px solid var(--color-primary);
        border-radius: var(--radius);
        background: var(--color-primary);
        color: var(--color-primary-text);
        cursor: pointer;
    }

    button.secondary, nav button {
        background: transparent;
        color: var(--color-primary);
    }

    button:disabled {
        cursor: default;
    }

    input, select {
        padding: var(--spacing-sm);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        background: var(--color-surface-raised);
    }

    input:user-invalid {
        border-color: var(--color-error);
    }

    form {
        display: grid;
        gap: var(--spacing-md);
        max-inline-size: 28rem;
    }

    label {
        display: grid;
        gap: var(--spacing-xs);
    }

    label.check {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }

    .error {
        color: var(--color-error);
    }

    .notice {
        color: var(--color-notice);
    }

    .toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: end;
        gap: var(--spacing-sm);
        margin-block-end: var(--spacing-md);
    }

    .actions {
        display: flex;
        gap: var(--spacing-sm);
    }

    table {
        border-collapse: collapse;
        inline-size: 100%;
    }

    th, td {
        padding: var(--spacing-xs);
        border: 1px solid var(--color-border);
        text-align: start;
    }

    td .slot {
        inline-size: 100%;
        min-block-size: 2.75rem;
        border-color: var(--color-border);
        color: var(--color-text);
    }

    .slot.free {
        background: var(--color-free);
        border-color: var(--color-free-border);
    }

    .slot.booked {
        background: var(--color-booked);
    }

    .slot.mine {
        background: var(--color-mine);
        font-weight: 600;
    }

    .slot.unavailable, .slot.blocked {
        background: var(--color-unavailable);
        color: var(--color-text-muted);
    }

    dialog {
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        background: var(--color-surface-raised);
        color: var(--color-text);
        padding: var(--spacing-lg);
    }

    dialog::backdrop {
        background: oklch(0% 0 0 / 0.5);
    }

    @container (inline-size < 40rem) {
        .slot {
            font-size: 0.8rem;
            padding-inline: var(--spacing-xs);
        }
    }

    @media (prefers-reduced-motion: no-preference) {
        button {
            transition: background-color 0.15s;
        }
    }
}