/* Classical — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
/* Fonts are served by the consuming product from its own address, not fetched
   from fonts.googleapis.com: a page that pulls a stylesheet from a third party
   depends on that party being up and tells it who opened the page. The files
   live in fonts/ next to this sheet; the URLs below are the addresses the
   product publishes them at. Only the cyrillic and latin subsets are carried —
   the system is used on a Russian-language product. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/z/fonts/cormorant-garamond-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/z/fonts/cormorant-garamond-600-latin.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: 'Lora';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/z/fonts/lora-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/z/fonts/lora-latin.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: 'Lora';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('/z/fonts/lora-italic-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('/z/fonts/lora-italic-latin.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;
}

:root {
  color-scheme: light dark;

  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201f1d;
  --color-accent: #b68235;
  --color-accent-2: #ac803e;
  --color-divider: color-mix(in srgb, #201f1d 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff3e4;
  --color-accent-200: #ffe3bf;
  --color-accent-300: #facb8d;
  --color-accent-400: #e1ad66;
  --color-accent-500: #c28d41;
  --color-accent-600: #a06f24;
  --color-accent-700: #7d5411;
  --color-accent-800: #5a3b0a;
  --color-accent-900: #3a270d;

  --color-accent-2-100: #fff3e4;
  --color-accent-2-200: #ffe3be;
  --color-accent-2-300: #f5cd96;
  --color-accent-2-400: #dbaf70;
  --color-accent-2-500: #bc8f4e;
  --color-accent-2-600: #9b7232;
  --color-accent-2-700: #79561f;
  --color-accent-2-800: #573d14;
  --color-accent-2-900: #382810;

  --font-heading: "Cormorant Garamond", system-ui, sans-serif;
  --font-heading-weight: 600; /* review round 3: bold retired — semibold is the
     interface headings' ceiling (they need the weight at small sizes); display
     text goes lighter still, to the normal cut (see the deck) */
  --font-body: "Lora", system-ui, sans-serif;

  --space-1: 4.6px;
  --space-2: 9.2px;
  --space-3: 13.8px;
  --space-4: 18.4px;
  --space-6: 27.6px;
  --space-8: 36.8px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.plate{filter:sepia(0.22) saturate(0.82) contrast(1.05);box-sizing:border-box;
  border:6px solid var(--color-surface);outline:1px solid var(--color-divider)}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: transparent;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: transparent; border: 1px solid var(--color-divider);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg); border: 1px solid var(--color-divider);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* — schedule: pills, tabs, save bar — */
/* A pill is one start time of an expert's schedule. The face is the span:
   the same pill is a checkbox label (week form), a submit button (a date's
   window) or plain text (a booked window), and the look must not depend on
   which. Checked and "on" read the accent at full strength — the one filled
   control in the system — because a marked hour is the answer the page
   exists to collect. Booked reads the second accent's ramp, like
   .tag-accent-2; removed is a dashed outline with the time struck through.
   The 44px face is a touch target: pills are pressed on a phone. */
.pill {
  display: block; position: relative; margin: 0; padding: 0;
  border: 0; background: none; font: inherit; color: inherit; cursor: pointer;
}
.pill > input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.pill > span {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 var(--space-1);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 16px; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pill:hover > span { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.pill > input:checked + span, .pill-on > span,
.pill-on:hover > span, .pill:hover > input:checked + span {
  background: var(--color-accent); border-color: var(--color-accent); color: var(--color-surface);
}
.pill > input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.pill-wide > span { padding: 0 var(--space-3); }
.pill-booked, .pill-booked:hover { cursor: default; }
.pill-booked > span, .pill-booked:hover > span {
  background: var(--color-accent-2-100); border-color: var(--color-accent-2-500);
  color: var(--color-accent-2-800);
}
.pill-gone > span {
  border-style: dashed; border-color: var(--color-neutral-500);
  color: color-mix(in srgb, var(--color-text) 60%, transparent); text-decoration: line-through;
}
/* Tabs are links on the segmented control: a section of a screen is an
   address, not a switch, so the current one is marked aria-current. */
.seg-opt[aria-current='page'] { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
a.seg-opt { color: inherit; text-decoration: none; justify-content: center; }
a.seg-opt:not([aria-current='page']):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
/* The save bar holds unsaved changes at the edge of the screen: the surface
   lifts off the ground, and the dot is the second accent — a change, not an
   error. */
.savebar {
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--color-surface); border-top: 1px solid var(--color-divider);
  box-shadow: var(--shadow-md);
}
.savebar-dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent-2);
}

/* ── dark ground ───────────────────────────────────────────────────────────
   The system was drawn on a light ground; this block reads the same roles on a
   dark one. Only the roles move. The ramps keep their perceptual steps and the
   component layer below never names a color of its own, so hovers, pressed
   states and the focus ring follow without a single extra rule. Elevation
   stops being an ink-tinted drop and becomes what it is on a dark ground: a
   hairline edge plus ambient darkness. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1a1918;
    --color-surface: #232120;
    --color-text: #f3f2f2;
    --color-accent: var(--color-accent-500);
    --color-accent-2: var(--color-accent-2-500);
    --color-divider: color-mix(in srgb, #f3f2f2 18%, transparent);

    --shadow-sm: 0 0 0 1px color-mix(in srgb, #f3f2f2 8%, transparent);
    --shadow-md: 0 0 0 1px color-mix(in srgb, #f3f2f2 8%, transparent),
                 0 3px 10px color-mix(in srgb, #000 45%, transparent);
    --shadow-lg: 0 0 0 1px color-mix(in srgb, #f3f2f2 10%, transparent),
                 0 12px 32px color-mix(in srgb, #000 60%, transparent);
  }

  /* Tinted fills are read from the other end of the ramp: the dark step
     carries the fill, the light step the text standing on it. */
  .tag-accent { background: var(--color-accent-900); color: var(--color-accent-200); }
  .tag-accent-2 { background: var(--color-accent-2-900); color: var(--color-accent-2-200); }
  .tag-neutral { background: var(--color-neutral-900); color: var(--color-neutral-200); }
  .pill-booked > span, .pill-booked:hover > span {
    background: var(--color-accent-2-900); color: var(--color-accent-2-200);
  }

  /* The backdrop darkens; on this ground neutral-900 is barely a veil. */
  .dialog-backdrop { background: color-mix(in srgb, #000 62%, transparent); }
}

/* Слой продукта поверх дизайн-системы.
 *
 * Здесь только РАСПОЛОЖЕНИЕ: сетки, ширины, порядок. Цвета, шрифты,
 * радиусы и тени берутся токенами из `styles.css` и не повторяются тут
 * ни одним значением. Числа в пикселях встречаются там же, где в
 * артбордах холста, — это геометрия конкретных экранов (ширина боковой
 * колонки, кегль крупного времени), которой в шкале токенов нет и быть
 * не должно.
 *
 * Правило простое: если правило ниже начинает описывать вид, а не
 * расположение, ему место в дизайн-системе.
 */

/* ── общее ─────────────────────────────────────────────────────────── */

main {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4) calc(var(--space-8) * 2);
}
/* Экраны эксперта живут во всю ширину окна: у них две колонки. */
main.wide {
  max-width: 1280px;
  padding: var(--space-6) var(--space-6) calc(var(--space-8) * 2);
}
.narrow { max-width: 640px; display: flex; flex-direction: column; gap: var(--space-4); }

/* Ряд разделов настроек — второй уровень навигации, под шапкой. Вид тот
   же, что у шапки: текущий раздел назван цветом акцента и `aria-current`,
   а не отдельной формой. */
.subnav {
  display: flex; gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.subnav a { color: inherit; text-decoration: none; font-size: 14px; }
.subnav a:hover, .subnav a[aria-current='page'] { color: var(--color-accent); }

/* Пометка о ранней версии на страницах клиента: полоса над содержанием. */
.alpha {
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  text-align: center;
}

/* Шапка кабинета. Пометка прижата к правому краю, выход — за ней. */
.nav { padding: 14px var(--space-6); gap: 22px; flex-wrap: wrap; }
.nav-brand { margin-right: 20px; }
.nav-alpha { margin-left: auto; }
.nav-exit { margin: 0; }

/* Две колонки: ежедневное слева, редкое справа. */
.cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 348px;
  gap: 40px;
  padding-top: var(--space-6);
}
.col-main, .col-side { display: flex; flex-direction: column; min-width: 0; }
.col-main { gap: var(--space-4); }
.col-side { gap: var(--space-3); }

.lead { margin: 0; color: color-mix(in srgb, var(--color-text) 70%, transparent); max-width: 56ch; text-wrap: pretty; }
.lead-small { margin: 0 0 var(--space-2); font-size: 13px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.greeting { margin: 0 0 6px; }
.hr-tight { margin: 0; }
.num, .preview, .week { font-variant-numeric: tabular-nums; }

/* Сообщение о только что сделанном — спокойная строка, не тревога. */
.notice {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

/* Тревога: отказ сохранить, молчащие уведомления, пустой предпросмотр.
 * Пара «светлая заливка — тёмный текст» взята из рампы акцента; на
 * тёмном фоне она читается с другого конца рампы — то же правило, что
 * дизайн-система применяет к меткам. */
.alarm {
  border: 1px solid var(--color-accent-900);
  background: var(--color-accent-100);
  color: var(--color-accent-900);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.alarm-quiet { border-color: var(--color-accent-500); color: inherit; }
.alarm-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; }
.alarm-body { margin: 4px 0 0; font-size: 14px; line-height: 1.6; }
.alarm-note { font-size: 12px; color: var(--color-accent-800); margin-top: 6px; }
@media (prefers-color-scheme: dark) {
  .alarm { background: var(--color-accent-900); border-color: var(--color-accent-500); color: var(--color-accent-200); }
  .alarm-quiet { color: inherit; }
  .alarm-note { color: var(--color-accent-300); }
}

/* ── вход (артборд 1g) ─────────────────────────────────────────────── */

.signin {
  min-height: 60vh;
  display: grid;
  place-content: center;
  justify-items: stretch;
}
.signin > * { width: 100%; max-width: 340px; }
.signin-brand { font-family: var(--font-heading); font-size: 30px; line-height: 1.1; }
.signin-lead { margin: 6px 0 0; font-size: 14px; color: color-mix(in srgb, var(--color-text) 70%, transparent); text-wrap: pretty; }
.signin-form { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-3) 0 0; }
.signin-note { font-size: 12px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 70%, transparent); }

/* ── рабочий экран (артборды 1a, 1b) ───────────────────────────────── */

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.section-head h2 { margin: 0; }
.section-note { font-size: 12px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }

/* Ближайшая запись: единственное, ради чего кабинет открывают каждый
   день, — поэтому карточка обведена акцентом, а время набрано крупно. */
.next {
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  gap: 28px;
  align-items: flex-start;
}
.next-when { flex: none; width: 132px; border-right: 1px solid var(--color-divider); padding-right: 20px; }
/* Табличные цифры здесь не нужны: время одно, выравнивать его не с чем, а
   табличная единица Cormorant выровнена по ширине прочих цифр и
   читается с дырой — «1 2:45». */
.next-time { font-family: var(--font-heading); font-size: 38px; line-height: 1; }
.next-day, .next-contact, .next-what { font-size: 13px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.next-day { margin-top: 4px; }
.next-who { flex: 1; min-width: 0; }
.next-name { font-family: var(--font-heading); font-size: 23px; line-height: 1.15; }
.next-contact { font-size: 14px; margin-top: 4px; }
.next-what { margin-top: 10px; }
.next-actions { display: flex; flex-direction: column; gap: 8px; flex: none; }
.next-actions form { margin: 0; }

.col-when { width: 180px; }
.col-do { width: 170px; text-align: right; white-space: nowrap; }
.col-do form { display: inline; margin: 0; }
.col-do a { font-size: 13px; }
.col-do .btn { font-size: 13px; }

/* Пусто — прямое сообщение, а не пустое место. */
.empty {
  border: 1px dashed var(--color-neutral-400);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-align: center;
}
.empty-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; }
.empty-hint { margin: 6px 0 0; font-size: 14px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }

/* История: раскрытие нативным details, без скрипта. */
.past { border: 0; margin: 0; padding: 0; }
.past > summary {
  display: inline-block;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 14px;
  color: var(--color-accent);
  padding: var(--space-2) 0;
}
.past > summary:hover { color: var(--color-accent-700); }

/* Первый день: три шага, подсвечен ближайший невыполненный. */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.step {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: 18px;
}
.step-now { border-color: var(--color-accent); }
.step-n { font-family: var(--font-heading); font-size: 26px; width: 26px; flex: none; color: var(--color-neutral-500); }
.step-n-now { color: var(--color-accent); }
.step-body { flex: 1; min-width: 0; }
.step-title { display: block; font-family: var(--font-heading); font-size: 19px; }
.step-hint { display: block; font-size: 13px; margin-top: 2px; color: color-mix(in srgb, var(--color-text) 70%, transparent); word-break: break-word; }

/* Карточки правой колонки. */
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.card-strong { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; }
.link-value { font-family: var(--font-heading); font-size: 19px; word-break: break-all; }
.card-actions { display: flex; gap: 8px; margin-top: 2px; }
.card-actions > * { flex: 1; }
.preview { font-size: 14px; line-height: 1.9; }
.week { font-size: 13px; line-height: 1.8; }
.week-day { display: inline-block; width: 3.2em; }
.week-off { margin-right: 0.6em; }

/* Правка услуги раскрывается на месте: details, а не скрипт. */
.editor { border: 0; margin: 0; padding: 0; }
.editor > summary {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 13px;
  color: var(--color-accent);
  padding: var(--space-1) 0;
}
.editor > summary::marker, .editor > summary::-webkit-details-marker { content: ""; display: none; }
.editor > summary:hover { color: var(--color-accent-700); }
.editor-body { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.pair { display: flex; gap: 8px; }
.pair > * { flex: 1; }

/* ── расписание окошками ───────────────────────────────────────────
 * Макет «Условились · Расписание эксперта». Вид таблеток, вкладок и
 * панели изменений — компоненты дизайн-системы (`.pill`, `.seg-opt`,
 * `.savebar`); здесь только сетки и места. */

/* Экран расписания уже рабочего экрана: неделя читается сверху вниз, и
   ряд из семи таблеток на всю ширину окна перестаёт быть рядом. */
.sched { max-width: 42rem; display: flex; flex-direction: column; gap: var(--space-4); }
.sched fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
/* Скрытое атрибутом скрыто и тогда, когда класс задаёт ему `display`:
   иначе панель «0 изменений не сохранено» стояла бы на экране без
   изменений (спека: без изменений панели нет). */
.sched [hidden] { display: none !important; }
/* Результат, устаревший после правки поля, блёкнет, пока его не
   пересчитали. */
.sched .stale { opacity: 0.45; }
.sched legend { padding: 0; margin-bottom: var(--space-1); }
/* Скрытая первая кнопка формы: цель Enter, а не нажатия. Скрыта
   расположением, а не `display: none` — иначе часть браузеров не нажимает
   её по Enter. */
.default-action {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sched h2, .sched h3 { margin: 0; }
.sched form { margin: 0; }
.sched-zone { margin: 4px 0 0; }
.sched-tabs { display: flex; }
.sched-tabs > .seg-opt { flex: 1; min-height: 44px; }

/* День — заголовок с числом окошек, ряды выбора, таблетки. */
.day-block {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3) 0; border-top: 1px solid var(--color-divider);
  scroll-margin-top: var(--space-4);
}
.day-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; min-height: 44px; }
.day-title { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.day-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.day-row label { margin: 0; }
.day-row .input { width: auto; }
.day-row form { margin: 0; }

/* Ряд таблеток: семь в строку, если все — ровные часы, четыре, если с
   минутами (спека, «Ритм предлагает таблетки дня»), с переносом и без
   горизонтальной прокрутки. */
.pills { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1); }
.pills-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Занятое окошко вдвое шире: в нём ещё и имя. */
.pills .pill-booked { grid-column: span 2; }
/* Другое время и таблетки дней — по ширине содержимого. */
.pills-free { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }
.pills-free .pill > span { min-width: 4.5rem; }
/* Группа «Другое время» под рядом: отделена чертой и заголовком, а не
   видом таблеток — пунктир у таблетки уже значит «снято». */
.others { display: flex; flex-direction: column; gap: var(--space-1); }
.others-head { margin: 0; padding-top: var(--space-2); border-top: 1px solid var(--color-divider); }
.others-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
/* Таблетка и приписка «позже «до 17:00»» переносятся вместе. */
.other-item { display: inline-flex; align-items: center; gap: var(--space-1); }

/* Выбор сдвига после перерыва: «Сейчас → Будет» двумя строками. */
.shift { display: flex; flex-direction: column; gap: var(--space-2); }
.shift-rows { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--space-3); font-variant-numeric: tabular-nums; }

.rules { display: flex; flex-direction: column; gap: var(--space-2); }
.rules .day-row .input { min-width: 8rem; }

/* Панель изменений держится внизу экрана, пока есть несохранённое. */
.savebar {
  position: sticky; bottom: 0; z-index: 1;
  padding: var(--space-3) var(--space-4);
  flex-wrap: wrap;
}
.savebar-text { flex: 1; min-width: 10rem; display: inline-flex; align-items: center; gap: var(--space-2); }
.savebar form { margin: 0; }

/* Ближайшие дни: карточка на дату, свёрнутые недели и отпуск — строкой. */
.date-card { gap: var(--space-2); scroll-margin-top: var(--space-4); }
#done { scroll-margin-top: var(--space-4); margin-bottom: 0; }
.date-card form { display: contents; }
.date-line { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.vacation-form { display: flex; align-items: flex-end; gap: var(--space-2); flex-wrap: wrap; }
.vacation-form .field { flex: 1; min-width: 9rem; }
.vacation-form h3 { flex-basis: 100%; }
.legend { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.legend .pill > span { min-height: 0; padding: 2px var(--space-1); font-size: 13px; }

/* Поля времени и минут — по ширине значения, а не во всю строку. */
.sched .input.time { width: auto; min-width: 7.5rem; }
.sched .input.minutes { width: 6rem; }

.form-foot {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
}
.form-foot form { margin: 0; }
.form-note { font-size: 12px; color: color-mix(in srgb, var(--color-text) 70%, transparent); margin-left: auto; }

/* ── настройки (артборды 1i, 1f) ───────────────────────────────────── */

.channel {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.channel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.channel-head h4 { margin: 0; }
.channel-address { font-size: 15px; }
.channel-state { font-size: 12px; color: color-mix(in srgb, var(--color-text) 60%, transparent); margin-top: calc(-1 * var(--space-2)); }
.channel-soon { opacity: 0.75; gap: var(--space-2); }
.channel form { margin: 0; }
.row-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row-inline .input { flex: 1; min-width: 12rem; }

/* ── страницы клиента ──────────────────────────────────────────────── */

.hint, .zone { font-size: 13px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
/* Описание эксперта под подписью его страницы: одна строка о том, кто он
   и для кого. Только здесь — на форме записи клиент уже выбрал. */
.about {
  margin: 0 0 var(--space-4);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  max-width: 56ch; text-wrap: pretty;
}
.error { border-color: var(--color-accent); }
.day { margin-top: var(--space-6); }
.day h3 { font-size: 17px; margin-bottom: var(--space-2); }
.slots {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}
.slots li, .slots form { margin: 0; }
.slots .btn { width: 100%; font-variant-numeric: tabular-nums; }

/* ── лендинг ───────────────────────────────────────────────────────── */

body.landing { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
.landing main { padding-top: 0; }
.landing section { text-align: center; }
.landing .hero {
  position: relative;
  min-height: 80vh;
  min-height: 80svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) 0 calc(var(--space-8) * 2);
  animation: rise 900ms cubic-bezier(0.22, 0.85, 0.3, 1) both;
}
.landing .hero::after {
  content: "";
  position: absolute;
  bottom: var(--space-6);
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--color-accent);
  border-bottom: 1.5px solid var(--color-accent);
  transform: rotate(45deg);
  opacity: 0.55;
  animation: nudge 2.4s ease-in-out infinite;
}
.landing .hero h1 {
  margin: 0;
  font-size: clamp(2.25rem, 9.5vw, 4rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.04;
}
.landing .hero .hr {
  width: 3.5rem;
  margin: var(--space-6) auto 0;
  background: var(--color-accent);
  opacity: 0.7;
}
.landing .lead {
  margin: var(--space-6) auto 0;
  max-width: 26rem;
  font-size: clamp(1.0625rem, 4.2vw, 1.3125rem);
  line-height: 1.6;
  text-wrap: balance;
}
.landing h2 {
  margin: 0;
  font-size: clamp(1.5rem, 6vw, 2.125rem);
  text-wrap: balance;
}
.landing .cards {
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  text-align: left;
}
.landing .value { padding-top: calc(var(--space-8) * 2); }
.landing .value p {
  margin: var(--space-6) auto 0;
  max-width: 30rem;
  font-size: clamp(1rem, 4vw, 1.125rem);
  line-height: 1.65;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  text-wrap: pretty;
}
/* Вход для экспертов: последняя строка страницы. Скромнее заголовка и
   строки позиционирования — она адресована тому, у кого доступ уже есть.
   Высота цели нажатия задана здесь, а не в мобильном блоке: правило про
   44 пикселя перечисляет `.btn` и `.input`, а это ни то, ни другое. */
.landing .signin-link {
  padding: calc(var(--space-8) * 2) var(--space-4) var(--space-8);
  text-align: center;
}
.landing .signin-link a {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
  padding: 0 var(--space-4);
  font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  text-decoration: none;
  border-bottom: 1px solid var(--color-divider);
}
.landing .signin-link a:hover, .landing .signin-link a:focus-visible {
  color: var(--color-accent);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes nudge {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.55; }
  50% { transform: rotate(45deg) translate(3px, 3px); opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .landing .hero, .landing .hero::after { animation: none; }
}

/* ── формы ─────────────────────────────────────────────────────────── */

/* Подпись и поле стоят соседями, а не в обёртке на каждое поле. Вид
   взят у `.field > label` дизайн-системы, а не придуман заново. */
label:not(.seg-opt):not(.radio) {
  display: block;
  font-size: 12px;
  margin: 0 0 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.field { margin: 0; }
form p { margin: var(--space-3) 0 0; }
.table td, .table th { font-variant-numeric: tabular-nums; }
.state-cancelled td { color: color-mix(in srgb, var(--color-text) 50%, transparent); }

/* ── телефон (артборд 1c) ──────────────────────────────────────────── */

@media (max-width: 900px) {
  main.wide { padding: var(--space-4) var(--space-4) var(--space-8); }
  /* Правая колонка уходит под левую: на телефоне «кто следующий»
     занимает экран целиком, а редкое лежит ниже. */
  .cols { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .nav { padding: var(--space-3) var(--space-4); gap: var(--space-3); }
  .nav-brand { margin-right: var(--space-2); }

  /* Ближайшая запись складывается: время над именем, а не сбоку. */
  .next { flex-direction: column; gap: var(--space-3); }
  .next-when { width: auto; border-right: 0; padding-right: 0; }
  .next-time { font-size: 32px; }
  .next-actions { flex-direction: row; width: 100%; }
  .next-actions > * { flex: 1; }

  /* Цель нажатия на телефоне — 44 пикселя, иначе промахиваются. */
  .btn, .input, .past > summary { min-height: 44px; }
  .seg-opt { min-height: 44px; }
  /* Ссылки шапки, разделов настроек и строки записи — тоже цели
     нажатия, хоть и не `.btn`: высота добирается полем вокруг текста. */
  .nav a, .subnav a, .col-do a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Таблица записей становится строками «когда — кто»: четыре столбца
     в 375 пикселей не помещаются, а горизонтальная прокрутка на
     ежедневном экране — дефект. */
  .col-main .table, .col-main .table tbody, .col-main .table tr, .col-main .table td { display: block; width: auto; }
  .col-main .table thead { display: none; }
  .col-main .table tr { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-divider); }
  .col-main .table td { border: 0; padding: 2px var(--space-2); }
  .col-main .table td.col-do { width: auto; text-align: left; }

  /* Расписание на телефоне: поля по бокам 16 пикселей (спека
     `expert-schedule`, «Расписание удобно на телефоне»). */
  main.wide:has(> .sched) { padding-inline: 16px; }
  /* Текстовые ссылки расписания — «Изменить» у города, «Заполнить
     заново», «Перейти к полю», «Все ближайшие дни» — тоже цели нажатия:
     высота добирается полем вокруг текста, как у ссылок шапки. */
  .sched a:not(.btn):not(.seg-opt), .sched-card a:not(.btn) {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .savebar { margin-inline: -16px; padding-inline: 16px; }
  .form-note { margin-left: 0; }

  .step { flex-wrap: wrap; }
  .step-body { flex-basis: calc(100% - 44px); }
}