/* Тефтер — изглед по docs/IZGLED-KANON.md (с124, препис врз SISTEM-SINTEZA с123). Правила што ги чуваат тестовите (tests/test_izgled_kanon.py, test_izgled_kontrast.py): бои САМО како токени во :root · font-size САМО во rem · фокусот не се гаси. Ако додаваш CSS — додавај НАД правилото [hidden] на крајот. */ /* ── Фонтови: вградени (OFL, лиценците во fontovi/), променливи по тежина. Кирилица + латиница — латиницата ги покрива ë/ç (албански) и англиски. */ @font-face{ font-family:"Source Sans 3"; font-style:normal; font-weight:200 900; font-display:swap; src:url("fontovi/source-sans-3_cyrillic.woff2") format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{ font-family:"Source Sans 3"; font-style:normal; font-weight:200 900; font-display:swap; src:url("fontovi/source-sans-3_latin.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:"Playfair Display"; font-style:normal; font-weight:400 900; font-display:swap; src:url("fontovi/playfair-display_cyrillic.woff2") format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{ font-family:"Playfair Display"; font-style:normal; font-weight:400 900; font-display:swap; src:url("fontovi/playfair-display_latin.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} /* ── Токени (IZGLED-KANON §1) — светло. Темниот блок доаѓа под ист список имиња. */ :root{ /* лента (трите нивоа модул › категорија › ставка се ТРИ различни тона — тестот во test_doma.py чита еден токен по ред, остави ги вака) */ --side:#10233A; --side-ink:#EDE9DF; --side-dim:#8D99A8; --side-modul:#F2EFE6; --side-stavka:#93A0B0; --side-label:#BFA14A; /* површини и текст */ --ground:#F7F5EF; --panel:#FFFFFF; --zebra:#FAF8F2; --ink:#1C1A15; --ink2:#59554B; --tivko:#6B6760; --rule:#E3DFD4; --rule2:#CDC8BA; --pole:#8A8578; --gold:#9A7B3F; --act:#1F4E96; --btnP:#10233A; --btnP-ink:#FFFFFF; /* сигнали */ --ok:#1A7A3E; --ok-w:#E7F2EA; --warn:#8A5306; --warn-w:#F7EFDC; --crit:#B42323; --crit-w:#F8E9E9; --shadow:0 1px 2px rgba(28,26,21,.05), 0 12px 32px -24px rgba(28,26,21,.45); /* типографија (§1.2): скала во rem, минимум 12px */ --serif:"Playfair Display",Georgia,serif; --sans:"Source Sans 3","Helvetica Neue",Arial,sans-serif; --t1:.75rem; --t2:.8125rem; --t3:.875rem; --t4:1rem; --t5:1.25rem; --t6:1.625rem; /* простор (§1.3), агли */ --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --r-k:6px; --r-p:10px; --r-h:999px; /* печат: строг светол МОНОХРОМ без оглед на режимот — овие три ги нема во темниот блок, за печатот да остане ист од двата режима */ --p-ink:#000000; --p-hartija:#FFFFFF; --p-siva:#999999; /* природните контроли (календар, стрелки, лизгач) го следат режимот (прием K2) */ color-scheme:light; } /* ── Темен режим (П9, §1.1 темна колона) — „топло мастило“. Истиот список токени двапати: по prefers-color-scheme (без запаметен избор) и по изборот на корисникот (data-rezim на , tefter.js). Контраст-тестот ги мери ОБАТА блока. --p-* нема тука: печатот е светол МОНОХРОМ во секој режим. */ @media (prefers-color-scheme: dark){ :root:not([data-rezim="svetlo"]){ --ground:#1C1A15; --panel:#262219; --zebra:#2A261D; --ink:#EDE9DF; --ink2:#CFC8B8; --tivko:#A8A294; --rule:#3A352B; --rule2:#4A4438; --pole:#8C8676; --gold:#C9A961; --act:#8FB3E8; --btnP:#8FB3E8; --btnP-ink:#10233A; --ok:#72C28F; --ok-w:#1D3325; --warn:#E3B25A; --warn-w:#3A2E18; --crit:#F2877C; --crit-w:#3B211D; --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px -24px rgba(0,0,0,.7); color-scheme:dark; } } :root[data-rezim="temno"]{ --ground:#1C1A15; --panel:#262219; --zebra:#2A261D; --ink:#EDE9DF; --ink2:#CFC8B8; --tivko:#A8A294; --rule:#3A352B; --rule2:#4A4438; --pole:#8C8676; --gold:#C9A961; --act:#8FB3E8; --btnP:#8FB3E8; --btnP-ink:#10233A; --ok:#72C28F; --ok-w:#1D3325; --warn:#E3B25A; --warn-w:#3A2E18; --crit:#F2877C; --crit-w:#3B211D; --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px -24px rgba(0,0,0,.7); color-scheme:dark; } /* ── Базно */ *{box-sizing:border-box} html{scroll-padding-top:3rem; scroll-padding-bottom:3rem} /* Удобно: сè расте заедно (класата ја става tefter.js на ) */ html.udobno{font-size:112.5%} body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans); font-size:var(--t3); line-height:1.55} h1,h2{font-family:var(--serif); margin:0} .mono{font-family:ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums} /* линкови (§2): --act, без „посетено“; во табели и лента без подвлекување */ a{color:var(--act)} a:visited{color:var(--act)} .tbl a{text-decoration:none} :focus-visible{outline:2px solid var(--gold); outline-offset:2px} /* skip-линк: прв фокусабилен; невидлив додека не добие фокус */ .skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--panel); color:var(--ink); padding:10px 16px; border-radius:0 0 var(--r-k) 0; border:1px solid var(--rule2)} .skip:focus{left:0} /* текст само за читач */ .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0} /* движење: само боја/рамка, ≤120ms; при reduced-motion — ништо */ @media (prefers-reduced-motion: reduce){ *{transition-duration:0s !important; animation:none !important}} /* цели: контролите не паѓаат под 24px (2.5.8) — густината останува. Checkbox/radio се изземени: полето е мало по дизајн, целта ја носи етикетата. */ button, select, textarea, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), .btnG, .btnP, .btnL, .cip{min-height:24px} /* форм-контроли (прием K1): бојата и подлогата од токени — без правило прелистувачот дава црн текст врз --panel во темно (1,32:1). Чувар т.11. */ input, select, textarea{color:var(--ink); background:var(--panel)} /* заклучено поле носи податок, не украс (K5): WCAG го иззема disabled, но вредностите мора да се читаат — --ink2 врз --zebra, без проѕирност */ input:disabled, select:disabled, textarea:disabled{color:var(--ink2); background:var(--zebra); -webkit-text-fill-color:var(--ink2); opacity:1} /* преклопник светло/темно (K6): се гледа иконата на режимот ВО КОЈ се оди */ .rezim-ik-sonce{display:none} html[data-rezim="temno"] .rezim-ik-sonce{display:inline} html[data-rezim="temno"] .rezim-ik-mesechina{display:none} @media (prefers-color-scheme: dark){ html:not([data-rezim="svetlo"]) .rezim-ik-sonce{display:inline} html:not([data-rezim="svetlo"]) .rezim-ik-mesechina{display:none} } /* ── Лушпа и лента */ .shell{display:grid; grid-template-columns:224px minmax(0,1fr); min-height:100vh} .side{background:var(--side); color:var(--side-ink); padding:18px 12px; display:flex; flex-direction:column; min-height:0; /* во темно лентата е нијанса до подлогата — линијата ја дели (§1.1) */ border-right:1px solid rgba(255,255,255,.08)} .side .nav{position:relative; flex:1 1 auto; min-height:0; overflow-y:auto} .brand{display:flex; gap:10px; align-items:center; padding:4px 10px 18px; border-bottom:1px solid rgba(255,255,255,.09)} .brand .znak{flex:none} .znak-pagja{transform:translate(3.2px,-2.6px) rotate(6deg); transform-origin:24px 31.25px; animation:vknizi .55s cubic-bezier(.2,1.35,.4,1) 1 both} @keyframes vknizi{ from{transform:translate(12px,-11px) rotate(17deg); opacity:.35}} .brand-t b{display:block; font-family:var(--sans); font-weight:700; font-size:var(--t4); letter-spacing:-.015em} .brand-t i{font-style:normal; font-size:var(--t1); color:var(--side-dim); letter-spacing:.2em; text-transform:uppercase} .nav{display:flex; flex-direction:column; gap:2px; padding:14px 0} .nav-l{display:block; padding:7px 10px 7px 28px; border-radius:var(--r-k); color:var(--side-stavka); text-decoration:none; font-size:var(--t2); position:relative} .nav-l:hover{color:var(--side-ink); background:rgba(255,255,255,.05)} .nav-l::before{content:""; position:absolute; left:18px; top:50%; width:4px; height:1px; background:currentColor; opacity:.35} .nav-l[aria-current="true"]{color:var(--side-ink); background:rgba(255,255,255,.10); box-shadow:inset 2px 0 0 var(--side-label); font-weight:600} .nav-l[aria-current="true"]::before{opacity:0} .nav-doma{font-weight:700; color:var(--side-ink); padding-left:10px; font-size:var(--t3); margin-bottom:9px} .nav-doma::before, .nav-mod-naskoro::before{display:none} /* модул › подгрупа › ставка: три сигнали одеднаш — светлина, големина, структура */ .nav-mod{margin:2px 0 7px} .nav-mod>summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px; padding:10px 12px 9px 10px; border-radius:var(--r-k); color:var(--side-modul); font-size:var(--t3); font-weight:700; letter-spacing:.005em} .nav-mod>summary::-webkit-details-marker{display:none} .nav-mod>summary::after{content:"▾"; margin-left:auto; padding-left:14px; font-size:var(--t3); line-height:1; color:var(--side-label); transition:transform .12s} .nav-mod[open]>summary::after{transform:rotate(180deg)} .nav-mod>summary:hover{background:rgba(255,255,255,.06)} .nav-mod[open]>summary{background:rgba(255,255,255,.05)} .nav-mod[open]{background:rgba(255,255,255,.03); border-radius:9px; padding-bottom:7px; margin-bottom:11px} .nav-mod .nav-l{padding-left:28px} .nav-mod-naskoro{margin-bottom:7px; display:flex; justify-content:space-between; align-items:center; padding:9px 10px 9px 24px; font-size:var(--t2); font-weight:600; color:var(--side-dim); opacity:.65} .nav-mod-naskoro .nn-tag{margin-left:14px; font-size:var(--t1); letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--side-dim); border-radius:3px; padding:1px 5px} .nav-g, .nav-mod .nav-g{color:var(--side-label); font-size:var(--t1); font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:11px 10px 3px 18px; margin-top:3px; border-top:1px solid rgba(255,255,255,.07)} .nav-mod .nav-g:first-of-type{border-top:none; margin-top:0} .nav-pg{margin:0} .nav-pg>summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px; color:var(--side-label); font-size:var(--t1); font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:9px 12px 8px 18px; margin-top:3px; border-top:1px solid rgba(255,255,255,.07)} .nav-pg>summary::-webkit-details-marker{display:none} .nav-pg>summary::after{content:"▾"; margin-left:auto; padding-left:14px; font-size:var(--t2); line-height:1; letter-spacing:0; transition:transform .12s; opacity:.95} .nav-pg[open]>summary::after{transform:rotate(180deg)} .nav-pg>summary:hover{color:var(--side-label); background:rgba(255,255,255,.05)} .nav-pg[open]>summary{color:var(--side-label)} .nav-pg:has(.nav-l[aria-current="true"])>summary{color:var(--side-modul)} .nav-pg:first-of-type>summary{border-top:none; margin-top:0} .nav-pg .nav-l{padding-left:28px} /* заклучени модули: иста тежина, само побледи; кликот отвора избор на клиент */ .nav-mod-zakl{display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:none; background:transparent; cursor:pointer; font-family:inherit; color:var(--side-modul); font-size:var(--t3); font-weight:700; padding:10px 10px 9px; margin-bottom:7px; border-radius:var(--r-k)} .nav-mod-zakl:hover{background:rgba(255,255,255,.06)} /* фирма во лентата */ .nav-firma{margin:14px 0 4px; padding:10px 10px 8px; border-top:1px solid rgba(255,255,255,.09)} a.nav-firma{display:block; text-decoration:none; border-radius:var(--r-p)} a.nav-firma:hover{background:rgba(255,255,255,.06)} a.nav-firma:hover .nav-f-dej{color:var(--gold)} .nav-f-ime{font-family:var(--sans); font-size:var(--t4); font-weight:600; color:var(--side-ink); letter-spacing:-.01em; line-height:1.25; overflow-wrap:anywhere} .nav-f-dej{font-size:var(--t1); color:var(--side-dim); letter-spacing:.08em; text-transform:uppercase} .nav-firma-pre{margin:12px 2px 10px; border-top:1px solid rgba(255,255,255,.09); border-bottom:1px solid rgba(255,255,255,.09)} summary.nav-firma{list-style:none; cursor:pointer; display:flex; flex-direction:column; padding:10px 40px 9px 10px; position:relative; border-radius:var(--r-p)} summary.nav-firma::-webkit-details-marker{display:none} summary.nav-firma::after{content:"▾"; position:absolute; right:12px; top:13px; color:var(--side-label); font-size:var(--t4); line-height:1; transition:transform .12s} .nav-firma-pre[open] summary.nav-firma::after{transform:rotate(180deg)} summary.nav-firma:hover{background:rgba(255,255,255,.06)} .firmi-lista{position:relative; padding:2px 0 8px; max-height:230px; overflow:auto} .firmi-red{display:block; padding:7px 10px 7px 14px; font-size:var(--t1); color:var(--side-stavka); text-decoration:none; border-radius:var(--r-k)} .firmi-red:hover{background:rgba(255,255,255,.07); color:var(--side-modul)} .firmi-profil{margin:4px 4px 2px; padding:9px 10px; color:var(--side-modul); font-size:var(--t1); background:rgba(201,162,39,.12); border:1px solid rgba(201,162,39,.3)} .firmi-profil:hover{background:rgba(201,162,39,.2); color:var(--side-modul)} .firmi-naslov{padding:10px 10px 4px 14px; font-size:var(--t1); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--side-label); border-top:1px solid rgba(255,255,255,.08); margin-top:6px} .nov-klient{margin-top:auto; display:block; padding:11px 14px; font-size:var(--t2); color:var(--side-modul); text-decoration:none; border-top:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03)} .nov-klient:hover{background:rgba(217,180,74,.14); color:var(--side-modul)} .biro-podnozje{margin-top:auto; padding:12px 14px; border-top:1px solid rgba(255,255,255,.08); font-size:var(--t1); line-height:1.5} .biro-ime{font-weight:600; letter-spacing:.01em} .biro-korisnik{opacity:.62} .biro-odjava{margin-top:6px; background:none; border:1px solid rgba(255,255,255,.18); color:inherit; border-radius:var(--r-k); padding:3px 9px; font-size:var(--t1); cursor:pointer} .biro-odjava:hover{border-color:rgba(255,255,255,.4)} /* ── Горна лента, наслови */ .main{min-width:0} .top{display:flex; align-items:center; gap:10px; position:relative; padding:13px 26px; border-bottom:1px solid var(--rule)} .crumb{font-size:var(--t1); color:var(--ink2)} .crumb b{color:var(--ink)} .crumb-l{color:var(--ink2); text-decoration:none} .crumb-l:hover{color:var(--ink); text-decoration:underline} .crumb-tuka{color:var(--ink)} .scr{padding:24px 26px 70px; max-width:1220px; margin:0 auto} .hd{display:flex; align-items:baseline; gap:14px; margin-bottom:14px; flex-wrap:wrap} .hd h1{font-size:var(--t6)} .hd .sub{font-size:var(--t2); color:var(--ink2)} .hd .r{margin-left:auto} .baraj-kopce{margin-left:auto; display:flex; align-items:center; gap:7px; border:1px solid var(--rule); background:var(--panel); border-radius:var(--r-k); padding:5px 11px; font-size:var(--t1); color:var(--tivko); cursor:pointer; font-family:inherit} .baraj-kopce kbd{font-size:var(--t1); border:1px solid var(--rule); border-radius:4px; padding:1px 4px; color:var(--tivko)} .baraj-kopce:hover{border-color:var(--gold); color:var(--ink)} .kalk-kopce{margin-left:0; border:1px solid var(--rule); background:var(--panel); border-radius:var(--r-k); padding:4px 9px; font-size:var(--t4); cursor:pointer} .gustina-kopce{border:1px solid var(--rule); background:var(--panel); border-radius:var(--r-k); padding:5px 10px; font-size:var(--t1); cursor:pointer; color:var(--tivko); font-family:var(--serif)} .gustina-kopce:hover{border-color:var(--gold); color:var(--ink)} html.udobno .gustina-kopce{background:color-mix(in srgb, var(--gold) 12%, var(--panel)); border-color:var(--gold); color:var(--ink)} /* ── Картички и табели */ /* Г221 · T3 (прием с130, §2 Ниво т.26): скрол-контејнерот мора да е containing block. `.sr-only` е `position:absolute`; без позициониран предок неговиот containing block е корењот, па картичката со `overflow` НЕ го сече и статичното место (x≈824) ја шири страницата — Досие скролуваше 185 px на 640 од еден „избриши“ во ✕ на табелата. */ .card{position:relative; background:var(--panel); border:1px solid var(--rule); border-radius:var(--r-p); box-shadow:var(--shadow); overflow:auto; margin-bottom:14px} /* Г223 · U1 (прием с131, §2 Дијалог · §3 т.28): `` (ДДВ-разделба на Книжење) е во ГОРНИОТ слој — позицијата му ја дава прелистувачот (`dialog:modal{position:fixed}`). Авторското правило по класа го прегазува, а во горниот слој `relative` се сведува на `absolute`: по `showModal()` при скрол +300 px дијалогот бега со страницата (`top` 281 → −19, копчињата излегуваат од екранот; мерка 20.09: 9 од 10 типа дијалози `fixed`, само овој не). Враќаме САМО позиција — рамката, подлогата и `overflow` остануваат од `.card` (затоа не `.card:not(dialog)`: тоа би ја кренало специфичноста на целото правило). Калкулаторот (`dialog.kalk`) е именуван исклучок — се отвора со `show()`, не е модален. */ dialog.card{position:fixed} .card .ch{padding:13px 16px 11px; border-bottom:1px solid var(--rule)} .card .ch h2{font-size:var(--t4)} .ch-r{margin-left:auto; display:flex; gap:8px; align-items:center} .tbl{width:100%; border-collapse:collapse; font-size:var(--t2)} .tbl th{text-align:left; font-size:var(--t1); text-transform:uppercase; letter-spacing:.06em; color:var(--ink2); padding:9px 12px; border-bottom:1px solid var(--rule2); position:sticky; top:0; background:var(--panel); z-index:2} .tbl td{padding:9px 12px; border-bottom:1px solid var(--rule)} .tbl .c{text-align:center} .tbl th.c{text-align:center} .tbl td.c{text-align:center} .tbl .n{text-align:right} .tbl th.n{text-align:right} .tbl tr:nth-child(even) td{background:var(--zebra)} .tbl tr:hover td{background:color-mix(in srgb, var(--ink) 4%, var(--zebra))} tr.b-ok .rok{color:var(--ok)} tr.b-warn .rok{color:var(--warn); background:var(--warn-w)} tr.b-crit .rok{color:var(--crit); background:var(--crit-w); font-weight:600} tr.isklucok td{background:color-mix(in srgb, var(--gold) 7%, var(--panel))} tr.vkupno td{border-top:2px solid var(--ink); font-weight:600} tr.sivo td{color:var(--tivko)} .tbl tr.zbir td{border-top:2px solid var(--rule2)} .tbl tr.zbir-sint > td{background:var(--zebra); border-top:1px solid var(--rule2)} .tbl tr.zbir-klasa > td{background:var(--rule); border-top:2px solid var(--ink); border-bottom:1px solid var(--ink); letter-spacing:.02em} .tbl tr.storno td{font-style:italic} .tbl tr.storno td:first-child:before{content:"↺ "; color:var(--tivko)} /* ── Копчиња (§2): .btnP примарно · .btnG второстепено · .btnL линк-дејство */ .btnP{display:inline-block; background:var(--btnP); color:var(--btnP-ink); border:none; border-radius:var(--r-k); padding:9px 16px; font-weight:600; font-size:var(--t2); cursor:pointer; font-family:inherit; text-decoration:none} .btnP:hover{background:color-mix(in srgb, var(--btnP) 86%, var(--panel))} .btnG{background:var(--panel); color:var(--ink); border:1px solid var(--pole); border-radius:var(--r-k); padding:5px 10px; font-size:var(--t1); cursor:pointer; font-family:inherit; text-decoration:none} .btnG:hover{border-color:var(--ink2)} .btnL{display:inline-block; background:transparent; border:0; padding:4px 8px; font-size:var(--t1); color:var(--act); cursor:pointer; font-family:inherit; white-space:nowrap; text-decoration:none; border-radius:var(--r-k)} .btnL:hover{text-decoration:underline} .btnP, .btnG, .btnL, .cip{ transition:background-color .12s, border-color .12s, color .12s} .btnP:disabled, .btnG:disabled, .btnL:disabled{opacity:.55; cursor:default} /* чекање: „Се запишува…“ + aria-busy (tefter.js ја држи ширината фиксна) */ [aria-busy="true"]{cursor:progress; opacity:.8} .btnP.golem, .btnG.golem{font-size:var(--t4); padding:12px 22px} .inline{display:inline} /* Г218 · R1 (§1.3 Цели): ќелија со ПОВЕЌЕ дејства. Кога колоната се стесни (Досие: 250 → 205 px по видливите етикети од с128), копчињата се прелеваат во нов ред, а `.info>summary` носи margin:-.25rem за да не ја крева висината на редот — двете заедно ги преклопуваат целите од 24 px (axe target-size 2 на Досие и Досие-грешка). Затоа: вертикален ред со размак, а ⓘ останува до СВОЕТО копче и без негативната маргина. */ .dejstva{display:flex; flex-direction:column; align-items:flex-start; gap:var(--s2)} .dejstvo{display:inline-flex; align-items:center; gap:var(--s1)} .dejstva .info>summary{margin:0} .mini{width:90px; padding:4px 6px; border:1px solid var(--pole); border-radius:var(--r-k)} input.mini.n{text-align:right; font-variant-numeric:tabular-nums} /* ── Форми и пораки */ .forma{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px 14px; padding:14px 16px} .forma label{display:flex; flex-direction:column; gap:4px; font-size:var(--t1); color:var(--ink2)} .forma input, .forma textarea{padding:7px 9px; border:1px solid var(--pole); border-radius:var(--r-k); font:inherit} .forma select{padding:7px 9px; border:1px solid var(--pole); border-radius:var(--r-k); font:inherit; background:var(--panel)} .forma .cela{grid-column:1/-1} /* Г220 · S1 (прием Г218): во мрежата `flex-direction:column` го одвојува ⓘ во своја ќелија, а штиклата од својот збор. ⓘ оди во етикетата, до текстот; штикла + збор се ЕДЕН ред. */ /* Г221 · T2 (§2 Поле): ⓘ до етикетата, но НАДВОР од