/*
 * Bowls Buddy member pages. One stylesheet, no build step (PLAN.md section 4), drawn to match the admin
 * panel so both halves look like one app: Filament's Inter font, its slate greys, the shared emerald
 * (App\Support\Theme::PRIMARY; ThemeTest keeps the two in step), the same topbar, sidebar and phone drawer.
 * Booking colours follow the plan: own bookings green, closed greens red, events purple.
 * Dark mode follows the panel's theme choice through the .dark class on <html>.
 */

:root {
    --primary-50: #ecfdf5;
    --primary-100: #d1fae5;
    --primary-200: #a7f3d0;
    --primary-300: #6ee7b7;
    --primary-400: #34d399;
    --primary-500: #05835f;
    --primary-600: #047857;
    --primary-700: #036b4e;
    --primary-800: #065f46;
    --primary-900: #064e3b;
    --primary-950: #022c22;

    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-700: #334155;
    --gray-900: #0f172a;
    --gray-950: #020617;

    --red-50: #fef2f2;
    --red-200: #fecaca;
    --red-400: #f87171;
    --red-500: #ef4444;
    --red-600: #dc2626;
    --red-700: #b91c1c;

    --violet-50: #f5f3ff;
    --violet-100: #ede9fe;
    --violet-200: #ddd6fe;
    --violet-800: #5b21b6;

    --bg: var(--gray-50);
    --surface: #fff;
    --subtle: var(--gray-100);
    --text: var(--gray-950);
    --text-soft: var(--gray-700);
    --muted: var(--gray-500);
    --line: var(--gray-200);
    --ring: rgb(2 6 23 / 0.07);
    --input-line: var(--gray-300);
    --accent: var(--primary-600);
    --danger-ink: var(--red-600);
    --link: var(--accent);
    --shadow: 0 1px 2px rgb(2 6 23 / 0.05);

    /* Green calendar and overview states */
    --free-bg: var(--primary-50);
    --free-line: var(--primary-200);
    --free-ink: var(--primary-700);
    --booked-bg: var(--gray-200);
    --booked-ink: var(--gray-700);
    --own-bg: var(--primary-600);
    --event-bg: var(--violet-100);
    --event-line: var(--violet-200);
    --event-ink: var(--violet-800);
    --closed-bg: var(--red-50);
    --closed-line: var(--red-200);
    --closed-ink: var(--red-700);
    --notice-ink: var(--primary-900);

    color-scheme: light;
}

.dark {
    --bg: var(--gray-950);
    --surface: var(--gray-900);
    --subtle: rgb(255 255 255 / 0.06);
    --text: #fff;
    --text-soft: var(--gray-300);
    --muted: var(--gray-400);
    --line: rgb(255 255 255 / 0.1);
    --ring: rgb(255 255 255 / 0.1);
    --input-line: rgb(255 255 255 / 0.2);
    --accent: var(--primary-400);
    --danger-ink: var(--red-400);
    --shadow: none;

    --free-bg: rgb(52 211 153 / 0.1);
    --free-line: rgb(52 211 153 / 0.3);
    --free-ink: var(--primary-300);
    --booked-bg: rgb(255 255 255 / 0.12);
    --booked-ink: var(--gray-200);
    --event-bg: rgb(139 92 246 / 0.22);
    --event-line: rgb(167 139 250 / 0.4);
    --event-ink: var(--violet-200);
    --closed-bg: rgb(239 68 68 / 0.12);
    --closed-line: rgb(248 113 113 / 0.35);
    --closed-ink: #fca5a5;
    --notice-ink: var(--primary-200);

    color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: "Inter Variable", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--link); font-weight: 500; text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; }
.icon { width: 1.5rem; height: 1.5rem; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
strong { font-weight: 600; }

/* Topbar, as the panel's: white, 4rem high, brand on the left, avatar on the right */
.topbar {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 0.75rem;
    height: 4rem; padding: 0 1rem;
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--ring), var(--shadow);
}
.brand { display: block; min-width: 0; color: var(--text); text-decoration: none; }
.brand:hover { text-decoration: none; }
.topbar-end { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; flex: none; }
.avatar { display: block; border-radius: 9999px; }
.avatar img { display: block; width: 2.25rem; height: 2.25rem; border-radius: 9999px; }

.nav-toggle, .nav-backdrop, .nav-button, .sidebar-head { display: none; }
.nav-button, .nav-close {
    align-items: center; justify-content: center; flex: none;
    width: 2.5rem; height: 2.5rem; border-radius: 0.5rem;
    color: var(--muted); cursor: pointer; user-select: none;
}
.nav-button:hover, .nav-close:hover { background: var(--subtle); color: var(--text); }

/* Sidebar menu, as the panel's: icon and label, the current page tinted */
.layout { display: flex; align-items: flex-start; }
.sidebar {
    flex: none; width: 20rem;
    position: sticky; top: 4rem; height: calc(100vh - 4rem); overflow-y: auto;
}
nav.site { padding: 2rem 2rem 2rem 1rem; }
nav.site ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
nav.site .nav-end { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
nav.site form { margin: 0; }
nav.site a, nav.site button {
    display: flex; align-items: center; justify-content: flex-start; gap: 0.75rem;
    width: 100%; min-height: 2.5rem; margin: 0; padding: 0.5rem;
    border: 0; border-radius: 0.5rem; box-shadow: none; background: none;
    font: inherit; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; text-align: left;
    color: var(--text-soft); text-decoration: none; cursor: pointer;
}
nav.site .icon { color: var(--gray-400); }
nav.site a:hover, nav.site button:hover { background: var(--subtle); color: var(--text-soft); text-decoration: none; }
nav.site a.active, nav.site a.active .icon { color: var(--accent); }
nav.site a.active { background: var(--subtle); }
.dark nav.site .icon { color: var(--gray-500); }

main { flex: 1; min-width: 0; max-width: 64rem; margin: 0 auto; padding: 2rem 2rem 3rem; }
@media (min-width: 1024px) {
    .topbar { padding-left: 1.75rem; }
}
main.narrow { max-width: 40rem; }

/* Page heading, as the panel's */
.page-header { margin-bottom: 1.5rem; }
h1 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; letter-spacing: -0.025em; margin: 0; }
.page-header p { margin: 0.375rem 0 0; color: var(--muted); }
.page-header .actions { margin-top: 1rem; }
h2 { font-size: 1rem; line-height: 1.5rem; font-weight: 600; margin: 0 0 0.25rem; }
h2 + .muted { margin-top: 0; }

/* Cards, as the panel's sections */
.card {
    background: var(--surface); border-radius: 0.75rem; padding: 1.5rem; margin-bottom: 1.5rem;
    box-shadow: 0 0 0 1px var(--ring), var(--shadow);
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card.danger-zone { box-shadow: 0 0 0 1px var(--closed-line), var(--shadow); }
.note { background: var(--subtle); border-radius: 0.625rem; padding: 1rem; margin-top: 1.25rem; font-size: 0.875rem; color: var(--text-soft); }
.note > :first-child { margin-top: 0; }
.note > :last-child { margin-bottom: 0; }

/* Forms */
main label { display: block; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; margin: 1.125rem 0 0.375rem; }
form > label:first-of-type { margin-top: 0; }
input[type=email], input[type=password], input[type=text], input[type=tel], select, textarea {
    display: block; width: 100%; min-height: 2.75rem; padding: 0.5rem 0.75rem;
    font: inherit; font-size: 1rem; color: var(--text);
    background-color: var(--surface); border: 1px solid var(--input-line); border-radius: 0.5rem;
    box-shadow: var(--shadow);
    transition: border-color 0.15s, box-shadow 0.15s;
}
input::placeholder { color: var(--gray-400); }
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--primary-600); box-shadow: 0 0 0 1px var(--primary-600);
}
select {
    appearance: none; -webkit-appearance: none; padding-right: 2.5rem; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.625rem center; background-size: 1.25rem;
}
.check { display: flex; gap: 0.625rem; align-items: flex-start; margin-top: 1.125rem; font-weight: 400; color: var(--text-soft); }
.check input { width: 1.125rem; height: 1.125rem; margin: 0.0625rem 0 0; flex: none; accent-color: var(--primary-600); }

/* Buttons, as the panel's: primary emerald, quiet grey, red for danger */
button, .button {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    min-height: 2.75rem; margin-top: 1.5rem; padding: 0.625rem 1.125rem;
    font: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1.25rem; text-align: center;
    color: #fff; background: var(--primary-600); border: 0; border-radius: 0.5rem;
    box-shadow: var(--shadow); cursor: pointer; text-decoration: none;
    transition: background-color 0.15s;
}
button:hover, .button:hover { background: var(--primary-500); color: #fff; text-decoration: none; }
button .icon, .button .icon { width: 1.25rem; height: 1.25rem; }
button.full, .button.full { width: 100%; }
button.subtle, .button.subtle { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--input-line) inset, var(--shadow); }
button.subtle:hover, .button.subtle:hover { background: var(--subtle); color: var(--text); }
button.danger, .button.danger { background: var(--red-600); }
button.danger:hover, .button.danger:hover { background: var(--red-500); }
button.small, .button.small { min-height: 2.25rem; margin-top: 0; padding: 0.375rem 0.75rem; font-size: 0.875rem; }
button.subtle.warn, .button.subtle.warn { color: var(--danger-ink); }
.button.whatsapp { background: #15803d; }
.button.whatsapp:hover { background: #166534; }
.dark .button.subtle, .dark button.subtle { background: rgb(255 255 255 / 0.05); }
.dark .button.subtle:hover, .dark button.subtle:hover { background: rgb(255 255 255 / 0.1); }

.error { color: var(--danger-ink); font-size: 0.875rem; margin-top: 0.375rem; }
.muted { color: var(--muted); font-size: 0.875rem; }
.links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 1.25rem 0 0; font-size: 0.875rem; }

/* Notices */
.flash {
    display: flex; align-items: flex-start; gap: 0.75rem;
    padding: 0.875rem 1rem; margin-bottom: 1.5rem; border-radius: 0.75rem;
    font-size: 0.875rem; line-height: 1.25rem;
    background: var(--free-bg); color: var(--notice-ink); box-shadow: inset 0 0 0 1px var(--free-line);
}
.flash .icon { width: 1.25rem; height: 1.25rem; color: var(--accent); }
.flash.warning { background: var(--closed-bg); color: var(--closed-ink); box-shadow: inset 0 0 0 1px var(--closed-line); }
.flash.warning .icon { color: var(--danger-ink); }
.flash a { color: inherit; text-decoration: underline; }

/* A summary of a slot: date, time, rink, direction */
.summary { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; gap: 0.625rem; }
.summary li { display: flex; align-items: center; gap: 0.75rem; color: var(--text-soft); }
.summary .icon { width: 1.25rem; height: 1.25rem; color: var(--muted); }
.summary strong { color: var(--text); }
.summary .arrow { width: 1.25rem; height: 1.25rem; margin: 0; color: var(--muted); }

.success-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem; margin-bottom: 1rem; border-radius: 9999px;
    background: var(--primary-100); color: var(--accent);
}
.dark .success-mark { background: rgb(52 211 153 / 0.15); }

/* Greens overview: a row per playing day, a tile per green */
.overview-day { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.5rem 1rem; align-items: center; padding: 0.875rem 0; border-bottom: 1px solid var(--line); }
.overview-day:first-child { padding-top: 0; }
.overview-day:last-child { border-bottom: 0; padding-bottom: 0; }
.overview-day .date { font-weight: 600; font-size: 0.875rem; line-height: 1.25rem; }
.overview-day .date .when { display: block; color: var(--accent); font-size: 0.75rem; font-weight: 600; }
.overview-day .greens { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.625rem; }
.overview-day .green-cell { min-width: 0; }
.green-pill {
    display: flex; flex-direction: column; gap: 0.125rem; height: 100%;
    padding: 0.625rem 0.75rem; border-radius: 0.625rem;
    font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; color: var(--text); text-decoration: none;
    background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
    transition: box-shadow 0.15s, background-color 0.15s;
}
a.green-pill:hover { text-decoration: none; box-shadow: inset 0 0 0 1px var(--primary-400), 0 2px 6px rgb(2 6 23 / 0.06); }
.green-pill .name { font-weight: 600; }
.green-pill .slots { font-weight: 600; color: var(--free-ink); }
.green-pill .meter { display: block; height: 0.3125rem; margin: 0.25rem 0 0.125rem; border-radius: 9999px; background: var(--subtle); overflow: hidden; }
.green-pill .meter > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.green-pill .direction { display: flex; align-items: center; gap: 0.25rem; color: var(--muted); font-size: 0.75rem; }
.green-pill .direction .arrow { width: 1rem; height: 1rem; margin: 0; }
.green-pill .events { display: block; color: var(--event-ink); font-size: 0.75rem; font-weight: 500; }
.green-pill.closed { background: var(--closed-bg); box-shadow: inset 0 0 0 1px var(--closed-line); }
.green-pill.closed .slots { color: var(--closed-ink); }
.green-pill.event { background: var(--violet-50); box-shadow: inset 0 0 0 1px var(--event-line); }
.dark .green-pill.event { background: rgb(139 92 246 / 0.1); }
.green-pill.full { background: var(--subtle); box-shadow: none; }
.green-pill.full .name, .green-pill.full .slots { color: var(--muted); }
.green-pill.opens .slots { color: var(--muted); font-weight: 500; }

.direction-note { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.arrow { width: 1.25rem; height: 1.25rem; color: var(--accent); vertical-align: -0.3rem; margin-right: 0.125rem; flex: none; }
.arrow-ns { transform: rotate(90deg); }

/* Green calendar: day and green switches */
.calendar-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.calendar-nav .prev { grid-column: 1; justify-self: start; }
.calendar-nav .tabs { grid-column: 2; }
.calendar-nav .next { grid-column: 3; justify-self: end; }
.calendar-nav .button { margin-top: 0; }
.calendar-nav .button .icon { width: 1rem; height: 1rem; }
.tabs { display: inline-flex; gap: 0.25rem; padding: 0.25rem; border-radius: 0.625rem; background: var(--surface); box-shadow: 0 0 0 1px var(--ring), var(--shadow); }
.tabs a { padding: 0.375rem 0.875rem; border-radius: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--text-soft); white-space: nowrap; text-align: center; }
.tabs a:hover { background: var(--subtle); text-decoration: none; }
.tabs a.active { background: var(--subtle); color: var(--accent); }

/* The Secretary's controls on a green's calendar: they wrap onto more rows on a phone */
.secretary-actions {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    margin-bottom: 1rem; padding: 0.75rem; border-radius: 0.75rem;
    background: var(--surface); box-shadow: 0 0 0 1px var(--ring), var(--shadow);
}
.secretary-actions .label { display: flex; align-items: center; gap: 0.375rem; margin-right: auto; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.secretary-actions .label .icon { width: 1rem; height: 1rem; }
.secretary-actions form { margin: 0; }
.secretary-actions .button, .secretary-actions button { margin-top: 0; white-space: nowrap; }
.direction-form { display: flex; gap: 0.375rem; align-items: center; }
.direction-form select { width: auto; min-height: 2.25rem; padding-top: 0.25rem; padding-bottom: 0.25rem; font-size: 0.875rem; }

/* The Secretary's list of members to message when their bookings can't go ahead */
.affected-list { list-style: none; margin: 1rem 0 0; padding: 0; }
.affected-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; padding: 0.75rem 0; border-top: 1px solid var(--line); }
.affected-list .who { min-width: 0; font-size: 0.875rem; }
.affected-list .who strong { font-size: 1rem; }
.affected-list .button, .affected-list form { flex: none; margin: 0; }
.affected-list .told-mark { display: none; align-items: center; gap: 0.125rem; margin-left: 0.375rem; padding: 0 0.375rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; background: var(--subtle); color: var(--muted); }
.affected-list .told-mark .icon { width: 0.875rem; height: 0.875rem; }
.affected-list li.told .told-mark { display: inline-flex; }
.affected-list li.told .button.whatsapp { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--input-line) inset; }

/* Green calendar: a grid of rinks and times */
.calendar-key { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; margin: 0 0 0.875rem; font-size: 0.8125rem; color: var(--muted); }
.calendar-key span { display: inline-flex; align-items: center; gap: 0.375rem; }
.calendar-key .key { display: inline-block; width: 0.875rem; height: 0.875rem; border-radius: 0.25rem; }
.calendar-scroll { overflow-x: auto; margin: 0 -0.25rem; }
.calendar { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0.25rem; font-size: 0.8125rem; line-height: 1.15rem; }
.calendar th { font-weight: 600; color: var(--muted); padding: 0.25rem; text-align: center; }
.calendar thead th { font-size: 0.75rem; }
.calendar th.hour { width: 4.75rem; text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-soft); position: sticky; left: 0; z-index: 1; background: var(--surface); }
.calendar th.hour .until { display: block; font-weight: 400; color: var(--muted); }
.calendar td { padding: 0; height: 3rem; }
.calendar a.slot-free, .calendar .slot-busy {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; min-height: 2.75rem; padding: 0.25rem 0.375rem; border-radius: 0.5rem;
    text-align: center; overflow-wrap: anywhere;
}
.calendar a.slot-free, .key-free { background: var(--free-bg); box-shadow: inset 0 0 0 1px var(--free-line); color: var(--free-ink); font-weight: 600; }
.calendar a.slot-free:hover { background: var(--primary-100); box-shadow: inset 0 0 0 1px var(--primary-400); text-decoration: none; }
.dark .calendar a.slot-free:hover { background: rgb(52 211 153 / 0.2); }
.calendar .slot-busy, .key-booked { background: var(--booked-bg); color: var(--booked-ink); }
.calendar .slot-busy .player { display: block; }
.calendar .slot-own, .key-own { background: var(--own-bg); color: #fff; box-shadow: none; }
.calendar .slot-event, .key-event { background: var(--event-bg); box-shadow: inset 0 0 0 1px var(--event-line); color: var(--event-ink); font-weight: 500; }
.calendar .slot-closed { background: repeating-linear-gradient(45deg, var(--booked-bg) 0 4px, var(--subtle) 4px 8px); color: var(--muted); }
.calendar .slot-past { background: transparent; color: var(--gray-300); }
.dark .calendar .slot-past { color: var(--gray-700); }

/* My bookings */
.booking-row { display: flex; align-items: center; gap: 1rem; padding: 0.875rem 0; border-bottom: 1px solid var(--line); }
.booking-row:first-child { padding-top: 0; }
.booking-row:last-child { border-bottom: 0; padding-bottom: 0; }
.booking-row .day {
    display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none;
    width: 3.25rem; height: 3.25rem; border-radius: 0.625rem;
    background: var(--free-bg); color: var(--free-ink); line-height: 1.1;
}
.booking-row .day b { font-size: 1.125rem; font-weight: 700; }
.booking-row .day small { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.booking-row .details { flex: 1; min-width: 0; }
.booking-row .when { font-weight: 600; }
.booking-row form { margin: 0; flex: none; }
.booking-row button { margin-top: 0; }
.booking-row .cancelled { color: var(--muted); }
.booking-row .cancelled .when { text-decoration: line-through; font-weight: 500; }
.booking-row.is-cancelled .day { background: var(--subtle); color: var(--muted); }

/* Texts written by the Secretary (Info, Help, rules) */
.prose { color: var(--text-soft); }
.prose h1, .prose h2, .prose h3 { color: var(--text); margin: 1.5rem 0 0.5rem; }
.prose h1 { font-size: 1.25rem; line-height: 1.75rem; }
.prose h3 { font-size: 0.9375rem; }
.prose p, .prose ul, .prose ol { margin: 0 0 1rem; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }

.empty { text-align: center; padding: 1.5rem 0.5rem; }
.empty .icon { width: 2.5rem; height: 2.5rem; color: var(--gray-400); margin: 0 auto 0.5rem; display: block; }

/* Phones and tablets: the menu folds into a drawer behind the menu button (CSS only, no JavaScript) */
@media (max-width: 1023px) {
    .nav-button { display: inline-flex; margin-left: -0.375rem; }
    .sidebar {
        position: fixed; top: 0; bottom: 0; left: 0; z-index: 50;
        width: min(20rem, 85vw); height: auto;
        background: var(--surface); box-shadow: 0 0 0 1px var(--ring), 0 10px 30px rgb(2 6 23 / 0.2);
        transform: translateX(-105%); transition: transform 0.2s ease-out, visibility 0.2s;
        visibility: hidden;
    }
    .sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; height: 4rem; padding: 0 0.75rem 0 1rem; box-shadow: 0 1px 0 var(--line); }
    .nav-close { display: inline-flex; }
    nav.site { padding: 1rem; }
    nav.site a, nav.site button { min-height: 2.75rem; font-size: 1rem; }
    .nav-toggle:checked ~ .layout .sidebar { transform: none; visibility: visible; }
    .nav-toggle:checked ~ .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 40; background: rgb(2 6 23 / 0.5); }
    body:has(.nav-toggle:checked) { overflow: hidden; }
    main { padding: 1.5rem 1rem 2.5rem; }
}

@media (max-width: 640px) {
    h1 { font-size: 1.5rem; line-height: 2rem; }
    .page-header { margin-bottom: 1.25rem; }
    .card { padding: 1rem; margin-bottom: 1rem; }
    .topbar .brand img.logo { height: 2rem !important; width: 2rem !important; }
    .overview-day { grid-template-columns: 1fr; }
    .overview-day .date { display: flex; align-items: baseline; gap: 0.5rem; }
    .overview-day .date .when { display: inline; }
    .overview-day .greens { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.5rem; }

    /* The calendar shows colours only: green free, grey booked, solid green yours, purple event */
    .calendar-nav { grid-template-columns: 1fr 1fr; }
    .calendar-nav .tabs { grid-column: 1 / -1; grid-row: 1; display: flex; }
    .calendar-nav .tabs a { flex: 1; }
    .calendar-nav .prev { grid-column: 1; grid-row: 2; }
    .calendar-nav .next { grid-column: 2; grid-row: 2; }
    .calendar-nav .button { width: 100%; }
    .secretary-actions { padding: 0.625rem; }
    .secretary-actions .label { flex-basis: 100%; }
    .secretary-actions > form:first-of-type { flex-basis: 100%; }
    .secretary-actions > form:first-of-type button { width: 100%; }
    .secretary-actions .direction-form { flex: 1 1 auto; min-width: 0; }
    .secretary-actions .direction-form select { flex: 1 1 auto; min-width: 0; }
    .calendar { border-spacing: 0.1875rem; }
    .calendar th.hour { width: 3.25rem; padding-left: 0; }
    .calendar td { height: 2.5rem; }
    .calendar .slot-text {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap;
    }
    .calendar a.slot-free, .calendar .slot-busy { min-height: 2.25rem; padding: 0; }
    .calendar .slot-own { box-shadow: inset 0 0 0 2px var(--primary-800); }
    .booking-row { gap: 0.75rem; }
    .affected-list li { flex-wrap: wrap; }
    .affected-list .button, .affected-list form, .affected-list form button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}