/* ================================================================
   VENDOR ONBOARDING — popup tok "Otvorimo tvoj profil"
   Osam koraka (welcome · identity · photos · story · offer · price ·
   preview · publish) + traka nastavka. Flag: VENDOR_ONBOARDING_V2.
   NE dira postojeći /vendor/registracija (…/onboarding/step1.html).

   ─── UGOVOR S PREDLOŠKOM ───
   Imena klasa NISU moja — dolaze iz prototipa i iz `_layout.html:6-22`,
   gdje je predložak izričito propisao: „stilove piše
   static/css/vendor-onboarding.css. Sve je omotano u `.onb` da se cijeli
   set može scopeati (`.onb .body { … }`) i ne sudari se s globalnim
   `.card`/`.tag`." Zato je SVAKI selektor ovdje potomak `.onb` — bez
   toga bi `.body`, `.card`, `.row`, `.img`, `.tag` pojeli cijeli portal.
   Korijen nosi `class="onb portal-theme-vendor"`.

   Mobile-first: pisano i mjereno na 390×844, desktop je proširenje.
   Surface mode: PROFESSIONAL (vendor), s jednim front-door dodirom.

   OVISNOSTI (učitane prije ovog fajla, v. `_layout.html:29`):
     static/css/dalia-portal.css — tokeni, z-registar, `dpFadeUp`,
                                   `dpAquarelleBreath`, `.dp-skel`, `--aq-*`

   ─── REFERENTNE IZVEDBE (docs/DALIA_FRONTEND_STANDARD.md §c) ───
     modal / donji list  → `.vd-sheet`  vendor-discovery.css:351-453
                           (44×44 zatvaranje, safe-area u podnožju,
                            z iz registra, prijelom na 769px)
     kartica u mreži     → `.vd-card`   vendor-discovery.css:268-348
                           (auto-fill+minmax, RM gasi lift)
     gumb i stanja       → `.dp-btn`    dalia-portal.css:1208-1310
                           (disabled = razlika PLOHE; brava transform:none)
     prazno stanje       → `.dp-empty`  dalia-portal.css:1443-1461
     skeleton            → `.dp-skel`   dalia-portal.css:948-1006
     akvarel             → `.dp-aquarelle`  dalia-portal.css:911-946
                           (BRAND_SYSTEM §2.3 — koristi se, ne kopira)
     zaglavlje-ugovor    → couple-rezervacije.css:1-22, vendor-discovery.css:1-12

   ─── ŠTO OVAJ FAJL NE RADI (nepregovorljivo, STANDARD §d) ───
     · nijedan sirovi hex, font-family bez tokena, inline cubic-bezier
     · svojstva u tranzicijama navedena poimence — skraćivanje na `all`
       je zabranjeno (guard skenira i komentare, pa ni ovdje ne stoji)
     · z-index samo iz registra; unutar popupa z-indexa NEMA — slaganje
       rješava DOM redoslijed pozicioniranih elemenata
     · cilj dodira ≥44×44 px (izmjereno u pregledniku, ne procijenjeno),
       primarni CTA u donjoj trećini, safe-area na dnu
     · crveno samo za nepovratan gubitak — „nedostaje" nikad nije crveno
     · 0 novih `@keyframes`

   ─── POKRET (VISUAL_CANON §2.2) — NIJEDAN NOVI KEYFRAME ───
     vo-pop-open   emotional (460 ms, --ease-emo) — reuse `dpFadeUp`
     vo-wash-breath ambient  (52 s)               — reuse `dpAquarelleBreath`
   Obje se gase pod `prefers-reduced-motion` (dno fajla).

   ─── RASMUS GATE 2026-08-01 — što je ovaj prolaz zatvorio ───
   Ovaj je fajl jedini u programu koji je §c stvarno otvorio prije pisanja i to
   se vidi. Pale su četiri stvari, sve mjerljive:
     1. KONTRAST: `.pill.n` 3,72:1 i `.form-error` 4,13:1 pri pragu 4,5:1 za
        tekst (izračunato, ne procijenjeno). Uzrok su portalski `--badge-*`
        tokeni, pa isti par pada svugdje gdje se koriste — STANDARD §e.
     2. DODIR: mete u `.ph-actions` preklapale su se 7 px, i to preko
        destruktivne radnje.
     3. PREGLED: sve unutar `.listing` bilo je zlatna podcrtana poveznica na
        ekranu koji tvrdi da pokazuje kako profil vidi PAR.
     4. ZAGLAVLJE OVOG UGOVORA tvrdilo je da se `.dp-empty` i `.dp-skel`
        „koriste izravno". Ne koriste se ni u jednom od jedanaest predložaka.
        Ugovor koji laže gori je od ugovora kojeg nema; sada opisuje stvarnost.
   Puni nalaz: docs/rasmus/vendor/RASMUS_VENDOR_ONBOARDING_KYB_AUDIT.md
   ================================================================ */

.onb {
  /* ── Radijusi. Repo NEMA --radius-* tokene (step1.html ih zove s
        fallbackom u prazno). Isti postupak kao `.vd-scope`: lokalna
        ljestvica, fajl-scoped, ne izvozi se u druge portale. */
  --vo-radius:      20px;   /* popup */
  --vo-radius-md:   13px;   /* kartice, polja, ploče */
  --vo-radius-sm:   9px;    /* sitni gumbi, oznake */
  --vo-radius-pill: 999px;

  /* ── Ritam ruba. Prijelom mijenja VRIJEDNOST TOKENA, ne redeklarira
        pravila (uzor: portal-chrome.css:46-60 / guest-docks.css:33-52). */
  --vo-gutter:      16px;   /* tijelo popupa — 4px mreza, VISUAL_CANON §1 */
  --vo-gutter-edge: 16px;   /* zaglavlje, točkice, podnožje */

  /* ── Boja. Sve izvedeno iz .portal-theme-vendor tokena; fallback je
        couple token da ploha ne pukne ako tema ikad otpadne. */
  --vo-accent:      var(--accent-vendor, var(--gold-deep));
  --vo-accent-2:    var(--accent-vendor-2, var(--gold-bright));
  --vo-accent-soft: var(--accent-vendor-soft, var(--gold-bright));
  --vo-accent-tint: var(--accent-vendor-tint, color-mix(in srgb, var(--gold-deep) 6%, transparent));
  --vo-accent-line: var(--accent-vendor-line, color-mix(in srgb, var(--gold-deep) 18%, transparent));
  /* Tekst NA ispunjenoj accent plohi. Izmjereno nad vrijednostima tokena
     `--paper-vendor-soft` i `--accent-vendor` (dalia-portal.css:214, :222):
     6,7:1, pri pragu 4,5:1 za tekst. Kontrast se računa, ne procjenjuje
     (STANDARD §g). Vrijednosti se ovdje ne prepisuju — prepisana
     vrijednost je sljedeći drift (§e#20). */
  --vo-on-accent:   var(--paper-soft);

  /* Zlatna vlas. `--line-warm` ovdje NE valja: .portal-theme-vendor ga
     pregazi u sage, a zlato je konstanta brenda ("dodir, ne polje") i
     mora preživjeti temu. `--gold` tema ne dira, pa ga miksam. */
  --vo-gold-line: color-mix(in srgb, var(--gold) 34%, transparent);
  --vo-gold-wash: color-mix(in srgb, var(--gold) 8%, transparent);

  /* Ploha polja/kartica UNUTAR popupa: mora biti SVJETLIJA od
     `--paper-soft` (papir na koji se piše, iznad papira popupa), a
     ljestvica tokena iznad paper-soft nema stepenicu. Bez sirovog hexa:
     miks prema imenovanoj boji (isti postupak kao `.dp-pill`
     dalia-portal.css:1192, koji koristi ključnu riječ `white`). */
  --vo-field:      color-mix(in srgb, var(--paper-soft) 45%, white);
  --vo-field-line: var(--line-strong);
  /* Placeholder: tiši od --ink-mute. `--ink-faint` je couple-topao i
     vendor tema ga ne prevodi, pa se ne koristi. */
  --vo-ink-faint:  color-mix(in srgb, var(--ink-mute) 55%, var(--paper-soft));

  /* Razmak od gornjeg ruba na mobitelu: popup ostavlja rub stranice
     vidljiv pa se čita kao SLOJ IZNAD, ne kao nova stranica — isto
     pravilo kao `cc-dock-expand` (motion registar §2.2). safe-area je
     ukomponiran u bazu, ne dodan naknadno (uzor: --dw-dock-base). */
  --vo-scene-gap: max(14px, env(safe-area-inset-top));

  /* Focus prsten: ploha mijenja SAMO boju (Bruno 2026-08-01). Default je
     `--lilac-400`, potpisna boja mladenaca; ovdje je akcent vendor teme jer
     prsten mora čitati kao dio plohe na kojoj sjedi (mikro-prolaz #7). */
  --focus-ring-color: var(--vo-accent);

  position: relative;
  min-height: 100dvh;
  color: var(--ink);
  font-family: var(--font-body);
  /* Prozirno namjerno: papir je na <html> (v. odjeljak AKVAREL niže).
     Neprozirna podloga ovdje bi prekrila `.dp-aquarelle`, koji sjedi na
     negativnom z-sloju. */
  background: transparent;
}

/* ════════════════════════════════════════════════════════════════
   AKVAREL IZA POPUPA — kanonska izvedba, bez blizanca
   DUG IZ PRVE VERZIJE JE ZATVOREN (ODLUKA O-4, 2026-08-01).

   `_layout.html` više ne nudi `.bg > .wash + .bloom.a + .bloom.b + .veil`,
   nego jedan `<div class="dp-aquarelle" aria-hidden="true"></div>`.
   BRAND_SYSTEM §2.3: postoji JEDNA izvedba cjelostraničnog akvarel sloja
   (`dalia-portal.css:911-946` — `dpAquarelleBreath` 52 s, paper-veo
   `::after`, `prefers-reduced-motion` guard) i druga se ne gradi.
   Ovaj fajl je prije imao njezinog strukturnog blizanca; sada samo bira
   sliku i jačinu tokenima, a ponašanje dolazi iz portala.

   BRAND_SYSTEM §2.4 — što je time riješeno:
     t.1 max JEDAN akvarel sloj po viewportu → prototip ih je slagao tri
                                               (wash + dva bloom-a); sad je
                                               jedan element, bez `display:none`
                                               mrtvog markupa
     t.2 iza teksta ≤ --aq-max (0.18)        → `--aq-empty` 0.16
     t.3 nikad iza fotografije               → akvarel je na STRANICI, fotografije
                                               su u koraku 3 i 7 UNUTAR popupa, a
                                               `.pop` je neprozirni `--paper` —
                                               akvarel im nikad nije podloga
                                               (izmjereno: rgb(251,250,248), bez alfe)
     t.4 nikad bez paper-vela                → veo je `.dp-aquarelle::after`,
                                               ne zaobilazi se vlastitim slojem
     t.5 bez rotacije, zrcaljenja i filtera  → prototipovi rotate(-8deg),
                                               scaleX(-1) i saturate(.82) su
                                               otišli s blizancem
     t.6 pokret samo iz registra             → dpAquarelleBreath, 0 novih keyframea

   Slika: `--aq-3` = aquarelle-3-glaze.webp, Marta Katavić. Stock
   `static/img/watercolor/violet-*` se na ovoj plohi ne koristi (O-4).

   PAPIR IDE NA <html>, NE NA .onb: akvarel je `position: fixed` na
   negativnom z-sloju, a `.onb` je pozicioniran (`position: relative`) pa se
   njegova neprozirna podloga crta IZNAD tog sloja i pojela bi ga.
   Isto pravilo i isti recept kao `public-faq.css:21-25`.
   ════════════════════════════════════════════════════════════════ */
html:has(.onb) { background: var(--paper); }
/* `html:has(.onb) body` je (0,1,2) — točno koliko i `html[data-dark='1'] body`
   iz `base.html:145`. Blok `{% block head %}` (base.html:159) učitava ovaj fajl
   POSLIJE tog inline stila, pa na izjednačenoj specifičnosti pobjeđuje ovo
   pravilo. Bez toga bi u dark modu tamna neprozirna podloga iz base.html
   legla preko akvarela, a ploha nema dark tokene (ovaj fajl ih ne definira) —
   dobili bismo tamnu podlogu sa svijetlim tekstom. Ploha je namjerno
   light-only. */
html:has(.onb) body { background: transparent !important; }
html[data-dark='1']:has(.onb) { background: var(--paper) !important; }

.onb {
  --aquarelle-img: var(--aq-3);
  --aquarelle-opacity: var(--aq-empty);
}

/* ════════════════════════════════════════════════════════════════
   SCENA I POPUP
   Obrazac je `.vd-sheet` (STANDARD §c): ista ploha je ladica s dna na
   mobitelu i centrirani dijalog od 769 px.
   ODSTUPANJE: `.vd-sheet` je `position: fixed` i vidljiv tek kad JS doda
   `.is-open`. Onboarding je SADRŽAJ STRANICE — isti recept bi bez JS-a
   dao praznu stranicu. Zato popup ostaje u toku dokumenta.
   ════════════════════════════════════════════════════════════════ */
.onb .scene {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--vo-scene-gap) 0 0;
}

.onb .pop {
  /* Containing block za zlatnu vlas (::before). Ne oslanjati se na
     `transform` iz ulazne animacije — on nestane kad animacija završi. */
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100dvh - var(--vo-scene-gap));
  overflow: hidden;
  background: var(--paper-soft);
  border-radius: var(--vo-radius) var(--vo-radius) 0 0;
  box-shadow: var(--shadow-lg);
  animation: dpFadeUp 460ms var(--ease-emo) both;   /* vo-pop-open */
}
/* Zlatna vlas uz rub — jedini zlatni potez na plohi (dodir, ne polje). */
.onb .pop::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: 5px;
  border: 1px solid var(--vo-gold-line);
  border-radius: calc(var(--vo-radius) - 4px);
  opacity: 0.5;
  pointer-events: none;
}

/* ── Zaglavlje ── */
.onb .pop-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px var(--vo-gutter-edge) 0;
}
.onb .brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* DUG ZATVOREN (Rasmus 1.8.). Ovdje je bio CSS-znak — sage disk sa zlatnim
   prstenom — dok KYB na istom mjestu nosi pravi `dalia-mark-flower.svg`.
   Predložak sada koristi isti asset, pa je aproksimacija obrisana umjesto
   da ostane kao mrtvo pravilo koje netko vrati. */
.onb .brand img { display: block; flex: none; }
.onb .pop-head .r { display: flex; align-items: center; gap: 6px; }

.onb .help {
  display: inline-flex;
  align-items: center;
  min-height: 44px;             /* izmjereno na 390 px: 36 px je palo prolaz */
  padding: 7px 13px;
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  background: var(--paper-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--vo-radius-pill);
  cursor: pointer;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.onb .help:hover,
.onb .help:focus-visible { border-color: var(--vo-accent); color: var(--vo-accent); }

.onb .x {
  display: grid;
  place-items: center;
  width: 44px;                  /* točno 44×44, kao `.vd-sheet-close` */
  height: 44px;
  font-size: var(--fs-lead);
  line-height: 1;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: 50%;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}
.onb .x:hover,
.onb .x:focus-visible { background: var(--paper-2); color: var(--ink); }

/* ── Osam točkica ────────────────────────────────────────────────
   Napredak je osam segmenata, NE postotak (01_FLOW §3.0: postotak laže
   jer koraci nisu jednake težine). Segmenti su `flex: 1` pa red apsorbira
   širinu — izmjereno na 390 px: 8 × 39,5 px, bez prelijevanja.
   Zlato označava SAMO trenutni korak: 3 px vlas, ne polje.
   Pristupačnost je riješena u predlošku (`_dots.html:11` nosi role="img"
   i jednu rečenicu umjesto osam praznih elemenata) — boja ovdje ne nosi
   nikakvu informaciju sama za sebe. */
.onb .dots {
  flex: none;
  display: flex;
  gap: 6px;
  padding: 14px var(--vo-gutter-edge) 0;
}
.onb .dots i {
  flex: 1 1 0;
  height: 3px;
  border-radius: var(--vo-radius-pill);
  background: var(--line);
  transition: background-color 0.35s var(--ease);
}
.onb .dots i.on  { background: var(--vo-accent-soft); }
.onb .dots i.now { background: var(--gold); }

/* ── Obrazac, tijelo, podnožje ───────────────────────────────────
   `.onb-form` obuhvaća `.body` i `.foot` (`_layout.html:55-65`), pa mora
   biti flex stupac — inače `.body` ne skrola i `.foot` ne stoji na dnu. */
.onb .onb-form {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.onb .body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 16px var(--vo-gutter) 20px;
  scrollbar-width: thin;
}
.onb .body::-webkit-scrollbar { width: 5px; }
.onb .body::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--vo-radius-sm);
}

.onb .foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px var(--vo-gutter-edge) calc(12px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--paper-2) 55%, transparent);
  border-top: 1px solid var(--line);
}
/* „Preskoči" i „Sljedeće" u istom kutu: preskakanje NIKAD nema težinu
   glavnog gumba (form-prolaz #6). Na 390 px se slažu u stupac da
   „Preskoči, dodat ću poslije" ne gura CTA izvan ruba. */
.onb .foot-right {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 6px;
  min-width: 0;               /* smije se stisnuti; inače gura CTA van ruba */
}
.onb .foot > .back { flex: 0 0 auto; }

/* ── Gumbi ───────────────────────────────────────────────────────
   `.cta` stoji i na <button> i na <a> (publish.html:25, :79) — zato
   inline-flex i ugašeni podcrt.
   ZAŠTO NIJE `.dp-btn`: `.dp-btn` je verzalni pilula-CTA sa zlatnim
   sweepom (0.2em letter-spacing) — brendski potez za editorial i javni
   sloj. Ovdje je gumb RADNA kontrola u podnožju čarobnjaka: izmjereno na
   390 px, verzal s tim razmakom lomi „Provjera i naplata →" u dva retka.
   Preuzimam dva tvrda pravila iz `.dp-btn` (dalia-portal.css:1235-1246):
   disabled je razlika PLOHE, ne svjetline; i brava `transform: none` na
   :active — gumb se na klik NE diže. */
.onb .cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 13px 22px;
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.005em;
  text-align: center;
  text-decoration: none;
  color: var(--vo-on-accent);
  background: var(--vo-accent);
  border: 1px solid var(--vo-accent);
  border-radius: var(--vo-radius-md);
  cursor: pointer;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease),
              color 0.18s var(--ease);
}
.onb .cta:hover { background: var(--vo-accent-2); border-color: var(--vo-accent-2); }
.onb .cta:active { transform: none; }
.onb .cta.ghost {
  color: var(--vo-accent);
  background: none;
  border-color: var(--vo-accent-soft);
}
.onb .cta.ghost:hover {
  color: var(--vo-accent);
  background: var(--vo-accent-tint);
  border-color: var(--vo-accent);
}
.onb .cta.wide { width: 100%; }
.onb .cta:disabled,
.onb .cta[aria-disabled="true"] {
  color: var(--ink-mute);
  background: var(--paper-2);
  border-color: var(--line-strong);
  cursor: not-allowed;
}

.onb .back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 2px;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.onb .back:hover { color: var(--vo-accent); }

/* Zajednički focus prsten — GEOMETRIJA IZ TOKENA, boja iz teme (IK#10,
   dalia-portal.css `--focus-ring-*`, Bruno 2026-08-01). Ploha override-a
   isključivo boju; širina i odmak se ne diraju, inače prsten prestane biti
   ista stvar dok korisnik tabom prelazi iz portala u portal.
   `border-radius` se NE postavlja: outline već prati radijus elementa, a
   radijus ovdje bi na fokus poravnao pilulu u pravokutnik. */
.onb :is(button, a, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* ════════════════════════════════════════════════════════════════
   TIPOGRAFIJA EKRANA
   ════════════════════════════════════════════════════════════════ */
.onb .eyebrow {
  margin-bottom: 9px;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
/* Red „3. korak … 4 od 5" (photos.html:16). */
.onb .onb-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.onb .count { color: var(--vo-accent); font-variant-numeric: tabular-nums; }

.onb .t {
  margin-bottom: 12px;
  font-family: var(--font-display);
  /* Donja i gornja granica su stepenice s ljestvice (24 → 32); srednji član
     ostaje viewportni jer naslov koraka mora disati s popupom. */
  font-size: clamp(var(--fs-title), 8vw, var(--fs-display));
  font-weight: 400;
  /* 1.15, ne 1.1: hrvatski naslov nosi kvačice iznad verzalne visine
     (Š, Č, Ž) — na 1.1 se kvačica na 390 px lijepi za gornji rub retka. */
  line-height: 1.15;
  color: var(--ink);
}
.onb .t.sm { font-size: clamp(var(--fs-lead), 6.6vw, var(--fs-title)); }

.onb .lede {
  margin-bottom: 16px;
  /* --fs-base, ne --fs-small (Zander, 6.8.): cijeli je carobnjak pisao na
     --fs-meta/--fs-small (18x prema 1x --fs-base), pa je uvodna recenica ekrana
     bila MANJA od polja obrasca. Ravnanje prema dolje je isti kvar kao kolaps
     prema gore — tijelo je bilo napusteno kao uloga. */
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 52ch;              /* mjera retka, uzor `.rez-empty` */
}
.onb .lede b { font-weight: 600; color: var(--ink); }

.onb .hint {
  margin-top: 8px;
  font-size: var(--fs-meta);
  line-height: 1.6;
  color: var(--ink-mute);
  max-width: 52ch;
}
.onb .hint b { font-weight: 600; color: var(--ink-soft); }

.onb .sub { margin: 20px 0 9px; font-size: var(--fs-meta); font-weight: 700; }

.onb .rule { height: 1px; margin: 18px 0; background: var(--line); }

.onb .link {
  font-weight: 600;
  color: var(--vo-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
/* `.link` stoji i na <button> (pw-toggle, skip-line) — mora izgledati
   kao poveznica, a ostati gumb.
   NAMJERNO `font-family`, a NE skraćeni `font: inherit`: skraćenica
   resetira i `font-size`, a `.onb button.link` (0,2,1) nadjačava
   `.onb .skip-line` (0,2,0) — izmjereno, „Preskoči, dodat ću poslije"
   je zbog toga rastao na 16 px i probijao desni rub podnožja na 390 px.
   Zato su i specifična pravila ispod kvalificirana elementom. */
.onb button.link {
  font-family: var(--font-body);   /* ne `inherit`: guard traži token u retku */
  font-weight: 600;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
/* Oko u polju lozinke NE ZIVI OVDJE: radi ga `static/js/password-field.js` +
   `password-field.css` (ista primitiva kao na `/prijava`). Ovdje je 9.8. nakratko
   stajala druga izvedba — maknuta je da se ponasanje ne popravlja na tri mjesta. */
/* Preskakanje je tekst, ne gumb — nikad ista težina kao „Sljedeće". */
.onb button.skip-line {
  min-height: 44px;
  font-size: var(--fs-meta);
  /* 400, ne 500 (Zander, 6.8.): na offer.html su se 400/500/600/700 pojavljivale
     istovremeno, a kanon dopusta dvije po pogledu. Razliku ovdje ionako nose
     boja i podcrta, ne tezina. */
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-mute);
  text-align: right;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.onb button.skip-line:hover { color: var(--vo-accent); }

/* Fleuron — DUG ZATVOREN 1.8. (drugi krug), i to ne zato što je metrika
   zavikala nego zato što je metrika bila u pravu.
   Ovdje su stajala tri tekstualna znaka U+2726 koje je upisivao predložak.
   Kanonski put je oduvijek bio `--ornament-fleuron` (dalia-portal.css:132 →
   `static/img/ornaments/fleuron.svg`, 24×24, opis u biblioteci doslovno glasi
   „in-line ornament, list marker") i sada se koristi.
   TRI ZNAKA POSTALA SU JEDAN. Ornament je separator, a tri separatora u nizu
   su ukras koji slavi sam sebe — biblioteka za taj posao daje jednu oznaku i
   ona je dovoljna. Predložak sada ne upisuje ništa; ornament je stvar CSS-a,
   kao `.dp-divider-thin` (dalia-portal.css:925-931), čiji je ovo recept. */
.onb .fleuron {
  height: 24px;
  margin: 16px auto 6px;
  background-image: var(--ornament-fleuron);
  background-size: 24px 24px;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.8;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════
   POLJA
   Greška u validaciji NE briše unos (živa buba iz vendor_portal.py) —
   to je serverska obveza; ovdje su samo stanje polja i poruka.
   Nikad crveno za „nedostaje": crveno je za nepovratan gubitak
   (mikro-prolaz #2 / IK#8). Zato je `.err` jantar, ne alarm.
   ════════════════════════════════════════════════════════════════ */
.onb .f { display: block; margin-bottom: 13px; }
.onb .f > span {
  display: block;
  margin-bottom: 5px;
  font-size: var(--fs-meta);
  font-weight: 600;
}
/* Brojač znakova uz naljepnicu (`.c` / `.counter`, story.html:50).
   Ne postavljam `display` — element se pojavljuje tek kad JS makne
   `hidden`, a author `display` bi UA-ov `display:none` pregazio. */
.onb .c,
.onb .counter {
  float: right;
  font-size: var(--fs-micro);
  font-weight: 400;   /* v. .skip-line — 500 izlazi iz fajla */
  font-style: normal;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.onb .counter.is-over { color: var(--badge-warning-fg); }

.onb .inp {
  width: 100%;
  padding: 13px;
  font: inherit;
  font-size: var(--fs-base);             /* ≥16 px: iOS ne zumira formu na fokus */
  color: var(--ink);
  background: var(--vo-field);
  border: 1px solid var(--vo-field-line);
  border-radius: var(--vo-radius-md);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.onb .inp:focus {
  outline: 0;
  border-color: var(--vo-accent-soft);
  box-shadow: 0 0 0 3px var(--vo-accent-tint);
}
.onb .inp::placeholder { color: var(--vo-ink-faint); }
.onb textarea.inp { resize: none; line-height: 1.55; }

.onb .has-err .inp { border-color: var(--badge-warning-fg); }
.onb .err {
  display: block;
  margin-top: 5px;
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--badge-warning-fg);
}
/* Jedna poruka iznad forme kad padne cijeli upis (`_layout.html:59`).
   ZAOBILAZNICA MAKNUTA 1.8. (drugi krug): prvi prolaz je forsirao `--ink` jer
   je jantar na jantaru bio 4,13:1. Token je popravljen u `:root` (mjeren nad
   kompozitom, ne nad papirom) i sada je 4,53:1 na vendor papiru, pa poruka
   opet nosi jantarnu tintu — a jantar ovdje NIJE ukras nego jedini nositelj
   razlike prema `.err` u polju i prema crvenom, koje je rezervirano za
   nepovratan gubitak (mikro-prolaz #2, Bruno 1.8.). */
.onb .form-error {
  margin-bottom: 14px;
  padding: 11px 13px;
  font-size: var(--fs-meta);
  line-height: 1.55;
  color: var(--badge-warning-fg);
  background: var(--badge-warning-bg);
  border-radius: var(--vo-radius-md);
}
/* Tiha obavijest („Ovu si već dodao.") — obavijest, ne greška. */
.onb .notice {
  margin-bottom: 12px;
  padding: 10px 13px;
  font-size: var(--fs-meta);
  line-height: 1.55;
  color: var(--ink-soft);
  background: var(--paper-2);
  border-radius: var(--vo-radius-md);
}

/* ════════════════════════════════════════════════════════════════
   ČIPOVI
   Odabir je KONTROLNO stanje (ne semantička oznaka), pa ispuna smije
   nositi odabir — semantika bi morala biti prsten (IK#8).
   `.chip` je <label> oko radija, ali i <a> (publish.html:30) — otud
   inline-flex i ugašeni podcrt. Skriveni radio ostaje fokusabilan, pa
   fokus mora biti vidljiv NA ČIPU, ne na nevidljivom inputu.
   ════════════════════════════════════════════════════════════════ */
.onb .chips { display: flex; flex-wrap: wrap; gap: 7px; }
.onb .chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;               /* cilj ≥44 px */
  padding: 8px 15px;
  font-size: var(--fs-meta);
  color: var(--ink);
  text-decoration: none;
  background: var(--vo-field);
  border: 1px solid var(--vo-field-line);
  border-radius: var(--vo-radius-pill);
  cursor: pointer;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease),
              color 0.18s var(--ease);
}
.onb .chip:hover { border-color: var(--vo-accent-soft); }
.onb .chip.on {
  color: var(--vo-on-accent);
  background: var(--vo-accent);
  border-color: var(--vo-accent);
}
.onb .chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.onb .chip:has(input:focus-visible) {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}
.onb .chip.sm { min-height: 0; padding: 5px 11px; font-size: var(--fs-micro); cursor: default; }

/* Tražilica kategorija (identity.html:35-54). Rezultat pogođen preko
   sinonima nosi tihi razlog (IK#6) — `.why` se otkriva iz JS-a, pa
   `display` ovdje NE smije biti postavljen. */
.onb .cat-groups { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.onb .cat-group { border-radius: var(--vo-radius-md); }
.onb .cat-group > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* --ink i ZATVORENA (Zander, 6.8.): ovih devet naslova je primarna navigacija
     koraka 2 dok tražilica nije upisana, a na --ink-mute su nosili 3,37:1 uz
     13px + verzal + razmak slova — cetiri poreza odjednom. [open] je i dalje
     --ink, ali sada to nije razlika nego zatecena vrijednost. */
  color: var(--ink);
  cursor: pointer;
}
.onb .cat-group[open] > summary { color: var(--ink); }
.onb .cat-group > .chips { padding: 4px 0 10px; }
.onb .cat-item { gap: 6px; }
.onb .why { font-style: normal; font-size: var(--fs-micro); color: var(--ink-mute); }
.onb .chip.on .why { color: var(--vo-on-accent); opacity: 0.85; }

/* ════════════════════════════════════════════════════════════════
   KARTICE ZNAČAKA (merchant_badges)
   `.card` je <fieldset>, `.lbl` je <legend> (offer.html:41-42) — otud
   reset ruba i `min-width: 0` (fieldset inače ima `min-width:min-content`
   i razvali grid).
   Tri stanja, ne dva: da / ne / NEODGOVORENO. Neodgovoreno je MIRNO — ne
   smije izgledati kao „ne", inače brzi vendor izgleda lošije od sporog
   (`merchant_badges.state` je NULL bez DEFAULT-a).
   Mreža apsorbira N+1 (integration contract §4 t.3).
   ════════════════════════════════════════════════════════════════ */
.onb .grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 9px;
}
.onb .card {
  min-width: 0;
  padding: 12px;
  background: var(--vo-field);
  border: 1px solid var(--vo-field-line);
  border-radius: var(--vo-radius-md);
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.onb .card.on {
  background: var(--vo-accent-tint);
  border-color: var(--vo-accent-soft);
}
.onb .card .lbl {
  padding: 0;
  font-size: var(--fs-meta);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.onb .card .hint { margin-top: 4px; margin-bottom: 8px; }
.onb .card .chips { margin-top: 8px; }
.onb .card .chip { padding: 8px 12px; font-size: var(--fs-meta); }

/* ════════════════════════════════════════════════════════════════
   MREŽA FOTOGRAFIJA
   IK#4 — imenovani prag: sličica ≥96 px nosi oznaku kadra.
   IK#8 — naslovna se označava PRSTENOM, ne ispunom.
   IK#9 — povlačenje mišem ima parnjaka: `.ph-actions` su PRAVI gumbi
          (gore/dolje/naslovna/ukloni), pa palac i tipkovnica rade isto
          što i miš. Zato su vidljivi, ne hover-only.
   Prostor se rezervira (aspect-ratio) pa dolazak slike ne pomiče layout.
   ════════════════════════════════════════════════════════════════ */
.onb .photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
/* Plocica je sada STUPAC: slika gore, traka meta dolje. Prije je bila kvadrat
   s `overflow:hidden` i mete su plivale PO slici; traka ispod bi se u tom
   okviru odrezala. `aspect-ratio` seli na samu sliku, pa slika ostaje kvadrat,
   a plocica naraste za visinu trake. */
.onb .ph {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  border-radius: var(--vo-radius-md);
}
.onb .ph > img {
  aspect-ratio: 1 / 1;
  border-radius: var(--vo-radius-md);
  overflow: hidden;
  background: linear-gradient(135deg, var(--paper-2), var(--vo-accent-tint));
}
/* Meta za dodavanje nema traku, pa zadrzava puni kvadrat. */
.onb .ph.add {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(135deg, var(--paper-2), var(--vo-accent-tint));
}
.onb .ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Oznaka „Naslovna" ostaje NA slici — ona je stanje, ne kontrola. */
.onb .ph .tag { z-index: 1; }
.onb .ph.cover {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 10;
  /* Prsten, ne ispuna — naslovna se čita i kad oznaka padne. */
  box-shadow: inset 0 0 0 2px var(--vo-accent);
}
.onb .ph .tag {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 3px 8px;
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--vo-on-accent);
  background: color-mix(in srgb, var(--ink) 80%, transparent);
  border-radius: var(--vo-radius-sm);
}
/* Radnje nad fotografijom. Gumbi su 32 px vidljivi, 44 px pogodivi
   (::after širi metu).
   Raspored je 2×2, ne stupac: izmjereno na 390 px sličica je 112 px, a četiri
   mete u stupcu traže 4×32 + 3×12 = 164 px, prelile bi se i `overflow:hidden`
   na `.ph` bi ih odrezao. 2×2 traži 70 px (redak s riječju) i stane.
   Naslovna sličica je puna širina, ondje mete idu u jedan red. */
/* ⚠️ METE IZLAZE S FOTOGRAFIJE (Vedran, 2026-08-06: „gle kako je ružno").
   Bile su četiri kruga NA slici. Dok su bile gotovo bijele, nisu se vidjele; kad
   su dobile tamnu podlogu da se vide, prekrile su pola sličice — isti problem
   iz drugog smjera. Uzrok je bio pokušaj da kontrola živi na sadržaju koji ne
   kontroliramo: tuđa fotografija je pozadina koju ne biramo, pa na njoj nema
   para boja koji je i čitljiv i nenametljiv.

   Rješenje je maknuti ih s nje. Traka ispod sličice ima VLASTITU podlogu, pa su
   mete čitljive bez tamnjenja, ne skrivaju ono zbog čega je čovjek tu, i mogu
   ostati vidljive stalno (na dodiru hover ne postoji — IK#9). */
.onb .ph-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 2px 0 0;
}
.onb .ph .dot {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 4px;
  font: inherit;
  font-size: var(--fs-micro);
  line-height: 1;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: var(--vo-radius-sm);
  cursor: pointer;
}
.onb .ph .dot::after { content: ""; position: absolute; inset: -6px; }
.onb .ph .dot:hover { background: var(--vo-field); color: var(--ink); }
.onb .ph .dot:disabled { opacity: .45; cursor: not-allowed; }

/* Meta koja nosi RIJEČ, ne glif. Kuća ima znak za zatvaranje i za smjer, ali
   nema znak za „postavi kao naslovnu" — a izmišljati ga na 32 px je gore od
   riječi. Problem je bio što je riječ stajala u krugu od 32 px: „Naslovna" na
   13 px je ~58 px, crta se izvan gumba i `overflow:hidden` na `.ph` je reže
   preko fotografije. Oblik za riječ na ovoj plohi već postoji (`.ph .tag`) pa
   ga meta posuđuje umjesto da se uvodi šesti oblik gumba.
   Riječ je „Prva", ne „Naslovna": na `--fs-micro` bi „Naslovna" bila ~50 px i
   red bi ispao 94 px od 107 px raspoloživih. Stalo bi, ali s tri piksela zraka
   i bez ikakve rezerve. „Prva" je ~26 px, red 70 px, i to je riječ kojom ovaj
   ekran ionako već govori („Prva je ono što ljudi vide u katalogu",
   photos.html:23). Uz to je glagolskija: „Naslovna" imenuje stanje, „Prva"
   traži promjenu.
   Izmjereno na 390 px: sličica 112 px, meta grupa 70 px. */
.onb .ph .dot.word {
  width: auto;
  min-width: 32px;
  padding: 0 9px;
  border-radius: var(--vo-radius-pill);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.onb .ph.add {
  display: grid;
  place-items: center;
  font-size: var(--fs-lead);
  color: var(--ink-mute);
  background: none;
  border: 1.5px dashed var(--vo-field-line);
  cursor: pointer;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.onb .ph.add:hover,
.onb .ph.add:focus-within { border-color: var(--vo-accent-soft); color: var(--vo-accent); }
.onb .ph.add input { position: absolute; opacity: 0; width: 0; height: 0; }

/* Premještanje: izvor je prigušen, meta je prsten. Nikad crveno —
   ništa se ne gubi. */
.onb .ph.is-dragging { opacity: 0.6; }
.onb .ph.is-drop-target { box-shadow: inset 0 0 0 2px var(--vo-accent-soft); }

/* ════════════════════════════════════════════════════════════════
   CIJENA — jedan broj (01_FLOW korak 6)
   `.v` je <input class="inp v"> (price.html:23), ne prikaz — zato
   display font ide na samo polje.
   ════════════════════════════════════════════════════════════════ */
.onb .pricebox {
  padding: 17px;
  background: var(--vo-field);
  border: 1px solid var(--vo-field-line);
  border-radius: var(--vo-radius-md);
}
.onb .pricebox.has-err { border-color: var(--badge-warning-fg); }
.onb .pricebox .f { margin-bottom: 0; }
.onb .pricebox .k { font-size: var(--fs-meta); font-weight: 600; color: var(--ink-soft); }
.onb .inp.v {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  padding: 6px 10px;
}

/* ════════════════════════════════════════════════════════════════
   PREGLED — „ovako te vide" (01_FLOW korak 7)
   Svaki blok je poveznica natrag na svoj korak (IK#2) — meta ≥44 px.

   POVEZNICE UNUTAR KARTICE NE IZGLEDAJU KAO POVEZNICE, i to je cijela poanta
   ekrana. Ekran doslovno tvrdi „ovo je tvoj profil onako kako ga par vidi", a
   naziv kategorije, grad, slogan, naziv ponude i cijena su bili `.link` —
   dakle zlatni i podcrtani. Par nikad neće vidjeti podcrtanu cijenu. Pregled
   koji ne izgleda kao ono što prikazuje nije pregled nego kazalo za uređivanje.
   Uređivost se ne gubi: cijeli blok je i dalje meta, rečenica iznad kartice je
   izgovara („Klikni bilo što da to popraviš"), a hover/fokus je otkriva. To je
   IK#9 obrnutim smjerom — poveznica se pokazuje na namjeru, ne stalno.
   ════════════════════════════════════════════════════════════════ */
.onb .listing a {
  color: inherit;
  text-decoration: none;
}
.onb .listing a:hover,
.onb .listing a:focus-visible {
  color: var(--vo-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.onb .listing {
  overflow: hidden;
  background: var(--vo-field);
  border: 1px solid var(--line);
  border-radius: var(--vo-radius-md);
  box-shadow: var(--shadow-sm);
}
.onb .listing .img {
  display: block;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--paper-2), var(--vo-accent-tint));
}
.onb .listing .img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.onb .listing .bd { padding: 14px 15px 16px; }
.onb .listing .nm {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
}
.onb .listing .nm:hover { color: var(--vo-accent); }
.onb .listing .meta { margin-bottom: 11px; font-size: var(--fs-meta); color: var(--ink-mute); }
.onb .listing .row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.onb .listing .price {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.onb .listing .price:hover { text-decoration: underline; }
.onb .listing .photos { margin-top: 0; }

/* ── Statusne oznake ── */
.onb .pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: var(--vo-radius-pill);
}
/* ZAOBILAZNICA MAKNUTA 1.8. (drugi krug). Prvi prolaz je ovdje forsirao
   `--ink-soft` jer su `--badge-neutral-fg` i `--badge-success-fg` padali
   kontrast (3,72:1 i 4,04:1 pri pragu 4,5:1) — ispravno kao mjera, pogrešno
   kao trajno stanje: lokalni zaobilazak sakriva token koji je pokvaren za
   cijelu platformu. Tokeni su u međuvremenu popravljeni u `:root` (svaki par
   izmjeren nad KOMPOZITOM — rgba tinta 18 % preko papira, ne preko papira
   samog, što je i bio uzrok promašaja), pa oznaka opet uzima svoju boju.
   Vendor papir je tamniji od couple papira i mjerodavan je: success 4,53:1,
   neutral 4,56:1, warning 4,53:1. */
.onb .pill.ok { background: var(--badge-success-bg); color: var(--badge-success-fg); }
.onb .pill.n  { background: var(--badge-neutral-bg); color: var(--badge-neutral-fg); }
/* „u tijeku" je čekanje, ne izgubljeno obećanje — jantar, ne alarm. */
.onb .pill.g  { background: var(--badge-warning-bg); color: var(--badge-warning-fg); }

/* ════════════════════════════════════════════════════════════════
   AI NACRT (story.html:27) — <details>, otvara se na zahtjev.
   Prijedlog, ne objava: ploha je tiša od polja koja puni.
   ════════════════════════════════════════════════════════════════ */
.onb .ai-helper {
  margin-bottom: 16px;
  padding: 0 13px;
  background: var(--vo-accent-tint);
  border: 1px solid var(--vo-accent-line);
  border-radius: var(--vo-radius-md);
}
.onb .ai-helper > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--vo-accent);
  cursor: pointer;
}
.onb .ai-helper .f { margin-bottom: 10px; }
.onb .ai-helper .cta { margin-bottom: 8px; }
.onb .ai-helper > *:last-child { margin-bottom: 13px; }

/* ════════════════════════════════════════════════════════════════
   USPJEH — „Vani si." (publish.html:21)
   ════════════════════════════════════════════════════════════════ */
.onb .success { padding: 14px 0 2px; text-align: center; }
/* ZNAK KUĆE, NE KVAČICA (1.8., drugi krug). Ovdje je bila kvačica U+2713 u
   krugu od 70 px
   — univerzalni „obrazac poslan" pečat koji izgleda jednako kod svih. Ovo je
   vrhunac osmokoračnog toka i jedini trenutak u kojem se partner nečemu
   raduje; ako brend ikad smije biti na ekranu, onda je to tu. Isti asset koji
   KYB nosi u zaglavlju (`kyb/_layout.html:42`) i koji onboarding nosi u
   svojem (`_layout.html`), sada i na kraju — tri mjesta, jedan znak. */
.onb .success .mark {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  margin: 0 auto 18px;
  background: var(--vo-accent-tint);
  border: 1px solid var(--vo-accent-soft);
  border-radius: 50%;
}
.onb .success .mark img { display: block; }
.onb .success .lede { max-width: 32ch; margin-inline: auto; }
.onb .success .cta { margin-top: 6px; }

/* ── Traka nastavka (cta_key: vendor_resume_bar) ──────────────────
   Stanje, ne prijedlog: nema odbacivanja. Zlatna vlas s lijeva je jedini
   naglasak — jedna traka, nikad iznad postojećeg grida. Na 390 px se
   lomi u dva reda da „Nastavi →" ne izgura tekst. */
.onb .resume {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 11px;
  margin-bottom: 16px;
  padding: 12px 14px;
  background: var(--vo-gold-wash);
  border: 1px solid var(--vo-gold-line);
  border-left: 3px solid var(--gold);
  border-radius: var(--vo-radius-md);
}
.onb .resume .tx { flex: 1 1 100%; min-width: 0; font-size: var(--fs-meta); line-height: 1.5; }
.onb .resume .tx b { display: block; margin-bottom: 1px; }
/* Nastavak je TIHI gumb, ne druga glavna radnja. Traka stoji IZNAD
   naslova koraka, pa bi ispunjena tinta (kako je stajalo u prototipu)
   bila drugi primarni CTA u istom kadru — a „dva primarna = nijedan"
   (STANDARD §d; odgovor je makni, ne spusti na secondary). Glagol
   stranice nosi „Sljedeće" u podnožju; ovo je stanje, ne glagol. */
.onb .resume .cta {
  min-height: 44px;
  padding: 9px 14px;
  font-size: var(--fs-meta);
  white-space: nowrap;
  color: var(--ink);
  background: none;
  border-color: var(--vo-gold-line);
}
.onb .resume .cta:hover {
  color: var(--ink);
  background: var(--vo-gold-wash);
  border-color: var(--gold);
}
.onb .resume .count { font-size: var(--fs-micro); color: var(--ink-mute); }

/* ── Pomoćno ──────────────────────────────────────────────────────
   `.sr-only` predložak koristi (photos.html:55), a u repou NIJE
   definiran nigdje — bez ovoga bi „Dodaj fotografije" bio vidljiv tekst
   nasred mreže. Standardni clip recept.
   PRAZNO STANJE I ČEKANJE — točno stanje, bez uljepšavanja (Rasmus 1.8.).
   Petnaesta lokalna obitelj praznog stanja se NE gradi (§e#5), i nije —
   ali ni kanonske se ne koriste, pa je stara verzija ovog komentara tvrdila
   nešto što nijedan od jedanaest predložaka ne radi:
     · PRAZNO: mrežu bez fotografija nosi sama meta (`.ph.add`) — ulazna točka
       JEST prazno stanje i `.dp-empty` bi uz nju bio drugi odgovor na isto
       pitanje („dvaput isti odgovor u istom stanju je tautologija",
       couple-rezervacije.css:607-610). Prazan rezultat pretrage kategorija je
       jedna mirna rečenica (`#cat-empty`), po istom pravilu.
     · ČEKANJE: `.dp-skel` (dalia-portal.css:948-1006) ovdje nema potrošača
       jer se svaki korak šalje punim POST-om. Jedino mjerljivo čekanje u
       cijelom programu je montaža ugrađenog obrasca u KYB-u (do 8 s) i ondje
       skeleton NEDOSTAJE — otvoren nalaz, ne stanje ovog fajla. */
.onb .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ════════════════════════════════════════════════════════════════
   DESKTOP — proširenje, ne polazište
   Prijelom 769 px je isti kao `.vd-sheet` (vendor-discovery.css:440):
   ne uvodim 30. vrijednost u ljestvicu koja ih već ima 29 (§e#19).
   Gdje god je moguće, prijelom mijenja VRIJEDNOST TOKENA.
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  .onb {
    --vo-gutter: 30px;
    --vo-gutter-edge: 22px;
  }
  .onb .scene {
    align-items: center;
    padding: 34px 22px 46px;
  }
  .onb .pop {
    width: 540px;
    max-width: 100%;
    height: auto;
    max-height: min(824px, 88dvh);
    border-radius: var(--vo-radius);
    border: 1px solid var(--vo-gold-line);
  }
  .onb .pop-head { padding: 16px var(--vo-gutter-edge) 0; }
  .onb .foot { padding: 14px var(--vo-gutter-edge) 18px; }
  /* Ima zraka: preskakanje se vraća lijevo od glavnog gumba. */
  .onb .foot-right { flex-direction: row; align-items: center; gap: 14px; }
  .onb .resume .tx { flex: 1 1 auto; }
}

/* ════════════════════════════════════════════════════════════════
   PRISTUPAČNOST
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  /* Stanje ostaje jednako jasno, samo bez gibanja (IK#10).
     `.dp-aquarelle::before` gasi i sam portal (dalia-portal.css:944-946);
     ponavlja se ovdje jer blanket-pravilo niže (`.onb ::before`) ima istu
     specifičnost i `!important`, pa bi inače ostavilo dah na 0.01 ms —
     dakle zamrznut na scale(1.03) umjesto na mirnoj jedinici. */
  .onb .pop,
  .onb .dp-aquarelle::before { animation: none !important; transform: none !important; }
  .onb *,
  .onb ::before,
  .onb ::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (forced-colors: active) {
  /* U high-contrast modu boja nestaje — stanja moraju ostati čitljiva
     kroz rub, ne kroz ispunu. */
  .onb .card.on,
  .onb .chip.on,
  .onb .ph.cover { outline: 2px solid; outline-offset: -2px; }
  .onb .dots i.on,
  .onb .dots i.now { background: Highlight; }
}

/* Obrana na kraju: predložak skriva `.why`, `#cat-empty` i `.counter`
   atributom `hidden`, a nekoliko pravila iznad postavlja `display` na
   iste elemente. Author `display` inače pregazi UA-ov `hidden`. */
.onb [hidden] { display: none; }

/* ── Pinovi odabranih kategorija (Vedran, 2026-08-06) ──────────────────────
   „Mora se znati što je odabrano." Prije je odabir bio samo `.chip.on` negdje
   unutar sklopljene skupine, pa bi ga čovjek izgubio iz vida čim bi tražilica
   filtrirala popis. Pinovi stoje IZNAD tražilice i ne miču se.
   Prvi pin je glavna kategorija — jedina koja ide u `merchants.category_id`;
   nosi punu tintu, ostali su tiši. Klik na pin miče kategoriju. */
.onb .cat-pins {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 0 0 8px;
}
.onb .cat-pins-lbl {
  font-size: var(--fs-meta); color: var(--ink-soft);
}
.onb .cat-pin {
  display: inline-flex; align-items: center; gap: 6px;
  /* 44 px, kao i svaka druga meta na ovoj plohi (`.onb .help` gore). Pin nosi
     × koji BRISE odabir — meta koju je lako promasiti ovdje kosta odabir, ne
     samo klik. Visina raste paddingom da se čip ne razvuce u gumb. */
  min-height: 44px; padding: 10px 10px 10px 14px;
  border: 1px solid var(--vo-field-line); border-radius: var(--vo-radius-pill);
  background: var(--vo-field); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-meta);
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.onb .cat-pin:hover { border-color: var(--vo-accent); }
/* Glavna se razlikuje ISPUNOM, ne samo tekstom — razlika mora preživjeti i
   crno-bijeli ispis i daltonizam (IK#8). */
.onb .cat-pin.is-primary {
  background: var(--vo-accent); color: var(--vo-on-accent);
  border-color: var(--vo-accent);
}
.onb .cat-pin-x { font-size: 15px; line-height: 1; opacity: .75; }
.onb .cat-pin:hover .cat-pin-x { opacity: 1; }

/* Područje rada: JEDNA kontrola — polje za upis, popis ispod njega.
   Vedran, 8.8.: „treba napraviti u tražilicu da je 2u1… i makni Dodaj gumb,
   neka se po kliku na mjesto doda."

   PAZI: ne vraćaj `.area-row` (izbornik + gumb „Dodaj"). To su bile dvije
   kontrole za jedan odabir, a gumb je tražio drugi klik da potvrdi prvi.
   Popis je `position: absolute` da ne gura kartu i ostatak obrasca dolje pri
   svakom otvaranju; roditelj zato mora ostati `relative`. */
/* PAZI: KONTROLA MORA STAJATI IZNAD KARTE, i to je razlog za `z-index` ovdje.
   Leaflet svojim slojevima daje z-index 400–700, a SVOJIM KONTROLAMA (+/−,
   atribucija) 1000 — sve unutar `#area-map`, koji u DOM-u dolazi POSLIJE ovog
   popisa i NE otvara vlastiti slagalni kontekst (ima `position: relative`, ali
   nema `z-index`), pa se njegova djeca natječu izravno s popisom.

   Dva mjerenja, oba 9.8.:
     · `z-index: 20`  → popis je pao ispod pločica, vidio se goli tekst
     · `--z-consent` (500) → podloga se vratila, ali su Leafletovi „+/−" i
       potpis „© OpenStreetMap" i dalje probijali kroz nju
   Zato `--z-sheet` (1050): prvi kat registra iznad Leafletovih 1000. Modal
   (1000) je namjerno preskočen — isti kat ne rješava sudar. */
.onb .area-combo { position: relative; z-index: var(--z-sheet); margin-top: 8px; }
.onb .area-list {
  position: absolute; z-index: var(--z-sheet); left: 0; right: 0; top: calc(100% + 6px);
  max-height: 288px; overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 6px; list-style: none;
  background: var(--paper-soft);
  border: 1px solid var(--vo-accent-line);
  border-radius: var(--vo-radius-md);
  box-shadow: 0 18px 48px rgba(45, 34, 56, .16);
  animation: onbAreaOtvori 140ms var(--ease) both;
}
/* PAZI: popis se otvara animacijom, ne skokom (Vedran, 8.8.: „nema nikakav
   feedback, animacije ništa"). Ploha koja se pojavi bez ijednog pokreta čita se
   kao greška u iscrtavanju, ne kao odgovor na klik. */
@keyframes onbAreaOtvori {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .onb .area-list { animation: none; }
}

.onb .area-opt {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  min-height: 42px; padding: 10px 12px 10px 38px;
  border-radius: var(--vo-radius-sm);
  cursor: pointer; font-size: .95rem; color: var(--ink);
  transition: background .13s var(--ease), color .13s var(--ease);
}
/* Znak ispred imena: puna kap za regiju, prazan prsten za županiju. Bez njega
   je popis bio stupac golog teksta i nije se čitao kao izbor (Vedran: „kao da
   je tekst"). Crta se CSS-om, bez ijedne ikone i bez novog zahtjeva. */
.onb .area-opt::before {
  content: ""; position: absolute; left: 15px; top: 50%; margin-top: -4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--vo-accent); opacity: .55;
  transition: opacity .13s var(--ease), transform .13s var(--ease);
}
.onb .area-opt.is-sub::before {
  background: none; box-shadow: inset 0 0 0 1.5px var(--vo-accent); opacity: .5;
}
/* Miš i tipkovnica daju ISTO stanje: `.is-cur` postavlja skripta na strelice,
   `:hover` miš. Da su dva različita izgleda, tipkanje i pokazivanje bi izgledali
   kao dvije različite kontrole. */
.onb .area-opt:hover,
.onb .area-opt.is-cur {
  background: var(--vo-accent);
  color: var(--vo-on-accent);
}
.onb .area-opt:hover::before,
.onb .area-opt.is-cur::before {
  background: currentColor; box-shadow: none; opacity: 1; transform: scale(1.15);
}
.onb .area-opt:hover em,
.onb .area-opt.is-cur em { color: currentColor; opacity: .78; }
/* Županija je uvučena pod svoju regiju, a ime regije stoji uz nju tiho — u
   popisu bez naslova skupina inače ne znaš je li „Zadarska" na sjeveru ili jugu. */
.onb .area-opt.is-sub { padding-left: 46px; }
.onb .area-opt.is-sub::before { left: 25px; }
.onb .area-opt em {
  margin-left: auto; padding-left: 10px;
  font-style: normal; font-size: .76rem; color: var(--vo-ink-faint);
  white-space: nowrap;
}
/* Redak s uputom na dnu popisa — tih, ne stavka. */
.onb .area-note {
  padding: 8px 12px 4px; font-size: .74rem; color: var(--vo-ink-faint);
  border-top: 1px solid var(--vo-field-line); margin-top: 4px;
}

/* Minimapa područja rada. Visina je fiksna i to je namjerno: Leaflet mjeri
   kontejner pri inicijalizaciji, a kontejner bez visine daje sivu plohu bez
   pločica (zatečena zamka u repou, `feedback_leaflet_iframe_fixed_height`). */
.onb .area-map {
  height: 220px; margin-top: 10px;
  border: 1px solid var(--vo-field-line);
  border-radius: var(--vo-radius-md);
  overflow: hidden; background: var(--vo-field);
}
.onb .area-map .leaflet-container { height: 100%; width: 100%; background: var(--vo-field); }
@media (max-width: 420px) { .onb .area-map { height: 180px; } }

/* Popis kategorija je zadano SKLOPLJEN (Vedran, 2026-08-06): 90 % partnera bira
   jednu stvar, pa sedamdeset redaka između tražilice i sljedećeg polja nije
   izbor nego prepreka. Klasu postavlja JS — bez skripte popis ostaje vidljiv i
   ekran radi. */
.onb .cat-groups.is-hidden { display: none; }
.onb .cat-toggle { display: inline-block; margin-top: 6px; }

/* Atribucija karte: licenca OSM/CARTO trazi potpis i on OSTAJE, ali se stisne u
   kut i utisa — na obrascu za registraciju nije sadrzaj. Leafletov vlastiti
   prefiks (potpis + ukrajinska zastava) maknut je u JS-u: zastava je politicka
   izjava koja na partnerskom obrascu nema mjesto. */
.onb .area-map .leaflet-control-attribution {
  font-size: 9px; line-height: 1.3; padding: 0 4px;
  background: rgba(255, 255, 255, .55); color: var(--ink-soft);
}
.onb .area-map .leaflet-control-attribution a { color: var(--ink-soft); }
/* Zum je Leafletov zadanih 26 px; na dodiru se diže na kucni minimum od 44.
   Karta je mala, pa na siroj plohi kontrola ostaje diskretna — ali prst ne
   mjeri velicinu karte. */
.onb .area-map .leaflet-control-zoom a { width: 26px; height: 26px; line-height: 26px; }
@media (pointer: coarse) {
  .onb .area-map .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 44px; }
}

/* ── Učitavanje fotografija (Vedran, 2026-08-06) ───────────────────────────
   Slanje više ne ruši karticu, pa je trebalo nešto što kaže da se nešto
   događa. Mreža se utiša i onemogući; sličice ostaju na mjestu, jer je
   zadržani kontekst upravo ono zbog čega je puni reload izbačen.
   Bez novih keyframea — `dpPulse` je već u registru (VISUAL_CANON §2.2). */
.onb .photos.is-busy { opacity: .55; pointer-events: none; }
/* Meta za dodavanje nosi poruku umjesto plusa — bez novog keyframea. Kanon
   trazi da svaki imenovani pokret ude u registar, a jedan tekst radi isti
   posao: kaze da se nesto dogada i nestane kad zavrsi. */
.onb .photos.is-busy .ph.add > span[aria-hidden] { visibility: hidden; }
.onb .photos.is-busy .ph.add::after {
  content: "Učitavam…";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-body); font-size: var(--fs-meta);
  color: var(--ink-soft);
}

/* ⚠️ PLAVI OKVIR OKO REGIJE (Vedran, 2026-08-06: „debeli plavi kvadrat je oko
   regije umjesto da prati granicu"). Nije Leafletov stil nego FOKUSNI PRSTEN
   preglednika: klik na `<path>` unutar SVG-a fokusira taj element, a prsten se
   crta oko njegove PRAVOKUTNE granice — pa oblik koji smo pazljivo iscrtali
   dobije kvadrat oko sebe.

   Prsten se ne smije samo ugasiti: on je jedini trag fokusa za tipkovnicu
   (IK#10). Zato se gasi za MIS, a za tipkovnicu se zamjenjuje debljom linijom
   koja PRATI granicu — isti signal, u obliku koji ovdje ima smisla. */
.onb .area-map .leaflet-interactive:focus { outline: none; }
.onb .area-map .leaflet-interactive:focus-visible {
  outline: none;
  stroke-width: 3;
  stroke-dasharray: 5 3;
}

/* Znak u zaglavlju čarobnjaka nosi ZADANU mjeru, ne `lg` (Vedran, 2026-08-06 —
   „logo gornji smanjiti, razmišljam o mobilnoj verziji"). Popup je uzak i na
   390 px zaglavlje mora ostaviti mjesta koraku, ne marki.
   Mjeru mijenja makro (`dalia_lockup`), ne ovaj fajl: kanon traži da uska ploha
   mijenja OBLIK lockupa (`shape='name'`), a ne da ga CSS stišće. Ovdje zato
   NEMA pravila za znak — namjerno. */

/* Privola dijeli podnožje s gumbom (Vedran, 2026-08-06). Podnožje je već flex s
   `space-between`, pa rečenica samo mora prestati gurati gumb: ograničena mjera
   retka i manja tinta. Na uskom ekranu pada iznad gumba — meta je važnija od
   reda. */
.onb .onb-privola {
  /* JEDAN REDAK (Vedran, 6.8.: „otislo je u drugi red, popravi da je u jednom").
     Recenica se skratila u markupu na „Prihvacas Uvjete i Pravila privatnosti",
     pa uz --fs-micro stane uz gumb i na uskom popupu. `min-width: 0` je nuzan:
     bez njega flex stavka ne smije ispod svoje najduze rijeci i gura gumb. */
  margin: 0; min-width: 0;
  font-size: var(--fs-micro); line-height: 1.3;
}
@media (max-width: 400px) {
  /* Ispod ovoga ni skracena recenica ne stane uz metu od 44 px — tek tada pada
     iznad gumba, jer je meta vaznija od reda. */
  .onb .foot { flex-wrap: wrap; row-gap: 8px; }
  .onb .onb-privola { order: 2; flex: 1 1 100%; }
}


/* ⚠️ `[hidden]` je GUBIO od `.cat-pins` (nadeno auditom 7.8.): ista specifikacija,
   a `.cat-pins` dolazi kasnije — pa su „Odabrano:" i „Pokrivas:" stajali na
   praznom obrascu, prije nego je itko ista odabrao. Atribut mora pobijediti
   svaki `display` iz komponente, zato `!important` i zato NA KRAJU fajla. */
.onb [hidden] { display: none !important; }