/* dalia-suggest — jedan izgled za sve padajuće prijedloge (12.8.2026.).
   Ugovor ponašanja živi u static/js/dalia-suggest.js; ovdje samo koža.
   Tokeni iz dalia-portal.css (učitan u svim ljuskama). */

.ds-host { position: relative; }

.ds-drop {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: var(--z-dropdown, 40);
  /* LITERAL, ne var-lanac (Rasmus D3-P1-1): .vd-scope redefinira --paper u
     nepostojeci --paper-vendor pa cijeli var() pada u transparent — u
     zajednickoj kozi pozadina mora biti garantirana na svakom hostu. */
  background: rgb(255 250 246);
  border: 1px solid var(--ivory);
  border-radius: 14px;
  box-shadow: var(--shadow);
  max-height: 300px;
  overflow-y: auto;
  padding: 6px;
}

.ds-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--warm-black);
}

.ds-item:hover,
.ds-item:focus {
  background: rgba(181, 107, 141, 0.10);
  outline: none;
}

/* 12px i tamnije od `--stone` (izmjereno 3.67:1 na papiru, AA traži 4.5):
   ista tinta kao redak, stišana prozirnošću, ne svjetlijim tokenom. */
.ds-item small {
  font-size: 12px;
  color: var(--warm-black);
  opacity: .72;
}

/* Pogođeni dio oznake (Cloudflare obrazac): mauve i podcrtano, da se u
   sekundi vidi ZAŠTO je red tu („pje" → Pjesme). Boja je znak, ne ploha. */
/* Pogođeni pojam uz naslov kad naslov sam ne nosi pogodak („Pozivnice · teme"):
   tiho, isti redak, isticanje kaže odakle je red došao. */
.ds-zbog { white-space: nowrap; }
.ds-zbog::before { content: "· "; }
.ds-hit { color: var(--color-deep-mauve, #b56b8d); font-weight: 600;
          text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }

body.dark-mode .ds-drop {
  background: rgb(46 42 38);
  border-color: rgba(255, 255, 255, 0.12);
}
body.dark-mode .ds-item { color: rgb(232 222 208); }

/* ── Okrugli izrez lica uz prijedlog (galerija, 30.8.2026.) ───────────────
   Par goste pamti po licu, ne po redoslijedu imena. Krug je 30px — isti odnos
   prema retku kakav `.ppl-circle` ima prema kartici u sekciji Ljudi, samo
   manji. Kad lica nema (autor uploada), krug nosi inicijal na tihoj podlozi. */
.ds-av {
  flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 50%;
  margin-right: 10px;
  background-color: var(--ivory, #ede8df);
  background-repeat: no-repeat;
  display: inline-flex; align-items: center; justify-content: center;
}
.ds-av--slovo {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 12px; font-weight: 600;
  color: var(--stone, #8b7f6e);
}
.ds-item { display: flex; align-items: center; text-align: left; }
/* Ime uzima ostatak retka, brojka („6 na slikama") ostaje uz desni rub. */
.ds-item > span:not(.ds-av) { flex: 1 1 auto; min-width: 0; }

/* ── Sekcije popisa (tražilica koja razumije, 2.9.2026.) ─────────────────
   Jedan popis, više izvora: Otvori / Partneri / Ljudi / Dalia i red
   „Pitaj Daliju". Naslov sekcije je isti kroj kao `.cc-grp` u docku (IK#14);
   sekcije dijeli tanka crta, ne razmak — popis ostaje jedno tijelo. */
.ds-sekcija + .ds-sekcija {
  margin-top: 6px;
  padding-top: 2px;
  border-top: 1px solid var(--ivory);
}
/* 11px/600/uppercase kao `.cc-grp` u docku — jedan kroj za dock i popis.
   Tinta je ista kao redak, stišana na .72 (izmjereno 5.07:1 na papiru;
   `--stone` je na nekim hostovima svjetliji pa tu ne prolazi AA). Više zraka
   iznad naslova (10px) nego ispod (4px): naslov pripada onome što slijedi. */
.ds-naslov {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--warm-black);
  opacity: .72;
  padding: 10px 12px 4px;
}
/* Red koji vodi Daliji: identitet nosi ZNAK u krugu (`.ds-av`), ne boja
   teksta (BRAND 5.b: boji se znak, ne ploha; mauve 13.5px/600 je mjerio
   3.72:1, AA traži 4.5). Tekst ostaje tinta retka, težina tek malo iznad. */
.ds-item--pitaj {
  color: var(--warm-black);
  font-weight: 500;
}

/* ── Ikona odredišta (val 2, 2.9.2026.) ──────────────────────────────────
   18px crtež iz kataloga, `currentColor` stišan na .62 (isti ton kao
   `.cnd-link svg` u ladici); na hoveru/fokusu ikona postaje mauve — boja je
   znak, ne ploha, a tekst ostaje tinta retka (mauve 13.5px mjeri 3.72:1). */
.ds-ico {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  opacity: .62;
}
.ds-item:hover .ds-ico,
.ds-item:focus .ds-ico,
.ds-item[aria-selected="true"] .ds-ico {
  opacity: .9;
  color: var(--color-deep-mauve);
}

/* ── Podredak (sidro ili program ispod odredišta) ────────────────────────
   Uvučen 26px (12 + 26 = 38) pod tekst roditelja; tanka vodilica lijevo,
   ispod ikone roditelja (ikona 12+18 → sredina 21px). Podredak nema
   vlastitu ikonu — ikonu nosi roditelj, vodilica kaže čiji je. Dodirna
   meta 44 px kao svaki redak (IK#11; val 2 je bio spustio na 40). */
.ds-item--pod {
  position: relative;
  padding-left: 38px;
  min-height: 44px;
}
.ds-item--pod::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--ivory);
}

/* ── Redak paketa: ime lijevo, cijena desno ─────────────────────────────
   Cijena u tinti retka (ne mauve), tabularne brojke da se stupac ne ljulja.
   Bez strelice: nijedno drugo sidro u popisu je nema (IK#14), a cijena u
   <small> već nosi kroj hinta. U retku NEMA gumba — kupnja je na
   Nadogradnji, kamo redak vodi. */
.ds-item--paket .ds-cijena {
  margin-left: auto;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body.dark-mode .ds-sekcija + .ds-sekcija { border-top-color: rgba(255, 255, 255, 0.12); }
body.dark-mode .ds-item--pod::before { background: rgba(255, 255, 255, 0.12); }
body.dark-mode .ds-naslov { color: rgb(232 222 208); opacity: .72; }
body.dark-mode .ds-item small { color: rgb(232 222 208); }
body.dark-mode .ds-item--pitaj { color: rgb(232 222 208); }

/* ── Kartica gosta (val 2, F2) ────────────────────────────────────────────
   Redak i ikona poruke su BRAĆA u omotu: sidro u sidru ne postoji, a ikona
   poruke vodi u razgovor, ne u profil. Hit-zona ikone je 44 px (IK#11), a
   redak ostaje dvije linije na 390 px: ime i, ispod njega, do tri sličice
   28 px (fotografije na kojima gost jest). Sličica je pozadina, ne <img>. */
.ds-kartica {
  display: flex;
  align-items: stretch;
  gap: 2px;
}
.ds-kartica > .ds-item {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}
.ds-kartica__tijelo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Ime je jedno dijete stupca (<strong> pogotka + tekst u njemu), ne dva —
   inače „Ma" / „rija Horvat" / sličice lome karticu u tri reda. */
.ds-kartica__ime {
  display: block;
  min-width: 0;
}
.ds-kartica__slike {
  display: flex;
  gap: 4px;
}
.ds-kartica__slika {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background-color: var(--ivory);
  background-size: cover;
  background-position: center;
}
.ds-poruka {
  flex: 0 0 44px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: var(--warm-black);
  text-decoration: none;
}
.ds-poruka:hover,
.ds-poruka:focus {
  background: rgba(181, 107, 141, 0.10);
  outline: none;
}
.ds-poruka:hover .ds-ico,
.ds-poruka:focus .ds-ico {
  opacity: .9;
  color: var(--color-deep-mauve);
}

/* ── Pilule ispod retka (zadnje pjesme, zadnji gosti s fotografijom) ─────
   Uvučene pod tekst roditelja (38 px kao podredak); krug 24 px + kratka
   oznaka, sidro na mjesto gdje stvar živi. Tri pilule od 96 px stanu u
   358 px reda na 390 (30 + 3×96 + 2×6 + 12 = 342); prelije li se, red klizi
   vodoravno, ne ruši ploču. Pilula je dodirna meta: 44 px visoka (IK#11),
   rub u tinti retka na 45 % — rub u `--ivory` (1.18:1) čitao se kao
   plutajući tekst, ne kao nešto što se tapka. */
.ds-pilula-red {
  display: flex;
  gap: 6px;
  padding: 2px 12px 8px 30px;   /* 3×96 + 2×6 + 30 + 12 = 342 ≤ 358 na 390 px */
  overflow-x: auto;
  scrollbar-width: none;
}
.ds-pilula {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 96px;
  min-height: 44px;
  padding: 3px 12px 3px 6px;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--warm-black);
  text-decoration: none;
}
.ds-pilula:hover,
.ds-pilula:focus {
  background: rgba(181, 107, 141, 0.10);
  outline: none;
}
.ds-pilula__slika {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--ivory);
  background-size: cover;
  background-position: center;
}
/* Krug bez slike nosi glif (nota) ili inicijal — nikad prazan (mikro-prolaz #6). */
.ds-pilula__slika--prazno {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  color: var(--warm-black);
  opacity: .62;
}
.ds-pilula__glif {
  width: 12px;
  height: 12px;
}
.ds-pilula__ime {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.dark-mode .ds-poruka { color: rgb(232 222 208); }
body.dark-mode .ds-pilula { color: rgb(232 222 208); }