/* Better Mechanics · бранд токени и основа · v0.1 · 2026-10-19
   Шрифтове: IBM Plex Sans VF (wght 100–700, wdth 75–100, кирилица с български форми, locl BGR)
             IBM Plex Mono — САМО латиница и цифри; кирилицата в моно поле пада на Plex Sans. */
@font-face{font-family:"Plex";src:url(fonts/IBMPlexSans-VF.woff2) format("woff2");font-weight:100 700;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"PlexMono";src:url(fonts/IBMPlexMono-Regular-latin.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0020-007E,U+00B7,U+00D7,U+2013-2014,U+2022,U+2026,U+2190-2193,U+2588,U+25A0-25CF}
@font-face{font-family:"PlexMono";src:url(fonts/IBMPlexMono-Bold-latin.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0020-007E,U+00B7,U+00D7,U+2013-2014,U+2022,U+2026,U+2190-2193,U+2588,U+25A0-25CF}
:root{
  --fon:#ecece6;--plosht:#ffffff;--mastilo:#0a0a0a;--siv:#4a4a46;--liniya:#0a0a0a;--fina:#b9b9b1;
  --pass:#2bd96b;--review:#ffb000;--fail:#ff4d3d;--signal:#0a0a0a;--signal-t:#ecece6;
  --rama:3px;--mreja:8px;
  --sans:"Plex",system-ui,sans-serif;--mono:"PlexMono","Plex",ui-monospace,monospace;
  --h1:clamp(2.6rem,8.4vw,7.6rem);--h2:clamp(1.6rem,3.6vw,2.8rem);
  color-scheme:light dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--fon:#0a0a0a;--plosht:#141414;--mastilo:#ecece6;--siv:#a3a39b;--liniya:#ecece6;--fina:#3a3a36;--signal:#ecece6;--signal-t:#0a0a0a}}
:root[data-theme="dark"]{--fon:#0a0a0a;--plosht:#141414;--mastilo:#ecece6;--siv:#a3a39b;--liniya:#ecece6;--fina:#3a3a36;--signal:#ecece6;--signal-t:#0a0a0a}
*{box-sizing:border-box}
body{margin:0;background:var(--fon);color:var(--mastilo);font:400 17px/1.55 var(--sans);font-stretch:100%}
a{color:inherit;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--review);outline-offset:2px}
.skip{position:absolute;left:-999px;top:8px;background:var(--signal);color:var(--signal-t);padding:8px 12px}.skip:focus{left:8px}
.wrap{max-width:1320px;margin:0 auto;padding:0 16px}
@media(min-width:700px){.wrap{padding:0 28px}}
/* знакът */
.znak{display:inline-flex;align-items:center;gap:0;font:700 1.25rem/1 var(--sans);font-stretch:75%;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;border:var(--rama) solid var(--liniya)}
.znak span{padding:7px 10px}.znak span+span{background:var(--signal);color:var(--signal-t)}
/* лента горе */
.lenta{border-bottom:var(--rama) solid var(--liniya)}
.lenta .wrap{display:flex;align-items:center;gap:20px;min-height:68px;flex-wrap:wrap}
.lenta nav ul{display:flex;gap:4px;margin:0;padding:0;list-style:none;flex-wrap:wrap}
.lenta nav a{display:block;padding:8px 12px;font:600 .82rem/1 var(--sans);font-stretch:85%;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border:2px solid transparent}
.lenta nav a:hover,.lenta nav a[aria-current]{border-color:var(--liniya)}
.lenta .ml{margin-left:auto}
.kod{font:400 .78rem/1.3 var(--mono);letter-spacing:.02em;color:var(--siv)}
/* типография */
h1,h2,h3{font-family:var(--sans);margin:0;text-wrap:balance}
h1{font-size:var(--h1);font-weight:700;font-stretch:75%;line-height:.9;letter-spacing:-.01em;text-transform:uppercase}
h2{font-size:var(--h2);font-weight:700;font-stretch:80%;line-height:1;text-transform:uppercase}
h3{font-size:1.15rem;font-weight:700;font-stretch:90%;line-height:1.2}
.etiket{display:inline-block;font:600 .74rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;border:2px solid var(--liniya);padding:5px 7px}
/* кутии */
.kutia{background:var(--plosht);border:var(--rama) solid var(--liniya)}
.sekcia{padding:56px 0;border-bottom:var(--rama) solid var(--liniya)}
.glava{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-bottom:26px}
@media(min-width:900px){.glava{grid-template-columns:200px minmax(0,1fr);gap:32px}}
.glava>.etiket{align-self:start;justify-self:start}
/* статуси — винаги дума + цвят */
.st{display:inline-flex;align-items:center;gap:6px;font:700 .74rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#0a0a0a;padding:5px 8px;border:2px solid #0a0a0a}
.st::before{content:"";width:8px;height:8px;background:#0a0a0a}
.st.pass{background:var(--pass)}.st.review{background:var(--review)}.st.fail{background:var(--fail)}.st.obsht{background:#d9d9d2}
/* табелата на рецептата */
.tabela{border:var(--rama) solid var(--liniya);background:var(--plosht);font:400 .8rem/1.35 var(--mono)}
.tabela .gore{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--signal);color:var(--signal-t);padding:8px 12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.tabela dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr));margin:0}
.tabela dl div{padding:9px 12px;border-right:1px solid var(--fina);border-bottom:1px solid var(--fina)}
.tabela dt{color:var(--siv);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
.tabela dd{margin:2px 0 0;font-weight:700;font-size:.95rem;font-family:var(--mono)}
.tabela .dolu{display:flex;gap:8px;flex-wrap:wrap;padding:10px 12px}
/* механиката: вход → процес → изход */
.meh{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
@media(min-width:800px){.meh{grid-template-columns:1fr auto 1fr auto 1fr}}
.meh .stapka{border:var(--rama) solid var(--liniya);background:var(--plosht);padding:18px}
.meh .stapka b{display:block;font:700 1.5rem/1 var(--sans);font-stretch:75%;text-transform:uppercase;margin:6px 0 8px}
.meh .str{display:flex;align-items:center;justify-content:center;font:700 1.6rem/1 var(--mono);padding:6px 10px}
@media(max-width:799px){.meh .str{transform:rotate(90deg)}}
.btn{display:inline-flex;align-items:center;gap:10px;font:700 .9rem/1 var(--sans);font-stretch:85%;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:14px 18px;border:var(--rama) solid var(--liniya);background:var(--signal);color:var(--signal-t)}
.btn:hover{background:var(--fon);color:var(--mastilo)}
.btn.vtori{background:transparent;color:var(--mastilo)}.btn.vtori:hover{background:var(--signal);color:var(--signal-t)}
footer{padding:30px 0 60px;font-size:.92rem;color:var(--siv)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.pole{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}.pole label{font-weight:700}.pole small{color:var(--siv)}
.pole input,.pole select,.pole textarea{font:inherit;padding:11px 12px;border:2px solid var(--liniya);background:var(--plosht);color:var(--mastilo);border-radius:0}
.pole input:focus-visible,.pole select:focus-visible,.pole textarea:focus-visible{outline:3px solid var(--review);outline-offset:1px}
.pole.check{flex-direction:row;align-items:flex-start;gap:10px}.pole.check input{width:22px;height:22px;flex:none;margin-top:2px}.pole.check label{font-weight:400}
.dve-p{display:grid;grid-template-columns:minmax(0,1fr);gap:0 16px}@media(min-width:700px){.dve-p{grid-template-columns:1fr 1fr}}
.kapan{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.greshka{border:3px solid #0a0a0a;background:var(--fail);color:#0a0a0a;padding:10px 12px;font-weight:700}
[aria-invalid="true"]{border-color:var(--fail)!important;border-width:3px!important}
.tabove{display:flex;gap:0;flex-wrap:wrap;margin-bottom:-3px}.tabove button{font:700 .85rem/1 var(--sans);font-stretch:85%;letter-spacing:.06em;text-transform:uppercase;padding:12px 16px;border:3px solid var(--liniya);background:var(--fon);color:var(--mastilo);cursor:pointer}
.tabove button[aria-selected="true"]{background:var(--plosht);border-bottom-color:var(--plosht)}
.red-b{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:14px 0;border-top:1px solid var(--fina)}@media(min-width:760px){.red-b{grid-template-columns:minmax(0,1fr) auto;align-items:center}}
.red-b .d{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn.malak{padding:9px 12px;font-size:.78rem}