/* Меню «Платформа» в шапке Методики (ТЗ docs/platform/ki-ri/tasks/2026-10-09-platform-ia.md, задача C;
   макет diag/design/previews/platform-ia-menu.html). Раскладка шапки не меняется: меню — обычный потомок .nav-auth
   (правило «логотип → .nav-global → .nav-auth» из _nav.html соблюдено). Панель позиционируется от контейнера шапки
   (.header-inner/.topbar-inner — position:relative) и встаёт по правому краю сетки; на телефоне (≤720) — шторка
   во всю ширину под шапкой, колонки друг под другом. Цвета разделов — color из nav.json v2. */
.site-header .header-inner,.topbar .topbar-inner{position:relative}
.pf-menu{position:static;margin-right:4px;--pf-g:#0b6e4f;--pf-gl:#eef4f0;--pf-ink:#18231f;--pf-mut:#5b6b64;--pf-line:#dbe5df}
.pf-menu summary{list-style:none;cursor:pointer}
.pf-menu summary::-webkit-details-marker{display:none}
.pf-menu-btn{display:inline-flex;align-items:center;gap:8px;font:600 14px/18px 'Onest',system-ui,sans-serif;color:var(--pf-ink);border:1px solid var(--pf-line);border-radius:10px;padding:8px 12px;background:#fff;white-space:nowrap}
.pf-menu-btn:hover{border-color:#c5d8cd}
.pf-menu[open] .pf-menu-btn{background:var(--pf-gl);border-color:#c5d8cd}
.pf-menu-btn:focus-visible{outline:2px solid #2f6feb;outline-offset:2px}
.pf-menu-chev{transition:transform .15s}
.pf-menu[open] .pf-menu-chev{transform:rotate(180deg)}
/* значок — сетка 2×2 из цветных точек: платформа, Методика, Работа, Психолог */
.pf-menu-ico{display:grid;grid-template-columns:repeat(2,5px);gap:2px;flex:none}
.pf-menu-ico i{display:block;width:5px;height:5px;border-radius:1.5px;background:var(--pf-g)}
.pf-menu-ico i:nth-child(2){background:#2f6feb}
.pf-menu-ico i:nth-child(3){background:#4f46e5}
.pf-menu-ico i:nth-child(4){background:#0e7490}
.pf-menu-panel{position:absolute;right:24px;top:calc(100% + 6px);width:760px;max-width:calc(100% - 48px);box-sizing:border-box;background:#fff;border:1px solid var(--pf-line);border-radius:18px;box-shadow:0 18px 50px rgba(24,35,31,.16);padding:18px;z-index:50;font:15px/1.5 'Onest',system-ui,sans-serif;color:var(--pf-ink);text-align:left}
.pf-menu-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:2px 6px 12px}
.pf-menu-top b{font-size:15px;font-weight:700}
.pf-menu-top span{color:var(--pf-mut);font-size:13px}
.pf-cols{display:grid;grid-template-columns:1fr 1.25fr 1fr 1fr;gap:12px;align-items:stretch}
.pf-col{border:1px solid var(--pf-line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:6px;min-width:0;--c:#2f6feb;--tint:#f2f6fe}
.pf-col-work{--c:#4f46e5;--tint:#f3f2fe}
.pf-col-psy{--c:#0e7490;--tint:#eef7f9}
.pf-col-tools{--c:#566476;--tint:#f2f5f8}
.pf-col-cur{background:var(--tint);border-color:var(--c)}
.pf-col-title{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;color:var(--pf-ink);text-decoration:none}
.pf-col-title::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--c);flex:none}
.pf-col-title:hover{color:var(--c);text-decoration:none}
.pf-col-tag{color:var(--pf-mut);font-size:12.5px;line-height:1.35;margin-bottom:4px}
.pf-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.pf-items li{margin:0;padding:0}
.pf-i{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;font-weight:600;font-size:14px;color:var(--pf-ink);text-decoration:none}
a.pf-i:hover,a.pf-i:focus-visible{background:#f2f6f4;color:var(--c);text-decoration:none}
.pf-col-cur a.pf-i:hover,.pf-col-cur a.pf-i:focus-visible{background:#fff}
.pf-i-soon{color:#8a9892;font-weight:500;cursor:default}
.pf-chip{font-size:11px;font-weight:700;border-radius:10px;padding:1px 8px;background:#eef2f0;color:var(--pf-mut)}
.pf-menu-panel a:focus-visible{outline:2px solid var(--c,#2f6feb);outline-offset:1px}
.pf-menu-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-top:12px;padding:12px 6px 2px;border-top:1px solid var(--pf-line);font-size:13.5px;color:var(--pf-mut)}
.pf-home{font-weight:600;color:var(--pf-ink);text-decoration:none}
.pf-acct{display:inline-flex;align-items:center;gap:8px;color:var(--pf-mut);text-decoration:none}
.pf-home:hover,.pf-acct:hover{color:var(--pf-ink);text-decoration:underline}
.pf-av{width:24px;height:24px;border-radius:50%;background:var(--pf-gl);color:var(--pf-g);display:grid;place-items:center;font-size:11px;font-weight:800}
/* телефон: шторка во всю ширину под шапкой, колонки друг под другом, прокрутка внутри шторки */
@media (max-width:720px){
  .pf-menu-panel{left:0;right:0;top:100%;width:auto;max-width:none;border-radius:0;border-width:1px 0;box-shadow:0 18px 30px rgba(24,35,31,.12);background:var(--bg,#f6f9f7);padding:12px 16px 16px;max-height:calc(100vh - 100px);max-height:calc(100dvh - 100px);overflow-y:auto;overscroll-behavior:contain}
  .pf-menu-top{display:none}
  .pf-cols{grid-template-columns:1fr;gap:10px}
  .pf-col{background:#fff}
  .pf-col-cur{background:var(--tint)}
  .pf-menu-foot{margin-top:10px}
}

/* Единая шапка экосистемы: лого того же размера, что .pf-logo платформы (значок 26 px, текст 18 px/800), меню 15 px */
.kiri-logo{display:block;height:32px;width:auto}  /* вордмарк ki-ri: буквы ink, точки цвета Методики — в самом SVG */
.kiri-lg{display:block;flex:none;border-radius:4px}
.kiri-sep{flex:none;width:1px;height:21px;background:#dbe5df}
.kiri-svc{font:600 14.5px/1 'Onest',system-ui,sans-serif;color:#2f6feb;color:color-mix(in oklab,#2f6feb 80%,var(--ink));white-space:nowrap;cursor:default}  /* слово сервиса: не ссылка, без подчёркивания и hover-цвета; на обоях темнее на 20% к --ink — контраст ≥ 4.5 (ТЗ landing-polish, п. 6; как .eyebrow в landing-unify) */
.brand,.logo{display:inline-flex;align-items:center;gap:11px;white-space:nowrap}

/* ───── Единая сетка шапки платформы (решение владельца 2026-10-08): те же размеры, шрифт и отступы, что у platform-ui.
   Перекрывает три копии шапки в app.css/style.css, landing.css и methodology.css; цвета Методики (синий) не меняются, кроме слова «методика» (.kiri-svc): оно темнее ради контраста ≥ 4.5 на обоях (решение владельца 2026-10-23). ───── */
@font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;src:url(/static/fonts/Onest-cyrillic-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;src:url(/static/fonts/Onest-latin-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
.site-header,.topbar{position:sticky;top:0;z-index:100;background:#fff;background:var(--mat-regular);border-bottom:0;padding-bottom:1px;box-shadow:inset 0 -1px 0 rgba(24,35,31,.09);-webkit-backdrop-filter:none;backdrop-filter:none}  /* шапка в языке J (ТЗ landing-unify): липкая, одна линия снизу (inset-тень, 64+1 как у .pf-header), стекло — только ниже, в @supports */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header,.topbar{-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)}
}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){.site-header,.topbar{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}}
html{scroll-padding-top:64px}  /* якоря (#report, #how) не прячут заголовок под липкой шапкой */
.site-header .header-inner,.topbar .topbar-inner{width:100%;max-width:1200px;margin:0 auto;padding:0 24px;min-height:64px;display:flex;align-items:center;flex-wrap:nowrap;gap:24px}
.site-header .logo,.topbar .brand{flex:none;width:168px;display:flex;align-items:center}
.site-header .nav-global,.topbar .nav-global{display:flex;align-items:center;flex-wrap:nowrap;gap:4px;font-family:'Onest',system-ui,sans-serif}
.site-header .nav-global a,.topbar .nav-global a{font:500 15px/1.5 'Onest',system-ui,sans-serif;color:var(--ink-2);text-decoration:none;white-space:nowrap;padding:6px 12px;border-radius:999px}  /* меню — капсулы, как .pf-nav a платформы */
.site-header .nav-global a:hover,.topbar .nav-global a:hover{color:#18231f;text-decoration:none;background:rgba(255,255,255,.6)}
.site-header .nav-global a.active,.topbar .nav-global a.active{color:#18231f;font-weight:600;text-decoration:none;background:#fff;background:var(--mat-thick);box-shadow:inset 0 1px 0 var(--edge),0 2px 8px -6px rgba(24,35,31,.4)}  /* текущий пункт — капсула толстого материала, без подчёркивания */
.site-header .nav-auth,.topbar .nav-auth{margin-left:auto;flex:none}
.site-header .nav-auth-link,.topbar .nav-auth-link,.site-header .nav-auth .btn,.topbar .nav-auth .btn,.pf-menu-btn,.account-trigger{font-family:'Onest',system-ui,sans-serif}
@media (max-width:900px){
  .site-header .header-inner,.topbar .topbar-inner{padding-top:8px;padding-bottom:8px;flex-wrap:wrap;gap:6px 16px}
  .site-header .logo,.topbar .brand{width:auto;flex:1}
  .site-header .nav-global,.topbar .nav-global{order:3;flex:0 0 100%;overflow-x:auto;gap:4px;padding-bottom:4px;-webkit-overflow-scrolling:touch}
}
/* Правая часть шапки — капсулы языка J (как .pf-cap.sm / .pf-pbtn платформы): «Войти» — ghost, «Регистрация» и «+ Новая диагностика» — синие,
   «В кабинет →» и «Платформа» — материал; адреса, метки воронки и классы разметки прежние */
.site-header .nav-auth-link,.topbar .nav-auth-link{display:inline-flex;align-items:center;font-weight:600;font-size:14px;line-height:20px;color:#18231f;padding:7px 14px;border-radius:999px;background:#fff;background:var(--mat-thick);box-shadow:inset 0 1px 0 var(--edge),inset 0 0 0 1px var(--hair);text-decoration:none}
.site-header .nav-auth-link:hover,.topbar .nav-auth-link:hover{color:#18231f;filter:brightness(1.03);text-decoration:none}
.site-header .nav-auth .btn,.topbar .nav-auth .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:14px;line-height:20px;border:0;border-radius:999px;padding:7px 14px;min-height:0;box-shadow:none;text-decoration:none;white-space:nowrap}
.site-header .nav-auth .btn:focus-visible,.topbar .nav-auth .btn:focus-visible{outline:2px solid #2f6feb;outline-offset:2px;box-shadow:none}  /* перебивает box-shadow:none выше (0,3,0): кольцо фокуса видно у «Регистрация», «В кабинет →», «+ Новая диагностика» (ТЗ landing-polish, п. 2) */
.site-header .nav-auth .btn-pill,.topbar .nav-auth .btn-pill,.site-header .nav-auth .nav-new-measure,.topbar .nav-auth .nav-new-measure{color:#fff;background:#2f6feb}
.site-header .nav-auth .btn-pill:hover,.topbar .nav-auth .btn-pill:hover,.site-header .nav-auth .nav-new-measure:hover,.topbar .nav-auth .nav-new-measure:hover{color:#fff;background:#2f6feb;filter:brightness(1.07)}
.site-header .nav-auth .btn-back-to-app,.topbar .nav-auth .btn-back-to-app{color:#18231f;background:#fff;background:var(--mat-thick);box-shadow:inset 0 1px 0 var(--edge),inset 0 0 0 1px var(--hair)}
.site-header .nav-auth .btn-back-to-app:hover,.topbar .nav-auth .btn-back-to-app:hover{color:#18231f;filter:brightness(1.03)}
.pf-menu-btn{border:0;border-radius:999px;padding:7px 14px;background:#fff;background:var(--mat-thick);box-shadow:inset 0 1px 0 var(--edge),inset 0 0 0 1px var(--hair)}
.pf-menu-btn:hover{box-shadow:inset 0 1px 0 var(--edge),inset 0 0 0 1px var(--pf-mut)}
.pf-menu[open] .pf-menu-btn{background:var(--pf-gl);box-shadow:inset 0 0 0 1px #2f6feb}
.account-trigger{background:#fff;background:var(--mat-thick);box-shadow:inset 0 1px 0 var(--edge),inset 0 0 0 1px var(--hair)}
.account-trigger:hover{background:#fff;filter:brightness(1.03)}
.nav-new-measure:active,.btn-pill:active{transform:scale(.96)}
@media (prefers-reduced-motion:reduce){.nav-new-measure:active,.btn-pill:active{transform:none}}

/* Поля контента = поля шапки: 24 px, на узких экранах 16 (в app.css/landing.css было 12/16/24 по другим порогам) */
.container,.context-bar-inner{padding-left:24px;padding-right:24px}
@media (max-width:720px){.container,.context-bar-inner,.site-header .header-inner,.topbar .topbar-inner{padding-left:16px;padding-right:16px}}

/* ───── Единая сетка СТРАНИЦ платформы (docs/conventions.md, «Единая сетка страниц платформы»; страж — tools/layout_audit.py
   и tests/test_platform_grid.py). Этот файл подключается из _nav.html после CSS страницы и перекрывает app.css/style.css,
   landing.css и methodology.css одним местом. Цвет Методики (синий) не меняется; фон — общий токен платформы --bg. ───── */
:root{--bg:#f6f9f7;--color-bg:#f6f9f7}  /* был свой серо-голубой #eef0f3/#f0f0f3; синий #2f6feb на #f6f9f7 — контраст 4.3:1 против 3.9:1 на старом */
body{background:#f6f9f7}
/* первый блок контента: 40 px под шапкой на обычных страницах, 56 (≤720 — 40) на лендингах */
main.container{padding-top:40px}
main.container>:first-child,main.container>:first-child h1:first-child{margin-top:0}
.catalog-intro{padding-top:40px}
.hero{padding-top:56px;min-height:0}
.hero .hero-grid{align-items:start}
.hero-content>:first-child{margin-top:0}
.hero-content>span:first-child{display:flex;width:fit-content}  /* плашка-надзаголовок: inline-flex в строке давал +2…5 px сверху */
@media (max-width:720px){.hero{padding-top:40px}}
/* узкие колонки — по левому краю сетки (не по центру): контейнер на всю сетку, ограничена ширина содержимого */
.container.narrow,.container.medium{max-width:1200px}
.container.narrow>*{max-width:640px}
.container.medium>*{max-width:920px}
/* подвал: текст с того же x, что логотип; поля 24/24, по левому краю */
.foot{justify-content:flex-start;text-align:left;padding:24px max(24px,calc((100% - 1200px) / 2 + 24px));border-top:1px solid #dbe5df;margin-top:60px}
.site-footer{padding-top:24px;padding-bottom:24px}
.site-footer .footer-inner{justify-content:flex-start;text-align:left}
@media (max-width:720px){.foot{padding-left:16px;padding-right:16px}}
/* подвал Методики — две строки (ТЗ landing-unify, сц. 16): строка платформы (из nav.json, без Методики) и прежние ссылки Методики */
.pf-foot-platform{flex:0 0 100%;font-size:13px;color:#5b6b64}
.pf-foot-platform a{text-decoration:underline;color:inherit}
.pf-foot-platform a:hover{color:#18231f}
/* перенесённая шапка (≤900): те же размеры, что у .pf-header — поля 12/8, первая строка 36 px, меню с полем 6 px;
   логотип не сжимается, кнопки справа в одну строку */
@media (max-width:900px){
  .site-header .header-inner,.topbar .topbar-inner{padding-top:12px;padding-bottom:8px}
  .site-header .logo,.topbar .brand{flex:1 0 auto;min-height:36px}
  .site-header .nav-global,.topbar .nav-global{padding-bottom:6px}
  .site-header .nav-auth,.topbar .nav-auth{flex-wrap:nowrap;gap:8px}
  .site-header .nav-auth .btn,.topbar .nav-auth .btn{padding-top:6px;padding-bottom:6px;min-height:0}
  .pf-menu-btn{padding:6px 12px}
}
/* телефон: в первой строке — логотип и одна-две компактные кнопки, как у остальных сервисов («Войти»).
   «Платформа» сворачивается в значок (сетка точек + шеврон); «Регистрация» — со страницы входа; в кабинете — аватар без имени,
   «+ Новая диагностика» — кнопкой на дашборде; на витрине у вошедшего меню платформы уступает место «В кабинет». */
@media (max-width:520px){
  .pf-menu-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .pf-menu-btn{gap:4px;padding:6px 9px}
  .nav-auth .btn-pill,.account-name,.account-chevron{display:none}
  .site-header .nav-auth .btn-pill,.topbar .nav-auth .btn-pill{display:none}  /* перебивает display:inline-flex капсул шапки выше */
  .nav-auth:has(.btn-back-to-app) .pf-menu{display:none}
}
/* телефон ≤720: первая строка — вордмарк и правые кнопки; «+ Новая диагностика» → «+» (aria-label даёт имя), имя аккаунта скрыто; меню — второй строкой (≤900) */
@media (max-width:720px){
  .nav-new-txt,.account-name,.account-chevron{display:none}
  .nav-auth .nav-new-measure{padding:7px 12px}
}

/* ───── Шрифт и заголовки — как у платформы (решение владельца 2026-10-09: «разный шрифт, синий в заголовке у Методики»).
   Onest для текста и заголовков вместо Inter/Manrope; H1 — Onest 800 одним цветом, без цветных вставок.
   Цвет сервиса (синий) остаётся в логотипе, ссылках, кнопках и метках. Моноширинные метки не трогаем. ───── */
:root{--font-main:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--font-body:var(--font-main);--font-display:var(--font-main)}
body{font-family:var(--font-main)}
:root h1{font-family:var(--font-main);font-weight:800;letter-spacing:-.03em}
:root h1 em,:root h1 .hero-title-line--highlight{color:inherit;background-image:none;font-style:normal}
@media (max-width:900px){.kiri-logo{height:28px}.brand,.logo{gap:9px}}
@media (max-width:480px){.kiri-logo{height:25px}.kiri-svc{font-size:13px}}