/* ink-demo.css - SKUPNO demo jedro za INKV poglede (gauntlet port iz
   Desktop/STUDIO-REDESIGN/studio-ink-monolith-demo.html, vrednosti VERBATIM).
   Vsak selektor je scopan pod html[data-skin="ink"] .inkv, zato ta datoteka
   nikoli ne pušča v legacy skin niti v poglede brez INKV rendererja.
   Žetoni (--plate, --dense, --acc-text, --gh-bg ...) so že v tokens.css.
   Pravila hiše: flat, radius 0 (reset.css), zlata samo črta/kvadrat/podčrtava. */

/* Odmik pogleda (demo .view{padding:48px 48px 96px}). INKV pogledi ne uporabljajo
   lupinskega .wrap, zato bi bili brez tega poravnani na sam rob raila. Zgoraj
   manj kot v demotu, ker nad njimi stoji lepljiva vrstica z globalnim iskalnikom. */
html[data-skin="ink"] .inkv{padding:32px 48px 96px}

/* glava pogleda (demo .vhead) */
html[data-skin="ink"] .inkv .vhead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
html[data-skin="ink"] .inkv .vhead h1{font-family:var(--fD);font-weight:600;font-size:36px;line-height:1.05;color:var(--shell-fg)}
html[data-skin="ink"] .inkv .vhead .vmeta{font-family:var(--fM);font-size:11px;letter-spacing:.1em;color:var(--acc-text);text-transform:uppercase;margin-top:8px}
html[data-skin="ink"] .inkv .vhead .vright{display:flex;align-items:center;gap:16px;flex-shrink:0}
html[data-skin="ink"] .inkv .vrule{height:3px;background:var(--shell-fg);margin:16px 0 32px}

/* žigi (demo .stamp, enotna višina 24px) */
html[data-skin="ink"] .inkv .stamp{display:inline-flex;align-items:center;height:24px;font-family:var(--fM);font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:0 8px;border:1px solid currentColor;line-height:1;white-space:nowrap}
html[data-skin="ink"] .inkv .stamp.fill{background:var(--ink);color:var(--plate);border-color:var(--ink)}
html[data-skin="ink"] .inkv .stamp.fill-inv{background:var(--shell-fg);color:var(--shell);border-color:var(--shell-fg)}
html[data-skin="ink"] .inkv .stamp.mini{font-size:9px;padding:0 6px;letter-spacing:.08em}
html[data-skin="ink"] .inkv .stamp.gold-u{border-bottom:3px solid var(--gold)}
html[data-skin="ink"] .inkv .sq{display:inline-block;width:6px;height:6px;vertical-align:1px;margin-right:8px;flex-shrink:0}
html[data-skin="ink"] .inkv .sq.g{background:var(--green)}
html[data-skin="ink"] .inkv .sq.gold{background:var(--gold)}
html[data-skin="ink"] .inkv .sq.i{background:var(--ink)}

/* gumbi (demo štampiljke, višina 40px) */
html[data-skin="ink"] .inkv .btn{display:inline-flex;align-items:center;justify-content:center;height:40px;font-family:var(--fM);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:0 16px;line-height:1;white-space:nowrap;background:none;cursor:pointer}
html[data-skin="ink"] .inkv .btn-gold{border:2px solid var(--gold);color:var(--acc-text);background:transparent}
html[data-skin="ink"] .inkv .btn-gold:hover{background:var(--gh-bg);color:var(--gh-fg);border-color:var(--gh-bg)}
html[data-skin="ink"] .inkv .btn-dark{border:1px solid var(--btn2);color:var(--shell-fg);background:transparent}
html[data-skin="ink"] .inkv .btn-dark:hover{background:var(--shell-fg);color:var(--shell);border-color:var(--shell-fg)}
html[data-skin="ink"] .inkv .btn-ink{background:var(--ink);color:#F4F3F0;border:1px solid var(--ink)}
html[data-skin="ink"] .inkv .btn-ink:hover{background:transparent;color:var(--ink)}
html[data-skin="ink"] .inkv .btn-line{border:1px solid var(--ink);color:var(--ink);background:transparent}
html[data-skin="ink"] .inkv .btn-line:hover{background:var(--ink);color:#F4F3F0}

/* papirne plošče (demo .plate + .masthead + .rule3).
   PAPIRNI KONTEKST: plošča je otok papirja na temnem ohišju, zato v njej
   preusmerimo splošne žetone na papirne različice. Brez tega se var(--ink)
   znotraj plošče razreši v --shell-fg (#F4F3F0) in v TEMNI temi je besedilo
   belo na belem papirju - dokazano na pogledu Konfiguratorji 14.8.2026, kjer
   so izginili naslov, glave stolpcev in imena. Pravilo stoji tu (enkrat za
   vse INKV poglede); posamezni pogledi, ki isti blok že nosijo, so nedolžna
   podvojitev. */
html[data-skin="ink"] .inkv .plate{
  background:var(--plate);
  color:var(--ink);
  border:1px solid var(--plate-line);
  padding:32px;
  margin-bottom:24px;
  --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 .plate .btn-gold{color:var(--ink)}
html[data-skin="ink"] .inkv .plate .btn-gold:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
html[data-skin="ink"] .inkv .masthead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
html[data-skin="ink"] .inkv .masthead h2{font-family:var(--fD);font-weight:600;font-size:25px;line-height:1.05;color:var(--ink)}
html[data-skin="ink"] .inkv .masthead .mmeta{font-family:var(--fM);font-size:10.5px;letter-spacing:.1em;color:var(--ink2);text-transform:uppercase;text-align:right;line-height:1.8}
html[data-skin="ink"] .inkv .rule3{height:3px;background:var(--ink);margin-top:16px}
html[data-skin="ink"] .inkv .mono{font-family:var(--fM);font-variant-numeric:tabular-nums}
html[data-skin="ink"] .inkv .goldline{border-bottom:4px solid var(--gold);padding-bottom:5px}
html[data-skin="ink"] .inkv .note-ink{border:1px solid var(--ink);padding:16px;font-family:var(--fM);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);line-height:1.9;margin-top:24px}
html[data-skin="ink"] .inkv .note-ink b{color:var(--ink);font-weight:500}

/* ============================================================================
   DELJENE KOMPONENTE · val 1 prenove (16.8.2026), gauntlet port iz
   Desktop/STUDIO-REDESIGN/studio-2026-predlog.html:234-270 (gumb z veliko
   oznako .bl + VEDNO VIDNIM opisom .cap, potek 1-2-3, statusni chip).
   Vrednosti so demo VERBATIM, samo žetoni so preslikani na te, ki jih to
   jedro že ima (demo --hair/--ink/--ink2/--plate -> ista imena tu, že
   kontekstno aliasirana v tokens.css). Val 1 (#home, #menu) teh razredov ne
   uporablja - so priprava za druge poglede (npr. "Poglej kot kupec" /
   "Objavi na spletno stran" na Konfiguratorjih).

   PAPIRNI KONTEKST - POMEMBNO: .actbtn.primary NAPOLNI ozadje z var(--ink). Na
   sami lupini (izven .plate) --ink sledi temi (tokens.css razdelek B:
   --ink:var(--shell-fg)), zato bi se v TEMNI temi napolnil s SVETLO barvo in
   .bl/.cap (var(--plate), tudi svetla) bi postala nevidna - svetlo na
   svetlem. V demotu je bil --ink fiksna konstanta, tu ni. Zato: .actbtn.primary
   uporabljaj SAMO znotraj .plate (kot v izvorni datoteki, vrstice 475-481),
   kjer plošča že prevede --ink na fiksno papirno črnilo (glej vrstico 60
   zgoraj). .actbtn (brez .primary) in .actbtn.gold te pasti nimata - border in
   besedilo smeta slediti temi. */
html[data-skin="ink"] .inkv .acts{display:flex;gap:14px;flex-wrap:wrap;align-items:stretch}
html[data-skin="ink"] .inkv .actbtn{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;border:1px solid var(--hair);padding:16px 18px 14px;max-width:420px;background:none;cursor:pointer}
html[data-skin="ink"] .inkv .actbtn .bl{font-family:var(--fM);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
html[data-skin="ink"] .inkv .actbtn .cap{font-size:12.5px;line-height:1.5;color:var(--ink2);font-family:var(--fB);text-transform:none;letter-spacing:0}
html[data-skin="ink"] .inkv .actbtn.primary{background:var(--ink);border-color:var(--ink)}
html[data-skin="ink"] .inkv .actbtn.primary .bl{color:var(--plate)}
html[data-skin="ink"] .inkv .actbtn.primary .cap{color:color-mix(in srgb, var(--plate) 78%, transparent)}
html[data-skin="ink"] .inkv .actbtn.gold{border:2px solid var(--gold)}
html[data-skin="ink"] .inkv .actbtn.gold:hover{background:var(--gold)}
html[data-skin="ink"] .inkv .actbtn.gold:hover .cap{color:var(--plate-fg)}
html[data-skin="ink"] .inkv .actbtn:not(.primary):not(.gold):hover{border-color:var(--ink)}
html[data-skin="ink"] .inkv .actbtn:disabled{opacity:.45;cursor:not-allowed}

/* potek 1-2-3 (demo .flow/.fstep, vrstice 247-254): ogrodje treh korakov kot
   okvir zaslona, sredinski/trenutni (.now) dobi rahlo zlato podlago */
html[data-skin="ink"] .inkv .flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;border:1px solid var(--hair);margin-bottom:20px}
html[data-skin="ink"] .inkv .fstep{padding:18px 20px;border-left:1px solid var(--hair)}
html[data-skin="ink"] .inkv .fstep:first-child{border-left:0}
html[data-skin="ink"] .inkv .fstep .fn{font-family:var(--fM);font-size:11px;color:var(--gold);letter-spacing:.08em}
html[data-skin="ink"] .inkv .fstep h4{font-family:var(--fD);font-weight:600;font-size:19px;margin:4px 0 6px;color:var(--ink)}
html[data-skin="ink"] .inkv .fstep p{font-size:12.5px;line-height:1.55;color:var(--ink2)}
html[data-skin="ink"] .inkv .fstep.now{background:color-mix(in srgb, var(--gold) 10%, transparent)}

/* statusni chip (demo .statusrow/.schip/.scap, vrstice 267-270) - VEDNO na
   lupini (--shell-fg/--shell-fg2 neposredno, kot v demotu), ne v papirnem
   kontekstu: to je status vrstica pod naslovom pogleda, ne vsebina plošče */
html[data-skin="ink"] .inkv .statusrow{margin-top:16px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
html[data-skin="ink"] .inkv .schip{font-family:var(--fM);font-size:10px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--shell-fg);padding:9px 13px;color:var(--shell-fg)}
html[data-skin="ink"] .inkv .schip b{border-bottom:3px solid var(--gold);padding-bottom:1px;font-weight:500}
html[data-skin="ink"] .inkv .scap{font-size:12.5px;color:var(--shell-fg2);max-width:560px;line-height:1.5}

/* naslovi pogledov ne smejo pod fiksni gumb menija (Rok 16.8., posnetek Narocila);
   v ink-demo.css namesto ink.css, ker kanban builder vzporedno ureja ink.css */
html[data-skin="ink"] .inkv .vhead{padding-left:64px}
html[data-skin="ink"] .inkv-home .half{padding-left:calc(5vw + 44px)}
/* shell naslov (ne-INKV pogledi, npr. Narocila) prav tako ne sme pod burger */
html[data-skin="ink"]:not([data-rail="1"]) .top{padding-left:68px}