/* Hallmark · shape: app screen · genre: playful · theme: brand · redesign: full
 * paper: oklch(93.5% 0.04 160) · accent: oklch(47% 0.09 166) · display: Rubik · body: Rubik
 * nav: kept (side panel, phone tab bar) · signature: the nearest window card, the cat peeking over it · states: empty (no windows, empty filter), plan empty and full, joined row
 * axes: light/rounded-sans/chromatic-green · posture: lead card over the schedule · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V3 · weakest: V, the list is a familiar schedule; kept it familiar on purpose, the card and the calendar row carry the screen */
/* Hallmark · waive 80 · div.mascot inside .sx-best-cat, one per screen · the Yapp cat is the brand's own drawing and peeks over the nearest window card */
/* Hallmark · waive 39b · button.sx-day is a calendar date cell with weekday, date and count · a date picker cell stands taller than a toolbar button, the week row stays one line */
/* Hallmark · dropped /temy, /sleng, /blog, /test-urovnya-angliyskogo, /dlya-prepodavateley, /konstruktor-uroka-angliyskogo, студентам, преподавателям, участнику, документы · the cabinet footer is one legal line, the side panel already navigates the cabinet */
/* Hallmark · dropped 13:00, 08:30, 11:00, 19:00 · the week cells no longer repeat window times, the list below shows every time */

/* Экран окон #/slots и подвал кабинета. Цвета - только токены (бренд из redesign.css), шкала кегля, радиусов и
   отступов - здесь. Стекло только у того, что парит над страницей (шапка, нижнее меню): фильтры и карточки сплошные. */
:root {
  --color-paper: var(--bg);
  --color-ink: var(--ink);
  --color-muted: var(--muted);
  --color-accent: var(--butter);
  --color-accent-ink: var(--sx-on-butter);
  --color-focus: var(--ring);
  --font-display: var(--display);
  --font-body: var(--sans);

  /* Шкала кегля: 6 ступеней, без полупикселей. Заголовок экрана в 2,5 раза крупнее текста. */
  --sx-t-xs: 0.75rem;
  --sx-t-sm: 0.875rem;
  --sx-t-md: 1rem;
  --sx-t-lg: 1.25rem;
  --sx-t-xl: 1.5rem;
  --sx-t-2xl: 2.5rem;
  --sx-t-3xl: 4rem;
  /* Радиусы по вложенности: метка, элемент внутри карточки, карточка, кнопка и переключатель. */
  --sx-r-tag: 6px;
  --sx-r-inner: 12px;
  --sx-r-card: 20px;
  --sx-r-pill: 999px;
  --sx-dur: 160ms;
  --sx-dur-long: 320ms;
  --sx-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Всё на изумруде и жёлтом - из токенов бренда, без новых цветов. Тёмный текст на жёлтом - как у .btn-light. */
  --sx-on-night: var(--chalk);
  --sx-on-night-2: color-mix(in oklab, var(--chalk) 82%, var(--night));
  --sx-on-night-accent: color-mix(in oklab, var(--butter) 65%, var(--chalk));
  --sx-night-raised: color-mix(in oklab, var(--night) 86%, var(--chalk));
  --sx-butter-hover: color-mix(in oklab, var(--butter) 75%, var(--chalk));
  --sx-on-butter: #15201C;
}
html, body { overflow-x: clip; }
html { scrollbar-color: var(--muted) var(--bg); }
::selection { background: var(--accent-soft); color: var(--ink); }

/* ---------- Заголовок экрана: крупное слово в плотный интерлиньяж (приём шапки unsection.com) ---------- */
.sx-head { margin-bottom: 8px; }
.sx-head .page-title { font: 700 var(--sx-t-3xl)/0.95 var(--display); letter-spacing: -0.04em; text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
.sx-head .page-sub { margin-top: 12px; font-size: var(--sx-t-md); color: var(--ink-2); }

/* Одна подсказка над экраном: сплошная строка, кнопка вторичная. */
.sx > .notice, .sx > .ai-banner { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; padding: 12px 16px; border-radius: var(--sx-r-card); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: var(--sx-t-sm); }
.sx > .notice > svg { width: 20px; height: 20px; color: var(--accent); }
.sx > .notice .modal-close { width: 44px; height: 44px; color: var(--muted); }

/* ---------- Сетка экрана ---------- */
/* Широкий экран: ближайшее окно и рядом «Мой план» со «Словом дня» одной высоты, под ними во всю ширину дни и лента.
   Узкий: одна колонка, «Мой план» с записями - сверху, без записей - после ленты. */
.sx-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.sx-main { container: sx-main / inline-size; min-width: 0; }
.sx-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; align-items: start; order: 1; }
.sx-side:has(.sx-plan) { order: -1; }
@media (min-width: 1280px) {
  /* Экран окон шире остальных: справа и слева от него не остаётся пустых полей. */
  body.is-signed main:has(.sx-grid), body.is-signed:has(.sx-grid) .sf-app { max-width: 1440px; padding-inline: 40px; }
  .sx-grid { grid-template-columns: minmax(0, 1fr) 320px; row-gap: 0; align-items: stretch; }
  .sx-grid > .sx-best { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; }
  .sx-best > * { align-self: stretch; }
  .sx-best > .sx-topic { align-self: flex-start; }
  .sx-best > .sx-row { margin-top: auto; padding-top: 24px; }
  .sx-side, .sx-side:has(.sx-plan) { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: stretch; order: 0; }
  .sx-side > :last-child { flex: 1; }
  .sx-grid:has(.sx-best) .sx-side { margin-top: 56px; }
  .sx-grid > .sx-main { grid-column: 1 / -1; }
  .sx-grid:not(:has(.sx-best)) > .sx-main { grid-column: 1; grid-row: 1; }
  .sx-grid:not(:has(.sx-best)) > .sx-side { align-self: start; }
}

/* ---------- Главная кнопка экрана: одна, жёлтая. Вторичные - светлые с зелёным текстом. ---------- */
.sx .btn { transition: background-color var(--sx-dur) var(--sx-ease), color var(--sx-dur) var(--sx-ease), transform var(--sx-dur) var(--sx-ease); }
.sx .sx-go, .sx .sx-plan .btn { height: 48px; padding: 0 28px; border: 0; border-radius: var(--sx-r-pill); background: var(--butter); color: var(--sx-on-butter); font: 600 var(--sx-t-md) var(--sans); box-shadow: none; }
.sx .sx-plan .btn { display: flex; width: 100%; justify-content: center; align-items: center; gap: 8px; height: 44px; padding: 0 20px; margin-top: 12px; text-align: center; }
.sx .sx-go:hover:not(:disabled), .sx .sx-plan .btn:hover:not(:disabled) { background: var(--sx-butter-hover); }
.sx .sx-act .btn, .sx > .notice .btn, .sx .sx-pan .btn-ghost, .sx .sx-none .btn { height: 40px; padding: 0 16px; border: 1px solid var(--accent-soft); border-radius: var(--sx-r-pill); background: var(--accent-softer); color: var(--accent); font: 600 var(--sx-t-sm) var(--sans); box-shadow: none; }
.sx .sx-act .btn:hover:not(:disabled), .sx > .notice .btn:hover:not(:disabled), .sx .sx-none .btn:hover:not(:disabled), .sx .sx-pan:hover .btn-ghost { background: var(--accent-soft); }
.sx-best :focus-visible, .sh :focus-visible { outline-color: var(--butter); box-shadow: none; }

/* ---------- Ближайшее окно: то, что ведёт экран ---------- */
.sx-best { position: relative; margin-top: 56px; padding: 24px; border-radius: var(--sx-r-card); background: var(--night); color: var(--sx-on-night); }
.sx-best-cat { position: absolute; right: 24px; top: -64px; width: 96px; pointer-events: none; }
.sx-best-cat .mascot { width: 100%; margin: 0; }
.sx-best-cat .kot-marks { stroke: var(--butter); }
.sx-kicker { margin: 0; font: 400 var(--sx-t-sm)/1.4 var(--sans); color: var(--sx-on-night-2); }
.sx-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-top: 4px; }
.sx-when b { font: 700 var(--sx-t-2xl)/1.05 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: break-word; min-width: 0; }
.sx-when span { font: 600 var(--sx-t-md) var(--sans); color: var(--sx-on-night-accent); }
.sx-topic { display: inline-block; margin-top: 16px; font: 700 var(--sx-t-xl)/1.2 var(--display); color: var(--sx-on-night); text-decoration: none; }
.sx-topic:hover { text-decoration: underline; text-underline-offset: 4px; }
.sx-ru { margin-top: 4px; font-size: var(--sx-t-md); color: var(--sx-on-night-2); }
.sx-q { margin-top: 16px; padding: 12px 16px; border-radius: var(--sx-r-inner); background: var(--sx-night-raised); font-size: var(--sx-t-md); }
.sx-q b { display: block; margin-bottom: 4px; font: 400 var(--sx-t-sm) var(--sans); color: var(--sx-on-night-2); }
.sx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 24px; }
.sx-row .sx-faces > span:not(.sx-face) { margin-left: 8px; font-size: var(--sx-t-sm); color: var(--sx-on-night-2); }
.sx-go { margin-left: auto; min-width: 136px; }

/* ---------- Метка: один компонент для ленты, карточки и страницы окна ---------- */
.sx-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.sx-tag, .sx-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--sx-r-tag); font: 400 var(--sx-t-xs)/1.5 var(--sans); background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.sx-tag svg { width: 12px; height: 12px; }
.sx-tag.is-fit { background: var(--accent-soft); color: var(--accent); }
.sx-tag.is-warn { background: var(--butter-soft); color: var(--butter-ink); }
.sx-best .sx-tag, .sx-best .sx-tag.is-fit, .sx-best .sx-tag.is-warn, .sh .sx-chip { background: var(--sx-night-raised); color: var(--sx-on-night); font-size: var(--sx-t-sm); padding: 4px 8px; }

/* ---------- Кто идёт ---------- */
.sx-faces { display: flex; align-items: center; }
.sx-face { width: 32px; height: 32px; margin-left: -8px; border-radius: var(--sx-r-pill); display: grid; place-items: center; font: 600 var(--sx-t-xs) var(--sans); color: var(--accent); background: var(--accent-softer); border: 2px solid var(--surface); }
.sx-face:first-child { margin-left: 0; }
.sx-face.ava-persona { padding: 0; }
.sx-best .sx-face, .sh .sx-face { width: 40px; height: 40px; border-color: var(--night); }


/* ---------- Неделя: календарная строка, все дни видны целиком ---------- */
/* Плашка дней - такая же карточка, как «Мой план» и лента: дни не висят в воздухе. */
.sx-weekbox { margin: 24px 0 32px; padding: 12px; border-radius: var(--sx-r-card); border: 1px solid var(--line); background: var(--surface); }
.sx-week { position: relative; display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); gap: 4px; }
/* Две недели: на широком экране все дни в строку, на узком строка листается вбок (затухание края - markScrollRows). */
.sx-week.is-long { grid-template-columns: repeat(var(--n), minmax(44px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.sx-week.is-long .sx-day { scroll-snap-align: start; }
/* Все дни помещаются (класс ставит dockWeek): строку не листаем, без затухания края и обрезки - увеличенный день целиком в плашке. */
.sx-week.is-fit { overflow: visible; -webkit-mask-image: none; mask-image: none; }
/* День крупнее остального текста ленты (+6% к шкале): это главный выбор под карточкой. */
.sx-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 68px; padding: 8px 2px; border-radius: var(--sx-r-inner); border: 1px solid transparent; color: var(--ink); text-align: center; transform: scale(var(--dock, 1)); transform-origin: 50% 50%; }
/* Наведение (приём Graph Scrub Highlight Glow с 60fps.design): жёлтый свет идёт за курсором, соседние дни растут как в Dock. */
.sx-day:hover { z-index: 1; background: radial-gradient(circle 48px at var(--gx, 50%) var(--gy, 50%), var(--sx-butter-hover), var(--butter)); border-color: var(--butter); color: var(--sx-on-butter); box-shadow: 0 8px 24px -10px var(--butter); }
.sx-day.is-on { background: var(--night); border-color: var(--night); color: var(--sx-on-night); }
.sx-day.is-on:hover { background: var(--night); border-color: var(--butter); color: var(--sx-on-night); box-shadow: 0 8px 24px -10px var(--butter); }
.sx-day:hover:not(.is-on) .sx-wd, .sx-day:hover:not(.is-on) .sx-cnt, .sx-day:hover:not(.is-on) .sx-mine { color: var(--sx-on-butter); }
.sx-wd { font: 400 0.8125rem/1.2 var(--sans); color: var(--muted); }
.sx-day.is-today .sx-wd { color: var(--accent); font-weight: 600; }
.sx-day.is-on .sx-wd, .sx-day.is-on .sx-cnt, .sx-day.is-on .sx-mine { color: var(--sx-on-night-2); }
.sx-day b { font: 600 1.3125rem/1.1 var(--sans); font-variant-numeric: tabular-nums; }
.sx-cnt { display: none; font: 400 0.8125rem/1.2 var(--sans); color: var(--muted); white-space: nowrap; }
.sx-mine { position: absolute; top: 4px; right: 4px; color: var(--butter-ink); }
.sx-mine svg { width: 12px; height: 12px; }
.sx-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@container sx-main (min-width: 560px) {
  .sx-cnt { display: block; }
}

/* ---------- Лента по дням ---------- */
.sx-dayblock + .sx-dayblock { margin-top: 32px; }
.sx-dayh { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; font: 600 var(--sx-t-lg)/1.2 var(--display); }
.sx-dayh span { font: 400 var(--sx-t-sm) var(--sans); color: var(--muted); }
.sx-list { display: flex; flex-direction: column; gap: 8px; }
/* Секции дня: «Утро», «День», «Вечер» - подпись и тонкая линия до края. */
.sx-part + .sx-part { margin-top: 24px; }
.sx-parth { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font: 600 var(--sx-t-sm)/1.4 var(--sans); color: var(--ink-2); }
.sx-parth::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.sx-slot { display: grid; grid-template-columns: 64px minmax(0, 1fr) 112px auto; align-items: center; gap: 16px; padding: 16px 20px; border-radius: var(--sx-r-card); border: 1px solid var(--line); background: var(--surface); }
.sx-slot.is-mine { border-color: var(--butter); box-shadow: inset 0 0 0 1px var(--butter); }
.sx-time { color: var(--ink); text-decoration: none; }
.sx-time b { display: block; font: 600 var(--sx-t-lg)/1.2 var(--sans); font-variant-numeric: tabular-nums; }
.sx-body { min-width: 0; }
.sx-t { display: block; font: 600 var(--sx-t-md)/1.4 var(--sans); color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-t:hover { color: var(--accent); }
.sx-sub { display: block; font-size: var(--sx-t-sm); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-body .sx-tags { margin-top: 8px; }
.sx-who { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.sx-who small { font-size: var(--sx-t-xs); color: var(--muted); white-space: nowrap; }
.sx-act { display: flex; justify-content: flex-end; }
.sx-joined { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: var(--sx-r-tag); background: var(--butter-soft); color: var(--butter-ink); font: 600 var(--sx-t-sm) var(--sans); white-space: nowrap; }
.sx-joined svg { width: 14px; height: 14px; }
.sx-act .slot-hint { font-size: var(--sx-t-sm); color: var(--muted); }

/* Пустые состояния ленты: что здесь будет и одно действие. */
.sx-none { display: grid; justify-items: center; gap: 8px; padding: 40px 24px; border-radius: var(--sx-r-card); border: 1px dashed var(--field-line); text-align: center; }
.sx-none .mascot { width: 96px; margin: 0; }
.sx-none h2 { font: 600 var(--sx-t-lg)/1.2 var(--display); text-wrap: balance; }
.sx-none p { max-width: 45ch; font-size: var(--sx-t-sm); color: var(--ink-2); }
.sx-none .btn { margin-top: 8px; }

/* ---------- Правая колонка: «Мой план» и «Слово дня» ---------- */
.sx-pan { display: block; padding: 20px; border-radius: var(--sx-r-card); border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; }
.sx-pan h2 { margin: 0 0 8px; font: 600 var(--sx-t-lg)/1.2 var(--display); }
.sx-empty { margin: 0 0 16px; font-size: var(--sx-t-sm); color: var(--ink-2); }
.sx-plan { padding: 12px 0; border-top: 1px solid var(--line); }
.sx-plan:first-of-type { border-top: 0; padding-top: 4px; }
.sx-plan > a:not(.btn) { display: block; color: var(--ink); text-decoration: none; font-size: var(--sx-t-sm); }
.sx-plan > a:not(.btn) b { display: block; font-size: var(--sx-t-md); }
.sx-plan > a:not(.btn):hover span { color: var(--accent); }
.sx-plan p { margin-top: 4px; font-size: var(--sx-t-sm); color: var(--muted); }
.sx-steps { display: flex; gap: 4px; margin-top: 8px; }
.sx-steps i { flex: 1; height: 4px; border-radius: var(--sx-r-pill); background: var(--line); }
.sx-steps i.is-done { background: var(--accent); }
.sx-word { display: grid; grid-template-rows: auto auto auto 1fr; gap: 4px; background: var(--accent-softer); border-color: var(--accent-soft); transition: border-color var(--sx-dur) var(--sx-ease); }
.sx-word:hover { border-color: var(--accent); }
.sx-word-label { font: 400 var(--sx-t-sm) var(--sans); color: var(--muted); }
.sx-word b { font: 700 var(--sx-t-xl)/1.2 var(--display); overflow-wrap: anywhere; }
.sx-word-who { font-size: var(--sx-t-sm); color: var(--ink-2); }
.sx-word .btn { margin-top: 12px; justify-self: start; align-self: end; }

/* ---------- Телефон ---------- */
@media (max-width: 599px) {
  .sx-best { padding: 20px 16px; }
  .sx-best-cat { right: 16px; width: 88px; top: -58px; }
  .sx-go { width: 100%; margin-left: 0; }
  .sx-t, .sx-sub { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .sx-slot { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "time body" "who act"; gap: 12px; padding: 12px 16px; }
  .sx-time { grid-area: time; align-self: start; }
  .sx-body { grid-area: body; }
  .sx-who { grid-area: who; flex-direction: row; align-items: center; gap: 8px; }
  .sx-act { grid-area: act; grid-column: 2; }
  .sx-who:empty { display: none; }
  .sx-who:empty + .sx-act { grid-column: 1 / -1; }
}
/* Зоны нажатия на сенсорном экране - не меньше 44px. */
@media (pointer: coarse) {
  .sx-act .btn, .sx-pan .btn-ghost { min-height: 44px; }
  .sx-t { padding-block: 12px; margin-block: -12px; }
  .sx-topic { padding-block: 8px; margin-block: -8px 0; }
  .sx-plan > a:not(.btn) { padding-block: 8px; margin-block: -8px; }
}
/* Нажатие: короткое сжатие, только transform. */
.sx .sx-go:active, .sx-word:active { transform: scale(0.97); }
.sx-day:active { transform: scale(calc(var(--dock, 1) * 0.97)); }
.sx-day { transition-property: background-color, border-color, box-shadow, color, transform; transition-duration: var(--sx-dur); transition-timing-function: var(--sx-ease); }
@media (prefers-reduced-motion: reduce) {
  .sx .btn, .sx-day, .sx-word { transition: none; }
}

/* ---------- Подвал кабинета: тихая строка с документами, оператором и тарифами (приём navbar.gallery) ---------- */
.site-footer.is-app { margin-top: 48px; background: var(--bg); border-top: 1px solid var(--line); clip-path: none; color: var(--muted); }
html:has(.site-footer.is-app) { background: var(--bg); }
.sf-app { max-width: 1120px; margin: 0 auto; padding: 24px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; font: 400 var(--sx-t-xs)/1.5 var(--sans); }
.sf-app nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.site-footer.is-app a, .site-footer.is-app p, .site-footer.is-app span { color: var(--muted); }
.site-footer.is-app a { text-decoration: underline; text-underline-offset: 3px; }
.site-footer.is-app a:hover { color: var(--ink); }
.sf-app p { margin: 0; }
.sf-app .sf-prices { flex-basis: 100%; }