:root {   /* boje = AZVO_accessible (izvještaj), 2026-10-08 */
      --studij: #687C3E;
      --odabrano: #4A6A6F;           /* svjetlija nijansa okvira (SUB iz izvještaja); #22393D je bio pretaman */
      --zaposljivost: #348083;
      --posao: #BF560C;
      --placa: #8A730E;
      --tekst: #222;
      --meko: #F5F5F2;
      --linija: #E2E2DC;
    }
    * { box-sizing: border-box; }
    body {
      font-family: 'Segoe UI', system-ui, sans-serif;   /* svugdje isti sans-serif font (2026-10-22); prije Georgia */
      max-width: 1000px;
      margin: 0 auto;
      padding: 40px 24px;
      color: var(--tekst);
      line-height: 1.7;
      background: #fff;
    }
    h1 { font-family: 'Segoe UI', system-ui, sans-serif; font-size: 2rem; margin: 0 0 0.3em; }
    h2 {
      font-family: 'Segoe UI', system-ui, sans-serif;
      font-size: 1.8rem;   /* 2026-10-16: 1.3 → 1.8 (prominentniji naslovi poglavlja; h1 = 2rem) */
      margin: 2.5em 0 0.5em;
      color: #444;
    }
    h3 {
      font-family: 'Segoe UI', system-ui, sans-serif;
      font-size: 1rem;
      margin: 2.2em 0 0.35em;
      color: #333;
    }
    /* Proredi: naslov bliže svom tekstu nego prethodnom bloku (bez zadanog gornjeg razmaka odlomka) */
    p { margin: 0 0 1.2em; }
    .lead { font-size: 1.05rem; }
    /* Publish-to-web link uvijek prikazuje donju Power BI traku (.logoBar, 37 px)
       s brojačem stranica – nema URL parametra koji je gasi, pa je obrezujemo:
       okvir drži omjer, iframe je za visinu trake viši i višak se odsiječe.
       Omjer 1280/719: pri širini 1280 px iframe je visok 719+38 = 757 px, od čega
       720 px ostaje stranici → Power BI je prikazuje na točno 100%, bez praznog
       pojasa koji je ostavljao raniji omjer 600/373.5. */
    .embed-wrap {
      margin: 2em 0;
      position: relative;
      overflow: hidden;
      /* 2026-10-06: Power BI je i uz 1280/719 skalirao stranicu na ~97 % (prazno lijevo i desno –
         ograničavala ga je visina). Okvir je povišen za ~22 px (na 1280 px širine); fino
         podešavanje samo ovim brojem: veći = viši okvir. */
      aspect-ratio: 1280 / 741;
      border: 1px solid #ddd;
    }
    .embed-wrap iframe {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: calc(100% + 38px);
      border: 0;
    }

    /* --- uvodni blokovi --- */
    .uvod {
      background: var(--meko);
      border-radius: 10px;
      padding: 28px 28px 8px;
      margin: 2em 0;
    }
    .uvod h2 { margin-top: 0; }
    /* Dvoredni naslov: tema (h1) + naziv stranice u formatu h2 kao „Metodologija” */
    h2.podnaslov { margin-top: 0; }
    .cinjenice {
      font-family: 'Segoe UI', system-ui, sans-serif;
      list-style: none;
      padding: 0;
      margin: 0 0 1.4em;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
      gap: 14px;
    }
    .cinjenice li {
      background: #fff;
      border: 1px solid var(--linija);
      border-top: 4px solid var(--odabrano);
      border-radius: 8px;
      padding: 14px 18px 16px;
      line-height: 1.5;
      font-size: 0.95rem;
      color: var(--tekst);
    }
    .cinjenice b {
      display: block;
      font-size: 1rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--odabrano);
      font-weight: 700;
      margin-bottom: 6px;
    }

    /* --- valovi --- */
    .valovi {
      font-family: 'Segoe UI', system-ui, sans-serif;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0 0 1.4em;
      align-items: center;
    }
    .val {
      background: #fff;
      border: 1px solid var(--linija);
      border-radius: 20px;
      padding: 4px 14px;
      font-size: 0.85rem;
      font-weight: 600;
      color: #333;
    }
    .val.prazno {
      background: transparent;
      border-style: dashed;
      color: #aaa;
      font-weight: 400;
    }

    /* --- pokazatelji --- */
    .grupe {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
      gap: 18px;
      margin: 1.6em 0 2em;
      font-family: 'Segoe UI', system-ui, sans-serif;
    }
    .grupa {
      background: #fff;
      border: 1px solid var(--linija);
      border-radius: 10px;
      padding: 18px 20px 16px;
      border-top: 4px solid var(--boja);
    }
    .grupa-naslov {
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--boja);
      margin-bottom: 14px;
    }
    .grupa-naslov::before {
      content: "";
      width: 16px; height: 16px;
      border-radius: 4px;
      background: var(--boja);
      flex-shrink: 0;
    }
    .pok { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid #F0F0EC; }
    .pok:first-of-type { border-top: 0; padding-top: 0; }
    .tocka {
      width: 12px; height: 12px;
      border-radius: 50%;
      background: var(--boja);
      flex-shrink: 0;
      margin-top: 5px;
    }
    .pok-ime {
      font-size: 0.92rem;
      font-weight: 600;
      color: #222;
      line-height: 1.35;
    }
    .pok-opis {
      font-size: 0.84rem;
      color: #555;
      line-height: 1.5;
      margin-top: 2px;
    }
    .oznaka {
      display: inline-block;
      font-size: 0.66rem;            /* sivo 2026-10-08: najava „niže je bolje” je u tekstu iznad */
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #666;
      background: #F0F0EC;
      border-radius: 3px;
      padding: 1px 6px;
      margin-left: 6px;
      vertical-align: 1px;
    }
    .hijerarhije {
      font-family: 'Segoe UI', system-ui, sans-serif;
      margin: -7.2px 0 1.6em;   /* s odlomkom iznad (19.2px) daje 12px = razmak između hijerarhija */
    }
    .hijerarhija { margin-bottom: 12px; }   /* jasniji razmak između dviju hijerarhija */
    .hijerarhija:last-child { margin-bottom: 0; }
    .hijerarhija-naziv {
      font-size: 0.96rem;   /* između lanca (0.92rem) i h3 (1rem, 700) */
      font-weight: 600;
      color: #333;
      margin: 0 0 2px 14px;   /* uvučeno u odnosu na uvodnu rečenicu */
    }
    .hijerarhija-lanac {
      font-size: 0.92rem;
      color: #333;
      margin: 0 0 0 28px;
    }
    .stranica-nav { margin: 0 0 2em; max-width: 50%; }
    @media (max-width: 700px) { .stranica-nav { max-width: none; } }
    .napomena-boje {
      font-family: 'Segoe UI', system-ui, sans-serif;
      font-size: 0.85rem;
      color: #555;
      background: var(--meko);
      border-radius: 8px;
      padding: 12px 16px;
      margin: -0.6em 0 2em;
    }

    /* --- pragovi --- */
    .pragovi {
      font-family: 'Segoe UI', system-ui, sans-serif;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 16px;
      margin: 1.4em 0;
    }
    .prag {
      background: #fff;
      border: 1px solid var(--linija);
      border-top: 4px solid var(--odabrano);   /* kao kartice „Tko/Kada/Kako” – boje skupina ovdje ne pripadaju */
      border-radius: 8px;
      padding: 14px 18px;
    }
    .prag-broj {
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--odabrano);
      line-height: 1.3;
    }
    .prag-n { font-weight: 700; }   /* broj praga / oznaka „--” – boja teme, bold (kao ostatak reda) */
    .prag-x { font-size: 2rem; line-height: 1.3rem; }  /* veći znak, ista visina reda kao „NAJMANJE 10” */
    .prag-ime {
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--odabrano);           /* isti kriterij kao red iznad – ista boja */
      margin: 1px 0 8px;
    }
    .prag p { font-size: 0.86rem; color: #555; line-height: 1.5; margin: 0; }

    .uputa {
      font-family: 'Segoe UI', system-ui, sans-serif;
      font-size: 0.87rem;
      color: #555;
      margin: 0.8em 0 0;
    }
    .uputa .crveno { color: #B3261E; }
    /* Popis prikaza cjeline u desnom stupcu (zasad samo „Pregled glavnih pokazatelja”) */
    .prikazi-popis { font-family: 'Segoe UI', system-ui, sans-serif; font-size: 0.95rem; color: #333; line-height: 1.5; }
    /* Sažetak: lijevo opis + popis prikaza, desno blok „Kako koristiti prikaz” preko cijele visine –
       stupci se „otvore” (display: contents) pa opis, popis i upute dijele isti grid */
    section[data-cjelina="sazetak"] .cjelina-tekst,
    section[data-cjelina="trendovi"] .cjelina-tekst,
    section[data-cjelina="sazetak"] .cjelina-izbor, section[data-cjelina="trendovi"] .cjelina-izbor, section[data-cjelina="usporedba"] .cjelina-izbor, section[data-cjelina="kontekst"] .cjelina-izbor, section[data-cjelina="tablice"] .cjelina-izbor { display: contents; }
    section[data-cjelina="sazetak"] .cjelina-gornji, section[data-cjelina="trendovi"] .cjelina-gornji, section[data-cjelina="usporedba"] .cjelina-gornji, section[data-cjelina="kontekst"] .cjelina-gornji, section[data-cjelina="tablice"] .cjelina-gornji { grid-template-rows: auto 1fr; }  /* višak visine ide u 2. red, popis ostaje odmah ispod opisa */
    section[data-cjelina="sazetak"] .cjelina-tekst > p, section[data-cjelina="trendovi"] .cjelina-tekst > p { grid-column: 1; grid-row: 1; }
    /* Usporedba: opis ima više odlomaka pa blok teksta ostaje cjelovit (nije display: contents) */
    section[data-cjelina="usporedba"] .cjelina-tekst, section[data-cjelina="kontekst"] .cjelina-tekst, section[data-cjelina="tablice"] .cjelina-tekst { grid-column: 1; grid-row: 1; }
    section[data-cjelina="usporedba"] .cjelina-tekst > p:first-child + p, section[data-cjelina="kontekst"] .cjelina-tekst > p:first-child + p { margin-top: 0.6em; padding-top: 0; border-top: 0; }  /* svi odlomci su jedan opis – bez crte nakon prvog */
    /* popis prikaza desno, na mjestu ukinutog bloka „Kako koristiti prikaz” (2026-10-20) */
    section[data-cjelina="sazetak"] .prikazi-popis, section[data-cjelina="trendovi"] .prikazi-popis, section[data-cjelina="usporedba"] .prikazi-popis, section[data-cjelina="kontekst"] .prikazi-popis, section[data-cjelina="tablice"] .prikazi-popis { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
        @media (max-width: 900px) { section[data-cjelina="sazetak"] .prikazi-popis, section[data-cjelina="trendovi"] .prikazi-popis, section[data-cjelina="usporedba"] .prikazi-popis, section[data-cjelina="kontekst"] .prikazi-popis, section[data-cjelina="tablice"] .prikazi-popis { grid-column: 1; grid-row: 2; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--linija); } }
    .prikazi-popis p { margin: 0 0 0.9em; }
    /* Primjer u okviru „Kako koristiti prikaz” (uvijek otvoren) */
    .cjelina-primjer { margin: 1em 0 0; padding-top: 0.8em; border-top: 1px solid var(--linija); font-family: 'Segoe UI', system-ui, sans-serif; font-size: 0.9rem; color: #333; line-height: 1.5; }
    .cjelina-primjer .primjer-naslov { display: flex; align-items: center; gap: 5px; margin: 0 0 0.5em;
      font-weight: 700; color: var(--odabrano); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }
    .primjer-ikona { width: 10px; height: 10px; flex: none; }  /* fiksna strelica prema dolje (primjer nije sklopiv) */
    .primjer-tekst { padding-left: 1em; border-left: 2px solid var(--linija); }
    .primjer-tekst p { margin: 0 0 0.5em; }
    .primjer-tekst p:last-child { margin-bottom: 0; }
    .prikazi-popis ul { margin: 0; padding-left: 1.2em; }
    /* Blok „Kako koristiti prikaz” (lijevi stupac ispod opisa) – tehničke upute, zamjena za overlay u izvještaju */
    .cjelina-upute { font-family: 'Segoe UI', system-ui, sans-serif; font-size: 0.9rem; color: #333; line-height: 1.5;
      margin: 1em 0 0; padding: 14px 18px; background: var(--meko); border: 1px solid var(--linija); }
    .cjelina-tekst .upute-naslov, .cjelina-upute .upute-naslov, .prikazi-popis .upute-naslov { display: flex; align-items: center; gap: 7px; margin: 0 0 8px;
      font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--odabrano); }
    .upute-i { width: 16px; height: 16px; border: 1.5px solid currentColor; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; text-transform: none; }
    .cjelina-upute ul { margin: 0; padding-left: 1.1em; }
    .cjelina-upute li { margin: 0 0 0.45em; }
    .cjelina-upute li:last-child { margin-bottom: 0; }
    .prikazi-popis li { margin: 0 0 0.9em; }
    .prikazi-popis li > .opis { display: block; margin-top: 0.15em; }   /* naziv prikaza u svom retku, opis ispod (2026-10-22) */
    .prikazi-popis li > b:first-child { color: var(--odabrano); }   /* samo naziv prikaza; bold u opisu ostaje u boji teksta (2026-10-21) */
    /* Riječ „padajući izbornik” nacrtana kao slicer u Power BI-u: tamni tekst + tanka strelica na svijetloj podlozi */
    .pbi-izbornik {
      display: inline-flex; align-items: center; gap: 10px;
      color: #FFFFFF; background: #22393D;   /* = padajući slicer u izvještaju (2026-10-19: #22393D, bijeli tekst i strelica) */
      border: 1px solid #22393D;
      padding: 0 8px; border-radius: 0; white-space: nowrap;
    }
    .pbi-izbornik svg { width: 12px; height: 8px; flex: none; }
    /* „Resetiraj odabire” nacrtan kao gumb u izvještaju: ikona clearAllSlicers + Calibri 12 bold, #4A6A6F, bez okvira */
    .pbi-reset {
      display: inline-flex; align-items: center; gap: 5px;
      font-family: Calibri, 'Segoe UI', system-ui, sans-serif; font-weight: 700;
      color: #4A6A6F; white-space: nowrap;
      position: relative; top: 3px;   /* poravnanje s osnovnom linijom okolnog teksta */
    }
    .pbi-reset svg { width: 16px; height: 16px; flex: none; }
    /* Križić za otvaranje grane u matrici (kao u izvještaju) */
    .pbi-plus { display: inline-flex; vertical-align: -1px; color: #555; }
    .pbi-plus svg { width: 11px; height: 11px; }
    /* Gumbi za izbor usporedne grupe u radaru (PODRUČJE / POLJE / UČILIŠTE) */
    .pbi-gumb { font-family: Calibri, 'Segoe UI', system-ui, sans-serif; font-weight: 700; font-size: 0.85em;
      letter-spacing: 0.03em; color: #4A6A6F; border: 1px solid #4A6A6F; padding: 0 6px; white-space: nowrap; }
    .uputa-pomoc {
      font-family: 'Segoe UI', system-ui, sans-serif;
      font-size: 0.87rem;
      color: #555;
      margin: 0.4em 0 0;
      overflow: hidden;
    }
    .upitnik {
      float: left;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 15px;
      height: 15px;
      margin: 3px 6px 0 0;
      border: 1.5px solid var(--odabrano);
      border-radius: 50%;
      color: var(--odabrano);
      font-weight: 700;
      font-size: 0.65rem;
      line-height: 1;
    }

    /* --- sticky traka s prekidačem Desktop / Mobitel --- */
    .traka {
      position: sticky;
      top: 0;
      z-index: 10;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 14px;
      margin: -40px -24px 28px;
      padding: 10px 24px;
      background: rgba(255,255,255,0.92);
      backdrop-filter: saturate(1.4) blur(8px);
      border-bottom: 1px solid var(--linija);
      font-family: 'Segoe UI', system-ui, sans-serif;
    }
    /* AZVO logo + naslov (2026-10-26). Logo 36 px < visina prekidača (~47 px) → visina trake ista.
       Osnovna linija slova „azvo” je na 741/986 visine SVG-a → logo spušten za (986−741)/986 × 36 = 8,95 px,
       pa naslov sjeda na istu osnovnu liniju (neovisno o fontu). */
    .traka-lijevo {
      flex: 1 1 auto;
      min-width: 0;
      line-height: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .traka-logo { display: inline-block; height: 36px; width: 89px; vertical-align: -8.95px; margin-right: 14px; }
    .traka-naslov {
      font-size: 1rem;               /* 0.9rem × 36/32 (logo povećan) ≈ 1rem */
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #888;
    }
    /* --- segmentirani izbornik stranica unutar cjeline --- */
    .seg {
      font-family: 'Segoe UI', system-ui, sans-serif;
      display: grid;                 /* svi gumbi iste širine = najdulji tekst + padding (fit-content) */
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
      width: fit-content;
      max-width: calc(100% - 16px);
      gap: 6px;
      /* Power BI unutar okvira ostavlja rub od ~8 px – izbornik se poravnava s rubovima stranice izvještaja, ne okvira */
      margin: 1.6em auto 0;          /* centrirano u okviru */
    }
    .seg + .embed-wrap { margin-top: 8px; }
    .seg button {
      font: inherit;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--tekst);
      background: #fff;
      border: 1px solid var(--linija);
      border-left: 3px solid var(--linija);
      border-radius: 8px;
      padding: 4px 16px;
      min-height: 32px;
      cursor: pointer;
    }
    .seg button:hover { border-color: #C9C9C2; }
    .seg button[aria-pressed="true"] {
      background: #22393D;           /* = tamni naslovni okvir u PBI (FRAME) */
      border-color: #22393D;
      border-left-color: var(--studij);
      color: #fff;
    }
    .opis {
      font-family: 'Segoe UI', system-ui, sans-serif;
      font-size: 0.88rem;
      color: #555;
      margin: 0.7em 0 0;
    }
    /* Sidra (#metodologija, #pokazatelji, cjeline) ne smiju završiti ispod sticky trake */
    html { scroll-padding-top: 84px; }
    .embed-wrap.ucitava::after {
      content: "Učitavanje prikaza…";
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Segoe UI', system-ui, sans-serif;
      font-size: 0.85rem;
      color: #999;
      background: var(--meko);
      pointer-events: none;
    }

    @media (max-width: 620px) {
      body { padding: 28px 16px; }
      .uvod { padding: 20px 18px 4px; }
      h1 { font-size: 1.6rem; }
    }

    /* ===== Stranica s prikazima (body.prikazi) – široki raspored =====
       Okvir ide na punih 1280 px da Power BI stranicu (1280×720) prikaže na 100%;
       uvodni tekst cjeline je dvostupčan da redovi ostanu čitljive duljine. */
    body.prikazi { max-width: 1328px; }
    body.prikazi .traka { margin-bottom: 20px; }
    /* Gumb „Direktno na interaktivne prikaze” na desktop stranici „O istraživanju” (2026-10-22) */
    .cta-wrap { margin: 1.2em 0 0; text-align: center; }
    .cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 999px;
      background: var(--odabrano); color: #fff; font-family: 'Segoe UI', system-ui, sans-serif; font-size: 0.95rem; font-weight: 700;
      text-decoration: none; border: 1.5px solid var(--odabrano); }
    .cta:hover { background: #fff; color: var(--odabrano); }
    .cta span { font-size: 1.25em; line-height: 1; }
    /* Odlomak ispod „Dvanaest pokazatelja”: isti sans-serif font kao popisi prikaza (2026-10-22) */
    .sans { font-family: 'Segoe UI', system-ui, sans-serif; }
    /* Podnaslovi u Metodologiji (Uvod): small caps (2026-10-22) */
    #metodologija h3 { font-variant-caps: all-small-caps; font-size: 1.2rem; letter-spacing: 0.03em; font-weight: 700; }
    /* Tri razine broja ispitanika – ugniježđeni okviri (2026-10-22) */
    .razine-n { margin: 0.6em auto 1.4em; max-width: 620px; font-family: 'Segoe UI', system-ui, sans-serif; text-align: center; }
    .razine-n .rn { border: 1.5px solid var(--odabrano); border-radius: 28px; padding: 14px 26px 16px; }
    .razine-n .rn p { margin: 0; line-height: 1.45; }
    .razine-n .rn-naslov { font-variant-caps: all-small-caps; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.03em; color: var(--odabrano); margin-bottom: 0.15em !important; }
    .razine-n .rn1 { background: #fff; }
    .razine-n .rn2 { background: #EEF3F3; margin: 14px 4% 0; }
    .razine-n .rn3 { background: #DCE6E7; margin: 14px 4% 0; }
    @media (max-width: 600px) { .razine-n .rn { padding: 12px 14px 14px; border-radius: 20px; } .razine-n .rn2, .razine-n .rn3 { margin: 12px 2% 0; } }
    /* Raspored teksta i popisa prikaza: tekst 840 : popis 440 (obrnuto od layouta u Power BI prikazima), 2026-10-22 */
    @media (min-width: 901px) {
      body.prikazi .cjelina-gornji { grid-template-columns: minmax(0, 840fr) minmax(0, 440fr); column-gap: 0; }
      body.prikazi .cjelina-gornji .prikazi-popis { padding-left: 20px; }
    }
    .cjelina-gornji {
      display: grid;
      grid-template-columns: 1.3fr 1fr;
      gap: 12px 40px;
      align-items: start;
      margin: 0.8em 0 0;
    }
    .cjelina-tekst p { margin: 0; }
    .cjelina-tekst > p + p { margin-top: 0.6em; }
    .cjelina-tekst > p:first-child + p { margin-top: 0.9em; padding-top: 0.9em; border-top: 1px solid var(--linija); }  /* prvi odlomak (o cjelini) odvojen od opisa dijelova prikaza */
    .cjelina-izbor .seg { margin-top: 0; }
    @media (max-width: 900px) {
      .cjelina-gornji { grid-template-columns: 1fr; }
    }

    /* --- draft: Trendovi kroz godine (cjelina Sažetak) --- */
    .trendovi-kroz-godine {
      margin: 2em 0 0;
      padding: 18px 20px 16px;
      background: var(--meko);
      border-radius: 10px;
      font-family: 'Segoe UI', system-ui, sans-serif;
    }
    .trendovi-kroz-godine h3 { margin: 0 0 0.6em; }
    .tkg-grid {
      display: grid;
      grid-template-columns: 1.3fr 1fr;
      gap: 10px 24px;
      align-items: start;
    }
    .tkg-grid p { margin: 0; font-size: 0.9rem; color: #444; }
    .tkg-linkovi { display: flex; flex-direction: column; gap: 8px; }
    .tkg-linkovi a {
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--tekst);
      text-decoration: none;
      background: #fff;
      border: 1px solid var(--linija);
      border-left: 4px solid var(--studij);
      border-radius: 8px;
      padding: 10px 14px;
    }
    .tkg-linkovi a:hover { border-color: #C9C9C2; }
    @media (max-width: 900px) {
      .tkg-grid { grid-template-columns: 1fr; }
    }

    /* Kartice cjelina na stranici s metodologijom */
    .cjeline-nav {
      font-family: 'Segoe UI', system-ui, sans-serif;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 10px;
      margin: 1.6em 0 2em;
    }
    .cjeline-nav a {
      display: flex;
      align-items: center;
      gap: 4px;
      text-decoration: none;
      color: var(--tekst);
      background: #fff;
      border: 1px solid var(--linija);
      border-left: 4px solid var(--odabrano);   /* neutralna boja navigacije, ne boja skupine „Studij” */
      border-radius: 10px;
      padding: 10px 10px 10px 12px;
    }
    .cjeline-nav a:hover { border-color: #C9C9C2; border-left-color: var(--odabrano); }
    .cjeline-nav.stranica-nav { margin-left: auto; margin-right: auto; }   /* info.html: Metodologija / Jedanaest pokazatelja centrirano */
    .cjeline-nav b { font-size: 0.76rem; line-height: 1.25; font-weight: 600; }
    .cjeline-nav .arr { margin-left: auto; color: var(--odabrano); flex: none; }

    .povratak-vrh {
      display: block;
      text-align: right;
      margin: 6px 0 0;
      font-family: 'Segoe UI', system-ui, sans-serif;
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--odabrano);
      text-decoration: none;
    }
    .povratak-vrh:hover { text-decoration: underline; }

    /* Link na Excel ispod okvira Tablica (2026-10-16) */
    .preuzimanje { margin: -1.2em 0 0; font-size: 0.95rem; }
    .preuzimanje a { color: var(--odabrano); font-weight: 600; }

    /* Veza između dvije stranice u traci */
    .veza {
      display: flex;
      flex: none;
      gap: 3px;
      padding: 3px;
      border: 1.5px solid #BDBDB5;
      border-radius: 999px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
      background: #fff;
      font-family: 'Segoe UI', system-ui, sans-serif;
    }
    .veza a {
      font-size: 0.92rem;
      font-weight: 600;
      text-decoration: none;
      color: var(--tekst);
      padding: 7px 18px;
      display: flex;
      align-items: center;
      gap: 7px;
      min-height: 36px;
      border-radius: 999px;
      transition: background .15s, color .15s;
    }
    .veza a:not([aria-current="true"]):hover { background: var(--meko); }
    .veza a[aria-current="true"] { background: var(--odabrano); color: #fff; }
    .veza .ik { width: 16px; height: 16px; flex: none; }
    @media (max-width: 480px) { .veza .ik { display: none; } .veza a { padding: 6px 12px; } }

    /* Link "Na vrh" na O istraživanju (desktop) */
    .navrh {
      display: block;
      text-align: center;
      margin: 3em 0 0;
      font-family: 'Segoe UI', system-ui, sans-serif;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--odabrano);
      text-decoration: none;
    }
    .navrh:hover { text-decoration: underline; }

    /* Podnožje: sitan link na drugu uređajnu verziju iste sekcije */
    .podnozje {
      margin: 3em 0 0;
      padding-top: 1em;
      border-top: 1px solid var(--linija);
      text-align: center;
    }
    .navrh + .podnozje { margin-top: 1em; border-top: 0; padding-top: 0; }
    .napomena-podaci {
      font-family: 'Segoe UI', system-ui, sans-serif;   /* kao link u podnožju */
      max-width: 760px;
      margin: 0 auto 1em;
      font-size: 0.8rem;
      line-height: 1.5;
      color: #555;   /* = .vid-izjava */
    }
    .drugi-uredjaj {
      font-family: 'Segoe UI', system-ui, sans-serif;
      font-size: 0.8rem;
      font-weight: 600;
      color: #888;
      text-decoration: none;
    }
    .drugi-uredjaj:hover { color: var(--odabrano); text-decoration: underline; }

    /* Vidljivost ESF+ u podnožju (2026-10-16): AZVOK | ESF+ + EU, svi iste visine;
       64 px drži amblem EU iznad minimalnih 50 px (ESF+ knjiga standarda, str. 27) */
    .vidljivost { font-family: 'Segoe UI', system-ui, sans-serif; margin: 0 0 1.6em; }
    .vid-logotipi { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 40px; margin: 0 0 1.2em; }
    .vid-grupa { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 32px; }
    .vid-logotipi img { display: block; height: 64px; width: auto; }
    .vid-izjava { font-size: 0.8rem; line-height: 1.5; color: #555; max-width: 760px; margin: 0 auto 0.5em; }
    .vid-copy { font-size: 0.8rem; color: #555; margin: 0.8em 0 0.2em; }
    .vid-izradili { font-size: 0.75rem; color: #888; margin: 0; }
    .vid-izradili a { color: inherit; }
    /* Izradili (2026-10-29): logotip centriran ispod svog naziva. idiz_logo_sluzbeni.svg (iste proporcije kao viewBox 838) i
       dotplot_logo.svg (bez paddinga, viewBox 235) imaju slova iste visine (224,7 jedinica),
       pa Dotplot = 235/838 visine IDIZ-a. Gornji padding Dotplota = gornji padding iz
       dotplot logotipa s paddingom (viewBox 838) (366,9/838 visine) → slova IDIZ i DOTPLOT na istoj liniji.
       IDIZ 44 px → „D” ≈ 11,8 px; Dotplot 12,34 px + padding 19,26 px. */
    .vid-izr-naslov { margin: 0 0 0.15em; }
    .vid-izr-red { display: flex; justify-content: center; align-items: flex-start; gap: 0 0.3em; }
    .vid-izr-blok { display: flex; flex-direction: column; align-items: center; }
    .vid-izr-blok img { display: block; width: auto; margin-top: 8px; }
    .vid-izr-idiz { height: 44px; }
    .vid-izr-blok img.vid-izr-dotplot { box-sizing: content-box; height: 10.25px; padding-top: 20.3px; }  /* „T” 2 px niži od „D” u IDIZ, centrirano (po 1 px gore i dolje) (2026-10-29); padding preračunat da dno „T” ostane na dnu „D” */  /* content-box: inače border-box „pojede” padding */

    /* uvod cjeline: popis koraka (uvodD, HTML <ul>) */
    .cjelina-tekst .uvod-lista { margin-top: 0.4em; }
    .cjelina-tekst .uvod-lista ul { margin: 0; padding-left: 1.3em; }
    .cjelina-tekst .uvod-lista li { margin: 0 0 0.3em; }
    .cjelina-tekst .uvod-lista li ul { margin-top: 0.3em; list-style: circle; }

/* EU logo na vrhu (2026-10-22, probno): desno uz naslov, vidljiv bez scrollanja */
.vid-vrh { float: right; margin: 11px 0 8px 24px; line-height: 0; }   /* 11 px = (redak h1 2rem×1.7 − logo 32 px) / 2 → logo okomito centriran na naslovnom retku */
.vid-vrh img { display: block; height: 32px; width: auto; }
@media (max-width: 620px) { .vid-vrh img { height: 22px; } .vid-vrh { margin: 11px 0 8px 12px; } }

ol.napomene{padding-left:1.3em}
ol.napomene li{margin:0 0 .6em}