/* Pole Dance Yambol. Colours from docs/REQUIREMENTS.md; text contrast at least 4.5:1. */
@font-face { font-family: "Golos Text"; font-weight: 400; font-display: swap; src: url(/static/fonts/golos-text-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 400; font-display: swap; src: url(/static/fonts/golos-text-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Golos Text"; font-weight: 600; font-display: swap; src: url(/static/fonts/golos-text-cyrillic-600-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 600; font-display: swap; src: url(/static/fonts/golos-text-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Golos Text"; font-weight: 700; font-display: swap; src: url(/static/fonts/golos-text-cyrillic-700-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 700; font-display: swap; src: url(/static/fonts/golos-text-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-weight: 400; font-display: swap; src: url(/static/fonts/onest-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-weight: 400; font-display: swap; src: url(/static/fonts/onest-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-weight: 500; font-display: swap; src: url(/static/fonts/onest-cyrillic-500-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-weight: 500; font-display: swap; src: url(/static/fonts/onest-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-weight: 600; font-display: swap; src: url(/static/fonts/onest-cyrillic-600-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-weight: 600; font-display: swap; src: url(/static/fonts/onest-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

[hidden] { display: none !important; }

:root {
  --cocoa: #33292B; /* Какао: dark ground */
  --sand: #F1EBE6;  /* Пясък: light ground */
  --plum: #8E6B87;  /* Мораво: buttons, links, pole classes */
  --sage: #6E8267;  /* Зелено: second accent: the best-value badge; never a section background or a tint */
  --ink: #2A2326;   /* Мастило: text */
  --ink2: #6B5C54;  /* Мастило 2: secondary text */
  --paper: #FFFFFF;
  --line: #D9CEC6;
  --col: 72rem;     /* the page column; admin.css keeps 60rem */
  /* Shades of the palette (A-804 allows them): a deeper plum for hovers and a soft plum wash for an Instagram tile without a cover. */
  --plum-deep: color-mix(in srgb, var(--plum) 82%, var(--ink));
  --blush: color-mix(in srgb, var(--plum) 13%, var(--sand));
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
main { flex: 1 0 auto; width: 100%; } /* full width: as a flex child with auto margins it would shrink to its content (080) */
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--sand); color: var(--ink); font: 400 17px/1.55 "Onest", system-ui, sans-serif; letter-spacing: 0; overflow-x: hidden; }
h1, h2, h3, .wordmark, .first-title, .btn { font-family: "Golos Text", "Onest", system-ui, sans-serif; letter-spacing: -0.005em; }
h1 { font-size: clamp(2rem, 7vw, 3.2rem); line-height: 1.1; font-weight: 600; margin: 0 0 16px; }
h2 { font-size: clamp(1.6rem, 5vw, 2.2rem); line-height: 1.2; font-weight: 600; margin: 0 0 16px; }
h3 { font-size: 1.15rem; font-weight: 600; margin: 0 0 4px; }
p { margin: 0 0 12px; }
/* No underlines (Nelly). Links stand out by weight; plain ones turn plum on hover; the keyboard focus ring stays. */
a { color: var(--ink); font-weight: 600; text-decoration: none; }
.top-links a:not(.lang):hover, main p a:hover, main li > a:hover, main dd a:hover { color: var(--plum); }
a:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }
:focus-visible { outline: 3px solid var(--plum); outline-offset: 2px; }
.wrap { max-width: var(--col); margin: 0 auto; padding: 0 16px; }
.muted { color: var(--ink2); }
.small { font-size: 0.92rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; background: var(--paper); padding: 8px; z-index: 20; }

/* Header */
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 16px; background: var(--sand); border-bottom: 1px solid var(--line); }
@media (min-width: 1000px) { .top { padding-inline: max(16px, calc((100% - var(--col)) / 2 + 16px)); } } /* logo and buttons on the page column's edges, like the content below */
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); min-height: 44px; }
.brand img { width: 44px; height: 44px; }
.wordmark { display: flex; flex-direction: column; line-height: 1; font-weight: 600; white-space: nowrap; }
.wordmark span:first-child { font-size: 0.95rem; letter-spacing: 0.04em; }
.wordmark span:last-child { font-size: 1.05rem; font-weight: 600; }
.top-links { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; justify-content: flex-end; min-width: 0; }
@media (max-width: 420px) { .top-links { font-size: 0.92rem; gap: 2px; } .top-links a { padding-left: 6px; padding-right: 6px; } }
.top-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-weight: 500; white-space: nowrap; }
@media (max-width: 320px) { .brand img { width: 36px; height: 36px; } .wordmark span:first-child { font-size: 0.8rem; } .wordmark span:last-child { font-size: 0.9rem; } } /* large text on small phones (087) */
/* "Изход" is a POST form, its button dressed as a header link. */
.top-out { display: contents; }
.top-out button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font: inherit; font-weight: 500; color: inherit; background: none; border: 0; cursor: pointer; white-space: nowrap; }
.top-out button:hover { color: var(--plum); }
@media (max-width: 420px) { .top-out button { padding-left: 6px; padding-right: 6px; } }
/* With "Админ" too there is no room below 400 px; "Моите тренировки" then has it at the top (me.tsx). */
@media (max-width: 399px) { .top-links:has(> :nth-child(4)) .top-out { display: none; } }
.signed-out { padding-top: 16px; }
.signed-out .notice { margin-bottom: 0; }
.top-links .lang { border: 1px solid rgba(42, 35, 38, 0.28); min-width: 44px; justify-content: center; text-decoration: none; }

/* Hero and the first-class offer */
.hero { padding: 32px 0 24px; }
.lead { font-size: 1.2rem; }
.first-block { background: var(--cocoa); color: var(--sand); padding: 20px; margin-top: 20px; } /* REQUIREMENTS: "a dark block" with the 5 € offer; sand on cocoa 12:1 */
.first-block .btn:hover { background: var(--sand); border-color: var(--sand); color: var(--ink); }
.first-block :focus-visible { outline-color: var(--sand); }
.first-title { font-size: clamp(1.35rem, 4.5vw, 1.75rem); font-weight: 600; line-height: 1.25; margin-bottom: 14px; }

/* Buttons: white on plum is 4.56:1. Hovers deepen the plum instead of flipping to black. */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 22px; background: var(--plum); color: var(--paper); font-weight: 600; font-size: 1rem; border: 1px solid var(--plum); border-radius: 2px; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--plum-deep); border-color: var(--plum-deep); }
.btn-big { min-height: 52px; font-size: 1.05rem; padding-inline: 28px; }
.btn-quiet { background: var(--paper); color: var(--ink); border-color: rgba(42, 35, 38, 0.32); }
.btn-quiet:hover { background: var(--paper); border-color: var(--ink); }
button { font: inherit; }

/* Sections */
section { padding: 32px 0; }
.band { background: var(--paper); }
/* Chips: one line that scrolls sideways on phones (section menu). */
.chips { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 4px 16px; margin: 0 -16px; }
.chips::-webkit-scrollbar { display: none; }
.chips a { flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; background: var(--paper); color: var(--ink); border: 1px solid rgba(42, 35, 38, 0.12); border-radius: 2px; font-weight: 500; font-size: 0.95rem; white-space: nowrap; text-decoration: none; }
.chips a:hover { border-color: rgba(42, 35, 38, 0.5); }
.chips a[aria-current] { background: var(--paper); border-color: var(--ink); color: var(--ink); font-weight: 600; }
.section-nav.chips { margin: 0 auto; padding-top: 12px; padding-bottom: 12px; } /* not inside .wrap, so no negative margin */
@media (min-width: 700px) { .section-nav.chips { flex-wrap: wrap; overflow: visible; } }
.ticks { padding-left: 1.2em; }
.ticks li { margin-bottom: 8px; }

/* Schedule header, one line from 700 px: the title, the week shown in full, the arrows. The week sits left of the
   arrows, so they stay put from week to week. Phones keep the arrows beside the title and put the week under it.
   The arrows are bare chevrons with 44 px targets; a stop is a pale chevron. */
.sched-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title arrows" "week week"; align-items: center; gap: 2px 16px; }
.sched-head h2 { grid-area: title; margin: 0; }
.week-range { grid-area: week; margin: 0; font: 600 1.25rem/1.3 "Golos Text", "Onest", sans-serif; font-variant-numeric: tabular-nums; }
.week-arrows { grid-area: arrows; display: flex; margin-right: -10px; }
.week-arrow { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--ink); border-radius: 2px; }
a.week-arrow:hover { background: var(--sand); }
a.week-arrow:active { transform: translateY(1px); }
.week-arrow.is-off { color: var(--line); }
@media (min-width: 700px) {
  .sched-head { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "title week arrows"; gap: 16px; }
}
.sched-head + .muted { margin-top: 24px; } /* "Няма тренировки" */
.week-limit { margin: 24px 0 0; } /* only on the 8th week, where the next arrow stops */
@media (prefers-reduced-motion: no-preference) {
  .days.is-new { animation: week-in 0.22s ease-out; }
  .days.is-new.from-right { animation-name: week-from-right; } /* a swipe: the new week comes from the side it was pulled from */
  .days.is-new.from-left { animation-name: week-from-left; }
}
@keyframes week-from-right { from { opacity: 0; transform: translateX(32px); } }
@keyframes week-from-left { from { opacity: 0; transform: translateX(-32px); } }
@keyframes week-in { from { opacity: 0; transform: translateY(6px); } }
.days { touch-action: pan-y; } /* sideways swipes change the week (site.js); the page still scrolls up and down */
/* Schedule: a list of days; each class is one row: time, class and teacher, places, book. */
.sched-note { margin-top: 20px; }
.days { margin-top: 20px; }
.day { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; } /* phones: the day over its classes */
.day + .day { margin-top: 20px; } /* days part by space, as the rest of the page has no divider lines */
.day-name { margin: 0; padding: 20px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; color: var(--ink); }
.day-wd { font: 600 1.35rem/1.2 "Golos Text", "Onest", sans-serif; }
.day-date { font: 400 0.95rem/1.3 "Onest", sans-serif; letter-spacing: 0; color: var(--ink2); } /* body-text spacing; the heading's -0.005em would be inherited in px (A-803) */
.slots { list-style: none; margin: 0; padding: 0; }
/* Phones: the time with the button beside it, the class under both at full width. From 700 px: time, class, button
   on one line. */
.slot { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "time action" "what what"; gap: 4px 12px; align-items: center; padding: 10px 0; }
.slot-time { grid-area: time; font: 600 1.1rem/1.25 "Golos Text", sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.slot-what { grid-area: what; display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.slot-name { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.slot-meta { font-size: 0.9rem; color: var(--ink2); font-variant-numeric: tabular-nums; }
.slot-price { font-size: 0.9rem; color: var(--ink2); }
.slot-action { grid-area: action; }
.slot-action .btn, .slot-action .badge { min-height: 44px; padding: 8px 14px; font-size: 0.95rem; white-space: nowrap; border-width: 1px; }
/* A column of solid plum buttons shouted (Nelly, 15 Oct): each row's button is a fine plum outline that fills on hover. */
.slot-action .btn:not(.btn-quiet) { background: var(--paper); border-color: var(--plum); color: var(--ink); }
.slot-action .btn:not(.btn-quiet):hover { background: var(--plum); border-color: var(--plum); color: var(--paper); }
.is-cancelled .slot-name { text-decoration: line-through; }
@media (min-width: 700px) {
  .day { grid-template-columns: 11rem minmax(0, 1fr); column-gap: 16px; }
  .day-name { flex-direction: column; align-items: flex-start; gap: 2px; padding: 20px 0 14px; }
  .day-wd { font-size: 1.5rem; }
  .slot { grid-template-columns: 7rem minmax(0, 1fr) auto; grid-template-areas: "time what action"; gap: 2px 20px; padding: 14px 0; }
}
.badge { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 12px; border: 1px solid var(--ink2); color: var(--ink); font-weight: 600; text-decoration: none; }
.badge-off { color: var(--ink2); border-style: dashed; }
.badge-mine { border-color: var(--plum); }
/* Class-type colours, palette only (Nelly, 16 Oct). Lists (schedule, Моите тренировки, teachers, admin): the name as a slim tag.
   Класове: a colour band over each class. White on plum 4.6:1, sand on cocoa 11.9:1, white on sage 4.2:1 (Nelly's choice), white on taupe 6.4:1, ink on sand 13:1. */
.type-tag { display: inline-block; padding: 1px 7px; font-size: 0.85rem; font-weight: 600; line-height: 1.45; background: var(--plum); color: var(--paper); }
.type-cocoa { background: var(--cocoa); color: var(--sand); }
.type-sage { background: rgb(104, 122, 98); color: var(--paper); } /* sage 6 % deeper, like the best-value badge: white on it 4.6:1 (audit F29) */
.type-taupe { background: var(--ink2); color: var(--paper); }
.type-sand { background: var(--sand); color: var(--ink); outline: 1.5px solid var(--plum); outline-offset: -1.5px; }
/* On the schedule the sand tag marks the special ones, workshops and beginners (Nelly, 18 Oct): its plum frame sits outside
   the tag, so it reads a little bigger than the plain tags, which have no frame; the margin keeps the frame off its neighbours. */
.slot-name.type-tag.type-sand { outline-offset: 0; margin: 1.5px; padding: 1px 9px; }
.slot-name.type-tag { align-self: flex-start; }
.slot-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
/* What is new or special on the schedule (Nelly, 18 Oct), in the brand's own plum: "✦ Ново" / "✦ Уъркшоп" beside the
   name and "подходяща за напълно начинаещи" under it, deep plum on sand (4.8:1) and on white (5.7:1). */
.hot-chip, .slot-beginners { display: inline-flex; align-items: center; gap: 4px; color: var(--plum-deep); }
.hot-chip { font-size: 0.9rem; font-weight: 700; }
.slot-beginners { font-size: 0.9rem; font-weight: 500; }
.hot-chip svg { flex: none; }
/* A workshop's row sits on the blush wash, so it reads as an event, not one more class. */
.slot.is-workshop:not(.is-cancelled) { background: var(--blush); padding-left: 12px; padding-right: 8px; }
.teacher-teaches { display: flex; flex-wrap: wrap; gap: 6px; }
/* Класове: a short colour line under each class name, as under the teachers (Nelly, 16 Oct). */
.type[class*="type-band-"] h3 { display: inline-block; align-self: flex-start; padding-bottom: 5px; border-bottom: 3px solid var(--plum); margin-bottom: 10px; }
.type-band-cocoa h3 { border-bottom-color: var(--cocoa) !important; }
.type-band-sage h3 { border-bottom-color: var(--sage) !important; }
.type-band-taupe h3 { border-bottom-color: var(--ink2) !important; }
/* Under each teacher's name: each class name with a short colour line under it, then air before the bio (Nelly, 16 Oct). */
.teachers .teacher-teaches { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 2px 0 14px; }
.teachers .teacher-teaches .type-tag, .disc-picks .type-tag { background: none; color: var(--ink); outline: 0; padding: 0 0 5px; border-bottom: 3px solid var(--plum); font-size: 0.92rem; font-weight: 400; }
.teachers .teacher-teaches .type-cocoa, .disc-picks .type-cocoa { border-bottom-color: var(--cocoa); }
.teachers .teacher-teaches .type-sage, .disc-picks .type-sage { border-bottom-color: var(--sage); }
.teachers .teacher-teaches .type-taupe, .disc-picks .type-taupe { border-bottom-color: var(--ink2); }
.slot-action .badge-booked { border: 2px solid var(--sage); } /* booked: the sage accent as the outline, ink text (15:1); sage on white 4.2:1 for the shape (Nelly: "this can be sage") */

/* Class types, prices, teachers */
.types, .teachers, .workshops { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
@media (min-width: 700px) { .types { grid-template-columns: 1fr 1fr; } .teachers { grid-template-columns: repeat(3, 1fr); } }
.type { padding: 0; }
.prices { margin: 0 0 20px; display: grid; gap: 0; }
.prices div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); } /* the name wraps, the price never leaves the screen (086) */
.prices dt { font-weight: 600; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.prices dd { margin: 0; font-weight: 600; white-space: nowrap; font-family: "Golos Text", sans-serif; font-size: 1.1rem; }
.tag { font-size: 0.85rem; font-weight: 600; white-space: nowrap; padding: 2px 8px; border: 2px solid var(--plum); color: var(--ink); }
.tag-best_value .tag { border-color: var(--sage); }
.teachers li { display: flex; flex-direction: column; gap: 6px; }
.teachers { row-gap: 32px; } /* each teacher reads as a block of their own */
@media (min-width: 700px) { .teachers { row-gap: 48px; } }
.teachers img { width: 160px; height: 160px; object-fit: cover; }
.teacher-name { font-weight: 600; font-size: 1.1rem; }
.teacher-teaches { display: block; color: var(--ink2); font-size: 0.95rem; margin-top: 2px; } /* the class types each teacher teaches, from the schedule */
details { border-bottom: 1px solid var(--line); padding: 12px 0; }
summary { font-weight: 500; cursor: pointer; min-height: 32px; list-style: none; position: relative; padding-left: 1.4em; }
summary::-webkit-details-marker { display: none; }
summary::before { content: ""; position: absolute; left: 0.15em; top: 0.5em; width: 0.45em; height: 0.45em; border-right: 2px solid var(--plum); border-bottom: 2px solid var(--plum); transform: rotate(-45deg); transition: transform 0.15s; }
details[open] > summary::before { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { summary::before { transition: none; } }
details p { margin-top: 8px; padding-left: 1.4em; }

/* Footer and sticky bar */
/* The page closes in its own light tones, not on a dark block (Nelly, 15 Oct: tone it down): a 5 % ink veil over the
   sand reads as a slightly deeper sand. Translucent on purpose: QA's contrast walk reads rgba() and goes on to the sand
   body, while a color-mix() value would come back as color(srgb …), which its parser takes for near-black. */
.foot { background: rgba(42, 35, 38, 0.05); color: var(--ink); padding: 24px 0; }
@media (max-width: 899px) { body:has(.sticky-bar) .foot { padding-bottom: 96px; } } /* room for the sticky bar only where there is one */
.faq-more { margin-top: 20px; }
.foot a { color: var(--ink); font-weight: 500; }
.foot a:hover { color: var(--plum-deep); }
.foot .small { color: var(--ink2); }
/* Phones: the sticky bar stays at the bottom (REQUIREMENTS) as a translucent sand strip holding one plum button (56 px
   in all, as tall as the plain bar was), so the page shows through around it instead of a plum band across the screen (Nelly, 15 Oct: tone it down). */
.sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: flex; justify-content: center; padding: 6px 16px calc(6px + env(safe-area-inset-bottom)); background: rgba(241, 235, 230, 0.92); color: var(--paper); font: 600 1.05rem "Golos Text", sans-serif; text-decoration: none; transition: transform 0.2s, visibility 0.2s; }
.sticky-bar > span { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 28rem; min-height: 44px; padding: 6px 16px; background: var(--plum); border-radius: 2px; transition: background-color 0.2s ease, transform 0.15s ease; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .sticky-bar { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } }
.sticky-bar.is-away { transform: translateY(100%); visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .sticky-bar { transition: none; } }
@media (min-width: 900px) { .sticky-bar { display: none; } }

/* Forms and plain pages */
.page { padding-top: 24px; padding-bottom: 40px; } /* keep .wrap's 16px sides (finding 004) */
.panel { background: var(--paper); padding: 20px 16px; margin-bottom: 20px; border-top: 2px solid var(--plum); }
form.stack { display: grid; gap: 14px; max-width: 30rem; }
/* Booking: one reading column, so on laptops the form fills its panel instead of leaving half of it empty (check 15 Oct, 13). */
label { font-weight: 500; display: grid; gap: 4px; }
input, select, textarea { font: inherit; font-size: 16px; min-height: 48px; padding: 10px 12px; border: 1px solid var(--ink2); border-radius: 2px; background: var(--paper); color: var(--ink); width: 100%; }
textarea { min-height: 96px; }
fieldset { border: 1px solid var(--line); padding: 12px; margin: 0; }
select { -webkit-appearance: none; appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232A2326' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
/* 058: lines under a form's button keep the same gap as between fields. */
form + p { margin-top: 1rem; }
.nowrap { white-space: nowrap; }
legend { font-weight: 600; padding: 0 4px; }
.choice { display: flex; align-items: center; gap: 10px; font-weight: 400; min-height: 44px; }
.choice input { width: 24px; height: 24px; min-height: 0; flex: none; }
/* "Час само за вас" (private class or open practice): one sand row under the schedule that opens into the request form,
   so it takes room only for someone who wants it. A <details>, so no script is needed; the FAQ's chevron and indents
   are switched off here. Inside: what, a two-week calendar (tap a day, its free times show under the days), a note.
   Radios sit hidden inside tappable tiles; a chosen one gets a plum outline on a light plum tint. Wide screens: the choice and note left, the
   calendar right. */
.hall { margin-top: 32px; padding: 0; border: 0; background: var(--sand); border-radius: 2px; }
/* Closed row: the title and the button on one line, the line under them; from 700 px the button stands right of both. */
.hall-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title btn" "line line"; align-items: center; gap: 6px 16px; min-height: 0; padding: 16px 16px 18px 20px; font-weight: 400; }
.hall-row::before { content: none; }
.hall-say { display: contents; }
.hall-say strong { grid-area: title; font: 600 1.2rem/1.3 "Golos Text", "Onest", sans-serif; }
.hall-say span { grid-area: line; color: var(--ink2); }
.hall-toggle { grid-area: btn; min-height: 44px; padding: 8px 16px; background: var(--paper); border-color: var(--plum); color: var(--ink); } /* a fine plum outline, like the schedule's buttons */
/* It stands out (Nelly, 16 Oct: "this shall stand out more"): a soft plum wash (translucent, so the contrast walk
   reaches the white band under it), a larger title and the solid plum button. */
.hall { background: rgba(142, 107, 135, 0.13); }
.hall-say strong { font-size: clamp(1.3rem, 4vw, 1.6rem); }
.hall-say span { color: var(--ink); }
.hall-toggle { background: var(--plum); border-color: var(--plum); color: var(--paper); }
.hall-chev { display: none; }
/* Phones: the button is a 44 px chevron like the week arrows, so the title keeps its line; it turns over when open. */
@media (max-width: 699px) {
  .hall-row { align-items: start; }
  .hall-toggle { width: 44px; height: 44px; padding: 0; margin: -6px -4px 0 0; }
  .hall-toggle > span, .hall[open] .hall-toggle > .when-open { display: none; }
  .hall-chev { display: block; transition: transform 0.2s; }
  .hall[open] .hall-chev { transform: rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) { .hall-chev { transition: none; } }
@media (min-width: 700px) { .hall-row { grid-template-areas: "title btn" "line btn"; gap: 2px 24px; padding: 18px 20px; } }
.hall .when-open, .hall[open] .when-closed { display: none; }
.hall[open] .when-open { display: inline; }
.hall[open] .hall-toggle { background: transparent; border-color: var(--ink); color: var(--ink); }
.hall-row:hover .hall-toggle { background: var(--plum-deep); border-color: var(--plum-deep); color: var(--paper); }
.hall-body { padding: 4px 20px 24px; }
.hall-wait { margin: 0; }
.hall.is-live .hall-wait { min-height: 360px; } /* the form is on its way: keep its room so the page does not jump */
.hall.is-live .hall-wait a { visibility: hidden; }
.hall-body > .notice { background: var(--paper); }
.hall p { padding-left: 0; }
.hall-form { display: grid; gap: 24px; }
.hall-send { display: grid; gap: 12px; align-content: start; }
.hall-send p { margin: 0; }
.hall textarea { min-height: 72px; }
.hall-send .btn { justify-self: stretch; }
@media (min-width: 700px) { .hall-send .btn { justify-self: start; } }
@media (min-width: 900px) {
  .hall-row { padding: 20px 28px; }
  .hall-body { padding: 4px 28px 28px; }
  .hall-form { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "side when" "send when"; column-gap: clamp(32px, 4vw, 64px); align-items: start; }
  .hall-side { grid-area: side; }
  .hall-when { grid-area: when; }
  .hall-send { grid-area: send; }
}
.picks { border: 0; padding: 0; margin: 0; min-width: 0; }
.picks legend { padding: 0; margin-bottom: 10px; font-weight: 600; }
.pick { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 6px 4px; background: var(--paper); color: var(--ink); border: 1px solid rgba(42, 35, 38, 0.12); border-radius: 2px; font-weight: 600; cursor: pointer; user-select: none; }
.pick:hover { border-color: var(--ink); }
.pick input, .cal-radio { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; margin: 0; pointer-events: none; }
.pick:has(input:checked) { background: rgba(142, 107, 135, 0.1); border-color: var(--plum); outline: 1px solid var(--plum); outline-offset: -2px; color: var(--ink); } /* chosen: a 2 px plum edge (border + inner outline, so nothing moves) on a light plum tint, not a dark block */
.pick:has(input:focus-visible) { outline: 2px solid var(--plum); outline-offset: 2px; }
.pick-sub { font-weight: 400; font-size: 0.9rem; }
.pick:has(input:checked) .pick-sub { color: var(--ink); }
.kind-picks { display: grid; gap: 8px; }
.pick-kind { align-items: flex-start; text-align: left; padding: 12px 16px; gap: 2px; }
.pick-kind strong { font: 600 1.05rem/1.3 "Golos Text", "Onest", sans-serif; }
@media (min-width: 560px) and (max-width: 899px) { .kind-picks { grid-template-columns: 1fr 1fr; } }
.pick-time { font: 600 1rem/1.2 "Golos Text", "Onest", sans-serif; font-variant-numeric: tabular-nums; }
.cal { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-wd, .cal-gap, .cal-day { flex: 0 0 calc((100% - 36px) / 7); order: 1; }
.cal-wd { text-align: center; font-size: 0.8rem; color: var(--ink2); }
.cal-day { display: flex; align-items: center; justify-content: center; min-height: 44px; background: var(--paper); border: 1px solid rgba(42, 35, 38, 0.12); border-radius: 2px; font: 600 1.05rem/1 "Golos Text", "Onest", sans-serif; font-variant-numeric: tabular-nums; cursor: pointer; }
.cal-day:hover { border-color: var(--ink); }
.cal-radio:checked + .cal-day { background: rgba(142, 107, 135, 0.1); border-color: var(--plum); outline: 1px solid var(--plum); outline-offset: -2px; color: var(--ink); }
.cal-radio:focus-visible + .cal-day { outline: 2px solid var(--plum); outline-offset: 2px; }
.cal-radio:disabled + .cal-day { background: transparent; border-color: transparent; color: var(--ink2); opacity: 0.55; cursor: default; }
.cal-times { order: 2; flex: 0 0 100%; display: none; grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr)); gap: 6px; margin-top: 12px; }
.cal-times > p { grid-column: 1 / -1; margin: 0 0 2px; font-weight: 600; }
.cal-radio:checked + .cal-day + .cal-times { display: grid; }
.hall-form:has(input[name=kind][value=open_practice]:checked) .private-only { display: none; } /* open practice is longer: hide times only a private lesson fits */
/* A private lesson: what to train, then with whom (Nelly, 16 Oct: no boxes). The disciplines are words in a row, each with
   its class type's colour line, the chosen one in bold; its teachers follow on one line below, the chosen one underlined. */
.disc-picks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; margin-top: 14px; }
.hall-form:has(input[name=kind][value=open_practice]:checked) .disc-picks { display: none; }
.disc-picks .pick { order: 1; min-height: 44px; padding: 0; background: none; border: 0; outline: 0; align-items: flex-start; font-weight: 400; }
.disc-picks .pick:has(input:checked) { background: none; outline: 0; }
.disc-picks .pick:has(input:focus-visible) { outline: 2px solid var(--plum); outline-offset: 3px; }
.disc-picks .type-tag { font-size: 1rem; }
.disc-picks .pick-disc:has(input:checked) .type-tag { font-weight: 700; }
.disc-picks:has(input[name=discipline]:checked) .pick-disc:not(:has(input:checked)) .type-tag { color: var(--ink2); }
.teacher-picks { order: 2; flex: 0 0 100%; display: none; align-items: center; gap: 4px 18px; }
.pick-disc:has(input:checked) + .teacher-picks { display: flex; }
.disc-picks .pick-teacher { padding: 0 0 4px; border-bottom: 3px solid transparent; }
.disc-picks .pick-teacher:has(input:checked) { font-weight: 700; border-bottom-color: var(--plum); }
.hall-me { margin-bottom: 20px; }
.hall-me h3 { margin-top: 8px; }
.hall-me .list { margin-bottom: 16px; }
.hall-me .hall { margin-top: 0; background: var(--paper); }
.hall-me .pick, .hall-me .cal-day { background: var(--sand); }
.field-error { color: #8B1E2F; font-weight: 600; font-size: 0.95rem; }
.notice { padding: 12px 16px; background: var(--paper); margin-bottom: 16px; }
.notice-error { background: color-mix(in srgb, #8B1E2F 8%, var(--paper)); color: #8B1E2F; } /* the brand's error red, softened; 6.9:1 contrast */
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: 12px 0; border-bottom: 1px solid var(--line); }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table-scroll { overflow-x: auto; }
.tools pre { white-space: pre-wrap; background: var(--paper); padding: 8px; }
.outbox-item { border-top: 1px solid var(--ink2); padding: 8px 0; }
.workshop-photo { display: block; width: 100%; max-width: 360px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: 12px; }
/* Teacher photos: one row you swipe sideways, each photo whole and in its own shape, all the same height. */
.teacher-block { display: grid; gap: 12px; }
.teacher-photos { display: flex; align-items: flex-start; gap: 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px; scroll-padding-inline: 16px; scrollbar-width: none; }
.teacher-photos::-webkit-scrollbar { display: none; }
.teacher-photos::after { content: ""; flex: 0 0 12px; } /* room after the last photo, like the page edge */
.teacher-photos:has(> img:only-child)::after { display: none; } /* one photo fits the screen: nothing to swipe */
/* 360 px tall, but never more than the photo's real pixels on the screen (finding 084): --h is its height in pixels, and
   --hmin, on the row, the smallest photo's, so a row with one smaller photo keeps one height (A-992 on a 3× phone). */
.teacher-photos img { display: block; flex: none; width: calc(var(--w, 768) * min(360px, calc(100vw - 32px), calc(var(--hmin, var(--h, 960)) * 1px / var(--dpr, 1))) / var(--h, 960)); max-width: calc(100vw - 32px); height: auto; aspect-ratio: var(--w, 768) / var(--h, 960); scroll-snap-align: start; } /* never wider than the screen, so a single photo is always whole; the height is also capped at the screen width, so a square photo is whole and the row keeps one height (the row no longer stretches photos) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { .teacher-photos img { --dpr: 2; } }
@media (-webkit-min-device-pixel-ratio: 2.01), (min-resolution: 2.01dppx) { .teacher-photos img { --dpr: 3; } }
@media (-webkit-min-device-pixel-ratio: 3.01), (min-resolution: 3.01dppx) { .teacher-photos img { --dpr: 4; } }
.teacher-photos:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }
@media (min-width: 700px) {
  .teachers:has(.teacher-photos) { grid-template-columns: 1fr; }
  /* Text first, then all photos whole in one row across the column (088): each starts 340 px tall and the row
     shrinks every photo by the same factor when it would not fit, so nothing is clipped and nothing scrolls. */
  .teacher-block.has-photos { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .teacher-text { max-width: 68ch; }
  .teacher-photos { overflow: visible; scroll-snap-type: none; margin: 0; padding: 0; gap: 8px; }
  .teacher-photos::after { display: none; }
  .teacher-photos img { flex: 0 1 calc(var(--w, 768) * min(340px, calc(var(--hmin, var(--h, 960)) * 1px / var(--dpr, 1))) / var(--h, 960)); min-width: 0; width: auto; height: auto; aspect-ratio: var(--w, 768) / var(--h, 960); }
}
@media (min-width: 1024px) {
  /* Laptops: 400 px tall rows, so a teacher's photos use the width of the page column like the other sections. */
  .teacher-photos img { flex-basis: calc(var(--w, 768) * min(400px, calc(var(--hmin, var(--h, 960)) * 1px / var(--dpr, 1))) / var(--h, 960)); }
}
/* От Instagram: posts picked by admins; each opens on instagram.com. No embed script, no trackers.
   One post at a time, like Instagram stories (Nelly, 16 Oct): the posts sit in a sideways track that snaps to one,
   segment bars over the top (site.js), ‹ › at the sides from 700 px. Without the script the track still swipes. */
.stories { position: relative; --slide: min(80vw, 39vh, 400px); --side: calc(50% - var(--slide) / 2); }
/* On every width the heading sits above and the playing post in the middle, its neighbours showing on both sides
   (two each where they fit). A post is at most 80% of a phone's width and about 70% of the screen's height (Nelly, 16 Oct:
   "too big"). Phones run the row edge to edge. */
@media (max-width: 699px) { .stories { margin: 0 -16px; } }
.featured { position: relative; list-style: none; padding: 0 var(--side); margin: 0; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; }
.featured::-webkit-scrollbar { display: none; }
.featured > li { flex: 0 0 var(--slide); min-width: 0; scroll-snap-align: center; scroll-snap-stop: always; transition: opacity 0.3s ease, transform 0.3s ease; }
/* The neighbours step back so the one in the middle reads as the one playing; only its caption and link show. */
.stories.is-live .featured > li:not(.is-current) { opacity: 0.5; transform: scale(0.92); }
.stories.is-live .featured > li:not(.is-current) :is(.featured-caption, .featured-link) { visibility: hidden; }
.story-bars, .story-arrow { display: none; }
.stories.is-live .story-bars { position: absolute; top: 0; left: var(--side); right: var(--side); z-index: 2; display: flex; gap: 4px; padding: 8px 8px 0; pointer-events: none; }
.story-bar { flex: 1; height: 20px; padding: 8px 0; margin: -8px 0 0; border: 0; border-radius: 0; background: none; cursor: pointer; pointer-events: auto; }
.story-bar span { display: block; height: 3px; background: rgba(255, 255, 255, 0.55); }
.story-bar span span { height: 100%; background: var(--plum); transform: scaleX(0); transform-origin: left; }
.stories.is-live.has-many .story-arrow { position: absolute; top: calc(50% - 22px); z-index: 2; display: none; place-items: center; width: 44px; height: 44px; padding: 0 0 3px; border: 0; border-radius: 50%; background: rgba(42, 35, 38, 0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
@media (min-width: 700px) { .stories.is-live.has-many .story-arrow { display: grid; } }
.story-prev { left: max(0px, calc(var(--side) - 56px)); }
.story-next { right: max(0px, calc(var(--side) - 56px)); }
.story-arrow:hover { background: rgba(42, 35, 38, 0.6); }
.featured a { display: grid; gap: 6px; text-decoration: none; color: var(--ink); }
.featured-cover { position: relative; display: block; aspect-ratio: 4 / 5; background: var(--blush); overflow: hidden; }
.featured-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.featured-blank { display: block; height: 100%; } /* 066: no cover = plain plum tile; the caption is shown once, under it */
.featured-play { position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; transform: translate(-50%, -50%); }
.featured-caption { font-weight: 600; }
.featured-video { display: grid; gap: 6px; align-content: start; }
.reel { position: relative; }
.reel video { display: block; width: 100%; height: auto; background: var(--cocoa); }
/* The Reels-style player (site.js): no browser bar; the play mark while paused and a sound button in the corner (one
   setting for every video, Nelly, 16 Oct); the segment bars show how far it is. Without the script neither shows. */
.reel .featured-play, .reel-sound { display: none; }
.reel.is-live video { cursor: pointer; }
/* Only the post in the middle shows the play mark (while paused) and the sound button (Nelly, 16 Oct). */
.stories.is-live .featured > li:not(.is-current) .featured-play { display: none; }
.stories.is-live .featured > li.is-current .reel.is-live:not(.is-playing) .featured-play { display: block; pointer-events: none; }
.stories.is-live .featured > li.is-current .reel.is-live .reel-sound { position: absolute; top: 22px; right: 8px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(42, 35, 38, 0.3); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; cursor: pointer; }
.reel-sound:hover { background: rgba(42, 35, 38, 0.55); }
.reel-sound:focus-visible { outline-offset: 2px; }
.reel-sound svg { width: 20px; height: 20px; }
.reel-sound .reel-loud, .reel.is-loud .reel-sound .reel-muted { display: none; }
.reel.is-loud .reel-sound .reel-loud { display: block; }
.featured-link { font-size: 0.92rem; color: var(--ink2); }
.featured a:hover .featured-caption, .featured a:focus-visible .featured-caption { color: var(--plum); }

/* Polish layer (design-polish branch, for Nelly's OK). Additive only: the rules above stay as they are.
   Motion is short, only runs when the visitor has not asked for less motion, and never hides content. */
h1, h2, .first-title { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
.hero .lead { max-width: 40ch; }
.page > :is(p, ul, ol):not(.notice, .row-actions), .page > section > :is(p, ul, ol) { max-width: 62ch; } /* long reading pages (rules, privacy) keep a readable line */
@media (min-width: 900px) {
  /* The first-class offer on one line: the offer on the left, the button on the right. */
  .first-block { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 28px; }
  .first-block .first-title { margin: 0; }
  .first-block .btn { flex: none; }
}
/* The header lets the page show faintly through it while scrolling. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .top { background: rgba(241, 235, 230, 0.92); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); }
}
.sticky-bar:hover > span { background: var(--plum-deep); }
.btn:active, .chips a:active, .sticky-bar:active > span { transform: translateY(1px); }
.top-links .lang:hover { border-color: var(--ink); }
.featured-cover img { transition: transform 0.4s ease; }
.featured a:hover .featured-cover img, .featured a:focus-visible .featured-cover img { transform: scale(1.03); }
.featured-play { transition: transform 0.25s ease; }
.featured a:hover .featured-play { transform: translate(-50%, -50%) scale(1.08); }
::selection { background: var(--plum); color: var(--paper); }
@media (prefers-reduced-motion: no-preference) {
  a, .btn, .chips a, .top-links .lang, .badge, input, select, textarea { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease; }
  /* The opening rises in once, in order: heading, line, offer. */
  .hero h1, .hero .lead, .hero .first-block { animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero .lead { animation-delay: 0.06s; }
  .hero .first-block { animation-delay: 0.12s; }
}
@media (prefers-reduced-motion: reduce) { .featured-cover img, .featured-play, .featured > li { transition: none; } .featured { scroll-behavior: auto; } }
@keyframes rise { from { transform: translateY(10px); } } /* movement only, no fade: text keeps its full contrast at every moment (A-805), like the sections' entrance */
input:hover, select:hover, textarea:hover { border-color: var(--ink); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--plum); outline-offset: 0; }
/* Signed-in teachers have three header links; on phones the mark stands alone so the links never sit on the name. */
@media (max-width: 479px) { .top:has(.top-links > :nth-child(3)) .wordmark { display: none; } }

/* Opening, toned down (Nelly, 15 Oct, after the plum version: "the whole website is screaming"; calmer, still
   catching the eye). Sand ground; the title in ink across the column, capped at 4rem instead of display size; the line
   in ink 2 beside the dancer; the 5 € offer in the cocoa block REQUIREMENTS asks for ("a dark block"), the one dark focal point on the light page. The
   dancer is the Cream colourway (the approved transparent-on-light file: ink dancer, plum pole) straight on the sand,
   no panel behind her (Nelly, 15 Oct: the grey background had to go), in a 1:2 box whose object-fit trims only empty ground, never hand or toe. */
.hero { padding: 28px 0 40px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(96px, 30vw, 200px); grid-template-areas: "title title" "lead mark" "offer offer"; column-gap: 20px; align-items: center; }
.hero h1 { grid-area: title; font-size: min(calc((100vw - 32px) / 11), 4rem); line-height: 1.08; max-width: none; margin: 0 0 20px; }
.hero-mark { grid-area: mark; display: block; width: 100%; height: auto; aspect-ratio: 1 / 2; object-fit: cover; }
.hero .lead { grid-area: lead; color: var(--ink2); margin: 0; }
.hero .first-block { grid-area: offer; margin-top: 24px; }
@media (prefers-reduced-motion: no-preference) { .hero-mark { animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; } }
/* From 700 px: the text left, the dancer right; the empty rows above and below centre the text beside her. */
@media (min-width: 700px) {
  .hero { padding: 56px 0 64px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) clamp(180px, 22vw, 280px); grid-template-rows: 1fr auto auto auto 1fr; grid-template-areas: ". mark" "title mark" "lead mark" "offer mark" ". mark"; column-gap: clamp(40px, 6vw, 96px); }
  .hero h1 { font-size: min(calc((100vw - 32px) / 15), 4rem); margin-bottom: 20px; } /* 3 lines at 768 px, 2 from 1024 px */
  .hero .lead { font-size: clamp(1.2rem, 1.8vw, 1.45rem); line-height: 1.45; align-self: start; max-width: 34ch; }
  .hero .first-block { align-self: start; margin-top: 36px; }
  .hero .first-title { font-size: 1.4rem; }
}
@media (min-width: 900px) { .hero .first-block { max-width: 40rem; } }
#first .ticks { max-width: 62ch; }

/* The rest of the home page in the opening's voice (Nelly, 15 Oct): more room and bigger section titles on wider
   screens, an ink rule over each class type, the address as a statement, and the dancer closing the footer. */
@media (min-width: 700px) {
  main > section[id] { padding: 56px 0 64px; }
  main > section[id] h2 { font-size: 2.3rem; line-height: 1.15; margin-bottom: 20px; }
}
.types { gap: 28px 40px; }
.type h3 { font-size: 1.25rem; margin-bottom: 6px; }
.type .small { margin: 0; font: 600 0.92rem/1.3 "Golos Text", "Onest", sans-serif; font-variant-numeric: tabular-nums; }
#find .address { font: 600 1.35rem/1.35 "Golos Text", "Onest", sans-serif; }
#find .address strong { font-weight: 600; } /* "bolder" than 600 would be 900 (A-803) */
@media (min-width: 700px) {
  #find .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; align-items: start; }
  #find h2 { grid-column: 1 / -1; }
  #find .address { grid-column: 1; grid-row: 2; }
  #find .address ~ p { grid-column: 2; }
  #find .btn { grid-column: 1; grid-row: 3; justify-self: start; }
}
/* No dancer in the footer: the header and the opening already carry the logo (Nelly, 16 Oct: "too many logos"). */
@media (min-width: 700px) { .foot { padding-block: 40px; } }

/* Second pass after an outside review (15 Oct). */
/* Teachers on laptops (Nelly, 15 Oct: "have it nice looking"): each teacher's text and photos side by side, sides
   alternating down the list, so the column is used edge to edge. Photos stay whole: the row only shrinks them evenly. */
@media (min-width: 1024px) {
  .teacher-block.has-photos { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 48px; align-items: center; }
  .teachers > li:nth-child(even) .teacher-block.has-photos { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .teachers > li:nth-child(even) .teacher-photos { order: -1; }
  .teacher-block.has-photos .teacher-text { max-width: none; }
  /* Three or more photos would come out small beside the text: that teacher keeps text over one full-width row. */
  .teacher-block.has-photos:has(.teacher-photos > img:nth-child(3)) { grid-template-columns: minmax(0, 1fr); }
  .teacher-block.has-photos:has(.teacher-photos > img:nth-child(3)) .teacher-text { max-width: 68ch; }
  .teachers > li:nth-child(even) .teacher-block.has-photos:has(.teacher-photos > img:nth-child(3)) .teacher-photos { order: 0; }
  /* Class types three across, so five read 3 + 2 rather than 2 + 2 + 1. */
  .types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 10/10 pass (Nelly, 15 Oct: "get it to 10/10"), measured with the taste inspector. Space, tone and scale do the work
   that lines and boxes did: no rule under the header, between prices or between questions; tags are filled tints. */
.top { border-bottom: 0; }
.prices div { border-bottom: 0; padding: 10px 0; }
.prices dt { font-size: 1.05rem; }
.prices dd { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
/* Quiet notes under a label or a total, as on the price-list posters: "за нови посетители", "14 € на тренировка". */
.prices .price-note { display: block; flex-basis: 100%; font: 400 0.85rem/1.3 "Onest", system-ui, sans-serif; color: var(--ink2); }
.prices dd { text-align: right; } /* the total stays on the right edge above its per-class note */
.prices dd .price-note { margin-top: 2px; }
.tag { border: 0; padding: 3px 10px; background: var(--plum); color: var(--paper); } /* the badges are the two accents, solid, palette colours only (Nelly): white on plum 4.6:1 */
.tag-best_value .tag { background: rgb(104, 122, 98); } /* Nelly's solid sage badge, 6 % deeper so white text reaches 4.6:1 (the site keeps 4.5:1 for every text, A-805; plain sage gave 4.16:1); still sage to QA A-804 (RGB distance 11 < 12) and to the eye */
details { border-bottom: 0; padding: 10px 0; }
summary { font-size: 1.05rem; }
/* The section menu: plain links that wrap, never a row cut at the screen edge. */
.section-nav.chips { flex-wrap: wrap; overflow: visible; gap: 0 22px; margin: 0 auto; padding-top: 14px; padding-bottom: 14px; }
.section-nav.chips a { min-height: 44px; padding: 0; background: none; border: 0; border-radius: 0; font-size: 1rem; }
.section-nav.chips a:hover { color: var(--plum); }
/* Class types: the name leads; the length stays a quiet note under the description (Nelly: a huge "75 минути" read
   as the headline). */
.type h3 { font-size: 1.35rem; margin-bottom: 6px; }
.type .small { margin: 8px 0 0; color: var(--ink2); }
@media (min-width: 900px) {
  /* Wide screens: the title holds the left of each of these sections and the content the right. */
  #prices .wrap, #first .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; }
  #prices .wrap > h2, #first .wrap > h2, #prices .wrap > .sec-head, #first .wrap > .sec-head { grid-column: 1; grid-row: 1; }
  #prices .prices { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  #prices .ticks { grid-column: 1; grid-row: 2; max-width: 44ch; margin: 8px 0 0; }
  #first .ticks { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 1.1rem; }
  #first .btn { grid-column: 1; grid-row: 2; justify-self: start; }
  /* The questions: the title above, then two columns over the page's width, read down the first, then the second. */
  .faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(40px, 6vw, 96px); align-items: start; } /* each column on its own: an open answer moves only the questions under it */
}
/* The close: "Как да ни намерите" and the footer are one soft field (a slightly deeper sand); the contacts are said once,
   here. */
#find { background: rgba(42, 35, 38, 0.05); }
#find .address { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
body:has(#find) .foot { padding-top: 0; }
body:has(#find) .foot .wrap > p:first-of-type { display: none; }
/* Entrance: each section's parts rise in once as it comes into view (static/reveal.js). Only when that script runs and
   the visitor has not asked for less motion. Movement only, no fade: text keeps its full contrast at every moment (A-805). */
.reveal .rv { transform: translateY(28px); transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal .rv.in { transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal .rv { transform: none; transition: none; } }

/* Sheets (views/sheet.tsx, static/sheet.js): every page but the home page opens over it, in the home page's own voice
   (Nelly, 16 Oct: "has to look elegant", the home page is the measure): the sand ground, words and space instead of
   boxes and lines, white only for fields and the one card that matters, one solid plum button per sheet. Phones: the
   sheet rises from the bottom, up to 94 % of the screen; from 900 px a panel on the right, full height. */
html.has-sheet { overflow: hidden; }
.sheet { position: fixed; inset: auto 0 0 0; z-index: 41; width: 100%; max-width: none; max-height: 94dvh; margin: 0; padding: 0; border: 0; border-radius: 2px 2px 0 0; background: var(--sand); color: var(--ink); overflow: hidden; overscroll-behavior: contain; }
.sheet[open] { display: flex; flex-direction: column; }
.sheet::backdrop { background: rgba(42, 35, 38, 0.36); }
.sheet-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(42, 35, 38, 0.36); } /* without the script: the dimmed page links home */
.sheet-grip { flex: none; width: 36px; height: 4px; margin: 10px auto 0; background: var(--line); border-radius: 2px; }
.sheet-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px 4px 24px; }
.sheet-bar h2 { margin: 0; font-size: 1.6rem; line-height: 1.2; }
.sheet-x { flex: none; display: grid; place-items: center; width: 44px; height: 44px; color: var(--ink2); }
.sheet-x:hover { color: var(--plum); }
.sheet-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 8px 24px 24px; }
.sheet:has(.who-tabs) { height: 94dvh; } /* the two tabs' forms differ in length: the sheet keeps its height when they switch */
/* The button bar: the form's last part stays at the foot while the fields scroll under it (bottom: −24px covers the
   body's bottom padding, which sticky leaves free). */
.sheet-act { position: sticky; bottom: -24px; z-index: 1; display: grid; gap: 8px; margin: 16px -24px -24px; padding: 12px 24px calc(14px + env(safe-area-inset-bottom)); background: rgba(241, 235, 230, 0.94); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .sheet-act { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } }
.sheet-act .btn { width: 100%; }
.sheet-act .pay-line { margin: 0; text-align: center; color: var(--ink2); font-size: 0.92rem; }
.sheet-act .pay-line strong { color: var(--ink); }
@media (min-width: 900px) {
  .sheet { inset: 0 0 0 auto; width: min(34rem, 100%); height: 100dvh; max-height: none; border-radius: 0; }
  .sheet-grip { display: none; }
  .sheet-bar { padding: 28px 24px 8px 40px; }
  .sheet-bar h2 { font-size: 2rem; }
  .sheet-body { padding: 8px 40px 32px; }
  .sheet-act { bottom: -32px; margin: 20px -40px -32px; padding: 16px 40px 24px; }
  .sheet:has(.who-tabs) { height: 100dvh; }
}
@media (prefers-reduced-motion: no-preference) {
  .sheet[open] { animation: sheet-up 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .sheet[open]::backdrop { animation: sheet-dim 0.28s ease-out; }
  .sheet.is-closing { animation: sheet-down 0.18s ease-in forwards; }
  .sheet.is-closing::backdrop { animation: sheet-dim 0.18s ease-in reverse forwards; }
  @media (min-width: 900px) {
    .sheet[open] { animation-name: sheet-in; }
    .sheet.is-closing { animation-name: sheet-out; }
  }
}
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes sheet-down { to { transform: translateY(100%); } }
@keyframes sheet-in { from { transform: translateX(100%); } }
@keyframes sheet-out { to { transform: translateX(100%); } }
@keyframes sheet-dim { from { opacity: 0; } }
html.is-loading, html.is-loading a { cursor: progress; }
.btn.is-busy { opacity: 0.75; cursor: progress; }

/* Inside a sheet: the home page's type and space; parts separate by space, not lines. */
.sheet form.stack { max-width: none; gap: 16px; }
.sheet .notice { margin: 4px 0 16px; }
.sheet fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.sheet legend { padding: 0; margin-bottom: 10px; font-weight: 600; }
.sheet-what { padding: 4px 0 20px; }
.sheet-what p { margin: 0; }
.sheet-when { margin: 12px 0 4px !important; font: 600 1.5rem/1.25 "Golos Text", "Onest", sans-serif; letter-spacing: -0.005em; }
.sheet-terms { margin-top: 12px !important; color: var(--ink2); font-size: 0.92rem; max-width: 52ch; }
.sheet-link { justify-self: start; font-weight: 500; color: var(--ink2); }
.sheet-after { margin-top: 24px; color: var(--ink2); }
.sheet-after a { color: var(--ink); }
.sheet-sub { margin: 32px 0 8px; font-size: 1.15rem; }
.sheet-list { list-style: none; margin: 0; padding: 0; }
.sheet-list > li { padding: 10px 0; }
.row-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.row-title { display: block; font: 600 1.05rem/1.35 "Golos Text", "Onest", sans-serif; letter-spacing: -0.005em; color: var(--ink); }
a.row-title:hover { color: var(--plum); }
.row-sub { display: block; color: var(--ink2); font-size: 0.95rem; }
.type-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--plum); vertical-align: 1px; }
.type-dot.type-cocoa { background: var(--cocoa); }
.type-dot.type-sage { background: var(--sage); }
.type-dot.type-taupe { background: var(--ink2); }
.type-dot.type-sand { background: var(--sand); outline: 2px solid var(--plum); outline-offset: -2px; }
/* Buttons inside rows: the schedule's fine plum outline ("Запиши се"), never a stack of solid blocks. */
.btn-small { min-height: 44px; padding: 6px 14px; font-size: 0.95rem; white-space: nowrap; }
.sheet-list .btn:not(.btn-quiet), .row-acts .btn:not(.btn-quiet) { background: var(--paper); border-color: var(--plum); color: var(--ink); }
.sheet-list .btn:not(.btn-quiet):hover, .row-acts .btn:not(.btn-quiet):hover { background: var(--plum); color: var(--paper); }
.sheet .btn-quiet.btn-small, .linkish { min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink2); font: 500 0.95rem "Onest", sans-serif; cursor: pointer; }
.sheet .btn-quiet.btn-small:hover, .linkish:hover { background: none; color: var(--plum); }
.linkish { color: var(--ink); }
.lang-pick { display: flex; align-items: center; gap: 6px; color: var(--ink2); }
.lang-pick .linkish { font-weight: 400; color: var(--ink2); }
.lang-pick .linkish[aria-pressed="true"] { font-weight: 600; color: var(--ink); }
.ask { display: grid; gap: 12px; margin-top: 12px; padding: 16px; background: var(--paper); }
.ask p { margin: 0; }
.ask-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ask-btns .btn { min-height: 44px; padding-inline: 10px; }
.me-card { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 4px 0; padding: 18px 20px; background: var(--paper); }
.me-card > div:first-child { display: grid; gap: 4px; }
.me-left-line { font-weight: 500; }
.me-left { margin-inline: 2px; font: 600 2.2rem/1 "Golos Text", "Onest", sans-serif; letter-spacing: -0.005em; vertical-align: -4px; }
.me-until { text-align: right; }
.me-until strong { color: var(--ink); font-weight: 600; }
.me-nocard { display: block; color: var(--ink2); background: none; padding: 0; }
.me-owed { margin: 4px 0 12px; padding: 14px 16px; background: var(--paper); }
.me-owed strong { color: #8B1E2F; }
.me-past { margin-top: 28px; }
.me-past summary, .new-person summary, .req-more summary, .extend summary { min-height: 44px; display: flex; align-items: center; font-weight: 500; color: var(--ink2); cursor: pointer; }
.sheet .hall { margin-top: 16px; background: var(--paper); }
.sheet .rules h3 { margin: 28px 0 8px; font-size: 1.15rem; }
.sheet .rules .lead { margin-top: 4px; }
.sheet .rules .ticks li { margin-bottom: 10px; }
/* Two tabs above the forms: words with an ink line under the chosen one (radios, so no script is needed). */
.seg { display: flex; gap: 28px; margin: 4px 0 20px; }
.seg label { position: relative; display: flex; align-items: center; min-height: 44px; font-weight: 500; color: var(--ink2); cursor: pointer; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; margin: 0; }
.seg label { border-bottom: 2px solid transparent; }
.seg label:has(input:checked) { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.seg label:has(input:focus-visible) { outline: 3px solid var(--plum); outline-offset: 2px; }
.who-have { display: none !important; }
.who-tabs:has(input[value="have"]:checked) .who-have { display: grid !important; }
.who-tabs:has(input[value="have"]:checked) .who-new { display: none !important; }

/* "Are you sure?" (site.js): the site's own small dialog instead of the browser's box. */
.confirm { position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; margin: 0; padding: 24px 24px calc(18px + env(safe-area-inset-bottom)); border: 0; border-radius: 2px 2px 0 0; background: var(--sand); color: var(--ink); }
.confirm::backdrop { background: rgba(42, 35, 38, 0.36); }
.confirm p { margin: 0 0 20px; font: 600 1.2rem/1.4 "Golos Text", "Onest", sans-serif; letter-spacing: -0.005em; }
.confirm-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.confirm-btns .btn { min-height: 48px; padding-inline: 12px; }
@media (min-width: 900px) { .confirm { inset: 0; width: min(28rem, calc(100% - 32px)); height: fit-content; margin: auto; padding: 32px; border-radius: 2px; } }
@media (prefers-reduced-motion: no-preference) {
  .confirm[open] { animation: sheet-up 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .confirm[open]::backdrop { animation: sheet-dim 0.24s ease-out; }
  @media (min-width: 900px) { .confirm[open] { animation: confirm-in 0.18s ease-out; } }
}
@keyframes confirm-in { from { opacity: 0; transform: translateY(8px); } }

/* The admin on the site (views/studio.tsx). On the schedule a teacher sees who is coming, in the same fine plum outline
   as "Запиши се", and a quiet + on each day; her bar is a translucent sand strip like the visitors' sticky bar. */
/* Who is coming, as plain words in the schedule's own type: "5/8 ›", no box or fill (Nelly, 16 Oct: the boxed count was
   "ugly"); plum on hover, like the week arrows. */
.slot-action .btn.who, .slot-action .btn.who:hover, .slot-action .btn.who:not(.btn-quiet) { gap: 8px; min-width: 0; padding: 8px 2px 8px 10px; background: none; border-color: transparent; color: var(--ink); font: 600 1.15rem "Golos Text", "Onest", sans-serif; font-variant-numeric: tabular-nums; }
.slot-action .btn.who svg { color: var(--ink2); }
.slot-action .btn.who:hover, .slot-action .btn.who:hover svg { color: var(--plum); }
.slot-action .btn.who.is-off { color: var(--ink2); font: 500 0.95rem "Onest", sans-serif; }
.day-add { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -10px -12px -10px auto; color: var(--ink2); align-self: center; }
.day-add:hover { color: var(--plum); }
@media (min-width: 700px) { .day-name .day-add { align-self: flex-start; margin: 2px 0 0 -12px; } } /* under the date, on the day column's edge */
.abar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr); padding: 4px 8px calc(4px + env(safe-area-inset-bottom)); background: rgba(241, 235, 230, 0.94); border-top: 1px solid var(--line); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .abar { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } }
.abar a { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 52px; padding: 4px; color: var(--ink); font: 500 0.78rem "Onest", sans-serif; }
.abar a:hover { color: var(--plum); }
.abar svg { width: 22px; height: 22px; }
.abar-plus { display: grid; place-items: center; width: 32px; height: 26px; background: var(--plum); color: var(--paper); border-radius: 2px; }
/* "Нова тренировка" is "Нова" under the + on phones (screen readers hear it whole), in full from 900 px. */
.abar-more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.abar-count { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; background: var(--plum); color: var(--paper); font: 600 0.72rem/18px "Onest", sans-serif; text-align: center; border-radius: 2px; }
body:has(.abar) .foot { padding-bottom: 88px; }
@media (min-width: 900px) {
  .abar { position: sticky; top: 61px; bottom: auto; display: flex; justify-content: flex-end; gap: 4px; padding: 0 max(16px, calc((100% - var(--col)) / 2 + 16px)); border-top: 0; border-bottom: 1px solid var(--line); }
  .abar a { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 12px; font-size: 0.95rem; }
  .abar svg { width: 18px; height: 18px; }
  .abar-plus { width: 24px; height: 24px; }
  .abar-count { position: static; }
  .abar-more { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  body:has(.abar) .foot { padding-bottom: 0; }
}
/* Who is coming */
.people > li { padding: 14px 0; }
.people .row-top > div:first-child { flex: 1 1 auto; min-width: 0; }
.owe { color: #8B1E2F; font-weight: 600; }
.icon-btn { flex: none; display: grid; place-items: center; width: 44px; height: 44px; color: var(--ink2); }
.icon-btn:hover { color: var(--plum); }
.tog { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 2px; } /* the gap draws the line between the two */
.tog button { min-width: 56px; min-height: 44px; padding: 0 10px; border: 0; background: var(--paper); color: var(--ink); font: 500 0.95rem "Onest", sans-serif; cursor: pointer; }
.tog button.is-yes { background: var(--sage); color: var(--paper); font-weight: 600; }
.tog button.is-no { background: var(--cocoa); color: var(--paper); font-weight: 600; }
.tog button:disabled { color: rgba(42, 35, 38, 0.32); cursor: default; }
.row-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.row-acts:not(:empty) { margin-top: 8px; }
.row-acts form.inline, .class-acts form.inline { display: inline; margin: 0; }
.row-acts .btn-quiet { min-height: 40px; padding: 0; border: 0; background: none; color: var(--ink2); font: 500 0.92rem "Onest", sans-serif; }
.row-acts .btn-quiet:hover { color: var(--plum); background: none; }
.class-acts { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 32px; }
.class-acts .btn-quiet { min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink2); font: 500 0.95rem "Onest", sans-serif; }
.class-acts .btn-quiet:hover { color: var(--plum); background: none; }
.waiting { list-style: decimal inside; }
.search-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.search-row input, .search-row select { min-height: 44px; }
.has-sheets .search-row [data-refresh] { display: none; }
.has-sheets .search-row:has([data-refresh]) { grid-template-columns: 1fr; }
.matches form.row-top { margin: 0; }
.new-person { margin-top: 12px; }
.day-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; }
.day-nav strong { font: 600 1.1rem "Golos Text", sans-serif; }
.day-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "time count" "what count"; align-items: center; column-gap: 12px; color: var(--ink); }
.day-row .row-title { grid-area: time; }
.day-row .row-sub { grid-area: what; }
.day-count { grid-area: count; font: 600 1.05rem "Golos Text", sans-serif; font-variant-numeric: tabular-nums; }
.day-row:hover .row-title { color: var(--plum); }
/* Choices as words, the chosen one in bold with its line (like the request form's disciplines and teachers). */
.word-picks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; }
.word-pick { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-weight: 400; cursor: pointer; }
.word-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; margin: 0; pointer-events: none; }
.word-pick > span { padding-bottom: 4px; border-bottom: 3px solid transparent; }
.word-pick:has(input:checked) > span { font-weight: 700; }
.word-pick:has(input:checked) > span:not(.word-line) { border-bottom-color: var(--plum); } /* a class type keeps its own colour line */
.word-pick:has(input:focus-visible) > span { outline: 2px solid var(--plum); outline-offset: 3px; }
.word-pick:hover > span { color: var(--plum); }
.word-pick.is-away > span { color: var(--ink2); }
.word-pick > .word-line { border-bottom-color: var(--plum); } /* each class type shows its colour as the line */
.word-pick > .line-cocoa { border-bottom-color: var(--cocoa); }
.word-pick > .line-sage { border-bottom-color: var(--sage); }
.word-pick > .line-taupe { border-bottom-color: var(--ink2); }
.word-pick > .line-sand { border-bottom-color: var(--line); }
.pick-note { margin: 8px 0 0; color: var(--ink2); font-size: 0.92rem; }
/* The calendar and the times: numbers on the sand, the chosen one in plum (white on plum 4.6:1). */
.new-class .cal { gap: 4px; }
.new-class .cal-wd, .new-class .cal-gap, .new-class .cal-day, .new-class .cal-month { flex-basis: calc((100% - 24px) / 7); }
.new-class .cal label { display: contents; }
.new-class .cal-day { background: transparent; border: 0; border-radius: 2px; font-weight: 500; }
.new-class .cal-day:hover { background: var(--paper); }
.new-class .cal-radio:checked + .cal-day { background: var(--plum); color: var(--paper); outline: 0; font-weight: 600; }
.new-class .cal-radio:disabled + .cal-day { background: transparent; opacity: 0.4; }
.later { display: grid; gap: 6px; margin-top: 12px; font-weight: 400; color: var(--ink2); }
.time-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr)); gap: 4px; }
.time-pick { position: relative; cursor: pointer; }
.time-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; margin: 0; pointer-events: none; }
.time-pick span { display: grid; place-items: center; min-height: 44px; border-radius: 2px; font: 500 1rem "Golos Text", "Onest", sans-serif; font-variant-numeric: tabular-nums; }
.time-pick:hover span { background: var(--paper); }
.time-pick:has(input:checked) span { background: var(--plum); color: var(--paper); font-weight: 600; }
.time-pick:has(input:focus-visible) span { outline: 2px solid var(--plum); outline-offset: 2px; }
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.step { display: flex; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 2px; }
.step input { min-width: 0; border: 0; text-align: center; font: 600 1.05rem "Golos Text", sans-serif; -moz-appearance: textfield; }
.step input::-webkit-inner-spin-button, .step input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.step button { flex: none; width: 44px; min-height: 46px; border: 0; background: var(--paper); color: var(--ink); font: 500 1.2rem "Golos Text", sans-serif; cursor: pointer; }
.step button:hover { color: var(--plum); }
.has-sheets .new-class .refresh { display: none; }
/* Заявки and a person's sheet */
.requests > li { display: grid; gap: 4px; padding: 16px 0 20px; }
.req-when { font: 600 1.05rem/1.35 "Golos Text", "Onest", sans-serif; }
.req-form { display: grid; gap: 8px; margin-top: 10px; }
.req-btns { display: flex; align-items: center; gap: 8px; }
.req-btns .btn { flex: 1 1 auto; }
.req-more .stack { display: grid; gap: 14px; padding-top: 4px; }
.requests form.inline { justify-self: start; }
.client-contact { display: flex; flex-wrap: wrap; gap: 2px 18px; align-items: center; }
.client-contact a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.extend { margin-top: 4px; text-align: left; }
.extend .stack { display: grid; gap: 8px; }
/* Cash sales: a price list like the home page's, each row one tap (asked first). */
.sell form { margin: 0; }
.sell-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 12px; width: 100%; min-height: 48px; padding: 8px 0; border: 0; background: none; color: var(--ink); font: 500 1.02rem "Onest", sans-serif; text-align: left; cursor: pointer; }
.sell-row strong { font: 600 1.2rem "Golos Text", sans-serif; font-variant-numeric: tabular-nums; }
.sell-row:hover, .sell-row:hover strong { color: var(--plum); }
/* Changing the home page (views/edit.tsx): a teacher's quiet "Промени" beside a section title, and the edit sheets,
   which read like the sections they change (prices as the price list, texts as text). */
.sec-edit { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-left: 14px; padding: 0 4px; vertical-align: middle; font: 500 0.95rem "Onest", sans-serif; letter-spacing: 0; color: var(--ink2); }
.sec-edit:hover { color: var(--plum); }
.lead .sec-edit { margin-left: 4px; font-size: 0.9rem; }
.money-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; font-weight: 500; }
.money { display: inline-flex; align-items: center; gap: 6px; font: 600 1.1rem "Golos Text", sans-serif; }
.money input { width: 6.5rem; text-align: right; font: 600 1.1rem "Golos Text", sans-serif; font-variant-numeric: tabular-nums; }
.card-edit { display: grid; gap: 4px; }
.card-more { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.card-more .word-pick { font-size: 0.92rem; }
.inline-field { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; color: var(--ink2); font-size: 0.92rem; }
.inline-field input { width: 4.5rem; min-height: 40px; text-align: center; }
.lang-en > summary { min-height: 44px; display: flex; align-items: center; font-weight: 500; color: var(--ink2); cursor: pointer; }
.lang-en[open] > summary { color: var(--ink); }
.lang-en .stack { display: grid; gap: 16px; padding-top: 8px; }
.teacher-row { display: flex; align-items: center; gap: 14px; color: var(--ink); }
.teacher-row img, .post-row img { flex: none; object-fit: cover; border-radius: 2px; }
.teacher-row:hover .row-title { color: var(--plum); }
.no-photo { flex: none; width: 48px; height: 48px; background: var(--paper); border-radius: 2px; }
.photo-row { list-style: none; margin: 0 0 12px; padding: 0 0 4px; display: flex; gap: 14px; overflow-x: auto; }
.photo-row li { flex: none; display: grid; gap: 4px; }
.photo-row img { display: block; height: 120px; width: auto; border-radius: 2px; }
.photo-row .row-acts { margin: 0; gap: 0 12px; }
.photo-add { margin: 0; }
.photo-add .btn { cursor: pointer; }
.faq-edit { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: q; }
.faq-edit li { display: grid; gap: 6px; }
.faq-edit input { font-weight: 600; }
.post-row { display: flex; gap: 14px; align-items: flex-start; }
.post-row .no-photo { width: 54px; height: 68px; }
.post-what { display: grid; gap: 2px; min-width: 0; }
.post-what .row-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-what .row-acts { margin-top: 2px; }
/* Ticks and choices in the brand's plum instead of the browser's blue. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--plum); }
.me-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; padding: 10px 16px; background: var(--paper); }
.me-line .btn:not(.btn-quiet) { background: var(--paper); border-color: var(--plum); color: var(--ink); }
.me-line .btn:not(.btn-quiet):hover { background: var(--plum); color: var(--paper); }
.me-line .btn-quiet { min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink2); }
form.me-line { justify-content: flex-start; background: none; padding: 0; }
/* How a visitor without a card pays (booking sheet, Nelly, 16 Oct): rows like the price list; the card list opens only
   when "Заявете карта" is chosen; the button under it is the one for the choice, with its price. */
.pay-choice { margin: 0; }
.pay-rows, .card-picks { display: grid; }
.pay-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 48px; font-weight: 400; cursor: pointer; }
.pay-row input { width: 20px; height: 20px; min-height: 0; margin: 0; }
.pay-row strong { font: 600 1.15rem "Golos Text", "Onest", sans-serif; font-variant-numeric: tabular-nums; }
.pay-row:has(input:checked) > span { font-weight: 600; }
.pay-row .row-sub { font-weight: 400; font-size: 0.88rem; }
.card-picks { display: none; padding: 2px 0 8px 32px; }
.card-picks .muted { margin: 6px 0 0; }
.pay-choice:has(input[name="pay"][value="card"]:checked) .card-picks { display: grid; }
@supports selector(:has(*)) {
  form:has(.pay-choice) .sheet-act .btn { display: none; }
  form:has(input[name="pay"][value="first"]:checked) .sheet-act .act-first,
  form:has(input[name="pay"][value="single"]:checked) .sheet-act .act-single,
  form:has(input[name="pay"][value="card"]:checked):has(input[name="card"][value="card4"]:checked) .sheet-act .act-card4,
  form:has(input[name="pay"][value="card"]:checked):has(input[name="card"][value="card8"]:checked) .sheet-act .act-card8,
  form:has(input[name="pay"][value="card"]:checked):has(input[name="card"][value="card12"]:checked) .sheet-act .act-card12 { display: inline-flex; }
}
@supports not selector(:has(*)) { .pay-choice { display: none; } form .sheet-act .btn + .btn { display: none; } } /* older browsers: no choice, the default way and its own button and price */
#sheet-title:focus { outline: none; } /* focused on open so reading starts at the title; it is not a control */

/* Audit fixes: tap targets of at least 44 px for links inside sheets (F28); destructive actions in the error red,
   apart from "Промени" (F26); the calendar's month marks and the missing-time hint (F27); a quiet line for the email
   reminder (F32); the person sheet's class picker on its own row (F35). */
.sheet-after a, .sheet-link, .sheet .day-sheet .sheet-after a, .sheet .row-sub a, .requests .row-sub a, .sheet .sheet-list > li > a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }
.class-acts form[action$="/cancel"] button, .sheet form[action$="/drop"] button { color: #8B1E2F; }
.class-acts form[action$="/cancel"] button:hover, .sheet form[action$="/drop"] button:hover { color: var(--ink); }
.cal-day { flex-direction: column; gap: 0; line-height: 1.05; }
.cal-mon { font: 500 0.62rem/1 "Onest", sans-serif; letter-spacing: 0; color: inherit; opacity: 0.8; }
.new-class:has(input[name="time"]:checked) .time-hint { display: none; }
.new-class:not(:has(input[name="time"]:checked)) .sheet-act .btn { opacity: 0.55; pointer-events: none; }
.time-hint { margin: 0; }
.later { margin-top: 8px; }
.later summary { min-height: 44px; display: flex; align-items: center; color: var(--ink2); font-weight: 500; cursor: pointer; }
.later input { margin-top: 4px; }
.quiet-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin: 0 0 12px; color: var(--ink2); }
.client-sheet .search-row { grid-template-columns: 1fr; }
.client-sheet .search-row select { width: 100%; }
.client-sheet .search-row .btn { justify-self: start; }
/* "Промени" beside a section title, not inside it: one header row standing where the title stands. */
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 12px; margin: 0 0 16px; }
.sec-head h2 { margin: 0; }
.sec-head .sec-edit { margin-left: 0; }