/* My Mat platform stylesheet = prototype/v8/platform.css minus the prototype panel. Platform only (schedule, booking sheet, my bookings, Elia's cabinet, 404, privacy).
   v8 over v7: colour by meaning only (booked = plum, pass = dawn, the rest quiet), format tags as dots,
   one card per day, light numerals, sea for secondary actions, light glass hub, place photos. */

:root{
  /* colour — from the dawn photo on the beach (concept.md) */
  --mist:#f4f0ee; --cloud:#e9e2e2; --mat:#ead0d8; --lilac:#cfc6d6;
  --ink:#231e24; --ink-2:#5a525a; --plum:#3a2c3c; --plum-2:#4b3a4e; --on-plum:#fbf3f5;
  /* the bottom hub glass: near-solid, so its labels keep contrast over any card, a plum one included */
  --glass:rgba(255,255,255,.92);
  --c-online:var(--lilac); --c-outdoor:var(--mat); --c-hall:#ebd8cb;
  /* format dots: a step deeper than the fills, so a 8px dot still reads */
  --dot-online:#8e7ba6; --dot-outdoor:#c27f95; --dot-hall:#b98a68;
  /* second accent from the same photo: sea and wet sand. Secondary actions and links */
  --sea:#56646f; --sand:#8a7464; --line:rgba(90,82,90,.14);
  --bad:#8a3b4a; --bad-bg:#f6e3e6; --good:#3d5a45;
  /* the two schedule actions: pass = bright dawn (ink text, 10:1), individual = sea teal (white text, 5.2:1) */
  --cta-dawn:linear-gradient(135deg,#f7c3d0 0%,#f4b3a0 55%,#f2c176 100%); --cta-dawn-hover:linear-gradient(135deg,#f3adc0 0%,#f0a089 55%,#eeb15a 100%);
  --cta-sea:#2a7a82; --cta-sea-hover:#216269;
  /* pass card: deep stops so white text keeps AA on the whole gradient; bright ones for the frame, dashes and glow */
  --pc-white:#fff; --pc-sub:#f6ecf8; --pc-chip:#2a1238; --pc-amber:#753c0a; --pc-gold:#ffc83d;
  --pc-mag:#9e1668; --pc-mag-hi:#ff4db8; --pc-sea:#0a6a70; --pc-indigo:#35339c; --pc-cyan:#4ee6e0; --pc-violet:#9a8cff;
  --dawn:linear-gradient(180deg,#d9d4da 0%,#e6d6da 38%,#efd9d6 62%,#e4cfc2 100%);

  /* type: one family, named styles. Everything else is built from these */
  --f:"Geologica",system-ui,sans-serif;
  --t-display:clamp(3rem,2.4rem + 3vw,4rem);   /* time in the sheet */
  --t-h1:clamp(2.25rem,1.8rem + 2vw,3.25rem);   /* page title */
  --t-h2:clamp(1.5rem,1.3rem + 1vw,2rem);        /* section, sheet title */
  --t-time:clamp(1.875rem,1.6rem + 1vw,2.375rem);  /* class time in lists */
  --t-title:20px; --t-lead:18px; --t-body:16px; --t-small:14px; --t-caption:13px; --t-micro:12px;

  /* spacing scale: nothing between these */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px;
  --pad:var(--s-5);

  /* radius: three steps + pill. Inner = outer − gap */
  --r-lg:28px; --r-md:20px; --r-sm:12px; --r-pill:999px;

  /* motion: one curve, two durations */
  --ease:cubic-bezier(.22,1,.36,1);
  --d-fast:200ms; --d:300ms; --d-slow:500ms;

  --shadow:0 14px 30px -20px rgba(35,28,36,.45);
}

/* ============ base ============ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--s-4)}
body{margin:0;background:var(--mist);color:var(--ink);font:400 var(--t-body)/1.55 var(--f);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--plum);outline-offset:3px;border-radius:var(--r-sm)}
::selection{background:var(--mat)}
[tabindex="-1"]:focus{outline:none}
h1,h2,h3{font-weight:400;letter-spacing:-.04em;line-height:1.05;text-wrap:balance}
p{text-wrap:pretty}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--pad)}
.muted{color:var(--ink-2)}
.small{font-size:var(--t-small);line-height:1.45;color:var(--ink-2)}
.small a,.legal a,.rule a{color:var(--sea)}
/* big numerals (times, pass count) are light: the size carries them, weight would shout */
.num-light,.cl-time b,.bk-h b,.sh .slot .big,.pass .num,.sess summary b,.lost .code{font-weight:300}
.ink{color:var(--ink)}
.nick{font-size:var(--t-small);color:var(--ink-2)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

.skip{position:fixed;left:var(--s-3);top:var(--s-3);z-index:200;padding:var(--s-3) var(--s-5);border-radius:var(--r-pill);background:var(--plum);color:var(--on-plum);
  text-decoration:none;transform:translateY(-200%);transition:transform var(--d) var(--ease)}
.skip:focus-visible{transform:none}

/* ============ buttons, chips, tags ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:52px;padding:0 var(--s-6);border-radius:var(--r-pill);border:0;
  background:var(--plum);color:var(--on-plum);font:500 var(--t-body)/1 var(--f);text-decoration:none;
  transition:transform var(--d-fast) var(--ease),background-color var(--d) var(--ease)}
.btn:active{transform:scale(.98)}
@media (hover:hover){.btn:hover{background:var(--plum-2)}}
.btn.ghost{background:#fff;color:var(--ink)}
@media (hover:hover){.btn.ghost:hover{background:var(--cloud)}}
.btn.wide{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
/* busy: keeps its width, label swaps, a quiet pulse instead of a spinner */
.btn[aria-busy="true"]{pointer-events:none;animation:busy 1.2s var(--ease) infinite alternate}
@keyframes busy{to{opacity:.6}}

.pill-btn{display:inline-flex;align-items:center;gap:var(--s-2);min-height:40px;padding:0 var(--s-4);border:0;border-radius:var(--r-pill);background:var(--mist);
  font:500 var(--t-small)/1 var(--f);text-decoration:none;white-space:nowrap;transition:background-color var(--d) var(--ease),transform var(--d-fast) var(--ease)}
.pill-btn:active{transform:scale(.97)}
.pill-btn.dark{background:var(--plum);color:var(--on-plum)}
.pill-btn:not(.dark){color:var(--sea)}
.pill-btn.on-white{background:#fff}
.pill-btn.cta-pass,.pill-btn.cta-sea{min-height:44px;padding:0 var(--s-5);font-weight:600;transition:background-color var(--d) var(--ease),box-shadow var(--d) var(--ease),transform var(--d-fast) var(--ease)}
.pill-btn.cta-pass{background:var(--cta-dawn);color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(58,44,60,.28)}
.pill-btn.cta-sea{background:var(--cta-sea);color:#fff}
.pill-btn.cta-pass:focus-visible,.pill-btn.cta-sea:focus-visible{outline:2px solid var(--plum);outline-offset:3px}
@media (hover:hover){.pill-btn.cta-pass:hover{background:var(--cta-dawn-hover)}.pill-btn.cta-sea:hover{background:var(--cta-sea-hover)}}
@media (hover:hover){.pill-btn:hover{background:var(--cloud)}.pill-btn.dark:hover{background:var(--plum-2)}}

.chip{display:inline-flex;align-items:center;gap:var(--s-2);min-height:36px;padding:0 var(--s-4);border-radius:var(--r-pill);background:var(--cloud);color:var(--sea);
  font:500 var(--t-small)/1 var(--f);text-decoration:none;white-space:nowrap;transition:background-color var(--d) var(--ease)}
@media (hover:hover){.chip:hover{background:var(--mat)}}

/* format = a dot and a word. Pills are for actions and status, not for labels */
.tag{display:inline-flex;align-items:center;gap:var(--s-2);min-height:20px;font:500 var(--t-caption)/1 var(--f);white-space:nowrap;color:var(--ink-2)}
.tag::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--ink-2)}
.tag.online::before{background:var(--dot-online)}
.tag.outdoor::before{background:var(--dot-outdoor)}
.tag.hall::before{background:var(--dot-hall)}
.tag.me,.tag.warn{min-height:28px;padding:0 var(--s-3);border-radius:var(--r-pill)}
.tag.me::before,.tag.warn::before{display:none}
.tag.me{background:var(--plum);color:var(--on-plum)}
.tag.warn{background:var(--bad-bg);color:var(--bad)}

.methods{display:grid;gap:var(--s-3);justify-items:stretch;width:100%}
.btn.google{gap:var(--s-3);background:#fff;color:var(--ink)}
.btn.google::before{content:"";width:22px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.5 0 6.6 1.2 9.1 3.6l6.8-6.8C35.8 2.4 30.3 0 24 0 14.6 0 6.5 5.4 2.6 13.2l7.9 6.1C12.4 13.6 17.7 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.5 24.5c0-1.6-.1-3.1-.4-4.5H24v9h12.7c-.6 3-2.3 5.5-4.8 7.2l7.5 5.8c4.4-4.1 7.1-10.1 7.1-17.5z'/%3E%3Cpath fill='%23FBBC05' d='M10.5 28.7a14.5 14.5 0 0 1 0-9.4l-7.9-6.1a24 24 0 0 0 0 21.6l7.9-6.1z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.5 0 11.9-2.1 15.9-5.8l-7.5-5.8c-2.1 1.4-4.9 2.3-8.4 2.3-6.3 0-11.6-4.1-13.5-9.8l-7.9 6.1C6.5 42.6 14.6 48 24 48z'/%3E%3C/svg%3E") center/contain no-repeat}
@media (hover:hover){.btn.google:hover{background:var(--cloud)}}
.login-email{display:grid;gap:var(--s-3);width:100%}
.tg{gap:var(--s-3)}
.tg::before{content:"";width:22px;height:22px;border-radius:50%;background:#fbf3f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233a2c3c' d='M17.6 7.2 6.3 11.6c-.8.3-.8.8-.1 1l2.9.9 1.1 3.4c.1.4.3.5.6.5.3 0 .4-.1.6-.3l1.4-1.4 2.9 2.2c.5.3.9.1 1-.5l1.9-9c.2-.8-.3-1.2-.9-1z'/%3E%3C/svg%3E") center/18px no-repeat}

/* ============ messages: inline error, rule, toast ============ */
.alert{display:grid;gap:var(--s-1);padding:var(--s-4) var(--s-5);border-radius:var(--r-md);background:var(--bad-bg);color:var(--bad);font-size:var(--t-small);line-height:1.45}
.alert b{font-weight:500;font-size:var(--t-body);color:var(--ink)}
.alert a{color:var(--ink)}
.rule{display:flex;gap:var(--s-3);align-items:flex-start;font-size:var(--t-small);color:var(--ink-2);line-height:1.45}
.rule::before{content:"i";flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--lilac);color:var(--ink);font:500 var(--t-micro)/1 var(--f)}
.toast{position:fixed;z-index:120;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:var(--s-3);max-width:calc(100% - 2 * var(--pad));
  padding:var(--s-3) var(--s-3) var(--s-3) var(--s-5);border-radius:var(--r-pill);background:var(--ink);color:var(--on-plum);font-size:var(--t-small);box-shadow:var(--shadow);
  transform:translate(-50%,var(--s-4));opacity:0;pointer-events:none;transition:opacity var(--d) var(--ease),transform var(--d-slow) var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast button{min-height:36px;padding:0 var(--s-4);border:0;border-radius:var(--r-pill);background:rgba(255,255,255,.14);color:inherit;font:500 var(--t-small)/1 var(--f)}
.toast:not(:has(button)){padding-right:var(--s-5)}
/* platform: the toast sizes to its text (left:50% would otherwise halve the room), and the server-rendered
   «Повернути» form is transparent to the flex row */
.toast{width:max-content}
.toast form{display:contents}

/* skeleton: same shape as the real rows, no spinner */
.skel{border-radius:var(--r-lg);background:#fff;height:84px;position:relative;overflow:hidden}
.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(233,226,226,.7),transparent);transform:translateX(-100%);animation:shine 1.4s var(--ease) infinite}
.skel.h{height:24px;width:40%;background:var(--cloud);border-radius:var(--r-pill);margin-bottom:var(--s-3)}
@keyframes shine{to{transform:translateX(100%)}}

/* ============ top line, page head, hub ============ */
.top{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--pad)}
.top .mark{font:500 var(--t-lead)/1 var(--f);letter-spacing:-.02em;text-decoration:none}
.top .who{display:inline-flex;align-items:center;gap:var(--s-2);min-height:40px;padding:0 var(--s-1) 0 var(--s-4);border-radius:var(--r-pill);background:#fff;font-size:var(--t-small);text-decoration:none}
.top .who .ava{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--mat);font-size:var(--t-small);font-weight:500}
.top .who.cabinet{padding:0 var(--s-4) 0 var(--s-3)}
.top .who.cabinet svg{width:20px;height:20px}
.top .who.tg-link{padding:0 var(--s-4) 0 var(--s-3)}
.top .who.tg-link::before{content:"";width:22px;height:22px;border-radius:50%;background:var(--plum) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fbf3f5' d='M17.6 7.2 6.3 11.6c-.8.3-.8.8-.1 1l2.9.9 1.1 3.4c.1.4.3.5.6.5.3 0 .4-.1.6-.3l1.4-1.4 2.9 2.2c.5.3.9.1 1-.5l1.9-9c.2-.8-.3-1.2-.9-1z'/%3E%3C/svg%3E") center/18px no-repeat}

.phead{padding:var(--s-1) var(--pad) 0;display:grid;gap:var(--s-2)}
.phead h1{font-size:var(--t-h1);letter-spacing:-.05em}
.phead .lead{max-width:44ch;font-size:var(--t-body);color:var(--ink-2)}
.phead-acts{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.note-acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3)}
@media (min-width:900px){.phead>.phead-acts,.on-narrow{display:none}}
@media (max-width:899px){.on-wide{display:none}}
.tzline{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--t-small);color:var(--ink-2)}
.tzline::before{content:"";width:16px;height:16px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a525a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat}

.hub{position:fixed;z-index:60;left:50%;bottom:calc(var(--s-3) + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(calc(100% - 20px),var(--hub-w,440px));
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;padding:var(--s-2);border-radius:var(--r-pill);
  background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 18px 40px -20px rgba(35,28,36,.4)}
.hub a{position:relative;display:grid;justify-items:center;align-content:center;gap:3px;min-height:56px;padding:var(--s-1) 6px;border-radius:var(--r-pill);
  color:var(--ink-2);text-decoration:none;font:400 var(--t-micro)/1.1 var(--f);text-align:center;transition:background-color var(--d) var(--ease),color var(--d) var(--ease)}
.hub svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hub a[aria-current="page"]{background:var(--plum);color:var(--on-plum)}
@media (hover:hover){.hub a:not([aria-current="page"]):hover{color:var(--ink);background:rgba(35,28,36,.05)}}
.hub .badge{position:absolute;top:var(--s-1);left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--mat);color:var(--ink);font:500 var(--t-micro)/18px var(--f)}
.hub a[aria-current="page"] .badge{background:var(--on-plum);color:var(--plum)}

/* legal line at the end of every page, above the hub */
.legal{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2) var(--s-4);padding:var(--s-8) var(--pad) calc(120px + env(safe-area-inset-bottom));font-size:var(--t-caption);color:var(--ink-2)}

/* ============ schedule ============ */
.sched{display:grid;gap:var(--s-10);padding-top:var(--s-2)}
.sched>div{min-width:0}
.days{display:grid;gap:var(--s-6)}
.days section{scroll-margin-top:calc(var(--stick,0px) + 96px)}
.day-h{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-1) var(--s-3);font-size:var(--t-title);font-weight:500;letter-spacing:-.01em;margin-bottom:var(--s-3)}
.day-h span{font-weight:400;color:var(--ink-2)}
.day-h .rel{font-size:var(--t-caption);font-weight:500;padding:var(--s-1) var(--s-3);border-radius:var(--r-pill);background:var(--plum);color:var(--on-plum)}
.week-div{display:flex;align-items:center;gap:var(--s-3);font-size:var(--t-caption);color:var(--ink-2);margin:var(--s-2) 0 calc(-1 * var(--s-2))}
.week-div::after{content:"";flex:1;height:1px;background:rgba(90,82,90,.2)}

.strip{position:sticky;top:var(--stick,0px);z-index:40;background:linear-gradient(var(--mist) 82%,rgba(244,240,238,0));padding:var(--s-3) 0 var(--s-4)}
.strip ol{display:flex;gap:var(--s-2);overflow-x:auto;scrollbar-width:none;padding:0 var(--pad);scroll-padding:0 var(--pad)}
.strip ol::-webkit-scrollbar{display:none}
.strip li.gap{flex:none;width:var(--s-2)}
.strip a{position:relative;flex:none;display:grid;text-decoration:none;justify-items:center;gap:var(--s-1);min-width:54px;padding:var(--s-2) var(--s-3);border:0;border-radius:var(--r-md);background:#fff;color:var(--ink);font:400 var(--t-micro)/1 var(--f);
  transition:background-color var(--d) var(--ease),color var(--d) var(--ease)}
.strip a b{font-weight:400;font-size:var(--t-title);letter-spacing:-.03em}
.strip a .dots{display:flex;gap:3px;height:6px}
.strip a .dots i{width:6px;height:6px;border-radius:50%}
.strip .dots .online{background:var(--dot-online)}.strip .dots .outdoor{background:var(--dot-outdoor)}.strip .dots .hall{background:var(--dot-hall)}
.strip .dots .me{background:var(--plum)}
.strip a[aria-current="true"]{background:var(--plum);color:var(--on-plum)}
.strip a[aria-current="true"] .dots .me{background:var(--on-plum)}
/* phone: the strip bleeds to the screen edge and lines up with the page text (v6 had double padding) */
@media (max-width:899px){.strip{margin:0 calc(-1 * var(--pad))}}
@media (min-width:900px){.strip ol{padding:0}}

/* each class is its own card; a small gap keeps two classes of one day reading as one group */
.cls{display:grid;gap:var(--s-2)}
/* compact card: time and format tag share the top row (tag in the corner), title and length under them, the place as a narrow strip on the right */
.cl{width:100%;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"time tag side" "sub sub side";align-items:center;gap:var(--s-1) 0;padding:var(--s-3) var(--s-4);border:0;
  border-radius:var(--r-lg);background:#fff;text-align:left;transition:background-color var(--d) var(--ease),transform var(--d-fast) var(--ease)}
a.cl{text-decoration:none}
.cl:active{transform:scale(.985)}
@media (hover:hover){.cl.is-open:hover{box-shadow:var(--shadow)}}
.cl-time b{display:block;font-size:var(--t-time);letter-spacing:-.045em;line-height:1}
.cl-time{grid-area:time}
.cl-what{display:contents}
.cl-what .tag{grid-area:tag;justify-self:end;margin-left:var(--s-3)}
.cl-what small{grid-area:sub;display:block;font-size:var(--t-caption);color:var(--ink-2);line-height:1.3}
/* right edge: the place as a full-height photo panel (square on the left, the row's radius on the right);
   a check when booked; nothing when closed */
.cl{overflow:hidden}
.cl:has(.thumb){padding-right:0}
.cl:has(.cl-go){padding-right:var(--s-3)}
.thumb{grid-area:side;align-self:stretch;display:grid;place-items:center;width:clamp(72px,20vw,112px);margin:calc(-1 * var(--s-3)) 0 calc(-1 * var(--s-3)) var(--s-4);overflow:hidden;background:var(--c-hall);color:var(--plum)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.online{background:var(--c-online)}
.thumb svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cl-go{grid-area:side;display:grid;place-items:center;width:36px;height:36px;margin-left:var(--s-3);border-radius:50%}
.cl-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cl.is-booked{background:var(--plum);color:var(--on-plum)}
.cl.is-booked small{color:rgba(251,243,245,.72)}
.cl.is-booked .tag.me{background:var(--on-plum);color:var(--plum)}
.cl.is-booked .cl-go{background:rgba(255,255,255,.14)}
/* closed and cancelled: compact and quiet, so the bookable rows lead */
.cl.is-closed,.cl.is-cancelled{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);padding-top:var(--s-3);padding-bottom:var(--s-3);cursor:default}
.cl.is-closed .cl-time b,.cl.is-cancelled .cl-time b{font-size:var(--t-title);letter-spacing:-.02em;font-weight:400}
.cl.is-cancelled .cl-time b{text-decoration:line-through;text-decoration-thickness:1.5px}
.cl.is-closed:active,.cl.is-cancelled:active{transform:none}
.rest{padding:var(--s-3) var(--s-5);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);font-size:var(--t-small)}

.side{display:grid;gap:var(--s-3);align-content:start}
.note{border-radius:var(--r-lg);background:var(--cloud);padding:var(--s-5) var(--s-6);display:grid;gap:var(--s-3)}
.note b{font-weight:500;font-size:var(--t-lead)}
.note ul{display:grid;gap:var(--s-2)}
.note li{padding-left:var(--s-5);position:relative;font-size:var(--t-small);line-height:1.45}
.note .btn{justify-self:start}
.note li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--plum)}
.legend{display:flex;flex-wrap:wrap;gap:var(--s-2)}
@media (min-width:900px){.sched{grid-template-columns:7fr 4fr;column-gap:var(--s-16);padding-top:var(--s-4)}.side{position:sticky;top:calc(var(--stick,0px) + var(--s-4))}}

/* ============ booking sheet ============ */
.sheet{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:100%;max-height:92svh;border:0;padding:0;border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--mist);color:var(--ink);
  overflow:auto;overscroll-behavior:contain}
.sheet::backdrop{background:rgba(35,28,36,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.sheet[open]{animation:up var(--d-slow) var(--ease)}
@keyframes up{from{transform:translateY(var(--s-10));opacity:.4}to{transform:none;opacity:1}}
@media (min-width:720px){.sheet{inset:0;margin:auto;max-width:540px;max-height:88vh;border-radius:var(--r-lg)}}
.sh{padding:var(--s-3) var(--pad) 0;display:grid;gap:var(--s-4)}
.sh-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);min-height:44px}
.sh-top::before{content:"";position:absolute;left:50%;top:var(--s-2);width:40px;height:5px;margin-left:-20px;border-radius:5px;background:rgba(35,28,36,.15)}
@media (min-width:720px){.sh-top::before{display:none}.sh{padding:var(--s-4) var(--s-8) 0}}
.icon-btn{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:#fff;transition:background-color var(--d) var(--ease)}
.icon-btn svg,.back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.icon-btn:hover,.back:hover{background:var(--cloud)}}
.back{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-4) 0 var(--s-3);border:0;border-radius:var(--r-pill);background:#fff;color:var(--sea);font-size:var(--t-small);transition:background-color var(--d) var(--ease)}
.sh h1,.sh h2{font-size:var(--t-h2);letter-spacing:-.045em}
a.back,a.icon-btn{text-decoration:none}
a.icon-btn{color:var(--ink)}
.sh .tag.me,.pass .tag{justify-self:start}
/* a sheet step opened as its own page (no JS, or a step's URL): the same sheet, centred on the page */
.sh-page{max-width:540px;margin:0 auto}
/* grid columns may shrink below their content, so a long card number never widens the sheet past a 390px phone */
.sh,.sh .card{grid-template-columns:minmax(0,1fr)}
/* «Купити · <price>»: the label of the checked method (server-checked one where :has is missing) */
.buy-l:not(.on){display:none}
.sh:has(input[name=method]:checked) .buy-l{display:none}
.sh:has(input[name=method][value=mono]:checked) .buy-l[data-m=mono],
.sh:has(input[name=method][value=bizum]:checked) .buy-l[data-m=bizum],
.sh:has(input[name=method][value=cash]:checked) .buy-l[data-m=cash]{display:inline}
.sh-page .sh-top::before{display:none}
.sh .slot{border-radius:var(--r-lg);background:var(--dawn);padding:var(--s-5) var(--s-6);display:grid;gap:var(--s-2);overflow:hidden}
.sh .slot-ph{margin:calc(-1 * var(--s-5)) calc(-1 * var(--s-6)) var(--s-2);width:calc(100% + 2 * var(--s-6));max-width:none;height:150px;object-fit:cover}
.sh .slot .big{font-size:var(--t-display);letter-spacing:-.055em;line-height:.9}
.sh .slot-meta{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center}
/* the main action always sits on screen, also on a 390px phone */
.sh-foot{position:sticky;bottom:0;display:grid;gap:var(--s-2);margin:0 calc(-1 * var(--pad));padding:var(--s-3) var(--pad) calc(var(--s-4) + env(safe-area-inset-bottom));
  background:linear-gradient(rgba(244,240,238,0),var(--mist) 24%)}
@media (min-width:720px){.sh-foot{margin:0 calc(-1 * var(--s-8));padding:var(--s-4) var(--s-8) var(--s-8)}}
.sh-foot .small{text-align:center}
.sh-foot .pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.sh-foot .pair .btn{padding:0 var(--s-3)}

.opts{display:grid;gap:var(--s-2);border:0;margin:0;padding:0;min-width:0}
.opts legend{padding:0 0 var(--s-2);font-weight:500;font-size:var(--t-small)}
.opt{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--s-1) var(--s-4);padding:var(--s-4) var(--s-5) var(--s-4) calc(var(--s-12) + var(--s-1));border-radius:var(--r-md);background:#fff;cursor:pointer;
  transition:box-shadow var(--d) var(--ease),background-color var(--d) var(--ease)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt::before{content:"";position:absolute;left:var(--s-5);top:50%;box-sizing:border-box;width:20px;height:20px;margin-top:-10px;border-radius:50%;border:1.5px solid rgba(35,28,36,.35);background:#fff;
  transition:border-color var(--d-fast) var(--ease),background-color var(--d-fast) var(--ease),box-shadow var(--d-fast) var(--ease)}
@media (hover:hover){.opt:not(:has(input:disabled)):hover{box-shadow:inset 0 0 0 1px rgba(58,44,60,.35)}}
.opt:has(input:checked){box-shadow:inset 0 0 0 2px var(--plum)!important}
.opt:has(input:checked)::before{border-color:var(--plum);background:var(--plum);box-shadow:inset 0 0 0 var(--s-1) #fff}
.opt:has(input:focus-visible){outline:2px solid var(--plum);outline-offset:3px}
.opt:has(input:disabled){background:var(--cloud);cursor:default;color:var(--ink-2)}
.opt b{font-weight:500}
.opt.nosub b{grid-row:1 / span 2;align-self:center}
/* a disabled option that explains itself: title and the count share the top row, the reason runs full width below */
.opt.note small{grid-column:1 / -1;grid-row:2}
.opt.note .p{grid-row:1;font-size:var(--t-body);letter-spacing:0}
.opt small{grid-column:1;display:block;font-size:var(--t-caption);color:var(--ink-2);line-height:1.35}
.opt .p{grid-column:2;grid-row:1 / span 2;text-align:right;font-size:var(--t-title);letter-spacing:-.03em;white-space:nowrap}
.opt .p small{text-align:right}
.opt.first{background:var(--mat)}
.as{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2);padding:var(--s-3) var(--s-4) var(--s-3) var(--s-5);border-radius:var(--r-md);background:#fff;font-size:var(--t-small)}
.as button{border:0;background:none;padding:var(--s-2);font:inherit;color:var(--sea);text-decoration:underline;text-underline-offset:.2em}

.done-mark{width:64px;height:64px;border-radius:50%;background:var(--plum);color:var(--on-plum);display:grid;place-items:center}
.done-mark svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.card{border-radius:var(--r-lg);background:#fff;padding:var(--s-5) var(--s-6);display:grid;gap:var(--s-3)}
.card b{font-weight:500}
/* copy field: inner radius = card radius − padding gap is < 2, so it stays a pill */
.copy span{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:clip}
.copy{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-2) var(--s-2) var(--s-2) var(--s-4);border-radius:var(--r-pill);background:var(--mist);
  font-size:var(--t-body);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.copy button{flex:none;min-height:40px;padding:0 var(--s-4);border:0;border-radius:var(--r-pill);background:var(--plum);color:var(--on-plum);font:500 var(--t-small)/1 var(--f);
  transition:background-color var(--d) var(--ease)}
.copy button.done{background:var(--good)}
/* phones: the number never wraps; the button drops under it at full width so 320-420px all fit */
@media (max-width:420px){.copy{flex-direction:column;align-items:stretch;gap:var(--s-2);padding:var(--s-3);border-radius:var(--r-md)}.copy span{flex:none;text-align:center;overflow:visible}.copy button{width:100%}}
.card .copy,.bk .copy{background:var(--mist)}
.link-row{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center}
button.chip{border:0;color:var(--ink)}
.chip.done{background:var(--plum);color:var(--on-plum)}
.meet{display:grid;gap:var(--s-2)}
.meet>.pill-btn{justify-content:center;min-height:48px}
.meet-more{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--s-2)}
.meet-more .pill-btn{justify-content:center;min-width:0}
.meet-url{text-align:center;overflow-wrap:anywhere}
.pill-btn .ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mini li{display:flex;justify-content:space-between;gap:var(--s-3);padding:var(--s-3) 0;font-size:var(--t-small)}
.mini li+li{box-shadow:0 -1px 0 var(--cloud)}
.mini li span:last-child{white-space:nowrap}

/* ============ my bookings ============ */
.mypage{display:grid;gap:var(--s-12);padding-top:var(--s-6)}
.mypage>*,.list>*,.bk>*{min-width:0} /* long values (Meet link) shrink instead of widening the page */
.stack{display:grid;gap:var(--s-12);align-content:start}
.price-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s-2)}
.prices .mini li{align-items:center}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;padding:var(--s-1);border-radius:var(--r-pill);background:var(--mist)}
.seg button,.seg label{position:relative;display:grid;place-items:center;min-height:40px;padding:0 var(--s-3);border:0;border-radius:var(--r-pill);background:none;color:var(--ink-2);font:500 var(--t-small)/1 var(--f);
  transition:background-color var(--d) var(--ease),color var(--d) var(--ease)}
.seg button[aria-pressed="true"],.seg label:has(input:checked){background:#fff;color:var(--ink);box-shadow:0 2px 8px -4px rgba(35,28,36,.3)}
/* the price switch is two radios inside the labels: no JS, CSS shows the checked scope's panel */
.seg label{cursor:pointer;text-align:center}
.seg input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.seg label:has(input:focus-visible){outline:2px solid var(--plum);outline-offset:2px}
.price-card:has(input[value="group"]:checked) .price-panel[data-scope="hall"],
.price-card:has(input[value="hall"]:checked) .price-panel[data-scope="group"]{display:none}
.price-panel{display:grid;gap:var(--s-2)}
.indiv-line{padding-top:var(--s-3);box-shadow:0 -1px 0 var(--cloud);font-size:var(--t-small)}
.buy-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s-2)}
.buy-row .btn{padding:0 var(--s-3);white-space:nowrap}
.buy-row .btn.ghost{color:var(--sea)}
.prices .mini small{display:block;font-size:var(--t-caption);color:var(--ink-2)}
.prices .pp{text-align:right;font-size:var(--t-lead);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.prices .pp small{text-align:right;letter-spacing:0}
.mypage h2{font-size:var(--t-h2);letter-spacing:-.035em;margin-bottom:var(--s-3)}
.bk{display:grid;gap:var(--s-3);border-radius:var(--r-lg);background:#fff;padding:var(--s-5) var(--s-6)}
.bk.next{box-shadow:inset 0 0 0 2px var(--plum)}
.bk-h{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-3)}
.bk-h b{display:block;font-weight:400;font-size:var(--t-time);letter-spacing:-.04em;line-height:1}
.bk-h small{display:block;font-size:var(--t-small);color:var(--ink-2);margin-top:var(--s-2)}
.bk-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s-3);padding-top:var(--s-3);box-shadow:0 -1px 0 var(--cloud)}
.bk-foot .small{max-width:32ch}
.list{display:grid;gap:var(--s-3)}
/* pass card: group = magenta to amber, hall = teal to indigo; gradient frame + glow, sparkle dots, glowing dashes. Unpaid = flat grey */
.pass{
  --pc-a:var(--pc-mag);--pc-b:var(--pc-amber);--pc-hi-a:var(--pc-mag-hi);--pc-hi-b:var(--pc-gold);--pc-fg:var(--pc-white);--pc-soft:var(--pc-sub);
  position:relative;isolation:isolate;overflow:hidden;min-width:0;display:grid;gap:var(--s-3);padding:var(--s-6);
  border:2px solid transparent;border-radius:var(--r-lg);color:var(--pc-fg);
  background:linear-gradient(145deg,var(--pc-a),var(--pc-b)) padding-box,linear-gradient(135deg,var(--pc-hi-a),var(--pc-hi-b),var(--pc-hi-a)) border-box;
  box-shadow:0 0 22px color-mix(in srgb,var(--pc-hi-a) 55%,transparent),0 0 2px var(--pc-hi-b);
  animation:pc-glow 4.5s ease-in-out infinite alternate;
}
.pass.hall{--pc-a:var(--pc-sea);--pc-b:var(--pc-indigo);--pc-hi-a:var(--pc-cyan);--pc-hi-b:var(--pc-violet)}
.pass::before,.pass::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.pass::before{opacity:.8;background:radial-gradient(circle,color-mix(in srgb,var(--pc-white) 60%,transparent) 0 1px,transparent 1.6px) 0 0/22px 22px,radial-gradient(circle,color-mix(in srgb,var(--pc-white) 38%,transparent) 0 1px,transparent 1.6px) 11px 11px/22px 22px;animation:pc-twinkle 4s ease-in-out infinite alternate}
.pass::after{background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--pc-hi-b) 14%,transparent),transparent 55%)}
.pass .tag{justify-self:start;min-height:28px;padding:0 var(--s-3);border:1px solid color-mix(in srgb,var(--pc-white) 38%,transparent);border-radius:var(--r-pill);background:var(--pc-chip);color:var(--pc-white);font-weight:600}
.pass .tag::before{display:none}
.pass .num{margin:0;font-size:clamp(4rem,3rem + 5vw,6rem);letter-spacing:-.06em;line-height:.88}
.pass .num span{font-size:.4em;letter-spacing:-.02em;color:var(--pc-soft)}
.pass .small{color:var(--pc-soft)}
.pass .cap{margin:0 0 calc(var(--s-1) * -1);font-size:var(--t-small);line-height:1.2;color:var(--pc-soft)}
/* meter: one dash per class; a filled dash = a class already used */
.meter{display:flex;gap:var(--s-2);height:14px}
.meter i{flex:1 1 0;min-width:0;border-radius:var(--r-pill)}
.meter i.on{background:linear-gradient(90deg,var(--pc-hi-a),var(--pc-hi-b));box-shadow:0 0 0 1.5px var(--pc-white),0 0 8px var(--pc-hi-a)}
.meter i.off{border:2px dashed var(--pc-fg)}
.pass.unpaid{--pc-fg:var(--ink);--pc-soft:var(--ink-2);border:1px dashed var(--ink-2);background:var(--cloud);box-shadow:none;animation:none}
.pass.unpaid::before,.pass.unpaid::after{display:none}
.pass.unpaid .tag{border-color:var(--ink-2);background:var(--mist);color:var(--ink)}
.pass.unpaid .meter i.on{background:var(--ink-2);box-shadow:none}
@keyframes pc-twinkle{from{opacity:.45}to{opacity:.95}}
@keyframes pc-glow{from{filter:brightness(1)}to{filter:brightness(1.12)}}
.empty{border-radius:var(--r-lg);background:var(--cloud);padding:var(--s-6);display:grid;gap:var(--s-3);justify-items:start}
.empty b{font-weight:500;font-size:var(--t-title)}
.empty .glyph{width:48px;height:48px;border-radius:50%;background:#fff;display:grid;place-items:center}
.empty .glyph svg{width:22px;height:22px;fill:none;stroke:var(--ink-2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hist{display:grid}
.hist li{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s-3);align-items:center;padding:var(--s-3) var(--s-1);font-size:var(--t-small)}
.hist li+li{box-shadow:0 -1px 0 var(--cloud)}
.hist time{color:var(--ink-2);font-size:var(--t-caption);min-width:52px}
.hist .dl{font-size:var(--t-lead);letter-spacing:-.02em;min-width:2.2em;text-align:right}
.hist li.ret .dl{color:#6b4f6e}
.hist-more{margin-top:var(--s-3);background:#fff}
@media (min-width:900px){.mypage{grid-template-columns:7fr 5fr;column-gap:var(--s-16);padding-top:var(--s-12)}.mypage .wide{grid-column:1 / -1}}

.confirm{border:0;border-radius:var(--r-lg);padding:var(--s-8) var(--s-6) var(--s-6);max-width:min(92vw,420px);background:var(--mist);color:var(--ink);display:none}
.confirm[open]{display:grid;gap:var(--s-4);animation:pop var(--d) var(--ease)}
@keyframes pop{from{transform:scale(.96);opacity:0}to{transform:none;opacity:1}}
.confirm::backdrop{background:rgba(35,28,36,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.confirm h1,.confirm h2,.confirm h3{font-size:var(--t-h2);letter-spacing:-.04em}
.confirm .acts{display:flex;flex-wrap:wrap;gap:var(--s-2)}
/* the same question as a page, for cancelling without JS */
.confirm-page{padding-top:var(--s-6)}
.confirm-page .confirm{display:grid;gap:var(--s-4);margin:0 auto}

/* ============ Elia's cabinet ============ */
.adm{padding-top:var(--s-6);display:grid;gap:var(--s-10)}
.adm h2{font-size:var(--t-h2);letter-spacing:-.045em;margin-bottom:var(--s-3);display:flex;align-items:baseline;gap:var(--s-3)}
.adm h2 .count{font-size:var(--t-small);letter-spacing:0;min-width:28px;height:28px;padding:0 var(--s-2);border-radius:var(--r-pill);background:var(--plum);color:var(--on-plum);display:inline-grid;place-items:center}
.adm h2 .count.zero{background:var(--cloud);color:var(--ink-2)}
.row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--s-2) var(--s-4);padding:var(--s-4) var(--s-4) var(--s-4) var(--s-5);border-radius:var(--r-md);background:#fff;
  transition:opacity var(--d) var(--ease),transform var(--d) var(--ease)}
.row.leaving{opacity:0;transform:translateX(var(--s-6))}
.row b{font-weight:500}
.row small{display:block;font-size:var(--t-caption);color:var(--ink-2);line-height:1.4}
.row .acts{display:flex;flex-wrap:wrap;gap:var(--s-2);justify-content:flex-end}
.row .acts.wide{grid-column:1 / -1;justify-content:flex-start}
.paid-form{display:contents}
.adm .note{padding:var(--s-3) var(--s-1) 0;background:none;border-radius:0}
.sh .form-fields{display:grid;gap:var(--s-3);padding-top:var(--s-3)}
.row.hot{box-shadow:inset 0 0 0 2px var(--mat)}
.paid{display:inline-flex;align-items:center;gap:var(--s-3);min-height:40px;padding:0 var(--s-4) 0 var(--s-2);border-radius:var(--r-pill);background:var(--mist);font:500 var(--t-small)/1 var(--f);cursor:pointer}
.paid input{appearance:none;margin:0;width:26px;height:26px;border-radius:50%;background:#fff;border:1.5px solid rgba(35,28,36,.3);display:grid;place-items:center;
  transition:background-color var(--d-fast) var(--ease),border-color var(--d-fast) var(--ease)}
.paid input:checked{background:var(--plum);border-color:var(--plum)}
.paid input:checked::after{content:"";width:10px;height:6px;border:solid var(--on-plum);border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg)}
.paid input:focus-visible{outline:2px solid var(--plum);outline-offset:2px}
.sess{border-radius:var(--r-lg);background:#fff;overflow:hidden}
.sess summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s-2) var(--s-4);padding:var(--s-4) var(--s-4) var(--s-4) var(--s-5)}
.sess summary::-webkit-details-marker{display:none}
.sess summary b{font-weight:400;font-size:var(--t-time);letter-spacing:-.04em;line-height:1}
.sess summary .n{min-width:36px;height:36px;padding:0 var(--s-3);border-radius:var(--r-pill);background:var(--mist);display:grid;place-items:center;font-size:var(--t-small)}
.sess[open] summary{box-shadow:0 1px 0 var(--cloud)}
.sess .who-list li{display:grid;grid-template-columns:1fr auto;gap:var(--s-1) var(--s-3);align-items:center;padding:var(--s-3) var(--s-4) var(--s-3) var(--s-5);box-shadow:0 1px 0 var(--cloud)}
.sess .who-list small{display:block;font-size:var(--t-caption);color:var(--ink-2)}
.sess .who-list .acts{display:flex;gap:var(--s-2);flex-wrap:wrap;justify-content:flex-end}
.sess .none{padding:var(--s-3) var(--s-5)}
.sess .bar-acts{display:flex;flex-wrap:wrap;gap:var(--s-2);padding:var(--s-3) var(--s-4) var(--s-4) var(--s-5)}
.warn-dot{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--t-caption);color:var(--bad)}
.warn-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:#c56b7f}

.form{display:grid;gap:var(--s-3);align-content:start}
.form .btn{justify-self:start}
.field{display:grid;gap:var(--s-2);font-size:var(--t-small);color:var(--ink-2)}
.field input,.field select{min-height:48px;padding:0 var(--s-5);border-radius:var(--r-pill);border:1.5px solid transparent;background:#fff;font:400 var(--t-body)/1 var(--f);color:var(--ink);
  transition:border-color var(--d-fast) var(--ease)}
.field input:focus-visible,.field select:focus-visible{outline:none;border-color:var(--plum)}
.field input[aria-invalid="true"],.ptable input[aria-invalid="true"]{border-color:var(--bad);background:var(--bad-bg)}
.field .err{font-size:var(--t-caption);color:var(--bad);padding-left:var(--s-5)}
.field .hint{font-size:var(--t-caption);padding-left:var(--s-5)}
.ptable{display:grid;gap:var(--s-2)}
.ptable .ph{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:var(--s-2);padding:0 var(--s-3) 0 var(--s-5);font-size:var(--t-caption);color:var(--ink-2)}
.ptable .ph+.ph,.ptable .pr+.ph{margin-top:var(--s-3)}
.ptable .ph .r{text-align:right}
.ptable .pr{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:var(--s-2);align-items:center}
.ptable .pr>span{padding-left:var(--s-5);font-size:var(--t-small)}
.ptable input{width:100%;min-height:44px;padding:0 var(--s-3);border-radius:var(--r-pill);border:1.5px solid transparent;background:#fff;font:400 var(--t-body)/1 var(--f);text-align:right;
  font-variant-numeric:tabular-nums;transition:border-color var(--d-fast) var(--ease)}
.ptable input:focus-visible{outline:none;border-color:var(--plum)}
.ptable input.changed{border-color:var(--lilac)}
.ptable .err{grid-column:1/-1;font-size:var(--t-caption);color:var(--bad);padding-left:var(--s-5)}
.top-acts{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-3) 0}
.form.search{margin-bottom:var(--s-2)}
.form-fields .paid,.form .paid{justify-self:start}
.adm .lead-note{margin-bottom:var(--s-4);max-width:52ch}
.save-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3)}
.grid2{display:grid;gap:var(--s-10)}
@media (min-width:900px){.grid2{grid-template-columns:1fr 1fr;column-gap:var(--s-12)}.adm{padding-top:var(--s-10)}}
@media (max-width:600px){
  .row{grid-template-columns:1fr}
  .row .acts{justify-content:flex-start}
  .sess .who-list li{grid-template-columns:1fr}
  .sess .who-list .acts{justify-content:flex-start}
}

/* ============ 404 / privacy ============ */
.lost{min-height:70svh;display:grid;align-content:center;justify-items:start;gap:var(--s-4);padding-top:var(--s-10)}
.lost .code{font-size:clamp(6rem,4rem + 10vw,10rem);letter-spacing:-.06em;line-height:.85;background:var(--dawn);-webkit-background-clip:text;background-clip:text;color:transparent}
.lost h1{font-size:var(--t-h1)}
.lost .muted{max-width:40ch}
.doc{max-width:64ch;display:grid;gap:var(--s-6);padding-top:var(--s-6)}
.doc h2{font-size:var(--t-title);font-weight:500;letter-spacing:-.01em}
.doc section{display:grid;gap:var(--s-2)}
.doc ul{display:grid;gap:var(--s-2)}
.doc li{padding-left:var(--s-5);position:relative}
.doc li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:6px;border-radius:50%;background:var(--plum)}

/* ============ micro-motion ============ */
/* press: every tappable thing gives a little under the finger */
.hub a,.strip a,.icon-btn,.back,.chip{transition:background-color var(--d) var(--ease),color var(--d) var(--ease),transform var(--d-fast) var(--ease)}
.hub a:active,.strip a:active,.icon-btn:active,.back:active,.chip:active{transform:scale(.96)}

/* booking done: the disc pops in, then the tick is drawn */
.done-mark{animation:pop var(--d) var(--ease) both}
.done-mark svg path{stroke-dasharray:21;stroke-dashoffset:21;animation:draw 380ms var(--ease) 180ms forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* pass: used dashes fill in one after another, the number settles */
.meter i.on{transform-origin:left center;animation:dash-in var(--d) var(--ease) backwards}
.meter i:nth-child(2){animation-delay:40ms}.meter i:nth-child(3){animation-delay:80ms}.meter i:nth-child(4){animation-delay:120ms}
.meter i:nth-child(5){animation-delay:160ms}.meter i:nth-child(6){animation-delay:200ms}.meter i:nth-child(7){animation-delay:240ms}
.meter i:nth-child(8){animation-delay:280ms}.meter i:nth-child(9){animation-delay:320ms}.meter i:nth-child(n+10){animation-delay:360ms}
@keyframes dash-in{from{transform:scaleX(0);opacity:0}}
.pass .num{animation:num-in var(--d-slow) var(--ease) backwards}
@keyframes num-in{from{opacity:0;transform:translateY(8px)}}

/* sheet leaves faster than it arrives (sheet.js adds .closing, then closes the dialog) */
.sheet.closing{animation:down var(--d-fast) var(--ease) forwards}
.sheet.closing::backdrop{animation:fade-out var(--d-fast) var(--ease) forwards}
@keyframes down{to{transform:translateY(var(--s-10));opacity:0}}
@keyframes fade-out{to{opacity:0}}

/* a class you just booked: a soft ring spreads once (schedule.js marks it after the reload) */
.cl.fresh{animation:fresh 1.1s var(--ease) 150ms both}
@keyframes fresh{0%{transform:scale(.97);box-shadow:0 0 0 0 color-mix(in srgb,var(--plum) 40%,transparent)}45%{transform:none}100%{box-shadow:0 0 0 14px transparent}}

/* cancelled booking: the card folds away before the page moves on (me.js sets the height) */
.bk.leaving{overflow:hidden;opacity:0;padding-block:0;transition:height var(--d) var(--ease),padding var(--d) var(--ease),opacity var(--d-fast) var(--ease)}

/* day strip: with JS one plum pill slides to the chosen day; the white backing moves to the li so the pill passes over it */
.strip ol{position:relative}
.strip .pill{position:absolute;left:0;top:0;width:0;height:0;border-radius:var(--r-md);background:var(--plum);pointer-events:none;opacity:0}
.strip .pill.ready{opacity:1;transition:transform var(--d) var(--ease),width var(--d) var(--ease)}
.strip ol.has-pill li:not(.gap){border-radius:var(--r-md);background:#fff}
.strip ol.has-pill a{z-index:1;background:transparent}

/* invalid field: one short shake */
.shake{animation:shake 320ms var(--ease)}
@keyframes shake{20%{transform:translateX(-4px)}45%{transform:translateX(3px)}70%{transform:translateX(-2px)}}

/* page to page: the page crossfades, the hub stays put */
@view-transition{navigation:auto}
.hub{view-transition-name:hub}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--d-fast)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:1ms!important}
  .toast{transform:translate(-50%,0)}
  .row.leaving{transform:none}
  .bk.leaving{transition:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}