/* ============================================================================
   ROBETA STUDIO · styles/ink.css
   F0 · korak 1 · SKIN "INK MONOLITH" · 13.8.2026

   ---------------------------------------------------------------------------
   ŽELEZNO PRAVILO
   VSAKO pravilo v tej datoteki se začne z html[data-skin="ink"].
   Brez tega atributa ta datoteka ne naredi ničesar.
   Razlog: demo in legacy uporabljata ISTE selektorje (.builder .funnel .kpi
   .chip .btn main .card .opt .tick .plate ...). Nescope-an skin bi takoj
   pokvaril privzeti videz.
   ---------------------------------------------------------------------------

   VRSTNI RED NALAGANJA
   reset.css -> tokens.css -> ink.css -> inline <style> blok (legacy).
   Legacy je torej ZADNJI in pri enaki specifičnosti zmaga. Zato ima vsako
   pravilo tu prefiks html[data-skin="ink"], ki specifičnost dvigne nad
   legacy (.card = 0,1,0 -> naše 0,2,1) ne glede na vrstni red.

   OBSEG F0 = OGRODJE
   rail/nav, masthead, papirne plošče, tabele, žigi, gumbi, drawer, toast,
   prijava, ukazna vrstica. Posamezni pogledi (dashboard, kanban, builder,
   konfigurator, CRM, cenik, pretvornik) pridejo v naslednjih valovih (F4).

   PLOSKOST
   V tej datoteki ni nobenega gradienta in nobene DODANE sence. Edini
   box-shadow / backdrop-filter deklaraciji sta z vrednostjo none in
   ODSTRANJUJETA sence, ki jih riše legacy blok (glej razdelek 12).
   ============================================================================ */


/* ==========================================================================
   1 · OSNOVA
   ========================================================================== */
html[data-skin="ink"],
html[data-skin="ink"] body{
  background:var(--shell);
  color:var(--shell-fg);
  font-family:var(--fB);
}
/* legacy index.html:308 riše radial-gradient pikčasto teksturo; --grid je v
   tokens.css nastavljen na transparent, tu še ozadje izrecno ugasnemo */
html[data-skin="ink"] body{background-image:none}

html[data-skin="ink"] ::selection{background:var(--gold);color:var(--plate-fg)}

html[data-skin="ink"] .serif{font-family:var(--fD)}
html[data-skin="ink"] .mono{font-family:var(--fM);font-variant-numeric:tabular-nums}

/* prehodi in dvigi iz legacy - INK MONOLITH se ne premika */
html[data-skin="ink"] .card:hover,
html[data-skin="ink"] .opt:hover,
html[data-skin="ink"] .cfgcard:hover,
html[data-skin="ink"] .bvcard:hover,
html[data-skin="ink"] .cfgrule:hover{transform:none}


/* ==========================================================================
   2 · RAIL · monolitni hrbet (demo .rail)
   ========================================================================== */
html[data-skin="ink"] .app{grid-template-columns:248px 1fr}

html[data-skin="ink"] aside{
  background:var(--rail-bg);
  color:var(--rail-fg);
  border-right:1px solid var(--rail-hair);
  padding:0;
}

html[data-skin="ink"] .logo{
  font-family:var(--fD);
  font-weight:600;
  font-size:22px;
  letter-spacing:.01em;
  color:var(--rail-fg);
  padding:24px 24px 16px;
  border-bottom:1px solid var(--rail-hair);
}
html[data-skin="ink"] .logo b{color:var(--rail-fg);font-weight:600}
html[data-skin="ink"] .logo small{
  font-family:var(--fM);
  font-weight:400;
  font-size:10px;
  letter-spacing:.34em;
  color:var(--gold);
  text-transform:uppercase;
  margin-top:4px;
}

/* demo .rail-nav: seznam se sam drsi, noga raila pa ostane prilepljena na dnu.
   Brez tega je pri nizkem oknu (<=1000px) vsota logo + 26 postavk + noga
   visja od 100vh in noga pade pod rob - se posebej odkar ji spodnji pas
   rezervira prostor za preklopnika. min-height:0 je nujen, ker flex postavka
   privzeto ne sme pod visino svoje vsebine in overflow zato ne bi ucinkoval. */
html[data-skin="ink"] nav{margin-top:0;padding:16px 0 8px;gap:0;min-height:0;overflow-y:auto}
html[data-skin="ink"] nav .sec{
  font-family:var(--fM);
  font-size:9px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--rail-fg2);
  padding:14px 24px 6px;
}
html[data-skin="ink"] nav .sec:first-child{padding-top:0}
/* demo .nav-sec .num: zlata mono številka poglavja pred naslovom sekcije */
html[data-skin="ink"] nav .sec .secnum{
  font-size:10px;
  color:var(--gold);
  letter-spacing:.06em;
  margin-right:4px;
}

html[data-skin="ink"] nav button{
  display:block;
  width:100%;
  text-align:left;
  padding:5px 16px 5px 51px;
  border-left:3px solid transparent;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--rail-fg2);
  background:none;
  transition:none;
}
/* demo nav nima ikon */
html[data-skin="ink"] nav button .ic{display:none}
html[data-skin="ink"] nav button:hover{background:none;color:var(--rail-fg)}
html[data-skin="ink"] nav button.on{
  background:none;
  color:var(--rail-fg);
  font-weight:600;
  border-left-color:var(--gold);
}

/* spodnji rob rezervira pas za preklopnika teme in skina (razdelek 13),
   ki sta fixed in bi sicer stala na vrstici uporabnika */
html[data-skin="ink"] .me{
  padding:16px 24px 62px;
  border-top:1px solid var(--rail-hair);
  margin-top:0;
}
html[data-skin="ink"] .me .av{
  background:none;
  border:1px solid var(--gold);
  color:var(--gold);
  font-family:var(--fM);
  font-weight:500;
  font-size:10px;
  width:28px;
  height:28px;
}
html[data-skin="ink"] .me div div{
  font-family:var(--fM) !important;
  font-size:10px !important;
  font-weight:400 !important;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--rail-fg);
}
html[data-skin="ink"] .me div small{
  font-family:var(--fM);
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--rail-fg2);
}
/* Odjava: dotikljiva tarča >= 24x24 (WCAG 2.5.8 AA).
   Izmerjeno pred popravkom: 12x23 px - najmanjša tarča v celi aplikaciji in,
   ker živi v ohišju, edina, ki je padla v VSEH 36 ocenjenih celicah merila C5
   (scripts/ink-visual/evidence/verify-rich.json, reach.touch_small).
   Gumb nosi `all:unset` v style atributu (index.html:555), inline pa premaga
   vsak avtorski selektor - zato !important. Prebijeta se samo geometrija in
   poravnava; barva, kazalec in velikost pisave ostanejo od inline stila, in
   znak ⏻ se ne poveča, samo dobi škatlo okoli sebe.
   Sprememba je pod ink skinom - legacy ostane bajtno enak. */
html[data-skin="ink"] .me > button{
  display:grid !important;
  place-items:center !important;
  min-width:24px !important;
  min-height:24px !important;
}


/* ==========================================================================
   2b · RAIL SKRIT PRIVZETO + GUMB ☰ ZA CELOZASLONSKI MENI
   val 1 prenove (16.8.2026). Rok: #home (razdeljen vstopni zaslon,
   views-ink/ink-view-home.js) in celozaslonski meni (views-ink/ink-view-
   menu.js) zdaj vodita navigacijo, rail jo podvaja. Rail zato POD INK
   PRIVZETO IZGINE - ostane v DOM (aside se še vedno izriše v boot(),
   $('nav').innerHTML se še vedno napolni - testi ga najdejo), skrije ga
   samo CSS spodaj. .app pade na eno samo vsebinsko kolono.

   ZASILNI IZHOD: html[data-skin="ink"][data-rail="1"] rail vrne. Atribut
   nastavi index.html bootstrap iz ?rail=1 v naslovu ali shranjene izbire
   localStorage 'robeta-rail' (isti vzorec kot 'robeta-skin' v bootstrapu
   nekaj vrstic višje v tej datoteki) - namenjen samo primeru, da bi meni
   kdaj odpovedal.

   Globalni iskalnik (.top .searchbox / #gsearch) s tem NI prizadet: živi v
   <main>, ne v <aside> (test 7A ink-skin.test.mjs). ========================= */
html[data-skin="ink"] .app{grid-template-columns:1fr}
html[data-skin="ink"] aside{display:none}
html[data-skin="ink"][data-rail="1"] .app{grid-template-columns:248px 1fr}
html[data-skin="ink"][data-rail="1"] aside{display:flex}

/* ☰ gumb (vstavljen v studio.js boot(), samo pod ink skinom) - edina pot do
   menija, ko je rail skrit. "ink kvadrat": polnilo je --rail-bg - EDINA
   prava konstantna črna v sistemu (--ink na lupini sledi temi, glej
   tokens.css razdelek B) - črte pa --rail-fg, da gumb ostane berljiv v
   obeh temah, ne glede na to, kaj je pod njim. */
html[data-skin="ink"] .inkburger{
  position:fixed;
  top:20px;
  right:48px;
  z-index:150;
  height:44px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  background:var(--rail-bg);
  border:1px solid var(--rail-hair);
  color:var(--rail-fg);
  cursor:pointer;
}
html[data-skin="ink"] .inkburger-icon{
  display:block;
  width:18px;
  height:2px;
  background:var(--rail-fg);
  position:relative;
}
html[data-skin="ink"] .inkburger-icon::before,
html[data-skin="ink"] .inkburger-icon::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background:var(--rail-fg);
}
html[data-skin="ink"] .inkburger-icon::before{top:-6px}
html[data-skin="ink"] .inkburger-icon::after{top:6px}
html[data-skin="ink"] .inkburger-label{
  font-family:var(--fM);
  font-size:10px;
  font-weight:500;
  letter-spacing:.16em;
  line-height:1;
}
/* Ko je rail (zasilni izhod) viden, ☰ ni potreben - rail že ponuja polno
   navigacijo in gumb bi se prekrival z logotipom na vrhu raila. */
html[data-skin="ink"][data-rail="1"] .inkburger{display:none}


/* ==========================================================================
   3 · MASTHEAD · glava pogleda (demo .vhead + .vrule)
   ========================================================================== */
/* Črta pod naslovom je v demotu .vrule - poteka po VSEBINSKEM stolpcu, ne
   od roba do roba pod railom. border-bottom je zato zamenjan s ::after, ki je
   vstavljen na isti 48px rob kot besedilo. .top je sticky = pozicioniran, torej
   je containing block za ta absolutni pseudo (brez transform/filter pasti). */
html[data-skin="ink"] .top{
  background:var(--shell);
  border-bottom:0;
  padding:26px 210px 14px 48px;
  gap:16px;
  align-items:flex-end;
}
html[data-skin="ink"] .top::after{
  content:"";
  position:absolute;
  left:48px;
  right:48px;
  bottom:0;
  height:3px;
  background:var(--shell-fg);
}
html[data-skin="ink"] .top h1{
  font-family:var(--fD);
  font-weight:600;
  font-size:36px;
  line-height:1.05;
  letter-spacing:0;
  color:var(--shell-fg);
}
/* Pogled z lastnim demo vheadom (data-inkv): naslov pripada pogledu, ne lupini.
   Lupinska vrstica se skrči na globalni iskalnik - brez naslova, brez 3px črte
   (tisto nosi .vrule pogleda), da naslov ni izrisan dvakrat.

   Vrstica je pri tem VZETA IZ TOKA (absolutno, desno zgoraj): v demotu nad
   mastheadom ni ničesar, medtem ko je lupinska vrstica naslov potiskala 72 px
   navzdol in je bila v slepi primerjavi edino, po čemer se je videlo, kateri
   je original. Iskalnik OSTANE v DOM (studio.js:218/284 in view-dealer.js
   berejo #gsearch) in ostane klikljiv - samo ne jemlje več višine. */
html[data-skin="ink"][data-inkv] .top h1,
html[data-skin="ink"][data-inkv] .top .crumb{display:none}
html[data-skin="ink"][data-inkv] .top::after{display:none}
html[data-skin="ink"][data-inkv] .top{
  position:absolute;
  top:0;
  right:0;
  left:auto;
  width:auto;
  padding:20px 210px 0 48px;
  background:none;
  border:0;
  z-index:6;
  pointer-events:none;
}
html[data-skin="ink"][data-inkv] .top > *{pointer-events:auto}
html[data-skin="ink"][data-inkv] main{position:relative}
/* Globalnega iskalnika NE skrivamo: test 7A to izrecno prepoveduje, ker
   filtrira PRODUKTE in ga bere view-dealer.js:323 - lastno iskalno polje
   pogleda (npr. #kbsearch) filtrira nekaj drugega. Dve polji sta zato
   namerni; ločuje ju to, da globalno zdaj plava desno zgoraj in ne jemlje
   višine, lastno pa stoji v listini kot ukazna vrstica. */
html[data-skin="ink"] .top .crumb{
  font-family:var(--fM);
  font-size:11px;
  font-weight:400;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--acc-text);
  padding-bottom:5px;
}

/* iskalno polje -> ukazna vrstica (demo .cmdbar) */
html[data-skin="ink"] .searchbox{
  background:var(--dense);
  border:1px solid var(--dense-hair);
  padding:0 16px;
  height:40px;
  min-width:260px;
  gap:12px;
  font-family:var(--fM);
  font-size:12.5px;
  color:var(--dense-fg2);
}
html[data-skin="ink"] .searchbox input{
  font-family:var(--fM);
  font-size:12.5px;
  letter-spacing:.04em;
  color:var(--dense-fg);
  caret-color:var(--gold);
  /* Dotikljiva tarča >= 24px (WCAG 2.5.8 AA). `all:unset` (index.html:126) je
     polju pobral tudi višino, zato je merilo 198x19 px - 40px visoka .searchbox
     okoli njega ne šteje, ker je klikljiv element input, ne škatla. Druga
     tarča v ohišju, ki je padla v vseh 36 ocenjenih celicah merila C5.
     Polje je flex postavka v .searchbox (index.html:125), torej je blokovno in
     min-height dejansko prime; .searchbox ostane 40px, ker je 24 < 40. */
  min-height:24px;
}
html[data-skin="ink"] .gsearch-prompt{color:var(--oat);font-family:var(--fM);font-size:15px}

/* EN rob dokumenta. Legacy .wrap ima max-width:1400px (index.html:96), .top pa
   je poln po širini s 48px roba - stran je zato imela dva različna desna roba
   (vsebina 1600, masthead 1712 pri 1760px oknu). Demo ima en sam stolpec, od
   levega roba do 48px od desnega. max-width:none poravna oba. */
html[data-skin="ink"] .wrap{padding:32px 48px 96px;max-width:none}


/* ==========================================================================
   4 · PAPIRNE PLOŠČE (demo .plate)
   Isti seznam kot kontekstno pravilo v tokens.css (B2). Tam se nastavijo
   tokeni, tu se nariše površina. Seznama sta namenoma ločena: tokens.css
   je pogodba, ink.css je videz.
   ========================================================================== */
html[data-skin="ink"] .card,
html[data-skin="ink"] .kpis,
html[data-skin="ink"] .rows,
html[data-skin="ink"] .stg,
html[data-skin="ink"] .opt,
html[data-skin="ink"] .bvcard,
html[data-skin="ink"] .brail,
html[data-skin="ink"] .note,
html[data-skin="ink"] .ruleitem,
html[data-skin="ink"] .invoice,
html[data-skin="ink"] .vertbl,
html[data-skin="ink"] table.data,
html[data-skin="ink"] .drawer,
html[data-skin="ink"] .vermodal-box,
html[data-skin="ink"] .cfgcard,
html[data-skin="ink"] .cfgplate,
html[data-skin="ink"] .cfgpanel,
html[data-skin="ink"] .cfgtree,
html[data-skin="ink"] .cfgrule,
html[data-skin="ink"] .cfgstat,
html[data-skin="ink"] .cfgstep,
html[data-skin="ink"] .cfgver1,
html[data-skin="ink"] .cfgtabs,
html[data-skin="ink"] .cfgfoot,
html[data-skin="ink"] .cfgadv,
html[data-skin="ink"] .cfgsoon,
html[data-skin="ink"] .crmtbl,
html[data-skin="ink"] .kbcol,
html[data-skin="ink"] .kbcard,
html[data-skin="ink"] .kbdeal,
html[data-skin="ink"] .md-laycard,
html[data-skin="ink"] .md-mod,
html[data-skin="ink"] .pb-params,
html[data-skin="ink"] .pv-dec,
html[data-skin="ink"] .pv-empty,
html[data-skin="ink"] .pv-res,
html[data-skin="ink"] .pv-rule,
html[data-skin="ink"] .pv-tbl,
html[data-skin="ink"] .rbx,
html[data-skin="ink"] .rbro,
html[data-skin="ink"] .tr-edit,
html[data-skin="ink"] .uscard,
html[data-skin="ink"] .ustbl,
html[data-skin="ink"] [style*="var(--panel)"],
html[data-skin="ink"] [style*="var(--panel-solid)"],
/* DOPOLNJENO 13.8.2026: oblika s fallbackom (var(--panel-solid,#fff)) prej ni
   bila zajeta - glej isto opombo v tokens.css B2. */
html[data-skin="ink"] [style*="var(--panel,"],
html[data-skin="ink"] [style*="var(--panel-solid,"]{
  background:var(--plate);
  color:var(--ink);
  border:1px solid var(--plate-line);
}

/* naslovi znotraj plošč (demo .masthead h2 + .rule3) */
html[data-skin="ink"] .card h3,
html[data-skin="ink"] .cfgname,
html[data-skin="ink"] .cfgh3,
html[data-skin="ink"] .cfgsteph{
  font-family:var(--fD);
  font-weight:600;
  color:var(--ink);
  letter-spacing:.01em;
}

/* KPI: en list papirja, celice ločene s hairlineom (demo .kpis / .kpi) */
html[data-skin="ink"] .kpis{gap:0;padding:24px 32px;margin-bottom:24px}
html[data-skin="ink"] .kpi{
  background:none;
  border:0;
  padding:0 24px 0 0;
}
html[data-skin="ink"] .kpi + .kpi{border-left:1px solid var(--hair-p);padding-left:24px}
html[data-skin="ink"] .kpi .lab{
  font-family:var(--fM);
  font-size:10px;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink2);
}
html[data-skin="ink"] .kpi .val{
  font-family:var(--fD);
  font-weight:600;
  font-size:40px;
  line-height:1.1;
  letter-spacing:0;
  color:var(--ink);
  margin-top:16px;
}
html[data-skin="ink"] .kpi .val small{font-size:14px;color:var(--ink2)}
html[data-skin="ink"] .kpi .sub{
  font-family:var(--fM);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink2);
  margin-top:8px;
}

/* naslov sekcije nad ploščami (na ohišju, ne na papirju) */
html[data-skin="ink"] .sectitle{
  border-bottom:1px solid var(--shell-hair);
  padding-bottom:12px;
  margin:32px 0 16px;
}
html[data-skin="ink"] .sectitle h2{
  font-family:var(--fD);
  font-weight:600;
  font-size:19px;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--shell-fg);
}
html[data-skin="ink"] .sectitle .count{
  font-family:var(--fM);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--shell-fg2);
}
html[data-skin="ink"] .alabel{
  font-family:var(--fM);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
html[data-skin="ink"] .empty{
  font-family:var(--fM);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--shell-fg2);
}


/* ==========================================================================
   5 · ŽIGI (demo .stamp · enotna višina 24px)
   ========================================================================== */
html[data-skin="ink"] .tag,
html[data-skin="ink"] .badge,
html[data-skin="ink"] .chip,
html[data-skin="ink"] .cfgchip,
html[data-skin="ink"] .cfgtag,
html[data-skin="ink"] .cfgdraft,
html[data-skin="ink"] .cfgver,
html[data-skin="ink"] .cfgseg,
html[data-skin="ink"] .cfgaddpill,
html[data-skin="ink"] .pb-chip,
html[data-skin="ink"] .tr-chip,
html[data-skin="ink"] .uschip,
html[data-skin="ink"] .usrole{
  display:inline-flex;
  align-items:center;
  height:24px;
  padding:0 8px;
  font-family:var(--fM);
  font-size:10px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1;
  white-space:nowrap;
  background:none;
  border:1px solid currentColor;
  color:var(--mut);
}
html[data-skin="ink"] .cfgtag,
html[data-skin="ink"] .cfgdraft{height:20px;font-size:9px;letter-spacing:.08em}

/* aktivni žig: polnilo. Legacy index.html:327 to že naredi z
   background:var(--invert) !important + color:var(--on-invert) !important,
   kar prek kontekstnih tokenov postane .stamp.fill (na papirju)
   oz. .stamp.fill-inv (na ohišju). Tu dodamo samo obrobo. */
html[data-skin="ink"] .chip.on,
html[data-skin="ink"] .cfgseg.on,
html[data-skin="ink"] .uschip.on{border-color:var(--invert)}

html[data-skin="ink"] .badge.lock,
html[data-skin="ink"] .tag.gold{color:var(--gold-deep);border-bottom:3px solid var(--gold)}
/* zaklenjena stopnja v lijaku: legacy jo označi s trdo kodirano #faf6f1,
   ki je na papirju nevidna - tu jo prevedemo v zlato podčrtavo (demo .lockcnt) */
html[data-skin="ink"] .stg.lock{border-color:var(--gold);border-bottom-width:3px}
html[data-skin="ink"] .badge.done,
html[data-skin="ink"] .tag.dep{color:var(--dep)}
html[data-skin="ink"] .tag.excl{color:var(--excl)}


/* ==========================================================================
   6 · GUMBI (demo .btn · štampiljka, višina 40px)
   ========================================================================== */
html[data-skin="ink"] .btn,
html[data-skin="ink"] .cfgbtn,
html[data-skin="ink"] .pb-btn,
html[data-skin="ink"] .md-act,
html[data-skin="ink"] .crmact,
html[data-skin="ink"] .usact{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 16px;
  font-family:var(--fM);
  font-size:11px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1;
  white-space:nowrap;
  background:none;
  border:1px solid var(--ink);
  color:var(--ink);
  transition:none;
}
/* Primarni gumb: polno polnilo v črnilu površine (demo .btn-ink / .stamp.fill).
   Legacy to nastavi pri :329, ampak s specifičnostjo (0,2,0) - naše splošno
   pravilo za .btn je (0,2,1) in bi ga povozilo. Zato tu polnilo ponovimo. */
html[data-skin="ink"] .btn.pri,
html[data-skin="ink"] .cfgbtn.gold,
html[data-skin="ink"] .pb-btn.gold{
  background:var(--invert);
  color:var(--on-invert);
  border-color:var(--invert);
}
html[data-skin="ink"] .btn.pri:hover,
html[data-skin="ink"] .cfgbtn.gold:hover{background:var(--gh-bg);color:var(--gh-fg);border-color:var(--gh-bg)}
/* zlati: obroba 2px, brez polnila (demo .btn-gold) */
html[data-skin="ink"] .btn.gold{
  background:none;
  border:2px solid var(--gold);
  color:var(--ink);
}
html[data-skin="ink"] .btn.gold:hover{background:var(--gold);color:var(--plate-fg);border-color:var(--gold)}
html[data-skin="ink"] .btn.sec:hover,
html[data-skin="ink"] .cfgbtn:hover{background:var(--ink);color:var(--panel);border-color:var(--ink)}


/* ==========================================================================
   7 · TABELE IN VRSTICE (demo table.doc + .docrow)
   ========================================================================== */
html[data-skin="ink"] table.data th,
html[data-skin="ink"] .verrow.verhd,
html[data-skin="ink"] .crmtbl .th-row,
html[data-skin="ink"] .ustbl .th-row,
html[data-skin="ink"] .pv-tbl th{
  background:none;
  font-family:var(--fB);
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  border-bottom:3px solid var(--ink);
}
html[data-skin="ink"] table.data td,
html[data-skin="ink"] .pv-tbl td{
  border-bottom:1px solid var(--hair-p);
  font-size:12.5px;
  color:var(--ink);
}
html[data-skin="ink"] .row{border-bottom:1px solid var(--hair-p)}
html[data-skin="ink"] .row:hover{background:var(--plate2)}
html[data-skin="ink"] .row .who{font-family:var(--fD);font-weight:600;font-size:16px;color:var(--ink)}
html[data-skin="ink"] .row .meta{font-family:var(--fM);font-size:11px;color:var(--ink2)}
html[data-skin="ink"] .row .th{border:1px solid var(--hair-p);background:var(--plate2)}
html[data-skin="ink"] .price{font-family:var(--fM);font-weight:500;font-variant-numeric:tabular-nums}


/* ==========================================================================
   8 · VNOSNA POLJA
   ========================================================================== */
html[data-skin="ink"] input,
html[data-skin="ink"] textarea,
html[data-skin="ink"] select{
  background:var(--panel2);
  color:var(--ink);
  border:1px solid var(--line);
  font-family:inherit;
}
/* POPRAVLJENO 13.8.2026 (BLOKER): outline:none je bil slep - vzel je obroc
   tudi tipkovnicnemu fokusu, nadomestil pa ga je samo border-color:var(--gold),
   izmerjeno 2,22:1 na papirju (WCAG 1.4.11 zahteva >= 3:1). Zdaj outline pade
   samo pri fokusu z misko/dotikom (:focus:not(:focus-visible)); tipkovnicni
   fokus dobi lasten obroc v razdelku 8b spodaj. Zlati rob ostane - je NOTRANJA
   plast dvojnega obroca (rob cista zlata + zunanji outline iz 8b). */
html[data-skin="ink"] input:focus,
html[data-skin="ink"] textarea:focus,
html[data-skin="ink"] select:focus{
  border-color:var(--gold);
  background:var(--panel);
}
html[data-skin="ink"] input:focus:not(:focus-visible),
html[data-skin="ink"] textarea:focus:not(:focus-visible),
html[data-skin="ink"] select:focus:not(:focus-visible){
  outline:none;
}
html[data-skin="ink"] .searchbox input{background:none;border:0}


/* ==========================================================================
   8b · FOKUSNI OBROC · lasten, neodvisen od legacy bloka
   POPRAVLJENO 13.8.2026 (BLOKER).

   Prej ink.css ni imel NOBENEGA :focus-visible pravila. Vsak viden obroc pod
   ink skinom je prihajal iz privzetega UA obroca oziroma iz legacy bloka
   index.html:379 - torej iz datoteke, ki jo ta prenova nacrtuje izbrisati.
   Ko bi legacy blok padel, bi fokus izginil.

   BARVA
   Cista --gold (#b5a291) na papirju (--plate #FBFAF8) meri 2,22-2,29:1 in
   pade pod prag 3:1 iz WCAG 1.4.11 / 2.4.11. Zato obroc uporabi isti postopek
   kot --gold-deep: zlata, zmesana s crnilom POVRSINE, na kateri element stoji
   (70/30, enako razmerje kot tokens.css:194).

   Zakaj ne kar var(--gold-deep): posamezen pogled ga sme IZBRISATI. Cenik
   (razdelek 14.1, ink.css:1562) ga je namenoma odstranil, da ima list eno zlato -
   in tam je obroc padel nazaj na vrednost ohisja. Izmerjeno: v temni temi je
   .pb-search dobil svetlo zlato na papirnati podlagi = 1,70:1. Zato mesamo
   z var(--ink), torej z barvo BESEDILA lokalne povrsine. --ink je edini token,
   ki ga po pogodbi postavi vsak kontekstni blok (ohisje, papir, gost panel,
   rail, lokalni bloki pogledov) - ze zato, ker brez njega besedilo ni vidno.
   Obroc tako ne more zaostati za povrsino, na kateri stoji.
   NOVE zlate ni - edina zlata ostaja #b5a291; mesanica je njena izpeljanka.

   DVE PLASTI
   Zunanja: 3px outline v zlati, zmesani z lokalnim crnilom, odmaknjen 2px od
   roba elementa (2px reze pokaze podlago, zato obroc na obeh straneh meji na
   isto barvo in je meritev enoznacna).
   Notranja: pri vnosnih poljih rob preskoci na cisto --gold (razdelek 8).
   Dodatna box-shadow ni dovoljena (INK MONOLITH je ploski) in ni uporabljena.

   !important (izmerjeno, ne previdnostno)
   Desetine gumbov v JS nosi inline style="all:unset;..." (studio.js:1850,
   view-dealer.js:314, offer-docs...). all:unset postavi outline-style na
   initial = none, inline deklaracija pa premaga navadno avtorsko pravilo -
   izmerjeno: 27 od 60 tabulatorskih postankov na pogledu Modeli je dobilo
   "0px none" namesto obroca. Zato in SAMO zato je tu !important; enako
   konvencijo ima ze razdelek K6. Sirsega prijema ([style*="all:unset"]) ni,
   ker Chrome ob ponovni serializaciji all: razpre v ~300 longhandov in ta
   niz izgine - selektor bi bil laznivo natancen.

   PLOSKOST: outline ni senca in ne ustvari radija - radius 0 ostane.
   ========================================================================== */
html[data-skin="ink"] a:focus-visible,
html[data-skin="ink"] button:focus-visible,
html[data-skin="ink"] input:focus-visible,
html[data-skin="ink"] textarea:focus-visible,
html[data-skin="ink"] select:focus-visible,
html[data-skin="ink"] summary:focus-visible,
html[data-skin="ink"] [contenteditable]:focus-visible,
html[data-skin="ink"] [role="button"]:focus-visible,
html[data-skin="ink"] [tabindex]:not([tabindex="-1"]):focus-visible{
  outline:3px solid color-mix(in srgb, var(--oat) 70%, var(--espresso-deep)) !important;
  outline-offset:2px !important;
}


/* ==========================================================================
   8c · REGISTER · skupni gradniki svetlega Studia
   Vsi pogledi uporabljajo iste tirnice: glava, pas in vrstica imajo enako
   mrežo. Šest pikslov prosojnega hrbta na glavi je del podatkovne poravnave,
   ne dekoracija; brez njega naslovi stolpcev zdrsnejo levo.
   ========================================================================== */
html[data-skin="ink"] .reg-scroll{
  width:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
}
html[data-skin="ink"] .reg{
  min-width:900px;
  background:var(--veil);
  color:var(--espresso-deep);
  border:1px solid var(--hair-strong);
  border-radius:0;
  box-shadow:none;
}
html[data-skin="ink"] .reg-head,
html[data-skin="ink"] .reg-band,
html[data-skin="ink"] .reg-row{
  display:grid;
  grid-template-columns:var(--reg-cols,minmax(0,1fr));
  gap:20px;
  align-items:center;
}
html[data-skin="ink"] .reg-head{
  min-height:43px;
  padding:11px 20px 10px;
  border-left:6px solid transparent;
  border-bottom:3px solid var(--espresso-deep);
  font-family:var(--fB);
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  line-height:1.2;
  text-transform:uppercase;
  color:var(--espresso-deep);
}
html[data-skin="ink"] .reg-band{
  min-height:45px;
  padding:11px 20px;
  border-left:6px solid var(--espresso);
  border-bottom:1px solid var(--hair-strong);
}
html[data-skin="ink"] .reg-band-t{
  font-family:var(--fD);
  font-size:17px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--espresso-deep);
}
html[data-skin="ink"] .reg-band-c,
html[data-skin="ink"] .reg-band-note{
  font-family:var(--fM);
  font-size:9.5px;
  font-weight:500;
  letter-spacing:.1em;
  line-height:1.4;
  text-transform:uppercase;
}
html[data-skin="ink"] .reg-band-note{text-align:right}
html[data-skin="ink"] .reg-row{
  min-height:50px;
  padding:11px 20px;
  border-left:6px solid var(--hair-strong);
  border-bottom:1px solid var(--hair-weak);
  font-size:12.5px;
  line-height:1.35;
  background:var(--veil);
}
html[data-skin="ink"] .reg-row:last-child{border-bottom:0}
html[data-skin="ink"] .reg-row:hover{background:#EFEAE3}
html[data-skin="ink"] .reg-mono{
  font-family:var(--fM);
  font-variant-numeric:tabular-nums;
}
html[data-skin="ink"] .reg-console{
  min-height:56px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 20px;
  background:var(--espresso-deep);
  color:var(--console-fg);
  border:1px solid var(--espresso-deep);
  font-family:var(--fM);
}
html[data-skin="ink"] .reg-console-prompt{
  flex:none;
  color:var(--oat);
  font-size:18px;
  line-height:1;
}
html[data-skin="ink"] .reg-console input{
  min-width:0;
  flex:1;
  min-height:32px;
  padding:0;
  background:none;
  color:var(--console-fg);
  border:0;
  font-family:var(--fM);
  font-size:12.5px;
  letter-spacing:.04em;
}
html[data-skin="ink"] .reg-console input::placeholder{color:var(--console-mut)}
html[data-skin="ink"] .reg-primary{
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 16px;
  background:var(--oat);
  color:var(--espresso-deep);
  border:1px solid var(--espresso-deep);
  font-family:var(--fM);
  font-size:10px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
}
html[data-skin="ink"] .reg-primary:hover{background:var(--ivory)}
html[data-skin="ink"] .reg-tab{
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  background:var(--veil);
  color:var(--espresso-deep);
  border:1px solid var(--hair-strong);
  font-family:var(--fM);
  font-size:10px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
}
html[data-skin="ink"] .reg-tab.tint{border-bottom:3px solid var(--espresso)}
html[data-skin="ink"] .reg-tab.on{
  background:var(--espresso-deep);
  color:var(--veil);
  border-color:var(--espresso-deep);
}
html[data-skin="ink"] .reg-error{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:22px;
  padding:0 8px;
  background:var(--err-bg);
  color:var(--err-fg);
  border:1px solid var(--err-bd);
  font-family:var(--fM);
  font-size:9.5px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
}
html[data-skin="ink"] .reg-error::before{
  content:"";
  width:7px;
  height:7px;
  flex:none;
  background:var(--err-bd);
}

/* 2A · KONFIGURATORJI REGISTER
   Pogledovni razredi so tukaj, da register ostane del enega preverljivega
   bright sistema in se ne sestavlja iz runtime CSS fragmentov. */
html[data-skin="ink"] .inkv-configurators .inkv-cfg-reg-console{
  margin:24px 0 16px;
  flex-wrap:wrap;
  padding-top:10px;
  padding-bottom:10px;
}
html[data-skin="ink"] .inkv-configurators .inkv-cfg-reg-console input{flex:1 1 320px}
html[data-skin="ink"] .inkv-configurators .inkv-cfg-console-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}
html[data-skin="ink"] .inkv-configurators .inkv-cfg-console-action{
  height:36px;
  padding:0 14px;
  border:1px solid color-mix(in srgb,var(--veil) 28%,transparent);
  background:transparent;
  color:var(--ivory);
  font-family:var(--fM);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
html[data-skin="ink"] .inkv-configurators .inkv-cfg-console-action:hover{border-color:var(--veil);color:var(--veil)}
html[data-skin="ink"] .inkv-configurators .inkv-cfg-console-actions .reg-primary{border-color:var(--oat)}
html[data-skin="ink"] .inkv-configurators .inkv-cfg-filterbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 16px;
}
html[data-skin="ink"] .inkv-configurators .inkv-cfg-filterbar .reg-tab{
  gap:8px;
  font-size:13px;
}
html[data-skin="ink"] .inkv-configurators .inkv-cfg-filterbar .reg-tab span{
  font-size:11px;
  font-variant-numeric:tabular-nums;
}
html[data-skin="ink"] .inkv-configurators .inkv-cfg-register{min-width:1260px}
html[data-skin="ink"] .inkv-configurators .inkv-cfg-reg-grid{grid-template-columns:var(--cfg-reg-cols)}
html[data-skin="ink"] .inkv-configurators .inkv-cfg-reg-band{display:flex;gap:16px}
html[data-skin="ink"] .inkv-configurators .inkv-cfg-reg-band .reg-band-c{align-self:baseline}
html[data-skin="ink"] .inkv-configurators .inkv-cfg-reg-band .reg-band-note{
  margin-left:auto;
  max-width:620px;
  text-transform:none;
  letter-spacing:0;
  font-family:var(--fB);
  font-size:12px;
  font-weight:400;
}
html[data-skin="ink"] .inkv-configurators .inkv-cfg-reg-row{cursor:pointer}
html[data-skin="ink"] .inkv-configurators .inkv-cfg-reg-title{
  font-family:var(--fD);
  font-size:16px;
  font-weight:600;
  line-height:1.2;
  color:var(--espresso-deep);
}
html[data-skin="ink"] .inkv-configurators .inkv-cfg-reg-num{
  text-align:right;
  font-family:var(--fM);
  font-size:12.5px;
  font-variant-numeric:tabular-nums;
  color:var(--espresso-deep);
}
html[data-skin="ink"] .inkv-configurators .inkv-cfg-reg-right{text-align:right}
html[data-skin="ink"] .inkv-configurators .inkv-cfg-reg-status{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:0 8px;
  font-family:var(--fM);
  font-size:9.5px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
html[data-skin="ink"] .inkv-configurators .inkv-cfg-reg-status.live{background:var(--espresso-deep);color:var(--veil)}
html[data-skin="ink"] .inkv-configurators .inkv-cfg-reg-empty{
  display:block;
  min-height:44px;
  padding:13px 20px;
  font-family:var(--fM);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--paper-ter);
}
html[data-skin="ink"] .inkv-configurators .lact{
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 8px;
}
html[data-skin="ink"] .inkv-configurators .inkv-cfg-reg-foot{
  padding:12px 20px;
  border-top:1px solid var(--hair-strong);
  font-size:12px;
  line-height:1.5;
  color:var(--espresso);
}
@media(max-width:1000px){
  html[data-skin="ink"] .inkv-configurators .inkv-cfg-console-actions{
    width:100%;
    margin-left:32px;
    flex-wrap:wrap;
  }
}

/* 2B · MODELI REGISTER */
html[data-skin="ink"] .inkv-models .inkv-models-reg-console{
  margin:24px 0 16px;
  flex-wrap:wrap;
}
html[data-skin="ink"] .inkv-models .inkv-models-reg-console input{flex:1 1 360px}
html[data-skin="ink"] .inkv-models .inkv-models-console-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}
html[data-skin="ink"] .inkv-models .inkv-models-console-action{
  height:36px;
  padding:0 14px;
  border:1px solid color-mix(in srgb,var(--veil) 28%,transparent);
  background:transparent;
  color:var(--ivory);
  font-family:var(--fM);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
html[data-skin="ink"] .inkv-models .inkv-models-console-action:hover,
html[data-skin="ink"] .inkv-models .inkv-models-console-action.on{
  border-color:var(--oat);
  color:var(--veil);
}
html[data-skin="ink"] .inkv-models .reg-primary{font-size:11px}
html[data-skin="ink"] .inkv-models .inkv-models-reg-caption{
  margin:0 0 16px;
  font-size:12.5px;
  color:var(--espresso);
}
html[data-skin="ink"] .inkv-models .inkv-models-register{min-width:1180px}
html[data-skin="ink"] .inkv-models .inkv-models-reg-grid{grid-template-columns:var(--models-reg-cols)}
html[data-skin="ink"] .inkv-models .inkv-models-reg-band{display:flex;gap:16px}
html[data-skin="ink"] .inkv-models .inkv-models-reg-band .reg-band-c{font-size:11px}
html[data-skin="ink"] .inkv-models .inkv-models-reg-band .reg-band-note{
  margin-left:auto;
  max-width:760px;
  font-family:var(--fB);
  font-size:12px;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
}
html[data-skin="ink"] .inkv-models .inkv-models-reg-row{cursor:pointer}
html[data-skin="ink"] .inkv-models .inkv-models-reg-name{
  font-size:13px;
  font-weight:600;
  color:var(--espresso-deep);
}
html[data-skin="ink"] .inkv-models .inkv-models-reg-sku{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:var(--fM);
  font-size:11.5px;
  color:var(--espresso);
}
html[data-skin="ink"] .inkv-models .inkv-models-reg-num{
  text-align:right;
  font-family:var(--fM);
  font-size:12.5px;
  font-variant-numeric:tabular-nums;
  color:var(--espresso-deep);
}
html[data-skin="ink"] .inkv-models .inkv-models-reg-right{text-align:right}
html[data-skin="ink"] .inkv-models .inkv-models-reg-status{
  display:inline-flex;
  align-items:center;
  height:22px;
  padding:0 8px;
  font-family:var(--fM);
  font-size:9.5px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
html[data-skin="ink"] .inkv-models .inkv-models-reg-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}
html[data-skin="ink"] .inkv-models .inkv-models-reg-action{
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  border:1px solid var(--hair-strong);
  background:transparent;
  color:var(--espresso);
  font-family:var(--fM);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
html[data-skin="ink"] .inkv-models .inkv-models-reg-action:hover{border-color:var(--espresso);color:var(--espresso-deep)}
html[data-skin="ink"] .inkv-models .inkv-models-reg-empty{display:block;padding:16px 20px}
html[data-skin="ink"] .inkv-models .inkv-models-reg-foot{
  padding:12px 20px;
  border-top:1px solid var(--hair-strong);
  font-size:12px;
  color:var(--espresso);
}
html[data-skin="ink"] .inkv-models .inkv-models-reg-foot b{color:var(--espresso-deep)}
@media(max-width:1000px){
  html[data-skin="ink"] .inkv-models .inkv-models-console-actions{
    width:100%;
    margin-left:32px;
    flex-wrap:wrap;
  }
}

/* 2D · ŠIFRANT REGISTER
   Atributi ostanejo v živih INKV_MD_GROUPS; pas je edino novo stanje pogleda.
   Glava in vrstice delijo iste tirnice, zato se dolgi seznami vrednosti ne
   prelivajo v sosednje stolpce. */
html[data-skin="ink"] .inkv-masterdata .inkv-masterdata-reg-console{
  margin:24px 0 16px;
  flex-wrap:wrap;
}
html[data-skin="ink"] .inkv-masterdata .inkv-masterdata-reg-console input{flex:1 1 360px}
html[data-skin="ink"] .inkv-masterdata .inkv-masterdata-console-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}
html[data-skin="ink"] .inkv-masterdata .inkv-masterdata-reg-console .reg-tab{
  background:transparent;
  color:var(--ivory);
  border-color:color-mix(in srgb,var(--veil) 28%,transparent);
}
html[data-skin="ink"] .inkv-masterdata .inkv-masterdata-reg-console .reg-tab.on{
  background:var(--veil);
  color:var(--espresso-deep);
  border-color:var(--veil);
}
html[data-skin="ink"] .inkv-masterdata .inkv-masterdata-reg-console .reg-primary{font-size:11px}
html[data-skin="ink"] .inkv-masterdata .inkv-masterdata-register{min-width:1130px}
html[data-skin="ink"] .inkv-masterdata .inkv-masterdata-reg-grid{grid-template-columns:var(--masterdata-reg-cols)}
html[data-skin="ink"] .inkv-masterdata button.inkv-masterdata-reg-band{
  width:100%;
  display:flex;
  align-items:center;
  gap:16px;
  border-top:0;
  border-right:0;
  border-radius:0;
  text-align:left;
  cursor:pointer;
}
html[data-skin="ink"] .inkv-masterdata button.inkv-masterdata-reg-band:disabled{cursor:default;opacity:1}
html[data-skin="ink"] .inkv-masterdata .inkv-masterdata-reg-band .reg-band-c{font-size:11px}
html[data-skin="ink"] .inkv-masterdata .inkv-masterdata-reg-band .reg-band-note{
  margin-left:auto;
  max-width:760px;
  font-family:var(--fB);
  font-size:12px;
  font-weight:400;
  letter-spacing:0;
  line-height:1.45;
  text-transform:none;
}
html[data-skin="ink"] .inkv-masterdata .inkv-masterdata-reg-name{
  font-size:13px;
  font-weight:600;
  color:var(--espresso-deep);
}
html[data-skin="ink"] .inkv-masterdata .inkv-masterdata-reg-key{
  margin-top:2px;
  overflow:hidden;
  text-overflow:ellipsis;
  font-family:var(--fM);
  font-size:10.5px;
  color:var(--espresso);
}
html[data-skin="ink"] .inkv-masterdata .inkv-masterdata-reg-type{
  font-size:12px;
  color:var(--espresso-deep);
}
html[data-skin="ink"] .inkv-masterdata .inkv-masterdata-values{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
html[data-skin="ink"] .inkv-masterdata .inkv-masterdata-chip{
  height:22px;
  display:inline-flex;
  align-items:center;
  padding:0 8px;
  font-family:var(--fM);
  font-size:9.5px;
  font-weight:500;
  letter-spacing:.08em;
  white-space:nowrap;
}
html[data-skin="ink"] .inkv-masterdata .inkv-masterdata-type-note{
  font-family:var(--fM);
  font-size:9.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--paper-ter);
}
html[data-skin="ink"] .inkv-masterdata .inkv-masterdata-reg-right{text-align:right}
html[data-skin="ink"] .inkv-masterdata .inkv-masterdata-reg-status{
  text-align:right;
  font-family:var(--fM);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--espresso-deep);
}
html[data-skin="ink"] .inkv-masterdata .inkv-masterdata-reg-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}
html[data-skin="ink"] .inkv-masterdata .inkv-masterdata-reg-action{
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border:1px solid var(--hair-strong);
  background:transparent;
  color:var(--espresso);
  font-family:var(--fM);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
html[data-skin="ink"] .inkv-masterdata .inkv-masterdata-reg-action:hover{border-color:var(--espresso);color:var(--espresso-deep)}
html[data-skin="ink"] .inkv-masterdata .inkv-masterdata-reg-empty{
  padding:16px 20px;
  font-family:var(--fM);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--paper-ter);
}
html[data-skin="ink"] .inkv-masterdata .inkv-masterdata-reg-foot{
  padding:12px 20px;
  border-top:1px solid var(--hair-strong);
  font-family:var(--fM);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--espresso);
}

/* Kategorije in arhiv ostanejo papirni pogled z obstoječimi handlerji. */
html[data-skin="ink"] .inkv-masterdata .plate{
  --bg:var(--plate);--panel:var(--plate);--panel-solid:var(--plate);--panel2:var(--plate2);
  --ink:var(--plate-fg);--ink2:var(--plate-fg2);--ink-2:var(--plate-fg2);
  --mut:var(--plate-mut);--faint:var(--plate-faint);--line:var(--hair-p);
  --line2:var(--hair-p2);--hair:var(--hair-p);--invert:var(--plate-fg);--on-invert:var(--plate);
}
html[data-skin="ink"] .inkv-masterdata .tree{margin-top:24px}
html[data-skin="ink"] .inkv-masterdata .trow{display:flex;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px solid var(--hair-p)}
html[data-skin="ink"] .inkv-masterdata .trow:last-child{border-bottom:0}
html[data-skin="ink"] .inkv-masterdata .trow .tn{min-width:64px;font-family:var(--fM);font-size:11px;color:var(--ink2);font-variant-numeric:tabular-nums}
html[data-skin="ink"] .inkv-masterdata .trow .tm{padding:1px 5px;border:1px solid var(--ink);font-family:var(--fM);font-size:10px;letter-spacing:.06em;color:var(--ink)}
html[data-skin="ink"] .inkv-masterdata .trow .tl{flex:1;font-size:13px;font-weight:500;color:var(--ink)}
html[data-skin="ink"] .inkv-masterdata .trow .tc{font-family:var(--fM);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);font-variant-numeric:tabular-nums}
html[data-skin="ink"] .inkv-masterdata .trow.l2{padding-left:32px}
html[data-skin="ink"] .inkv-masterdata .trow.l3{padding-left:64px}
html[data-skin="ink"] .inkv-masterdata .trow.hid .tl{text-decoration:line-through;color:var(--ink2);font-weight:400}
html[data-skin="ink"] .inkv-masterdata .tacts{display:flex;gap:6px;flex-wrap:wrap}
html[data-skin="ink"] .inkv-masterdata .tact{height:28px;padding:0 10px;background:transparent;border:1px solid var(--hair-p);font-family:var(--fM);font-size:9.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);cursor:pointer;white-space:nowrap}
html[data-skin="ink"] .inkv-masterdata .tact:hover{color:var(--ink);border-color:var(--ink)}
html[data-skin="ink"] .inkv-masterdata button.tgl{padding:0;background:transparent;border:0;text-align:left;cursor:pointer}
html[data-skin="ink"] .inkv-masterdata button.tgl:hover{color:var(--ink)}
@media(max-width:1000px){
  html[data-skin="ink"] .inkv-masterdata .inkv-masterdata-console-actions{
    width:100%;
    margin-left:32px;
    flex-wrap:wrap;
  }
}

/* 2C · KATALOG REGISTER
   Katalog je zavestno na papirju. TIP in TRG sta edina filtra nad listino;
   skupine so pasovi in ohranijo žive podatke, cene ter obstoječe akcije. */
html[data-skin="ink"] .inkv-catalog .inkv-catalog-reg-console{
  margin:24px 0 14px;
  flex-wrap:wrap;
}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-reg-console input{flex:1 1 360px}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-console-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-console-action{
  height:36px;
  padding:0 14px;
  border:1px solid color-mix(in srgb,var(--veil) 28%,transparent);
  background:transparent;
  color:var(--ivory);
  font-family:var(--fM);
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-console-action:hover,
html[data-skin="ink"] .inkv-catalog .inkv-catalog-console-action.on{border-color:var(--oat);color:var(--veil)}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-reg-console .reg-primary{font-size:11px}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-filter-row{
  min-height:38px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:8px;
}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-filter-label{
  margin-right:4px;
  font-family:var(--fB);
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--espresso);
}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-filter-row .reg-tab{
  min-height:30px;
  gap:7px;
  font-family:var(--fB);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-filter-row .reg-tab span{
  font-family:var(--fM);
  font-size:11px;
  font-weight:400;
  color:inherit;
  opacity:.78;
}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-market-row .reg-tab{
  font-family:var(--fM);
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.05em;
  text-transform:uppercase;
}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-filter-note{
  margin-left:auto;
  font-size:12.5px;
  color:var(--espresso);
}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-market-more{position:relative}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-market-more summary{list-style:none;cursor:pointer}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-market-more summary::-webkit-details-marker{display:none}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-market-list{
  position:absolute;
  z-index:4;
  top:36px;
  left:0;
  width:330px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:10px;
  background:var(--veil);
  border:1px solid var(--hair-strong);
}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-register{min-width:940px}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-reg-grid{grid-template-columns:var(--catalog-reg-cols);gap:16px}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-archive-grid{grid-template-columns:var(--catalog-archive-cols);gap:16px}
html[data-skin="ink"] .inkv-catalog button.inkv-catalog-reg-band{
  width:100%;
  display:flex;
  align-items:center;
  gap:16px;
  border-top:0;
  border-right:0;
  border-radius:0;
  text-align:left;
  cursor:pointer;
}
html[data-skin="ink"] .inkv-catalog button.inkv-catalog-reg-band:disabled{cursor:default;opacity:1}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-reg-band .reg-band-c{font-size:11px}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-reg-band .reg-band-note{
  margin-left:auto;
  font-family:var(--fB);
  font-size:12px;
  letter-spacing:.06em;
}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-reg-row{cursor:pointer}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-reg-code{
  font-family:var(--fM);
  font-size:11.5px;
  color:var(--espresso);
}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-reg-product{
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:13px;
  color:var(--espresso-deep);
}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-product-swatch{
  width:22px;
  height:22px;
  flex:none;
  border:1px solid var(--oat);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-origin{
  margin-left:8px;
  font-family:var(--fM);
  font-size:9.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--paper-ter);
}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-reg-category{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  font-family:var(--fM);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-reg-price{
  text-align:right;
  font-family:var(--fM);
  font-size:13px;
  font-variant-numeric:tabular-nums;
  color:var(--espresso-deep);
}
html[data-skin="ink"] .inkv-catalog .amt,
html[data-skin="ink"] .inkv-catalog .ovr{display:inline-block}
html[data-skin="ink"] .inkv-catalog .ovr::before{content:"";display:inline-block;width:6px;height:6px;margin-right:9px;vertical-align:1px;background:var(--oat)}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-price-source{
  display:block;
  margin-top:4px;
  text-align:right;
  font-family:var(--fM);
  font-size:9.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--paper-ter);
}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-reg-actions{display:flex;justify-content:flex-end;gap:8px}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-reg-action{
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border:1px solid var(--hair-strong);
  background:transparent;
  color:var(--espresso);
  font-family:var(--fM);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-reg-action:hover{border-color:var(--espresso);color:var(--espresso-deep)}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-reg-right{text-align:right}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-reg-empty{padding:16px 20px;font-family:var(--fM);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-ter)}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-reg-foot{
  padding:12px 20px;
  border-top:1px solid var(--hair-strong);
  font-family:var(--fM);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--espresso);
}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-reg-note{
  padding:8px 20px;
  border-top:1px solid var(--hair-weak);
  font-family:var(--fM);
  font-size:9.5px;
  letter-spacing:.05em;
  line-height:1.7;
  text-transform:uppercase;
  color:var(--paper-ter);
}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-reg-note b{font-weight:500;color:var(--espresso-deep)}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-archive{min-width:780px;margin-top:24px}
html[data-skin="ink"] .inkv-catalog .inkv-catalog-archive-title{padding:12px 20px;border-bottom:3px solid var(--espresso-deep);font-family:var(--fM);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--espresso-deep)}
html[data-skin="ink"] .inkv-catalog .na{font-family:var(--fM);font-size:10.5px;color:var(--paper-ter)}
@media(max-width:1000px){
  html[data-skin="ink"] .inkv-catalog .inkv-catalog-console-actions{
    width:100%;
    margin-left:32px;
    flex-wrap:wrap;
  }
  html[data-skin="ink"] .inkv-catalog .inkv-catalog-filter-note{width:100%;margin-left:0}
}


/* ==========================================================================
   9 · DRAWER + SCRIM + MODAL
   Barve pridejo iz tokens.css (drawer in .vermodal-box sta na seznamu
   papirnih površin). Tu samo geometrija in ploskost.
   ========================================================================== */
html[data-skin="ink"] .scrim{background:rgba(11,12,14,.62)}
html[data-skin="ink"] .drawer{
  border-left:1px solid var(--hair-p);
  transition:transform .2s linear;
}
html[data-skin="ink"] .dhead{
  background:var(--plate);
  border-bottom:3px solid var(--plate-fg);
  padding:24px 32px 14px;
}
html[data-skin="ink"] .dhead .x{
  font-family:var(--fM);
  font-size:12px;
  color:var(--ink2);
  border:1px solid var(--hair-p);
  width:26px;
  height:26px;
  line-height:24px;
  text-align:center;
}
html[data-skin="ink"] .dbody{padding:24px 32px 48px}

html[data-skin="ink"] .vermodal-scrim{background:rgba(11,12,14,.62)}
html[data-skin="ink"] .vermodal-box{padding:32px}
html[data-skin="ink"] .vermodal-h{font-family:var(--fD);font-weight:600;color:var(--ink)}
html[data-skin="ink"] .vermodal-b{color:var(--ink2)}
html[data-skin="ink"] .vermodal-x{
  font-family:var(--fM);
  border:1px solid var(--hair-p);
  color:var(--ink2);
}


/* ==========================================================================
   10 · TOAST (demo .verdict)
   Dva sistema: .vertoast (view-versions.js) in nesloviti toast iz
   version-check.js, ki barve zapiše trdo v inline style. Slednjega
   dosežemo prek [role="status"].
   ========================================================================== */
html[data-skin="ink"] .vertoast{
  background:var(--shell-fg);
  color:var(--shell);
  font-family:var(--fM);
  font-size:11px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:12px 16px;
}
html[data-skin="ink"] .vertoast.err{background:var(--sem-red-p);color:var(--plate)}

html[data-skin="ink"] [role="status"]{
  background:var(--shell-fg) !important;
  color:var(--shell) !important;
  border:1px solid var(--gold) !important;
  border-left:3px solid var(--gold) !important;
  font-family:var(--fM) !important;
  font-size:11px !important;
  letter-spacing:.06em;
}
html[data-skin="ink"] [role="status"] button{color:var(--shell) !important}


/* ==========================================================================
   11 · PRIJAVA
   #login je inline stiliran v studio.js:161-176. Ploščo (background:var(--panel))
   ujame kontekstno pravilo [style*="var(--panel)"] v tokens.css, tu dodamo tipografijo.
   ========================================================================== */
html[data-skin="ink"] #login{background:var(--shell);color:var(--shell-fg)}
html[data-skin="ink"] #login .serif{
  font-family:var(--fD);
  font-weight:600;
  letter-spacing:.01em;
  color:var(--shell-fg);
}
html[data-skin="ink"] #login .serif span{color:var(--gold)}
/* Polja in gumb v prijavi so inline stilirani, gumb celo z all:unset.
   Inline deklaracija premaga vsak navaden selektor, zato je tu !important
   edina pot. Uporabljen je samo znotraj #login in samo za tipografijo
   oz. barve - nobene geometrije, ki bi lahko podrla postavitev. */
html[data-skin="ink"] #login [style*="var(--panel)"]{
  border:1px solid var(--plate-line) !important;
  padding:32px !important;
}
html[data-skin="ink"] #login input{
  background:var(--plate2) !important;
  border:1px solid var(--hair-p) !important;
  color:var(--plate-fg) !important;
  font-family:var(--fM) !important;
  font-size:12.5px !important;
  letter-spacing:.04em;
}
html[data-skin="ink"] #login button{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:40px !important;
  padding:0 16px !important;
  background:var(--plate-fg) !important;
  color:var(--plate) !important;
  border:1px solid var(--plate-fg) !important;
  font-family:var(--fM) !important;
  font-size:11px !important;
  font-weight:500 !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
}


/* ==========================================================================
   12 · PLOSKOST · odstranjevanje sledi legacy bloka
   Sence, ki jih legacy zapiše s trdimi vrednostmi (ne prek tokenov):
     index.html:193 .cfgtgl i · :265 .vermodal-box · :271 .vertoast
     :320 nav button.on · :380 .cfgfoot · :405 .cfgtypebtn.on · :408 .cfgtree/.cfgpanel
   Zamegljena ozadja: :264 .vermodal-scrim · :424 .scrim
   Ti dve deklaraciji sta EDINI box-shadow / backdrop-filter v tej datoteki
   in obe imata vrednost none - ničesar ne dodata, samo odstranita.
   ========================================================================== */
html[data-skin="ink"] .cfgtgl i,
html[data-skin="ink"] .vermodal-box,
html[data-skin="ink"] .vertoast,
html[data-skin="ink"] nav button.on,
html[data-skin="ink"] .cfgfoot,
html[data-skin="ink"] .cfgtypebtn.on,
html[data-skin="ink"] .cfgtree,
html[data-skin="ink"] .cfgpanel,
html[data-skin="ink"] .cfgcard,
html[data-skin="ink"] .cfgtabs,
html[data-skin="ink"] .cfgplate,
html[data-skin="ink"] .invoice{box-shadow:none}

html[data-skin="ink"] .scrim,
html[data-skin="ink"] .vermodal-scrim,
html[data-skin="ink"] .top,
html[data-skin="ink"] .cfgtabs{-webkit-backdrop-filter:none;backdrop-filter:none}


/* ==========================================================================
   13 · ZASILNI PREKLOPNIK SKINA
   Gumb obstaja samo, kadar je ink aktiven -
   ustvari ga bootstrap v index.html.
   ========================================================================== */
html[data-skin="ink"] .skinbtn{
  position:fixed;
  bottom:14px;
  right:auto;
  left:16px;
  z-index:9999;
  height:34px;
  padding:0 12px;
  display:grid;
  place-items:center;
  cursor:pointer;
  background:var(--dense);
  border:1px solid var(--dense-hair);
  color:var(--dense-fg2);
  font-family:var(--fM);
  font-size:9px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
}
html[data-skin="ink"] .skinbtn:hover{border-color:var(--gold);color:var(--dense-fg)}


/* ==========================================================================
   13b · OBVESTILO POD 768 px (Rokova odločitev 14.8.2026)

   Studio je namizna aplikacija in to je zdaj zapisano, ne domnevano: pod
   768 px se pokaže cel zaslon obvestila. Aplikacija pod njim ostane izrisana
   in nedotaknjena - to je prekrivka, ne preusmeritev, in nad 768 px izgine
   brez sledu.

   Vozlišče ustvari bootstrap v index.html in samo tedaj, ko je ink aktiven
   (isto pravilo kot #skinbtn), zato legacy ne dobi niti enega elementa.
   Prelomna točka živi SAMO tu - bootstrap je nima, torej se kopiji ne moreta
   raziti. 767.98 in ne 767: pri delnem zoomu so širine okna necela števila.

   Jezik ohišja: papir (--plate) v obeh temah, mono kicker in noga, serifni
   naslov, brez ikone. Sama nad vsem (z-index 10000, najvišje v aplikaciji je
   sicer 9999 - .skinbtn).
   ========================================================================== */
html[data-skin="ink"] .inkmobile{display:none}
@media (max-width:767.98px){
  html[data-skin="ink"] .inkmobile{
    display:flex;
    position:fixed;
    inset:0;
    z-index:10000;
    flex-direction:column;
    justify-content:center;
    gap:20px;
    padding:32px 28px;
    overflow:auto;
    background:var(--plate);
    color:var(--plate-fg);
  }
  html[data-skin="ink"] .inkmobile .imk{
    margin:0;
    font-family:var(--fM);
    font-size:10px;
    font-weight:500;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--plate-mut);
  }
  html[data-skin="ink"] .inkmobile .imt{
    margin:0;
    font-family:var(--fD);
    font-weight:600;
    font-size:30px;
    line-height:1.1;
    letter-spacing:0;
    color:var(--plate-fg);
  }
  html[data-skin="ink"] .inkmobile .imn{
    margin:0;
    max-width:34em;
    font-family:var(--fB);
    font-size:14px;
    line-height:1.6;
    color:var(--plate-fg2);
  }
  html[data-skin="ink"] .inkmobile .imw{
    margin:0;
    padding-top:14px;
    border-top:3px solid var(--plate-fg);
    font-family:var(--fM);
    font-size:10px;
    font-weight:500;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--plate-mut);
  }
}


/* ==========================================================================
   === Builder ===
   F4 · pogled #builder (studio.js vBuilder) · 13.8.2026
   Vzor: demo studio-ink-monolith-demo.html, pogled "Nova ponudba".

   KAJ SE SPREMENI
   Iz treh zlepljenih panelov v SPECIFIKACIJSKI LIST:
     levo   .bnav   -> oštevilčeni outline sklopov (demo .outline / .oitem)
     sredina .bmain -> en papirnat list z mastheadom, 3px ink črto in
                       vrsticami opcij s kvadratnim ink tickom (demo .plate.bsec / .opt)
     desno  .brail  -> ponudba: Neto / DDV / Skupaj z zlato podčrtavo (demo .offer)

   ŽELEZNO PRAVILO
   Vsako pravilo se začne z html[data-skin="ink"] IN vsebuje .builder.
   Razredi .opt .tick .ph .tag so v Studiu v splošni rabi (kartice modelov,
   konfigurator, katalog) - brez .builder bi ta sekcija podrla druge poglede.
   Glava pogleda (.top) je izven #view, zato je vezana prek main:has(.builder).
   Selektor .builder je še vedno pogoj: brez builderja se .top ne spremeni.
   (Prej je tu pisalo "isti prijem kot main:has(#kbsearch) pri katalogu
   (ink.css:1969)" - oboje je bilo napacno: tisto pravilo ni bilo pri katalogu
   in od 13.8.2026 ga sploh ni vec, glej kanban razdelek.)

   PLOSKOST
   0 gradientov. Edine box-shadow deklaracije tu imajo vrednost none in
   ODSTRANJUJEJO legacy obroče (index.html:365 .opt.sel / .bvcard.sel rišeta
   0 0 0 1px var(--gold)). Radij je 0 že globalno (index.html:324).

   !important
   Uporabljen samo tam, kjer legacy oz. inline stil drugače ne pusti skozi:
     index.html:371  .opt .tick / .bvcard .tick / .bnav button.on  (background+color !important)
     index.html:159  .bnav .sub                                    (padding-left+font-size !important)
     studio.js       inline style na podnaslovu, .btot vrsticah, selectu
   Večina teh deklaracij je tipografija ali barva. Naslednje so geometrija in
   to je namerno - vsaka je protiukrep proti geometriji z !important oz. inline
   in brez enake teže ne pride skozi:
     .bnav button.sub          padding      (index.html:159 piše
                               padding-left !important; shorthand hkrati
                               odpre stolpec za številčno hrbtenico)
     .brail select             padding, max-width, border, border-bottom
                               (studio.js inline style na kontroli)
     .btot > div:not(.tr)      margin-bottom (studio.js inline margin-bottom)
   To je celoten seznam; nobena druga !important deklaracija v tej sekciji
   ne premika geometrije.
   ========================================================================== */

/* --------------------------------------------------------------------------
   14.0 · GLAVA POGLEDA (demo .vhead + .vrule)
   Demo v masthead postavi PREDMET dokumenta, pod njim mono kicker
   "NOVA PONUDBA · SPECIFIKACIJSKI LIST", desno štampiljko OSNUTEK.
   Živa glava je splošna orodna vrstica: #ttl nosi ime ORODJA ("Configuration
   builder"). Ime modela je živ podatek in ga CSS ne more prenesti sem; nosi
   ga list (14.3).

   Masthead/glava zahteva markup spremembo v setnav()/openBuilder() (studio.js,
   TITLES.builder -> #ttl) in v vBuilder() za štampiljko stanja - odlozeno na
   fazo, ki se sme dotakniti JS. CSS-generirano besedilo ni sprejemljivo
   (prevodi, a11y, izbirnost). Do takrat masthead nosi pravi naslov pogleda,
   kot ga nosi vsak drug pogled.
   -------------------------------------------------------------------------- */
/* ISKALNIK OSTANE. UMAKNJENO 13.8.2026 (RESNO). Prejsnja razlicica je imela
       main:has(.builder) .top .searchbox{display:none}
   z utemeljitvijo, da demotov masthead nima nobene kontrole. Globalni iskalnik
   pa ni okras: studio.js:201 ob vnosu preklopi pogled na katalog in filtrira,
   view-dealer.js:323 bere njegovo vrednost. V builderju ni nobenega nadomestka,
   zato bi skrivanje odvzelo edino pot do iskanja iz tega pogleda. Videz demota
   ni vreden izgubljene funkcije; iskalnik ostane in --ink-top spodaj sledi
   njegovi visini.
   ISTO VELJA ZA KANBAN (popravljeno 13.8.2026): #kbsearch NI nadomestek za
   globalni iskalnik - isce naročila v tabli, ne izdelkov v katalogu. Nobeno
   pravilo v tej datoteki vec ne skriva .top .searchbox; test
   scripts/ink-skin.test.mjs to zaklene. */

/* --------------------------------------------------------------------------
   14.1 · OGRODJE
   Legacy je app-shell: height:calc(100vh - 58px) + trije overflow:auto panoji.
   Pod ink skinom je masthead visok 83px (ne 58px), zato bi ta račun rezal
   vsebino. Demo je navaden drseč dokument z lepljivima stranskima stolpcema -
   to prevzamemo: stran drsi, .bnav in .brail sta sticky pod mastheadom.
   --ink-top = višina .top. Builder ima od 14.0 naprej enak masthead kot vsak
   drug pogled: 26 zgoraj + vsebina + 14 spodaj. Od 13.8.2026 iskalnik NI vec
   skrit (glej 14.0), zato je najvisji element vrstice .searchbox (40px), ne
   h1 (37,8px): 26 + 40 + 14 = 80. Izmerjeno v brskalniku. 3px črta je ::after
   znotraj paddinga in višine ne prišteva.
   -------------------------------------------------------------------------- */
html[data-skin="ink"] .builder{
  --ink-top:80px;
  display:grid;
  grid-template-columns:236px minmax(0,1fr) 372px;
  gap:32px;
  align-items:start;
  height:auto;
  padding:32px 48px 96px;
}

/* --------------------------------------------------------------------------
   14.2 · LEVI OUTLINE (demo .outline / .oitem)
   Brez navpične ločnice, brez pilul: samo 3px zlata na aktivnem sklopu.
   -------------------------------------------------------------------------- */
html[data-skin="ink"] .builder .bnav{
  position:sticky;
  top:calc(var(--ink-top) + 16px);
  max-height:calc(100vh - var(--ink-top) - 48px);
  overflow:auto;
  border-right:0;
  padding:0;
  background:none;
}
/* Legacy .bnav button in .btn se odpirata z all:unset, kar box-sizing vrne na
   content-box - width:100% potem prišteje še padding in element pobegne iz
   stolpca (outline za 26px, gumb v ponudbi za 34px). Vračamo border-box.
   Gumbi se poleg tega skrčijo na širino besedila (form control shrink-to-fit),
   zato je width:100% nujen, da 3px zlata poteza teče čez cel stolpec. */
html[data-skin="ink"] .builder .bnav button{
  box-sizing:border-box;
  width:100%;
}
/* Glava stolpca (demo .outline .oh, "Sklopi") zahteva markup spremembo v
   vBuilder() (studio.js, izpis .bnav) - odlozeno na fazo, ki se sme dotakniti
   JS. CSS-generirano besedilo ni sprejemljivo (prevodi, a11y, izbirnost).
   Stolpec se zato zdaj odpre neposredno s prvim gumbom, poravnan z vrhom
   glavnega stolpca; števila sklopov po skupinah nosijo .clcount. */
/* prvi gumb je "change model" - v demotu je na tem mestu glava outlina */
html[data-skin="ink"] .builder .bnav > button:first-child{
  display:block;
  width:100%;
  padding:0 13px 12px;
  margin-bottom:8px;
  border-bottom:1px solid var(--shell-hair);
  font-family:var(--fM);
  font-size:10px;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
}
html[data-skin="ink"] .builder .bnav .navcluster{margin-bottom:0}
/* glava sklopa = sekcijska oznaka (demo .nav-sec) */
html[data-skin="ink"] .builder .bnav .clhead{
  gap:10px;
  padding:14px 13px 6px;
  font-family:var(--fM);
  font-size:9px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--shell-fg2);
  background:none;
}
html[data-skin="ink"] .builder .bnav .clhead:hover{background:none;color:var(--shell-fg)}
html[data-skin="ink"] .builder .bnav .clhead .chev{
  width:8px;
  font-size:7px;
  color:var(--gold);
  transition:none;
}
html[data-skin="ink"] .builder .bnav .clhead .clcount{
  font-family:var(--fM);
  font-size:10px;
  font-weight:400;
  letter-spacing:.06em;
  color:var(--gold);
}
html[data-skin="ink"] .builder .bnav .clhead .cldot{font-size:16px;color:var(--excl)}
/* postavka sklopa = demo .oitem: mono številka v svojem stolpcu, oznake vse
   na eni navpičnici. Številka je CSS counter, ker studio.js ne izpiše indeksa.
   OMEJITEV: zloženi sklopi svojih .sub sploh ne izrišejo, zato counter šteje
   samo odprte - številčenje teče znotraj prikazanega outlina, ne 01-83 čez
   ves model. Za pravo globalno številko bi moral indeks priti iz studio.js.
   Številka je ::before v absolutni poziciji in ne grid stolpec: .sub poleg
   besedila včasih vsebuje še <span>• (obvezen sklop), ki bi v gridu padel v
   svojo celico pod številko. Absolutna postavitev pusti vsebino v vrstici. */
html[data-skin="ink"] .builder .bnav{counter-reset:oitem}
html[data-skin="ink"] .builder .bnav button.sub{
  position:relative;
  padding:8px 12px 8px 37px !important;
  border-left:3px solid transparent;
  margin-bottom:0;
  font-size:13px !important;
  font-weight:400;
  letter-spacing:.01em;
  color:var(--shell-fg2);
  background:none;
}
html[data-skin="ink"] .builder .bnav button.sub::before{
  counter-increment:oitem;
  content:counter(oitem,decimal-leading-zero);
  position:absolute;
  left:13px;
  top:8px;
  font-family:var(--fM);
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.06em;
  line-height:1.5;
  /* demo .oitem .on: --acc-text, ne --gold. Na temni temi je to isti
     #b5a291, na svetli pa črnilo - zlata na svetlem ohišju bi izginila. */
  color:var(--acc-text);
}
html[data-skin="ink"] .builder .bnav button.sub:hover:not(.on){
  background:none;
  color:var(--shell-fg);
}
html[data-skin="ink"] .builder .bnav button.sub.on{
  background:none !important;
  color:var(--shell-fg) !important;
  font-weight:600;
  border-left-color:var(--gold);
}

/* --------------------------------------------------------------------------
   14.3 · SREDINSKI LIST (demo .plate.bsec)
   .bmain postane papir. Kontekstni aliasi so tu ponovljeni, ker .bmain ni na
   seznamu papirnih površin v tokens.css (B2) - brez njih bi podedoval ohišne
   vrednosti in bi bilo besedilo svetlo na svetlem.
   -------------------------------------------------------------------------- */
html[data-skin="ink"] .builder .bmain{
  --bg:var(--plate);
  --panel:var(--plate);
  --panel-solid:var(--plate);
  --panel2:var(--plate2);
  --ink:var(--plate-fg);
  --ink2:var(--plate-fg2);
  --ink-2:var(--plate-fg2);
  --mut:var(--plate-mut);
  --faint:var(--plate-faint);
  --line:var(--hair-p);
  --line2:var(--hair-p2);
  --hair:var(--hair-p);
  --gold-deep:color-mix(in srgb, var(--gold) 72%, var(--plate-fg));
  --excl:var(--sem-red-p);
  --dep:var(--sem-green-p);
  --price:var(--sem-amber-p);
  --disc:var(--sem-orange-p);
  --vis:var(--sem-blue-p);
  --invert:var(--plate-fg);
  --on-invert:var(--plate);

  background:var(--plate);
  color:var(--plate-fg);
  border:1px solid var(--plate-line);
  padding:32px;
  overflow:visible;

  /* demo .masthead. Prejšnja različica je meta postavila v desni 264px stolpec
     in stavčna proza se je v njem lomila čez tri vrstice z raztrganim levim
     robom. Masthead je zato en sam stolpec, vse tri vrstice na isti levi osi:
       vrstica 1  PREDMET (ime modela)  serif 36px
       vrstica 2  sklop                 serif 25px
       vrstica 3  kicker                mono 10.5px */
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-content:start;
}
html[data-skin="ink"] .builder .bmain > *{grid-column:1;min-width:0}
html[data-skin="ink"] .builder .bmain > .tag{justify-self:start}
html[data-skin="ink"] .builder .bmain > .tag.gold{grid-row:1}
html[data-skin="ink"] .builder .bmain > h2{grid-row:2}
html[data-skin="ink"] .builder .bmain > h2 + div{
  grid-row:3;
  text-align:left;
  max-width:56ch;
  margin-top:10px;
  line-height:1.7;
}
/* PREDMET dokumenta. V markupu je to <div class="tag gold"> z nizom
   "znamka · model" - torej edini kraj v telesu dokumenta, kjer stoji ime
   vozila. Demo tu blagovnega žetona nima, ker ime nosi masthead pogleda;
   ker CSS živega imena ne more prenesti v .top (14.0), žeton prevzame vlogo
   mastheada tukaj: brez okvirja, brez polnila, brez zlate - samo serif.
   S tem pade tudi --gold-deep, edina druga zlata v pogledu. */
/* F2 (14.8.2026): sekcija 5 da VSEM žetonom white-space:nowrap - za pravi
   24px žeton je to pravilno, za 36px serifni masthead pa je bila to napaka.
   Izmerjeno pri 1440: element je bil širok 610px v 422px stolpcu in "Womondo ·
   Womondo LifeStyle 636" se je odrezal sredi besede, .bmain pa je javil
   scrollWidth 642 / clientWidth 422. Masthead ni žeton: ime modela je stavek
   in se sme prelomiti. overflow-wrap:anywhere lovi še primer, ko je ena sama
   beseda (dolga nemška oznaka) širša od stolpca. Enako velja za kicker v
   railu - ista varianta, isti razlog. */
html[data-skin="ink"] .builder .bmain > .tag.gold{
  display:block;
  height:auto;
  padding:0;
  margin:0 0 8px;
  background:none;
  border:0;
  font-family:var(--fD);
  font-weight:600;
  font-size:36px;
  line-height:1.05;
  letter-spacing:0;
  text-transform:none;
  white-space:normal;
  overflow-wrap:anywhere;
  color:var(--plate-fg);
}
html[data-skin="ink"] .builder .bmain h2{
  font-family:var(--fD);
  font-weight:600;
  font-size:25px;
  line-height:1.05;
  letter-spacing:0;
  color:var(--plate-fg);
  /* studio.js piše inline margin-top:6px in ta zmaga; razmik do predmeta
     zato nastavi margin-bottom žetona zgoraj (8 + 6 = 14). */
  margin:0;
}
/* podnaslov je v studio.js inline stiliran (color + font-size) -> !important
   samo za tipografijo */
html[data-skin="ink"] .builder .bmain h2 + div{
  font-family:var(--fM);
  font-size:10.5px !important;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1.8;
  color:var(--plate-fg2) !important;
  margin-top:8px;
}
/* demo .rule3 med mastheadom in vrsticami */
html[data-skin="ink"] .builder .bmain .optgrid,
html[data-skin="ink"] .builder .bmain .bvwrap{
  display:block;
  gap:0;
  margin:16px 0 0;
  border-top:3px solid var(--plate-fg);
  padding-top:8px;
}
/* obvestilo o pravilih nad črto */
html[data-skin="ink"] .builder .bmain .note{
  background:none;
  border:1px solid var(--plate-fg);
  border-left:1px solid var(--plate-fg);
  padding:16px;
  margin-top:16px;
  font-family:var(--fM);
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.9;
  color:var(--plate-fg2);
}

/* --------------------------------------------------------------------------
   14.4 · VRSTICA OPCIJE (demo .bsec .opt)
   Iz kartice v vrstico: kvadraten ink tick, naziv, mono specifikacija,
   mono cena desno. Slika ostane, a se skrči na majhno sličico.
   -------------------------------------------------------------------------- */
html[data-skin="ink"] .builder .opt{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:12px 0;
  background:none;
  border:0;
  border-bottom:1px solid var(--hair-p);
  overflow:visible;
  transition:none;
}
html[data-skin="ink"] .builder .opt:last-child{border-bottom:0}
html[data-skin="ink"] .builder .opt:hover{background:var(--plate2);border-bottom-color:var(--hair-p)}
html[data-skin="ink"] .builder .opt.sel{border-bottom-color:var(--hair-p);box-shadow:none}
html[data-skin="ink"] .builder .opt:last-child.sel{border-bottom-color:transparent}

/* kvadraten ink tick - vedno viden, poln ko je izbrano.
   legacy (index.html:371) piše background/color z !important, zato tudi tu. */
html[data-skin="ink"] .builder .opt .tick,
html[data-skin="ink"] .builder .bvcard .tick{
  position:static;
  order:-1;
  display:grid;
  place-items:center;
  flex:none;
  width:16px;
  height:16px;
  margin-top:2px;
  border:1.5px solid var(--plate-fg);
  background:none !important;
  color:transparent !important;
  font-size:9px;
  line-height:1;
}
html[data-skin="ink"] .builder .opt.sel .tick,
html[data-skin="ink"] .builder .bvcard.sel .tick{
  background:var(--plate-fg) !important;
  color:var(--plate) !important;
}

html[data-skin="ink"] .builder .opt .ph{
  flex:none;
  width:56px;
  height:42px;
  aspect-ratio:auto;
  margin-top:1px;
  border:1px solid var(--hair-p);
}
html[data-skin="ink"] .builder .opt .obd{
  flex:1;
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:20px;
  align-items:baseline;
  padding:0;
}
html[data-skin="ink"] .builder .opt .obd .on{
  grid-column:1;
  grid-row:1;
  font-size:13.5px;
  font-weight:500;
  line-height:1.35;
  color:var(--plate-fg);
}
html[data-skin="ink"] .builder .opt .obd .odesc{
  grid-column:1;
  grid-row:2;
  margin-top:5px;
  font-family:var(--fM);
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.6;
  color:var(--plate-fg2);
  -webkit-line-clamp:2;
}
html[data-skin="ink"] .builder .opt .obd .op{
  grid-column:2;
  grid-row:1;
  margin-top:0;
  font-family:var(--fM);
  font-size:13px;
  font-weight:400;
  text-align:right;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  color:var(--plate-fg);
}
/* "SERIJSKA OPREMA" / "cena v pregledu" priteče iz priceLabel() kot inline
   stiliran <span style="font-weight:700"> - demo ga pokaže drobno (.inc) */
html[data-skin="ink"] .builder .opt .obd .op span,
html[data-skin="ink"] .builder .bvcard .bvprice span{
  font-size:10px;
  font-weight:400 !important;
  letter-spacing:.08em;
}

/* --------------------------------------------------------------------------
   14.5 · OSNOVNO VOZILO (sklop "Base vehicle")
   V demotu je sklop 01 enak vsem drugim - vrstice, ne kartice.
   -------------------------------------------------------------------------- */
html[data-skin="ink"] .builder .bvbrand{margin-bottom:24px}
html[data-skin="ink"] .builder .bvhead{
  gap:12px;
  padding:0 0 10px;
  margin-bottom:0;
  border-bottom:1px solid var(--plate-fg);
}
html[data-skin="ink"] .builder .bvlogo{width:40px;height:22px}
html[data-skin="ink"] .builder .bvbn{
  font-family:var(--fD);
  font-weight:600;
  font-size:19px;
  letter-spacing:0;
  color:var(--plate-fg);
}
html[data-skin="ink"] .builder .bvcount{
  font-family:var(--fM);
  font-size:10px;
  font-weight:400;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--plate-fg2);
}
html[data-skin="ink"] .builder .bvgrid{display:block;gap:0}
/* stolpec moči je bil 84px, dejanski niz ("140 PS") pa meri okoli 46px -
   med številko in nazivom menjalnika je ostalo ~52px mrtvega zraka. 58px
   stolpec + 14px razmik postavi naziv tik za moč, kot vrstica v demotu. */
html[data-skin="ink"] .builder .bvcard{
  display:grid;
  grid-template-columns:16px 58px minmax(0,1fr) auto;
  column-gap:14px;
  align-items:baseline;
  padding:12px 0;
  background:none;
  border:0;
  border-bottom:1px solid var(--hair-p);
  box-shadow:none;
  transition:none;
}
html[data-skin="ink"] .builder .bvcard:last-child{border-bottom:0}
html[data-skin="ink"] .builder .bvcard:hover{background:var(--plate2);border-bottom-color:var(--hair-p)}
html[data-skin="ink"] .builder .bvcard.sel{border-bottom-color:var(--hair-p);box-shadow:none}
html[data-skin="ink"] .builder .bvcard .bvpow{
  font-family:var(--fM);
  font-weight:500;
  font-size:15px;
  line-height:1.2;
  letter-spacing:0;
  font-variant-numeric:tabular-nums;
  color:var(--plate-fg);
}
html[data-skin="ink"] .builder .bvcard .bvpow small{
  font-family:var(--fM);
  font-size:10px;
  font-weight:400;
  letter-spacing:.08em;
  color:var(--plate-fg2);
}
html[data-skin="ink"] .builder .bvcard .bvmeta{flex:none;min-width:0}
html[data-skin="ink"] .builder .bvcard .bvtrans{
  font-size:13.5px;
  font-weight:500;
  line-height:1.35;
  color:var(--plate-fg);
}
html[data-skin="ink"] .builder .bvcard .bvsteer{
  margin-top:5px;
  font-family:var(--fM);
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--plate-fg2);
}
html[data-skin="ink"] .builder .bvcard .bvprice{
  font-family:var(--fM);
  font-size:13px;
  font-weight:400;
  text-align:right;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  color:var(--plate-fg);
}

/* --------------------------------------------------------------------------
   14.6 · DESNI RAIL = PONUDBA (demo .offer / .ototal)
   -------------------------------------------------------------------------- */
html[data-skin="ink"] .builder .brail{
  position:sticky;
  top:calc(var(--ink-top) + 16px);
  max-height:calc(100vh - var(--ink-top) - 48px);
  padding:32px 32px 0;
  border:1px solid var(--plate-line);
  border-left:1px solid var(--plate-line);
  border-bottom:0;
}
/* masthead ponudbe + demo .rule3 */
html[data-skin="ink"] .builder .brail .sumh{
  padding:0 0 16px;
  border-bottom:3px solid var(--plate-fg);
}
/* znamka je kicker nad imenom modela (demo .mmeta), ne žeton. Brez okvirja in
   brez --gold-deep: v pogledu ostane ena sama zlata (#b5a291). */
html[data-skin="ink"] .builder .brail .sumh .tag.gold{
  display:block;
  height:auto;
  padding:0;
  background:none;
  border:0;
  font-family:var(--fM);
  font-size:10px;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:normal;
  overflow-wrap:anywhere;
  color:var(--plate-fg2);
}
html[data-skin="ink"] .builder .brail .sumh .m{
  font-family:var(--fD);
  font-weight:600;
  font-size:22px;
  line-height:1.08;
  letter-spacing:0;
  color:var(--plate-fg);
  margin-top:8px;
}
/* Izbirnik trga je bil edina nativna OS kontrola v pogledu: prejšnje pravilo
   ni nikoli nastavilo appearance, zato je Chromium risal gumbno ohišje s
   chevronom sredi papirja. appearance:none ga sleče na demotov .mkt.active -
   mono napis z zlato podčrtavo.
   Inline style v studio.js piše background, border, padding in max-width,
   zato jih je treba prebiti z enako težo (seznam geometrije z !important je
   v glavi sekcije).
   Zastavica (curMeta().flag) je del niza <option> in je CSS ne more odstraniti;
   negativni text-indent jo odreže pri levem robu polja, tako da v monokromnem
   railu ne ostane barvni emoji. Odpre se še vedno cel seznam z zastavicami -
   to je OS popup, ne naša ploskev. */
html[data-skin="ink"] .builder .brail select{
  appearance:none;
  -webkit-appearance:none;
  field-sizing:content;
  height:auto;
  /* Dotikljiva tarča >= 24px (WCAG 2.5.8 AA). Ta izbirnik je bil edina
     tarča pod 24px, ki jo je uvedel ta skin: legacy ima 2 premajhni tarči
     na konfiguratorju, ink jih je imel 3 (vs_legacy = ink-introduced).
     Prejsnje pravilo mu je vzelo ohišje (padding:0 0 3px) in ostalo je
     77x19 px. Podčrtava se ne premakne, ker je poravnava vsebine sredinska. */
  min-height:24px;
  max-width:none !important;
  padding:0 0 3px !important;
  background:none !important;
  border:0 !important;
  border-bottom:2px solid var(--gold) !important;
  text-indent:-1.55em;
  overflow:hidden;
  text-overflow:clip;
  font-family:var(--fM) !important;
  font-size:11px !important;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--plate-fg);
}
/* postavke ponudbe (demo .oline) */
html[data-skin="ink"] .builder .brail .sumlist{
  flex:1;
  min-height:0;
  padding:0;
  margin-top:8px;
  overflow:auto;
}
html[data-skin="ink"] .builder .brail .sl{
  gap:14px;
  padding:9px 0;
  border-bottom:1px solid var(--hair-p);
  border-bottom-style:solid;
  font-size:11.5px;
}
html[data-skin="ink"] .builder .brail .sl .n{color:var(--plate-fg2);line-height:1.4}
html[data-skin="ink"] .builder .brail .sl .p{
  font-family:var(--fM);
  font-size:12px;
  color:var(--plate-fg);
  font-variant-numeric:tabular-nums;
}
/* Neto / DDV / Skupaj (demo .osub + .ototal) */
html[data-skin="ink"] .builder .brail .btot{
  padding:16px 0 0;
  border-top:1px solid var(--hair-p);
}
html[data-skin="ink"] .builder .brail .btot > div:not(.tr){
  margin-bottom:0 !important;
  padding:4px 0 0;
  font-family:var(--fM);
  font-size:10px !important;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--plate-fg2) !important;
}
html[data-skin="ink"] .builder .brail .btot > div:not(.tr) span:last-child{
  font-size:12px;
  color:var(--plate-fg);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
html[data-skin="ink"] .builder .brail .btot .tr{
  align-items:flex-end;
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--hair-p);
}
/* studio.js zapiše "Skupaj <zastavica>" (vBuilder(), .btot .tr). Prej je bil
   ta pravi niz skrit s font-size:0 in nadomeščen s CSS besedilom brez
   zastavice - to ni sprejemljivo (prevodi, a11y, izbirnost). Zdaj se prikaže
   pravi niz, oblikuje ga samo tipografija spodaj. Odstranitev barvne emoji
   zastavice iz niza zahteva markup spremembo v vBuilder() (studio.js) -
   odlozeno na fazo, ki se sme dotakniti JS. */
html[data-skin="ink"] .builder .brail .btot .tr > span:first-child{
  font-family:var(--fM);
  font-size:10px !important;
  font-weight:400 !important;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--plate-fg) !important;
  padding-bottom:9px;
}
/* najtežja poteza v pogledu: zlata podčrtava pod totalom */
html[data-skin="ink"] .builder .brail .btot .tr .big{
  font-family:var(--fD);
  font-weight:600;
  font-size:29px;
  line-height:1.05;
  color:var(--plate-fg);
  border-bottom:4px solid var(--gold);
  padding-bottom:4px;
  font-variant-numeric:tabular-nums;
}
/* Dejanja so v demotu ZUNAJ papirja: .plate.offer se konča pri totalu,
   .offer-actions stojijo pod njim na temni podlagi. Zato .bact prebije papir
   z negativnim robom -33px (32px padding + 1px obroba) in se prebarva v
   ohišje; border-top na prvem .bact nariše spodnji rob papirja.
   grid namesto flex, ker legacy .btn nosi flex:1 - v flex stolpcu bi
   flex-basis:0 pojedel višino 40px. */
html[data-skin="ink"] .builder .brail .bact{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin:24px -33px 0;
  padding:24px 0 0;
  background:var(--shell);
  border-top:1px solid var(--plate-line);
}
html[data-skin="ink"] .builder .brail .bact + .bact{
  margin-top:0;
  padding-top:8px;
  border-top:0;
}
/* Teža gumbov je bila obrnjena: polna črna ploskev na dnu je bila najtežja
   masa v pogledu in je vlekla oko stran od zlato podčrtanega totala.
   Demo ima zlato obrobo SAMO na primarni akciji (Zakleni konfiguracijo),
   drugi dve sta enaki tanki obrobi. Gumbi stojijo na ohišju, zato ohišne
   barve. */
html[data-skin="ink"] .builder .brail .bact .btn{
  box-sizing:border-box;
  width:100%;
  padding:0 16px;
  background:none;
  color:var(--shell-fg);
  border:1px solid var(--shell-hair);
}
/* .btn.sec je v railu natanko en gumb - ZAKLENI. :first-of-type ne bi delal,
   ker prvi div v .brail ni .bact ampak nosilec slike. */
html[data-skin="ink"] .builder .brail .bact .btn.sec{
  border:2px solid var(--gold);
  color:var(--acc-text);
}
html[data-skin="ink"] .builder .brail .bact .btn:hover{
  background:var(--shell-fg);
  color:var(--shell);
  border-color:var(--shell-fg);
}
html[data-skin="ink"] .builder .brail .bact .btn.sec:hover{
  background:var(--gold);
  color:var(--plate-fg);
  border-color:var(--gold);
}

/* --------------------------------------------------------------------------
   14.8 · OŽJI ZASLONI (popravek F1, 14.8.2026)

   Mreža iz 14.1 (236 + 372 + 2x32 gap + 2x48 padding = 768px porabljenih,
   preden srednji stolpec dobi prvi piksel) je bila napisana samo za 1440.
   Stranska navigacija ohišja je pod ink skinom široka 247px (legacy 197px),
   zato je za .builder pri 1024 ostalo 777px - srednji stolpec se je izračunal
   na 8px, pri 768 in manj na 0px. Posledice, izmerjene v obeh temah:
   vseh 11 kartic šasije je dobilo širino pod 1px in je izpadlo iz izrisa
   (edini padec C7 v celi matriki), cena "+ €63.926" je pristala pod gumbom
   ZAKLENI, dokument se je prelil za 183px pri 1024 in 439px pri 768.

   Popravek NE skriva nobene kontrole (to bi bil nov padec C7) - samo prelomi
   mrežo. Tri stopnje, meje izbrane po izmerjeni širini srednjega stolpca
   (viewport - 247 rail - padding - stolpci - gap):

     >= 1360   236 / 1fr / 372   trije stolpci, nespremenjeno
     < 1360    236 / 1fr         ponudba se preseli POD vsebino čez vso širino
     <  950    184 / 1fr         ožji outline, tesnejši gap in padding
     <  720    1fr               outline se odlepi in postane omejen skroler

   Meje niso okrogle številke, ampak točke, kjer srednji stolpec pade pod
   ~330px - pod tem se kartica šasije (16 + 58 + naziv + cena z nowrap) ne
   izide. Zato 1360 in ne 1280: pri 1280 bi trije stolpci dali 264px sredine,
   torej isto okvaro v manjšem merilu. Izmerjeno na mejah, ne ocenjeno.

   Ponudba (.brail) pod vsebino ni več sticky in nima več max-height: brez
   tega bi lepljiv element z omejeno višino sredi navadnega toka dokumenta
   zaklenil totale v 100vh visok okvir tam, kjer je stran že drseča.
   .bact ostane z negativnim robom -33px - papir se samo razširi.
   -------------------------------------------------------------------------- */
@media (max-width:1359px){
  html[data-skin="ink"] .builder{
    grid-template-columns:236px minmax(0,1fr);
    gap:32px;
    padding:32px 40px 96px;
  }
  html[data-skin="ink"] .builder .brail{
    grid-column:1 / -1;
    position:static;
    max-height:none;
    margin-top:8px;
  }
}
@media (max-width:949px){
  html[data-skin="ink"] .builder{
    grid-template-columns:184px minmax(0,1fr);
    gap:24px;
    padding:28px 24px 96px;
  }
  /* Kartica šasije je vrstica štirih stolpcev (tick · moč · menjalnik+volan ·
     cena). Pri 264px srednjega stolpca cena z nowrap in 16+58px fiksnih
     stolpcev pustita nazivu ~80px, kar mu odreže 56px besedila. Cena zato
     pade v drugo vrstico pod naziv - nič se ne skrije, vrstica samo zadiha. */
  html[data-skin="ink"] .builder .bvcard{
    grid-template-columns:16px 58px minmax(0,1fr);
    row-gap:4px;
  }
  html[data-skin="ink"] .builder .bvcard .bvprice{
    grid-column:2 / -1;
    text-align:left;
  }
  /* glava znamke je flex vrstica logo + ime + števec z margin-left:auto;
     pod ~230px se števec ne umakne sam, zato vrstici dovolimo prelom */
  html[data-skin="ink"] .builder .bvhead{flex-wrap:wrap}
}
@media (max-width:719px){
  html[data-skin="ink"] .builder{
    grid-template-columns:minmax(0,1fr);
    gap:20px;
    padding:24px 16px 96px;
  }
  html[data-skin="ink"] .builder .bnav{
    position:static;
    max-height:264px;
  }
}

/* --------------------------------------------------------------------------
   14.9 · MASTHEAD NA OŽJIH ZASLONIH (sekcija 3, popravek F6)

   Nujen pogoj za F1: po prelomu mreže je konfigurator pri 768px imel še vedno
   96px preliva dokumenta, a ta ni prihajal iz .builder, ampak iz glave ohišja.
   .top je flex vrstica h1(36px) + .sp + .searchbox(min-width:260px); pri 768
   ima main 521px, po 48px robovih ostane 425px, iskalnik pa se zaradi
   min-width ni smel skrčiti in je gledal 96px čez desni rob (isti simptom je
   README opisal kot F6 na dashboardu in pretvorniku).

   Iskalnika NE skrivamo (14.0: view-dealer.js:323 bere njegovo vrednost, in
   skrita kontrola bi bila nov padec C7) - samo mu dovolimo, da se skrči.
   48px rob ostane nedotaknjen, ker .wrap in .top delita isti rob dokumenta
   (sekcija 3) - zato se namesto roba zmanjša naslov. Višina vrstice se ne
   spremeni: iskalnik (40px) je še vedno najvišji element, 26 + 40 + 14 = 80,
   torej --ink-top iz 14.1 drži naprej.
   -------------------------------------------------------------------------- */
@media (max-width:1023px){
  html[data-skin="ink"] .top h1{font-size:26px}
  html[data-skin="ink"] .searchbox{min-width:0;flex:0 1 220px}
  html[data-skin="ink"] .searchbox input{box-sizing:border-box;min-width:0}
}


/* ==========================================================================
   === Ceniki ===
   F4 · pogled "Price lists" -> vPricebook() iz view-pricebook.js · 13.8.2026
   Ziva koda svoj <style id="pb-css"> injicira v <head> sele ob prvem izrisu,
   torej ZA to datoteko. Prefiks html[data-skin="ink"] (0,2,1) premaga
   injicirani .pb-row / .pb-calc (0,1,0) ne glede na vrstni red nalaganja.
   Bar: demo pogled `cenik` (studio-ink-monolith-demo.html, vCenik).

   KAJ PREVAJAMO
   Demo je EN list papirja: masthead (serif h2 + zigi) -> mono meta trak ->
   3px crta v crnilu -> dokumentna tabela (verzalna razprta glava nad 3px
   crto, 1px hairline vrstice, brez navpicnih crt, stevilke mono desno,
   override oznacen z zlatim kvadratkom).

   Ziva koda izrise SEDEM SESTER v .wrap (JS se ne sme dotakniti):
     .sectitle -> .pb-note -> .pb-kpis -> .pb-bar -> [.pb-params]
     -> .pb-tbl -> .pb-more
   Ovoja okoli njih ni, zato lista papirja ne moremo nariseti z eno plosco.
   Namesto tega vsaka sestra dobi ISTO papirno podlago, robova levo/desno in
   niclo margine - skupaj sestavijo en neprekinjen list. Prva ima zgornji rob,
   zadnja spodnjega.

   3px CRTA (demo .rule3) je zgornji rob .pb-tbl - element zanjo ne obstaja.
   META TRAK (demo .metabar) je .pb-kpis: cipi izgubijo skatlo in postanejo
   mono verzalni niz z vrednostjo v crnilu, tocno kot demo `DDV <b>19 %</b>`.

   PLOSKOST
   Brez gradientov, brez senc, radij 0, edina zlata je var(--gold) #b5a291
   (kvadratek za override, podcrtava aktivnega tierja, zaklenjeno polje).
   ========================================================================== */

/* --- 14.1 · PAPIRNI KONTEKST + PODLAGA ------------------------------------
   Ista pogodba kot B2 v tokens.css, samo lokalno za sestre cenika. Brez tega
   .pb-search in .pb-bar padeta na --dense (temna kartica) in bi na papirju
   izginila. Deklarirano tu, ne v tokens.css, da je cel pogled na enem mestu.
   OPOZORILO: v tem seznamu NI :has() - neveljaven selektor bi v starem
   brskalniku podrl celo pravilo in s tem ves papir. :has() je v 14.2, sam. */
html[data-skin="ink"] .pb-note,
html[data-skin="ink"] .pb-kpis,
html[data-skin="ink"] .pb-bar,
html[data-skin="ink"] .pb-params,
html[data-skin="ink"] .pb-tbl,
html[data-skin="ink"] .pb-more{
  --bg:var(--plate);
  --panel:var(--plate);
  --panel-solid:var(--plate);
  --panel2:var(--plate2);

  --ink:var(--plate-fg);
  --ink2:var(--plate-fg2);
  --ink-2:var(--plate-fg2);
  --mut:var(--plate-mut);
  --faint:var(--plate-faint);

  --line:var(--hair-p);
  --line2:var(--hair-p2);
  --hair:var(--hair-p);

  /* EDINA ZLATA JE var(--gold) #b5a291 - kot pise v glavi razdelka.
     Prej sta tu stali se dve izpeljanki in obe sta se tudi izrisali:
       --gold-deep (#887A6D) je barval .pb-badge in zlati cip meta traku,
       --price -> --sem-amber-p (#8A6D2A) pa je prek inline stila
       style="color:var(--price)" (view-pricebook.js:260) pobarval opozorilo
       v uvodni opombi.
     To so bile TRI zlate na enem listu; demo jih ima eno. --gold-deep je
     zato zbrisan (nihce v tem pogledu ga vec ne bere), --price pa pade na
     crnilo. Kjer je bil poudarek, ga zdaj nosi 3px zlata podcrtava - demo
     .stamp.gold-u. */
  --excl:var(--sem-red-p);
  --dep:var(--sem-green-p);
  --price:var(--plate-fg2);
  --disc:var(--sem-orange-p);
  --vis:var(--sem-blue-p);

  --invert:var(--plate-fg);
  --on-invert:var(--plate);

  background:var(--plate);
  color:var(--plate-fg);
  border:0;
  border-left:1px solid var(--plate-line);
  border-right:1px solid var(--plate-line);
  margin:0;
}

/* --- 14.2 · MASTHEAD (demo .masthead) ------------------------------------
   .sectitle uporabljajo tudi drugi pogledi, zato ga smemo prevzeti samo,
   kadar vsebuje gumb cenika. Edini nacin brez posega v JS je :has(), zato
   je to pravilo LOCENO: ce ga brskalnik ne pozna, ostane .sectitle tak, kot
   ga nastavi razdelek 4 (naslov na ohisju) - pogled je se vedno uporaben.
   font-size na h2 je !important, ker ga JS zapise inline (style="font-size:17px")
   in inline deklaracije ne premaga noben navaden selektor. */
html[data-skin="ink"] .sectitle:has(> .pb-btn){
  --panel:var(--plate);
  --panel2:var(--plate2);
  --ink:var(--plate-fg);
  --ink2:var(--plate-fg2);
  --mut:var(--plate-mut);
  --faint:var(--plate-faint);
  --line:var(--hair-p);
  --hair:var(--hair-p);
  --invert:var(--plate-fg);
  --on-invert:var(--plate);

  display:flex;
  align-items:flex-end;
  gap:24px;
  background:var(--plate);
  color:var(--plate-fg);
  border:0;
  border-top:1px solid var(--plate-line);
  border-left:1px solid var(--plate-line);
  border-right:1px solid var(--plate-line);
  padding:32px 32px 0;
  margin:0;
}
html[data-skin="ink"] .sectitle:has(> .pb-btn) h2{
  font-family:var(--fD);
  font-weight:600;
  font-size:25px !important;
  line-height:1.05;
  letter-spacing:normal;
  text-transform:none;
  color:var(--ink);
}
html[data-skin="ink"] .sectitle:has(> .pb-btn) .count{
  font-family:var(--fM);
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink2);
  padding-bottom:4px;
}

/* --- 14.3 · UVODNA OPOMBA -------------------------------------------------
   V demotu je nima noben dokument; ostane, ker pojasnjuje izracun. Zato mora
   biti DROBNI TISK, ne README: manjsa, sivejsa, s krajso vrstico in brez
   krepkega pikcanja (sest <b> v enem odstavku je bilo najglasnejse besedilo
   na listu; padejo na navadno rezo).

   MERILO NI max-width. .pb-note je ena od sedmih sester, ki skupaj sestavijo
   list papirja, in nosi njegov levi in desni rob. Ozji element bi desni rob
   potegnil na sredino lista in ga prerezal. Merilo zato omeji DESNI ROB,
   skatla pa ostane cez cel stolpec. max() jamci, da rob nikoli ne pade pod
   32px in da izracun nikoli ne postane negativen (ozko okno). */
html[data-skin="ink"] .pb-note{
  padding:14px 32px 0;
  padding-right:max(32px, calc(100% - 96ch - 32px));
  font-size:11.5px;
  line-height:1.65;
  color:var(--plate-mut);
  max-width:none;
}
html[data-skin="ink"] .pb-note b{color:var(--plate-fg2);font-weight:400}

/* --- 14.4 · META TRAK (demo .metabar) -------------------------------------
   .pb-chip je v razdelku 5 zig s skatlo; tu izgubi skatlo in postane clen
   meta traku. Vrednost (<b>) gre v polno crnilo, tocno kot demo. */
html[data-skin="ink"] .pb-kpis{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 32px;
  padding:18px 32px 0;
  font-family:var(--fM);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink2);
}
html[data-skin="ink"] .pb-kpis .pb-chip{
  display:inline;
  height:auto;
  padding:0;
  border:0;
  background:none;
  font-family:var(--fM);
  font-size:11px;
  font-weight:400;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink2);
  white-space:nowrap;
}
html[data-skin="ink"] .pb-kpis .pb-chip b{color:var(--ink);font-weight:500}
/* poudarjeni clen meta traku: crnilo + 3px zlata podcrtava (demo .stamp.gold-u),
   ne druga zlata barva */
html[data-skin="ink"] .pb-kpis .pb-chip.gold b{
  color:var(--ink);
  border-bottom:3px solid var(--gold);
}

/* --- 14.5 · VRSTICA KRMILNIKOV -------------------------------------------
   Vsi krmilniki na 40px, da je vrstica ena ravna linija (demo .btn). */
html[data-skin="ink"] .pb-bar{
  gap:12px;
  align-items:center;
  padding:18px 32px 18px;
}
html[data-skin="ink"] .pb-sel,
html[data-skin="ink"] .pb-search{
  height:40px;
  padding:0 12px;
  border:1px solid var(--hair-p);
  background:var(--plate);
  color:var(--ink);
  font-family:var(--fM);
  font-size:11.5px;
  letter-spacing:.04em;
}
html[data-skin="ink"] .pb-search::placeholder{
  color:var(--faint);
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* preklop Customer | Dealer = par zigov (demo .tabsrow .stamp / .stamp.act).
   Ziva koda tu trdo zapise color:#fff na svetlo polnilo var(--ink) - pod ink
   skinom je to bela na skoraj beli, torej neberljivo. Popravek: polnilo v
   crnilu povrsine + besedilo v barvi papirja, aktiven se zlato podcrta. */
html[data-skin="ink"] .pb-seg{border:1px solid var(--ink)}
html[data-skin="ink"] .pb-seg button{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  height:40px;
  padding:0 18px;
  background:none;
  color:var(--ink2);
  border-bottom:3px solid transparent;
  font-family:var(--fM);
  font-size:11px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
}
html[data-skin="ink"] .pb-seg button+button{border-left:1px solid var(--ink)}
html[data-skin="ink"] .pb-seg button.on,
html[data-skin="ink"] .pb-seg button.on.dealer{
  background:var(--invert);
  color:var(--on-invert);
  border-bottom-color:var(--gold);
}
/* odprte nastavitve: zlata podcrtava namesto zlatega besedila (demo .stamp.gold-u) */
html[data-skin="ink"] .pb-btn.on{
  border-color:var(--ink);
  border-bottom:3px solid var(--gold);
  color:var(--ink);
}

/* --- 14.6 · PANEL NASTAVITEV ---------------------------------------------- */
html[data-skin="ink"] .pb-params{
  border-top:1px solid var(--hair-p);
  padding:18px 32px 20px;
}
html[data-skin="ink"] .pb-params h4{
  font-family:var(--fM);
  font-size:10px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  margin:0 0 6px;
}
html[data-skin="ink"] .pb-params .warn{font-size:11.5px;line-height:1.6;color:var(--price)}
html[data-skin="ink"] .pb-params .warn b{color:var(--ink);font-weight:600}
html[data-skin="ink"] .pb-pfld label{
  font-family:var(--fM);
  font-size:9.5px;
  font-weight:400;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink2);
}
html[data-skin="ink"] .pb-pfld input{
  height:32px;
  padding:0 9px;
  border:1px solid var(--hair-p);
  background:var(--plate2);
  color:var(--ink);
  font-family:var(--fM);
  font-size:12.5px;
  font-variant-numeric:tabular-nums;
}
html[data-skin="ink"] .pb-pfld input.def{color:var(--ink2)}
/* .pb-pfld .row je navadni div, ki pa ga ujame splosno pravilo za .row
   (razdelek 7) in mu podtakne spodnji hairline - v panelu je to tuja crta */
html[data-skin="ink"] .pb-pfld .row{border-bottom:0}
html[data-skin="ink"] .pb-pfld .u{
  font-family:var(--fM);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--faint);
}
html[data-skin="ink"] .pb-pfld .tag{height:20px;font-size:9px;letter-spacing:.08em}

/* --- 14.7 · DOKUMENTNA TABELA --------------------------------------------
   Zgornji rob 3px = demo .rule3 (elementa zanjo v zivem markupu ni).
   24px razmika do glave je demo table.doc{margin-top:24px}. */
html[data-skin="ink"] .pb-tbl{
  border-top:3px solid var(--ink);
  padding:24px 32px 0;
}
/* glava = demo table.doc th: brez polnila, verzalke, razprto, nad 3px crto.
   Polnilo ostane papir, ker je vrstica position:sticky in mora ob drsenju
   nekaj prekrivati - prosojna glava bi se razmazala cez vrstice. */
html[data-skin="ink"] .pb-row.hd{
  background:var(--plate);
  border-bottom:3px solid var(--ink);
}
html[data-skin="ink"] .pb-row.hd .pb-c{
  justify-content:flex-end;
  padding:0 12px 10px 0;
  font-family:var(--fB);
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
}
/* vrstice: samo vodoravni hairline, nobene navpicne crte (demo table.doc td) */
html[data-skin="ink"] .pb-row{border-bottom:1px solid var(--hair-p)}
/* ENA OSNOVNICA NA VRSTICO.
   Ziva koda postavi .pb-c{justify-content:center} (view-pricebook.js:188).
   Ker je celica navpicen flex, se enovrsticna stevilka navpicno centrira ob
   dvovrsticni sklad IME + KODA in nobeni dve celici ne stojita na isti crti
   (izmerjeno: vrhovi 10/17/17/19/17/19/13/10 px).
   flex-start jih poravna na PRVO vrstico celice, enotna visina vrstice spodaj
   (16,875px za vse celicne pisave) pa poskrbi, da so vrsticne skatle enako
   visoke - torej sedi na isti crti tudi osnovnica, ne le vrh. */
html[data-skin="ink"] .pb-c{
  border-right:0;
  justify-content:flex-start;
  padding:8px 12px 8px 0;
  gap:0;
}
html[data-skin="ink"] .pb-row .pb-c:last-child{padding-right:0}

/* --- 14.8 · CELICE -------------------------------------------------------- */
html[data-skin="ink"] .pb-name{
  font-family:var(--fB);
  font-size:12.5px;
  line-height:1.35;
  color:var(--ink);
}
/* koda = demo td.cd (mono, ink2); v zivem markupu stoji pod imenom, ne v svojem stolpcu */
html[data-skin="ink"] .pb-code{
  font-family:var(--fM);
  font-size:11.5px;
  line-height:1.25;
  letter-spacing:normal;
  color:var(--ink2);
}
/* stevilke = demo td.num: mono, tabularno, desno */
html[data-skin="ink"] .pb-net,
html[data-skin="ink"] .pb-calc,
html[data-skin="ink"] .pb-tag,
html[data-skin="ink"] .pb-disc{
  font-family:var(--fM);
  font-size:12.5px;
  font-weight:400;
  line-height:1.35;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
}
html[data-skin="ink"] .pb-net{color:var(--ink2)}
/* ziva koda ima tu trdo kodiran #2e7d5b - prevedemo v semanticni token */
html[data-skin="ink"] .pb-disc{color:var(--dep)}
/* prazna vrednost = demo .na: mono, brez lezece pisave */
html[data-skin="ink"] .pb-tag.na,
html[data-skin="ink"] .pb-calc.na{
  font-family:var(--fM);
  font-size:10.5px;
  font-weight:400;
  font-style:normal;
  line-height:1.61;
  letter-spacing:.04em;
  color:var(--ink2);
}
/* podnapis vira cene = demo .ovr-l */
html[data-skin="ink"] .pb-sub{
  font-family:var(--fM);
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink2);
}
/* VIR CENE OSTANE VIDEN PRI VSAKI VRSTICI.
   UMAKNJENO 13.8.2026 (BLOKER). Prejsnja razlicica je imela
       .pb-row .pb-c:last-child .pb-sub{display:none}
   z utemeljitvijo, da je v zadnjem stolpcu samo ponavljajoc "SQ CENIK".
   To ni res: view-pricebook.js:358 izpise TRI razlicne vire -
       'posebna cena'  (razred .manual, rocni override)
       'SQ cenik'      (cena je prebrana iz cenika)
       'avto-izracun'  (cene v ceniku NI, izpeljana je iz pravil)
   Skrit je bil vsak razen .manual, torej tudi 'avto-izracun'. Izpeljana cena
   je s tem izgledala kot cenikovna - izguba podatka v edinem pogledu, kjer se
   cene dolocajo. Ponovitev besede "SQ CENIK" je manjse zlo od tega.
   Podnapis "+na osnovo" v stolpcu SQ CENA ni bil nikoli prizadet. */
/* tipska znacka pred imenom je inline stilirana v JS (tri trde barve +
   border-radius:3px). Inline deklaracije premaga samo !important; tu jo
   poenotimo v crnilo in ostri rob - crka v njej nosi isto informacijo. */
html[data-skin="ink"] .pb-c span[title][style*="border-radius"]{
  border-radius:0 !important;
  color:var(--ink2) !important;
  border-color:var(--ink2) !important;
  font-weight:500 !important;
}

/* --- 14.9 · OVERRIDE (demo .ovr / .ovr-l) --------------------------------
   Edini zlati poudarek v pogledu: kvadratek pred oznako "posebna cena" in
   zlata podcrtava zaklenjenega polja. Brez toniranega polnila. */
/* Polje ni skatla, ampak vpisna crta v dokumentu: brez polnila, samo spodnji
   hairline. Sivo polnilo iz zive kode je edina stvar v pogledu, ki je se
   izgledala kot aplikacijski krom in ne kot papir. */
/* Polje je edina celica, ki ni besedilo, ampak skatla, zato njegova crka
   privzeto pade 5px pod osnovnico vrstice. Negativni zgornji rob jo dvigne
   nanjo; visina (in s tem tarca za klik) ostane nespremenjena, spodnji
   hairline pa ostane vpisna crta pod besedilom. */
html[data-skin="ink"] .pb-oin{
  height:28px;
  margin-top:-5px;
  padding:0 2px;
  border:0;
  border-bottom:1px solid var(--hair-p);
  background:none;
  color:var(--ink);
  font-family:var(--fM);
  font-size:12.5px;
  font-variant-numeric:tabular-nums;
}
html[data-skin="ink"] .pb-oin::placeholder{color:var(--faint)}
html[data-skin="ink"] .pb-oin:focus{
  background:none;
  border-bottom-color:var(--gold);
}
html[data-skin="ink"] .pb-oin.locked{
  background:none;
  border-bottom:2px solid var(--gold);
}
html[data-skin="ink"] .pb-sub.manual{color:var(--ink)}
html[data-skin="ink"] .pb-sub.manual::before{
  content:'';
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--gold);
  margin-right:8px;
  vertical-align:1px;
}
/* zig s tiskom v crnilu in 3px zlato podcrtavo = demo .stamp.gold-u.
   Prej je bil ves zig pobarvan z izpeljano zlato (--gold-deep) - druga zlata. */
html[data-skin="ink"] .pb-badge{
  height:20px;
  padding:0 6px;
  margin-top:5px;
  background:none;
  border:1px solid var(--ink);
  border-bottom:3px solid var(--gold);
  color:var(--ink);
  font-family:var(--fM);
  font-size:9px;
  font-weight:500;
  letter-spacing:.08em;
}
html[data-skin="ink"] .pb-badge:hover{background:var(--gold);color:var(--ink)}

/* --- 14.10 · NOGA DOKUMENTA (paginacija) ---------------------------------- */
html[data-skin="ink"] .pb-more{
  border-bottom:1px solid var(--plate-line);
  padding:20px 32px 32px;
  margin:0 0 24px;
  gap:16px;
  font-family:var(--fM);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink2);
}
/* isti razred sluzi tudi sporocilu "ni zadetkov" ZNOTRAJ tabele - tam ni noga */
html[data-skin="ink"] .pb-tbl .pb-more{
  border:0;
  padding:32px 0;
  margin:0;
}

/* --- 14.11 · TOAST --------------------------------------------------------
   Ziva koda ga pripne desno spodaj, kjer pod ink skinom stojita preklopnika
   teme in skina (razdelek 13) - dvignemo ga nadnju. */
html[data-skin="ink"] .pb-toast{
  right:20px;
  bottom:64px;
  padding:12px 16px;
  background:var(--shell-fg);
  color:var(--shell);
  border:1px solid var(--gold);
  border-left:3px solid var(--gold);
  font-family:var(--fM);
  font-size:11px;
  line-height:1.5;
  letter-spacing:.06em;
}
html[data-skin="ink"] .pb-toast.err{
  border-color:var(--sem-red-p);
  border-left-color:var(--sem-red-p);
}


/* ==========================================================================
   === Naročila (kanban) ===
   F4 · pogled "Orders" (view-kanban.js vKanban) · 13.8.2026
   Vir: demo studio-ink-monolith-demo.html, pogled 'narocila'
        (.kcol .kh .kc .lockcnt .krule .kcard .nm .co .mo .ft .kempty .cmdbar).

   Živi pogled riše view-kanban.js in svoj <style id="kanban-css"> injicira
   v <head> ŠELE ob prvem izrisu - torej ZA to datoteko. Zato vsako pravilo
   spodaj potrebuje prefiks html[data-skin="ink"]: (0,2,1) premaga injicirani
   .kbcard / .kbcolh (0,1,0) ne glede na vrstni red nalaganja.

   TRAK -> DOKUMENT (popravek 13.8.2026). Prej je bilo tu zapisano, da je
   grupiranje 14 stolpcev "poseg v markup". Pol resnice: poglavja (A ŠASIJE,
   B PRODAJA …) res potrebujejo markup, PRELOM stolpcev v vrstice pa ne -
   .kbboard iz vodoravnega flex traku (view-kanban.js:51 display:flex +
   overflow-x:auto) preide v mrežo s fiksno 258px kolono, ki se sama prelomi.
   Meritev prej: scrollWidth 3820 / clientWidth 1304 = 2516px (dve tretjini
   deske) za vodoravnim drsnikom, zadnji vidni stolpec prerezan sredi cene.
   Zdaj: 0 vodoravnega drsenja, 5 stolpcev na vrstico, korak 274px - ista
   geometrija kot demo .band-cols (izmerjeni x: 296/570/844/1118/1392).

   ČESAR TU NI (ker brez JS ni mogoče): žig faze na sami kartici in besedilo
   poglavij. Kartica v živem markupu NE nosi imena faze (nosi ga glava
   stolpca), CSS pa besedila ne more prebrati. Edini žig, ki ga tu narišemo,
   stoji na PODATKU, ki na kartici res obstaja - .lockdt (Zaklenjen …,
   view-kanban.js:260, o.lockedAt). Vpisovanje imen faz ali poglavij prek
   content: bi pomenilo podvajanje podatkov v slogovni plasti in bi ob vsaki
   spremembi KANBAN_ORDER tiho lagalo.
   ========================================================================== */

/* --- deska = pola dokumenta, ne trak ------------------------------------- */
html[data-skin="ink"] .kbboard{
  display:grid;
  grid-template-columns:repeat(auto-fill,258px);
  justify-content:start;
  align-items:start;
  /* 16px = korak 274px, natanko kot demo .band-cols; 24px bi pri 1384px
     stolpcu vsebine spustil vrstico na 4 stolpce in pustil 280px praznine */
  column-gap:16px;
  row-gap:48px;
  overflow-x:visible;
  padding-bottom:0;
}

/* --- stolpec = list papirja (demo .kcol) --------------------------------- */
html[data-skin="ink"] .kbcol{
  flex:none;
  width:258px;
  padding:16px 16px 24px;
}

/* Prazne faze (v privzeti deski jih je 9 od 14, dve prvi v branju) se ne
   skrijejo - "Locked By Dealer" proti "Locked By System" pri 0 je nosilen
   podatek in ga view-kanban.js:8 namenoma vedno izriše. Namesto lista papirja
   postanejo ena vrstica kazala in se preselijo NA KONEC dokumenta (order),
   da glavnina ne začne z dvema praznima polama. */
html[data-skin="ink"] .kbcol:has(.kbempty){
  order:1;
  padding:12px 16px;
}
html[data-skin="ink"] .kbcol:has(.kbempty) .kbcolh{border-bottom-width:1px}
html[data-skin="ink"] .kbcol:has(.kbempty) .kbcolh .sum,
html[data-skin="ink"] .kbcol:has(.kbempty) .kbempty{display:none}
html[data-skin="ink"] .kbcol:has(.kbempty) .kbcards{padding:0;min-height:0}

/* glava stolpca: uppercase labela + mono števec, pod njo težka črnilna črta
   (demo .kh + .kc + .krule). Sticky odpade: dokler je bila deska vodoravni
   drsnik, je bila sama svoj scrollport in je bil sticky brez učinka; v mreži
   bi se glava odlepila in obtičala pod mastheadom (z-index 1 proti 20).
   V demotu je .kh navadna glava poglavja - static. */
html[data-skin="ink"] .kbcolh{
  position:static;
  padding:0 0 12px;
  background:var(--plate);
  border-bottom:3px solid var(--ink);
}
/* FAZA JE NAJPOMEMBNEJŠA STVAR NA DESKI (Rokova zahteva 14.8.2026: "TO MORAŠ
   DATI RES NA VELIKO IN RES OPAZNO"). Ime faze zato ni več drobna verzalka,
   ampak naslov poglavja v Fraunces - enako težo ima kot naslov plošče. */
html[data-skin="ink"] .kbcolh .t{
  font-family:var(--fD);
  font-size:19px;
  font-weight:600;
  letter-spacing:-.01em;
  text-transform:none;
  line-height:1.1;
  min-height:0;
  gap:6px 10px;
}
/* razširjen stolpec: ista teža, le večja stopnja */
html[data-skin="ink"] .kbexph .t{
  font-family:var(--fD);
  font-size:26px;
  font-weight:600;
  letter-spacing:-.01em;
  text-transform:none;
}
html[data-skin="ink"] .kbexph .cnt{
  font-size:16px;
  color:var(--ink);
  border-bottom:3px solid var(--gold);
  padding:0 2px 1px;
}
html[data-skin="ink"] .kbcolh .cnt{
  background:none;
  border:0;
  padding:0 2px 1px;
  font-family:var(--fM);
  font-size:15px;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--ink);
  border-bottom:3px solid var(--gold);
  font-variant-numeric:tabular-nums;
}
html[data-skin="ink"] .kbcolh .sum{
  margin-top:10px;
  font-family:var(--fM);
  font-size:12px;
  font-weight:400;
  letter-spacing:.04em;
  color:var(--ink2);
  font-variant-numeric:tabular-nums;
}

/* zlata podčrtava pri lock stopnjah (demo .lockcnt).
   SAMO podatkovni signal: stolpec, ki vsebuje vsaj eno zaklenjeno naročilo.
   Prejšnja različica je imela še nth-child(8|9|10) po fiksnem KANBAN_ORDER -
   izbrisano 13.8.2026: v živem izrisu je zlato risala pod tri števce, od
   katerih sta dva brala "0", torej je edini poudarek znamke kazal na prazne
   stolpce, in bi ob vsaki spremembi KANBAN_ORDER tiho zdrsnila drugam. */
html[data-skin="ink"] .kbcol:has(.kbcard .lockdt) .kbcolh .cnt{
  padding:0 6px 2px;
  border-bottom:3px solid var(--gold);
}

/* --- kartica = mini listina (demo .kcard) --------------------------------
   Vrstni red v markupu je (18.8.2026, Rokova pritožba "NA VELIKO naj bo
   distributer, ne kdo je naročil vozilo" - view-kanban.js _kbCardHtml):
   št.+država → veliko ime (trgovec, ali kupec če trgovca ni) → podvrstica
   (kdo je naročil, ali značka B2C) → model → skrbnik+oznaka → noga. To je
   ŽE natančno bralni vrstni red, zato flex `order` spodaj samo potrjuje
   DOM zaporedje (prej, ko je bila št. tretja v markupu, je order:N edini
   način, da pristane vizualno prva "brez posega v JS" - ta omejitev je
   18.8.2026 odpadla, order pa je ostal, ker je numerično že usklajen in ga
   ni več treba spreminjati vsakič, ko se markup premakne). */
html[data-skin="ink"] .kbcards{padding:12px 0 0;gap:12px}

html[data-skin="ink"] .kbcard{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--plate);
  border:1px solid var(--hair-p);
  padding:12px 12px 10px;
  transition:none;
}
html[data-skin="ink"] .kbcard:hover{border-color:var(--ink)}

/* mono številka listine + (18.8.2026) drzava kot mono znacka. Prostor za zig
   ob njej se rezervira samo na karticah, ki zig res nosijo; prej ga je
   min-height:20px drzal na vseh (v privzeti deski 60/60 brez ziga = prazna
   prva vrstica povsod). */
html[data-skin="ink"] .kbcard .no{
  order:1;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  min-height:0;
  margin:0;
  font-family:var(--fM);
  font-size:10.5px;
  letter-spacing:.02em;
  color:var(--ink2);
  font-variant-numeric:tabular-nums;
}
html[data-skin="ink"] .kbcard:has(.lockdt) .no{min-height:20px}
html[data-skin="ink"] .kbcard .no .ctry{
  font-size:9px;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--ink2);
  border:1px solid var(--hair-p);
  padding:1px 5px;
}
/* polno ime v Fraunces - trgovec/podjetje, ali kupec če trgovca ni (B2C) */
html[data-skin="ink"] .kbcard .cust{
  order:2;
  margin-top:6px;
  font-family:var(--fD);
  font-size:17px;
  font-weight:600;
  line-height:1.15;
  letter-spacing:0;
  color:var(--ink);
}
/* podvrstica: "Narocil: <kupec>" pod trgovcem, ali znacka B2C, ce trgovca ni */
html[data-skin="ink"] .kbcard .co{
  order:3;
  margin-top:2px;
  font-size:11px;
  color:var(--ink2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
html[data-skin="ink"] .kbcard .co .b2c{
  display:inline-block;
  font-family:var(--fM);
  font-size:9px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink2);
  border:1px solid var(--hair-p);
  padding:1px 6px;
}
html[data-skin="ink"] .kbcard .mdl{
  order:4;
  margin-top:8px;
  font-size:12px;
  line-height:1.35;
  color:var(--ink2);
}
/* skrbnik + prva oznaka iz o.tags kot zig - vrstica se izriše samo, ce vsaj
   eden od obeh obstaja (view-kanban.js:_kbCardHtml). V zivih podatkih
   (18.8.2026) je o.tags vedno prazen, torej .ktag danes v praksi ne obstaja -
   glej porocilo naloge. */
html[data-skin="ink"] .kbcard .repwrap{
  order:5;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
}
html[data-skin="ink"] .kbcard .repwrap .rep{
  font-family:var(--fM);
  font-size:9.5px;
  letter-spacing:.02em;
  color:var(--ink2);
}
html[data-skin="ink"] .kbcard .repwrap .ktag{
  font-family:var(--fM);
  font-size:9px;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink);
  border-bottom:2px solid var(--gold);
  padding:0 2px 1px;
}
/* noga: datum levo, znesek mono desno. V markupu je znesek PRVI, zato
   row-reverse - vsebina ostane nedotaknjena, obrne se samo smer osi. */
html[data-skin="ink"] .kbcard .foot{
  order:6;
  flex-direction:row-reverse;
  margin-top:12px;
  padding-top:8px;
  border-top:1px solid var(--hair-p);
}
html[data-skin="ink"] .kbcard .foot .dt{
  font-family:var(--fM);
  font-size:10px;
  letter-spacing:.02em;
  color:var(--ink2);
}
html[data-skin="ink"] .kbcard .foot .pr{
  font-family:var(--fM);
  font-size:13px;
  font-weight:500;
  letter-spacing:0;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}

/* zadnjih 5 + razširjen stolpec: gumb "Vseh N" in glava razširitve v ink jeziku
   (mono verzalke, črnilne črte, brez zaobljenj - podeduje iz reset). */
html[data-skin="ink"] .kbmore{
  font-family:var(--fM);
  font-size:10px;
  font-weight:500;
  letter-spacing:.1em;
  color:var(--ink2);
  border-top:1px solid var(--hair-p);
  padding:10px 0 2px;
}
html[data-skin="ink"] .kbmore:hover{color:var(--ink);background:none}
html[data-skin="ink"] .kbexph{margin:0 0 20px}
html[data-skin="ink"] .kbexph .t{
  font-family:var(--fB);
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}
html[data-skin="ink"] .kbexph .cnt{
  background:none;border:0;padding:0;
  font-family:var(--fM);font-size:11px;font-weight:400;color:var(--ink2);
  font-variant-numeric:tabular-nums;
}
html[data-skin="ink"] .kbexph .sum{
  font-family:var(--fM);font-size:11px;font-weight:400;color:var(--ink2);
  font-variant-numeric:tabular-nums;
}
html[data-skin="ink"] .kbback{
  font-family:var(--fM);
  font-size:10px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  border:1px solid var(--ink);
  background:none;
  color:var(--ink);
  height:40px;display:inline-flex;align-items:center;padding:0 16px;
}
html[data-skin="ink"] .kbback:hover{background:var(--ink);color:var(--plate)}
html[data-skin="ink"] .kbgrid{gap:12px}
/* razširjena mreža stoji na lupini (ni plošče pod sabo) - kartice so plošče same */

/* žig zaklepa: edini žig, ki ga kartica res nosi kot podatek. Postavljen je
   v prvo vrstico desno od številke (demo .stamp.mini.fill). */
html[data-skin="ink"] .kbcard .lockdt{
  position:absolute;
  top:12px;
  right:12px;
  display:inline-flex;
  align-items:center;
  height:20px;
  margin:0;
  padding:0 6px;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--plate);
  font-family:var(--fM);
  font-size:9px;
  font-weight:500;
  letter-spacing:.08em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
}
/* zaklenjeno naročilo: zlata podčrtava pod zneskom (demo .pr.goldline) */
html[data-skin="ink"] .kbcard:has(.lockdt) .foot .pr{
  border-bottom:3px solid var(--gold);
  padding-bottom:3px;
}

/* --- prazen stolpec (demo .kempty) --------------------------------------- */
html[data-skin="ink"] .kbempty{
  margin-top:16px;
  padding:0;
  font-family:var(--fM);
  font-size:10px;
  font-style:normal;
  letter-spacing:.06em;
  line-height:1.8;
  text-transform:uppercase;
  color:var(--ink2);
}

/* --- orodna vrstica: ukazna vrstica + žig + štampiljke (demo .ktools) ---- */
/* OBA ISKALNIKA OSTANETA. UMAKNJENO 13.8.2026 (RESNO). Prejsnja razlicica je
   imela
       main:has(#kbsearch) .top .searchbox{display:none}
   z utemeljitvijo, da ima kanban svoj #kbsearch in sta bili polji le ~50px
   narazen. Ta presoja je bila napacna: to nista podvojeni polji, ampak dve
   RAZLICNI funkciji.
     · globalni iskalnik (.top .searchbox -> #gsearch, studio.js:201) ob vnosu
       PREKLOPI pogled na katalog in filtrira IZDELKE (view-dealer.js:323 bere
       isto vrednost);
     · #kbsearch (view-kanban.js:274) isce NAROCILA znotraj table in pogleda
       ne zapusti.
   Skrivanje prvega je bila izguba edine poti do kataloga iz kanbana, ne
   odprava ponovitve. Vizualno blizino resujemo z razmikom, ne s skrivanjem:
   .kbhead dobi 24px zracnosti nad ukazno vrstico, tako da med spodnjim robom
   mastheada in #kbsearch ni vec ~46px, ampak ~70px. Enaka odlocitev kot v
   builderju, glej 14.0. */
html[data-skin="ink"] .kbhead{
  flex-wrap:wrap;
  gap:16px;
  margin-top:24px;
  margin-bottom:24px;
}
/* iskalnik dobi svojo vrstico v polni širini, kot .cmdbar v demotu */
html[data-skin="ink"] .kbsearchwrap{
  flex:1 1 100%;
  max-width:none;
}
html[data-skin="ink"] .kbsearchwrap::before{
  content:">";
  position:absolute;
  left:16px;
  top:0;
  display:flex;
  align-items:center;
  height:48px;
  font-family:var(--fM);
  font-size:13px;
  color:var(--acc-text);
  pointer-events:none;
}
html[data-skin="ink"] .kbsearch{
  height:48px;
  padding:0 16px 0 36px;
  background:var(--dense);
  border:1px solid var(--dense-hair);
  font-family:var(--fM);
  font-size:12.5px;
  letter-spacing:.04em;
  color:var(--dense-fg);
  caret-color:var(--gold);
}
html[data-skin="ink"] .kbsearch::placeholder{
  font-size:11.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--dense-fg2);
}
html[data-skin="ink"] .kbsearch:focus{background:var(--dense);border-color:var(--gold)}

/* Orodna vrstica NAD razsirjeno fazo / "Zadnja narocila" trgovca / rezultati
   velikega iskalnika (Rok 18.8.2026: "daj sort by, search" - _kbToolbarHtml v
   view-kanban.js). Ista konzolna povrsina kot #kbsearch/#kbfind zgoraj (var(--dense)),
   ker gre za isto druzino ukaznih vnosov, ne za papir. Select je stiliziran
   enako kot vnos: mono, ink obroba, radius 0 (pravilo 2 v ink-skin.test.mjs). */
html[data-skin="ink"] .kbtool{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 8px;
}
html[data-skin="ink"] .kbtoolq{
  flex:1 1 260px;
  min-width:180px;
  height:40px;
  padding:0 14px;
  background:var(--dense);
  border:1px solid var(--dense-hair);
  font-family:var(--fM);
  font-size:11.5px;
  letter-spacing:.02em;
  color:var(--dense-fg);
  caret-color:var(--gold);
}
html[data-skin="ink"] .kbtoolq::placeholder{
  font-size:11px;
  letter-spacing:.03em;
  color:var(--dense-fg2);
}
html[data-skin="ink"] .kbtoolq:focus{border-color:var(--gold)}
html[data-skin="ink"] .kbtoolsort{
  height:40px;
  padding:0 12px;
  background:var(--dense);
  border:1px solid var(--dense-hair);
  font-family:var(--fM);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--dense-fg);
  cursor:pointer;
}
html[data-skin="ink"] .kbtoolsort:focus{border-color:var(--gold)}
html[data-skin="ink"] .kbtoolhint{
  margin:0 0 20px;
  font-family:var(--fM);
  font-size:10px;
  letter-spacing:.02em;
  color:var(--ink2);
  line-height:1.5;
}

/* Padajoči rezultati globalnega iskanja. POZOR: element je <div id="kbfind">
   BREZ razreda (view-kanban.js:275), zato legacy pravila .kbfind (in prejšnja
   ink pravila na istem selektorju) nikoli niso prijela - seznam je padel v
   tok dokumenta kot golo besedilo in porinil orodno vrstico navzdol. Ker se
   spušča iz ukazne vrstice, dobi njeno konzolno površino, ne papirja.
   Prazen je vedno (kbCloseFind pobriše innerHTML), zato :empty skrije okvir. */
html[data-skin="ink"] #kbfind{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 4px);
  z-index:40;
  max-height:340px;
  overflow-y:auto;
  background:var(--dense);
  border:1px solid var(--dense-hair);
  box-shadow:none;
  color:var(--dense-fg);
}
html[data-skin="ink"] #kbfind:empty{display:none}
html[data-skin="ink"] #kbfind .fhd{
  padding:10px 16px;
  border-bottom:1px solid var(--dense-hair);
  font-family:var(--fM);
  font-size:10px;
  font-weight:400;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--dense-fg2);
}
html[data-skin="ink"] #kbfind .fitem{
  display:block;
  padding:12px 16px;
  border-bottom:1px solid var(--dense-hair);
  cursor:pointer;
}
html[data-skin="ink"] #kbfind .fitem:last-child{border-bottom:0}
html[data-skin="ink"] #kbfind .fitem:hover{background:var(--dense-fg);color:var(--dense)}
html[data-skin="ink"] #kbfind .fitem .fn{font-family:var(--fD);font-weight:600;font-size:14px}
html[data-skin="ink"] #kbfind .fitem .fm{font-size:11.5px;color:var(--dense-fg2);margin-top:2px}
html[data-skin="ink"] #kbfind .fitem:hover .fm,
html[data-skin="ink"] #kbfind .fitem:hover .fno{color:inherit}
html[data-skin="ink"] #kbfind .fitem .fno{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:4px;
  font-family:var(--fM);
  font-size:10px;
  letter-spacing:.06em;
  color:var(--dense-fg2);
  font-variant-numeric:tabular-nums;
}
html[data-skin="ink"] #kbfind .fmore{
  padding:12px 16px;
  font-family:var(--fM);
  font-size:10.5px;
  font-style:normal;
  letter-spacing:.06em;
  color:var(--dense-fg2);
}

/* status sinhronizacije = žig (demo .stamp) */
html[data-skin="ink"] .kb-sync-chip{
  display:inline-flex;
  align-items:center;
  height:24px;
  padding:0 8px;
  background:none;
  border:1px solid currentColor;
  font-family:var(--fM);
  font-size:10px;
  font-weight:500;
  letter-spacing:.1em;
  line-height:1;
  text-transform:uppercase;
  color:var(--mut);
  /* besedilo žiga vpisuje view-kanban.js:367 in nosi emoji (🔄 / ⚠) - edini
     barvni piksli v pogledu. Besedila ne smemo spremeniti, barvo pa lahko. */
  filter:grayscale(1);
}
/* Stanja žiga so brez nasičene barve - demo v tem pogledu nima nobene.
   Legacy je risal koral (--excl, rgb(224,121,109)) in jantar (--price) na
   čipu o ozadnjem servisu; to je bila druga najbolj nasičena stvar na strani
   in prva v branju orodne vrstice. Zdaj se stanja ločijo po TEŽI odtisa:
   ok = pridušen obris (uspešna sinhronizacija je najtišja stvar na strani,
   tako kot žig SINH v demotu), opozorilo = polni obris, napaka = zapolnjen
   žig (demo .stamp.fill). Zlata ostane samo na CTA. */
html[data-skin="ink"] .kb-sync-chip.ok{border-color:var(--shell-fg2);color:var(--shell-fg2)}
html[data-skin="ink"] .kb-sync-chip.warn{border-color:var(--shell-fg);color:var(--shell-fg)}
html[data-skin="ink"] .kb-sync-chip.err{
  border-color:var(--shell-fg);
  background:var(--shell-fg);
  color:var(--shell);
}

/* gumbi v orodni vrstici: štampiljke (demo .btn-dark / .btn-gold).
   Legacy .kbnew je bil background:var(--ink) + color:#fff - pod ink skinom
   na ohišju je --ink SVETEL, torej belo na belem. Tu dobi zlato obrobo. */
html[data-skin="ink"] .kb-sync-btn,
html[data-skin="ink"] .kbnew{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 16px;
  background:none;
  border:1px solid var(--btn2);
  color:var(--shell-fg);
  font-family:var(--fM);
  font-size:11px;
  font-weight:500;
  letter-spacing:.1em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
  transition:none;
}
/* Paketna gumba nosita v besedilu emoji (🛠 / 📄, chassis-docs.js:768,
   offer-docs.js:1042) in sta bila skupaj 815px široka - vrstica je zrasla na
   1365px proti 1304px sledi in .kbnew je padel v tretjo vrstico. Besedila ne
   smemo spremeniti, zato se skrči ODTIS: mirnejša mono mera (10.5px/.04em)
   spravi vrstico na ~1240px, grayscale odvzame emojijem barvo (edini barvni
   piksli v pogledu), ellipsis pa je varovalo na ožjih oknih. display:block je
   pogoj za text-overflow (v flex vsebniku besedilo postane anonimni item). */
html[data-skin="ink"] .kb-sync-btn{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
  line-height:38px;
  font-size:10.5px;
  letter-spacing:.04em;
  filter:grayscale(1);
}
html[data-skin="ink"] .kb-sync-btn:hover{
  background:var(--shell-fg);
  color:var(--shell);
  border-color:var(--shell-fg);
}
/* margin-left:auto je izbrisan: potiskal je CTA na skrajni desni rob in ga ob
   prelomu pustil samega v svoji vrstici s 56px praznine nad njim. */
html[data-skin="ink"] .kbnew{
  border:2px solid var(--gold);
  color:var(--shell-fg);
}
html[data-skin="ink"] .kbnew:hover{
  background:var(--gh-bg);
  color:var(--gh-fg);
  border-color:var(--gh-bg);
}

/* --- privzeti zaslon: vodoravna mreza fazenih plosc namesto stolpcev
   (Rok 16.8.2026, val 1b: "NE TEH VERTIKALNIH KOLON - naredi kot na demo:
   samo gumbe oz. sklop en"). Vzorec 1:1 iz Desktop/STUDIO-REDESIGN/
   studio-2026-predlog.html #prodaja (.faze .faza) - stevec in vsota so isti
   podatki, ki jih je prej risal .kbcolh (view-kanban.js _kbPhaseTilesHtml).
   .faza je button: lasten all:unset namesto dedovanja iz .kbcard, ker je to
   nov element brez legacy ustreznika. */
html[data-skin="ink"] .faze{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:14px;
}
html[data-skin="ink"] .faza{
  all:unset;
  box-sizing:border-box;
  display:block;
  width:100%;
  text-align:left;
  cursor:pointer;
  background:var(--plate);
  border:1px solid var(--hair-p);
  padding:20px 20px 16px;
  color:var(--ink);
}
html[data-skin="ink"] .faza:hover{border-color:var(--ink)}
html[data-skin="ink"] .faza:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}
html[data-skin="ink"] .faza h3{
  margin:0;
  display:flex;
  align-items:baseline;
  gap:10px;
  font-family:var(--fD);
  font-weight:600;
  font-size:19px;
  letter-spacing:-.01em;
  line-height:1.15;
  color:var(--ink);
}
html[data-skin="ink"] .faza h3 .n{
  font-family:var(--fM);
  font-size:14px;
  font-weight:500;
  letter-spacing:.02em;
  border-bottom:3px solid var(--gold);
  padding:0 2px 1px;
  font-variant-numeric:tabular-nums;
}
html[data-skin="ink"] .faza .v{
  margin-top:10px;
  font-family:var(--fM);
  font-size:12px;
  font-weight:400;
  letter-spacing:.04em;
  color:var(--ink2);
  font-variant-numeric:tabular-nums;
}
html[data-skin="ink"] .faza .bar{
  height:3px;
  background:var(--ink);
  margin-top:14px;
}
/* aktivna (razsirjena) faza: inverz namesto se ene zlate ploskve - ista
   logika kot .edtab.on v referencnem predlogu, edini "on" vzorec, ki v tem
   jeziku ze obstaja. Zlata podcrtava na stevcu ostane citljiva na --ink. */
html[data-skin="ink"] .faza.on{
  background:var(--ink);
  border-color:var(--ink);
}
html[data-skin="ink"] .faza.on h3,
html[data-skin="ink"] .faza.on .v{color:var(--plate)}
html[data-skin="ink"] .faza.on .bar{background:var(--plate)}

/* opis pod mrezo - stalno viden podnapis, ne tooltip (tocka 2 narocila). */
html[data-skin="ink"] .fazehint{
  margin-top:16px;
  font-family:var(--fM);
  font-size:11px;
  font-weight:400;
  letter-spacing:.02em;
  color:var(--ink2);
  line-height:1.6;
}

/* --- PO TRGOVCIH: preklop + trgovski profil (Rok 17.8.2026, naslednja faza
   po fazenih ploscah zgoraj). Prodajnik izbere trgovca/distributerja in vidi
   vse, kar je nanj vezano - narocila, tipicni modeli, kontakti, pot do
   cenika. Segmentni preklop [Po fazah][Po trgovcih] pod akcijsko vrstico
   (privzeto faze - .faze/.faza zgoraj ostaneta nedotaknjena); "Po trgovcih"
   ponovno uporabi ISTI .faze/.faza vzorec za mrezo in ISTI .kbexph/.kbback/
   .kbgrid/.kbmore/.kbempty/.fazehint vzorec za razsirjen profil
   (view-kanban.js _kbtGridHtml/_kbtProfileHtml). Tu je SAMO tisto, kar .faza
   in sorodniki se ne znajo: preklop sam, ena dodatna vrstica na ploscici,
   profilni trak statistik, vrstice modelov s tanko crto delezev, cipke faz
   in razmiki znotraj profila. */
html[data-skin="ink"] .kbtseg{display:flex;gap:8px;margin-bottom:16px}
html[data-skin="ink"] .kbtseg button{
  all:unset;
  box-sizing:border-box;
  cursor:pointer;
  height:34px;
  padding:0 16px;
  display:inline-flex;
  align-items:center;
  font-family:var(--fM);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink2);
  background:none;
  border:1px solid var(--hair-p);
}
html[data-skin="ink"] .kbtseg button:hover{color:var(--ink);border-color:var(--ink)}
html[data-skin="ink"] .kbtseg button.on{background:var(--ink);border-color:var(--ink);color:var(--plate)}

/* trgovska ploscica podeduje .faza v celoti - doda samo eno drobno vrstico
   med vsoto (.v) in crto (.bar). */
html[data-skin="ink"] .faza .kbtlast{
  margin-top:8px;
  font-family:var(--fM);
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.02em;
  color:var(--ink2);
}
html[data-skin="ink"] .faza.on .kbtlast{color:var(--plate)}

/* profilna glava: CRM podatki + gumb "Odpri v Podjetja" */
html[data-skin="ink"] .kbtco{margin-top:16px}
html[data-skin="ink"] .kbtco .cfgbtn{margin-top:16px}

/* ponovljiv trak statistik (CRM glava IN povzetek narocil - .st je ena celica) */
html[data-skin="ink"] .kbtprof{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:16px}
html[data-skin="ink"] .kbtprof .st{display:flex;flex-direction:column;gap:4px}
html[data-skin="ink"] .kbtprof .l{
  font-family:var(--fM);
  font-size:9.5px;
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink2);
}
html[data-skin="ink"] .kbtprof .v{
  font-family:var(--fD);
  font-size:17px;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}

/* labelirana sekcija znotraj profila (modeli / faze / rabati / narocila) */
html[data-skin="ink"] .kbtsec{margin-top:28px}
html[data-skin="ink"] .kbtsec .lbl{
  font-family:var(--fB);
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  padding-bottom:8px;
  margin-bottom:12px;
  border-bottom:1px solid var(--hair-p);
}
html[data-skin="ink"] .kbtsec .cfgbtn{margin-top:16px}
html[data-skin="ink"] .kbtsec .cfgbtn[disabled]{color:var(--ink2);border-color:var(--hair-p);cursor:default}
html[data-skin="ink"] .kbtsec .cfgbtn[disabled]:hover{background:none;color:var(--ink2);border-color:var(--hair-p)}

/* c) modeli: ime + tanka ink crta (delez) + stevilo · odstotek */
html[data-skin="ink"] .kbtmrow{display:flex;align-items:center;gap:16px;padding:8px 0;border-bottom:1px solid var(--hair-p)}
html[data-skin="ink"] .kbtmrow:last-child{border-bottom:0}
html[data-skin="ink"] .kbtmrow .nm{flex:1 1 auto;min-width:0;font-size:12.5px;color:var(--ink)}
html[data-skin="ink"] .kbtmrow.kbtmrest .nm{color:var(--ink2)}
html[data-skin="ink"] .kbtbar{flex:0 0 140px;height:3px;background:var(--hair-p)}
html[data-skin="ink"] .kbtbar span{display:block;height:100%;background:var(--ink)}
html[data-skin="ink"] .kbtmrow .num{
  flex:0 0 auto;
  font-family:var(--fM);
  font-size:11px;
  color:var(--ink2);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* d) po fazah: cipke, aktivna = inverz (isti vzorec kot .faza.on zgoraj) */
html[data-skin="ink"] .kbtstgs{display:flex;flex-wrap:wrap;gap:8px}
html[data-skin="ink"] .kbtstg{
  all:unset;
  box-sizing:border-box;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:30px;
  padding:0 12px;
  font-family:var(--fM);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--ink);
  background:none;
  border:1px solid var(--hair-p);
  font-variant-numeric:tabular-nums;
}
html[data-skin="ink"] .kbtstg:hover{border-color:var(--ink)}
html[data-skin="ink"] .kbtstg.on{background:var(--ink);border-color:var(--ink);color:var(--plate)}


/* --- REGISTER NAROČIL · izbrana smer 1C ------------------------------- */
html[data-skin="ink"] .ink-kb{padding-top:24px}
html[data-skin="ink"] .kb-reg-console{margin:0 0 20px}
html[data-skin="ink"] .kb-reg-console .kbsearchwrap{
  max-width:none;
  min-width:240px;
  flex:1 1 420px;
}
html[data-skin="ink"] .kb-reg-console .kbsearch{
  width:100%;
  max-width:none;
  height:32px;
  padding:0;
  background:none;
  color:var(--console-fg);
  border:0;
}
html[data-skin="ink"] .kb-reg-console .kbsearch:focus{background:none;border:0}
html[data-skin="ink"] .kb-reg-result{
  flex:none;
  padding-left:14px;
  border-left:1px solid var(--oat);
  font-family:var(--fM);
  font-size:10px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--console-mut);
}
html[data-skin="ink"] .kb-reg-console .kbnew{
  flex:none;
  margin:0 0 0 auto;
  background:var(--oat);
  color:var(--espresso-deep);
  border:1px solid var(--oat);
}
html[data-skin="ink"] .kb-reg-console .kbnew:hover{
  background:var(--veil);
  color:var(--espresso-deep);
  border-color:var(--veil);
}
html[data-skin="ink"] .kb-reg-tools{
  margin-bottom:8px;
}
html[data-skin="ink"] .kb-reg-stage-nav{min-width:0}
html[data-skin="ink"] .kb-reg-stage-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0 0 8px;
}
html[data-skin="ink"] .kb-reg-stage-label{
  margin:0;
  font-family:var(--fM);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--paper-ter);
}
html[data-skin="ink"] .kb-reg-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  min-width:0;
}
html[data-skin="ink"] .kb-reg-tabs .reg-tab{
  width:auto;
  min-height:46px;
  justify-content:space-between;
  gap:12px;
  padding:8px 16px;
  font-family:var(--fB);
  font-size:13.5px;
  font-weight:600;
  line-height:1.15;
  letter-spacing:0;
  text-align:left;
  text-transform:none;
}
html[data-skin="ink"] .kb-reg-tabs .reg-tab span{
  font-family:var(--fM);
  font-size:12px;
  font-weight:500;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
html[data-skin="ink"] .kb-reg-tabs-secondary{
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid var(--hair-strong);
}
html[data-skin="ink"] .kb-reg-tabs .reg-tab.kb-reg-stage-dealer-lock{
  background:var(--oat);
  color:var(--espresso-deep);
  border-color:var(--espresso-deep);
  border-bottom-width:4px;
}
html[data-skin="ink"] .kb-reg-tabs .reg-tab.kb-reg-stage-dealer-lock.on{
  border-width:3px;
  border-bottom-width:6px;
}
html[data-skin="ink"] .kb-reg-service{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  flex:none;
}
html[data-skin="ink"] .kb-reg-service .kb-sync-chip{filter:none}
html[data-skin="ink"] .kb-reg-service .kb-sync-chip.err{
  height:22px;
  background:var(--err-bg);
  color:var(--err-fg);
  border-color:var(--err-bd);
}
html[data-skin="ink"] .kb-reg-secondary{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 16px;
}
html[data-skin="ink"] .kb-reg-secondary:empty{display:none}
html[data-skin="ink"] .kb-register{
  --reg-cols:var(--kb-reg-cols);
  min-width:1180px;
}
html[data-skin="ink"] .kb-reg-grid{grid-template-columns:var(--kb-reg-cols)}
html[data-skin="ink"] .kb-reg-band{display:flex;gap:16px}
html[data-skin="ink"] .kb-reg-band .reg-band-c{align-self:baseline}
html[data-skin="ink"] .kb-reg-sum{
  margin-left:auto;
  font-family:var(--fM);
  font-size:13px;
  font-variant-numeric:tabular-nums;
  color:var(--espresso-deep);
}
html[data-skin="ink"] .reg-row.kb-reg-row{
  all:unset;
  box-sizing:border-box;
  width:100%;
  min-height:56px;
  display:grid;
  grid-template-columns:var(--kb-reg-cols);
  gap:20px;
  align-items:center;
  padding:13px 20px;
  background:var(--veil);
  color:var(--espresso-deep);
  border-left:6px solid var(--hair-strong);
  border-bottom:1px solid var(--hair-weak);
  cursor:pointer;
}
html[data-skin="ink"] .reg-row.kb-reg-row:hover{background:#EFEAE3}
html[data-skin="ink"] .kb-reg-no,
html[data-skin="ink"] .kb-reg-date{
  font-family:var(--fM);
  font-size:11px;
  font-variant-numeric:tabular-nums;
  color:var(--paper-ter);
}
html[data-skin="ink"] .kb-reg-no{font-size:12px;color:var(--espresso)}
html[data-skin="ink"] .kb-reg-person{min-width:0}
html[data-skin="ink"] .kb-reg-person b{
  display:block;
  overflow:hidden;
  font-family:var(--fD);
  font-size:16px;
  font-weight:600;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--espresso-deep);
}
html[data-skin="ink"] .kb-reg-person small{
  display:block;
  margin-top:2px;
  overflow:hidden;
  font-size:11.5px;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--paper-ter);
}
html[data-skin="ink"] .kb-reg-model{font-size:12.5px;color:var(--espresso)}
html[data-skin="ink"] .kb-reg-lock{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:0 8px;
  font-family:var(--fM);
  font-size:9.5px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
html[data-skin="ink"] .kb-reg-price{
  text-align:right;
  font-family:var(--fD);
  font-size:18px;
  font-weight:600;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
  color:var(--espresso-deep);
}
html[data-skin="ink"] .kb-reg-right{text-align:right}
html[data-skin="ink"] .kb-reg-empty{
  display:block;
  min-height:44px;
  padding:13px 20px;
  font-family:var(--fM);
  font-size:10px;
  font-style:normal;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--paper-ter);
}
@media(max-width:900px){
  html[data-skin="ink"] .kb-reg-stage-head{align-items:flex-start;flex-direction:column}
  html[data-skin="ink"] .kb-reg-service{margin:0}
  html[data-skin="ink"] .kb-reg-result{display:none}
}


/* ==========================================================================
   === Katalog ===
   F5 · pogled "Product catalog" (studio.js vCatalog + catCard) · 14.8.2026
   PILOT SEMANTICNIH HOOKOV - prva sekcija, ki ne bere vsebine style atributa.

   CILJ (nespremenjen od F4)
   Demo studio-ink-monolith-demo.html, pogled "katalog", je GOST LEDGER: ena
   vrstica na artikel, mono koda v svojem tiru, naziv v svojem, hairline med
   vrsticami. Zivi pogled je karticna galerija; ink jo prelije v vrstice.
   Podrobnosti in izmerjene vrednosti so pri pravilih K2-K6.

   KAJ SE JE SPREMENILO 14.8.2026 (in zakaj je to ceneje)
   F4 ni smel v markup, zato je pogled prepoznaval po odtisu inline stila
       .card[style*="cursor:default"][style*="position:relative"]
   Ker Chrome ob PRVEM dotiku prek CSSOM (el.style.x = ...) cel atribut
   preserializira v obliko s presledki, je moral biti vsak tak selektor
   zapisan DVAKRAT. Izid: 437 vrstic, v kodi 134 [style*=] in 22 :has(),
   64 selektorskih delov za 27 pravil. Zdaj markup nosi svoje hooke (studio.js,
   glej komentar nad vCatalog), pogled pa se prepozna po html[data-view="catalog"],
   ki ga postavi setnav(). Noben hook ne bere serializirane vsebine style
   atributa, zato preserializacija nanje ne more vplivati in dvojnikov ni vec.

   ZAKAJ OBOJE, data-view IN sk-*
   data-view sedi na <html>, torej velja tudi za predal (drawer) NAD pogledom -
   editItemDialog se odpre prav iz kataloga in prav tako rise .card / .rows,
   zato bi golo html[data-view="catalog"] .rows pobarvalo tudi njega. Razred
   pove, KAJ element je; data-view pove, V KATEREM pogledu pravilo velja.

   KAJ OSTAJA NEIZVEDENO
   Glava stolpcev iz demota (Koda / Naziv / Kategorija / Cena neto) ni hook,
   ampak NOVA VSEBINA - izrisala bi se tudi v legacy skinu, ta pa se ne sme
   premakniti; CSS-generirano besedilo ni sprejemljivo (prevodi, a11y,
   izbirnost). Ostane 2 px crta na vrhu seznama, s katero se ledger odpre.
   Kategorije (p.cat) v DOM-u ni - mono nosi tip (simple/grouped). Cena se na
   privzetem naboru ne izrise niti enkrat (price je null pri vseh 1551 vnosih
   zajetega sifranta); vidna je samo pri artiklih iz Store, kar je natanko
   tisto, kar oznacuje .sk-price-src.

   !important je samo tam, kjer JS pise inline style: .sk-act ima all:unset,
   .sk-actions position:absolute, telo kartice font-size / font-weight / margin.
   Ploskost: brez gradientov, brez dodanih senc, radius 0, edina zlata #b5a291.
   ========================================================================== */

/* --------------------------------------------------------------------------
   K1 · GOSTA PLOSCA · tokeni enkrat, na povrsini seznama
   F4 je isti blok tokenov pisal dvakrat: enkrat na vsako kartico, enkrat na
   arhivski seznam. Tokeni se dedujejo, zato zadostuje ENKRAT na povrsini -
   od tam jih dobijo kartice, vrstice, znacke IN inline var(--line) /
   var(--mut) / var(--faint), ki jih pise JS. Zrcali tokens.css B3.
   -------------------------------------------------------------------------- */
html[data-skin="ink"][data-view="catalog"] .sk-table.sk-dense{
  --bg:var(--dense);
  --panel:var(--dense);
  --panel-solid:var(--dense);
  --panel2:var(--dense2);

  --ink:var(--dense-fg);
  --ink2:var(--dense-fg2);
  --ink-2:var(--dense-fg2);
  --mut:var(--dense-fg2);
  --faint:var(--dense-fg3);

  --line:var(--dense-hair);
  --line2:var(--dense-hair2);
  --hair:var(--dense-hair);

  /* isto razmerje kot povsod drugje v sistemu (tokens.css:313, ink.css:838,
     1295, 2336) - en recept za eno zlato, samo podlaga je tu gosta ploskev */
  --gold-deep:color-mix(in srgb, var(--gold) 72%, var(--dense-fg));

  --invert:var(--dense-fg);
  --on-invert:var(--dense);

  background:var(--dense);
  border:1px solid var(--dense-hair);
}

/* --------------------------------------------------------------------------
   K2 · SIFRANT · en zvezan seznam, ne mreza ploscic
   Iz petih stolpcev v enega, zato v pogledu koncno obstaja skupna vodoravna
   linija. 2 px crta na vrhu = demotov .ledger .lh.
   Za razliko od F4 to velja tudi, kadar je rezultat prazen (.empty): mreza je
   ploskev pogleda, ne posledica tega, da v njej slucajno stoji kartica.
   -------------------------------------------------------------------------- */
html[data-skin="ink"][data-view="catalog"] .grid.sk-table{
  grid-template-columns:minmax(0,1fr);
  gap:0;
  border-top:2px solid var(--dense-rule);
}

/* --------------------------------------------------------------------------
   K3 · VRSTICA · kartica dobi tire, zato koda in naziv stojita na isti osi
   Pet tirov: 34 zig · 126 koda (najsirsi mono je izmerjeno 121 px) · naziv
   1fr · cena auto (0 px, kadar je ni) · dejanji auto. Vsaka postavka ima
   grid-column zapisan izrecno (K5, K6), zato je vrstica enaka ne glede na to,
   katerih otrok catCard v tem primeru ni izpisal.
   min-height 46 px = demotovih 47 px.
   -------------------------------------------------------------------------- */
html[data-skin="ink"][data-view="catalog"] .sk-card{
  display:grid;
  grid-template-columns:34px 126px minmax(0,1fr) auto auto;
  column-gap:16px;
  align-items:center;
  min-height:46px;
  padding:0 14px;
  background:var(--dense);
  color:var(--dense-fg);
  border:0;
  border-bottom:1px solid var(--dense-hair);
  border-radius:0;
  overflow:hidden;
}
html[data-skin="ink"][data-view="catalog"] .sk-card:last-child{border-bottom:0}
/* legacy .card:hover doda dvig in senco - v sifrantu vrstica ne skace in ne
   mece sence; ostane samo temnejsa ploskev */
html[data-skin="ink"][data-view="catalog"] .sk-card:hover{
  background:var(--dense2);
  box-shadow:none;
  transform:none;
}

/* --------------------------------------------------------------------------
   K4 · ZIG NAMESTO SLIKOVNEGA OKNA
   Slika je bila 108 px od 175 px celice (62 %) in glavni element pogleda; tu
   je 34 px kvadrat v prvem tiru. cover odpravi letterboxing podedovanega
   .ph.contain (index.html:142). grayscale pobere barvni sum ikon. Artikel brez
   slike obdrzi prazen zig, zato se vrstica ne premakne.
   -------------------------------------------------------------------------- */
html[data-skin="ink"][data-view="catalog"] .sk-card .ph{
  grid-area:1/1;
  width:34px;
  height:34px;
  aspect-ratio:1;
  padding:0;
  background-color:var(--dense2);
  background-size:cover;
  background-position:center;
  border:1px solid var(--dense-hair);
  filter:grayscale(1) brightness(.92);
}

/* --------------------------------------------------------------------------
   K5 · TIRI · .bd izgine iz postavitve, njegovi otroci postanejo postavke
   vrstice. Sele s tem koda, naziv in cena cez VSE vrstice stojijo v istih
   stolpcih - prej se je naziv v priblizno tretjini celic prelomil v 2-3
   vrstice in vsaka celica je zacela drugje.
   -------------------------------------------------------------------------- */
html[data-skin="ink"][data-view="catalog"] .sk-card .bd{display:contents}

/* naziv (demo .lrow .n) · inline pise font-weight:700;font-size:13px */
html[data-skin="ink"][data-view="catalog"] .sk-card .sk-name{
  grid-area:1/3;
  min-width:0;
  font-family:var(--fB);
  font-size:12.5px !important;
  font-weight:500 !important;
  line-height:1.35 !important;
  color:var(--dense-fg);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* mono koda + tip (demo .lrow .c) · pred naziv, v drugi tir */
html[data-skin="ink"][data-view="catalog"] .sk-card .mono{
  grid-area:1/2;
  font-family:var(--fM);
  font-size:11.5px !important;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--dense-fg2) !important;
  margin-top:0 !important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* cena (demo .lrow .p) · cetrti tir. Tir je auto: kadar cene ni, je sirok 0 in
   ne jemlje prostora nazivu; ker zadnji tir vedno konca na desnem robu
   vsebine, so cene med seboj poravnane na skupno navpicno os. */
html[data-skin="ink"][data-view="catalog"] .sk-card .sk-price{
  grid-area:1/4;
  font-family:var(--fM);
  font-size:12.5px !important;
  font-variant-numeric:tabular-nums;
  text-align:right;
  white-space:nowrap;
  color:var(--dense-fg);
  margin-top:0 !important;
}

/* --------------------------------------------------------------------------
   K6 · DEJANJI IN ZNACKI · iz vogala v peti tir vrstice
   240 drobnih gumbov je bil najvecji vir suma na pogledu; v 46 px vrstici bi
   pri inline top:8px padli cez besedilo. Blok ostane skrajno desno, a NE
   absolutno postavljen: kot lebdec bi se ob artiklu, ki ima ceno IN znacko,
   prekril cez ceno (izmerjeno "CUST€99M" v isti tocki). Zato position:static
   in svoj tir. Znacki custom / edited OSTANETA vidni - to je izvor cene, ne
   dejanje; skrijeta se samo gumba, pointer-events sledi vidnosti.
   -------------------------------------------------------------------------- */
html[data-skin="ink"][data-view="catalog"] .sk-card .sk-actions{
  position:static !important;
  grid-area:1/5;
  align-items:center;
}
html[data-skin="ink"][data-view="catalog"] .sk-card .sk-act{
  display:grid !important;
  place-items:center !important;
  /* inline width/height je 24px, a legacy jim ne da border-box - z robom
     zrastejo na 26px in razbijejo 24px visino znacke poleg njih */
  box-sizing:border-box !important;
  background:var(--dense) !important;
  border:1px solid var(--dense-hair) !important;
  border-radius:0 !important;
  color:var(--dense-fg2) !important;
  font-size:11px !important;
  opacity:0 !important;
  pointer-events:none !important;
}
html[data-skin="ink"][data-view="catalog"] .sk-card:hover .sk-act,
html[data-skin="ink"][data-view="catalog"] .sk-card:focus-within .sk-act{
  opacity:1 !important;
  pointer-events:auto !important;
}
html[data-skin="ink"][data-view="catalog"] .sk-card .sk-act:hover{
  border-color:var(--gold) !important;
  color:var(--dense-fg) !important;
}

/* --------------------------------------------------------------------------
   K6b · DOTIK · brez lebdenja sta Uredi in Arhiviraj NEDOSEGLJIVA
   opacity:0 + pointer-events:none pomeni na tablici ali telefonu, da 240
   gumbov sploh ni mogoce uporabiti: :hover se tam ne sprozi, :focus-within pa
   zahteva pot do fokusa, ki je brez tipkovnice ni.
   Media LIST (logicni ALI), ne samo (hover:none): prenosnik z zaslonom na
   dotik ima MED DRUGIM tudi misko in poroca hover:hover, zato se pravilo prav
   tam ne bi sprozilo. (any-pointer:coarse) vprasa pravo vprasanje - ima
   naprava vsaj en grob kazalec; (hover:none) ostane varovalka za brskalnike,
   ki any-pointer ne porocajo pravilno.
   Zakaj ne privzeto opacity:.35 namesto 0: gumb #6E6A5F na #EFEDE9 pri .35
   zmesa v ~#C2BFB9, kar je 1,53:1 - dalec pod 3:1 iz WCAG 1.4.11. Cez 3:1 bi
   prisel sele pri ~.80, kar ni vec "tiho". Trajno nizkokontrastna kontrola je
   slabsa dostopnost kot skrita kontrola z delujoco potjo do nje.
   -------------------------------------------------------------------------- */
@media (any-pointer:coarse), (hover:none){
  html[data-skin="ink"][data-view="catalog"] .sk-card .sk-act{
    opacity:1 !important;
    pointer-events:auto !important;
  }
}
/* izvor cene (custom / edited): inline font-size:9px zniza znacko pod 24px -
   poravnamo jo z gumboma */
html[data-skin="ink"][data-view="catalog"] .sk-card .sk-price-src{
  height:24px;
  padding:0 6px;
  letter-spacing:.08em;
}

/* --------------------------------------------------------------------------
   K7 · ORODNA VRSTICA nad sifrantom
   Filtri morajo biti VIDNI: prejsnja (pred-F4) razlicica je uveljavila
   nowrap + overflow-x:auto IN skrila drsnik - izmerjeno 842 px skritih, 4 cipi
   izven zaslona brez namiga, da se da drsati. Zato prelom v vec vrstic kot v
   legacyju, demotov mono jezik pa ostane na samih cipih (razdelek 5).
   -------------------------------------------------------------------------- */
html[data-skin="ink"][data-view="catalog"] .sk-toolbar .sk-filters{
  flex-wrap:wrap;
  min-width:0;
  row-gap:8px;
}
html[data-skin="ink"][data-view="catalog"] .sk-toolbar .sk-filters > .chip{flex:0 0 auto}
/* glavno dejanje vrstice ("+ Add item", inline zlata ploskev v studio.js):
   demo .btn-gold je PRAZEN zig z zlato obrobo in zlatim besedilom, nikoli
   zlata ploskev. Edina zlata ostaja #b5a291. */
html[data-skin="ink"][data-view="catalog"] .sk-toolbar .sk-primary{
  background:none !important;
  border:1px solid var(--gold) !important;
  border-bottom-width:3px !important;
  color:var(--gold-deep) !important;
}
html[data-skin="ink"][data-view="catalog"] .sk-toolbar .sk-primary:hover{
  background:var(--gold) !important;
  color:var(--shell) !important;
}

/* --------------------------------------------------------------------------
   K8 · ARHIVIRANI ARTIKLI · seznam nad mrezo je isti sifrant, ne papir
   Ploskev in tokene dobi ze iz K1 (.sk-table.sk-dense); tu ostane samo tipografija
   vrstice, ki je v markupu vrstica ze sama po sebi (.sk-row, ne .sk-card).
   -------------------------------------------------------------------------- */
html[data-skin="ink"][data-view="catalog"] .sk-table .sk-row{
  border-bottom:1px solid var(--dense-hair);
}
html[data-skin="ink"][data-view="catalog"] .sk-table .sk-row:hover{
  background:var(--dense2);
}
html[data-skin="ink"][data-view="catalog"] .sk-table .sk-row .who{
  font-family:var(--fB);
  font-size:12.5px;
  font-weight:500;
  color:var(--dense-fg);
}
html[data-skin="ink"][data-view="catalog"] .sk-table .sk-row .meta{
  font-family:var(--fM);
  font-size:11.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--dense-fg2);
}
html[data-skin="ink"][data-view="catalog"] .sk-table .sk-row .th{
  border:1px solid var(--dense-hair);
  background:var(--dense2);
}


/* ==========================================================================
   === Pregled ===
   F1 · pogled Dashboard (#dash, studio.js vDash) · 13.8.2026
   Vir: demo studio-ink-monolith-demo.html, pogled "pregled" (vPregled).

   OBSEG
   Tri plošče: ključne številke, prodajni lijak, zadnja naročila.
   Demo vsako ploščo sestavi kot masthead (serif h2 + mono meta) + 3px
   črnilna letev + vsebina. Živi vDash izriše .sectitle kot SESTRO pred
   .funnel oz. .rows, ne znotraj njiju. Markupa ne smemo spreminjati, zato
   .sectitle prevzame vlogo mastheada in postane ZGORNJI del plošče,
   .funnel / .rows pa njen SPODNJI del (border-top:0, margin-top:0).
   Skupaj sta videti kot ena plošča iz demota.
   Pred .kpis vDash .sectitle sploh ne izriše, zato si prva plošča masthead
   nariše sama s ::before in ::after (14.1) - druge poti brez posega v
   markup ni. Vse tri plošče so tako dokumenti z glavo, ne slabi.

   OMEJITEV SEKCIJE
   Vsako pravilo tu se začne z
     html[data-skin="ink"] #view > .wrap:has(> .funnel)
   .funnel obstaja samo v vDash (edini zadetek v celotni kodni bazi), zato
   je to zanesljiv podpis pogleda Pregled. .sectitle, .rows, .row, .chip in
   .price so v skupni rabi z drugimi pogledi - brez tega podpisa bi jih ta
   sekcija pokvarila. :has() ni podprt v starih brskalnikih; tam se sekcija
   preprosto ne uveljavi in Pregled ostane pri ogrodju iz razdelka 4.

   PLOSKOST
   Nobenega gradienta, nobene sence, radij 0, zlata samo #b5a291 prek
   var(--gold): podčrtava pipeline KPI in zaklenjene stopnje v lijaku.
   ========================================================================== */

/* --------------------------------------------------------------------------
   14.0 · ENA MERA ZA CELO STRAN
   V demotu se .vhead, .vrule in vse tri .plate začnejo pri x=296 in končajo
   pri 1712 (okno 1760): en sam levi in en sam desni rob, brez izjem.
   Legacy .wrap ima max-width:1400px (index.html:96), ki ga skin nikoli ni
   preklical - zato so se plošče končale pri 1600, masthead (.top) pa pri
   1712, ob desnem robu pa je tekel 160px pas mrtvega črnila.
   Razdelek 1 to zdaj sprošča za vse ink poglede; tu isto omejitev izrecno
   izklopimo še enkrat za Pregled, da poravnava obstane tudi če se skupno
   pravilo kdaj spet zaostri. Rezultat: plošče x=296 w=1416 right=1712.
   -------------------------------------------------------------------------- */
html[data-skin="ink"] #view > .wrap:has(> .funnel){max-width:none}

/* --------------------------------------------------------------------------
   14.1 · KPI plošča (demo .plate + .masthead + .rule3 + .kpis)
   Razdelek 4 že nariše papir in tipografijo. Tu pride mera demota.

   MASTHEAD BREZ MARKUPA
   Drugi dve plošči dobita masthead iz .sectitle, ki ga vDash izriše kot
   sestro (14.2). Pred .kpis vDash .sectitle NE izriše, zato je bila prva
   plošča brezglava plošča med dvema dokumentoma. Markupa in JS se ne smemo
   dotakniti, zato masthead nariše sama plošča: ::before je serifni naslov,
   ::after mono meta z 3px črnilno letvijo pod obema. Oba sta absolutna, da
   ne posežeta v mrežo KPI celic; padding-top plošče je natanko višina tega
   mastheada (32 + 26,25 + 16 + 3) plus 24px zraka, torej isti ritem kot
   .sectitle + .funnel v 14.2/14.3.
   Baseline: h2 je 25px/1,05 = 26,25px, meta 10,5px/1,8 = 18,9px; meta dobi
   7,35px zgornjega paddinga, da obe pisavi sedita na isti črti - enako kot
   align-items:flex-end v .sectitle.

   ŠTIRJE ENAKI STOLPCI
   Legacy repeat(4,1fr) je bil v resnici minmax(auto,1fr), prva celica pa je
   imela white-space:nowrap na 40px številki: pri 1440px so stolpci merili
   288/247/247/247, pri 1280px 288/226/178/178 in hairline delilnice niso
   bile več enakomerne. minmax(0,1fr) brez nowrap drži štiri enake stolpce
   pri vsaki širini.

   ŠTEVKA, KI NIKOLI NE PRESTOPI DELILNICE
   Enaki stolpci pomenijo, da najdaljša številka ne more več raztegniti svoje
   celice. Pri 1760px je stolpec 337,5px in 40px Fraunces (demo mera) se
   udobno umesti; pri 1440px je stolpec 257,5px in 40px bi pisalo prek
   hairline delilnice v sosednjo celico. Zato je mera vezana na stolpec:
   40px velja od priblizno 1690px navzgor, pod tem se sorazmerno zmanjsa.
   Faktor 0,132 = 40px / (337,5 - 32)px, torej natanko razmerje pri referencni
   sirini; 32px je desni padding celice plus varnostni rob.
   -------------------------------------------------------------------------- */
/* ODLOCITEV (13.8.2026): masthead te plosce se NE ustvarja s ::before/::after.
   CSS-generirana vsebina je pravo UI besedilo, ki zivi samo v stylesheetu:
   prevajalni sloj ga ne more prevesti, ni izbirno, bralniki zaslona ga ne vidijo,
   in tiho odstopa od tega, kar markup trdi, da stran vsebuje.
   Plosca zato v tej fazi ostane brez naslova. Pravi masthead zahteva
   <div class="sectitle"> pred <div class="kpis"> v vDash (studio.js) - odlozeno
   na fazo, ki se sme dotakniti JS. Kritikova zahteva ne prevlada nad tem pravilom. */
html[data-skin="ink"] #view > .wrap:has(> .funnel) > .kpis{
  --kpi-track:calc((100vw - 410px) / 4);
  grid-template-columns:repeat(4,minmax(0,1fr));
  padding:32px;
  margin-top:0;
  margin-bottom:24px;
}
html[data-skin="ink"] #view > .wrap:has(> .funnel) > .kpis .val{
  font-size:min(40px, calc((var(--kpi-track) - 32px) * 0.132));
}
html[data-skin="ink"] #view > .wrap:has(> .funnel) > .kpis > .kpi{padding-top:8px}
html[data-skin="ink"] #view > .wrap:has(> .funnel) > .kpis > .kpi:first-child .val{
  display:inline-block;
  border-bottom:4px solid var(--gold);
  padding-bottom:5px;
}

/* --------------------------------------------------------------------------
   14.2 · .sectitle -> masthead plošče (demo .masthead + .rule3)
   Naslov se preseli z ohišja na papir, zato mora tu dobiti PAPIRNI kontekst.
   Tokenov tu NE nastavljamo: ta selektor je dopisan na skupni seznam v
   tokens.css (B2), ker je to edina pogodba za papirni kontekst. Prej je bil
   tu ročni prepis tistega bloka brez --excl/--dep/--price/--disc/--vis, kar
   je pomenilo, da bi vsaka semantična barva znotraj .sectitle ostala v tonu
   ohišja. Tu ostane samo videz.
   -------------------------------------------------------------------------- */
html[data-skin="ink"] #view > .wrap:has(> .funnel) > .sectitle{
  display:flex;
  align-items:flex-end;
  gap:24px;
  background:var(--plate);
  color:var(--plate-fg);
  border:1px solid var(--plate-line);
  border-bottom:3px solid var(--plate-fg);
  padding:32px 32px 16px;
  margin:24px 0 0;
}
html[data-skin="ink"] #view > .wrap:has(> .funnel) > .sectitle h2{
  font-family:var(--fD);
  font-weight:600;
  font-size:25px;
  line-height:1.05;
  letter-spacing:0;
  text-transform:none;
  color:var(--plate-fg);
}
html[data-skin="ink"] #view > .wrap:has(> .funnel) > .sectitle .count{
  font-family:var(--fM);
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.1em;
  line-height:1.8;
  text-transform:uppercase;
  text-align:right;
  color:var(--plate-fg2);
  margin-left:auto;
}
/* "View all" je v markupu .chip; v demotu je to poln črnilni gumb (.btn-ink) */
html[data-skin="ink"] #view > .wrap:has(> .funnel) > .sectitle .chip{
  height:40px;
  padding:0 16px;
  font-size:11px;
  letter-spacing:.1em;
  background:var(--plate-fg);
  color:var(--plate);
  border:1px solid var(--plate-fg);
}
html[data-skin="ink"] #view > .wrap:has(> .funnel) > .sectitle .chip:hover{
  background:none;
  color:var(--plate-fg);
}

/* --------------------------------------------------------------------------
   14.3 · Prodajni lijak -> segmentirana črnilna letev (demo .funnel + .fseg)
   Legacy riše .stg kot kartice v vodoravnem scrollu. Demo jih razgradi na
   enakomerne stolpce brez okvirjev: mono števec, polna črnilna letev,
   pri zaklenjenih stopnjah 4px zlata pod njo, spodaj mono oznaka.
   Širino letve še naprej določa inline style iz vDash (n/8 %), dodamo samo
   min-width, da najmanjše stopnje ne izginejo.
   -------------------------------------------------------------------------- */
html[data-skin="ink"] #view > .wrap:has(> .funnel) > .funnel{
  --ink:var(--plate-fg);
  --ink2:var(--plate-fg2);
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  gap:8px;
  overflow:visible;
  background:var(--plate);
  border:1px solid var(--plate-line);
  border-top:0;
  padding:24px 32px 32px;
  margin:0 0 24px;
}
html[data-skin="ink"] #view > .wrap:has(> .funnel) > .funnel .stg{
  display:flex;
  flex-direction:column;
  min-width:0;
  background:none;
  border:0;
  padding:0;
}
html[data-skin="ink"] #view > .wrap:has(> .funnel) > .funnel .stg .n{
  order:1;
  font-family:var(--fM);
  font-weight:500;
  font-size:13px;
  line-height:1.2;
  letter-spacing:0;
  font-variant-numeric:tabular-nums;
  color:var(--plate-fg);
}
html[data-skin="ink"] #view > .wrap:has(> .funnel) > .funnel .stg .bar{
  order:2;
  position:relative;
  align-self:flex-start;
  height:13px;
  min-width:5px;
  margin:8px 0 15px;
  background:var(--plate-fg);
  border-radius:0;
}
/* zaklenjena stopnja: 4px zlata letev 3px pod črnilno (demo .fgold) */
html[data-skin="ink"] #view > .wrap:has(> .funnel) > .funnel .stg.lock .bar::after{
  content:"";
  position:absolute;
  top:16px;
  left:0;
  right:0;
  height:4px;
  background:var(--gold);
}
html[data-skin="ink"] #view > .wrap:has(> .funnel) > .funnel .stg .l{
  order:3;
  font-family:var(--fM);
  font-weight:400;
  font-size:9.5px;
  letter-spacing:.04em;
  line-height:1.5;
  text-transform:uppercase;
  color:var(--plate-fg2);
  margin:0;
  padding-right:8px;
}

/* --------------------------------------------------------------------------
   14.4 · Zadnja naročila -> dokumentno kazalo (demo .docidx + .docrow)
   Kartična vrstica s sličico postane vrstica kazala: mrežni stolpci,
   hairline pod vsako vrstico, brez sličic. .th in .sp sta samo postavitvena
   ostanka legacy flex vrstice - v mreži nimata pomena.

   PET SLEDI DEMOTA IZ TREH BLOKOV MARKUPA
   Demo .docrow ima pet sledi (118/680/210/160/118, presledek 16, skupaj
   1350). Živi orderRow ima samo tri otroke: neimenovan ovoj (.who + .meta),
   .badge in .price. Ovoj je bil en zložen blok čez celo prvo sled, zato je
   mono vrstica z modelom visela pod imenom, med njo in značko pa je zijalo
   ~860px praznine. Ovoj zato sam postane mreža 220px + 1fr: ime v svojem
   stolpcu, model in številka naročila v svojem. Skupaj s 150px za značko in
   130px za ceno ima vrstica štiri prave stolpce in isto skupno mero 1350.
   Značka: najširša izrisana meri 130px, zato je 150px dovolj (prej 200px,
   od tega 70px praznega). Vrstica pade s 66px na ~52px; demo .docrow meri
   60px, a nosi dve vrstici besedila.
   -------------------------------------------------------------------------- */
html[data-skin="ink"] #view > .wrap:has(> .funnel) > .rows{
  border-top:0;
  padding:8px 32px 32px;
  margin:0;
}
html[data-skin="ink"] #view > .wrap:has(> .funnel) > .rows .row{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px 130px;
  align-items:center;
  column-gap:32px;
  row-gap:0;
  padding:14px 0;
  border-bottom:1px solid var(--hair-p);
}
html[data-skin="ink"] #view > .wrap:has(> .funnel) > .rows .row:last-child{border-bottom:0}
html[data-skin="ink"] #view > .wrap:has(> .funnel) > .rows .row .th,
html[data-skin="ink"] #view > .wrap:has(> .funnel) > .rows .row .sp{display:none}
/* neimenovan ovoj (.who + .meta) -> dva stolpca, poravnana na isto črto */
html[data-skin="ink"] #view > .wrap:has(> .funnel) > .rows .row > div:not(.th):not(.sp){
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  column-gap:24px;
  align-items:baseline;
}
/* Demo drži mono za številke (.dno 11,5px, .dpr 13px), model pa je grotesk
   12px (.dmo), podjetje grotesk 11px (.dco). Vse-mono vrstica je kazalo
   potiskala proti terminalu namesto proti papirju. */
html[data-skin="ink"] #view > .wrap:has(> .funnel) > .rows .row .meta{
  font-family:var(--fB);
  font-size:12px;
}
/* demo .stamp.mini: ista visina 24px kot navadni zig, samo manjsa crka */
html[data-skin="ink"] #view > .wrap:has(> .funnel) > .rows .row .badge{
  justify-self:end;
  padding:0 6px;
  font-size:9px;
  letter-spacing:.08em;
}
html[data-skin="ink"] #view > .wrap:has(> .funnel) > .rows .row .price{
  justify-self:end;
  min-width:0;
  font-size:13px;
  color:var(--plate-fg);
}
/* Hairline je zamaknjen za 32px (padding plošče), poudarek ob prehodu miške
   pa mora segati čez rob plošče. Zato ga nariše ::before, ki na obeh straneh
   pogleda ven; .rows ima iz legacy overflow:hidden, ki ga odreže na robu.
   Otroci dobijo position:relative, da ostanejo nad poudarkom - brez sence. */
html[data-skin="ink"] #view > .wrap:has(> .funnel) > .rows .row:hover{background:none}
html[data-skin="ink"] #view > .wrap:has(> .funnel) > .rows .row:hover::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-32px;
  right:-32px;
  background:var(--plate2);
}
html[data-skin="ink"] #view > .wrap:has(> .funnel) > .rows .row > *{position:relative}


/* ==========================================================================
   === Pretvornik ===
   F4 · pogled "Pretvornik" (#pretvornik, view-pretvornik.js vPretvornik) · 13.8.2026
   Vir: demo studio-ink-monolith-demo.html, pogled 'pretvornik' (vPretvornik):
        .term .tin .verdict .tsum · .plate .masthead .rule3 · table.doc
        .stamp .stamp.mini .stamp.gold-u .note-ink

   TRI POTEZE DEMOTA
   1 PESKOVNIK  levi stolpec postane ena TERMINALSKA plošča na temnem
                (demo .term): naslovni pas z 1px hairlinom pod njim (::before,
                ker markupa ne smemo spreminjati), mono vnos 15px.
                POZOR: caret-color:var(--gold) na .pv-in NI viden žig - vidi
                se šele ob fokusu. Demo ima narisan blok kurzorja (.caret),
                ki ga brez markupa ni mogoče poustvariti; tu je zlata samo
                v kurzorju in v podčrtavah žigov.
   2 VERDIKT    ni več drobna značka, ampak CELO-ŠIRINSKI žig pas čez vrh
                rezultata (demo .verdict) - obrnjena površina, mono, .18em.
   3 DOKUMENT   šifrant in pravila nista več kupček kartic, ampak en list
                papirja (demo table.doc): oba bloka se ODPRETA z glavo -
                3px črnilo, mono oznake stolpcev, 1px črnilo pod oznakami -
                in imata 1px hairline med vrsticami. Glavo nariše prva
                vrstica bloka z absolutnim ::before / ::after, ker markupa
                ne smemo spreminjati; glava zato ni mrežna celica in
                postavitve vrstice ne premakne.

   STOLPEC VREDNOSTI
   Desna celica šifranta je fiksnih 300px in desno poravnana (demo td.num).
   Prej je bila 1fr ob 44% levo: pri 1760px ~790px celice za ~39px vsebine.

   VSE OSTALO
   Kode so žigi (demo .stamp.mini), kode proizvajalca nosijo 3px zlato
   podčrtavo (demo .stamp.gold-u), opombe so mono verzalke v okvirju
   (demo .note-ink). Brez prelivov, brez senc, radij 0, zlata samo #b5a291.
   Nobene nasičene ploskve: BLOKIRANO ni več lososov #E28C5F.

   SPECIFIČNOST
   view-pretvornik.js injicira <style id="pv-css"> v <head> ob prvem izrisu,
   torej ZA to datoteko. Pri enaki specifičnosti bi pv-css zmagal, zato ima
   vsako pravilo tu prefiks html[data-skin="ink"] (0,2,1 proti 0,1,0).
   Kjer ima pv-css različico z dvema razredoma (.pv-bb.on, .pv-flag.ok,
   .pv-vb.block, .pv-prov.man, .pv-src.live .dot, .pv-man.ok) je (0,2,0)
   in bi ga naše splošno pravilo povozilo - zato so te različice tu
   IZRECNO ponovljene. Enako velja za obe @media točki iz pv-css.
   ========================================================================== */

/* --- glave razdelkov (demo .masthead h2 + .vrule) ----------------------- */
html[data-skin="ink"] .pv-sec{
  display:flex;
  align-items:flex-end;
  gap:16px;
  margin:40px 0 16px;
  padding-bottom:12px;
  border-bottom:1px solid var(--shell-hair);
}
/* Demo .masthead h2 je 25px, stavčno pisan, serifni - NE 19px verzalke.
   Verzalke so tu delale dvojno škodo: bile so najglasnejša tipografija na
   strani IN so kričale nize, ki so v viru že izgubili šumnike ("Sifrant
   kod"). Stavčni zapis vrne vrhunec strani in utiša napako vsebine. */
html[data-skin="ink"] .pv-sec h2{
  font-family:var(--fD);
  font-weight:600;
  font-size:25px;
  line-height:1.1;
  letter-spacing:-.01em;
  text-transform:none;
  color:var(--shell-fg);
}
html[data-skin="ink"] .pv-sec .n{
  margin-left:auto;
  font-family:var(--fM);
  font-size:10px;
  font-weight:400;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--shell-fg2);
}

/* --- opombe (demo .note-ink) -------------------------------------------- */
html[data-skin="ink"] .pv-note{
  max-width:none;
  border:1px solid var(--ink);
  padding:16px;
  font-family:var(--fM);
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.9;
  color:var(--ink2);
}
html[data-skin="ink"] .pv-note b{color:var(--ink);font-weight:500}

/* --- izbirnik znamke (demo .tabsrow .stamp / .stamp.act) ---------------- */
html[data-skin="ink"] .pv-brandpick{gap:8px;margin:0 0 16px}
html[data-skin="ink"] .pv-bb{
  gap:5px;
  min-width:132px;
  padding:11px 14px;
  background:var(--plate);
  border:1px solid var(--hair-p);
  font-family:var(--fM);
  font-size:10px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1;
  color:var(--ink);
}
html[data-skin="ink"] .pv-bb small{
  font-family:var(--fM);
  font-size:9px;
  font-weight:400;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.4;
  opacity:1;
  color:var(--ink2);
}
html[data-skin="ink"] .pv-bb:hover{border-color:var(--plate-fg)}
html[data-skin="ink"] .pv-bb.on{
  background:var(--invert);
  color:var(--on-invert);
  border-color:var(--invert);
  border-bottom:3px solid var(--gold);
}
html[data-skin="ink"] .pv-bb.on small{color:var(--on-invert);opacity:.7}
html[data-skin="ink"] .pv-bb.dis,
html[data-skin="ink"] .pv-bb.dis:hover{opacity:.45;border-color:var(--hair-p)}

/* --- vir šifranta (demo .stamp) ----------------------------------------- */
/* Žig se PRELOMI, ne uide iz zaslona.
   Zadnji padec C3 v matriki (2 celici od 36, obe temi pri 768px). Izmerjeno:
   žig je bil širok 496px pri levem robu 296, torej desni rob pri 792 v 768px
   oknu - 24px čez. Prostora je 425px (768 - 247 rail - 2x48 rob), zato
   `white-space:nowrap` z najdaljšo vsebino ("LOKALNA KOPIJA (HUB NI BIL
   DOSEGLJIV) · ŠIFRANT Z DNE 2026-07-20") ni imel kam. Datum je bil prvi čez rob.

   Prelom namesto krčenja: pisava je že 10px mono verzalke, manjša bi bila
   neberljiva, skrajšanje pa bi pojedlo prav datum, ki je edini podatek žiga.
   `overflow-wrap:anywhere` lovi še primer, ko je ena sama beseda širša od
   stolpca; `flex-wrap` je nujen, ker je žig inline-flex in so besedilni odseki
   njegove postavke.

   Pri širokih zaslonih ostane vizualno isti 24px žig: 10px x 1.6 = 16px
   vrstica + 2x3px roba = 22px, torej min-height:24px se ne premakne, dokler
   je vsebina v eni vrstici. */
html[data-skin="ink"] .pv-src{
  min-height:24px;
  gap:8px;
  padding:3px 8px;
  margin:0 0 16px;
  max-width:100%;
  background:none;
  border:1px solid currentColor;
  font-family:var(--fM);
  font-size:10px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1.6;
  white-space:normal;
  overflow-wrap:anywhere;
  flex-wrap:wrap;
  color:var(--shell-fg2);
}
html[data-skin="ink"] .pv-src b{color:var(--shell-fg);font-weight:500}
html[data-skin="ink"] .pv-src .dot{width:6px;height:6px;background:currentColor}
html[data-skin="ink"] .pv-src.live .dot{background:var(--dep)}

/* --- šifrant kot dokument (demo table.doc) ------------------------------
   Kartice se sklenejo v EN list papirja: bočna robova sta --plate-line
   (v temni temi prozoren, v svetli rob lista), vrstice loči 1px hairline.  */
html[data-skin="ink"] .pv-dec{
  grid-template-columns:minmax(0,1fr) 300px;
  margin:0;
  background:var(--plate);
  border:0;
  border-left:1px solid var(--plate-line);
  border-right:1px solid var(--plate-line);
  border-bottom:1px solid var(--hair-p);
}
/* ODPRTJE BLOKA (demo table.doc thead).
   Glava stolpcev ("CH paket · naziv", "Kode proizvajalca") zahteva markup
   spremembo v pvSifrantHtml() (view-pretvornik.js, izpis .pv-dec) - odlozeno
   na fazo, ki se sme dotakniti JS. CSS-generirano besedilo ni sprejemljivo
   (prevodi, a11y, izbirnost).
   Ostane samo vizualni del: 3px crnilo, s katerim se list odpre. Prej ga je
   risal absolutni pas visok 37px, ki je nosil oznaki; brez oznak bi bil to
   prazen pas, zato je crta zdaj zgornji rob prve vrstice. margin-top pade s
   50 na 16, ker 37px pasu ni vec treba pokriti - vidni razmik ostane enak. */
html[data-skin="ink"] .pv-note + .pv-dec{
  position:relative;
  margin-top:16px;
  border-top:3px solid var(--ink);
}
/* demo table.doc nima navpičnih črt - ravno navpičnica je desno celico delala
   videti kot prazno škatlo. Loči jih poravnava, ne linija. */
html[data-skin="ink"] .pv-dl{
  padding:14px 24px 14px 32px;
  border-right:0;
}
/* desni stolpec = stolpec vrednosti (demo table.doc td.num): desno poravnan,
   fiksno širok. Prej je bil 1fr z ~44% levo, kar je pri 1760px pomenilo
   ~790px celice za ~39px vsebine - skoraj 600px praznega papirja na vrstico. */
html[data-skin="ink"] .pv-dr{
  padding:14px 32px 14px 24px;
  gap:6px;
  justify-content:flex-end;
  align-content:flex-start;
}
html[data-skin="ink"] .pv-dl .ch{
  font-family:var(--fM);
  font-weight:400;
  font-size:11.5px;
  letter-spacing:.04em;
  color:var(--ink2);
}
/* mera besedila ostane berljiva tudi v 1114px široki celici: vrstica se konča
   tam, kjer se v demotu konča stolpec NAZIV, ne na drugi strani lista. */
html[data-skin="ink"] .pv-dl .lb{font-size:12.5px;color:var(--ink);margin-top:4px;max-width:760px}
/* opis omejimo na dve vrstici: brez tega so vrstice od 97px do 234px (2,4x)
   in blok nima ritma. Z omejitvijo se razpon sesede na ~97-119px. */
html[data-skin="ink"] .pv-dl .ct{
  font-size:11px;
  line-height:1.5;
  color:var(--ink2);
  margin-top:5px;
  max-width:760px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
@media(max-width:760px){
  html[data-skin="ink"] .pv-dec{grid-template-columns:1fr}
  html[data-skin="ink"] .pv-dr{justify-content:flex-start}
  html[data-skin="ink"] .pv-dl{border-right:0;border-bottom:1px solid var(--hair-p)}
}

/* NOGA LISTA · standardna oprema (edini .pv-blk, ki sledi vrstici šifranta).
   Prej je padla na temno ohišje takoj pod papirjem in je izgledala kot
   odlomljen kos. Zdaj je zadnji pas istega lista - kot vrstica povzetka pod
   tabelo v demotu. Tokeni papirja so tu lokalni, ker .pv-blk ni na seznamu
   B2 v tokens.css in bi sicer podedoval svetlo besedilo ohišja. */
html[data-skin="ink"] .pv-dec + .pv-blk{
  --ink:var(--plate-fg);
  --ink2:var(--plate-fg2);
  --ink-2:var(--plate-fg2);
  --mut:var(--plate-mut);
  --faint:var(--plate-faint);
  --line:var(--hair-p);
  --line2:var(--hair-p2);
  --hair:var(--hair-p);
  --invert:var(--plate-fg);
  --on-invert:var(--plate);
  background:var(--plate);
  border-left:1px solid var(--plate-line);
  border-right:1px solid var(--plate-line);
  border-bottom:1px solid var(--plate-line);
  padding:22px 32px 26px;
  /* view-pretvornik.js piše na ta blok inline style="margin-top:14px". Brez
     !important bi med tabelo in nogo ostalo 14px temnega ohišja in list bi
     se videl kot dva odlomljena kosa. JS se ne smemo dotakniti, zato je to
     edina pot - in edini !important v tem razdelku. */
  margin-top:0 !important;
}
html[data-skin="ink"] .pv-dec + .pv-blk .bh{
  border-bottom:0;
  padding-bottom:0;
  margin-bottom:12px;
  font-family:var(--fM);
  font-weight:500;
  font-size:10px;
  letter-spacing:.14em;
  color:var(--ink2);
}

/* koda proizvajalca = žig z zlato podčrtavo (demo .stamp.gold-u) */
html[data-skin="ink"] .pv-fchip{
  height:24px;
  gap:6px;
  padding:0 8px;
  font-family:var(--fM);
  font-size:10px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1;
  color:var(--ink);
  border:1px solid var(--hair-p);
  border-bottom:3px solid var(--gold);
}
html[data-skin="ink"] .pv-man{
  font-family:var(--fM);
  font-size:8.5px;
  font-weight:500;
  letter-spacing:.08em;
  color:var(--ink2);
}
html[data-skin="ink"] .pv-man.ok{color:var(--dep)}
html[data-skin="ink"] .pv-cf{
  font-family:var(--fM);
  font-size:9px;
  font-weight:400;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--disc);
  margin-top:3px;
}

/* --- kode in zastavice kot mini žigi (demo .stamp.mini) ----------------- */
html[data-skin="ink"] .pv-tagcode,
html[data-skin="ink"] .pv-flag,
html[data-skin="ink"] .pv-prov{
  display:inline-flex;
  align-items:center;
  height:20px;
  padding:0 6px;
  margin:3px 6px 3px 0;
  background:none;
  border:1px solid currentColor;
  font-family:var(--fM);
  font-size:9px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1;
  white-space:nowrap;
  color:var(--mut);
}
html[data-skin="ink"] .pv-tagcode{color:var(--ink2)}
html[data-skin="ink"] .pv-flag.ok{color:var(--dep)}
html[data-skin="ink"] .pv-flag.no{color:var(--disc)}
html[data-skin="ink"] .pv-prov{margin:8px 0 0}
/* "SINHRONIZIRANO" stoji na vsaki vrstici brez izjeme - v okvirju je bil to
   samo šum, ki je 20-krat ponovil isto vrednost. Žig ostane samo tam, kjer
   nekaj pomeni: .pv-prov.man (ročno urejen naziv) z zlato podčrtavo. */
html[data-skin="ink"] .pv-prov:not(.man){
  border:0;
  padding:0;
  height:auto;
  margin:8px 0 0;
  color:var(--faint);
  opacity:.6;
}
html[data-skin="ink"] .pv-prov.man{color:var(--gold-deep);border-bottom:3px solid var(--gold)}

/* --- pravila serije kot dokument (demo table.doc) ----------------------- */
html[data-skin="ink"] .pv-rule{
  margin:0;
  padding:13px 32px;
  background:var(--plate);
  border:0;
  border-left:1px solid var(--plate-line);
  border-right:1px solid var(--plate-line);
  border-bottom:1px solid var(--hair-p);
  font-size:12.5px;
  line-height:1.55;
}
/* Enako odprtje kot pri šifrantu: 3px crnilo na vrhu lista.
   Glava ("Pogoj · ukrep · dokaz") zahteva markup spremembo v pvRulesHtml()
   (view-pretvornik.js, izpis .pv-rule) - odlozeno na fazo, ki se sme dotakniti
   JS. CSS-generirano besedilo ni sprejemljivo (prevodi, a11y, izbirnost).
   Naslov sekcije nad blokom ze nosi .pv-sec h2, ki JE pravi markup.
   margin-top pade s 50 na 16, ker 37px pasu ni vec treba pokriti. */
html[data-skin="ink"] .pv-sec + .pv-rule{
  position:relative;
  margin-top:16px;
  border-top:3px solid var(--ink);
}
html[data-skin="ink"] .pv-rule .rt{font-weight:500;color:var(--ink)}
html[data-skin="ink"] .pv-rule .rc{
  font-family:var(--fM);
  font-weight:400;
  font-size:11.5px;
  letter-spacing:.04em;
  color:var(--ink2);
}
html[data-skin="ink"] .pv-ev{
  font-family:var(--fM);
  font-size:9.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1.8;
  color:var(--ink2);
  margin-top:5px;
}

/* --- prazno stanje (demo .note-ink) ------------------------------------- */
html[data-skin="ink"] .pv-empty{
  padding:16px;
  border:1px solid var(--ink);
  font-family:var(--fM);
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.9;
  text-align:left;
  color:var(--ink2);
}
html[data-skin="ink"] .pv-empty b{color:var(--ink);font-weight:500}

/* --- PESKOVNIK · levi stolpec = terminal (demo .term) -------------------
   Kontekst gostega panela je tu deklariran lokalno (isti nabor kot B3 v
   tokens.css), ker terminal nima svojega razreda - je prvi otrok .pv-grid. */
/* align-items:stretch prepiše align-items:start iz pv-css: brez tega je temna
   plošča 391px, list ob njej 550px in pod terminalom zeva 159px luknje. */
html[data-skin="ink"] .pv-grid{gap:24px;align-items:stretch}
html[data-skin="ink"] .pv-grid > div:first-child{
  --panel:var(--dense);
  --panel-solid:var(--dense);
  --panel2:var(--dense2);
  --ink:var(--dense-fg);
  --ink2:var(--dense-fg2);
  --ink-2:var(--dense-fg2);
  --mut:var(--dense-fg2);
  --faint:var(--dense-fg3);
  --line:var(--dense-hair);
  --line2:var(--dense-hair2);
  --hair:var(--dense-hair);
  --invert:var(--dense-fg);
  --on-invert:var(--dense);
  background:var(--dense);
  border:1px solid var(--dense-hair);
  position:relative;
  padding:32px;
}
/* Glava terminala (demo .term .th) zahteva markup spremembo v pvSandboxHtml()
   (view-pretvornik.js, prvi otrok .pv-grid) - odlozeno na fazo, ki se sme
   dotakniti JS. CSS-generirano besedilo ni sprejemljivo (prevodi, a11y,
   izbirnost). Panel ze nosi pravo oznako .pv-lbl ("Komercialne kode ..."),
   zato brez naslovnega pasu ni prazen; padding-top pade s 60 na 32, da ne
   ostane 28px prazne vrzeli, kjer je bil pas. */
@media(max-width:900px){
  html[data-skin="ink"] .pv-grid{grid-template-columns:1fr}
}
html[data-skin="ink"] .pv-lbl{
  font-family:var(--fM);
  font-size:10px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mut);
  margin:0 0 14px;
}
html[data-skin="ink"] .pv-grid > div:first-child .pv-lbl{font-size:11px;color:var(--dense-fg)}
html[data-skin="ink"] .pv-in{
  padding:6px 0 14px;
  background:none;
  border:0;
  border-bottom:1px solid var(--dense-hair);
  font-family:var(--fM);
  font-size:15px;
  letter-spacing:.06em;
  line-height:1.75;
  color:var(--dense-fg);
  caret-color:var(--gold);
  resize:vertical;
}
html[data-skin="ink"] .pv-in:focus{
  background:none;
  border-bottom-color:var(--gold);
  /* legacy index.html:379 doda 3px zlat sij okoli polja v fokusu; INK MONOLITH
     je ploski, zato ga tu odstranimo. Vrednost none - nic ne doda. */
  box-shadow:none;
}
html[data-skin="ink"] .pv-in::placeholder{color:var(--dense-fg3);letter-spacing:.06em}
html[data-skin="ink"] .pv-grid > div:first-child .pv-ev{
  font-size:10px;
  letter-spacing:.1em;
  line-height:1.9;
  color:var(--dense-fg2);
  margin-top:16px;
}

/* --- PESKOVNIK · desni stolpec = dokument (demo .plate) ----------------- */
html[data-skin="ink"] .pv-res{padding:32px;min-height:180px}

/* verdikt = celo-širinski žig pas čez vrh lista (demo .verdict) */
html[data-skin="ink"] .pv-verdict{
  margin:-32px -32px 24px;
  padding:12px 24px;
  gap:16px;
  background:var(--invert);
  color:var(--on-invert);
  border-bottom:0;
  font-family:var(--fM);
  font-size:11px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
}
html[data-skin="ink"] .pv-vb{
  display:inline-flex;
  align-items:center;
  height:24px;
  flex:none;
  padding:0 8px;
  background:var(--on-invert);
  color:var(--invert);
  border:1px solid var(--on-invert);
  font-family:var(--fM);
  font-size:10px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1;
}
/* Prej nasičen losos #E28C5F - edina nasičena ploskev v celem pogledu in
   odstop od palete. V demotu je BLOKIRANO poln žig (.stamp.mini.fill):
   črnilo + papir. Ta žig pa stoji NA obrnjenem pasu, kjer je "poln" ravno
   papirnata površina, zato namerno izjemo označi 3px zlata podčrtava -
   ista oznaka kot .pv-prov.man in .pv-fchip. Oranžna ostane samo besedilo
   (.pv-cf, .pv-flag.no), kot je že bila. */
html[data-skin="ink"] .pv-vb.block{
  background:var(--on-invert);
  border-color:var(--on-invert);
  color:var(--invert);
  border-bottom:3px solid var(--gold);
}
html[data-skin="ink"] .pv-vb.empty{
  background:none;
  border:1px solid currentColor;
  color:var(--on-invert);
  opacity:.7;
}
html[data-skin="ink"] .pv-vm{
  flex:1;
  font-family:var(--fM);
  font-size:9.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1.8;
  color:var(--on-invert);
  opacity:.62;
}

/* bloki rezultata = stolpci dokumenta (demo table.doc th + td) */
html[data-skin="ink"] .pv-blk{margin-top:24px}
html[data-skin="ink"] .pv-blk .bh{
  font-family:var(--fB);
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  border-bottom:3px solid currentColor;
  padding-bottom:10px;
  margin-bottom:10px;
}
html[data-skin="ink"] .pv-line{
  padding:10px 0;
  font-size:12.5px;
  line-height:1.5;
  color:var(--ink);
  border-bottom:1px solid var(--hair-p);
}
html[data-skin="ink"] .pv-line:last-child{border-bottom:0}
html[data-skin="ink"] .pv-line.pv-mut{color:var(--ink2)}
html[data-skin="ink"] .pv-line .c{
  font-family:var(--fM);
  font-weight:400;
  font-size:11.5px;
  letter-spacing:.04em;
  color:var(--ink2);
}