/* Урок Просто — оболочка кабинета нового дизайна (up-shell.css, techkarta-back#257).
   Единственный общий файл, которого нет на макете: на макете меню (Sidebar.dc.html) и корень экрана свёрстаны
   строчными style=, здесь те же значения — классами. Подключается после up-kit.css
   (index.html). Корень — .v2-root.up.up-shell; меню — .f-side > nav.v2-root.up-sb (селекторы кита
   `.up > .f-side`, `.up > .f-side + div`, `.sb-collapse`, `.sb-close` — оттуда).
   Разделы: 1 корень и рабочая область · 2 меню · 3 кнопки оболочки · 4 плашки внизу · 5 окна оболочки ·
   6 движение (появление блоков) · 7 значки и ссылки частей оболочки · 8 вес заголовков · 9 страницы без меню. */

/* ---------- 1. корень и рабочая область (строчные стили корня артбордов макета) ---------- */
body { margin: 0; }
/* Кривые кита — ещё и на корне документа: псевдоэлементы ::view-transition-* наследуют от html, а не от .up, и без этого
   `animation: … var(--ease-out)` у них недействительна — на входе старый и новый шаг .38 с стояли друг на друге. */
:root { --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-apple: cubic-bezier(.32, .72, 0, 1); }
.up [hidden] { display: none !important; }
.up-shell { --f-rf: 12px; --f-rc: 16px; position: relative; min-height: 100vh; display: flex; flex-wrap: wrap; align-items: stretch; background: var(--sb-bg); color: var(--ink);
  font-family: var(--font-sans); font-size: 16px; line-height: 24px; -webkit-font-smoothing: antialiased; }
.up-shell > .f-side { flex: 0 0 auto; background: var(--sb-bg); }
.up-shell > .up-work { flex: 999 1 560px; min-width: 0; }
/* страница без меню (лендинг): корень — обычный блок, как у LandUp.dc.html */
.up-bare { min-height: 100vh; color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 24px; -webkit-font-smoothing: antialiased; }
/* ссылки экрана — как <helmet> артбордов макета (a { color }); :where — та же специфичность (0,0,1), классы кита её перебивают */
:where(.v2-root.up) a { color: var(--ws-accent); }
/* :hover — тоже под :where: иначе (0,1,1) перебивает цвет класса, и у ссылки-кнопки (a.up-btn) при наведении надпись
   сливалась с фоном — оба становились --ws-accent-ink */
:where(.v2-root.up) a:where(:hover) { color: var(--ws-accent-ink); }
/* тёмная тема: главная кнопка при наведении — --primary-hover, как задумано в up-home.css; без !important её перебивало
   правило v2.css (.f-btn-accent:hover — --ws-accent-ink !important, в тёмной теме это светлый цвет): белая надпись на
   светло-сиреневом не читалась */
.up[data-theme="dark"] .up-btn.f-btn-accent:hover:not(:disabled) { background: var(--primary-hover) !important; }
/* «Перейти к содержанию»: видна только с клавиатуры */
.up-skip { position: absolute; left: 12px; top: -64px; z-index: 80; height: 40px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--line-strong); color: var(--ink) !important; font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none; }
.up-skip:focus-visible { top: 12px; }
/* окно «Задайте пароль» открыто — страница за ним не нажимается */
.up-shell[data-blur="true"] > .f-side, .up-shell[data-blur="true"] > .up-work { filter: blur(6px); pointer-events: none; user-select: none; }

/* ---------- 2. меню (Sidebar.dc.html) ---------- */
.up-sb { box-sizing: border-box; width: 264px; min-height: 900px; padding: 10px; display: flex; flex-direction: column; gap: 14px; background: var(--sb-bg); color: var(--ink);
  font-family: var(--font-sans); font-size: 14px; line-height: 20px; transition: width .2s var(--ease-out); }
@media (max-width: 1023px) { .up-sb { width: 100%; } }
.up-sb svg { display: inline-block; max-width: none; flex-shrink: 0; }
.up-sb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 40px; padding: 0 2px 0 6px; }
.up-sb-head > a { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.up-sb-mark { display: inline-grid; width: 28px; height: 28px; flex-shrink: 0; }
.up-sb-name { font-family: var(--font-display); font-weight: 800; font-size: 17px; line-height: 24px; color: var(--ink); white-space: nowrap; }
.up-sb .sb-collapse { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--text-2); cursor: pointer; flex-shrink: 0; }
.up-sb .sb-close { display: none; place-items: center; width: 44px; height: 44px; margin-right: -4px; border: 0; border-radius: 12px; background: transparent; color: var(--text-2); cursor: pointer; flex-shrink: 0; }
.up-sb-group { display: grid; gap: 2px; }
.up-sb-spacer { flex: 1 1 0%; }
/* пункт: .sb-item (наведение — v2.css) у невыбранного; у выбранного — подложка .up-sb-pill, она переезжает между пунктами (src/motion) */
/* у выбранного пункта нет overflow: hidden (у .sb-item он есть в v2.css): подложка в пути не должна обрезаться его краем */
.up-sb-item { position: relative; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; min-width: 0; max-width: 100%; border: 0; border-radius: 10px;
  background: transparent; color: var(--ink); font-family: inherit; font-size: 14px; line-height: 20px; font-weight: 400; text-decoration: none; text-align: left; cursor: pointer;
  transition: transform .12s var(--ease-out); }
.up-sb-item:hover { color: var(--ink); }
.up-sb-item:active { transform: scale(.98); }
.up-sb-item.is-strong, .up-sb-item.is-on { font-weight: 600; }
.up-sb-item.is-sub { height: 34px; }
.up-sb-item.is-sub > svg { color: var(--text-2); }
/* z-index: подложка в пути идёт поверх соседних пунктов — их значки и подписи остаются над ней */
.up-sb-item > svg, .up-sb-item > span:not(.up-sb-pill) { position: relative; z-index: 1; }
.up-sb-pill { position: absolute; inset: 0; border-radius: 10px; background: var(--sb-active); }
.up-sb-label { flex: 1 1 0%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-sb-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--sb-active); color: var(--ink); font-size: 12px; line-height: 20px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.up-sb-count { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* заголовок группы: «Недавние», «Документы по форматам», «Помощь» */
.up-sb-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2);
  font-family: inherit; font-size: 12px; line-height: 16px; font-weight: 600; cursor: pointer; text-align: left; }
.up-sb-title > svg { transition: transform .15s var(--ease-out); }
.up-sb-title[aria-expanded="false"] > svg { transform: rotate(-90deg); }
/* раскрытие группы: высота 0fr → 1fr (как морф главной кнопки кита); закрытая — вне фокуса и доступности (visibility) */
.up-sb-fold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s var(--ease-apple), visibility 0s; }
.up-sb-fold > div { display: grid; gap: 2px; min-height: 0; overflow: hidden; }
.up-sb-fold[data-open="false"] { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .3s var(--ease-apple), visibility 0s linear .3s; }
/* тумблер темы */
/* у кнопки на макете высота строки не задана (normal) — подпись на 1 px ниже, чем у ссылок */
button.up-sb-item:is([role="switch"], .up-sb-profile) { line-height: normal; }
.up-sb-toggle { position: relative; width: 32px; height: 18px; border-radius: 999px; background: var(--line-strong); transition: background-color .15s var(--ease-out); flex-shrink: 0; }
.up-sb-toggle > span { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 999px; background: #ffffff; transition: transform .3s var(--spring-soft); }
[aria-checked="true"] > .up-sb-toggle { background: var(--ws-accent); }
[aria-checked="true"] > .up-sb-toggle > span { transform: translateX(14px); }
/* профиль внизу */
.up-sb-profile { min-height: 52px; height: auto; padding: 8px 10px; margin-top: 4px; border-radius: 12px; width: 100%; }
.up-sb-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: var(--ws-accent-soft); color: var(--ws-accent-ink); font-size: 13px; font-weight: 700; flex-shrink: 0; }
.up-sb-who { display: grid; flex: 1 1 0%; min-width: 0; }
.up-sb-who > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-sb-who > span:first-child { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.up-sb-who > span:last-child { font-size: 12px; line-height: 16px; color: var(--text-2); }
.up-sb-dots { color: var(--text-2); }
/* меню профиля: «Личный кабинет», «Выйти» — всплывает над строкой профиля (вид — список «Мои классы» кита, up-mc-pop) */
.up-sb-menu { position: fixed; z-index: 70; display: grid; gap: 2px; min-width: 208px; padding: 6px; border-radius: 16px; background: var(--surface); border: 1px solid var(--up-card-line);
  box-shadow: 0 1px 2px rgba(31, 27, 58, .06), 0 24px 56px -18px rgba(60, 40, 120, .42); transform-origin: 24px 100%; }
.up[data-theme="dark"] .up-sb-menu { box-shadow: 0 24px 56px -14px rgba(0, 0, 0, .8); }
.up-sb-menu form { display: grid; margin: 0; }
.up-sb-menu .up-sb-item { height: 40px; width: 100%; }
.up-sb-menu .up-sb-item > svg { color: var(--ws-icon); }
/* гость: строка о бесплатном документе и «Войти» */
.up-sb-guest { display: grid; gap: 8px; margin-top: 6px; padding: 0 2px 2px; }
.up-sb-guest-hint { margin: 0; padding: 0 8px; font-size: 13px; line-height: 18px; color: var(--text-2); }
.up-sb-guest .up-shell-ghost { justify-content: center; }

/* свёрнутое меню (72 px) — только на десктопе: ниже 1024 px меню выезжает целиком (кит), кнопки «свернуть» там нет */
@media (min-width: 1024px) {
  .up-sb[data-collapsed="true"] { width: 72px; }
  .up-sb[data-collapsed="true"] .up-sb-item { padding: 0; justify-content: center; }
  /* подписи скрыты, остаются значки; «Недавние» скрыты целиком, форматы показаны всегда (как на макете) */
  .up-sb[data-collapsed="true"] :is(.up-sb-head > a, .up-sb-label, .up-sb-badge, .up-sb-count, .up-sb-title, .up-sb-who, .up-sb-dots, .up-sb-toggle, .up-sb-guest-hint, .up-sb-group[data-group="recent"]) { display: none; }
  .up-sb[data-collapsed="true"] .up-sb-group[data-group="formats"] > .up-sb-fold { grid-template-rows: 1fr; visibility: visible; }
  .up-sb[data-collapsed="true"] .up-sb-profile { padding: 8px 0; }
  .up-sb[data-collapsed="true"] .up-sb-guest .up-shell-ghost { padding: 0; width: 44px; justify-self: center; justify-content: center; }
  .up-sb[data-collapsed="true"] .up-sb-guest .up-shell-ghost > span { display: none; }
}

/* ---------- 3. кнопки оболочки ----------
   Те же значения, что у .up-btn (up-home.css) и .up-docs-ghost (up-docs.css): эти файлы подключены не на всех экранах,
   а плашки и окна оболочки видны везде. На экранах — классы кита (src/ui/Button.tsx), не эти. */
.up-shell-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px 0 16px; border: 0; border-radius: 999px;
  background: var(--ws-accent); color: #fff; font-family: inherit; font-size: 15px; line-height: 22px; font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none;
  box-shadow: 0 1px 2px rgba(31, 27, 58, .2), 0 12px 26px -10px rgba(75, 64, 184, .65);
  transition: transform .12s var(--ease-out), box-shadow .2s, background-color .2s var(--ease-out), opacity .2s; }
.up-shell-btn:hover:not(:disabled) { color: #fff; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(31, 27, 58, .2), 0 16px 30px -10px rgba(75, 64, 184, .75); }
.up-shell-btn:active:not(:disabled) { transform: scale(.97); }
.up[data-theme="dark"] .up-shell-btn { background: var(--primary); color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 26px -10px rgba(123, 98, 255, .6); }
.up .up-shell-btn:focus-visible { outline-color: var(--surface); }
.up-shell-ghost { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: 15px; line-height: 20px; font-weight: 600; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: border-color .15s, color .15s, background-color .15s, transform .12s var(--ease-out); }
.up-shell-ghost svg { color: var(--ws-icon); transition: color .15s var(--ease-out); }
.up-shell-ghost:hover { border-color: var(--ws-accent); color: var(--ws-accent-ink); }
.up-shell-ghost:hover svg { color: var(--ws-accent); }
.up-shell-ghost:active { transform: scale(.97); }
:is(.up-shell-btn, .up-shell-ghost).is-sm { height: 36px; padding: 0 14px; font-size: 14px; }
:is(.up-shell-btn, .up-shell-ghost):disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.up-shell-x { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border: 0; border-radius: 12px; background: transparent; color: var(--text-2); cursor: pointer; text-decoration: none;
  transition: background-color .15s var(--ease-out), color .15s var(--ease-out); }
.up-shell-x:hover { background: var(--surface-2); color: var(--ink); }
.up-shell-x svg { display: block; }

/* ---------- 4. плашки внизу рабочей области: cookie, «Документы закончились», «документ готов» ----------
   Последний блок рабочей области, прилипает к низу окна: в конце страницы стоит под содержимым и его не закрывает. */
.up-shbars { position: sticky; bottom: 0; z-index: 30; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 8px; padding: 0 16px; pointer-events: none; }
.up-shbars > * { pointer-events: auto; }
.up-shbars:has(> :not([hidden])) { padding-bottom: 16px; }
.up-shbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; width: 100%; max-width: 720px; padding: 10px 10px 10px 18px; border-radius: 22px;
  border: 1px solid var(--up-card-line); background: color-mix(in srgb, var(--surface) 86%, transparent); color: var(--ink); font-size: 14px; line-height: 20px;
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 1px 2px rgba(31, 27, 58, .06), 0 18px 44px -18px rgba(60, 40, 120, .42); }
.up[data-theme="dark"] .up-shbar { box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .8); }
.up-shbar p { margin: 0; flex: 1 1 240px; min-width: 0; text-wrap: pretty; }
.up-shbar a:not([class]) { color: var(--ws-accent-ink); font-weight: 600; text-decoration: none; }
.up-shbar a:not([class]):hover { text-decoration: underline; text-underline-offset: 3px; }
.up-bar-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.up-bar-hint { color: var(--text-2); }
.up-toasts { justify-self: end; display: grid; gap: 8px; width: 380px; max-width: 100%; }
.up-toast { display: flex; align-items: flex-start; gap: 12px; padding: 14px 10px 14px 16px; border-radius: 20px; border: 1px solid var(--up-card-line); background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 2px rgba(31, 27, 58, .06), 0 24px 56px -18px rgba(60, 40, 120, .42); }
.up[data-theme="dark"] .up-toast { box-shadow: 0 24px 56px -14px rgba(0, 0, 0, .8); }
.up-toast-dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 6px; border-radius: 4px; background: var(--success); }
.up-toast[data-kind="failed"] .up-toast-dot { background: var(--error); }
.up-toast-body { display: grid; gap: 10px; justify-items: start; flex: 1 1 auto; min-width: 0; }
.up-toast-title { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; overflow-wrap: anywhere; }
.up-toast .up-shell-x { margin: -6px 0 0; }
/* подсказка тарифа над содержимым экрана нового дизайна (PlanNotice) — строка-примечание, как up-acct-note макета */
.up-shell-note { display: flex; align-items: flex-start; gap: 10px; max-width: 880px; width: 100%; margin: 0 auto 16px; padding: 10px 8px 10px 16px; border-radius: 16px; border: 1px solid var(--up-card-line);
  background: var(--up-glass); color: var(--ink); font-size: 14px; line-height: 20px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.up-shell-note > :first-child { flex: 1 1 auto; min-width: 0; display: grid; gap: 10px; padding: 8px 0; text-wrap: pretty; }
.up-shell-note p { margin: 0; }
.up-shell-note a:not([class]) { color: var(--ws-accent-ink); font-weight: 600; text-decoration: none; }
.up-shell-note a:not([class]):hover { text-decoration: underline; text-underline-offset: 3px; }
.up-shell-note .plan-limit { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.up-shell-note .plan-limit form { margin: 0; }
.up-shell-note .plan-quote { margin: 4px 0 0; font-size: 12px; line-height: 16px; color: var(--text-2); }

/* ---------- 5. окна оболочки ----------
   «Задайте пароль» — классы окна кита (up-mc-overlay, up-mc-dlg). */
/* общее окно (src/ui/Dialog.tsx): затемнение уходит плавно вместе с окном */
.up-mc-overlay.is-leaving { pointer-events: none; }
.up-mc-dlg-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* общее всплывающее меню (src/ui/Popover.tsx) — вид списка «Мои классы» кита */
.up-pop-wrap { position: relative; display: inline-flex; }
.up-pop { position: absolute; z-index: 45; top: calc(100% + 6px); left: 0; min-width: 100%; width: max-content; max-width: min(360px, calc(100vw - 24px)); display: grid; gap: 4px; padding: 8px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--up-card-line); box-shadow: 0 1px 2px rgba(31, 27, 58, .06), 0 24px 56px -18px rgba(60, 40, 120, .42); transform-origin: 30px 0; }
.up-pop.is-end { left: auto; right: 0; transform-origin: calc(100% - 30px) 0; }
.up[data-theme="dark"] .up-pop { box-shadow: 0 24px 56px -14px rgba(0, 0, 0, .8); }

/* ---------- 6. движение: появление блоков лесенкой (src/motion/Rise.tsx) ----------
   Те же значения, что у .up-home .up-rise (up-home.css), но без привязки к главной: любой экран. Выключатель
   prefers-reduced-motion — общий, в ките (.up * { animation: none }). */
.up-m-rise { animation: up-m-rise .5s var(--ease-out) backwards; animation-delay: calc(var(--n, 0) * 70ms); }
@keyframes up-m-rise { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }

/* Капсула форматов: к крайней вкладке подложка доезжает без перелёта. Пружина кита перелетает на 9 % пути — у края это
   до 68 px за пределами дорожки (переход «Классный час → Техкарта»); внутри дорожки перелёт остаётся. */
.up-fmt[data-edge="true"] > .up-fmt-pill { transition-timing-function: var(--ease-apple); }
@media (min-width: 640px) and (max-width: 1179px) {
  .up-fmt[data-edge] > .up-fmt-pill { transition-timing-function: var(--spring); }
  .up-fmt[data-edge-mid="true"] > .up-fmt-pill { transition-timing-function: var(--ease-apple); }
}

/* ---------- 7. значки и ссылки в частях оболочки ---------- */
.up-shell :is(.up-topbar, .up-shbars, .up-sb) a { text-decoration: none; }
.up-shell :is(.up-topbar, .up-shbars) svg { display: inline-block; max-width: none; }
.up-shell .up-topbar-btn svg { display: block; }

/* ---------- 8. вес заголовков ----------
   На макете вес заголовков стоит строчным style (настройка холста «headings», принято 800) — здесь тем же весом
   для тех же классов; специфичность выше экранных правил, как и у строчного стиля. */
.up :is(.up-h1, .up-h3, .up-mc-dlg-t, .up-docs-eh, .up-docs-ftitle, .up-jb-h, .up-land-h1, .up-land-h2, .up-seo-cta-h, .up-wg-pop-t, .up-ctx-t) { font-weight: 800; }

/* ---------- 9. страницы без меню ---------- */
/* страница вместо приложения (FatalError, серверная страница ошибок): без меню, фон рабочей области — то же свечение, что у листа кабинета (up-kit.css) */
.up-fatal { background:
  radial-gradient(1100px 640px at 50% -260px, rgba(var(--up-indigo), .30), transparent 68%),
  radial-gradient(760px 560px at 104% 14%, rgba(var(--up-peach), .30), transparent 70%),
  radial-gradient(640px 460px at -6% 44%, rgba(var(--up-indigo), .10), transparent 70%),
  linear-gradient(180deg, #efecfa 0, var(--bg) 720px); }
.up-fatal[data-theme="dark"] { background:
  radial-gradient(1100px 640px at 50% -260px, rgba(var(--up-indigo), .26), transparent 68%),
  radial-gradient(760px 560px at 104% 14%, rgba(var(--up-peach), .12), transparent 70%),
  var(--bg); }