form.inline { display: inline; margin: 0; }
form.inline button { margin: 0; padding: 0.25rem 0.75rem; }
article.message { padding: 0.75rem 1rem; margin-bottom: 1rem; }
article.message.error { border-left: 4px solid var(--pico-del-color); }
article.message.success { border-left: 4px solid var(--pico-ins-color); }
.narrow { max-width: 28rem; margin-inline: auto; }
.errorlist { color: var(--pico-del-color); list-style: none; padding: 0; margin: 0 0 0.5rem; font-size: 0.875rem; }
.helptext { color: var(--pico-muted-color); font-size: 0.8rem; margin: -0.5rem 0 0.75rem; display: block; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stats article { margin: 0; padding: 1rem; }
.stats .value { font-size: 1.6rem; font-weight: 600; display: block; }
.stats .label { color: var(--pico-muted-color); font-size: 0.85rem; }
.owed { color: var(--pico-del-color); }
.muted { color: var(--pico-muted-color); font-size: 0.875rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.actions a[role=button] { margin: 0; }
.tag { display: inline-block; font-size: 0.75rem; padding: 0.05rem 0.5rem; border-radius: 1rem; border: 1px solid var(--pico-muted-border-color); color: var(--pico-muted-color); }
.swatch { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 50%; vertical-align: middle; }
.timeline td { vertical-align: top; }
.page-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.page-head h1 { margin: 0; }
form.danger button { background: none; border: none; color: var(--pico-del-color); padding: 0; text-decoration: underline; }
fieldset div > label { display: inline-flex; gap: 0.4rem; align-items: center; margin-right: 1rem; }
@media (max-width: 600px) { .hide-sm { display: none; } }
nav button { white-space: nowrap; }
#calendar { margin-bottom: 0.75rem; font-size: 0.8rem; --cal-text: var(--pico-color); --fc-today-bg-color: rgba(255, 220, 40, 0.12); --fc-border-color: var(--pico-muted-border-color); --fc-page-bg-color: var(--pico-background-color); --fc-neutral-bg-color: var(--pico-card-sectioning-background-color); --fc-list-event-hover-bg-color: var(--pico-card-sectioning-background-color); }
#calendar a { text-decoration: none; }
#calendar .fc-toolbar { gap: 0.5rem; flex-wrap: wrap; margin: 0.75rem 0 0.5rem; }
#calendar .fc-toolbar-title { font-size: 1.1rem; }
#calendar .fc-button { margin: 0; padding: 0.25rem 0.6rem; font-size: 0.8rem; width: auto; line-height: 1.4; }
#calendar .fc-button kbd { display: none; }
#calendar .fc-button-primary { background: transparent; border-color: var(--pico-muted-border-color); color: var(--cal-text); }
#calendar .fc-button-primary:hover { background: var(--pico-card-sectioning-background-color); color: var(--cal-text); }
#calendar .fc-button-primary:disabled { opacity: 0.5; }
#calendar .fc-button-primary:not(:disabled).fc-button-active { background: var(--pico-primary-background); border-color: var(--pico-primary-border); color: var(--pico-primary-inverse); }
#calendar .fc-timegrid-slot { height: 1.1em; }
#calendar .fc-col-header-cell-cushion, #calendar .fc-daygrid-day-number { padding: 0.15rem 0.3rem; }
#calendar .fc-daygrid-day-frame { min-height: 4.5rem; }
#calendar .fc-list-day-cushion { padding: 0.25rem 0.75rem; }
#calendar .fc-list-event td { padding: 0.3rem 0.75rem; }
#calendar table { margin: 0; }
#calendar th, #calendar td { padding: 0; border-bottom-width: 0; }
#calendar .fc-list-table td, #calendar .fc-list-table th { padding: 0.3rem 0.75rem; }
details.feed .actions { margin-bottom: 0.5rem; }
details.feed .actions a[role=button] { padding: 0.35rem 0.8rem; font-size: 0.875rem; }
.slots { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.slots form { margin: 0; }
.slots button { margin: 0; padding: 0.4rem 0.8rem; }
.lesson-types { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0.5rem; margin-bottom: 1rem; }
.lesson-types [role="button"] { margin: 0; padding: 0.4rem 0.8rem; }
kbd { font-size: 0.7rem; padding: 0.1rem 0.35rem; vertical-align: middle; }
button kbd, a[role=button] kbd { background: rgba(0, 0, 0, 0.2); color: inherit; margin-left: 0.35rem; }
kbd.key-hint { opacity: 0.75; }
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding-block: 1rem 2rem; }
.site-footer code { font-size: inherit; padding: 0 0.25rem; }
@media (hover: none) { .hide-touch, kbd.key-hint { display: none; } }
form.setup section { margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--pico-muted-border-color); }
form.setup h2 { font-size: 1.15rem; margin-bottom: 0.75rem; }
form.setup .grid > div > fieldset { margin-bottom: 0; }
table.prices input[type=text] { margin: 0; max-width: 9rem; }
table.prices input[type=checkbox] { margin: 0; }
[data-rows] tr:focus-within { outline: 2px solid var(--pico-primary-focus); outline-offset: -2px; }
#keys-help table { margin: 0; }
#keys-help td:first-child { white-space: nowrap; }
form.setup .actions { align-items: center; }
form.setup .actions button { width: auto; margin: 0; }
.required { color: var(--pico-del-color); }
a.danger { color: var(--pico-del-color); }
.row-actions { white-space: nowrap; }
.row-actions a + a { margin-left: 0.75rem; }
button.danger-solid { background: var(--pico-del-color); border-color: var(--pico-del-color); }
form.confirm { margin: 0; align-items: center; }
form.confirm button, form.confirm a[role=button] { width: auto; margin: 0; }
/* Accent color from BRAND_COLOR (set as --brand on <html>). The id in :not() raises
   specificity above Pico's light and dark theme selectors. */
:root:not(#brand) {
  --pico-primary: var(--brand);
  --pico-primary-background: var(--brand);
  --pico-primary-border: var(--brand);
  --pico-primary-underline: color-mix(in srgb, var(--brand) 50%, transparent);
  --pico-primary-hover: color-mix(in srgb, var(--brand) 80%, black);
  --pico-primary-hover-background: color-mix(in srgb, var(--brand) 85%, black);
  --pico-primary-hover-border: color-mix(in srgb, var(--brand) 85%, black);
  --pico-primary-hover-underline: var(--pico-primary-hover);
  --pico-primary-focus: color-mix(in srgb, var(--brand) 40%, transparent);
  --pico-primary-inverse: #fff;
  --pico-text-selection-color: color-mix(in srgb, var(--brand) 25%, transparent);
}
/* Dark accent: the system setting when no theme is chosen, or data-theme=dark from the toggle. */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]):not(#brand) {
    --pico-primary: color-mix(in srgb, var(--brand) 55%, white);
    --pico-primary-underline: color-mix(in srgb, var(--brand) 55%, transparent);
    --pico-primary-hover: color-mix(in srgb, var(--brand) 35%, white);
    --pico-primary-hover-background: color-mix(in srgb, var(--brand) 80%, white);
    --pico-primary-hover-border: color-mix(in srgb, var(--brand) 80%, white);
  }
}
:root[data-theme=dark]:not(#brand) {
  --pico-primary: color-mix(in srgb, var(--brand) 55%, white);
  --pico-primary-underline: color-mix(in srgb, var(--brand) 55%, transparent);
  --pico-primary-hover: color-mix(in srgb, var(--brand) 35%, white);
  --pico-primary-hover-background: color-mix(in srgb, var(--brand) 80%, white);
  --pico-primary-hover-border: color-mix(in srgb, var(--brand) 80%, white);
}
nav a.brand { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--pico-color); text-decoration: none; }
.brand-logo { width: 1.75rem; height: 1.75rem; flex: none; }
.table-filters { display: flex; flex-wrap: wrap; gap: 0 0.75rem; }
.table-filters input[type=search] { flex: 2 1 14rem; }
.table-filters select { flex: 1 1 10rem; width: auto; }
table.sortable th button { all: unset; cursor: pointer; font-weight: 600; white-space: nowrap; }
table.sortable th button:focus-visible { outline: 2px solid var(--pico-primary-focus); outline-offset: 2px; }
table.sortable th button::after { content: " ↕"; opacity: 0.35; }
table.sortable th button.asc::after { content: " ↑"; opacity: 1; }
table.sortable th button.desc::after { content: " ↓"; opacity: 1; }
a[role=button].outline.danger { color: var(--pico-del-color); border-color: var(--pico-del-color); }
.actions form.inline button { margin: 0; padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); }
#calendar .fc-timegrid-slot, #calendar .fc-timegrid-slot-label-frame, #calendar .fc-timegrid-slot-label-cushion { line-height: 1; padding-block: 0; }
#calendar .fc-event-main { line-height: 1.25; padding: 1px 3px; }
button.theme-toggle { background: none; border: none; color: var(--pico-muted-color); padding: 0.25rem; margin: 0; line-height: 0; }
button.theme-toggle:hover { color: var(--pico-color); }
button.theme-toggle svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
button.theme-toggle .icon-sun, [data-theme=dark] button.theme-toggle .icon-moon { display: none; }
[data-theme=dark] button.theme-toggle .icon-sun { display: inline; }
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) button.theme-toggle .icon-moon { display: none; }
  :root:not([data-theme]) button.theme-toggle .icon-sun { display: inline; }
}
#calendar { --fc-border-color: var(--pico-muted-border-color); --fc-neutral-bg-color: var(--pico-card-sectioning-background-color); --fc-page-bg-color: var(--pico-background-color); --fc-list-event-hover-bg-color: var(--pico-card-sectioning-background-color); }
[data-theme=dark] #calendar .fc-bg-event.open-hours { background-color: #2f9e44 !important; }
[data-theme=dark] #calendar .fc-bg-event.time-off { background-color: #c92a2a !important; }
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) #calendar .fc-bg-event.time-off { background-color: #c92a2a !important; }
}
@media (max-width: 600px) {
  header nav, header nav ul:last-child { flex-wrap: wrap; }
  header nav ul:last-child li { padding: 0.25rem 0.4rem; }
}
th.num, td.num { text-align: right; white-space: nowrap; }
tr[aria-current] td { font-weight: 600; }
td.time { width: 1%; white-space: nowrap; }
.page-head + h2, .page-head + article { margin-top: 1.5rem; }
a[role=button].wide { display: block; width: 100%; margin-bottom: 0.75rem; text-align: center; }
.divider { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0; font-size: 0.875rem; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--pico-muted-border-color); }
p.error { color: var(--pico-del-color); }
article.upcoming { --upcoming-bg: #fff; background: var(--upcoming-bg); border-left: 0.35rem solid var(--pico-primary); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); }
article.upcoming > header { margin: 0 0 1rem; padding: 0; background: none; border: 0; }
article.upcoming h2 { margin: 0; }
article.upcoming .lesson + .lesson { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--pico-muted-border-color); }
article.upcoming .when { font-size: 1.25rem; }
:root[data-theme=dark] article.upcoming { --upcoming-bg: color-mix(in srgb, var(--pico-card-background-color) 92%, white); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) article.upcoming { --upcoming-bg: color-mix(in srgb, var(--pico-card-background-color) 92%, white); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
}
#calendar .fc-bg-event.time-off { background-image: repeating-linear-gradient(135deg, rgba(201, 42, 42, 0.9) 0 2px, transparent 2px 9px); }
#calendar .fc-event.lesson-completed, #calendar .fc-event.lesson-late_cancel { opacity: 0.6; }
#calendar .fc-event.lesson-late_cancel { border-style: dashed; }
#calendar .fc-event.lesson-cancelled { opacity: 0.4; }
#calendar .fc-event.lesson-cancelled .fc-event-title, #calendar .fc-event.lesson-cancelled .fc-list-event-title { text-decoration: line-through; }
#calendar .fc-event.busy-import { opacity: 0.75; border-style: dashed; }
#calendar .fc-timegrid-event .fc-event-resizer-end { height: 8px; bottom: -2px; cursor: ns-resize; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; list-style: none; padding: 0; margin: 0 0 0.75rem; font-size: 0.8rem; }
.calendar-legend li { list-style: none; margin: 0; padding: 0; }
.calendar-legend .swatch { border-radius: 3px; margin-right: 0.35rem; }
.swatch.legend-open { background: rgba(64, 192, 87, 0.35); }
.swatch.legend-time-off { background: rgba(250, 82, 82, 0.22) repeating-linear-gradient(135deg, rgba(201, 42, 42, 0.6) 0 2px, transparent 2px 5px); }
.swatch.legend-busy { background: #868e96; opacity: 0.75; }
#calendar-choice article { max-width: 24rem; }
#calendar-choice .choice-buttons { display: flex; flex-direction: column; gap: 0.5rem; }
#calendar-choice .choice-buttons a { margin: 0; }
#calendar-choice [hidden] { display: none; }
[data-theme=dark] #calendar .fc-bg-event.time-off { background-image: repeating-linear-gradient(135deg, rgba(255, 168, 168, 0.9) 0 2px, transparent 2px 9px); }
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) #calendar .fc-bg-event.time-off { background-image: repeating-linear-gradient(135deg, rgba(255, 168, 168, 0.9) 0 2px, transparent 2px 9px); }
}
.prices-head { margin-bottom: 1.5rem; }
.price-key { margin-top: 3rem; scroll-margin-top: 1rem; }
.price-key dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; }
.price-key dt { font-weight: 600; }
.price-key dd { margin: 0; }
@media (max-width: 576px) { .price-key dl { grid-template-columns: 1fr; } .price-key dd { margin-bottom: 0.5rem; } }
.scenario-toc { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.scenario-toc li { list-style: none; margin: 0; }
.scenario-group { scroll-margin-top: 1rem; }
.scenario { scroll-margin-top: 1rem; }
.scenario ol { margin-bottom: 0; }
.templates a { display: inline-block; margin: 0.25rem 0.5rem 0.25rem 0; font-size: 0.875rem; padding: 0.1rem 0.6rem; border: 1px solid var(--pico-muted-border-color); border-radius: 1rem; text-decoration: none; }
.template-picker ul { padding-left: 0; }
.template-picker li { list-style: none; margin-bottom: 0.35rem; }
.template-picker a[aria-current] { text-decoration: underline; }
[data-rates].one-price th:first-child, [data-rates].one-price td:first-child { display: none; }
.describe { margin-bottom: 2rem; }
.describe progress { margin: 0.5rem 0; }
.describe-changes s { color: var(--pico-muted-color); }
.describe-raw { white-space: pre-wrap; word-break: break-all; font-size: 0.8rem; }
#describe-unsupported { margin-bottom: 2rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.series-clashes .clash { padding: 0.75rem 1rem; margin-bottom: 1rem; }
.series-clashes .clash header { margin: -0.75rem -1rem 0.75rem; padding: 0.6rem 1rem; }
.series-clashes .clash header ul { margin: 0.25rem 0 0; padding-left: 1.1rem; }
.series-clashes .clash header li { list-style: disc; margin: 0; }
.series-clashes .clash fieldset { margin-bottom: 0.5rem; }
.series-clashes .clash fieldset div > label { display: flex; margin: 0 0 0.35rem; }
.series-clashes .clash-move input { margin-bottom: 0; }
@supports selector(:has(a)) {
  .series-clashes .clash:not(:has(input[value=move]:checked)) .clash-move { display: none; }
}
.series-clashes .clash input[type=radio] { flex-shrink: 0; }

/* Booking page: lesson type cards, the day grid and one day's times. */
.type-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
.type-cards a { display: block; padding: 0.75rem 1rem; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); text-decoration: none; color: var(--pico-color); }
.type-cards a:hover { border-color: var(--pico-primary-border); }
.type-cards a[aria-current] { border-color: var(--pico-primary-border); box-shadow: inset 0 0 0 1px var(--pico-primary-border); }
.type-cards strong, .type-cards small { display: block; }
.type-cards small { color: var(--pico-muted-color); }
.usual article { padding: 0.75rem 1rem; margin-bottom: 1rem; }
.usual header { margin: -0.75rem -1rem 0.75rem; padding: 0.5rem 1rem; }
.slot-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.slot-row [role="button"] { margin: 0; padding: 0.45rem 0.9rem; min-width: 6.5rem; }
.booker { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 2rem; align-items: start; margin-bottom: 1.5rem; }
@media (max-width: 760px) { .booker { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }
.day-grid-head, .day-grid-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3rem; margin-bottom: 0.3rem; }
.day-grid-head span { text-align: center; font-size: 0.75rem; color: var(--pico-muted-color); }
.day { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: var(--pico-border-radius); font-size: 0.85rem; text-decoration: none; color: var(--pico-muted-color); line-height: 1.1; }
.day.out { visibility: hidden; }
a.day { color: var(--pico-color); background: var(--pico-card-sectioning-background-color); border: 1px solid var(--pico-muted-border-color); font-weight: 600; }
a.day:hover { border-color: var(--pico-primary-border); }
a.day.selected { background: var(--pico-primary-background); border-color: var(--pico-primary-border); color: var(--pico-primary-inverse); }
.day-num { white-space: nowrap; }
.day-count { font-size: 0.65rem; font-weight: 400; opacity: 0.75; }
.times h2 { margin-bottom: 0.75rem; }
.times h3.part { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pico-muted-color); margin: 0.5rem 0; }
.times .confirm header a { text-decoration: none; }
.local-time { display: block; font-size: 0.7rem; opacity: 0.8; }
.recent td { vertical-align: top; }
.add-cal { display: block; font-size: 0.75rem; color: var(--pico-muted-color); }
.day-grid-month { margin-bottom: 0.5rem; }