/* ==========================================================================
   Arhitektura stranice (docs/arhitektura.md): mreža, kartica, uvod, kartica s
   najnovijim podatkom. Vrijedi za stranice prebačene na zajedničke funkcije
   (R/arhitektura.R; oznaka body.cs-arh iz zaglavlja datoteke). Stari omoti
   (.chart-grid-*, .chart-item) imaju svoj stil u main.css i ne miješaju se s
   ovim; nestaju u zadnjem koraku preobrazbe.
   ========================================================================== */

/* Odsječak koji ispisuje mrežu nema vlastiti okvir ni širinu (okvir je kartica). */
body.cs-arh main.content .cell:has(.cs-mreza),
body.cs-arh main.content .cell:has(.cs-podatak),
body.cs-arh main.content .cell:has(.cs-uvod),
body.cs-arh main.content .cell:has(.cs-metodologija-blok) {
  width: auto; max-width: none; margin: 0; padding: 0; border: 0; box-shadow: none; background: none;
}

/* --- Uvod odjeljka: blok širine mreže, redak do širine tekstnog stupca ------ */
/* Uvod postoji samo kad objašnjava nešto što se iz grafikona ne vidi; obojeni
   okvir ga razlikuje od podnaslova kartica. */
/* Od 9. 10. 2026. (poglavlje 80) uvod nije obojen: jedini obojeni okvir na stranici je analitički okvir; na stranicama
   pokazatelja uvoda više nema (sadržaj je u metodološkoj napomeni), ostaje samo na stranici O stranici. */
.cs-uvod { margin: 0 0 16px; padding: 0; }
.cs-uvod p { max-width: var(--cs-tekst-max, 1100px); margin: 0 0 8px; font-size: 0.95rem; }
.cs-uvod p:last-child { margin-bottom: 0; }

/* --- Napomena stranice: obicna recenica iza opisa stranice ------------------ */
.cs-napomena-stranice { max-width: var(--cs-tekst-max, 1100px); margin: 4px 0 14px; font-size: 0.9rem; color: var(--cs-muted); }
/* --- Analiticki sazetak: obojeni okvir prije kartice s najnovijim podatkom --- */
.cs-sazetak {
  margin: 0 0 16px; padding: 14px 18px; border-radius: var(--cs-kartica-radius, var(--cs-radius));
  /* neutralna podloga i tamnoplavi naslov na svim stranicama, bez boje skupine i bez obojenog ruba (poglavlje 75, 9. 10. 2026.) */
  background: var(--cs-okvir-podloga, #EEF3F8);
}
.cs-sazetak p { max-width: var(--cs-tekst-max, 1100px); margin: 0 0 8px; font-size: 0.98rem; line-height: 1.55; }
.cs-sazetak p:last-child { margin-bottom: 0; }
/* Tekst okvira kao popis točaka (9. 10. 2026., poglavlje 80): jedna rečenica jedna točka; odlomak je skupina točaka s malim
   razmakom između skupina. */
.cs-sazetak ul.cs-sazetak__skupina { max-width: var(--cs-tekst-max, 1100px); margin: 0 0 10px; padding: 0 0 0 1.15em; list-style: disc; font-size: 0.98rem; line-height: 1.5; }
.cs-sazetak ul.cs-sazetak__skupina li { margin: 0 0 3px; padding-left: 2px; }
.cs-sazetak ul.cs-sazetak__skupina li::marker { color: var(--cs-okvir-naslov, #1F4F82); }
.cs-sazetak ul.cs-sazetak__skupina:last-of-type { margin-bottom: 0; }
.cs-sazetak--vrh ul.cs-sazetak__skupina:last-of-type { margin-bottom: 12px; }
.cs-sazetak--odjeljak ul.cs-sazetak__skupina { font-size: 0.95rem; }
/* Definicija pokazatelja ispod naslova stranice (9. 10. 2026., poglavlje 80): jedna rečenica običnim tekstom. */
.cs-definicija { max-width: var(--cs-tekst-max, 1100px); margin: 0 0 14px; font-size: 1rem; line-height: 1.55; color: var(--cs-ink); }
main.content .cell:has(.cs-definicija), main.content .cs-definicija-omot { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.cs-sazetak__naslov { font-family: var(--cs-font-naslov, inherit); font-weight: 600; font-size: 1.05rem; color: var(--cs-okvir-naslov, #1F4F82); margin: 0 0 8px; }
.cs-sazetak--odjeljak .cs-sazetak__naslov { font-size: 0.95rem; margin-bottom: 6px; }
/* Analiticki okvir na vrhu stranice (docs/arhitektura.md, poglavlje 68): tekst, pa plocice s kljucnim brojkama, pa redak izvora.
   Plocice su bijele s tankim sivim rubom, okvir svijetloplavosiv s tamnoplavim naslovom, pozadina stranice svijetlosiva (poglavlje 75). */
.cs-sazetak--vrh { padding: 16px 20px; }
.cs-plocice { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 14px 0 0; max-width: var(--cs-tekst-max, 1100px); }
.cs-plocica { background: var(--cs-plocica, #FFFFFF); border: 1px solid var(--cs-plocica-rub, #DDE1E6); border-radius: var(--cs-kartica-radius, var(--cs-radius)); padding: 12px 14px; min-width: 0; }
.cs-plocica__broj { font-size: 1.45rem; font-weight: 600; line-height: 1.15; color: var(--cs-heading); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cs-plocica__jedinica { font-size: 0.95rem; font-weight: 500; margin-left: 4px; color: var(--cs-heading); }
.cs-plocica__opis { font-size: 0.85rem; line-height: 1.35; color: var(--cs-ink); margin-top: 4px; }
.cs-plocica__razdoblje { font-size: 0.8rem; color: var(--cs-muted); margin-top: 2px; }
.cs-sazetak__izvor { font-size: 0.78rem; color: var(--cs-source); margin-top: 12px; }
a.cs-graf { color: var(--cs-link); text-decoration: none; font-variant-numeric: tabular-nums; }
a.cs-graf:hover { text-decoration: underline; }
@media (max-width: 600px) { .cs-plocice { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .cs-plocica__broj { font-size: 1.3rem; } }
@media (max-width: 360px) { .cs-plocice { grid-template-columns: minmax(0, 1fr); } }
/* okvir odjeljka (cs_okvir): isti okvir, nesto uzi, ispod naslova odjeljka prije uvoda i mreze (7. 10. 2026.) */
.cs-sazetak--odjeljak { padding: 12px 16px; }
.cs-sazetak--odjeljak p { font-size: 0.95rem; line-height: 1.5; }
body.cs-arh main.content .cell:has(.cs-sazetak), body.cs-arh main.content .cell:has(.cs-napomena-stranice) { width: auto; max-width: none; margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
/* --- Metodoloska napomena: sklopivi okvir na dnu stranice (lua/metodologija.lua) --- */
.cs-metodologija-okvir { margin: 28px 0 0; }
.cs-metodologija-okvir .callout { margin: 0; }
.cs-metodologija-okvir .callout-header { cursor: pointer; }
.cs-metodologija-okvir .callout-title-container { font-family: var(--cs-font-naslov, inherit); font-weight: 600; font-size: 1.1rem; color: var(--cs-heading); }
.cs-metodologija-okvir .callout-body p, .cs-metodologija-okvir .callout-body ul { max-width: var(--cs-tekst-max, 1100px); }

/* --- Mreža ------------------------------------------------------------------
   Svaki red mreže je CSS mreža u kojoj kartica zauzima sedam redaka (po jedan
   za svaki utor) i preuzima ih kao podmrežu. Zato su isti utori susjednih
   kartica uvijek iste visine: prazan utor zadržava mjesto, naslov u dva retka
   ne pomiče grafikon samo u jednoj kartici. */
.cs-mreza { margin: 0 0 28px; }
.cs-mreza__red {
  display: grid; column-gap: var(--cs-gap, 16px); row-gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cs-mreza__red[data-stupaca="1"] { grid-template-columns: minmax(0, 1fr); }
.cs-mreza__red[data-stupaca="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-mreza__red[data-stupaca="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cs-mreza__napomena { font-size: 0.8rem; color: var(--cs-source); margin: -6px 0 0; max-width: var(--cs-tekst-max, 1100px); }

/* --- Kartica ---------------------------------------------------------------- */
.cs-kartica {
  scroll-margin-top: 84px;   /* sidro ispod ljepljive trake (do 79 px na sirokom zaslonu); docs/arhitektura.md 43 */
  display: grid; grid-template-rows: subgrid; grid-row: span 7; row-gap: 0;
  min-width: 0; position: relative; overflow: hidden;
  background: var(--cs-surface); border: 1px solid var(--cs-border);
  border-radius: var(--cs-kartica-radius, var(--cs-radius)); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  padding: 16px; margin: 0 0 var(--cs-gap, 16px);
}
html[data-stil] .cs-kartica::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--cs-skupina) 0%, color-mix(in srgb, var(--cs-skupina) 25%, transparent) 100%);
}
.cs-kartica > * { min-width: 0; }
/* Vrijednost u gornjem desnom kutu (crveno) i razdoblje ispod nje; mijenja se s prekidačem. */
/* Zaglavlje kartice, jedno za sve kartice (5. 10. 2026.; docs/arhitektura.md, poglavlje 31): naslov lijevo, istaknuti
   broj s razdobljem desno, oba uz gornji rub; naslov se prelama u preostaloj sirini, podnaslov i ostali utori idu
   punom sirinom. Broj se nikad ne skriva zbog sirine; do 360 px stoji ispod naslova (pravilo na dnu datoteke). */
.cs-kartica__zaglavlje { display: flex; align-items: flex-start; justify-content: space-between; column-gap: 12px; min-width: 0; margin: 0 0 4px; }
.cs-kartica__zaglavlje > .cs-kartica__naslov { flex: 1 1 auto; min-width: 0; margin: 0; }
.cs-kartica__vrijednost { flex: 0 0 auto; max-width: min(56%, 200px); margin-top: -2px; text-align: right; line-height: 1.15; }   /* kut se ne stiska: naslov se prelama u preostaloj sirini; razdoblje se lomi samo na razmaku, najvise u dva retka (tocka 15) */   /* raspon tromjesecja ("3. tr. 2025. do 2. tr. 2026.") stane u jedan redak i na 390 px (poglavlje 80) */
.cs-kartica__vrijednost-broj { color: var(--cs-accent, #C00000); font-weight: 700; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.cs-kartica__vrijednost-razdoblje { color: var(--cs-muted); font-size: 0.75rem; margin-top: 2px; overflow-wrap: normal; }   /* razdoblje smije u dva retka, nikad odrezano ni izvan kartice (odluka 9. 10. 2026., tocka 15) */
/* vrijednost u kutu i razdoblje ispod nje imaju svoj prostor: grafikon (i gumb za spremanje u njegovu kutu) pocinje ispod njih i kad kartica nema ni podnaslov ni prekidac */
/* Naslov kartice jednom manjom veličinom (odluka vlasnice 9. 10. 2026., poglavlje 80): kratak, bez jedinice i razdoblja. */
.cs-kartica__naslov {
  margin: 0 0 4px; padding: 0; border: 0; font-size: 0.92rem; font-weight: 600; line-height: 1.3;
  color: var(--cs-heading); overflow-wrap: break-word;
}
/* male kartice istog izvora (Monitor): redak izvora se ne prikazuje, ostaje u DOM-u radi spremljene slike */
.cs-kartica--bez-izvora .cs-kartica__izvor { display: none; }
/* naslov kartice kao poveznica na stranicu s vise podataka (Monitor) */
/* naslov Monitora je poveznica, ali izgleda kao ostali naslovi (odluka vlasnice 9. 10. 2026.): bez ikone i boje poveznice */
.cs-kartica__naslov a.cs-kartica__poveznica { color: inherit; font: inherit; text-decoration: none; }
.cs-kartica__naslov a.cs-kartica__poveznica:hover { color: var(--cs-link-hover); text-decoration: underline; }
/* Podnaslov koji opisuje prikaz stoji ispod grafikona, iznad retka izvora, kao mala napomena (9. 10. 2026., poglavlje 80);
   utor ispod naslova (.cs-kartica__podnaslov-mjesto) ostaje prazan radi sedam redaka podmreže. */
.cs-kartica__podnaslov { font-size: 0.78rem; line-height: 1.4; color: var(--cs-muted); margin: 4px 0 2px; overflow-wrap: break-word; }
.cs-kartica__podnaslov-mjesto { margin: 0; }
.cs-kartica__prekidaci { margin: 0 0 6px; }
.cs-kartica__prekidaci .cs-selector { margin: 0; }
.cs-kartica__prekidaci select { max-width: 100%; }
/* izbornik s dugim nazivima (podrucja djelatnosti) ne smije biti siri od kartice: polje i izbornik staju u sirinu kartice */
.cs-kartica .cs-selector-field { max-width: 100%; min-width: 0; }
.cs-kartica .cs-selector select { max-width: 100%; text-overflow: ellipsis; }
.cs-kartica__razdoblje { font-size: 0.8rem; color: var(--cs-muted); text-align: right; margin: 0 0 4px; }
.cs-kartica__razdoblje .cs-grafikon-napomena { margin: 0; }
.cs-kartica__grafikon { align-self: start; width: 100%; }
.cs-kartica__dopune { font-size: 0.8rem; color: var(--cs-muted); margin: 6px 0 0; }
.cs-kartica__dopune .cs-grafikon-napomena, .cs-kartica__napomena { margin: 0 0 2px; }
/* Tablicni prikaz podataka grafikona (cs_tablica, docs/arhitektura.md, poglavlje 69): sklopivi okvir u utoru dopuna,
   zatvoren dok ga citatelj ne otvori; brojevi desno, oznaka retka lijevo, tablica se po potrebi pomice vodoravno
   unutar kartice (ne siri karticu ni stranicu). */
.cs-tablica { margin: 8px 0 0; font-size: 0.8rem; color: var(--cs-ink); }
.cs-tablica > summary { cursor: pointer; color: var(--cs-link); list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px; }
.cs-tablica > summary::-webkit-details-marker { display: none; }
.cs-tablica > summary::before { content: ""; width: 0; height: 0; border: 5px solid transparent; border-left: 7px solid currentColor; border-right: 0; transition: transform .15s; }
.cs-tablica[open] > summary::before { transform: rotate(90deg); }
.cs-tablica > summary:hover { text-decoration: underline; }
.cs-tablica > summary:focus-visible { outline: 2px solid var(--cs-link); outline-offset: 2px; border-radius: 3px; }
.cs-tablica__omot { overflow: auto; max-width: 100%; max-height: 320px; margin: 4px 0 0; -webkit-overflow-scrolling: touch; }
.cs-tablica thead th { position: sticky; top: 0; background: var(--cs-surface); z-index: 1; }
/* Tablica na mobitelu (odluka 9. 10. 2026., tocke 22 do 25): prvi stupac s nazivima uvijek vidljiv (ljepljiv pri vodoravnom
   pomicanju), dugi nazivi u vise redaka, zaglavlja kratka, jedinica jednom iznad tablice. */
.cs-tablica th[scope="row"], .cs-tablica th.cs-tablica__oznaka { position: sticky; left: 0; background: var(--cs-surface); z-index: 2; white-space: normal; overflow-wrap: anywhere; max-width: 46vw; }
.cs-tablica thead th.cs-tablica__oznaka { z-index: 3; overflow-wrap: normal; word-break: keep-all; }   /* zaglavlje "razdoblje" se ne lomi usred rijeci */
.cs-tablica table { min-width: 0; }
.cs-tablica__jedinica { font-size: 0.78rem; color: var(--cs-muted); margin: 4px 0 2px; }
.cs-tablica--ziva:not([open]) .cs-tablica__omot { display: none; }
/* Tablica stane u karticu (11. 10. 2026.): najmanja sirina od 420 px gurala je stupac vrijednosti izvan kartice na mobitelu i na
   malim karticama Monitora. Vodoravno pomicanje ostaje samo za tablice s vise od cetiri stupca (razred postavlja kod izvoza). */
.cs-tablica table { border-collapse: collapse; width: 100%; min-width: 0; font-variant-numeric: tabular-nums; margin: 0; }
.cs-tablica--siroka table { min-width: 420px; }
.cs-tablica--razdoblja th[scope="row"] { white-space: nowrap; overflow-wrap: normal; }
.cs-tablica caption { text-align: left; font-size: 0.78rem; color: var(--cs-muted); padding: 0 0 4px; caption-side: top; }
.cs-tablica th, .cs-tablica td { padding: 4px 8px; text-align: right; border-bottom: 1px solid var(--cs-border); white-space: nowrap; vertical-align: top; }
.cs-tablica thead th { font-weight: 600; color: var(--cs-muted); white-space: normal; }
.cs-tablica th[scope="row"], .cs-tablica th.cs-tablica__oznaka { text-align: left; font-weight: 500; color: var(--cs-ink); }
.cs-tablica tbody tr:last-child th, .cs-tablica tbody tr:last-child td { border-bottom: 0; }
.cs-kartica__izvor { align-self: end; font-size: 0.78rem; color: var(--cs-source); margin: 8px 0 0; }
.cs-kartica__izvor .cs-izvor { margin: 0; font-size: inherit; color: inherit; }
.cs-kartica__podnaslov:empty, .cs-kartica__podnaslov-mjesto:empty, .cs-kartica__prekidaci:empty, .cs-kartica__razdoblje:empty, .cs-kartica__dopune:empty { margin: 0; }

/* Okvir je kartica: odsječak i widget u njoj nemaju vlastiti. */
.cs-kartica .cell, .cs-kartica .tax-wedge-chart { border: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; background: none !important; }

/* Visina po razredu (poglavlje 4): mali 260 px, obični 340 px, puna iz R-a. */
.cs-kartica .html-widget.echarts4r { width: 100% !important; }
.cs-kartica[data-razred="obican"] .html-widget.echarts4r { height: 340px !important; }
.cs-kartica[data-razred="mali"] .html-widget.echarts4r { height: 260px !important; }
.cs-kartica[data-razred="puna"] .html-widget.echarts4r { min-height: 360px; }
/* Kartice istog reda: grafikoni počinju na istoj visini (utori podmreže) i imaju istu visinu, visinu višeg u redu (zadaje
   cs_mreza; 9. 10. 2026., poglavlje 80); razlika u visini sadržaja ostaje ispod grafikona. Samo na širokom zaslonu. */
@media (min-width: 900px) {
  .cs-mreza__red[data-stupaca="2"][style*="--cs-visina-para"] .cs-kartica__grafikon .html-widget.echarts4r { height: var(--cs-visina-para) !important; }
}
/* Rang ili karta sami u redu: ploha crtanja do širine tekstnog stupca. */
.cs-mreza__red--puna[data-stupaca="1"] .cs-kartica__grafikon,
.cs-mreza__red--puna[data-stupaca="1"] .cs-kartica__prekidaci,
.cs-mreza__red--puna[data-stupaca="1"] .cs-kartica__razdoblje,
.cs-mreza__red--puna[data-stupaca="1"] .cs-kartica__dopune { max-width: var(--cs-tekst-max, 1100px); }

/* --- Par odjeljaka (lua/parovi.lua) -----------------------------------------
   Dva susjedna odjeljka s po jednom karticom stoje jedan uz drugi. Mreža para
   ima red za naslov, red za uvod i sedam redova kartice, pa su naslovi, uvodi i
   utori obiju kartica na istoj visini. Omoti između para i kartice nemaju
   vlastiti okvir (display: contents), da kartica bude stavka mreže para. */
@media (min-width: 900px) {
  .cs-par-odjeljaka {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--cs-gap, 16px); row-gap: 0;
    margin: 0 0 12px;
  }
  .cs-par-odjeljaka > .cs-par--a { grid-column: 1; }
  .cs-par-odjeljaka > .cs-par--b { grid-column: 2; }
  .cs-par-odjeljaka > .cs-par__naslov { grid-row: 1; align-self: end; }
  .cs-par-odjeljaka > .cs-par__tekst { grid-row: 2; }
  .cs-par-odjeljaka > .cs-par__tekst .cs-uvod { height: calc(100% - 16px); }
  .cs-par-odjeljaka > .cs-par__graf,
  .cs-par-odjeljaka > .cs-par__graf .cell,
  .cs-par-odjeljaka > .cs-par__graf .cell-output-display,
  .cs-par-odjeljaka > .cs-par__graf .cs-mreza,
  .cs-par-odjeljaka > .cs-par__graf .cs-mreza__red { display: contents; }
  .cs-par-odjeljaka > .cs-par__graf .cs-kartica .cell,
  .cs-par-odjeljaka > .cs-par__graf .cs-kartica .cell-output-display { display: block; }
  .cs-par-odjeljaka > .cs-par__graf.cs-par--a .cs-kartica { grid-column: 1; grid-row: 3 / span 7; }
  .cs-par-odjeljaka > .cs-par__graf.cs-par--b .cs-kartica { grid-column: 2; grid-row: 3 / span 7; }
}

/* --- Kartica koja ostaje sama (cs_kartica(sama = TRUE)): cijeli red, okvir širine jednog mjesta ------ */
@media (min-width: 900px) {
  .cs-mreza__red[data-stupaca="2"] > .cs-kartica--sama { grid-column: 1 / -1; width: calc(50% - var(--cs-gap, 16px) / 2); }
}

/* --- Tok odjeljaka (lua/parovi.lua) -----------------------------------------
   Odjeljak koji završava neparnom karticom i idući odjeljak dijele mrežu od dva
   stupca: neparna kartica stoji lijevo, a naslov, uvod i prva kartica idućeg
   odjeljka desno. Kartica ostaje u svom odjeljku (redoslijed u dokumentu se ne
   mijenja); lijeva kartica je poravnata s desnom po donjem rubu. */
@media (min-width: 900px) {
  .cs-tok {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--cs-gap, 16px); row-gap: 0;
    grid-auto-flow: row dense; margin: 0 0 12px;
  }
  .cs-tok > .cs-tok__naslov, .cs-tok > .cs-tok__tekst { grid-column: 1 / -1; }
  .cs-tok > .cs-tok__naslov.cs-tok--desno, .cs-tok > .cs-tok__tekst.cs-tok--desno { grid-column: 2; }
  /* prvi odjeljak sa samo jednom karticom: naslov (i uvod) lijevo, u istom redu s naslovom idućeg odjeljka */
  .cs-tok > .cs-tok__naslov.cs-tok--lijevo, .cs-tok > .cs-tok__tekst.cs-tok--lijevo { grid-column: 1; }
  .cs-tok > .cs-tok__naslov { align-self: end; }
  .cs-tok > .cs-tok__graf,
  .cs-tok > .cs-tok__graf .cell,
  .cs-tok > .cs-tok__graf .cell-output-display,
  .cs-tok > .cs-tok__graf .cs-mreza,
  .cs-tok > .cs-tok__graf .cs-mreza__red { display: contents; }
  .cs-tok > .cs-tok__graf .cs-kartica .cell,
  .cs-tok > .cs-tok__graf .cs-kartica .cell-output-display { display: block; }
  /* prva kartica odjeljka koji počinje desno */
  .cs-tok > .cs-tok--pocinje-desno .cs-mreza__red > .cs-kartica:first-child { grid-column: 2; }
  /* neparna kartica prethodnog odjeljka: lijevi stupac, uz redove naslova (i uvoda) idućeg odjeljka i njegove prve kartice */
  .cs-tok > .cs-tok--rep .cs-mreza__red > .cs-kartica:last-child { grid-column: 1; }
  /* broj redova daje filter (cs-tok--rep-N); kod 7 kartica dijeli redove s desnom (isti utori), inače je poravnata po donjem rubu */
  .cs-tok > .cs-tok--rep-6 .cs-mreza__red > .cs-kartica:last-child { grid-row: span 6; }
  .cs-tok > .cs-tok--rep-8 .cs-mreza__red > .cs-kartica:last-child { grid-row: span 8; }
  .cs-tok > .cs-tok--rep-9 .cs-mreza__red > .cs-kartica:last-child { grid-row: span 9; }
  .cs-tok > :is(.cs-tok--rep-6, .cs-tok--rep-8, .cs-tok--rep-9) .cs-mreza__red > .cs-kartica:last-child { align-self: end; display: flex; flex-direction: column; }
  .cs-tok > :is(.cs-tok--rep-6, .cs-tok--rep-8, .cs-tok--rep-9) .cs-mreza__red > .cs-kartica:last-child > :is(.cs-kartica__grafikon, .cs-kartica__izvor) { align-self: stretch; }
  /* desna kartica uz takvu lijevu (ne počinju u istom redu): ne dijeli utore s redovima naslova i uvoda, nego slaže svoj sadržaj sama */
  .cs-tok > :is(.cs-tok--rep-6, .cs-tok--rep-8, .cs-tok--rep-9) + .cs-tok__naslov + .cs-tok__graf .cs-mreza__red > .cs-kartica:first-child,
  .cs-tok > :is(.cs-tok--rep-6, .cs-tok--rep-8, .cs-tok--rep-9) + .cs-tok__naslov + .cs-tok__tekst + .cs-tok__graf .cs-mreza__red > .cs-kartica:first-child { display: flex; flex-direction: column; }
  .cs-tok > :is(.cs-tok--rep-6, .cs-tok--rep-8, .cs-tok--rep-9) + .cs-tok__naslov + .cs-tok__graf .cs-mreza__red > .cs-kartica:first-child > :is(.cs-kartica__grafikon, .cs-kartica__izvor),
  .cs-tok > :is(.cs-tok--rep-6, .cs-tok--rep-8, .cs-tok--rep-9) + .cs-tok__naslov + .cs-tok__tekst + .cs-tok__graf .cs-mreza__red > .cs-kartica:first-child > :is(.cs-kartica__grafikon, .cs-kartica__izvor) { align-self: stretch; }
  .cs-tok .cs-kartica[style*="flex"] > .cs-kartica__izvor { margin-top: auto; }
}

/* --- Kartica s najnovijim podatkom (zaglavlje stranice) --------------------- */
.cs-podatak {
  position: relative; overflow: hidden; margin: 12px 0 28px; padding: 16px 18px;
  background: var(--cs-surface); border: 1px solid var(--cs-border);
  border-radius: var(--cs-kartica-radius, var(--cs-radius)); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
html[data-stil] .cs-podatak::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--cs-skupina) 0%, color-mix(in srgb, var(--cs-skupina) 25%, transparent) 100%);
}
.cs-podatak__naslov { font-weight: 600; color: var(--cs-heading); margin: 0 0 2px; }
.cs-podatak__razdoblje { font-weight: 400; color: var(--cs-muted); font-size: 0.92rem; margin: 0 0 10px; }
.cs-podatak__stavke { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 24px; }
.cs-podatak__vrijednost { font-size: 1.9rem; font-weight: 600; line-height: 1.1; color: var(--cs-heading); font-variant-numeric: tabular-nums; }
.cs-podatak__jedinica { font-size: 1rem; font-weight: 500; margin-left: 4px; color: var(--cs-muted); }
.cs-podatak__opis { font-size: 0.85rem; color: var(--cs-muted); margin-top: 2px; }
.cs-podatak__sporedne { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--cs-border); }
.cs-podatak__sporedne-naslov { font-size: 0.8rem; color: var(--cs-muted); margin: 0 0 8px; }
.cs-podatak__stavka--sporedna .cs-podatak__vrijednost { font-size: 1.25rem; }
.cs-podatak__stavka--sporedna .cs-podatak__jedinica { font-size: 0.85rem; }
.cs-podatak__izvor { font-size: 0.78rem; color: var(--cs-source); margin-top: 12px; }

/* --- Metodologija ----------------------------------------------------------- */
.cs-metodologija-blok p, .cs-metodologija-blok ul { max-width: var(--cs-tekst-max, 1100px); }

/* --- Ispod 900 px: sve kartice jedna ispod druge, u punoj širini ------------ */
@media (max-width: 899px) {
  .cs-mreza__red, .cs-mreza__red[data-stupaca] { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .cs-kartica { padding: 12px; }
  .cs-kartica[data-razred="obican"] .html-widget.echarts4r { height: 300px !important; }
  .cs-kartica[data-razred="mali"] .html-widget.echarts4r { height: 240px !important; }
  .cs-podatak__vrijednost { font-size: 1.6rem; }
  .cs-kartica__vrijednost-broj { font-size: 1.05rem; }
  /* razdoblje ispod vrijednosti smije se prelomiti u dva retka (npr. "rujan 2026., prva procjena") a da ne dotakne izbornik */
  .cs-kartica__vrijednost { max-width: 120px; }
  /* izbornik u kartici: oznaka iznad, izbornik u punoj sirini, da se duga vrijednost ne reze (4. 10. 2026.) */
  .cs-kartica__prekidaci .cs-selector-field, .cs-kartica__grafikon .cs-selector-field { flex-direction: column; align-items: stretch; gap: 2px; flex: 1 1 100%; }
  .cs-kartica__prekidaci .cs-selector select, .cs-kartica__grafikon .cs-selector select { flex: 0 0 auto; width: 100%; min-width: 0; }
}

/* --- Popis s nazivom i opisom (stranica O stranici: izvori, ucestalosti) i poziv na pretplatu ---
   Preneseno iz stila koji je stajao u samoj stranici (pravilo: nema stila u stranici, poglavlje 16). */
.cs-popis { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--cs-gap, 16px); margin: 14px 0 10px; }
.cs-popis__stavka {
  border: 1px solid var(--cs-border); border-radius: var(--cs-kartica-radius, var(--cs-radius)); background: var(--cs-surface);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); padding: 14px 16px 12px;
}
.cs-popis__naziv { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--cs-primary); margin: 0 0 6px; }
.cs-popis__opis { color: var(--cs-muted); font-size: 0.92rem; line-height: 1.45; }
.cs-poziv {
  border: 2px solid var(--cs-primary); border-radius: var(--cs-kartica-radius, var(--cs-radius)); background: var(--cs-bg-subtle);
  padding: 22px 24px; margin: 26px 0 16px; max-width: var(--cs-tekst-max, 1100px);
}
.cs-poziv p { margin: 0 0 12px; }
.cs-poziv p:last-child { margin: 0; font-size: 0.92rem; color: var(--cs-muted); }
.cs-poziv a.cs-form-btn { text-decoration: none; display: inline-block; padding: 13px 28px; font-size: 1.05rem; }
.cs-poziv a.cs-form-btn:hover { color: #fff; }
@media (max-width: 575px) {
  .cs-poziv { padding: 18px 16px; }
  .cs-poziv a.cs-form-btn { width: 100%; text-align: center; }
}

/* Karta na lokalnoj geometriji (bez vanjskih plocica): bijelo more, legenda kao HTML ispod karte (5. 10. 2026.).
   Legenda je vodoravna i prelama se, pa na uskom zaslonu stoji ispod karte, a na sirokom ne prekriva kartu. */
.cs-karta-lokalna .leaflet-container { background: #fff; }
.cs-karta-legenda { margin-top: 8px; font-family: var(--cs-font-sans, sans-serif); font-size: 12px; color: #565D66; }
.cs-karta-legenda__naslov { font-weight: 600; color: #22262B; margin-bottom: 4px; }
.cs-karta-legenda__stavke { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.cs-karta-legenda__stavka { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cs-karta-legenda__boja { width: 11px; height: 11px; border-radius: 50%; border: 1px solid #22262B; flex: 0 0 auto; }
.cs-karta-lokalna .leaflet-popup-content { margin: 10px 12px; font-size: 12px; line-height: 1.35; }

/* Kartice podstranica na stranicama skupina (cs_kartica_stranice; docs/arhitektura.md, 26). Izgled je isti kao kod
   kartica skupina na Monitoru (.cs-skupine__kartica): gornji rub i naslov u boji skupine, tanak obrub, blaga sjena.
   Boja dolazi iz definicije skupina (styles/inacice.css); ovdje se samo bira koja vrijedi za koju skupinu. */
.cs-stranice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 8px 0 24px; }
@media (max-width: 899px) { .cs-stranice { grid-template-columns: minmax(0, 1fr); } }
.cs-stranice[data-skupina="gospodarstvo"] { --cs-skupina: var(--cs-skupina-gospodarstvo); }
.cs-stranice[data-skupina="trziste-rada"] { --cs-skupina: var(--cs-skupina-trziste-rada); }
.cs-stranice[data-skupina="cijene"] { --cs-skupina: var(--cs-skupina-cijene); }
.cs-stranice[data-skupina="nekretnine"] { --cs-skupina: var(--cs-skupina-nekretnine); }
.cs-stranice[data-skupina="javne-financije"] { --cs-skupina: var(--cs-skupina-javne-financije); }
.cs-stranice[data-skupina="novac"] { --cs-skupina: var(--cs-skupina-novac); }
.cs-stranice[data-skupina="energetika"] { --cs-skupina: var(--cs-skupina-energetika); }
.cs-stranica {
  display: flex; flex-direction: column; padding: 16px 18px 14px; position: relative; overflow: hidden;
  background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: var(--cs-kartica-radius);
  color: var(--cs-ink); text-decoration: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform var(--cs-dur) var(--cs-ease), box-shadow var(--cs-dur) var(--cs-ease);
}
.cs-stranica::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--cs-skupina), color-mix(in srgb, var(--cs-skupina) 25%, transparent)); }
.cs-stranica:hover { text-decoration: none; color: var(--cs-ink); }
.cs-stranica:focus-visible { outline: 2px solid var(--cs-skupina); outline-offset: 2px; }
@media (hover: hover) { .cs-stranica:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16, 24, 32, 0.10); } }
.cs-stranica__naziv { display: block; font-family: var(--cs-font-naslov, var(--cs-font-sans)); font-weight: 600; font-size: 1.02rem; color: var(--cs-skupina); margin-bottom: 4px; }
.cs-stranica__opis { display: block; font-size: 0.86rem; color: var(--cs-muted); line-height: 1.4; margin-bottom: 12px; }
.cs-stranica__dno { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.cs-stranica__vrijednost { font-size: 0.9rem; font-weight: 600; color: var(--cs-ink); font-variant-numeric: tabular-nums; }
.cs-stranica__vrijednost:empty { display: none; }
.cs-stranica .cs-freq { margin-top: 0; color: var(--cs-skupina); background: color-mix(in srgb, var(--cs-skupina) 10%, transparent); }
@media (prefers-reduced-motion: reduce) { .cs-stranica { transition: none; } .cs-stranica:hover { transform: none; } }

/* Do 360 px istaknuti broj stoji ispod naslova (odluka 5. 10. 2026.): naslov dobiva punu sirinu kartice, pa se duga
   rijec u naslovu ne lomi usred rijeci; broj i razdoblje stoje lijevo, u istom retku. */
@media (max-width: 360px) {
  .cs-kartica__zaglavlje { flex-direction: column; align-items: stretch; }
  .cs-kartica__zaglavlje > .cs-kartica__vrijednost {
    max-width: none; text-align: left; margin: 4px 0 2px;
    display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px;
  }
  .cs-kartica__zaglavlje > .cs-kartica__vrijednost .cs-kartica__vrijednost-razdoblje { margin-top: 0; }
}

/* --- Vrh stranice pretplate (docs/arhitektura.md, 71): isti okvir i plocice kao analiticki okvir, bez retka izvora; stranica
   nema data-skupina pa okvir nosi zadanu plavu. Samo razmak prema ostatku stranice; izgled okvira i plocica ne mijenja se. --- */
.cs-sazetak--pretplata { margin: 6px 0 22px; }
main.content .cell:has(.cs-sazetak--pretplata) { margin: 0; padding: 0; }

/* Izmedju naslova i analitickog okvira stoji samo definicija (poglavlja 81 i 83, 10. 10. 2026.): opis stranice iz zaglavlja
   ostaje u <meta>, a njegov odlomak ispod naslova se ne prikazuje kad stranica ima definiciju (p.cs-definicija iz lua/definicija.lua). */
body:has(main p.cs-definicija) .quarto-title .description, body:has(main p.cs-definicija) #title-block-header .description { display: none; }