@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans/ibm-plex-sans-latin-400-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}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans/ibm-plex-sans-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans/ibm-plex-sans-pi-400-normal.woff2) format("woff2");unicode-range:U+0E3F, U+2000-2001, U+2003-2008, U+200A, U+200C-200D, U+2015, U+2028-2029, U+202F, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190, U+2192, U+2194-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+ECE0, U+EFCC}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-sans/ibm-plex-sans-latin-600-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}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-sans/ibm-plex-sans-cyrillic-600-normal.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-sans/ibm-plex-sans-pi-600-normal.woff2) format("woff2");unicode-range:U+0E3F, U+2000-2001, U+2003-2008, U+200A, U+200C-200D, U+2015, U+2028-2029, U+202F, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190, U+2192, U+2194-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+ECE0, U+EFCC}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono/ibm-plex-mono-latin-400-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}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono/ibm-plex-mono-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono/ibm-plex-mono-pi-400-normal.woff2) format("woff2");unicode-range:U+03C0, U+0E3F, U+2000-200D, U+2010-2012, U+2015, U+2028-2029, U+202F, U+203E, U+205F, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190, U+2192, U+2194-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2219-221A, U+221E, U+222B, U+2236, U+2248, U+2260, U+2264-2265, U+2400-2421, U+2500-259F, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+3000, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-mono/ibm-plex-mono-latin-600-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}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-mono/ibm-plex-mono-cyrillic-600-normal.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-mono/ibm-plex-mono-pi-600-normal.woff2) format("woff2");unicode-range:U+03C0, U+0E3F, U+2000-200D, U+2010-2012, U+2015, U+2028-2029, U+202F, U+203E, U+205F, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190, U+2192, U+2194-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2219-221A, U+221E, U+222B, U+2236, U+2248, U+2260, U+2264-2265, U+2400-2421, U+2500-259F, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+3000, U+FEFF, U+FFFD}
:root{--bg:#FBF8F1; --card:#FFFFFF; --text:#1F1D1A; --text-secondary:#73706C; --border-input:#918F8A; --divider:#CBC9C3; --water:#1F5A9E; --row-selection:#DBE5EF; --search-highlight:#FFF0A8; --search-highlight-alt:#FFF0A8; --copper:#AB5E36; --ok:#2F6B3A; --warn:#774B00; --bad:#8C2F2F; --ornament:#C9A27A; color-scheme:light;
--font-sans:"IBM Plex Sans", system-ui, "Segoe UI", Roboto, sans-serif; --font-mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
--t1:22px; --t2:17px; --t3:15px; --t4:14px; --t5:13px; --hero:clamp(27px, 5.2vw, 40px); --result-number:40px;
--s1:4px; --s2:8px; --s3:14px; --s4:22px; --s5:36px; --s6:60px; --radius-card:11px; --radius-control:8px; --focus-width:2px; --focus-offset:2px; --button-border:1.5px; --button-radius:8px; --button-pad:12px 18px; --button-min-height:44px; --header-height:64px; --divider-width:1px}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#1A1819; --card:#242223; --text:#ECE6DC; --text-secondary:#9C9892; --border-input:#706C69; --divider:#413E3D; --water:#8AB8E8; --row-selection:#1C2834; --search-highlight:#454020; --search-highlight-alt:#5E5624; --copper:#C16A3D; --ok:#6CA176; --warn:#EBC04F; --bad:#E06A5F; --ornament:#543526; color-scheme:dark}}
:root[data-theme=dark]{--bg:#1A1819; --card:#242223; --text:#ECE6DC; --text-secondary:#9C9892; --border-input:#706C69; --divider:#413E3D; --water:#8AB8E8; --row-selection:#1C2834; --search-highlight:#454020; --search-highlight-alt:#5E5624; --copper:#C16A3D; --ok:#6CA176; --warn:#EBC04F; --bad:#E06A5F; --ornament:#543526; color-scheme:dark}

:root{
--shrift:16px/1.6 var(--font-sans);
--kolonka:720px; --kolonka-shire:820px; --kolonka-skhema:1320px;
}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--text);margin:0;
padding:var(--s5) 20px var(--s6);font:var(--shrift)}
.wrap{max-width:var(--kolonka);margin:0 auto}
.wrap.shire{max-width:var(--kolonka-shire)}
.wrap.skhema{max-width:var(--kolonka-skhema)}
h1{font-size:var(--t1);margin:0 0 var(--s1)}
h2{font-size:var(--t2);margin:var(--s4) 0 var(--s2)}
.ekran h2{font-size:clamp(20px,2.6vw,25px);letter-spacing:-.01em;
margin:0 0 var(--s3)}
p{margin:var(--s2) 0}
.file{color:var(--text-secondary);font-size:var(--t4);margin:0 0 var(--s4)}
/* The archive-contents line (task U3): a `.file` line, no look of its
   own -- the modifier only exists so `test_brand_tokens.py`'s "every
   class used has a rule" check can tell it's not a stray typo. */
.arkhiv-sostav{}
/* The retention date `/date.js` looks for by `data-epoch-s` -- same
   reason, no look of its own; the text itself already reads right
   inside `.file` (job.meta_line_html). */
.srok{}
code{font-size:var(--t5);color:var(--text-secondary);overflow-wrap:anywhere}
.ok{color:var(--ok)}.bad{color:var(--bad)}.warn{color:var(--warn)}
/* Water is action (BRANDBOOK §5): a link, a visited link -- no purple
   of its own -- the focus ring, a selection. */
a{color:var(--water);text-underline-offset:2px}
a:visited{color:var(--water)}
:focus-visible{outline:var(--focus-width) solid var(--water);
outline-offset:var(--focus-offset)}
::selection{background:var(--row-selection);color:var(--text)}
input,select,textarea{accent-color:var(--water)}
mark{background:var(--search-highlight);color:var(--text);border-radius:2px;
padding:0 1px}
tr.sel td{background:var(--row-selection)}
tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--water)}
tr.sel .file,tr.sel code{color:var(--text)}

/* Task U14 (brandbook §10, GAP.md §1/§7): the shared header, now the
   landing's own lockup + nav rather than a plain word and underlined
   links ("a developer's site in brand colours", owner via U8). Height,
   divider, side padding and the 20px-wide nav gap are the brandbook's
   own numbers (64px / divider / 20px / 18px); the lockup's own
   24-31-step guard space (1 H = 15px) is satisfied by the header's own
   64px height leaving more than 15px above and below a 30px mark. */
.shapka{height:var(--header-height);border-bottom:var(--divider-width) solid var(--divider);
margin:0 0 var(--s4)}
.shapka-inner{display:flex;align-items:center;gap:28px;height:100%}
.lockup-link{display:flex;flex:none;color:inherit}
.lockup-link svg{height:30px;width:auto;display:block}
.lockup-link .swage-mark{color:var(--copper)}
.lockup-link .swage-word{color:var(--text)}
nav.glavnaya{display:flex;gap:18px;align-items:center;flex-wrap:wrap;
font-size:var(--t4);min-width:0}
nav.glavnaya a{color:var(--water);text-decoration:none;padding:2px 0;
border-bottom:2px solid transparent}
nav.glavnaya a:hover{border-bottom-color:var(--divider)}
/* The current page is told apart by TEXT, not colour alone (brand §5:
   water is reserved for action) -- ink and 600, same rule the landing's
   own nav[aria-current] already uses. */
nav.glavnaya a[aria-current="page"]{color:var(--text);font-weight:600;
border-bottom-color:var(--text)}
@media (max-width:700px){
.shapka{height:auto;padding:10px 0}
.shapka-inner{flex-wrap:wrap;row-gap:8px}
nav.glavnaya{gap:12px;overflow-x:auto}
}

a.card{display:block;background:var(--card);border:var(--divider-width) solid var(--divider);
border-radius:var(--radius-card);padding:var(--s3) 16px;margin:10px 0;
text-decoration:none;color:inherit}
a.card:hover{border-color:var(--text-secondary)}
a.card b{display:block;font-size:var(--t2);margin-bottom:3px}
a.card span{color:var(--text-secondary);font-size:var(--t4)}
/* The primary action -- "download the archive" -- is an outline in
   ink, not a fill: filled, it was 5-9 times louder than the main
   number of the result (BRANDBOOK §10). */
a.card.glavnaya{border:var(--button-border) solid var(--text);background:transparent}
a.card.glavnaya:hover{background:var(--row-selection)}
a.card.glavnaya b{font-size:16px;font-weight:600}
.ist{background:var(--card);border:var(--divider-width) solid var(--divider);
border-radius:9px;padding:11px var(--s3);margin:10px 0}
/* "What we read" (task 8.12): a block shown before a format is
   chosen, same card look as .ist so it reads as ONE finding, not a
   list drifting loose among the page's other sections. */
.svodka{background:var(--card);border:var(--divider-width) solid var(--divider);
border-radius:9px;padding:11px var(--s3);margin:14px 0}
.svodka ul{margin:6px 0 0;padding-left:18px}
.svodka li{margin:3px 0;font-size:var(--t4)}
/* Secondary link-as-button (task 8.8, the donate button): visible,
   but not competing with the main "download" action next to it. */
a.secondary{display:inline-block;padding:8px 16px;border-radius:var(--radius-control);
border:1px solid var(--border-input);color:var(--text);text-decoration:none;
font-size:var(--t4);margin:4px 0 var(--s3)}
a.secondary:hover{border-color:var(--text-secondary)}

table{border-collapse:collapse;width:100%;margin:var(--s4) 0;font-size:14.5px}
td,th{padding:7px 10px;border-bottom:var(--divider-width) solid var(--divider);text-align:left}
th{color:var(--text-secondary);font-weight:600;font-size:12.5px}
.tablitsa-obertka{overflow-x:auto}

form{background:var(--card);border:var(--divider-width) solid var(--divider);
border-radius:var(--radius-card);padding:18px 18px 20px;margin:var(--s3) 0}
label{display:block;margin:12px 0 var(--s1);font-size:14.5px}
input[type=file],select,textarea{width:100%;padding:var(--s2);
border:1px solid var(--border-input);border-radius:7px;background:var(--card);
color:var(--text);font-size:var(--t3);font-family:inherit}
/* A text field keeps its size; it takes the token border (WCAG 1.4.11,
   3:1 -- tokens.json border-input) and the card surface. */
input[type=text]{padding:6px var(--s2);border:1px solid var(--border-input);
border-radius:7px;background:var(--card);color:var(--text);font:inherit}
textarea{resize:vertical}
/* A button is an outline in ink (tokens.json button.primary): its own
   border, radius, padding and touch-target height, not the generic
   --radius-control a card border also uses -- brand 1.1 fixed the
   padding at 12/18 and set a 44 px floor for touch (WCAG 2.5.5). */
button{margin-top:16px;padding:var(--button-pad);
border-radius:var(--button-radius);min-height:var(--button-min-height);
border:var(--button-border) solid var(--text);background:transparent;color:var(--text);
font:600 var(--t3) var(--font-sans);cursor:pointer}
button:hover{background:var(--row-selection)}
button:disabled{opacity:.5;cursor:default}
button.tikho{margin:0;padding:5px 11px;font-size:var(--t5);font-weight:400;
border-radius:7px;background:var(--card);color:var(--text);
border:1px solid var(--border-input);cursor:pointer}
.consent{background:var(--bg);border:var(--divider-width) solid var(--divider);
border-radius:var(--radius-control);padding:12px;margin:16px 0;font-size:var(--t4);
color:var(--text-secondary)}
.consent label{color:var(--text);display:flex;gap:9px;align-items:flex-start;
margin:10px 0 0}
.vybor{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
border:1px solid var(--border-input);border-radius:9px;padding:10px 13px;
margin:7px 0;cursor:pointer;background:var(--card)}
.vybor b{min-width:140px}
.vybor span{color:var(--text-secondary);font-size:13.5px}
.vybor.nelzya{opacity:.5;cursor:not-allowed}
/* A chosen option is a selected row: the selection colour and a water
   bar on its left (BRANDBOOK §5, "row selection"). */
.vybor:has(input:checked){background:var(--row-selection);
border-color:var(--water);box-shadow:inset 3px 0 0 var(--water)}
.vybor:has(input:checked) span{color:var(--text)}
/* A one-off checkbox nested inside a `.vybor` row (merge-into-one,
   the GPKG index consent) -- its own line, not a second `.vybor`
   card inside a card. Pre-existing gap: neither had a CSS rule of
   its own before task U4b touched the same markup. */
.odnonabor{display:block;font-size:13px;margin:8px 0 0;cursor:pointer}
/* Task U14 (brief item 2, GAP.md's #1 finding): a real drop zone --
   drag-and-drop AND click, on the SAME element, reusing the landing's
   own look (`.dropzone`, `swage.css`) rather than a native file
   button. The real `<input type=file>` sits inside, visually hidden
   (`.visually-hidden`, not `display:none`): a screen reader and the
   keyboard both still reach it, and without `/dropzone.js` a click
   still opens the native picker -- only the drag half needs the
   script. */
.dropzone{display:block;border:1.5px dashed var(--border-input);
border-radius:var(--radius-card);padding:28px 22px;text-align:center;
background:var(--card);cursor:pointer}
.dropzone:focus-within{outline:var(--focus-width) solid var(--water);
outline-offset:var(--focus-offset)}
.dropzone-nad{border-color:var(--water);background:var(--row-selection)}
.dropzone .icon-lg{width:28px;height:28px;color:var(--text-secondary)}
.dropzone-title{font-weight:600;margin:10px 0 2px}
.dropzone-browse{color:var(--water)}
.dropzone-sub{color:var(--text-secondary);font-size:var(--t5);margin:2px 0 0}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap}
/* Task U14 (brief item 2): the consent paragraph used to print in
   full next to the checkbox (GAP.md §1, "длинный абзац целиком"). It
   stays reachable -- the SAME words, untouched -- behind a one-line
   disclosure naming the version, next to a short checkbox label. */
.usloviya{margin:10px 0 0;font-size:var(--t5)}
.usloviya summary{cursor:pointer;color:var(--water)}
.usloviya p{margin:6px 0 0;color:var(--text-secondary)}

/* A claim about the data carries its state as a SHAPE (BRANDBOOK §7):
   ✓ done, ⚠ done with a loss named in advance, ✕ not done. The sign
   is the brand's own SVG (`brandtokens.sign`) in `currentColor`; the
   colour only supports it, and the text keeps the text colour. */
.claim{display:flex;gap:9px;align-items:flex-start;margin:10px 0;
font-size:14.5px}
.claim>.sign{flex:none;margin-top:.3em}
.claim-done>.sign,.sign-done{color:var(--ok)}
.claim-attention>.sign,.sign-attention{color:var(--warn)}
.claim-not_done>.sign,.sign-not_done{color:var(--bad)}
.sign{display:inline-block;vertical-align:-2px}
.zaranee{background:var(--bg);border:var(--divider-width) solid var(--divider);
border-radius:var(--radius-control);padding:12px var(--s3);margin:10px 0 0;
font-size:var(--t4)}
.zaranee b{font-size:13.5px;color:var(--text-secondary);font-weight:600}
.zaranee ul{margin:var(--s2) 0 6px;padding-left:20px}
.zaranee li{margin:3px 0}
.zaranee .claim{margin:var(--s2) 0 6px}
.zaranee .file{margin:6px 0 0}

.khod{display:flex;flex-wrap:wrap;gap:7px;align-items:center;
margin:var(--s3) 0 var(--s1);font-size:var(--t5)}
.khod b{color:var(--text-secondary);font-weight:600}
.sh{border:var(--divider-width) solid var(--divider);border-radius:20px;padding:3px 11px;
color:var(--text-secondary)}
.sh{display:inline-flex;gap:5px;align-items:center}
.sh.done{border-color:var(--ok);color:var(--ok)}
.sh.failed{border-color:var(--bad);color:var(--bad)}
.sh.running{border-color:var(--text);color:var(--text)}
.polosa{height:var(--s2);border-radius:5px;background:var(--divider);
overflow:hidden;margin:var(--s3) 0 6px}
.polosa i{display:block;height:100%;width:0;background:var(--text);
transition:width .2s}
.skhema-obertka{overflow-x:auto;margin:6px 0 var(--s1);padding-bottom:4px}
/* U20 #4: the diagram above already scrolls sideways at any width
   (`overflow-x:auto`) -- this just SAYS so, at the widths where it's
   likely to be true (a narrow phone, not a 1440 desktop where the
   whole diagram usually fits). Hidden by default, not removed: a print
   stylesheet or a screen reader gets nothing extra either way. */
.skhema-podskazka{display:none}
@media (max-width:700px){.skhema-podskazka{display:block;color:var(--text-secondary)}}
details.poshtuchno,details.dopolnitelno{margin:var(--s1) 0 var(--s3)}
details.dopolnitelno summary{cursor:pointer;color:var(--text-secondary);
font-size:var(--t4);padding:6px 0}
details.poshtuchno summary{cursor:pointer;color:var(--text-secondary);
font-size:var(--t4);padding:6px 0}
.syroe{margin:6px 0 18px;font-size:13.5px;color:var(--text-secondary)}
.syroe summary{cursor:pointer;color:var(--text-secondary)}

.ekran{padding:var(--s6) 0;border-bottom:var(--divider-width) solid var(--divider)}
.ekran:last-of-type{border-bottom:0}
.geroi{padding-top:var(--s4)}
.geroi h1{font-size:var(--hero);line-height:1.13;letter-spacing:-.015em;
margin:0 0 var(--s3);max-width:17ch}
.podzagolovok{font-size:var(--t2);color:var(--text-secondary);max-width:52ch;
margin:0 0 var(--s4)}
.zov{display:inline-block;background:transparent;color:var(--text);
border:1.5px solid var(--text);font-weight:600;
text-decoration:none;padding:12px 22px;border-radius:var(--radius-control);
font-size:16px}
.zov:visited{color:var(--text)}
.zov:hover{background:var(--row-selection)}
.zov.tikhii{border:1px solid var(--border-input);font-weight:400}
.melko{color:var(--text-secondary);font-size:var(--t5);margin:var(--s3) 0 0}
.dovod{font-size:var(--t2);line-height:1.62;max-width:60ch}
.dovod b{font-weight:600}
.shagi{list-style:none;counter-reset:sh;padding:0;margin:var(--s4) 0 0}
.shagi li{counter-increment:sh;position:relative;padding-left:44px;
margin:var(--s3) 0;max-width:58ch}
.shagi li::before{content:counter(sh);position:absolute;left:0;top:-2px;
width:28px;height:28px;border-radius:50%;border:var(--divider-width) solid var(--divider);
display:flex;align-items:center;justify-content:center;
font-size:var(--t4);color:var(--text-secondary)}
.granitsy li{margin:10px 0;max-width:62ch}
.tsifra{font-size:var(--hero);line-height:1;font-weight:600;
letter-spacing:-.02em}
.podval{color:var(--text-secondary);font-size:var(--t4);padding:var(--s5) 0 0}
.podval a{color:var(--text-secondary)}

.tiles{display:flex;flex-wrap:wrap;gap:var(--s3);margin:var(--s3) 0 var(--s2)}
.tile{flex:1 1 140px;background:var(--card);border:var(--divider-width) solid var(--divider);
border-radius:var(--radius-card);padding:var(--s3) 16px}
.tile b{display:block;font-size:var(--t1);line-height:1.1;font-weight:600;
letter-spacing:-.02em}
.tile span{display:block;color:var(--text-secondary);font-size:var(--t5);
margin-top:var(--s1)}
.legend{margin:var(--s3) 0 var(--s4);font-size:var(--t4)}
.legend p{margin:6px 0}
.known{background:var(--card);border:var(--divider-width) solid var(--divider);
border-radius:var(--radius-card);padding:var(--s3) 16px;margin:10px 0}
.known h3{font-size:var(--t2);margin:0 0 2px;font-weight:600}
.known .meta{color:var(--text-secondary);font-size:var(--t5);margin:0 0 3px}
.measure{border-top:var(--divider-width) solid var(--divider);margin-top:var(--s2);
padding-top:var(--s2)}
.measure p{margin:0 0 4px;font-size:var(--t4)}
.measure .when{font-weight:600}
.measure .hint{color:var(--text-secondary);font-size:var(--t5)}
.numbers{display:flex;flex-wrap:wrap;gap:2px var(--s3);margin:0 0 4px;
padding:0;list-style:none;font-size:var(--t4);color:var(--text-secondary)}
.numbers b{color:var(--text);font-weight:600}
.traps{margin:var(--s3) 0 0}
.traps>b{display:block;font-size:var(--t5);color:var(--text-secondary);font-weight:600}
.trap{border-left:3px solid var(--divider);padding:2px 0 2px 12px;
margin:var(--s2) 0 0;font-size:var(--t4)}
.traps .claim{margin:var(--s2) 0 0;font-size:var(--t4)}

/* The result screen (BRANDBOOK §8, §10): the main number in Plex Mono,
   40 px and never under 32, and the stamp -- ink, one form per page --
   only when the check closed. */
.itog{display:grid;grid-template-columns:1fr auto;gap:var(--s4);
align-items:center;margin:var(--s3) 0 var(--s4)}
.itog-chislo{display:flex;flex-direction:column;gap:6px}
.glavnoe-chislo{font:600 clamp(32px,10vw,var(--result-number))/1.1 var(--font-mono);
font-variant-numeric:tabular-nums slashed-zero;letter-spacing:-.01em;
overflow-wrap:anywhere}
.glavnoe-chislo .iz{color:var(--text-secondary);font-weight:400}
.pechat{margin:0;color:var(--text);display:flex;flex-direction:column;
align-items:center;gap:6px}
.pechat-svg{display:block;max-width:100%;height:auto}
.pechat-podpis{font:600 13px var(--font-sans);text-transform:uppercase;
letter-spacing:.06em}
@media (max-width:600px){.itog{grid-template-columns:1fr}.pechat{order:-1}}

@media (max-width:600px){
body{padding:var(--s4) var(--s3) var(--s5)}
.ekran{padding:var(--s5) 0}
.geroi h1{max-width:none}
h1{font-size:20px}
table{font-size:var(--t5)}
td,th{padding:6px 7px}
.vybor b{min-width:0}
.zov{display:block;text-align:center}
.tile{flex:1 1 100%}
}

.wrap.plan{max-width:1180px}
.wrap.dok{max-width:860px}
.plitka{display:inline-block;border:1px solid;border-radius:20px;
padding:3px 12px;margin:0 7px 7px 0;font-size:var(--t5)}
.gant-obertka{overflow-x:auto;background:var(--card);
border:var(--divider-width) solid var(--divider);border-radius:var(--radius-card);padding:12px;
margin:16px 0}
td.id{color:var(--text-secondary);font-size:12.5px;white-space:nowrap}
td.och{color:var(--text-secondary);font-size:var(--t5)}
tr.etap td{padding-top:18px;border-bottom:2px solid var(--divider)}
.sost{display:inline-block;border:1px solid;border-radius:20px;
padding:2px 9px;font-size:12.5px;white-space:nowrap;color:var(--text)}
.pochemu{color:var(--text-secondary);font-size:12.5px;margin-top:3px}
ul.zhdut li{margin:5px 0}
.setka{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:var(--s3);margin:var(--s3) 0 var(--s4)}
.stopka{background:var(--card);border:var(--divider-width) solid var(--divider);
border-radius:var(--radius-card);padding:12px 16px}
.stopka h3{margin:2px 0 var(--s2);font-size:var(--t4);color:var(--text-secondary)}
ul.doki{margin:0;padding-left:18px}
ul.doki li{margin:var(--s2) 0;font-size:var(--t4)}
ul.doki code{font-size:11.5px}
.ogovorka{border-left:3px solid var(--bad);padding:var(--s2) 0 var(--s2) 14px;
margin:var(--s3) 0;font-size:var(--t4);color:var(--text)}
h2.razdel{font-size:var(--t2)}
h2.razdel.poodal{margin-top:var(--s4)}
blockquote{border-left:3px solid var(--divider);margin:12px 0;
padding-left:14px;color:var(--text-secondary)}
.plotno{margin:6px 0 0}

/* Task states as classes, not a style attribute (CSP since
   2026-09-21), coloured by the tokens since T1: done is `ok`, in
   work is water (action), waiting on the owner is `warn`, not started
   is the input border. The word in the chip carries the state; the
   tint (the colour 14 % over the card) only supports it. */
.s-sdelana{border-color:var(--ok)}
.sost.s-sdelana{background:color-mix(in srgb,var(--ok) 14%,var(--card))}
.s-v-rabote{border-color:var(--water)}
.sost.s-v-rabote{background:color-mix(in srgb,var(--water) 14%,var(--card))}
.s-zhdet-vladeltsa,.s-ne-reshena{border-color:var(--warn)}
.sost.s-zhdet-vladeltsa,.sost.s-ne-reshena{background:color-mix(in srgb,var(--warn) 14%,var(--card))}
.s-ne-nachata{border-color:var(--border-input)}
.sost.s-ne-nachata{background:var(--card)}
/* The same states on the Gantt chart (`roadmap.gantt`). */
.gant .bar.s-sdelana{fill:color-mix(in srgb,var(--ok) 22%,var(--card));stroke:var(--ok)}
.gant .bar.s-v-rabote{fill:color-mix(in srgb,var(--water) 22%,var(--card));stroke:var(--water)}
.gant .bar.s-zhdet-vladeltsa,.gant .bar.s-ne-reshena{fill:color-mix(in srgb,var(--warn) 22%,var(--card));stroke:var(--warn)}
.gant .bar.s-ne-nachata{fill:var(--card);stroke:var(--border-input)}
.gant .setka{stroke:var(--divider)}
.gant .segodnya{stroke:var(--water);stroke-width:1.6}
.gant text{fill:var(--text)}
.gant text.melko{fill:var(--text-secondary)}
.gant text.segodnya-podpis{fill:var(--water)}

.dok pre{background:var(--card);border:var(--divider-width) solid var(--divider);
border-radius:var(--radius-control);padding:12px;overflow-x:auto;font-size:var(--t5)}
.dok h2{font-size:19px;margin-top:26px}
.dok h3{font-size:16px}
.dok h4{font-size:var(--t3)}

/* Подписи внутри SVG. Раньше эти правила ехали тегом <style> внутри
   самой картинки — и с 2026-09-21 их бы запретила политика
   безопасности вместе со всем прочим стилем в разметке. Картинка
   вставлена в страницу, значит общий стиль на неё действует. */
.skhema text{font:13px var(--font-sans)}
.skhema .melko{font-size:11px}
.potok text{font:12px var(--font-sans)}
.potok .shapka{font-size:12px;font-weight:600}
.potok .melko{font-size:10.5px}
.potok .chislo{font-size:11px;font-weight:600}
.gant text{font:12px var(--font-sans)}
.gant .melko{font-size:10.5px}
/* Colours inside the pictures, from the tokens (task T1; until then
   hex written into the SVG by `chart.py` and `roadmap.py`). A stage
   box is tinted 10 % of its state's colour over the card; the done
   and failed boxes also carry the sign (✓ / ✕). */
.skhema text,.potok text{fill:var(--text)}
.skhema text.melko,.potok text.melko{fill:var(--text-secondary)}
.skhema text.podpis{fill:var(--text)}
.yashchik{fill:var(--card);stroke:var(--border-input)}
.yashchik.st-done{fill:color-mix(in srgb,var(--ok) 10%,var(--card));stroke:var(--ok)}
.yashchik.st-running{fill:color-mix(in srgb,var(--water) 10%,var(--card));stroke:var(--water)}
.yashchik.st-failed{fill:color-mix(in srgb,var(--bad) 10%,var(--card));stroke:var(--bad)}
.yashchik.st-awaiting_you{fill:color-mix(in srgb,var(--warn) 10%,var(--card));stroke:var(--warn)}
.skhema text.st-done,.skhema g.st-done{fill:var(--ok);color:var(--ok)}
.skhema text.st-running{fill:var(--water)}
.skhema text.st-failed,.skhema g.st-failed{fill:var(--bad);color:var(--bad)}
.skhema text.st-awaiting_you{fill:var(--warn)}
.skhema text.st-not_run{fill:var(--text-secondary)}
.strelka{stroke:var(--text-secondary)}
.strelka-nakonechnik{fill:var(--text-secondary)}
.pt-model{fill:var(--bg);stroke:var(--border-input)}
.potok text.pt-delo{fill:var(--text-secondary)}
.pt-cherta{stroke:var(--divider)}
.pt-ist,.pt-vykhod{fill:var(--card);stroke:var(--border-input)}
.pt-liniya{stroke:var(--text-secondary)}
.pt-liniya.pt-razdel{stroke:var(--warn);stroke-width:1.6}
.pt-budet{fill:var(--bg);stroke:var(--border-input)}
.pt-liniya-budet{stroke:var(--border-input)}
.potok text.chislo{font-family:var(--font-mono);font-variant-numeric:tabular-nums slashed-zero}

.chat-lenta{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.chat-lenta .skaz{font-size:var(--t4);line-height:1.45;padding:7px 10px;
border-radius:10px;background:var(--card);border:var(--divider-width) solid var(--divider);
max-width:80%;white-space:pre-wrap;overflow-wrap:anywhere}
.chat-lenta .skaz.nash{align-self:flex-end;background:var(--text);
color:var(--bg);border-color:var(--text)}
.chat-lenta .kogda{color:var(--text-secondary);font-size:11px;margin-top:3px}
.chat-lenta .skaz.nash .kogda{color:inherit;opacity:.75}
.chat-knopka{position:fixed;right:18px;bottom:18px;z-index:9;margin:0;
background:var(--card);color:var(--text);border:1.5px solid var(--text);border-radius:22px;
padding:10px 18px;font-size:var(--t4);cursor:pointer;
box-shadow:0 2px 10px rgba(0,0,0,.18)}
.chat{position:fixed;right:18px;bottom:18px;z-index:10;width:330px;
max-width:calc(100vw - 36px);background:var(--card);
border:var(--divider-width) solid var(--divider);border-radius:var(--radius-card);
box-shadow:0 6px 26px rgba(0,0,0,.18);display:flex;flex-direction:column;
max-height:min(70vh,520px)}
.chat[hidden],.chat-knopka[hidden]{display:none}
.chat header{display:flex;align-items:baseline;gap:8px;padding:10px 12px;
border-bottom:var(--divider-width) solid var(--divider);font-size:var(--t4)}
.chat header b{margin-right:auto}
.chat .zakryt{background:none;border:0;color:var(--text-secondary);cursor:pointer;
font-size:16px;margin:0;padding:0 4px}
.chat .lenta{overflow-y:auto;padding:10px 12px;display:flex;
flex-direction:column;gap:8px}
.chat .skaz{font-size:var(--t4);line-height:1.45;padding:7px 10px;
border-radius:10px;background:var(--bg);border:var(--divider-width) solid var(--divider);
max-width:88%;white-space:pre-wrap;overflow-wrap:anywhere}
.chat .skaz.nash{align-self:flex-end;background:var(--text);color:var(--bg);
border-color:var(--text)}
.chat .kogda{color:var(--text-secondary);font-size:11px;margin-top:3px}
.chat .skaz.nash .kogda{color:inherit;opacity:.75}
.chat form{margin:0;border:0;border-top:var(--divider-width) solid var(--divider);
border-radius:0;padding:10px 12px;background:transparent}
.chat textarea{font-size:var(--t4);min-height:52px}
.chat button[type=submit]{margin-top:8px;padding:7px 14px;
font-size:var(--t4)}
.chat .podpis{color:var(--text-secondary);font-size:11.5px;margin:8px 0 0}
@media (max-width:600px){
.chat{right:8px;left:8px;bottom:8px;width:auto;max-height:78vh}
.chat-knopka{right:8px;bottom:8px}
}

.tsifry,code,pre,.num,.khod b{font-family:var(--font-mono);
font-variant-numeric:tabular-nums slashed-zero}
table{font-variant-numeric:tabular-nums}
/* В таблице моноширинными становятся только колонки с числами:
   имя файла моноширинным лишь растягивает строку. */
table.tsifry{font-family:inherit}
table.tsifry td:not(:first-child),table.tsifry th:not(:first-child)
{font-family:var(--font-mono);text-align:right}

/* --- History (T1) ----------------------------------------------------
   Everything below is the /brand LAB: palettes and marks proposed
   before the brandbook, kept as exhibits and labelled "history" on the
   page. Their values are scoped to `.istoriya` and never reach `:root`:
   the stand's own colours come from brand/tokens.json only. The lab's
   own variable names are mapped onto the tokens here, so an exhibit
   without a palette of its own shows today's colours. */
.istoriya{--fg:var(--text);--dim:var(--text-secondary);--geroi:var(--hero);
--mono:var(--font-mono)}
.istoriya-metka{border:1.5px dashed var(--border-input);border-radius:var(--radius-card);
padding:var(--s3) 16px;margin:0 0 var(--s4);font-size:var(--t4)}
.istoriya-metka b{font-size:var(--t2)}
.tokeny{display:flex;flex-wrap:wrap;gap:6px 14px;margin:var(--s2) 0 0;
padding:0;list-style:none;font-size:var(--t5)}
.tokeny li{display:flex;gap:6px;align-items:center}
.tokeny .obrazets{margin:0}
.tk-bg{background:var(--bg)} .tk-card{background:var(--card)}
.tk-text{background:var(--text)} .tk-text-secondary{background:var(--text-secondary)}
.tk-border-input{background:var(--border-input)} .tk-water{background:var(--water)}
.tk-row-selection{background:var(--row-selection)}
.tk-search-highlight{background:var(--search-highlight)}
.tk-search-highlight-alt{background:var(--search-highlight-alt)}
.tk-copper{background:var(--copper)} .tk-ok{background:var(--ok)}
.tk-warn{background:var(--warn)} .tk-bad{background:var(--bad)}
.tk-ornament{background:var(--ornament)} .tk-divider{background:var(--divider)}
.obrazets{display:inline-block;width:26px;height:18px;border-radius:4px;
border:1px solid rgba(128,128,128,.35);vertical-align:middle;
margin-right:3px}
.ts-bg{background:var(--bg)} .ts-fg{background:var(--fg)}
.ts-dim{background:var(--dim)} .ts-line{background:var(--divider)}
.ts-card{background:var(--card)} .ts-ok{background:var(--ok)}
.ts-bad{background:var(--bad)}
.ts-zemlya{background:var(--zemlya)} .ts-voda{background:var(--voda)}
.r-geroi{font-size:var(--geroi);line-height:1.15}
.r-1{font-size:var(--t1)} .r-2{font-size:var(--t2)}
.r-3{font-size:var(--t3)} .r-4{font-size:var(--t4)}
.r-5{font-size:var(--t5)}
.znak{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
margin:0 0 var(--s2)}
.slovo{font-size:var(--t1);font-weight:700;letter-spacing:.2px}

/* --- Замер дейтеранопии -------------------------------------
   Цвета замера стоят классами, а не атрибутом style: политика
   закрыта без послаблений (задача 7.21). Имя класса — сам цвет,
   чтобы строку таблицы можно было сверить с CSS глазами. */
.k-2f6b3a{background:#2f6b3a} .k-8c2f2f{background:#8c2f2f}
.k-4c484d{background:#4c484d} .k-74792f{background:#74792f}
.k-4c8dff{background:#4c8dff} .k-ff8a1f{background:#ff8a1f}
.k-6a65e5{background:#6a65e5} .k-dde453{background:#dde453}
.k-3a8a3a{background:#3a8a3a} .k-e0452b{background:#e0452b}
.k-625c5c{background:#625c5c} .k-bac234{background:#bac234}
.k-1f4fd1{background:#1f4fd1} .k-f07a12{background:#f07a12}
.k-3733b6{background:#3733b6} .k-ced547{background:#ced547}
.k-009f44{background:#009f44} .k-a8342f{background:#a8342f}
.k-655b6a{background:#655b6a} .k-8b9131{background:#8b9131}

/* --- Раскраска знаков ---------------------------------------
   Знак берёт цвета из палитры, в поле которой он стоит: цвет,
   записанный в самом SVG, означал бы отдельный файл на каждую
   палитру — то есть второй логотип, который однажды отстанет
   от первого. */
.sl-zemlya{fill:var(--zemlya)}
.sl-voda{fill:var(--voda)}
.sl-vozdukh{fill:var(--vozdukh);stroke:var(--voda);stroke-width:1.6}
.sl-put{stroke:var(--voda)}
.sl-tochka{fill:var(--zemlya)}
.zn-telo{fill:var(--fg)}
.zn-akts{fill:var(--voda)}
.zn-liniya{stroke:var(--fg)}
.zn-uzel{stroke:var(--voda)}
.zn-kontur{stroke:var(--fg)}
.zn-punktir{stroke:var(--voda)}
.zn-cherta{fill:var(--fg)}
.zn-segment{fill:var(--voda)}
.zn-shcheka{fill:var(--voda)}
.zn-yadro{fill:var(--fg)}
.zn-os{fill:var(--voda)}
.zn-ramka{stroke:var(--fg)}
.zn-dyra{fill:var(--fg)}

/* Сетка знаков: каждый в своей клетке, три размера в ряд. */
.znakosetka{display:grid;grid-template-columns:repeat(2,1fr);
gap:var(--s3);margin:var(--s3) 0}
@media (max-width:780px){.znakosetka{grid-template-columns:1fr}}
.kletka{border:var(--divider-width) solid var(--divider);border-radius:var(--radius-card);
overflow:hidden}
.kletka-pole{background:var(--bg);color:var(--fg);padding:14px 16px;
display:flex;align-items:flex-end;gap:var(--s4);flex-wrap:wrap;
min-height:100px}
.kletka-pole svg{display:block}
.kletka-tekst{padding:10px 14px;font-size:var(--t5);
border-top:var(--divider-width) solid var(--divider)}
.kletka-tekst b{font-size:var(--t4)}
.otkuda{color:var(--dim)}

/* Ряд «все знаки разом» — проверка вкладки и силуэта. */
.stroi{display:flex;flex-wrap:wrap;gap:16px;align-items:center;
padding:14px 16px;border-radius:var(--radius-card);margin:0 0 6px;
background:var(--bg);color:var(--fg);border:var(--divider-width) solid var(--divider)}
.stroi svg{display:block}

/* --- Композиция системы --------------------------------------
   Владелец 2026-09-22: «палитры не вижу… мне нужна композиция,
   чтобы оценить». Одна и та же вёрстка страницы повторяется
   в каждой системе, а системы заданы переопределением токенов
   на обёртке: те же переменные, тот же CSS компонентов. */
.pal{border:var(--divider-width) solid var(--divider);border-radius:var(--radius-card);
overflow:hidden;background:var(--bg);color:var(--fg);margin:0 0 6px}
.pal-shapka{background:var(--card);border-bottom:var(--divider-width) solid var(--divider);
padding:9px 14px;font-weight:700;font-size:var(--t4);
display:flex;gap:9px;align-items:center}
.pal-shapka span{color:var(--dim);font-weight:400}
.pal-shapka svg{display:block;flex:none}
.pal-telo{padding:14px}
.pal-telo h4{margin:0 0 6px;font-size:var(--t2)}
.pal-telo p{margin:0 0 8px}
.pal-karta{background:var(--card);border:var(--divider-width) solid var(--divider);
border-radius:var(--radius-control);padding:11px 13px;margin:9px 0}
.pal-kn{display:inline-block;background:var(--voda);color:var(--nakn);
border-radius:var(--radius-control);padding:8px 15px;font-weight:600;
font-size:var(--t4)}
.pal-tikho{color:var(--dim);font-size:var(--t5)}
.pal-da{color:var(--ok);font-weight:600}
.pal-net{color:var(--bad);font-weight:600}
.metka{display:inline-block;width:1.1em;text-align:center}
.pal-tabl{width:100%;font-size:var(--t5);border-collapse:collapse;
margin:9px 0}
.pal-tabl td{padding:2px 6px;border:0;color:var(--dim)}
.pal-tabl td:first-child{color:var(--fg)}
.pal-tabl td:not(:first-child){text-align:right}
.pal-polosa{height:7px;border-radius:4px;background:var(--divider);
overflow:hidden;margin:9px 0}
.pal-polosa i{display:block;height:100%;width:62%;background:var(--voda)}
.pal-ssyl{color:var(--voda);text-decoration:underline}
.para{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media (max-width:700px){.para{grid-template-columns:1fr}}

/* --- Все палитры, которые предлагались ----------------------
   Владелец 2026-09-22: «покажи мне все». Каждая попытка
   заменяла предыдущую, и сравнить их разом было негде. Здесь
   они стоят рядом, включая отвергнутые: отвергнутый вариант
   нужен, чтобы видеть, ОТ ЧЕГО ушли.

   Токены названы своими словами (`--земля`, `--вода`) нарочно:
   цвет, у которого есть имя, труднее поставить не туда.

   Каждая задана полностью — светлой или тёмной, — включая
   нынешнюю: иначе в тёмной теме часть кандидатов сравнивалась
   бы с другой темой, и сравнение ничего не значило бы. */

/* Мои: первая и вторая попытки */
.p-seichas{--bg:#fbfaf8;--fg:#232021;--dim:#6b6560;--line:#e2ddd6;
--card:#fff;--ok:#2f6b3a;--bad:#8c2f2f;--zemlya:#2f6b3a;--voda:#4a4441;
--vozdukh:#f3f0ec;--nakn:#fbfaf8}
.p-sinka{--bg:#f1f5fa;--fg:#12243d;--dim:#5b7188;--line:#ccdaea;
--card:#fff;--ok:#1f6b4f;--bad:#a32f2f;--zemlya:#1f6b4f;--voda:#1b3a6b;
--vozdukh:#e3ecf6;--nakn:#fff}
.p-kalka{--bg:#f3ece0;--fg:#20242a;--dim:#6f6a60;--line:#ded3c2;
--card:#fdfaf4;--ok:#2f6b3a;--bad:#a32f2f;--zemlya:#2f6b3a;
--voda:#1f3b57;--vozdukh:#eee5d6;--nakn:#fdfaf4}
.p-geodeziya{--bg:#fafaf9;--fg:#18181b;--dim:#6b6b70;--line:#e3e3e0;
--card:#fff;--ok:#2f6b3a;--bad:#a32f2f;--zemlya:#2f6b3a;--voda:#f26722;
--vozdukh:#f4f4f2;--nakn:#fff}
.p-ekran{--bg:#0e1216;--fg:#e6edf3;--dim:#8b9aa7;--line:#26303a;
--card:#161c23;--ok:#4ade80;--bad:#f87171;--zemlya:#4ade80;
--voda:#00c2d1;--vozdukh:#0e1216;--nakn:#06131a}
.p-karta{--bg:#f7f7f4;--fg:#1f2328;--dim:#6a7178;--line:#e1e2dd;
--card:#fff;--ok:#3d7a4f;--bad:#a8342f;--zemlya:#3d7a4f;--voda:#2b6cb0;
--vozdukh:#eaf1f7;--nakn:#fff}
.p-snimok{--bg:#0f1417;--fg:#e7eef2;--dim:#8d9aa3;--line:#243038;
--card:#161d22;--ok:#63b57d;--bad:#e8776f;--zemlya:#5da271;
--voda:#4c9be8;--vozdukh:#0f1417;--nakn:#08161f}
.p-plotnaya{--bg:#ffffff;--fg:#14181d;--dim:#667080;--line:#dfe4ea;
--card:#fbfcfd;--ok:#009f44;--bad:#a8342f;--zemlya:#009f44;
--voda:#2a5fa2;--vozdukh:#eef4fa;--nakn:#fff}

/* Из трёх сторонних ответов */
.p-model{--bg:#16181c;--fg:#e6e6e6;--dim:#8a9099;--line:#262a31;
--card:#1c1f25;--ok:#4c8dff;--bad:#ff8a1f;--zemlya:#4c8dff;
--voda:#3fc6e8;--vozdukh:#16181c;--nakn:#0b1216}
.p-list{--bg:#fafaf7;--fg:#1a1a1a;--dim:#6b6b66;--line:#e4e2db;
--card:#ffffff;--ok:#3a8a3a;--bad:#e0452b;--zemlya:#8b5a2b;
--voda:#0072bc;--vozdukh:#eef3f8;--nakn:#ffffff}
.p-chislo{--bg:#fafafb;--fg:#17181b;--dim:#6c7076;--line:#e3e5e8;
--card:#ffffff;--ok:#1f4fd1;--bad:#f07a12;--zemlya:#1f4fd1;
--voda:#1f4fd1;--vozdukh:#eef1fa;--nakn:#ffffff}
.p-grafit{--bg:#181a1f;--fg:#e2e8f0;--dim:#8892a0;--line:#282c34;
--card:#1e2227;--ok:#00e5ff;--bad:#ff6b00;--zemlya:#00e5ff;
--voda:#00e5ff;--vozdukh:#181a1f;--nakn:#06131a}
.p-slanets{--bg:#111827;--fg:#e6edf3;--dim:#8b96a8;--line:#1f2937;
--card:#172033;--ok:#10b981;--bad:#ef4444;--zemlya:#10b981;
--voda:#38bdf8;--vozdukh:#111827;--nakn:#04121c}
.p-fosfor{--bg:#1e2228;--fg:#ffffff;--dim:#8d959f;--line:#2b3038;
--card:#242931;--ok:#39ff14;--bad:#ff5500;--zemlya:#39ff14;
--voda:#39ff14;--vozdukh:#1e2228;--nakn:#0d1408}

/* Нейтральные поля для рядов знаков: светлое и тёмное.
   Силуэт сравнивается на одном фоне, иначе сравниваются фоны. */
.pole-svet{--bg:#fbfbfa;--fg:#1c1f23;--line:#e4e4e0;--card:#fff;
--zemlya:#3d7a4f;--voda:#2b6cb0;--vozdukh:#eaf1f7;--ok:#2f6b3a;
--bad:#8c2f2f;--dim:#6b7076;--nakn:#fff}
.pole-tma{--bg:#15181c;--fg:#e8ecef;--line:#272c33;--card:#1b1f25;
--zemlya:#5da271;--voda:#4c9be8;--vozdukh:#15181c;--ok:#4c8dff;
--bad:#ff8a1f;--dim:#8a9099;--nakn:#0b1216}

/* Логотипы: ряд вариантов, каждый в трёх размерах и в своей
   палитре — знак вне своего поля не оценивается. */
.logo{display:flex;align-items:flex-end;gap:var(--s4);flex-wrap:wrap;
margin:0 0 var(--s2);min-height:40px}
.logo svg{display:block}
.logo-pole{background:var(--bg);color:var(--fg);padding:16px 18px;
border-radius:var(--radius-control);border:var(--divider-width) solid var(--divider)}

/* До выбора системы знак берёт значения по умолчанию —
   это видно и это честно. */
.istoriya{--zemlya:#3d7a4f;--voda:#2b6cb0;--vozdukh:#eaf1f7;--nakn:#fff}

/* --- Печать с фоном ------------------------------------------
   Разборщик 2026-09-22: «PDF распечатан без фоновых цветов,
   поэтому все тёмные палитры отрисованы на белом… палитры
   по этому файлу оценить нельзя».
   Точное попадание и наша вина: страница про цвет обязана
   печататься в цвете. Браузер по умолчанию фон не печатает,
   и просить человека лезть в «Дополнительно» — то же самое,
   что просить его набирать адрес руками. */
@media print{
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .znakosetka{grid-template-columns:repeat(2,1fr)}
  .para{grid-template-columns:1fr 1fr}
  details{display:block}
  details>summary{display:none}
}

/* --- Система ролей -------------------------------------------
   Разборщик 2026-09-22 нашёл три поломки, общие ВСЕМ четырнадцати
   палитрам, и все три — про роли, а не про оттенки:

   1. цвет «сверено» совпадает с цветом кнопки, и состояние
      читается как ссылка;
   2. **кнопка громче числа** — самое насыщенное пятно на экране
      «Записать в формат», а «3355» идёт обычным текстом. Если
      лицо продукта это число потерь, палитра ведёт взгляд не туда;
   3. оранжевый не может быть одновременно действием и потерей.

   Отсюда правило: цвет закреплён за РОЛЬЮ, а не за настроением.
   Синий только «сверено», оранжевый только «потеряется», кнопка
   без цвета вовсе. Тогда единственные цветные пятна на экране —
   это состояния данных, и глаз идёт к числу. */
.rol{--bg:#fafaf7;--fg:#1a1a1a;--dim:#6b6b6b;--line:#e4e2db;
--card:#fff;--svereno:#1f4fd1;--poterya:#f07a12;--nakn:#fff}
.rol-tma{--bg:#16181c;--fg:#e6e6e6;--dim:#9aa0a6;--line:#262a31;
--card:#1c1f25;--svereno:#4c8dff;--poterya:#ff8a1f;--nakn:#16181c}
.rol{background:var(--bg);color:var(--fg);border:var(--divider-width) solid var(--divider);
border-radius:var(--radius-card);overflow:hidden;margin:0 0 6px}
.rol .shap{background:var(--card);border-bottom:var(--divider-width) solid var(--divider);
padding:9px 14px;font-weight:700;font-size:var(--t4);display:flex;
gap:9px;align-items:center}
.rol .shap span{color:var(--dim);font-weight:400}
.rol .shap svg{display:block;flex:none}
.rol .telo{padding:15px 16px}
.rol h4{margin:0 0 4px;font-size:var(--t2)}
.rol p{margin:0 0 9px}
.rol .tikho{color:var(--dim);font-size:var(--t5)}
.rol .karta{background:var(--card);border:var(--divider-width) solid var(--divider);
border-radius:var(--radius-control);padding:12px 14px;margin:10px 0}
.rol .karta b{font-size:var(--t4)}

/* Число потерь — самое крупное на экране. Не «выделено цветом»,
   а набрано крупнее заголовка карточки: это и есть лицо продукта. */
.poterya-chislo{font-family:var(--mono);font-variant-numeric:
tabular-nums slashed-zero;font-size:26px;line-height:1.15;
font-weight:700;color:var(--poterya);display:block;margin:4px 0 2px}
.svereno-stroka{color:var(--svereno);font-weight:600}
.rol .metka{display:inline-block;width:1.15em;text-align:center}

/* Кнопка без цвета: тушь на светлом, светлая на тёмном.
   Действие не соревнуется с данными за внимание. */
.kn-tush{display:inline-block;background:var(--fg);color:var(--bg);
border-radius:var(--radius-control);padding:9px 16px;font-weight:600;
font-size:var(--t4)}
.rol .ssyl{color:var(--fg);text-decoration:underline}
.rol .polosa{height:7px;border-radius:4px;background:var(--divider);
overflow:hidden;margin:10px 0}
.rol .polosa i{display:block;height:100%;width:62%;background:var(--dim)}
.rol table{width:100%;font-size:var(--t5);border-collapse:collapse;
margin:10px 0}
.rol table td{padding:2px 6px;border:0;color:var(--dim);
font-family:var(--mono)}
.rol table td:first-child{color:var(--fg);font-family:inherit}
.rol table td:not(:first-child){text-align:right}

/* Голосование четырёх разборов. */
.golosa td:not(:first-child){text-align:center}
.za{color:var(--ok);font-weight:700}
.protiv{color:var(--dim)}

td.melkoznak{width:24px;text-align:center;padding:2px 6px}
td.melkoznak svg{display:inline-block;vertical-align:middle}

/* --- Идеи графикой -------------------------------------------
   Владелец 2026-09-22: «покажи идеи графикой». До этого идеи были
   списком имён, а знаки — отдельно от смысла. Схема рисует саму
   идею НАШИМИ числами, знак рядом — то, что из неё выросло. */
.istoriya{--svereno:#1f4fd1;--poterya:#f07a12}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .istoriya{
--svereno:#4c8dff;--poterya:#ff8a1f}}
:root[data-theme=dark] .istoriya{--svereno:#4c8dff;--poterya:#ff8a1f}

.ideya{border:var(--divider-width) solid var(--divider);border-radius:var(--radius-card);
background:var(--card);padding:16px 18px;margin:0 0 var(--s3)}
.ideya h3{margin:0 0 2px;font-size:var(--t2)}
.ideya .sut{color:var(--dim);font-size:var(--t4);margin:0 0 var(--s3)}
.ideya .niz{display:flex;align-items:center;gap:var(--s4);
flex-wrap:wrap;margin-top:var(--s3);padding-top:var(--s3);
border-top:var(--divider-width) solid var(--divider)}
.ideya .niz svg{display:block}
.ideya .niz p{margin:0;flex:1 1 260px;font-size:var(--t5);
color:var(--dim)}
svg.skh{display:block;width:100%;height:auto;max-width:420px;
margin:0 0 var(--s2)}
.skh-telo{fill:var(--fg)}
.skh-sin{fill:var(--svereno)}
.skh-akts{fill:var(--poterya)}
.skh-ram{fill:none;stroke:var(--fg);stroke-width:2.4}
.skh-lin{fill:none;stroke:var(--dim);stroke-width:1.6}
.skh-lin-tol{fill:none;stroke:var(--fg);stroke-width:3}
.skh-pod{fill:var(--dim);font-size:11px;
font-family:system-ui,"Segoe UI",Roboto,sans-serif}
.skh-chis{fill:var(--fg);font-family:var(--mono);font-size:16px;
font-weight:700;font-variant-numeric:tabular-nums slashed-zero}
.skh-chis-akts{fill:var(--poterya);font-family:var(--mono);font-size:16px;
font-weight:700;font-variant-numeric:tabular-nums slashed-zero}
.semya{margin:var(--s5) 0 var(--s3)}
.semya h2{margin:0 0 2px}
.semya p{margin:0;color:var(--dim);font-size:var(--t4)}

.zn-akts-liniya{stroke:var(--poterya)}

.crs-kandidat{font-size:13.5px}
.crs-kandidat b{min-width:0}
.crs-kandidat .znak{display:inline-block;border:var(--divider-width) solid var(--divider);
border-radius:20px;padding:1px 8px;margin-right:6px;font-size:11.5px;
color:var(--text-secondary)}
.crs-kandidat .znak.tekst{border-color:var(--ok);color:var(--ok)}
.crs-poisk{display:flex;gap:6px;margin:8px 0}
.crs-poisk input[type=text]{flex:1 1 auto;padding:7px 10px;
border:1px solid var(--border-input);border-radius:7px;font:inherit}
.crs-poisk button{margin:0;border:1.5px solid var(--text);border-radius:7px;
background:transparent;padding:7px 12px;font:inherit;cursor:pointer}
.crs-karta-obertka{margin:8px 0}
.crs-karta{background:var(--card);border:var(--divider-width) solid var(--divider);
border-radius:var(--radius-control);max-width:100%;height:auto}
.crs-karta-fon{fill:var(--bg)}
.crs-karta-setka{stroke:var(--divider);stroke-width:.5}
.crs-karta-os{stroke:var(--text-secondary);stroke-width:.8}
.crs-karta-podpis{font-size:6px;fill:var(--text-secondary)}
.crs-karta-oblast{fill:var(--text);fill-opacity:.5;
stroke:var(--text);stroke-width:1}

.skhema-lab{margin:var(--s3) 0}
/* No padding on `.skhema-grid` itself: an absolutely positioned child
   (the SVG) is placed relative to the PADDING box, not the content
   box, so any padding here would shift the SVG's origin away from
   where the grid's own tracks start -- the breathing room lives on
   the WRAPPER instead, where pixel correspondence does not matter. */
.raskladka-skhema{padding:16px;overflow-x:auto}
.skhema-grid{display:grid;position:relative}
.skhema-svg{position:absolute;inset:0;width:100%;height:100%;
pointer-events:none;overflow:visible}
.gc-full{grid-column:1/-1}
.uzel{grid-row-end:span 1;background:var(--card);
border:var(--divider-width) solid var(--divider);border-radius:var(--radius-control);
padding:6px 8px;font-size:12.5px;line-height:1.3;z-index:1;overflow:hidden}
.uzel b{display:block;font-size:12px;overflow-wrap:anywhere}
.uzel span{color:var(--text-secondary);font-size:11px}
.uzel.uzel-off{opacity:.55;border-style:dashed}
.uzel label{display:flex;gap:5px;align-items:flex-start;margin:0 0 3px;
font-size:11px;cursor:pointer}
.uzel input[type=checkbox]{margin:2px 0 0}
.uzel-prichina{font-size:10.5px;color:var(--warn)}
/* Every link is a THIN line of constant width -- the object count is
   read off the LABEL next to it, not off how fat the line is drawn
   (orchestrator review, 2026-09-28: a width that grew with the count,
   up to 8 px, read as a bus bar, not a line). Rounded joins/caps make
   the routed corners (`schemalayout._rounded_path`) read as one
   continuous line rather than a stack of right angles. */
.svyaz{fill:none;stroke:var(--text-secondary);stroke-linejoin:round;
stroke-linecap:round}
.svyaz-poterya{stroke:var(--warn)}
.svyaz-off{stroke-dasharray:4 4;opacity:.55}
.svyaz-chislo{fill:var(--text-secondary);font-size:11px}
.port{fill:var(--card);stroke:var(--text-secondary);stroke-width:1.5}
.port-off{stroke-dasharray:2 2}
/* The file card lives INSIDE the grid now (`.gc-full`, one row, full
   width) so its links land on real, shared coordinates -- it used to
   be a plain div ABOVE the grid, on no coordinate system the SVG
   could reach, and that is why it read as unconnected (same review). */
.uzel.fayl{border-width:calc(var(--divider-width) + 1px)}
.uzel.fayl b{font-size:14.5px}
.panel-skhemy{margin-top:var(--s3)}
@media (min-width:1024px){.raskladka-etapy{display:none}}
@media (max-width:1023px){.raskladka-skhema{display:none}}
.gc1{grid-column-start:1}
.gc2{grid-column-start:2}
.gc3{grid-column-start:3}
.gc4{grid-column-start:4}
.gc5{grid-column-start:5}
.gc6{grid-column-start:6}
.gc7{grid-column-start:7}
.gc8{grid-column-start:8}
.gc9{grid-column-start:9}
.gc10{grid-column-start:10}
.gc11{grid-column-start:11}
.gc12{grid-column-start:12}
.gc13{grid-column-start:13}
.gc14{grid-column-start:14}
.gc15{grid-column-start:15}
.gc16{grid-column-start:16}
.gc17{grid-column-start:17}
.gc18{grid-column-start:18}
.gc19{grid-column-start:19}
.gc20{grid-column-start:20}
.gc21{grid-column-start:21}
.gc22{grid-column-start:22}
.gc23{grid-column-start:23}
.gc24{grid-column-start:24}
.gc25{grid-column-start:25}
.gc26{grid-column-start:26}
.gc27{grid-column-start:27}
.gc28{grid-column-start:28}
.gc29{grid-column-start:29}
.gc30{grid-column-start:30}
.gc31{grid-column-start:31}
.gc32{grid-column-start:32}
.gc33{grid-column-start:33}
.gc34{grid-column-start:34}
.gc35{grid-column-start:35}
.gc36{grid-column-start:36}
.gc37{grid-column-start:37}
.gc38{grid-column-start:38}
.gc39{grid-column-start:39}
.gc40{grid-column-start:40}
.gc41{grid-column-start:41}
.gc42{grid-column-start:42}
.gc43{grid-column-start:43}
.gc44{grid-column-start:44}
.gc45{grid-column-start:45}
.gc46{grid-column-start:46}
.gc47{grid-column-start:47}
.gc48{grid-column-start:48}
.gc49{grid-column-start:49}
.gc50{grid-column-start:50}
.gc51{grid-column-start:51}
.gc52{grid-column-start:52}
.gc53{grid-column-start:53}
.gc54{grid-column-start:54}
.gc55{grid-column-start:55}
.gc56{grid-column-start:56}
.gc57{grid-column-start:57}
.gc58{grid-column-start:58}
.gc59{grid-column-start:59}
.gc60{grid-column-start:60}
.gr1{grid-row-start:1}
.gr2{grid-row-start:2}
.gr3{grid-row-start:3}
.gr4{grid-row-start:4}
.gr5{grid-row-start:5}
.gr6{grid-row-start:6}
.gr7{grid-row-start:7}
.gr8{grid-row-start:8}
.gr9{grid-row-start:9}
.gr10{grid-row-start:10}
.gr11{grid-row-start:11}
.gr12{grid-row-start:12}
.gr13{grid-row-start:13}
.gr14{grid-row-start:14}
.gr15{grid-row-start:15}
.gr16{grid-row-start:16}
.gr17{grid-row-start:17}
.gr18{grid-row-start:18}
.gr19{grid-row-start:19}
.gr20{grid-row-start:20}
.gr21{grid-row-start:21}
.gr22{grid-row-start:22}
.gr23{grid-row-start:23}
.gr24{grid-row-start:24}
.gr25{grid-row-start:25}
.gr26{grid-row-start:26}
.gr27{grid-row-start:27}
.gr28{grid-row-start:28}
.gr29{grid-row-start:29}
.gr30{grid-row-start:30}
.gr31{grid-row-start:31}
.gr32{grid-row-start:32}
.gr33{grid-row-start:33}
.gr34{grid-row-start:34}
.gr35{grid-row-start:35}
.gr36{grid-row-start:36}
.gr37{grid-row-start:37}
.gr38{grid-row-start:38}
.gr39{grid-row-start:39}
.gr40{grid-row-start:40}
.cols1{grid-template-columns:repeat(1,104px);column-gap:16px}
.cols2{grid-template-columns:repeat(2,104px);column-gap:16px}
.cols3{grid-template-columns:repeat(3,104px);column-gap:16px}
.cols4{grid-template-columns:repeat(4,104px);column-gap:16px}
.cols5{grid-template-columns:repeat(5,104px);column-gap:16px}
.cols6{grid-template-columns:repeat(6,104px);column-gap:16px}
.cols7{grid-template-columns:repeat(7,104px);column-gap:16px}
.cols8{grid-template-columns:repeat(8,104px);column-gap:16px}
.cols9{grid-template-columns:repeat(9,104px);column-gap:16px}
.cols10{grid-template-columns:repeat(10,104px);column-gap:16px}
.cols11{grid-template-columns:repeat(11,104px);column-gap:16px}
.cols12{grid-template-columns:repeat(12,104px);column-gap:16px}
.cols13{grid-template-columns:repeat(13,104px);column-gap:16px}
.cols14{grid-template-columns:repeat(14,104px);column-gap:16px}
.cols15{grid-template-columns:repeat(15,104px);column-gap:16px}
.cols16{grid-template-columns:repeat(16,104px);column-gap:16px}
.cols17{grid-template-columns:repeat(17,104px);column-gap:16px}
.cols18{grid-template-columns:repeat(18,104px);column-gap:16px}
.cols19{grid-template-columns:repeat(19,104px);column-gap:16px}
.cols20{grid-template-columns:repeat(20,104px);column-gap:16px}
.cols21{grid-template-columns:repeat(21,104px);column-gap:16px}
.cols22{grid-template-columns:repeat(22,104px);column-gap:16px}
.cols23{grid-template-columns:repeat(23,104px);column-gap:16px}
.cols24{grid-template-columns:repeat(24,104px);column-gap:16px}
.cols25{grid-template-columns:repeat(25,104px);column-gap:16px}
.cols26{grid-template-columns:repeat(26,104px);column-gap:16px}
.cols27{grid-template-columns:repeat(27,104px);column-gap:16px}
.cols28{grid-template-columns:repeat(28,104px);column-gap:16px}
.cols29{grid-template-columns:repeat(29,104px);column-gap:16px}
.cols30{grid-template-columns:repeat(30,104px);column-gap:16px}
.cols31{grid-template-columns:repeat(31,104px);column-gap:16px}
.cols32{grid-template-columns:repeat(32,104px);column-gap:16px}
.cols33{grid-template-columns:repeat(33,104px);column-gap:16px}
.cols34{grid-template-columns:repeat(34,104px);column-gap:16px}
.cols35{grid-template-columns:repeat(35,104px);column-gap:16px}
.cols36{grid-template-columns:repeat(36,104px);column-gap:16px}
.cols37{grid-template-columns:repeat(37,104px);column-gap:16px}
.cols38{grid-template-columns:repeat(38,104px);column-gap:16px}
.cols39{grid-template-columns:repeat(39,104px);column-gap:16px}
.cols40{grid-template-columns:repeat(40,104px);column-gap:16px}
.cols41{grid-template-columns:repeat(41,104px);column-gap:16px}
.cols42{grid-template-columns:repeat(42,104px);column-gap:16px}
.cols43{grid-template-columns:repeat(43,104px);column-gap:16px}
.cols44{grid-template-columns:repeat(44,104px);column-gap:16px}
.cols45{grid-template-columns:repeat(45,104px);column-gap:16px}
.cols46{grid-template-columns:repeat(46,104px);column-gap:16px}
.cols47{grid-template-columns:repeat(47,104px);column-gap:16px}
.cols48{grid-template-columns:repeat(48,104px);column-gap:16px}
.cols49{grid-template-columns:repeat(49,104px);column-gap:16px}
.cols50{grid-template-columns:repeat(50,104px);column-gap:16px}
.cols51{grid-template-columns:repeat(51,104px);column-gap:16px}
.cols52{grid-template-columns:repeat(52,104px);column-gap:16px}
.cols53{grid-template-columns:repeat(53,104px);column-gap:16px}
.cols54{grid-template-columns:repeat(54,104px);column-gap:16px}
.cols55{grid-template-columns:repeat(55,104px);column-gap:16px}
.cols56{grid-template-columns:repeat(56,104px);column-gap:16px}
.cols57{grid-template-columns:repeat(57,104px);column-gap:16px}
.cols58{grid-template-columns:repeat(58,104px);column-gap:16px}
.cols59{grid-template-columns:repeat(59,104px);column-gap:16px}
.cols60{grid-template-columns:repeat(60,104px);column-gap:16px}
.rows1{grid-template-rows:repeat(1,96px);row-gap:28px}
.rows2{grid-template-rows:repeat(2,96px);row-gap:28px}
.rows3{grid-template-rows:repeat(3,96px);row-gap:28px}
.rows4{grid-template-rows:repeat(4,96px);row-gap:28px}
.rows5{grid-template-rows:repeat(5,96px);row-gap:28px}
.rows6{grid-template-rows:repeat(6,96px);row-gap:28px}
.rows7{grid-template-rows:repeat(7,96px);row-gap:28px}
.rows8{grid-template-rows:repeat(8,96px);row-gap:28px}
.rows9{grid-template-rows:repeat(9,96px);row-gap:28px}
.rows10{grid-template-rows:repeat(10,96px);row-gap:28px}
.rows11{grid-template-rows:repeat(11,96px);row-gap:28px}
.rows12{grid-template-rows:repeat(12,96px);row-gap:28px}
.rows13{grid-template-rows:repeat(13,96px);row-gap:28px}
.rows14{grid-template-rows:repeat(14,96px);row-gap:28px}
.rows15{grid-template-rows:repeat(15,96px);row-gap:28px}
.rows16{grid-template-rows:repeat(16,96px);row-gap:28px}
.rows17{grid-template-rows:repeat(17,96px);row-gap:28px}
.rows18{grid-template-rows:repeat(18,96px);row-gap:28px}
.rows19{grid-template-rows:repeat(19,96px);row-gap:28px}
.rows20{grid-template-rows:repeat(20,96px);row-gap:28px}
.rows21{grid-template-rows:repeat(21,96px);row-gap:28px}
.rows22{grid-template-rows:repeat(22,96px);row-gap:28px}
.rows23{grid-template-rows:repeat(23,96px);row-gap:28px}
.rows24{grid-template-rows:repeat(24,96px);row-gap:28px}
.rows25{grid-template-rows:repeat(25,96px);row-gap:28px}
.rows26{grid-template-rows:repeat(26,96px);row-gap:28px}
.rows27{grid-template-rows:repeat(27,96px);row-gap:28px}
.rows28{grid-template-rows:repeat(28,96px);row-gap:28px}
.rows29{grid-template-rows:repeat(29,96px);row-gap:28px}
.rows30{grid-template-rows:repeat(30,96px);row-gap:28px}
.rows31{grid-template-rows:repeat(31,96px);row-gap:28px}
.rows32{grid-template-rows:repeat(32,96px);row-gap:28px}
.rows33{grid-template-rows:repeat(33,96px);row-gap:28px}
.rows34{grid-template-rows:repeat(34,96px);row-gap:28px}
.rows35{grid-template-rows:repeat(35,96px);row-gap:28px}
.rows36{grid-template-rows:repeat(36,96px);row-gap:28px}
.rows37{grid-template-rows:repeat(37,96px);row-gap:28px}
.rows38{grid-template-rows:repeat(38,96px);row-gap:28px}
.rows39{grid-template-rows:repeat(39,96px);row-gap:28px}
.rows40{grid-template-rows:repeat(40,96px);row-gap:28px}
/* The real engineering view (task U5), on top of `SCHEMA_CSS`: the
   node panel (`engineering._panel_sections`) is CSS-only, no script --
   every card title is `<a href="#panel-<id>">`, and `:target` shows
   exactly the section a person clicked, the no-JS answer to
   `shema-vertikal-4.pdf`'s node-panel item. */
.panel-skhemy{display:flex;flex-direction:column;gap:0}
.panel-item{display:none;padding:10px 0;border-top:var(--divider-width)
solid var(--divider);font-size:var(--t5)}
.panel-item:target{display:block}
.uzel a{color:inherit;text-decoration:none}
.uzel-etap{display:flex;align-items:baseline;gap:8px;padding:4px 0;
border-bottom:var(--divider-width) solid var(--divider);font-size:var(--t5)}
.uzel-etap .num{color:var(--text-secondary);font-size:12px}
.uzel-filtr{display:block;margin:0 0 var(--s2);font-size:var(--t5)}
.uzel-filtr input{margin-left:6px}
.chleny-gruppy{margin:2px 0 6px;font-size:11px;color:var(--text-secondary)}
.chleny-gruppy ul{margin:4px 0 0;padding-left:16px}

/* The «Простой» view (task U4b): «1 Файл · 2 Формат · 3 Результат»
   instead of the engineering rail. A computer shows only the CURRENT
   step (three screens, three round trips through the job's own
   address) -- a phone shows all three in one scroll, a done step
   collapsed to its summary line, a future one dashed (dictionary
   1.2). Both are ONE server response; the width alone decides which
   half of each block shows -- no script picks a state. */
.polosa-shagov{display:flex;flex-wrap:wrap;gap:8px;
font-size:var(--t5);color:var(--text-secondary);margin:0 0 var(--s4)}
/* Task U14 (brief item 1): three round pills, a number in a ring --
   same ring+mark motif the brand's step cards and the verification
   seal already use, so the chip strip reads as the same system, not
   a one-off. */
.shag{display:inline-flex;align-items:center;gap:7px;color:var(--text-secondary);
text-decoration:none;border:var(--divider-width) solid var(--divider);
border-radius:20px;padding:3px 13px 3px 3px}
.shag-nomer{display:inline-flex;align-items:center;justify-content:center;
width:22px;height:22px;border-radius:50%;border:2px solid var(--text-secondary);
font:600 12px var(--font-mono);flex:none}
/* A done step: the ring -- not the pill -- takes on ink, the same
   "passed" reading the landing's own rail uses for a visited stop. */
.shag-done{color:var(--text)}
.shag-done .shag-nomer{border-color:var(--text);color:var(--text)}
/* The current step: FILL, not outline -- a shape change, never colour
   alone (brand rule, task T1). The pill's own border still reads, the
   ring inside it inverts (ink fill, bg text) the same way the landing's
   `.rail-item.active .rail-marker` already does for "you are here". */
.shag-tekushchiy{color:var(--text);font-weight:600;border-color:var(--text)}
.shag-tekushchiy .shag-nomer{background:var(--text);border-color:var(--text);
color:var(--bg)}
.paso-current{}
.perekl-vida{font-size:var(--t5);margin:0 0 var(--s3)}
/* Task U14: the «Простой · Инженерный» switch as ONE pill (brief item
   1), not two loose words -- outline in ink, same radius a brand
   button already uses, the SELECTED half set in text colour and 600,
   the other a plain water link (water stays action-only). */
.pereklyuchatel{display:inline-flex;align-items:center;gap:6px;
border:var(--divider-width) solid var(--border-input);border-radius:20px;
padding:4px 14px;color:var(--text-secondary)}
.pereklyuchatel a{color:var(--water);text-decoration:none}
.pereklyuchatel-vybrano{color:var(--text);font-weight:600}
.prostoy-blok{margin:var(--s3) 0}
.prostoy-summary{display:none}
.prostoy-gruppa{font-size:13.5px;color:var(--text-secondary);
text-transform:uppercase;letter-spacing:.04em;margin:var(--s4) 0 var(--s1)}
.prostoy-itog-stroka{margin:0}
/* Task U14 (brief item 2, v5): the upload button and «Инженерный вид»
   share one row (GAP.md §1, "расположение по вертикали" -- the link
   sat on a line of its own, under the card, in v5 it sits next to the
   button). */
.prostoy-knopka-riad{display:flex;align-items:center;gap:var(--s3);
flex-wrap:wrap}
.prostoy-knopka-riad button{margin-top:0}
@media (min-width:701px){
  /* Three screens: only the step a person is ON exists on the page. */
  .prostoy-blok.paso-done,.prostoy-blok.paso-future{display:none}
}
@media (max-width:700px){
  /* One scrolling page: a finished step folds to its summary line,
     a future one is a dashed stub -- both stay in the SAME markup,
     this rule only swaps which half is visible. */
  .prostoy-blok.paso-done .prostoy-full{display:none}
  .prostoy-blok.paso-done .prostoy-summary{display:block}
  .prostoy-blok.paso-future{opacity:.5;border:1px dashed var(--divider);
  border-radius:var(--radius-card);padding:10px var(--s3)}
}