/* shell.css — общий каркас беты. Подключается ПОСЛЕДНИМ на каждой странице.
   Здесь: светлая тема, один навбар на все страницы, блокировка прокрутки
   под модалками, плавный переход между страницами. */

/* ══ 1. Светлая тема (data-scheme="light" ставит shell.js по Telegram) ═════ */
html[data-scheme="light"]{
  --bg:#f7f0f4;--s1:#ffffff;--s2:#f2e7ed;--s3:#e8d8e1;
  --sep:rgba(70,10,40,.10);--lens:rgba(214,40,106,.09);
  --ink:#1f0f18;--ink2:#6f5866;--ink3:#a08b97;
  --ac:#d6286a;--acr:214,40,106;--on-ac:#ffffff;--soft:#9c1a4c;--tint:rgba(214,40,106,.10);
  --bar:rgba(255,255,255,.86);--bad:#d8344e;--brand-rgb:214,40,106;
  --ui-tx-3:#a08b97;--ui-tx-4:#a08b97;
  --menu-accent:214,40,106;--menu-soft:#9c1a4c;--menu-top:#ffffff;--menu-bg:#f7f0f4;
  color-scheme:light;
}
html[data-scheme="light"][data-theme="graphite"]{
  --bg:#f2f4f7;--s1:#ffffff;--s2:#e9edf2;--s3:#dde2ea;
  --sep:rgba(15,30,60,.10);--lens:rgba(40,100,220,.09);
  --ink:#10151d;--ink2:#5b6574;--ink3:#97a0ad;
  --ac:#2f6fe4;--acr:47,111,228;--on-ac:#ffffff;--soft:#1d4fae;--tint:rgba(47,111,228,.10);
  --bar:rgba(255,255,255,.86);--bad:#d64545;--brand-rgb:47,111,228;
  --ui-tx-3:#97a0ad;--ui-tx-4:#97a0ad;
  --menu-accent:47,111,228;--menu-soft:#1d4fae;--menu-top:#ffffff;--menu-bg:#f2f4f7;
}
/* старые слои «Медиа» берут текст из --ui-*: в светлой теме — только наши цвета */
html[data-scheme="light"]{--ui-tx:var(--ink)!important;--ui-tx-2:var(--ink2)!important;--ui-sheet:var(--s1)!important;--ui-bg:var(--bg)!important}
/* тонкие белые рамки и подложки тёмной темы на белом не видны — заменяем */
html[data-scheme="light"] body{background:var(--bg)}
html[data-scheme="light"] .pv::after{box-shadow:inset 0 0 0 1px var(--sep)}
html[data-scheme="light"] .tool-card{border-color:var(--sep);background:var(--s1)}
html[data-scheme="light"] .tool-icon img{filter:none}
html[data-scheme="light"] .tool-description{color:var(--ink2)}
html[data-scheme="light"] .scrim{background:rgba(20,10,20,.32)}
html[data-scheme="light"] .kbd-done32{border-color:var(--sep)}
/* карточки и плитки получают лёгкую тень вместо свечения */
html[data-scheme="light"] :is(.tl,.row,.fld,.it,.cell,.sc,.chip,.btn.sec,.hbtn,.theme,.link-many,.strip-reset){box-shadow:0 0 0 1px var(--sep)}

/* ══ 2. Навбар — одинаковый на всех страницах ════════════════════════════
   Свои переменные, чтобы не зависеть от палитры страницы: главная (меню)
   и остальные разделы выглядят пиксель-в-пиксель одинаково. */
html{--nav-bg:rgba(27,14,23,.82);--nav-solid:#1b0e17;--nav-ink:#a3929d;--nav-ink-h:#fff5fa;--nav-ac:#ff5c97;--nav-lens:rgba(255,228,241,.10);--nav-line:rgba(255,222,238,.10)}
html[data-theme="graphite"]{--nav-bg:rgba(22,24,29,.82);--nav-solid:#16181d;--nav-ink:#8f96a1;--nav-ink-h:#f2f4f8;--nav-ac:#8cb4ff;--nav-lens:rgba(225,234,255,.10);--nav-line:rgba(220,230,255,.10)}
html[data-scheme="light"]{--nav-bg:rgba(255,255,255,.86);--nav-solid:#ffffff;--nav-ink:#7d6a76;--nav-ink-h:#1f0f18;--nav-ac:#d6286a;--nav-lens:rgba(214,40,106,.10);--nav-line:rgba(70,10,40,.10)}
html[data-scheme="light"][data-theme="graphite"]{--nav-ink:#5f6977;--nav-ink-h:#10151d;--nav-ac:#2f6fe4;--nav-lens:rgba(47,111,228,.10);--nav-line:rgba(15,30,60,.10)}

html body #tabs.tabs{
  position:fixed!important;z-index:20!important;left:50%!important;right:auto!important;top:auto!important;
  bottom:calc(var(--sh-bot,env(safe-area-inset-bottom,0px)) + 8px)!important;
  width:min(calc(100vw - 24px),440px)!important;height:62px!important;margin:0!important;padding:5px!important;
  display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:0!important;
  border:0!important;border-radius:31px!important;background:var(--nav-bg)!important;
  box-shadow:inset 0 0 0 1px var(--nav-line),0 10px 30px rgba(0,0,0,.28)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.5)!important;backdrop-filter:blur(22px) saturate(1.5)!important;
  transform:translateX(-50%)!important;opacity:1;transition:transform .28s cubic-bezier(.23,1,.32,1),opacity .2s!important;
  contain:layout paint;
}
html[data-scheme="light"] body #tabs.tabs{box-shadow:inset 0 0 0 1px var(--nav-line),0 8px 26px rgba(40,20,40,.14)!important}
html.perf-low body #tabs.tabs{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--nav-solid)!important}
html body #tabs .tab{
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;
  min-width:0!important;min-height:0!important;height:52px!important;margin:0!important;padding:0!important;border:0!important;
  border-radius:26px!important;background:transparent!important;color:var(--nav-ink)!important;
  font:500 10px/12px -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Roboto,"Segoe UI",system-ui,sans-serif!important;
  letter-spacing:0!important;text-decoration:none!important;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:color .15s,background-color .15s,transform .16s cubic-bezier(.23,1,.32,1)!important;
}
html body #tabs .tab span{font-size:10px!important;line-height:12px!important;letter-spacing:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
html body #tabs .tab svg{display:block;width:24px!important;height:24px!important;flex:none;fill:none;stroke:none}
html body #tabs .tab:active{transform:scale(.94)}
html body #tabs .tab[aria-current="page"]{color:var(--nav-ac)!important;background:var(--nav-lens)!important}
@media (hover:hover) and (pointer:fine){
  html body #tabs .tab:hover{color:var(--nav-ink-h)!important}
  html body #tabs .tab[aria-current="page"]:hover{color:var(--nav-ac)!important}
}
/* клавиатура и служебные экраны прячут панель — правила страниц сохранены */
html.kb body #tabs.tabs,html.np-kb body #tabs.tabs{transform:translate(-50%,140%)!important;opacity:0;pointer-events:none}
html.np-status body #tabs.tabs,html.np-choose body #tabs.tabs{display:none!important}

/* ══ 3. Под открытой модалкой страница не листается ══════════════════════ */
html.sh-lock,html.sh-lock body{overflow:hidden!important;overscroll-behavior:none}
html.sh-lock .app-scroll{overflow:hidden!important}

/* ══ 4. Переход между разделами — свой, одинаковый во всех клиентах.
   Плашка активной вкладки переезжает на новую (240 мс), содержимое гаснет
   за 140 мс, новая страница проявляется за 200 мс. Без View Transitions:
   в них размытие навбара снималось прямоугольником («квадрат»), а в
   Telegram Desktop и старых iOS они не работают вовсе. ═════════════════ */
html body #tabs.tabs::before{content:"";position:absolute;z-index:0;top:5px;bottom:5px;left:5px;
  width:calc((100% - 10px) / 5);border-radius:26px;background:var(--nav-lens);pointer-events:none;
  transform:translateX(0);transition:transform .24s cubic-bezier(.23,1,.32,1),opacity .2s}
html body #tabs.tabs:not(:has(.tab[aria-current="page"]))::before{opacity:0}
html body #tabs.tabs:has(.tab:nth-child(2)[aria-current="page"])::before{transform:translateX(100%)}
html body #tabs.tabs:has(.tab:nth-child(3)[aria-current="page"])::before{transform:translateX(200%)}
html body #tabs.tabs:has(.tab:nth-child(4)[aria-current="page"])::before{transform:translateX(300%)}
html body #tabs.tabs:has(.tab:nth-child(5)[aria-current="page"])::before{transform:translateX(400%)}
html body #tabs .tab{position:relative;z-index:1}
html body #tabs .tab[aria-current="page"]{background:transparent!important}
/* старые клиенты без :has — подсветка на самой вкладке, как раньше */
@supports not selector(:has(a)){
  html body #tabs.tabs::before{display:none}
  html body #tabs .tab[aria-current="page"]{background:var(--nav-lens)!important}
}
html.sh-leaving body > :not(#tabs):not(script):not(style){opacity:0!important;transition:opacity .14s ease-out!important}
html.sh-leaving body{cursor:progress}
@keyframes shEnter{from{opacity:0}}
html.sh-enter body > :not(#tabs):not(script):not(style){animation:shEnter .2s ease-out both}
@media (prefers-reduced-motion:reduce){
  html body #tabs.tabs,html body #tabs .tab,html body #tabs.tabs::before{transition:none!important}
  html.sh-enter body > *{animation:none!important}
}

/* ══ 5. Кнопка темы для страниц без своей (главное меню) ═════════════════ */
.sh-theme{position:relative;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:var(--s1,rgba(255,255,255,.08));cursor:pointer;flex:none;transition:transform .16s cubic-bezier(.23,1,.32,1)}
.sh-theme:active{transform:scale(.92)}
.sh-theme i{position:absolute;top:50%;left:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;box-shadow:0 0 0 2px var(--s1,#1b0e17);transition:transform .3s cubic-bezier(.23,1,.32,1)}
.sh-theme i:first-child{background:#ff5c97;transform:translateX(-3.5px);z-index:2}
.sh-theme i:last-child{background:#8cb4ff;transform:translateX(3.5px);z-index:1}
html[data-theme="graphite"] .sh-theme i:first-child{z-index:1}
html[data-theme="graphite"] .sh-theme i:last-child{z-index:2}
.sh-toast{position:fixed;z-index:60;left:50%;bottom:calc(var(--sh-bot,env(safe-area-inset-bottom,0px)) + 82px);transform:translate(-50%,8px);padding:10px 16px;border-radius:16px;background:var(--nav-solid);color:var(--nav-ink-h);box-shadow:inset 0 0 0 1px var(--nav-line),0 8px 24px rgba(0,0,0,.25);font:500 14px/1.2 -apple-system,system-ui,sans-serif;opacity:0;pointer-events:none;transition:opacity .2s,transform .25s}
.sh-toast.on{opacity:1;transform:translate(-50%,0)}

/* ══ 6. Шторки на ПК: окно по центру, скруглённое со всех сторон, высота
   по содержимому (не до низа экрана) ══════════════════════════════════════ */
html.split body[data-studio] .sheet{
  top:50%!important;bottom:auto!important;left:50%!important;right:auto!important;
  width:min(600px,calc(100vw - 40px))!important;
  height:auto!important;min-height:min(360px,calc(var(--vh,100vh) - 48px))!important;max-height:min(760px,calc(var(--vh,100vh) - var(--top,0px) - 48px))!important;
  border-radius:24px!important;opacity:0!important;
  box-shadow:0 24px 64px rgba(0,0,0,.45),inset 0 0 0 1px var(--sep)!important;
  transform:translate(-50%,-48%) scale(.97)!important;
  transition:transform .24s cubic-bezier(.23,1,.32,1),opacity .18s ease,visibility 0s .24s!important;
}
html.split body[data-studio] .sheet.on{opacity:1!important;transform:translate(-50%,-50%)!important;transition:transform .26s cubic-bezier(.23,1,.32,1),opacity .2s ease,visibility 0s!important}
html.split body[data-studio] .sheet #grid,html.split body[data-studio] .sheet .grid{flex:1 1 auto;min-height:0}
@media (prefers-reduced-motion:reduce){html.split body[data-studio] .sheet,html.split body[data-studio] .sheet.on{transform:translate(-50%,-50%)!important;transition:opacity .2s ease,visibility 0s!important}}

/* ══ 7. Слабые устройства (perf-low / perf-min ставит shell.js) ══════════ */
html.perf-low #grid > :is(.it,.row,.gw-row,.sit){content-visibility:auto;contain-intrinsic-size:auto 96px}
html.perf-low .amb i{animation:none!important;transition:none!important}
html.perf-min .amb{display:none!important}
html.perf-min :is(.sheet,.dlg-c,.toast){box-shadow:none!important}
/* превью конструктора: размер и положение меняются без анимации раскладки */
html.perf-low :is(.pv,.mdl,.lay){transition-property:opacity,background-color!important}

/* ══ 8. Без системной обводки у полей ввода (Telegram Desktop рисовал синюю
   рамку). Фокус показывает сама плашка поля (:focus-within). ════════════ */
html:root body :is(input,textarea,select,[contenteditable]):is(:focus,:focus-visible){outline:none!important;outline-offset:0!important}

/* Поля ввода на телефоне — не мельче 16px: иначе iOS сам приближает
   страницу при фокусе и обратно не отдаляет (плюс maximum-scale=1 в viewport). */
@media (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]),
  textarea,select,[contenteditable="true"]{font-size:16px!important}
}