/* Ustvarjeno iz tools/bundle.css (kopija iz design sistema), brez @import pisav. Ne urejaj ročno. */
/* Vika Pirnat — komponente. Vse vrednosti pridejo iz tokens.json (tokens.css). Predpona razredov: vp-
   Teme: tokens.css nastavi [data-theme="dark"] in [data-theme="light"]; spletna stran privzeto sledi brskalniku
   (prefers-color-scheme) in ponudi ročni preklop (VP.theme v bundle.js). */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-text); font-size: 18px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-underline-offset: 4px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.vp-preview { padding: var(--space-5); }

/* Dvojezičnost: koren ima data-lang="sl" ali "en"; vsebina v drugem jeziku je skrita. */
[data-lang="sl"] [lang="en"], [data-lang="en"] [lang="sl"] { display: none !important; }

/* Tipografija */
.vp-h1, .vp-h2, .vp-h3 { font-family: var(--font-display); color: var(--ink); margin: 0; text-wrap: balance; }
.vp-h1 { font-size: clamp(32px, 4.8vw, 54px); line-height: 1.06; font-weight: 700; letter-spacing: -0.025em; }
.vp-h2 { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
.vp-h3 { font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.vp-lede { font-size: 20px; line-height: 1.6; color: var(--ink-dim); max-width: 52ch; margin: 0; }
.vp-body { max-width: var(--measure); }
.vp-body p { margin: 0 0 1em; }
.vp-body p:last-child { margin-bottom: 0; }
.vp-body strong { font-weight: 600; }
.vp-small { font-size: 15px; line-height: 1.55; color: var(--ink-dim); margin: 0; }
.vp-eyebrow { font-family: var(--font-mono); font-size: 12px; line-height: 1.4; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); margin: 0; }
.vp-data { font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; }

/* Gumbi */
.vp-btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-text); font-size: 15px; font-weight: 600; line-height: 1.2; padding: 12px 18px; border-radius: var(--radius-m); border: 1px solid var(--edge); background: transparent; color: var(--ink); text-decoration: none; cursor: pointer; }
.vp-btn:hover { border-color: var(--ink); }
.vp-btn--primary { background: var(--lime); border-color: var(--lime-line); color: var(--on-lime); }
.vp-btn--primary:hover { border-color: var(--ink); }
.vp-btn--quiet { border-color: transparent; color: var(--link); padding-inline: 0; text-decoration: underline; text-underline-offset: 5px; }
.vp-btn--quiet:hover { border-color: transparent; color: var(--ink); }

/* Oznake */
.vp-tag { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-mono); font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 8px; border-radius: var(--radius-s); border: 1px solid var(--edge); background: transparent; color: var(--ink); white-space: nowrap; }
.vp-tag--chosen { background: var(--lime); border-color: var(--lime-line); color: var(--on-lime); }
.vp-tag--partial { border-color: var(--lime-line); color: var(--lime-line); }
.vp-tag--no { border-style: dashed; color: var(--ink-dim); }
.vp-tag--risk { background: var(--alert-soft); border-color: var(--alert); color: var(--alert); }
.vp-tag--blind { border-color: var(--magenta); border-style: dashed; color: var(--magenta); }

/* Preklop jezika in teme */
.vp-lang { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--edge); border-radius: var(--radius-m); }
.vp-lang button { appearance: none; border: 0; background: transparent; cursor: pointer; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; padding: 5px 10px; border-radius: var(--radius-s); color: var(--ink-dim); }
.vp-lang button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }

/* Poudarek in izpostavljen stavek */
.vp-marker { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--lime-line); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.vp-pull { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 4vw, 44px); line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); margin: 0; max-width: 18ch; text-wrap: balance; }
.vp-pull__by { display: block; margin-top: var(--space-3); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lime-line); }

/* Koraki »Kako delam« z izhodom za stranko */
.vp-steps { list-style: none; margin: 0; padding: 0; display: grid; max-width: 820px; counter-reset: s; }
.vp-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px var(--space-4); padding-block: var(--space-5); border-top: 1px solid var(--line); counter-increment: s; }
.vp-steps li::before { content: "0" counter(s); grid-row: span 3; font-family: var(--font-mono); font-size: 13px; color: var(--ink-dim); padding-top: 4px; }
.vp-steps h3 { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.vp-steps p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-dim); max-width: 60ch; }
.vp-steps .vp-out { margin-top: 6px; display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 15px; color: var(--ink); }
.vp-out b { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lime-line); }

/* Zemljevid problema (diagram, »faktor X«) */
.vp-map { margin: 0; display: grid; gap: 18px; }
.vp-map__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.vp-map__head > div { display: grid; gap: 10px; max-width: 62ch; min-width: 0; }
.vp-map__title { margin: 0; font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; color: var(--ink); }
.vp-map__sub { margin: 0; font-family: var(--font-mono); font-size: 13px; color: var(--ink-dim); }
.vp-map__replay { appearance: none; border: 1px solid var(--edge); background: transparent; color: var(--ink); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; padding: 8px 12px; border-radius: var(--radius-m); cursor: pointer; }
.vp-map__replay:hover { border-color: var(--ink); }
.vp-map__scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
.vp-map__svg { display: block; width: 100%; min-width: 900px; height: auto; }
.vp-map__legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); }
.vp-map__legend span { display: inline-flex; align-items: center; gap: 8px; }
.vp-lg { display: inline-block; }
.vp-lg--block { width: 10px; height: 10px; background: var(--ink); border-radius: 2px; }
.vp-lg--task { width: 10px; height: 10px; border: 1.5px solid var(--ink); border-radius: 50%; }
.vp-lg--link { width: 20px; border-top: 1.5px solid var(--ink-dim); }
.vp-lg--crit { width: 20px; border-top: 2px solid var(--lime-line); }
.vp-lg--blind { width: 9px; height: 9px; background: var(--magenta); transform: rotate(45deg); }
.vp-lg--bar { width: 20px; height: 10px; border-radius: 2px; border: 1px solid var(--edge); background: repeating-linear-gradient(135deg, var(--edge) 0 2px, transparent 2px 5px); }
.vp-map__cap { display: grid; gap: 6px; max-width: 66ch; }
.vp-map__cap p { margin: 0; font-size: 17px; color: var(--ink-dim); }
.vp-map__cap p strong { color: var(--ink); font-weight: 500; }
.vp-map__hint { display: none; margin: 0; font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); }
@media (max-width: 860px) { .vp-map__hint { display: block; } }
.vp-map__svg text { paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.vp-map .d-lane { stroke: var(--line); stroke-width: 1; }
.vp-map .d-lanelab { fill: var(--ink); font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.vp-map .d-lanemark { fill: var(--ink); }
.vp-map .d-axis line { stroke: var(--line); stroke-width: 1; }
.vp-map .d-axis text { fill: var(--ink-dim); font-family: var(--font-mono); font-size: 11px; text-anchor: middle; }
.vp-map .d-task circle { fill: var(--surface); stroke: var(--ink); stroke-width: 1.6; }
.vp-map .d-task text { fill: var(--ink); font-family: var(--font-text); font-size: 13px; }
.vp-map .d-link { fill: none; stroke: var(--ink-dim); stroke-width: 1.3; stroke-opacity: 0.75; }
.vp-map .d-link--crit { stroke: var(--lime-line); stroke-width: 2.2; stroke-opacity: 1; }
.vp-map .d-linklab { fill: var(--lime-line); font-family: var(--font-mono); font-size: 11px; }
.vp-map .d-arrow { fill: var(--ink-dim); }
.vp-map .d-arrow--crit { fill: var(--lime-line); }
.vp-map .d-bar { stroke: var(--lime-line); stroke-width: 1.6; }
.vp-map .d-hatch { stroke: var(--edge); stroke-width: 2; }
.vp-map .d-barlab { fill: var(--ink); font-family: var(--font-text); font-size: 13px; font-weight: 500; }
.vp-map .d-bartag { fill: var(--ink-dim); font-family: var(--font-mono); font-size: 11px; }
.vp-map .d-blind .dm { fill: var(--magenta); }
.vp-map .d-blind .ln { fill: none; stroke: var(--magenta); stroke-width: 1.2; stroke-dasharray: 3 4; }
.vp-map .d-blind text { fill: var(--magenta); font-family: var(--font-text); font-size: 13px; font-weight: 600; }
.vp-map .d-launch line { stroke: var(--lime-line); stroke-width: 1.2; stroke-dasharray: 2 5; }
.vp-map .d-launch text { fill: var(--lime-line); font-family: var(--font-mono); font-size: 11px; text-anchor: middle; }
.vp-map .seq { opacity: 0; transition: opacity 240ms ease var(--t, 0ms); }
.vp-map .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 360ms ease var(--t, 0ms); }
.vp-map.is-drawn .seq { opacity: 1; }
.vp-map.is-drawn .draw { stroke-dashoffset: 0; }
.vp-map.no-anim .seq, .vp-map.no-anim .draw { transition: none; }

/* Vrstica številk */
.vp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.vp-stat { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5) var(--space-4) var(--space-5) 0; margin: 0; }
.vp-stat + .vp-stat { padding-left: var(--space-4); border-left: 1px solid var(--line); }
.vp-stat__n { order: -1; margin: 0; font-family: var(--font-display); font-size: 48px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.vp-stat__l { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-dim); }
@media (max-width: 720px) {
  .vp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vp-stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .vp-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* Tipi uporabnikov */
.vp-seg { display: grid; gap: var(--space-2); }
.vp-seg__head, .vp-seg__row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1.5fr); gap: var(--space-4); align-items: start; }
.vp-seg__head { padding: 0 var(--space-5) var(--space-2); }
.vp-seg__row { padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); }
.vp-seg__row--chosen { background: var(--lime-soft); border-color: var(--lime-line); }
.vp-seg__type { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.3; color: var(--ink); }
.vp-seg__cell { font-size: 15px; line-height: 1.5; color: var(--ink); margin: 0; }
.vp-seg__cell--muted { color: var(--ink-dim); }
.vp-seg__row--chosen .vp-seg__cell--muted { color: var(--ink); }
.vp-seg__choice { display: grid; gap: var(--space-2); justify-items: start; }
.vp-seg__choice p { margin: 0; font-size: 15px; line-height: 1.5; }
.vp-seg__k { display: none; }
@media (max-width: 820px) {
  .vp-seg__head { display: none; }
  .vp-seg__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .vp-seg__k { display: block; }
}

/* Dnevnik odločitev */
.vp-decisions { display: grid; border-top: 1px solid var(--line); }
.vp-decision { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-5); padding-block: var(--space-5); border-bottom: 1px solid var(--line); align-items: start; }
.vp-decision__what { margin: 0; font-family: var(--font-display); font-size: 19px; line-height: 1.3; font-weight: 600; color: var(--ink); }
.vp-decision__part { display: grid; gap: var(--space-1); }
.vp-decision__part p { margin: 0; font-size: 15px; line-height: 1.55; }
.vp-decision__cost p { color: var(--ink-dim); }
@media (max-width: 820px) { .vp-decision { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); } }

/* Časovnica (navpična, za preproste kronologije) */
.vp-timeline { list-style: none; margin: 0; padding: 0; }
.vp-tl { display: grid; grid-template-columns: 84px 22px minmax(0, 1fr); column-gap: var(--space-3); }
.vp-tl__when { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; padding: 2px 0 var(--space-5); font-family: var(--font-mono); font-size: 12px; line-height: 1.35; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.vp-tl__day { color: var(--ink); font-weight: 500; }
.vp-tl__rail { position: relative; }
.vp-tl__rail::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--line); }
.vp-tl:first-child .vp-tl__rail::before { top: 10px; }
.vp-tl:last-child .vp-tl__rail::before { bottom: auto; height: 10px; }
.vp-tl__rail::after { content: ""; position: absolute; left: 50%; top: 6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--ground); border: 2px solid var(--edge); }
.vp-tl--key .vp-tl__rail::after { background: var(--lime-line); border-color: var(--lime-line); }
.vp-tl--launch .vp-tl__rail::after { top: 3px; width: 18px; height: 18px; margin-left: -9px; background: var(--lime); border: 2px solid var(--lime-line); }
.vp-tl__body { padding-bottom: var(--space-5); min-width: 0; display: grid; gap: var(--space-1); justify-items: start; }
.vp-tl__title { margin: 0; font-family: var(--font-display); font-size: 17px; line-height: 1.35; font-weight: 600; color: var(--ink); }
.vp-tl__text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-dim); }
.vp-tl__body .vp-tag { margin-top: var(--space-1); }

/* Primerjava pred / po */
.vp-bars { display: grid; gap: var(--space-4); padding: var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); }
.vp-bars__title { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.3; }
.vp-bar { display: grid; gap: var(--space-1); }
.vp-bar__label { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; font-size: 15px; }
.vp-bar__value { font-family: var(--font-mono); font-size: 13px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.vp-bar__track { height: 12px; background: var(--line); border-radius: var(--radius-m); overflow: hidden; }
.vp-bar__fill { height: 100%; background: var(--ink-dim); border-radius: var(--radius-m); }
.vp-bar--after .vp-bar__fill { background: var(--lime-line); }

/* Posnetek zaslona */
.vp-phone { margin: 0; display: grid; gap: var(--space-2); width: min(100%, 280px); }
.vp-phone img { display: block; width: 100%; height: auto; border-radius: var(--radius-xl); border: 1px solid var(--line); background: var(--raised); }
.vp-phone figcaption { font-size: 14px; line-height: 1.45; color: var(--ink-dim); }

/* Kontakt in obrazec */
.vp-contact { display: grid; gap: var(--space-4); padding: var(--space-6); background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-l); }
.vp-contact__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.vp-contact__email { font-family: var(--font-mono); font-size: 16px; color: var(--ink); user-select: all; overflow-wrap: anywhere; }
.vp-contact__alt { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.vp-form { display: grid; gap: var(--space-4); }
.vp-field { display: grid; gap: var(--space-1); }
.vp-field label { font-size: 14px; font-weight: 600; color: var(--ink); }
.vp-input { width: 100%; font-family: var(--font-text); font-size: 16px; line-height: 1.4; color: var(--ink); background: var(--ground); border: 1px solid var(--edge); border-radius: var(--radius-m); padding: 11px 12px; }
textarea.vp-input { min-height: 120px; resize: vertical; }
.vp-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.vp-form__done { margin: 0; padding: var(--space-3) var(--space-4); background: var(--lime-soft); color: var(--ink); border-radius: var(--radius-m); font-size: 15px; }

/* Glava in noga strani */
.vp-wrap { max-width: var(--content-max); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.vp-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3) var(--space-5); padding-block: 18px; border-bottom: 1px solid var(--line); }
.vp-header__name { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.vp-header__nav { display: flex; flex-wrap: wrap; gap: 6px 22px; font-family: var(--font-mono); font-size: 13px; }
.vp-header__nav a { color: var(--ink-dim); text-decoration: none; }
.vp-header__nav a:hover, .vp-header__nav a[aria-current="page"] { color: var(--ink); }
.vp-header__end { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
.vp-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-5); padding-block: var(--space-5) var(--space-7); border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); }

/* Postavitev strani */
.vp-section { padding-block: var(--space-8); border-top: 1px solid var(--line); }
.vp-section__head { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); max-width: var(--measure); }
.vp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 280px); gap: var(--space-8); align-items: start; }
.vp-hero { padding-block: var(--space-9) var(--space-7); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 280px); gap: var(--space-8); align-items: end; }
.vp-hero__text { display: grid; gap: var(--space-5); min-width: 0; }
.vp-meta { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: start; gap: var(--space-2) var(--space-6); margin: 0; }
.vp-meta div { display: grid; gap: 2px; }
.vp-meta dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); }
.vp-meta dd { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ink); }
.vp-reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); counter-reset: r; }
.vp-reasons li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-3); counter-increment: r; }
.vp-reasons li::before { content: counter(r); font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--lime-line); border: 1px solid var(--lime-line); border-radius: 50%; width: 28px; height: 28px; display: grid; place-items: center; margin-top: 2px; }
.vp-reasons h4 { margin: 0 0 2px; font-family: var(--font-display); font-size: 18px; line-height: 1.35; font-weight: 600; }
.vp-reasons p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-dim); }
.vp-notes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); }
.vp-notes li { display: grid; gap: var(--space-1); align-content: start; padding-top: var(--space-3); border-top: 1px solid var(--line); }
.vp-notes h4 { margin: 0; font-family: var(--font-display); font-size: 18px; line-height: 1.35; font-weight: 600; }
.vp-notes p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-dim); }
.vp-rank { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.vp-rank > div { display: grid; gap: var(--space-1); justify-items: start; padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); }
.vp-rank b { font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1.25; }
.vp-band { background: var(--surface); border-top: 1px solid var(--line); }
.vp-band__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); padding-block: var(--space-9); align-items: start; }
@media (max-width: 820px) {
  .vp-split, .vp-hero, .vp-band__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .vp-hero { padding-block: var(--space-7) var(--space-6); }
  .vp-section { padding-block: var(--space-7); }
  .vp-meta { grid-template-columns: repeat(2, minmax(0, auto)); }
  .vp-notes, .vp-rank { grid-template-columns: minmax(0, 1fr); }
  .vp-band__inner { padding-block: var(--space-7); }
}