/* Слой стиля поверх экранов (Редизайн 2 + 3, ROADMAP-26.09 §15-16).
   Подключается последним и перенастраивает общие компоненты одним местом:
   цвета и шрифты живут в tokens.css, здесь — форма (таблетки, стекло,
   плоскости без обводки) и роли Редизайна 3 (блок в конце файла). */

body {
  font-size: 1.0625rem;
  letter-spacing: -0.016em;
}

/* ---------- Типографика: один шрифт, плотный трекинг ---------- */
h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
}
h3 { letter-spacing: -0.025em; line-height: 1.2; }

.logo { font-weight: 700; letter-spacing: -0.035em; }

/* ---------- Кнопки: таблетки ---------- */
/* Только форма: высоту и отступы не трогаем — их задают экраны (квадратная
   кнопка «Отправить» у репетитора и т. п.), а этот файл подключён последним. */
.btn {
  border-radius: var(--r-full);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.btn--lg { min-height: 56px; padding: 0 30px; border-radius: var(--r-full); font-size: var(--fs-16); }
.btn--sm { min-height: 40px; padding: 0 18px; border-radius: var(--r-full); }
.btn--primary:not(:disabled):hover { box-shadow: none; }
/* Вторичная — тонированная таблетка без обводки. */
.btn--ghost {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text);
  border-color: transparent;
}
.btn--ghost:hover { --btn-bg: color-mix(in srgb, var(--surface-2) 86%, var(--text)); }

.icon-btn { border-radius: var(--r-full); }

/* Второе действие рядом с кнопкой — ссылка со стрелкой, как у Apple. */
.link-more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  color: var(--accent-text);
  font-size: var(--fs-16);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.link-more::after { content: "\00a0\203A"; }
/* A link with its own icon («Написать в чат», «Что было на паре» on the agent card): an unsized SVG grew to the
   width of the card and squeezed the words into a column (Max 28.10). */
.link-more svg { flex: none; width: 16px; height: 16px; margin-right: 6px; }
button.link-more { border: 0; background: none; font-family: inherit; white-space: nowrap; cursor: pointer; }
.link-more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Поля ---------- */
.input {
  border-color: transparent;
  background: var(--surface-2);
  border-radius: var(--r-md);
}
.input:hover { border-color: transparent; }
.input:focus { border-color: var(--accent-text); background: var(--surface); }

/* ---------- Бейджи и чипы: таблетки без заливки цветом ---------- */
.badge { border-radius: var(--r-full); font-weight: 500; letter-spacing: -0.01em; }

/* ---------- Шапка и таббар: матовое стекло ---------- */
.db-top {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
/* One header height for every screen (--top-h in tokens.css): 52px on a phone, more air on a computer, where
   the row sat 6px under the window edge (Max 06.10). Sticky things below the header use the same token. */
.container[class*="-top__inner"] { min-height: calc(var(--top-h) + env(safe-area-inset-top, 0px)); }
.db-nav__link { min-height: 32px; border-radius: var(--r-full); font-size: 0.8125rem; color: var(--text-2); }
.db-nav__link:hover,
.db-nav__link[aria-current="page"] { background: transparent; color: var(--text); }

@media (max-width: 899px) {
  .tabbar {
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
  }
}
.tabbar__link[aria-current="page"]::before { display: none; }

/* ---------- Фон: без свечения ---------- */
.ambient { display: none; }

/* ---------- Сегменты ---------- */
.seg { border: 0; border-radius: var(--r-full); background: var(--surface-2); }
.seg__btn { border-radius: var(--r-full); min-height: 36px; }
.seg__pill { border-radius: var(--r-full); background: var(--surface); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }

@supports not (backdrop-filter: blur(1px)) {
  .db-top { background: var(--bg); }
  @media (max-width: 899px) { .tabbar { background: var(--surface); } }
}

/* ---------- Шапка: нейтральные контролы ----------
   Фиолетовым на экране залита одна кнопка — аватар и ручка темы серые. */
.avatar-btn { border-radius: 50%; background: var(--surface-2); color: var(--text); font-weight: 600; }
.avatar-btn:hover { box-shadow: none; background: color-mix(in srgb, var(--surface-2) 86%, var(--text)); }
.theme-switch { border: 0; background: var(--surface-2); box-shadow: none; }
.theme-switch__knob { background: var(--surface); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); }

/* ---------- Баннер установки: плоскость с тенью, без фиолетовой рамки ---------- */
.inst { border: 0; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.14); }
[data-theme="dark"] .inst { box-shadow: 0 0 0 1px var(--border), 0 16px 48px rgba(0, 0, 0, 0.6); }

/* «Вся неделя» под лентой дня — ссылка со стрелкой. */
.next__week { margin-top: 0; color: var(--accent-text); font-size: var(--fs-16); font-weight: 500; }
.next__week svg { display: none; }
.next__week::after { content: "\00a0\203A"; }
.next__week:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
:root:not([data-theme="dark"]) .theme-switch__icon--sun,
[data-theme="dark"] .theme-switch__icon--moon { color: var(--text); }

/* ---------- Метка предмета: точка ----------
   Плашка с кодом предмета (App.utils.subjectTile) на всех экранах становится
   точкой его цвета, как в прототипе. Код в плашке aria-hidden — читалке
   ничего не теряется. Двойной класс + !important: размеры плашке задают
   классы экранов (.hw-card__code, .al-pair__code и т. п.). */
.subj-tile.subj-tile {
  display: inline-block;
  margin-right: var(--s-2);
  width: 8px !important;
  height: 8px !important;
  min-width: 0;
  padding: 0 !important;
  border-radius: 50% !important;
  background: var(--subj, var(--text-3));
  font-size: 0;
  line-height: 0;
  vertical-align: middle;
}

/* ---------- Конспект: крупнее и воздушнее ---------- */
.nt-head__title { font-size: clamp(2.25rem, 5vw, 3.5rem); letter-spacing: -0.045em; line-height: 1.05; }
.nt-sec__title { font-size: clamp(1.5rem, 2.4vw, 1.875rem); letter-spacing: -0.035em; }
.nt-sec__p { font-size: 1.1875rem; line-height: 1.6; letter-spacing: -0.015em; }

.nt-tabs { border: 0; border-radius: var(--r-full); }
.nt-tabs__btn { border-radius: var(--r-full); }

/* ---------- Без подсветки за курсором ----------
   Свечение .spot (base.css) — приём из 1.x; у Apple плоскость на наведение
   просто чуть темнеет, этим и обходимся. */
.spot::before,
.spot::after { display: none; }

/* ---------- Остальные экраны: та же грамматика ----------
   Агент, «Пропущенное», журнал агента, дисциплины, профиль, настройки,
   диагностика и настройка агента, план. Шапка — матовое стекло, заголовок
   крупный, карточки — белые плоскости без рамки, списки — одна плоскость
   со строками через тонкую линию. */
.icon-btn { border: 0; background: var(--surface-2); color: var(--text); }
.icon-btn:hover { border-color: transparent; background: color-mix(in srgb, var(--surface-2) 86%, var(--text)); }

.ag-top, .cu-top, .al-top, .subj-top, .pf-top, .st-top, .ad-top, .as-top, .pl-top, .nt-top {
  border-bottom: 0;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
@supports not (backdrop-filter: blur(1px)) {
  .ag-top, .cu-top, .al-top, .subj-top, .pf-top, .st-top, .ad-top, .as-top, .pl-top, .nt-top { background: var(--bg); }
}

.ag-main, .cu-main, .al-main, .subj-main, .pf-main, .st-main { padding-top: var(--s-7); }
.ag-head, .cu-head, .al-head, .subj-head, .st-head, .ad-head, .pl-head { margin-bottom: var(--s-7); }
.ag-head__title, .cu-head__title, .al-head__title, .subj-head__title,
.st-head__title, .ad-head__title, .pl-head__title { font-size: clamp(2.5rem, 6vw, 4rem); letter-spacing: -0.045em; }
.ag-head__sub, .cu-head__sub, .al-head__sub, .subj-head__sub, .st-head__sub {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  letter-spacing: -0.015em;
  line-height: 1.5;
}

/* Карточки-плоскости */
.ag-card, .pf-card, .st-card {
  border: 0;
  border-radius: 18px;
  box-shadow: none;
  padding: var(--s-6);
}
.ag-card--quiet { background: var(--surface); }
.ag-card--demo { border: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--border-strong); }
.ag-card__title, .pf-card__title, .st-card__title {
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.pf-card--danger, .st-card--danger { border: 0; }
.pf-card--danger .pf-card__title, .st-card--danger .st-card__title { color: var(--danger-text); }

/* Подписи — обычным регистром, не капсом с разрядкой */
.ag-token__label, .ag-demo__label, .pf-sub {
  text-transform: none;
  letter-spacing: -0.01em;
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--text-3);
}

/* Код связи — серая плоскость без рамки */
.ag-token { border: 0; border-radius: 14px; }

/* Строки-переходы агента — одна плоскость */
.ag-rows { gap: 0; border-radius: 18px; background: var(--surface); overflow: hidden; }
.ag-row {
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: var(--s-4) var(--s-5);
}
.ag-row + .ag-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--s-5) + 8px + var(--s-3));
  right: 0;
  height: 1px;
  background: var(--border);
}
.ag-row:hover { border-color: transparent; background: var(--surface-2); }
.ag-row:hover > svg { transform: none; color: var(--text-3); }
.ag-row__title { font-weight: 500; letter-spacing: -0.015em; }
.ag-row__meta { color: var(--text-3); font-size: var(--fs-14); }

/* «Пропущенное»: список одной плоскостью, предмет — точка */
.cu-list { gap: 0; border-radius: 18px; background: var(--surface); overflow: hidden; }
.cu-card {
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: var(--s-4) var(--s-5);
}
.cu-list > li + li .cu-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--s-5) + 8px + var(--s-4));
  right: 0;
  height: 1px;
  background: var(--border);
}
.cu-card:hover { border-color: transparent; background: var(--surface-2); }
.cu-card.is-selected { border-color: transparent; background: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); box-shadow: none; }
.cu-card.is-caught { border-style: none; }
.cu-card__code {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--subj, var(--text-3));
  font-size: 0;
  color: transparent;
}
.cu-card__subject { font-weight: 500; letter-spacing: -0.015em; }
.cu-detail { border: 0; border-radius: 18px; box-shadow: none; }
.cu-detail__subject { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.035em; }
.cu-stage__dot { border: 0; background: var(--surface-2); }
.cu-fail, .cu-empty { border: 0; border-radius: 14px; background: var(--surface-2); }
.cu-done { border: 0; border-radius: 14px; background: var(--success-soft); }

/* Журнал агента: пары — одна плоскость, раскрытая не выпрыгивает тенью */
.al-list { gap: 0; border-radius: 18px; background: var(--surface); overflow: hidden; }
.al-pair { position: relative; border: 0; border-radius: 0; background: transparent; }
.al-pair + .al-pair::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--s-5) + 8px + var(--s-4));
  right: 0;
  height: 1px;
  background: var(--border);
}
.al-pair[open], .al-pair:hover { border-color: transparent; box-shadow: none; }
.al-pair__head { padding: var(--s-4) var(--s-5); }
.al-pair__head:hover { background: var(--surface-2); }
.al-pair__subject { font-weight: 500; letter-spacing: -0.015em; }
.al-pair__meta { color: var(--text-3); font-size: var(--fs-14); }
.al-pair__code {
  width: 8px;
  height: 8px;
  min-width: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--subj, var(--text-3));
  font-size: 0;
  color: transparent;
}
.al-devices { border: 0; border-radius: var(--r-full); background: var(--surface-2); color: var(--text); font-weight: 500; }
.al-devices:hover { border-color: transparent; background: color-mix(in srgb, var(--surface-2) 86%, var(--text)); }
.al-devices:hover svg:last-child { transform: none; color: inherit; }

/* Дисциплины: одна плоскость */
.subj-list { gap: 0; border-radius: 18px; background: var(--surface); overflow: hidden; }
.subj-card {
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: var(--s-4) var(--s-5);
}
.subj-card + .subj-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--s-5);
  right: 0;
  height: 1px;
  background: var(--border);
}
.subj-card:hover, .subj-card:focus-visible { border-color: transparent; box-shadow: none; background: var(--surface-2); }
.subj-card:focus-visible { outline-offset: -2px; }
.subj-card:focus-visible .subj-card__go { transform: none; }
.subj-card__name { font-weight: 500; letter-spacing: -0.015em; }
.subj-card__meta { color: var(--text-3); font-size: var(--fs-14); }

/* Профиль */
.pf-id__name { letter-spacing: -0.04em; }
.pf-id__avatar { background: var(--surface-2); color: var(--text); }
.pf-row { padding: var(--s-3) 0; font-size: var(--fs-16); }
.pf-row__label { color: var(--text-2); }
.pf-devices { gap: 0; border-radius: 14px; background: var(--surface-2); overflow: hidden; }
.pf-device { position: relative; border: 0; border-radius: 0; background: transparent; padding: var(--s-3) var(--s-4); }
.pf-device + .pf-device::before { content: ""; position: absolute; top: 0; left: var(--s-4); right: 0; height: 1px; background: var(--border); }
.pf-device:hover { border-color: transparent; transform: none; }
.pf-device.is-current { border-color: transparent; font-weight: 500; }
.pf-export { border: 0; border-radius: 14px; background: var(--surface-2); }
.pf-note--edge { border-top: 0; }

/* Настройки */
.st-id { border: 0; border-radius: 14px; background: var(--surface-2); }
.st-id__avatar { background: var(--surface); color: var(--text); }
.st-callout { border-radius: 14px; }
.st-callout svg { color: var(--text-3); }

/* Диалоги досье и преподавателя */
.dossier-card, .who-card { border: 0; border-radius: 22px; }
[data-theme="dark"] .dossier-card,
[data-theme="dark"] .who-card { box-shadow: 0 0 0 1px var(--border), var(--shadow-md); }

/* .spot::before выше гасит свечение — линиям-разделителям вернуть видимость. */
.ag-row + .ag-row::before,
.cu-list > li + li .cu-card::before,
.al-pair + .al-pair::before,
.subj-card + .subj-card::before { display: block; opacity: 1; bottom: auto; }

/* Загон питомца в профиле — плоскость без рамки, имя — крупно. */
.pen { border: 0; border-radius: 18px; box-shadow: none; }
.pf-id__name { font-size: clamp(2rem, 5vw, 3rem); }

/* Выбор ОС: серые плитки без рамки, выбранная — обведена акцентом, как выбор
   модели в магазине Apple. Заливка фиолетовым тут была вторым акцентом на экране. */
.os-option { border: 0; background: var(--surface-2); box-shadow: inset 0 0 0 2px transparent; transition: box-shadow var(--dur-micro) var(--ease-out); }
[data-theme="dark"] .os-option { border: 0; }
.os-option:hover { box-shadow: inset 0 0 0 2px var(--border-strong); }
.os-option.is-selected { background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--accent); }
.os-option__icon { background: var(--surface); }
.os-option.is-selected .os-option__icon { background: var(--surface); color: var(--text); }
.os-option__name { font-weight: 600; letter-spacing: -0.02em; }

/* Ссылки-действия в настройках — акцентом со стрелкой-шевроном. */
.st-actions__link { color: var(--accent-text); font-size: var(--fs-16); font-weight: 500; }
.st-actions__link svg { display: none; }
.st-actions__link::after { content: "\00a0\203A"; }
.st-actions__link:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* Поиск в шапке — серая таблетка без рамки; на телефоне и он, и тема —
   круги того же размера, что аватар и «назад». */
.pal-btn { border: 0; background: var(--surface-2); color: var(--text-2); }
.pal-btn:hover { border-color: transparent; background: color-mix(in srgb, var(--surface-2) 86%, var(--text)); }
@media (max-width: 519px) {
  .pal-btn { border-radius: 50%; background: var(--surface-2); color: var(--text); }
}
@media (max-width: 599px) {
  [class*="-top__right"] .theme-switch { border-radius: 50%; }
  :root:not([data-theme="dark"]) [class*="-top__right"] .theme-switch__icon--sun,
  [data-theme="dark"] [class*="-top__right"] .theme-switch__icon--moon { color: var(--text); }
}

/* =====================================================================
   Редизайн 3 «Лаванда на бумаге» (ROADMAP-26.09 §16, design-system.md)
   Цвета и шрифты пришли из tokens.css; здесь — роли поверх формы Редизайна 2.
   Образец 1:1 — _prototypes/prototype-4-redesign-3.html.
   ===================================================================== */

/* ---------- Заголовки экранов: Unbounded, плотный трекинг ----------
   Только крупные заголовки. Подзаголовки карточек и строки списков остаются
   на Onest: широкий гротеск в мелком кегле читается как крик. */
.db-hello__title,
[class*="-head__title"],
.ag-title,
.next__subject,
.pr-title,
.pr-hero__title {
  font-family: var(--font-headline);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 1.05;
}
/* Вторая половина заголовка — тише: «Доброе утро, Влад. <span>Три пары.</span>» */
[class*="-head__title"] .muted-part,
.db-hello__title .muted-part { font-weight: 500; color: var(--text-3); }

/* ---------- Кнопки ----------
   Главная — чернильная (в тёмной теме бумажная). Фиолетовая только у действий
   агента: подключить, настроить, забрать запись, тариф с агентом (.btn--accent). */
.btn { font-family: var(--font-ui); font-weight: 500; }
.btn--primary { --btn-bg: var(--cta-bg); --btn-fg: var(--cta-fg); }
.btn--primary:not(:disabled):hover { --btn-bg: var(--cta-bg); box-shadow: none; opacity: 0.86; }
.btn--accent { --btn-bg: var(--accent); --btn-fg: var(--on-accent); }
.btn--accent:not(:disabled):hover { --btn-bg: var(--accent-hover); opacity: 1; }

/* ---------- Карточки: радиус 28, тень с оттенком сливы ----------
   На светлой мягкая тень отделяет белый лист от бумаги; на тёмной вместо неё
   волосяная линия (--shadow-card переопределён в тёмных токенах). */
.panel,
.invite,
.notes,
.db-burn__list,
.lib-shelves,
.lib-notes,
.lib-empty,
.hw-focus,
.hw-list1,
.ag-card,
.ag-rows,
.cu-list,
.cu-detail,
.al-list,
.subj-list,
.pf-card,
.st-card,
.pen {
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
}
.ag-card--demo { box-shadow: inset 0 0 0 1px var(--border-strong); }

/* ---------- «Сейчас»: одна лавандовая плоскость на экран ----------
   Ближайшая пара на главной и идущая пара в расписании. Ночью — слива. */
.panel.next {
  background: var(--now-bg);
  color: var(--now-fg);
  box-shadow: none;
}
.panel.next .panel__label,
.panel.next .next__meta,
.panel.next .next__meta strong,
.panel.next .next__subj,
.panel.next .muted { color: var(--now-2); }
.panel.next .next__subject { color: var(--now-fg); }
.panel.next .link-more,
.panel.next .next__week { color: var(--now-fg); }
.panel.next .btn--ghost { --btn-bg: color-mix(in srgb, var(--now-fg) 10%, transparent); --btn-fg: var(--now-fg); }

/* ---------- Метки ---------- */
.badge--ok { background: var(--success-soft); color: var(--success); }

/* ---------- Сегменты и вкладки: белая таблетка на песке ---------- */
.seg__pill,
.nt-tabs__btn[aria-selected="true"] { box-shadow: 0 1px 4px rgba(22, 18, 28, 0.12); }

/* ---------- Фокус ---------- */
:focus-visible { outline-color: var(--accent); }

/* Заголовки секций внутри экрана — на ступень тише заголовка экрана. */
[class*="-head__sub"] { font-weight: 400; color: var(--text-2); letter-spacing: -0.01em; }
.hw-focus__title, .cu-detail__subject { font-family: var(--font-headline); font-weight: 600; letter-spacing: -0.05em; line-height: 1.08; }

/* Переключатель темы без рамки (Редизайн 2 снял её): кругляш по центру иконок.
   С рамкой он стоял на 3px; без неё уезжал на 2px влево и на 1px вверх от солнца. */
.theme-switch__knob { top: 4px; left: 5px; }
[data-theme="dark"] .theme-switch__knob { transform: translateX(34px); }

/* ---------- Строка разделов: дорожка и ползунок (как в прототипе 4) ----------
   Песочная дорожка, белая таблетка под активным разделом. Таблетку ставит и
   двигает App.nav.slidePill; без неё (JS ещё не дошёл) активный раздел сам
   подсвечен той же таблеткой. */
.db-nav { position: relative; padding: 4px; gap: 2px; border-radius: var(--r-full); background: var(--surface-2); }
.db-nav__link { position: relative; z-index: 1; min-height: 32px; padding: 0 14px; border-radius: var(--r-full); font-size: 0.875rem; font-weight: 500; }
.db-nav__link[aria-current="page"] { color: var(--text); }
.db-nav:not(.has-pill) .db-nav__link[aria-current="page"] { background: var(--surface); box-shadow: 0 1px 4px rgba(22, 18, 28, 0.1); }
.db-nav__pill { position: absolute; top: 0; left: 0; z-index: 0; border-radius: var(--r-full); background: var(--surface); box-shadow: 0 1px 4px rgba(22, 18, 28, 0.1); pointer-events: none; }
@media (min-width: 900px) and (max-width: 1279px) { .db-nav__link { padding: 0 9px; } }

/* В карточке «сейчас» главное действие — брифинг: чернильная таблетка, как
   «Открыть пару» в прототипе. В расписании он остаётся второстепенным. */
.panel.next .brf__btn { --btn-bg: var(--cta-bg); --btn-fg: var(--cta-fg); }
.panel.next .brf__btn:hover { --btn-bg: var(--cta-bg); opacity: 0.86; }

/* ---------- Конспект ----------
   Подзаголовки внутри текста — Onest, как в прототипе: Unbounded в длинном
   чтении давит. Слайд — плоскость без рамки и без фиолетовой полосы. Липкие
   вкладки встают под шапку (--top-h; была своя 64px — между ними просвечивал текст). */
.nt-sec__title { font-family: var(--font-ui); font-weight: 600; font-size: clamp(1.375rem, 2vw, 1.625rem); letter-spacing: -0.025em; line-height: 1.25; }
.slide-face { border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.nt-tabs {
  top: calc(var(--top-h) + env(safe-area-inset-top, 0px) + var(--s-2));
  border: 0;
  border-radius: var(--r-full);
  box-shadow: 0 calc(-1 * var(--s-2) - 2px) 0 2px var(--bg);
}

/* Бейдж «демо» рядом с заголовком экрана — у первой строки, а не посередине двух. */
[class*="-head__row"] { align-items: flex-start; }
[class*="-head__row"] > :not(h1):not(h2) { margin-top: 0.9em; }

/* ================= Контролы 1:1 с прототипом 4 (ROADMAP §16.1) =================
   РАЗМЕРЫ контролов (высота, отступы, кегль) живут в base.css: он подключён
   первым, и экраны со своим размером (квадратная «Отправить» у репетитора,
   маленькие иконки в строках) его перебивают. Здесь, в последнем файле, —
   только цвет и форма, иначе этот блок затирает размеры экранов (16.2). */
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.4; }
.btn--danger {
  --btn-bg: transparent;
  --btn-fg: var(--danger);
  border-color: transparent;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--danger) 40%, transparent);
}
.btn--danger:not(:disabled):hover { --btn-bg: color-mix(in srgb, var(--danger) 8%, transparent); }


/* Ссылка второго действия — со стрелкой, которая уезжает на наведении. */
.link-more::after,
.next__week::after {
  content: "\2192";
  display: inline-block;
  margin-left: 6px;
  font-size: 0.95em;
  transition: transform 0.25s var(--ease-out);
}
.link-more:hover,
.next__week:hover { text-decoration: none; }
.link-more:hover::after,
.next__week:hover::after { transform: translateX(3px); }

/* Поле: 48px, песок, без рамки; фокус — кольцо 2px акцентом, фон не белеет. */
.input { border: 0; border-radius: var(--r-md); background: var(--surface-2); box-shadow: none; transition: box-shadow 0.2s var(--ease-out); }
.input:focus { background: var(--surface-2); box-shadow: 0 0 0 2px var(--accent); }
[data-theme="dark"] .input { background: var(--surface-2); }
.input[aria-invalid="true"] { box-shadow: 0 0 0 2px var(--danger); }
.field__label { font-weight: 500; }

/* Метки: таблетка 13px/500, отступы 6×12. Цвет — по смыслу: шалфей «готово»,
   абрикос «срок», лаванда «новое», красный только у живой записи. */
.badge--neutral { background: var(--surface-2); color: var(--text-2); }
.badge--ok { background: color-mix(in srgb, var(--lime) 32%, transparent); color: var(--lime-text); }
.badge--ok svg { color: currentColor; }
.badge--warn,
.badge--hw,
.badge--due.is-soon { background: color-mix(in srgb, var(--warning) 28%, transparent); color: var(--tang-text); }
.badge--warn svg { color: currentColor; }
.badge--new { background: var(--accent-soft); color: var(--accent-text); }
.badge--live { background: color-mix(in srgb, #E5484D 14%, transparent); color: var(--danger); }
.badge--live .pulse-dot { background: #E5484D; }


/* Сегмент: песочная дорожка 4px, пункты 8×16 14px/500, выбранный — белая таблетка. */
[data-theme="dark"] .seg { background: var(--surface-2); }
[data-theme="dark"] .seg__pill { background: var(--surface); border-color: transparent; }
.seg:not(:has(.seg__pill)) > [aria-pressed="true"],
.seg:not(:has(.seg__pill)) > [aria-selected="true"] { background: var(--surface); box-shadow: 0 1px 4px rgba(22, 18, 28, 0.12); }

/* Чипы-фильтры (предметы): песок, выбранный — чернильный. */
.chip-f {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-14);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.chip-f:hover { color: var(--text); }
.chip-f[aria-pressed="true"] { background: var(--cta-bg); color: var(--cta-fg); }
/* Main v2: выбранный предмет красит фильтр своей подложкой, «Все» остаётся чернилами. */
.chip-f[class*="s-"][aria-pressed="true"] {
  background: var(--subj-soft);
  color: var(--subj-ink);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--subj) 55%, transparent);
}
.chip-f__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--subj, var(--text-3)); flex: none; }

/* Группа внутри списка-карточки: «Эта неделя», «Позже». */
.list-group { padding: 20px 24px 6px; font-size: 0.8125rem; font-weight: 600; color: var(--text-3); letter-spacing: 0; }

/* Заголовок экрана — размер .h1 прототипа (до 52px), один на все экраны.
   Раньше каждый экран держал свой (до 64px) и главная кричала громче остальных. */
.db-hello__title,
[class*="-head__title"] { font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: -0.055em; line-height: 1.05; }
.db-hello__date { font-size: var(--fs-14); color: var(--text-3); }
.db-hello { gap: 12px; }
/* Шапка — стекло без линии снизу, как в прототипе. */
.db-top, .hw-top, .lib-top, .sc-top { border-bottom: 0; }

/* Ссылки-переходы в настройках — та же стрелка «→», что у .link-more. */
.st-actions__link::after { content: "\2192"; display: inline-block; margin-left: 6px; transition: transform 0.25s var(--ease-out); }
.st-actions__link svg { display: none; }
.st-actions__link:hover { text-decoration: none; }
.st-actions__link:hover::after { transform: translateX(3px); }

/* Тумблер в карточке настроек и кабинета — строкой: подпись слева, переключатель
   справа, как «Тихий режим на парах» в прототипе. */
.st-card .toggle,
.pf-card .toggle { display: flex; width: 100%; justify-content: space-between; gap: 16px; text-align: left; font-weight: 400; }

/* Опасные действия — прозрачная таблетка с красной обводкой (прототип «Удалить аккаунт»). */
.st-danger__btn,
.pf-danger__btn {
  --btn-bg: transparent;
  --btn-fg: var(--danger);
  border-color: transparent;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--danger) 40%, transparent);
}
.st-danger__btn:not(:disabled):hover,
.pf-danger__btn:not(:disabled):hover { --btn-bg: color-mix(in srgb, var(--danger) 8%, transparent); }
.pf-danger__btn.is-armed { --btn-bg: color-mix(in srgb, var(--danger) 14%, transparent); }

/* Заголовки экранов, у которых класс не «*-head__title»: имя в кабинете и шаги
   мастера агента — тот же Unbounded, что у остальных экранов. */
.pf-id__name,
.as-step__title { font-family: var(--font-headline); font-weight: 600; letter-spacing: -0.055em; line-height: 1.05; }
.pf-id__name { font-size: clamp(2rem, 4vw, 3.25rem); }

/* Правая часть шапки на всех экранах — один ряд: поиск, тема, аватар. */
[class*="-top__right"] { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* The agent page is ours (Max, 05.10: the mascot says the status), not the prototype's: only its screen
   title follows the other sections' headline size. */
.ag-title { font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: var(--s-6); }

/* Header row on a computer: one centre line for everything (Max 06.10, «неровно»). The logo stood on the text
   baseline, so its word sat 4.5px above the menu labels and the mark 2px; the search pill was 34px next to 40px
   controls, the note's buttons 44px. */
@media (min-width: 900px) {
  .container[class*="-top__inner"] .logo { align-items: center; align-self: center; }
  .container[class*="-top__inner"] .logo__mark { top: 0; }
  [class*="-top__right"] .pal-btn,
  [class*="-top__right"] .icon-btn,
  [class*="-top__right"] .avatar-btn { height: 40px; min-height: 40px; }
  [class*="-top__right"] .icon-btn,
  [class*="-top__right"] .avatar-btn { width: 40px; min-width: 40px; }
}

/* ---------- Main v2: бейджи тонов ----------
   Справка (онлайн, сведения) — небо; фиолетовый остаётся за действием. */
.badge--info { background: var(--blue-soft); color: var(--blue-ink); }
.badge--info svg { color: currentColor; }

/* «Показать ещё N» под длинным списком (App.utils.clip), как в «Пропущенном». */
.list-more { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-3); }
.list-more__left { color: var(--text-3); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }

/* Свёртки по времени (App.utils.fold): конспекты и сданная домашка — эта неделя, прошлая, дальше по месяцам; активная
   домашка — по срочности. Заголовок — строка «Октябрь 14 ⌄», под ним плоскость строк. Закрытые месяцы стоят
   плотной стопкой заголовков — весь семестр виден одним экраном. */
.folds { display: grid; gap: var(--s-1); }
.fold__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-3);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: var(--fs-16);
  font-weight: 600;
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.fold__head::-webkit-details-marker { display: none; }
.fold__head:hover { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.fold__head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fold__count { color: var(--text-3); font-size: var(--fs-14); font-weight: 500; font-variant-numeric: tabular-nums; }
.fold__head svg { width: 16px; height: 16px; margin-left: auto; color: var(--text-3); transition: transform var(--dur-state) var(--ease-out); }
.fold[open] > .fold__head svg { transform: rotate(180deg); }
/* Air under an open heading (Max 20.10: the hover pill sat right on the block) and more after the block than
   before the next heading, so a heading reads as belonging to what is under it. */
.fold[open] > .fold__head { margin-bottom: var(--s-3); }
.fold__body { padding-bottom: var(--s-6); }