/* chtozaoshibka.ru — «Сервисная книжка». Одна таблица стилей на весь сайт.
   Холст: https://claude.ai/artifact/2Jg6Py6US8FyrzDnQTqQbo (16.09.2026).
   Гарнитуры: IBM Plex Sans (текст), IBM Plex Mono (коды, служебные подписи);
   файлы лежат у нас в /assets/fonts/ — без внешних запросов.
   Кегль ступенями по ширине экрана: телефон и планшет 16 px, ноутбук 13" и
   iPad Pro 17, ноутбук 15–16" 19, монитор 21. Все ширины в rem, поэтому
   колонки растут вместе с кеглем и полей по бокам не прибавляется. */

@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-400i.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-600.woff2) format("woff2")}

:root{
  /* Светлая: холодная бумага, не бежевая. Тёмная: графит, не чёрный. */
  --paper:#eef1f4;--card:#fbfcfd;--ink:#14171b;--ink2:#3d434b;--muted:#6b7380;--rule:#d9dee4;--rule2:#c3cad2;
  --scrim:rgba(10,14,20,.45);
  --sec-l:.52;--sec-c:.13;--tint-l:.95;--tint-c:.03;
  --sans:"IBM Plex Sans",ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --h:250;--sec:oklch(var(--sec-l) var(--sec-c) var(--h));--sec-tint:oklch(var(--tint-l) var(--tint-c) var(--h));
  --side:16.5rem;--toc:14rem;--measure:46rem;--gut:1rem;
  color-scheme:light;
}
[data-theme="dark"]{
  --paper:#15181c;--card:#1d2126;--ink:#e6e9ed;--ink2:#b9c0c8;--muted:#8a929c;--rule:#2b3138;--rule2:#3a4250;
  --scrim:rgba(0,0,0,.6);--sec-l:.74;--sec-c:.12;--tint-l:.28;--tint-c:.04;color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#15181c;--card:#1d2126;--ink:#e6e9ed;--ink2:#b9c0c8;--muted:#8a929c;--rule:#2b3138;--rule2:#3a4250;
    --scrim:rgba(0,0,0,.6);--sec-l:.74;--sec-c:.12;--tint-l:.28;--tint-c:.04;color-scheme:dark;
  }
}
/* Оттенок раздела: одна светлота и насыщенность, разный тон. */
[data-sec="stiralnye-mashiny"]{--h:250}
[data-sec="posudomoyki"]{--h:215}
[data-sec="kotly"]{--h:45}
[data-sec="holodilniki"]{--h:190}
[data-sec="kofemashiny"]{--h:70}
[data-sec="sushilnye-mashiny"]{--h:300}
[data-sec="vodonagrevateli"]{--h:20}
[data-sec="varochnye-paneli"]{--h:340}
[data-sec="kondicionery"]{--h:150}
/* --sec пересчитывается на элементе с data-sec: унаследованное значение
   с :root тон не поменяло бы (переменная наследуется уже вычисленной). */
[data-sec]{--sec:oklch(var(--sec-l) var(--sec-c) var(--h));--sec-tint:oklch(var(--tint-l) var(--tint-c) var(--h))}

/* Кегль ступенями. */
html{font-size:16px}
@media (min-width:64em){html{font-size:17px}}     /* iPad Pro, ноутбук 13" */
@media (min-width:88em){html{font-size:19px}}     /* ноутбук 15–16" */
@media (min-width:110em){html{font-size:21px}:root{--measure:50rem}}    /* монитор 27" */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--sec)}
p a,li p a,.foot a{text-decoration:underline;text-decoration-color:var(--rule2);text-underline-offset:.15em}
h1{font-size:2rem;line-height:1.15;font-weight:600;letter-spacing:-.015em;margin:.4rem 0 .8rem;text-wrap:balance}
h2{font-size:1.3rem;line-height:1.25;font-weight:600;letter-spacing:-.01em;margin:2.2rem 0 .6rem;scroll-margin-top:4.2rem}
h3{font-size:1.05rem;font-weight:600;margin:1.4rem 0 .3rem}
p{margin:0 .0rem .9rem}
ul,ol{margin:0 0 .9rem;padding-left:1.3rem}
strong,b{font-weight:600}
.mono{font-family:var(--mono)}
.small{font-size:.875rem;color:var(--muted)}
.lead{font-size:1.18rem;line-height:1.5}
.lead strong{font-weight:600}

/* Код в рамке. */
.code{font-family:var(--mono);font-weight:600;font-size:.92em;letter-spacing:.02em;padding:.1em .42em;border:1.5px solid var(--ink);border-radius:.3em;line-height:1.3;white-space:nowrap;background:var(--card);color:var(--ink)}
.code.sec{border-color:var(--sec);color:var(--sec)}
.code.long{white-space:normal;display:inline-block;line-height:1.35;font-size:.9em;font-weight:500;font-family:var(--sans);letter-spacing:0}
a.code:hover,.card:hover .code.sec{background:var(--sec);color:var(--card);border-color:var(--sec)}
h1 .code{font-size:.78em;vertical-align:middle;position:relative;top:-.1em;margin-right:.15em}
.chip{display:inline-flex;align-items:center;gap:.5em;font-size:.85rem;font-weight:500;color:var(--sec);margin:0 0 .2rem}
.chip i{width:.55em;height:.55em;border-radius:50%;background:var(--sec);display:inline-block}
.tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border:1px solid var(--rule2);border-radius:.25rem;padding:.05em .45em;white-space:nowrap}
.tag.m{color:var(--sec);border-color:var(--sec)}

/* ── Каркас: шапка на телефоне, панель слева, текст, оглавление справа ── */
.top{display:flex;align-items:center;gap:.7rem;height:3.5rem;padding:0 var(--gut);border-bottom:1px solid var(--rule);background:var(--paper);position:sticky;top:0;z-index:20}
.brand{font-weight:600;letter-spacing:-.01em;font-size:1.05rem;line-height:1.2}
.brand em{font-style:normal;color:var(--muted);font-weight:400;font-size:.9rem;display:block}
.iconbtn{width:2.75rem;height:2.75rem;display:flex;align-items:center;justify-content:center;border:1px solid var(--rule2);border-radius:.6rem;background:var(--card);color:var(--ink);cursor:pointer;flex:none}
.iconbtn svg{width:1.25rem;height:1.25rem}
#nav-toggle{position:absolute;opacity:0;width:0;height:0}
.layout{display:flex;min-height:100vh}
.side{position:fixed;left:0;top:0;bottom:0;width:min(21rem,88vw);background:var(--paper);border-right:1px solid var(--rule);padding:.9rem .9rem 1.5rem;overflow:auto;z-index:40;transform:translateX(-102%);transition:transform .22s ease}
#nav-toggle:checked ~ .layout .side{transform:none}
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:30;opacity:0;pointer-events:none;transition:opacity .22s}
#nav-toggle:checked ~ .layout .scrim{opacity:1;pointer-events:auto}
.side .brand{padding:.3rem .6rem}
.side h4{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:1.2rem 0 .4rem .6rem}
.side .close{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.side .close .brand{flex:1}
.theme{display:inline-flex;border:1px solid var(--rule2);border-radius:.6rem;overflow:hidden;background:var(--card);flex:none}
.theme button{appearance:none;border:0;background:none;color:var(--muted);width:2.1rem;height:2.1rem;display:flex;align-items:center;justify-content:center;cursor:pointer;font:inherit}
.theme button svg{width:1.1rem;height:1.1rem}
.theme button[aria-pressed="true"]{background:var(--sec-tint);color:var(--ink)}
.top .theme{margin-left:auto}
.top .theme button{width:2.6rem;height:2.6rem}
.nav{list-style:none;padding:0;margin:0}
.nav li a{display:flex;align-items:center;gap:.6rem;padding:.55rem .6rem;border-radius:.5rem;font-size:.95rem;line-height:1.3;color:var(--ink2);min-height:2.75rem}
.nav li a:hover{background:var(--card);color:var(--ink)}
.nav li a.here{background:var(--card);color:var(--ink);font-weight:500;box-shadow:inset 3px 0 0 var(--sec)}
.nav i{width:.5rem;height:.5rem;border-radius:50%;flex:none;background:var(--sec)}
.nav .n{margin-left:auto;font-family:var(--mono);font-size:.75rem;color:var(--muted)}
.nav .code{font-size:.78rem;padding:.05em .4em}
.side .about{display:block;margin:1.4rem .6rem 0;font-size:.875rem;color:var(--muted);text-decoration:underline}
.content{flex:1;min-width:0;padding:1.1rem var(--gut) 2.5rem;max-width:calc(var(--measure) + 2*var(--gut));margin:0 auto}
.toc{display:none}
.crumbs{font-size:.85rem;color:var(--muted);display:flex;gap:.5em;flex-wrap:wrap;margin:0 0 .5rem}
.crumbs a{color:var(--muted)}
.foot{border-top:1px solid var(--rule);color:var(--muted);font-size:.875rem;padding:1.4rem 0;margin-top:2.6rem;line-height:1.5}
.foot p{margin:0 0 .4rem}

@media (min-width:64em){
  :root{--gut:2.4rem}
  .top{display:none}
  .side{position:sticky;top:0;height:100vh;width:var(--side);transform:none;flex:none;padding:1.3rem 1rem;transition:none}
  .scrim{display:none}
  .side .close .iconbtn{display:none}
  .content{margin:0;padding-top:2rem;flex:0 1 calc(var(--measure) + 2*var(--gut))}
}
@media (min-width:80em){
  .toc{display:block;width:var(--toc);flex:none;padding:2.4rem 1.4rem 0 0;position:sticky;top:0;align-self:flex-start;max-height:100vh;overflow:auto}
  .toc h4{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 .5rem}
  .toc .nav li a{padding:.35rem .6rem;font-size:.85rem;min-height:0}
}

/* ── Карточки-ссылки ── */
.cards{display:grid;gap:.6rem;margin:.8rem 0;padding:0;list-style:none;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.cards.codes{grid-template-columns:repeat(auto-fill,minmax(19rem,1fr))}
.card{display:flex;align-items:center;gap:.7rem;background:var(--card);border:1px solid var(--rule);border-radius:.6rem;padding:.75rem .9rem;position:relative;min-height:2.75rem;line-height:1.35;color:var(--ink2)}
.card:hover{border-color:var(--sec);box-shadow:0 1px 0 var(--rule);color:var(--sec)}
.card:hover .t{color:var(--sec)}
.card.sec{box-shadow:inset 3px 0 0 var(--sec)}
.card.sec:hover{box-shadow:inset 3px 0 0 var(--sec),0 1px 0 var(--rule)}
.card .t{font-weight:500;color:var(--ink)}
.card .s{font-size:.85rem;color:var(--muted);margin-top:.15rem}
.card.section{display:block;padding:1rem 2.2rem .9rem 1rem;box-shadow:inset 0 3px 0 var(--sec);min-height:6rem}
.card.section .t,.card.section .s,.card .s{display:block}
.card.section .t{font-size:1.1rem;font-weight:600}
.card .arrow{position:absolute;right:.8rem;top:50%;transform:translateY(-50%);width:1rem;height:1rem;color:var(--muted)}

/* ── Страница кода ── */
.causes{list-style:none;padding:0;margin:.7rem 0;border-top:1px solid var(--rule)}
.causes li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--rule);line-height:1.4}
.causes .part{flex:none;font-family:var(--mono);font-size:.74rem;letter-spacing:.03em;color:var(--muted);text-align:right;max-width:40%;padding-top:.2rem}
@media (max-width:40em){.causes li{flex-direction:column;gap:.1rem}.causes .part{text-align:left;max-width:none;padding-top:0}}
.note{display:grid;grid-template-columns:1.4rem 1fr;gap:.7rem;border:1.5px solid var(--ink);border-radius:.6rem;padding:.85rem 1rem;margin:1.1rem 0;line-height:1.5}
.note svg{width:1.4rem;height:1.4rem;margin-top:.1rem}
.steps{counter-reset:s;list-style:none;padding:0;margin:.7rem 0;display:grid;gap:.6rem}
.steps li{display:grid;grid-template-columns:2.1rem 1fr;gap:.75rem;background:var(--card);border:1px solid var(--rule);border-radius:.6rem;padding:.85rem 1rem}
.steps li::before{counter-increment:s;content:counter(s);font-family:var(--mono);font-weight:600;font-size:.9rem;color:var(--sec);border:1.5px solid var(--sec);border-radius:.5rem;width:1.9rem;height:1.9rem;display:flex;align-items:center;justify-content:center}
.steps b{font-weight:600;display:block}
.steps .how{margin-top:.1rem;color:var(--ink2)}
.steps .sign{margin-top:.35rem;font-size:.875rem;color:var(--muted)}
.steps .sign::before{content:"признак · ";font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase}
.master{list-style:none;padding:0;margin:.7rem 0}
.master li{padding:.5rem 0 .5rem 1.3rem;position:relative;border-bottom:1px solid var(--rule)}
.master li::before{content:"";position:absolute;left:0;top:1.05rem;width:.6rem;height:2px;background:var(--sec)}
.faq h3{margin-top:1.2rem}

/* ── Таблица кодов хаба: таблица на широком, карточки на узком ── */
.table-wrap{margin:.7rem 0}
table.codes{width:100%;border-collapse:collapse;font-size:.92rem}
table.codes th{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 .6rem .6rem 0;border-bottom:1.5px solid var(--ink)}
table.codes td{padding:.7rem .6rem .7rem 0;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.4}
table.codes td .tag{margin-left:.2em}
table.codes td:first-child{min-width:5rem;max-width:14rem}
table.codes.long td:first-child{min-width:12rem}
.legend{margin-top:.6rem}
@media (max-width:48em){
  table.codes,table.codes tbody,table.codes tr,table.codes td{display:block}
  table.codes thead{display:none}
  table.codes tr{background:var(--card);border:1px solid var(--rule);border-radius:.6rem;padding:.8rem .9rem;margin:0 0 .6rem}
  table.codes td{border:0;padding:.15rem 0;display:grid;grid-template-columns:5.2rem 1fr;gap:.6rem;font-size:.9rem}
  table.codes td::before{content:attr(data-th);font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding-top:.2rem}
  table.codes td:first-child{display:block;padding-bottom:.4rem}
  table.codes td:first-child::before{content:none}
  table.codes td:first-child{max-width:none}
  table.codes td:first-child .code{font-size:1rem}
  table.codes td:nth-child(2){font-weight:500;color:var(--ink);grid-template-columns:1fr}
  table.codes td:nth-child(2)::before{content:none}
}

/* Главная. */
.hero h1{font-size:2.3rem;max-width:26em}
.hero .lead{max-width:34em;color:var(--ink2)}