@charset "utf-8";
/* Облик A3 «Вся слаботочка.ру» (20.10.2026) — общая часть для портала и
   статики справочника/курсов: палитра, шапка, подвал, кнопка темы.
   Образец — «Вся_слаботочка_главная_A3» (утверждён Виктором 19.10.2026).
   Палитра: три синих --c1/--c2/--c3. Красный (--warn/--bad) и зелёный
   (--ok) — только для смысла («нужна проверка», «проверено»), не для
   украшения. Тема: по системе (prefers-color-scheme), а выбор человека
   (theme-toggle.js → <html data-theme>) перебивает её.
   Имена переменных те же, что в BASE_STYLE и в статике (--ink, --panel,
   --text, --signal…): слой перекрашивает их, а не вводит параллельный набор.
   Тёмный набор записан дважды (media + [data-theme]) — иначе CSS не умеет. */
:root{
  color-scheme:light dark;
  --ff-b:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ff-d:'Manrope','Onest',system-ui,sans-serif;
  --ff-m:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --ff:var(--ff-b);
  --hw:1080px;
  --radius:8px;--r:6px;--rs:3px;
  /* светлая */
  --ink:#f4f6f9;--panel:#ffffff;--panel-2:#eaf0f8;--plate:#ffffff;
  --line:#d9e1eb;--line2:#d9e1eb;--line-strong:#a7b5c7;
  --text:#0c1726;--text2:#34404f;--text-dim:#566275;
  --c1:#1a5fd0;--c2:#0c2d5e;--c3:#5f9cf5;--c1t:#164fb0;--c2t:#0c2d5e;--c3t:#2b64c4;
  --signal:#164fb0;--signal-ink:#ffffff;--focus:#1a5fd0;
  --field-line:#74839a; /* граница поля ввода ≥3:1 к белому, #f4f6f9 и #eaf0f8 (WCAG 1.4.11) */
  --warn:#b3261e;--bad:#b3261e;--ok:#0b7545;
  --hdr:#0c2d5e;--hdr-t:#ffffff;--hdr-line:#24477a;--hdr-hi:#8dbaff;--hdr-mute:#c3d3ea;
  --btn:#0c2d5e;--btn-t:#ffffff;
  --shadow:0 6px 18px rgba(12,45,94,.14);
  /* цвета 12 систем справочника — три синих по кругу, как в наброске */
  --aps:var(--c1);--soue:var(--c2);--aupt:var(--c3);--okhr:var(--c1);--skud:var(--c2);--video:var(--c3);
  --domof:var(--c1);--sks:var(--c2);--power:var(--c3);--cable:var(--c1);--okl:var(--c2);--pult:var(--c3);
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
  --ink:#0d131b;--panel:#141d29;--panel-2:#1a2536;--plate:#eef2f8;
  --line:#26344a;--line2:#26344a;--line-strong:#44587a;
  --text:#e9eff7;--text2:#c5d0de;--text-dim:#98a8bc;
  --c1:#5b9bff;--c2:#c9dcff;--c3:#4d8ff0;--c1t:#8dbaff;--c2t:#c9dcff;--c3t:#7fb0ff;
  --signal:#8dbaff;--signal-ink:#08111b;--focus:#8dbaff;--field-line:#6882ab;
  --warn:#ff8c82;--bad:#ff8c82;--ok:#5be0a5;
  --hdr:#08111b;--hdr-line:#22354b;
  --btn:#2563eb;--btn-t:#ffffff;
  --shadow:0 6px 18px rgba(0,0,0,.5);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ink:#0d131b;--panel:#141d29;--panel-2:#1a2536;--plate:#eef2f8;
  --line:#26344a;--line2:#26344a;--line-strong:#44587a;
  --text:#e9eff7;--text2:#c5d0de;--text-dim:#98a8bc;
  --c1:#5b9bff;--c2:#c9dcff;--c3:#4d8ff0;--c1t:#8dbaff;--c2t:#c9dcff;--c3t:#7fb0ff;
  --signal:#8dbaff;--signal-ink:#08111b;--focus:#8dbaff;--field-line:#6882ab;
  --warn:#ff8c82;--bad:#ff8c82;--ok:#5be0a5;
  --hdr:#08111b;--hdr-line:#22354b;
  --btn:#2563eb;--btn-t:#ffffff;
  --shadow:0 6px 18px rgba(0,0,0,.5);
}
:root[data-theme="light"]{color-scheme:light;}

html,body{background:var(--ink);}
body{background:var(--ink);padding-top:0;padding-bottom:0;overflow-x:hidden;color:var(--text);}
a{color:var(--signal);text-underline-offset:3px;}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px;}
/* на тёмных полосах (шапка, подвал) кольцо — светлое: --focus светлой темы там 2.3:1 */
.app-header :focus-visible,.site-footer :focus-visible,.skip-link:focus-visible{outline-color:var(--hdr-hi);}
/* ссылка «Перейти к содержимому»: видна только при фокусе (main.py вставляет её первой в body) */
.skip-link{position:absolute;left:8px;top:-80px;z-index:100;background:var(--hdr);color:var(--hdr-t);padding:12px 16px;border-radius:6px;font:600 14px/1 var(--ff-b);text-decoration:none;}
.skip-link:focus{top:8px;}
#main:focus{outline:none;}
body.home{--hw:1240px;}

/* ==== ШАПКА: тёмно-синяя полоса на всю ширину в обеих темах ====
   Геометрию (ширина, центровка, бургер) оставляем как в nav_css; полосу за
   пределами колонки рисует border-image с outset: он не влияет ни на раскладку,
   ни на скролл и не режет выпадающее меню (100vw на Windows включает полосу
   прокрутки, поэтому ширину через vw не задаём). */
.app-header{background:var(--hdr);color:var(--hdr-t);border:0;
  border-image:linear-gradient(var(--hdr),var(--hdr)) fill 0/0/0 100vmax;
  margin-bottom:32px;padding:10px 0;gap:14px 24px;}
.app-brand{display:block;flex:none;padding:0;border-radius:4px;}
.app-brand:hover{color:var(--hdr-hi);}
.app-brand .brand-logo{display:block;width:auto;height:46px;border-radius:0;filter:none;}
.app-nav{gap:2px;font:600 13.5px/1 var(--ff-m);text-transform:uppercase;letter-spacing:.06em;}
.app-nav a{color:var(--hdr-mute);border:0;border-bottom:3px solid transparent;border-radius:0;padding:0 14px;min-height:46px;display:flex;align-items:center;background:none;}
.app-nav a:hover{color:var(--hdr-hi);background:none;border-bottom-color:var(--hdr-hi);}
.app-nav a[aria-current="page"]{color:#fff;background:none;border-bottom-color:var(--hdr-hi);}
.app-nav .nav-soon{color:var(--hdr-mute);}
.app-nav .nav-soon small{color:var(--hdr-hi);}
.app-auth{border-left:1px solid var(--hdr-line);margin-left:10px;padding-left:16px;font:600 13.5px/1 var(--ff-b);text-transform:none;letter-spacing:0;}
.app-auth a{color:var(--hdr-t);border:1.5px solid var(--hdr-line);border-radius:var(--r);padding:0 16px;min-height:40px;display:inline-flex;align-items:center;}
.app-auth a:hover{color:var(--hdr-hi);border-color:var(--hdr-hi);border-bottom-color:var(--hdr-hi);}
.app-auth .app-auth-user{border:0;padding:0;min-height:0;font:600 13px/1 var(--ff-m);color:var(--hdr-mute);}
.app-auth .app-auth-user:hover{border:0;}
/* кнопка темы — в тон шапки */
.theme-tg{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-left:8px;padding:0;background:transparent;border:1.5px solid var(--hdr-line);border-radius:var(--r);color:var(--hdr-mute);cursor:pointer;box-shadow:none;}
.theme-tg:hover:not(:disabled){color:var(--hdr-hi);border-color:var(--hdr-hi);filter:none;transform:none;box-shadow:none;background:transparent;}
.theme-tg svg{width:18px;height:18px;display:block;}
/* средняя ширина: меню плотнее, чтобы вход не уезжал на вторую строку */
@media (min-width:761px) and (max-width:1180px){
  .app-header{gap:12px;}
  .app-nav{font-size:12.5px;letter-spacing:.03em;}
  .app-nav a{padding:0 9px;}
  .app-auth{margin-left:4px;padding-left:10px;}
  .app-auth a{padding:0 12px;}
}
@media (max-width:760px){
  .app-header{margin-bottom:22px;gap:8px 12px;padding:10px 96px 10px 0;}
  .app-brand .brand-logo{height:40px;}
  .theme-tg{margin-left:auto;width:44px;height:44px;}
  .nav-burger{top:50%;transform:translateY(-50%);right:0;background:transparent;border:1.5px solid var(--hdr-line);color:var(--hdr-t);border-radius:var(--r);min-height:44px;padding:0 14px;}
  .nav-burger[aria-expanded="true"]{color:var(--hdr-hi);border-color:var(--hdr-hi);}
  .app-nav{left:calc(50% - 50vw);right:calc(50% - 50vw);top:100%;background:var(--hdr);border:0;border-top:1px solid var(--hdr-line);border-radius:0;padding:8px calc(50vw - 50%) 14px;box-shadow:0 14px 24px rgba(0,0,0,.35);font-size:14px;}
  .app-nav a{color:var(--hdr-mute);border-bottom:0;padding:12px 4px;border-radius:0;border-top:1px solid var(--hdr-line);}
  .app-nav a:first-child{border-top:0;}
  .app-nav a:hover,.app-nav a[aria-current="page"]{color:var(--hdr-hi);}
  .app-auth{border:0;border-top:1px solid var(--hdr-line);margin:6px 0 0;padding:12px 0 0;justify-content:flex-start;}
  .app-header-static .app-nav{border:0;padding:0;box-shadow:none;background:none;left:auto;right:auto;}
  .app-header-static .app-nav a{border-top:0;border-bottom:3px solid transparent;padding:0 10px;min-height:44px;}
}

/* ==== ПОДВАЛ: та же полоса ==== */
.site-footer{display:flex;flex-wrap:wrap;gap:24px 40px;justify-content:space-between;align-items:flex-start;
  width:min(var(--hw),calc(100vw - 48px));max-width:none;box-sizing:border-box;margin:72px auto 0;
  padding:32px 0;background:var(--hdr);color:var(--hdr-mute);border:0;
  border-image:linear-gradient(var(--hdr),var(--hdr)) fill 0/0/0 100vmax;font-size:14.5px;}
.foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:0;max-width:40ch;}
.foot-logo{display:block;height:64px;width:auto;}
.foot-slogan{display:block;font:700 13px/1.3 var(--ff-m);letter-spacing:.14em;text-transform:uppercase;color:var(--hdr-hi);margin:10px 0 12px;}
.foot-brand span{color:var(--hdr-mute);}
.site-footer nav{display:flex;flex-wrap:wrap;gap:4px 22px;max-width:560px;}
.site-footer a{color:var(--hdr-t);margin:0;text-decoration:none;min-height:36px;display:inline-flex;align-items:center;font-size:15px;position:relative;}
.site-footer a:hover{color:var(--hdr-hi);text-decoration:underline;}
@media (max-width:640px){.site-footer{padding-block:26px;margin-top:48px;}.foot-logo{height:52px;}}

/* ==== общие мелочи ==== */
@media (prefers-reduced-motion:reduce){*{transition:none!important;}}

/* Виджет консультанта (shadow DOM, static/spravochnik/ask-widget.js): его
   переменные задаются на хосте и перебивают его собственный :host. */
#ask-widget{--bg:var(--panel-2);--card:var(--panel);--ink:var(--text);--dim:var(--text-dim);--line:var(--line2);
  --accent:var(--btn);--accent-2:var(--c1);--on-accent:var(--btn-t);--ring:var(--focus);}