/* chrome.css — шапка сайта, шторка «Меню» и cookie-плашка (вариант Б, 25.09).
   Общие для посадочных, главной и кабинета; логика — site-chrome.js.
   ПК (≥900px): логотип · разделы · «Мои практики». Уже — логотип · «Таймер» · «Меню». */

.site-header{
  position:relative;
  max-width:1120px;margin:0 auto;
  display:flex;align-items:center;gap:8px;
  padding:calc(8px + env(safe-area-inset-top,0px)) 16px 4px;
}
.sh-brand{display:inline-flex;flex:0 0 auto;margin-right:auto;border-radius:var(--radius-sm)}
.sh-brand img{display:block;height:28px;width:auto;max-width:100%;opacity:.92}
.sh-cta,.sh-menu,.sh-my{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  height:44px;padding:0 14px;border-radius:12px;
  font:inherit;font-size:15px;font-weight:500;text-decoration:none;cursor:pointer;
}
.sh-nav,.sh-my{display:none}
.sh-cta{color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-border)}
.sh-cta:hover{background:rgba(127,209,255,.24)}
.sh-menu{color:var(--fg);background:var(--bg-elev);border:1px solid var(--border);padding:0 12px}
.sh-menu:hover{background:var(--bg-elev-2)}
.sh-menu svg,.sh-my svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

@media (min-width:900px){
  .site-header{gap:18px;padding:calc(16px + env(safe-area-inset-top,0px)) 24px 12px}
  .sh-brand{margin-right:0}
  .sh-nav{display:flex;gap:4px;margin:0 auto}
  .sh-nav a{color:var(--muted);text-decoration:none;font-size:15px;font-weight:500;padding:8px 12px;border-radius:var(--radius-sm)}
  .sh-nav a:hover,.sh-nav a[aria-current]{color:var(--fg);background:var(--bg-elev)}
  .sh-my{display:inline-flex;color:var(--fg);background:var(--bg-elev);border:1px solid var(--border)}
  .sh-my:hover,.sh-my[aria-current]{border-color:var(--accent-border);background:var(--accent-soft)}
  .sh-my svg{stroke:var(--accent)}
  .sh-cta,.sh-menu{display:none}
}
@media (max-width:359px){
  .sh-cta,.sh-menu{padding:0 10px}
  .sh-brand img{height:24px}
}
/* В установленном приложении разделы на ПК не нужны — остаётся «Меню». */
html.is-app .sh-nav,html.is-app .sh-my{display:none}
html.is-app .sh-menu{display:inline-flex}
html.is-app .sh-cta{display:inline-flex}
/* Страницы приложения («Мои практики», история, награды, контакты): в PWA внизу
   4 вкладки, поэтому в шапке только логотип и еле заметный значок © (попап — nav.js). */
.sh-copy{display:none}
html.is-app .sh-app .sh-menu,html.is-app .sh-app .sh-cta{display:none}
html.is-app .sh-app .sh-copy{
  display:grid;place-items:center;width:44px;height:44px;min-height:0;padding:0;flex:0 0 auto;
  background:none;border:0;border-radius:12px;color:rgba(138,163,196,.45);font:inherit;font-size:17px;line-height:1;cursor:pointer}
html.is-app .sh-app .sh-copy:hover{color:var(--muted)}
html.is-app .mk{display:none !important}

/* ---------- шторка «Меню» ---------- */
.menu-sheet{position:fixed;inset:0;z-index:1100;background:rgba(3,8,16,.72);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.menu-sheet[hidden]{display:none}
html.menu-open,html.menu-open body{overflow:hidden}
.ms-panel{
  max-width:560px;margin:0 auto;
  display:flex;flex-direction:column;gap:18px;
  padding:calc(12px + env(safe-area-inset-top,0px)) 20px 22px;
  background:#0f1f33;border:1px solid var(--border);border-top:0;
  border-radius:0 0 22px 22px;box-shadow:0 20px 60px rgba(0,0,0,.5);
  animation:ms-in .22s ease-out;
}
@keyframes ms-in{from{transform:translateY(-16px);opacity:0}to{transform:none;opacity:1}}
.ms-top{display:flex;align-items:center;justify-content:space-between;height:44px}
.ms-top .sh-brand{margin:0}
.ms-close{width:44px;height:44px;border-radius:12px;border:1px solid var(--border);background:var(--bg-elev);color:var(--fg);
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.ms-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.ms-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ms-tiles a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:14px;
  background:rgba(127,209,255,.12);border:1px solid var(--accent-border);color:var(--fg);text-decoration:none;font-size:13px;text-align:center}
.ms-tiles a:hover{background:rgba(127,209,255,.2)}
.ms-tiles svg{width:22px;height:22px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ms-groups{display:flex;flex-direction:column;gap:16px}
.ms-group{display:flex;flex-direction:column;gap:10px}
.ms-label{display:flex;align-items:center;gap:8px;margin:0;font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.ms-label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dot)}
.ms-practice{--dot:var(--accent)}
.ms-rest{--dot:var(--hold)}
.ms-know{--dot:var(--exhale)}
.ms-chips{display:flex;flex-wrap:wrap;gap:8px}
.ms-chips a{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  color:var(--fg);text-decoration:none;font-size:15px;line-height:1.2}
.ms-chips a:hover{border-color:var(--dot);color:var(--dot)}
.ms-install{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1px dashed rgba(255,255,255,.18);
  background:none;color:var(--muted);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.ms-install[hidden]{display:none}
.ms-install svg{flex:0 0 auto;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ms-install:hover{color:var(--fg)}
@media (prefers-reduced-motion:reduce){.ms-panel{animation:none}}

/* ---------- футер сайта (siteFooter в parts.mjs) ---------- */
.site-footer{max-width:1120px;margin:56px auto 0;padding:26px 20px calc(28px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border-soft)}
/* Блок разделов (hubNav в site-src/templates/parts.mjs) — посадочные, главная, «Мои практики». */
.hub-nav{border-radius:var(--radius-lg);padding:20px;border:1px solid var(--border);
  background:radial-gradient(600px 260px at 0% 0%,rgba(127,209,255,.10),transparent 70%),
    radial-gradient(500px 260px at 100% 100%,rgba(200,168,255,.07),transparent 70%),var(--bg-elev)}
.hn-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
@media (min-width:720px){.hn-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 16px}}
.hn-label{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:0 4px;font-size:12px;line-height:1.4;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600}
.hn-label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dot);box-shadow:0 0 8px var(--dot)}
.hub-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.hub-nav li{margin:0}
.hub-nav a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:42px;padding:9px 12px;border-radius:var(--radius-sm);
  font-size:15px;line-height:1.3;color:var(--fg);text-decoration:none;background:rgba(255,255,255,.03);border:1px solid transparent;
  transition:background .2s,border-color .2s,color .2s}
.hub-nav a::after{content:"→";color:var(--muted);transition:transform .2s,color .2s}
.hub-nav a:hover,.hub-nav a:focus-visible{background:var(--dot-soft);border-color:var(--dot-border);color:var(--dot)}
.hub-nav a:hover::after,.hub-nav a:focus-visible::after{color:var(--dot);transform:translateX(3px)}
.hn-practice{--dot:var(--accent);--dot-soft:rgba(127,209,255,.14);--dot-border:rgba(127,209,255,.3)}
.hn-rest{--dot:var(--hold);--dot-soft:rgba(200,168,255,.13);--dot-border:rgba(200,168,255,.3)}
.hn-know{--dot:var(--exhale);--dot-soft:rgba(158,233,197,.12);--dot-border:rgba(158,233,197,.3)}
@media (max-width:520px){.hub-nav{padding:14px}}
@media (prefers-reduced-motion:reduce){.hub-nav a,.hub-nav a::after{transition:none}}
.sf-legal{margin:18px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted);opacity:.75}
.sf-legal a{color:inherit}

/* ---------- cookie-плашка: под шапкой, поверх содержимого ---------- */
.cookie-bar{
  position:absolute;top:100%;left:12px;right:12px;z-index:90;
  max-width:560px;margin:0 auto;box-sizing:border-box;
  display:flex;align-items:center;gap:10px;
  padding:8px 8px 8px 14px;border-radius:14px;
  background:rgba(15,31,51,.97);border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 30px rgba(0,0,0,.4);
  font-size:13px;line-height:1.4;color:#c9d7ea;
}
.cookie-bar span{flex:1 1 auto}
.cookie-bar a{color:var(--accent)}
.cookie-bar button{flex:0 0 auto;height:40px;padding:0 14px;border-radius:10px;border:0;
  background:rgba(127,209,255,.2);color:var(--fg);font:inherit;font-size:14px;cursor:pointer}
.cookie-bar--top{position:fixed;top:calc(8px + env(safe-area-inset-top,0px))}
@media print{.menu-sheet,.cookie-bar,.sh-menu,.sh-my{display:none !important}}