/**
 * Servisni centar Sisak.info – javni prikaz.
 * Sve je pod .ssc. Boje, fontovi i veličine dolaze iz tokena teme Sisak.info (--navy, --blue, --ff, --fs-*…);
 * zamjenske vrijednosti u var(--x, …) drže plugin upotrebljivim i bez te teme.
 */
.ssc {
	--ssc-font: var(--ff, inherit);
	--ssc-font-heading: var(--ff, inherit);
	--ssc-font-label: var(--ssc-font); /* Bez uskog PT Sans Narrow (vlasnik 27.10.2026.: nečitljivo). */
	--ssc-primary: var(--navy, #131f49);
	--ssc-primary-2: var(--blue-2, #0f3f95);
	--ssc-link: var(--blue, #1450b8);
	--ssc-tint: var(--blue-tint, #e8effb);
	--ssc-bg: var(--mist, #f2f4f8);
	--ssc-surface: var(--paper, #fff);
	--ssc-line: #e3e7ef;
	--ssc-line-strong: #cfd6e4;
	--ssc-text: var(--navy, #131f49);
	--ssc-text-2: var(--ink-2, #48516e);
	--ssc-text-3: var(--ink-3, #6b7390);
	--ssc-struja: #a14b06;
	--ssc-struja-bg: #fff4dc;
	--ssc-voda: #03689c;
	--ssc-voda-bg: #e2f3fd;
	--ssc-sc-struja: var(--s-struja, #e39b00);
	--ssc-sc-voda: var(--s-voda, #1a8fd6);
	--ssc-sc-otpad: var(--s-otpad, #1f9d55);
	--ssc-sc-ustanove: var(--s-ustanove, #5b4bb7);
	--ssc-sc-vrijeme: var(--s-vrijeme, #ef8a17);
	/* Boje kanti kao na rasporedu GOS-a (podatak, ne stil): miješani, plastika, biootpad, papir */
	--ssc-bin-mko: #2b2b2b;
	--ssc-bin-pla: #f2c200;
	--ssc-bin-bio: #7b4a2b;
	--ssc-bin-pap: #2f6fd6;
	--ssc-zdravlje: #b5103a;
	--ssc-zdravlje-bg: #fde8ee;
	--ssc-zrak: #0f6e66;
	--ssc-zrak-bg: #dcf5f1;
	--ssc-live: var(--red, #d92b2b);
	--ssc-live-bg: #fdecea;
	--ssc-ok: var(--green, #0e7f47);
	--ssc-ok-bg: #e6f5ec;
	--ssc-warn: #855800;
	--ssc-warn-bg: #fff6d6;
	--ssc-fs-2xs: var(--fs-2xs, .75rem);
	--ssc-fs-xs: var(--fs-xs, .8125rem);
	--ssc-fs-sm: var(--fs-sm, .9375rem);
	--ssc-fs-base: var(--fs-base, 1rem);
	--ssc-fs-md: var(--fs-md, 1.125rem);
	--ssc-fs-lg: var(--fs-lg, 1.3125rem);
	--ssc-fs-xl: var(--fs-xl, 1.625rem);
	--ssc-r: 10px;
	--ssc-r-lg: 10px;
	--ssc-shadow: none;

	font-family: var(--ssc-font);
	color: var(--ssc-text);
	line-height: 1.5;
	box-sizing: border-box;
}
.ssc *, .ssc *::before, .ssc *::after { box-sizing: inherit; }
.ssc h2, .ssc h3, .ssc h4, .ssc summary {
	font-family: var(--ssc-font-heading); color: var(--ssc-text); margin: 0; padding: 0; line-height: 1.25;
	font-weight: 700; letter-spacing: normal; text-transform: none;
}
/* Ritam razmaka: 4 · 8 · 12 · 16 · 24 · 32 */
.ssc { --ssc-s1: 4px; --ssc-s2: 8px; --ssc-s3: 12px; --ssc-s4: 16px; --ssc-s5: 24px; --ssc-s6: 32px; }
.ssc a { color: var(--ssc-link); }
.ssc a:focus-visible, .ssc button:focus-visible, .ssc input:focus-visible, .ssc select:focus-visible, .ssc summary:focus-visible {
	outline: 3px solid #38bdf8; outline-offset: 2px; border-radius: 4px;
}
.ssc .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ssc [hidden] { display: none !important; }
.ssc-muted { color: var(--ssc-text-3); }

/* Ikone */
.ssc-ic { display: inline-grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; }
.ssc-ic svg { width: 60%; height: 60%; }
.ssc-ic--struja { background: var(--ssc-struja-bg); color: var(--ssc-struja); }
.ssc-ic--voda { background: var(--ssc-voda-bg); color: var(--ssc-voda); }
.ssc-ic--zdravlje { background: var(--ssc-zdravlje-bg); color: var(--ssc-zdravlje); }
.ssc-ic--zrak { background: var(--ssc-zrak-bg); color: var(--ssc-zrak); }

/* Stanja (badge = stanje, ne akcija) */
.ssc-state, .ssc-live-tag {
	display: inline-block; font-size: var(--ssc-fs-2xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
	padding: 2px 8px; border-radius: 4px; white-space: nowrap;
}
.ssc-state--live { background: var(--ssc-live-bg); color: var(--ssc-live); }
.ssc-state--today, .ssc-state--upcoming { background: var(--ssc-warn-bg); color: var(--ssc-warn); }
.ssc-state--done { background: #eef1f5; color: var(--ssc-text-3); }
.ssc-live-tag { background: var(--ssc-live); color: #fff; }

/* ---------- Centar (raspored po skici teme: servisne-informacije.html) ---------- */
.ssc-centar { container: ssc-centar / inline-size; }
.ssc .ssc-g { font-size: var(--ssc-fs-xl); margin: 0 0 14px; display: flex; align-items: baseline; gap: 12px; }
.ssc .ssc-g small { font-size: var(--ssc-fs-sm); font-weight: 400; color: var(--ssc-text-3); font-family: var(--ssc-font); }
.ssc-sec + .ssc-sec, .ssc-empty + .ssc-sec { margin-top: 44px; }

/* Pločice po vrsti (filtar) */
/* auto-fit: koliko vrsta toliko pločica, uvijek preko pune širine (2 = pola-pola, 3 = trećine…) */
.ssc-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 12px; margin-top: 24px; }
.ssc-stat { display: grid; gap: 10px; background: var(--ssc-bg); border-radius: var(--ssc-r); padding: 16px; border: 0; font: inherit; text-align: left; color: inherit; cursor: pointer; }
.ssc-stat:hover { background: #e8ecf4; }
.ssc-stat[aria-pressed="true"] { background: var(--ssc-tint); box-shadow: inset 0 0 0 2px var(--ssc-link); }
.ssc-stat.on { box-shadow: inset 0 -3px 0 var(--ssc-sc); }
.ssc-stat.on[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ssc-link), inset 0 -3px 0 var(--ssc-sc); }
.ssc-stat .ssc-ic { width: 38px; height: 38px; border-radius: 10px; }
.ssc-stat strong { font-size: var(--ssc-fs-md); }
.ssc-stat small { font-size: var(--ssc-fs-xs); color: var(--ssc-text-3); }
.ssc-stat.on small { color: var(--ssc-link); font-weight: 700; }

/* Vrsta → boja (ikona i naglasak) */
.ssc [data-t="struja"], .ssc-card--struja { --ssc-sc: var(--ssc-sc-struja); }
.ssc [data-t="voda"], .ssc-card--voda { --ssc-sc: var(--ssc-sc-voda); }
.ssc-centar .ssc-ic--struja { background: var(--ssc-sc-struja); color: #fff; }
.ssc-centar .ssc-ic--voda { background: var(--ssc-sc-voda); color: #fff; }
.ssc [data-t="otpad"] { --ssc-sc: var(--ssc-sc-otpad); }
.ssc-centar .ssc-ic--otpad { background: var(--ssc-sc-otpad); color: #fff; }
.ssc a.ssc-stat { color: inherit; text-decoration: none; }
.ssc [data-t="ljekarne"] { --ssc-sc: var(--ssc-zdravlje); }
.ssc [data-t="ustanove"] { --ssc-sc: var(--ssc-sc-ustanove); }
.ssc-status .ssc-ic--zdravlje { background: var(--ssc-zdravlje); color: #fff; }
.ssc-centar .ssc-ic--ustanove { background: var(--ssc-sc-ustanove); color: #fff; }
.ssc [data-t="vrijeme"] { --ssc-sc: var(--ssc-sc-vrijeme); }
/* Važno (ručna hitna obavijest): crvena */
.ssc [data-t="vazno"], .ssc-card--vazno { --ssc-sc: var(--ssc-live); }
.ssc-ic--vazno, .ssc-centar .ssc-ic--vazno { background: var(--ssc-live); color: #fff; }
.ssc-centar .ssc-ic--vrijeme { background: var(--ssc-sc-vrijeme); color: #fff; }
/* Pritisnuti filtar: × pokazuje da ga ponovni dodir isključuje */
.ssc-stat[aria-pressed="true"] { position: relative; }
.ssc-stat[aria-pressed="true"]::after { content: "×"; position: absolute; top: 8px; right: 12px; font-size: 1.375rem; line-height: 1; color: var(--ssc-link); }

/* Navigacija servisnih stranica (struja i voda, otpad, ljekarne, ustanove, vrijeme) – povratak bez „natrag” */
.ssc-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.ssc .ssc-nav a {
	display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 14px 4px 5px; border-radius: 999px;
	background: var(--ssc-bg); color: var(--ssc-text); font-size: var(--ssc-fs-sm); font-weight: 700; text-decoration: none; white-space: nowrap;
}
.ssc .ssc-nav a:hover { background: #e8ecf4; }
.ssc-nav__ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ssc-sc, var(--ssc-link)); color: #fff; flex-shrink: 0; }
.ssc-nav__ic svg { width: 16px; height: 16px; }
.ssc .ssc-nav a[aria-current="page"] { background: var(--ssc-primary); color: #fff; }
.ssc [data-t="centar"] { --ssc-sc: var(--ssc-sc-struja); }
.ssc-nav [data-t="ljekarne"] .ssc-nav__ic { background: var(--ssc-zdravlje); }
.ssc-nav-wrap .ssc-nav { margin-bottom: 24px; }
.ssc-nav__s { display: none; }
/* Padajući izbornik (mobitel; <details> radi i bez JS-a): sažetak = trenutna stranica, popis ispod njega */
.ssc-nav__dd { position: relative; flex: 1 1 100%; }
.ssc-nav__dd > summary {
	display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 14px 6px 7px; border-radius: 12px; cursor: pointer;
	background: var(--ssc-primary); color: #fff; font-size: var(--ssc-fs-sm); font-weight: 700; list-style: none; user-select: none;
}
.ssc-nav__dd > summary::-webkit-details-marker { display: none; }
.ssc-nav__dd > summary:focus-visible { outline: 3px solid var(--ssc-link); outline-offset: 2px; border-radius: 12px; }
.ssc-nav__dd > summary > .ssc-nav__cur:first-child { padding-left: 7px; } /* Pregled: sažetak bez ikone */
.ssc-nav__dd > summary .ssc-nav__ic { width: 32px; height: 32px; }
.ssc-nav__chev { margin-left: auto; flex-shrink: 0; transition: transform .15s; }
.ssc-nav__dd[open] .ssc-nav__chev { transform: rotate(180deg); }
.ssc-nav__list {
	position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 15; /* ispod ljepljivog zaglavlja teme (20) */ display: grid; gap: 2px; padding: 6px;
	background: var(--ssc-surface); border-radius: 12px; box-shadow: 0 14px 32px rgba(11, 20, 51, .2), 0 0 0 1px rgba(11, 20, 51, .06);
}
.ssc .ssc-nav .ssc-nav__list a {
	display: flex; gap: 12px; min-height: 46px; padding: 6px 12px 6px 7px; border-radius: 8px;
	background: none; color: var(--ssc-text); font-size: var(--ssc-fs-sm); white-space: normal;
}
.ssc .ssc-nav .ssc-nav__list a:hover, .ssc .ssc-nav .ssc-nav__list a:focus-visible { background: var(--ssc-bg); }
.ssc .ssc-nav .ssc-nav__list a[aria-current="page"] { background: var(--ssc-tint); color: var(--ssc-primary); }
.ssc .ssc-nav .ssc-nav__list a[aria-current="page"]::after { content: "✓" / ""; margin-left: auto; color: var(--ssc-link); font-weight: 700; }
.ssc-nav .ssc-nav__list .ssc-nav__ic { width: 32px; height: 32px; }
.ssc-nav .ssc-nav__list .ssc-nav__l { display: inline; }
.ssc-nav .ssc-nav__list .ssc-nav__s { display: none; }
/* Desktop: na svim servisnim stranicama isti red velikih pločica (partials/tiles.php) – navigacija samo na mobitelu (dolje) */
.has-nav > .ssc-nav { display: none; }
.ssc a.ssc-stat[aria-current="page"] { background: var(--ssc-tint); box-shadow: inset 0 0 0 2px var(--ssc-link); }
.ssc-status--links { margin-bottom: 8px; }
.ssc-nav-wrap .ssc-status { margin: 0 0 28px; }

/* ---------- Ljekarne ([sisak_ljekarne]) ---------- */
.ssc-duty-hero { margin-bottom: 36px; box-shadow: inset 4px 0 0 var(--ssc-zdravlje); }
.ssc-duty-hero .ssc-duty__name { font-size: var(--ssc-fs-xl); }

/* ---------- Javne ustanove ([sisak_javne_ustanove]) ---------- */
.ssc-dir .ssc-jump { margin-bottom: 28px; }
.ssc-dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: var(--ssc-s3); }
.ssc-dir-card { background: var(--ssc-surface); box-shadow: 0 0 0 1px var(--ssc-line); border-radius: var(--ssc-r); padding: 16px; display: flex; flex-direction: column; gap: 6px; font-size: var(--ssc-fs-sm); }
.ssc .ssc-dir-card h3 { font-size: var(--ssc-fs-base); }
.ssc-dir-addr { margin: 0; color: var(--ssc-text-2); }
.ssc-dir-contacts { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 3px; }
.ssc-dir-contacts li { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px; overflow-wrap: anywhere; }
.ssc-dir-contacts span { color: var(--ssc-text-3); font-size: var(--ssc-fs-xs); padding-top: 1px; }
.ssc .ssc-dir-contacts a { font-weight: 700; text-decoration: none; }
.ssc .ssc-dir-contacts a:hover { text-decoration: underline; }

/* Odvoz otpada */
.ssc-waste-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ssc-waste-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; margin: 0; padding: 12px 16px; border-radius: var(--ssc-r); background: var(--ssc-surface); box-shadow: 0 0 0 1px var(--ssc-line); font-size: var(--ssc-fs-sm); color: var(--ssc-text-2); }
.ssc-bins { display: inline-flex; gap: 2px; }
.ssc-bin { width: 22px; height: 22px; display: block; }
.ssc-bin--mko { color: var(--ssc-bin-mko); }
.ssc-bin--pla { color: var(--ssc-bin-pla); }
.ssc-bin--bio { color: var(--ssc-bin-bio); }
.ssc-bin--pap { color: var(--ssc-bin-pap); }
.ssc-waste-where b { color: var(--ssc-text); margin-right: 6px; }
.ssc-waste-what { font-weight: 700; color: var(--ssc-text); white-space: nowrap; }
.ssc-waste-mine { background: var(--ssc-tint); border-radius: var(--ssc-r); padding: 16px 18px; display: grid; gap: 14px; }
.ssc .ssc-wm__h { margin: 0; font-size: var(--ssc-fs-sm); color: var(--ssc-text-2); }
.ssc-wm__h b { color: var(--ssc-text); font-size: var(--ssc-fs-md); margin-right: 6px; }
.ssc-wm__list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.ssc-wm__list li { display: grid; grid-template-columns: 96px auto minmax(0, 1fr); gap: 10px; align-items: center; margin: 0; font-size: var(--ssc-fs-sm); }
.ssc-wm__list li > span:first-child { font-weight: 700; color: var(--ssc-text); }
.ssc-wm__moved { color: var(--ssc-warn); font-size: var(--ssc-fs-xs); }
.ssc-waste .ssc-desc + .ssc-day, .ssc-waste-mine + .ssc-desc { margin-top: 12px; }

/* Stranica „Odvoz otpada” */
.ssc .ssc-lede { font-size: var(--ssc-fs-md); color: var(--ssc-text-2); margin: 0 0 18px; }
/* Uvod + pretraga: na širokom jedno do drugoga preko cijele širine (bez prijeloma na pola ekrana), na uskom jedno ispod drugoga */
.ssc-intro { display: grid; gap: 0 36px; align-items: center; }
@container ssc-centar (min-width: 900px) {
	.ssc-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.ssc-intro .ssc-lede { margin: 0; }
	.ssc-intro .ssc-search { max-width: none; }
	.ssc-intro--full { grid-template-columns: minmax(0, 1fr); }
}
.ssc-otpad .ssc-waste-mine { margin-top: 14px; }
.ssc-otpad > .ssc-disclaimer { margin-top: 32px; }
.ssc-zone { padding: 18px; border-radius: var(--ssc-r); background: var(--ssc-surface); box-shadow: 0 0 0 1px var(--ssc-line); scroll-margin-top: 80px; }
.ssc-zone + .ssc-zone { margin-top: 12px; }
.ssc-zone:target { box-shadow: 0 0 0 2px var(--ssc-link); }
.ssc .ssc-zone__h { font-size: var(--ssc-fs-lg); margin: 0 0 8px; display: flex; gap: 10px; align-items: baseline; }
.ssc .ssc-zone__h small { font-size: var(--ssc-fs-sm); font-weight: 400; color: var(--ssc-text-3); font-family: var(--ssc-font); }
.ssc .ssc-zone__area { font-size: var(--ssc-fs-sm); color: var(--ssc-text-2); margin: 0 0 6px; }
.ssc-zone__area b { color: var(--ssc-text); }
.ssc-zone .ssc-wm__list { margin: 10px 0 0; }
.ssc-zone__year { margin-top: 12px; }
.ssc .ssc-zone__year summary { cursor: pointer; font-family: var(--ssc-font); font-size: var(--ssc-fs-sm); font-weight: 700; color: var(--ssc-link); }
.ssc-zone__year dl { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 6px 12px; margin: 10px 0 0; font-size: var(--ssc-fs-sm); }
.ssc-zone__year dt { font-weight: 700; color: var(--ssc-text); }
.ssc-zone__year dd { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--ssc-text-2); }
.ssc-yd { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.ssc-yd.is-moved { color: var(--ssc-warn); font-weight: 700; }
.ssc-dotbin { width: 9px; height: 9px; border-radius: 2px; background: currentColor; display: inline-block; }
/* Skok na dijelove stranice */
.ssc-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.ssc .ssc-jump a { font-size: var(--ssc-fs-sm); font-weight: 700; color: var(--ssc-link); text-decoration: none; background: var(--ssc-tint); border-radius: 999px; padding: 7px 14px; }
.ssc .ssc-jump a:hover { text-decoration: underline; }

/* Kako razvrstavati otpad: kartica po spremniku, rub u boji kante, Da/Ne */
.ssc-sort { scroll-margin-top: 80px; }
.ssc-sort__grid { display: grid; gap: 12px; }
.ssc-sort__bin { padding: 18px; border-radius: var(--ssc-r); background: var(--ssc-surface); box-shadow: 0 0 0 1px var(--ssc-line), inset 4px 0 0 currentColor; color: var(--ssc-text); }
.ssc-sort__bin--mko { color: var(--ssc-bin-mko); }
.ssc-sort__bin--pla { color: var(--ssc-bin-pla); }
.ssc-sort__bin--bio { color: var(--ssc-bin-bio); }
.ssc-sort__bin--pap { color: var(--ssc-bin-pap); }
.ssc .ssc-sort__h { display: flex; gap: 10px; align-items: center; font-size: var(--ssc-fs-lg); margin: 0 0 12px; color: var(--ssc-text); }
.ssc-sort__h .ssc-bin { width: 30px; height: 30px; flex: none; }
.ssc-sort__h small { display: block; font-size: var(--ssc-fs-sm); font-weight: 400; color: var(--ssc-text-3); font-family: var(--ssc-font); }
.ssc-sort__cols { display: grid; gap: 14px; color: var(--ssc-text-2); }
.ssc .ssc-sort__cols h4 { font-family: var(--ssc-font-label); font-size: var(--ssc-fs-sm); margin: 0 0 6px; text-transform: uppercase; letter-spacing: .04em; }
.ssc .ssc-sort__yes h4 { color: var(--ssc-ok); }
.ssc .ssc-sort__no h4 { color: var(--ssc-live); }
.ssc-sort__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--ssc-fs-sm); }
.ssc-sort__cols li { margin: 0; padding-left: 20px; position: relative; }
.ssc-sort__yes li::before { content: "✓"; position: absolute; left: 0; color: var(--ssc-ok); font-weight: 700; }
.ssc-sort__no li::before { content: "✕"; position: absolute; left: 0; color: var(--ssc-live); font-weight: 700; }
.ssc .ssc-sort__note { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--ssc-bg); font-size: var(--ssc-fs-xs); color: var(--ssc-text-2); }
.ssc .ssc-sort__other-h { font-size: var(--ssc-fs-lg); margin: 28px 0 12px; }
.ssc-sort__other { display: grid; gap: 12px; }
.ssc-sort__other > div { padding: 16px 18px; border-radius: var(--ssc-r); background: var(--ssc-bg); }
.ssc .ssc-sort__other h4 { font-size: var(--ssc-fs-base); margin: 0 0 4px; }
.ssc .ssc-sort__other p { margin: 0; font-size: var(--ssc-fs-sm); color: var(--ssc-text-2); }
.ssc .ssc-sort__other a { color: var(--ssc-link); font-weight: 700; text-decoration: none; }
@container ssc-centar (min-width: 640px) {
	.ssc-sort__cols { grid-template-columns: 1fr 1fr; }
	.ssc-sort__other { grid-template-columns: 1fr 1fr; }
}

.ssc-legend { list-style: none; display: grid; gap: 8px; }
.ssc-legend li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: center; margin: 0; font-size: var(--ssc-fs-sm); }
@container ssc-centar (max-width: 600px) {
	.ssc-waste-list li { grid-template-columns: auto minmax(0, 1fr); }
	.ssc-waste-what { grid-column: 2; white-space: normal; }
	.ssc-wm__list li { grid-template-columns: 72px auto minmax(0, 1fr); gap: 8px; }
	.ssc-zone__year dl { grid-template-columns: 1fr; }
	.ssc-zone { padding: 14px; }
}

/* Alati */
.ssc-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }
/* Puna širina kao pločice ispod (bez praznine desno na desktopu) */
.ssc-search { flex: 1 1 280px; position: relative; display: block; margin: 0; }
/* Polje kao .street iz skice: ikona lokacije u pozadini */
.ssc-search input {
	width: 100%; height: 48px; margin: 0; border: 1.5px solid var(--ssc-line-strong); border-radius: var(--ssc-r);
	padding: 0 118px 0 42px; font: inherit; font-size: var(--ssc-fs-md); color: var(--ssc-text);
	background: var(--ssc-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7390' stroke-width='2.2'%3E%3Cpath d='M12 21s-7-6.5-7-12a7 7 0 0 1 14 0c0 5.5-7 12-7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E") 12px 50% no-repeat;
}
.ssc-search input:focus { outline: none; border-color: var(--ssc-link); box-shadow: 0 0 0 3px var(--ssc-tint); }
.ssc-pin {
	position: absolute; right: 7px; top: 7px; height: 34px; border: 0; border-radius: 7px; background: var(--ssc-tint); color: var(--ssc-link);
	font: inherit; font-size: var(--ssc-fs-xs); font-weight: 700; padding: 0 12px; cursor: pointer;
}
.ssc-pin[disabled] { opacity: .55; cursor: not-allowed; }
/* × za brisanje upisa (ugrađeni × tražilice nije isti u svim preglednicima – sakriven) */
/* div.ssc-search = polje s gumbima × i „Moja ulica” (gumbi su braća polja, ne u <label>) */
div.ssc-search input { padding-right: 150px; }
/* Prazno polje: × se ne vidi, pa ni mjesto za njega; predugi tekst završava s „…” (mobitel s velikim slovima, Hrc 28.10.2026.) */
div.ssc-search input:placeholder-shown { padding-right: 118px; }
.ssc-search input::placeholder { text-overflow: ellipsis; }
.ssc-search > label { display: block; margin: 0; }
.ssc-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.ssc-clear {
	position: absolute; right: 102px; top: 7px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none;
	color: var(--ssc-text-3); font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.ssc-clear:hover { background: var(--ssc-bg); color: var(--ssc-text); }
.ssc-toolbar { scroll-margin-top: 12px; }
.ssc-mine-bar { font-size: var(--ssc-fs-sm); margin: 10px 0 0; color: var(--ssc-text-2); }
.ssc-mine-bar b { color: var(--ssc-primary); }
.ssc-link-btn { background: none; border: 0; padding: 0; color: var(--ssc-link); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ssc-updated { font-size: var(--ssc-fs-xs); color: var(--ssc-text-3); display: flex; align-items: center; gap: 6px; margin: 12px 0 0; }
.ssc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ssc-ok); box-shadow: 0 0 0 3px var(--ssc-ok-bg); }

.ssc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; align-items: start; margin-top: 32px; }

/* Kartica obavijesti (.notice iz skice) */
.ssc-card {
	display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 18px;
	border-radius: var(--ssc-r); background: var(--ssc-surface); box-shadow: 0 0 0 1px var(--ssc-line); scroll-margin-top: 80px;
}
.ssc-card + .ssc-card { margin-top: 12px; }
.ssc-card .ssc-ic { width: 44px; height: 44px; border-radius: 12px; }
.ssc-card.is-live { box-shadow: 0 0 0 1px var(--ssc-line), inset 4px 0 0 var(--ssc-sc); }
.ssc-card.is-featured { box-shadow: 0 0 0 2px var(--ssc-primary-2); }
.ssc-card.is-mine { box-shadow: 0 0 0 2px var(--ssc-link); }
.ssc-card.is-flash { animation: ssc-flash 1.2s; }
@keyframes ssc-flash { from { background: var(--ssc-tint); } to { background: var(--ssc-surface); } }
@media (prefers-reduced-motion: reduce) { .ssc-card.is-flash { animation: none; } }
.ssc-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-family: var(--ssc-font-label); font-weight: 700; font-size: var(--ssc-fs-sm); color: var(--ssc-text-2); margin: 0; }
.ssc-kind--struja, .ssc-kind--voda { color: var(--ssc-text-2); }
.ssc-mine-tag { color: var(--ssc-link); }
.ssc-tag-featured { color: var(--ssc-primary-2); }
.ssc .ssc-card__title { font-size: var(--ssc-fs-lg); margin: 2px 0 0; }
.ssc-streets { color: var(--ssc-text-2); font-size: var(--ssc-fs-sm); margin-top: 6px; }
.ssc .ssc-streets summary { cursor: pointer; color: var(--ssc-link); font-family: var(--ssc-font); font-size: var(--ssc-fs-sm); font-weight: 700; margin-top: 4px; }
.ssc-streets ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.ssc-streets li b { color: var(--ssc-text); font-weight: 700; }
.ssc-raw { margin-top: 8px; padding: 10px; background: var(--ssc-bg); border-radius: 8px; font-size: var(--ssc-fs-sm); color: var(--ssc-text-2); }
.ssc-parse-note { display: block; font-size: var(--ssc-fs-xs); color: var(--ssc-warn); margin-top: 6px; }
/* Opis i izvor (skica: .notice p, .notice .src) */
.ssc .ssc-desc { color: var(--ssc-text-2); margin: 6px 0 0; font-size: var(--ssc-fs-sm); }
.ssc .ssc-src { font-size: var(--ssc-fs-xs); color: var(--ssc-text-3); margin: 8px 0 0; }
.ssc .ssc-src a { color: var(--ssc-link); font-weight: 700; text-decoration: none; }
.ssc .ssc-src a:first-child { color: inherit; font-weight: 400; text-decoration: underline; text-underline-offset: 2px; }
.ssc .ssc-src a:hover { text-decoration: underline; }
.ssc-card__time { text-align: right; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; }
.ssc-time { display: block; font-weight: 700; font-size: var(--ssc-fs-lg); font-variant-numeric: tabular-nums; }
.ssc-date { font-size: var(--ssc-fs-xs); color: var(--ssc-text-3); }
.ssc-progress { display: block; width: 140px; height: 5px; background: var(--ssc-bg); border-radius: 99px; margin-top: 8px; overflow: hidden; }
.ssc-progress span { display: block; height: 100%; background: var(--ssc-sc, var(--ssc-live)); border-radius: 99px; }
/* „U tijeku” kao crvena točka (skica .live-dot), ostala stanja kao tihi badge */
.ssc-card .ssc-state { font-size: var(--ssc-fs-xs); font-family: var(--ssc-font); font-weight: 700; letter-spacing: 0; text-transform: none; padding: 0; background: none; }
.ssc-card .ssc-state[hidden] { display: none; }
.ssc-card .ssc-state--live { display: inline-flex; align-items: center; gap: 6px; color: var(--ssc-live); }
.ssc-card .ssc-state--live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ssc-live); }
.ssc-card .ssc-state--today, .ssc-card .ssc-state--upcoming { color: var(--ssc-warn); }
.ssc-card .ssc-state--done { color: var(--ssc-text-3); }

.ssc .ssc-day { font-size: var(--ssc-fs-md); font-weight: 400; color: var(--ssc-text-2); margin: 18px 0 10px; font-family: var(--ssc-font); }
.ssc .ssc-day b { color: var(--ssc-primary); font-weight: 700; }
.ssc-upcoming .ssc-dayg:first-of-type .ssc-day { margin-top: 0; }

.ssc-empty { display: flex; gap: 10px; align-items: center; padding: 16px 18px; border-radius: var(--ssc-r); color: var(--ssc-ok); background: var(--ssc-bg); font-size: var(--ssc-fs-sm); margin: 0; }
.ssc-empty svg { width: 22px; height: 22px; flex-shrink: 0; }

/* Završeno */
.ssc-done details { background: var(--ssc-bg); border-radius: var(--ssc-r); padding: 4px 18px; }
.ssc .ssc-done summary { cursor: pointer; font-family: var(--ssc-font); font-size: var(--ssc-fs-base); font-weight: 700; padding: 12px 0; color: var(--ssc-link); }
.ssc-done ul { list-style: none; margin: 0 0 12px; padding: 0; }
.ssc-done li { display: grid; grid-template-columns: 110px 90px minmax(0, 1fr); gap: 12px; padding: 10px 0; font-size: var(--ssc-fs-sm); color: var(--ssc-text-2); margin: 0; }
.ssc-done li + li { box-shadow: 0 -1px 0 #dfe4ee; }
.ssc-done li b { color: var(--ssc-primary); }

@container ssc-centar (max-width: 900px) { .ssc-layout { grid-template-columns: 1fr; } }

.ssc-ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: var(--ssc-s3); }
/* Ljekarna kao kartica obavijesti iz skice: tanki rub kroz box-shadow, bez border-a */
.ssc-ph { background: var(--ssc-surface); border: 0; box-shadow: 0 0 0 1px var(--ssc-line); border-radius: var(--ssc-r); padding: 16px; display: flex; flex-direction: column; gap: 2px; font-size: var(--ssc-fs-sm); }
/* Dežurna ljekarna: samo oznaka „Dežurna …”, bez crvenog okvira kartice (vlasnik 28.10.2026.). */
/* Naziv u punoj širini, stanje ispod – duga oznaka „Otvoreno do 20:00” više ne lomi naziv. */
.ssc-ph__top { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: var(--ssc-s1); }
.ssc-ph__name { font-weight: 700; font-size: var(--ssc-fs-base); line-height: 1.3; }
.ssc-ph__addr { color: var(--ssc-text-2); }
.ssc-ph__hrs { color: var(--ssc-text-3); font-size: var(--ssc-fs-xs); }
.ssc-open { font-size: var(--ssc-fs-2xs); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; white-space: nowrap; background: #eef1f5; color: var(--ssc-text-3); }
.ssc-open:empty { display: none; }
.ssc-open.is-open { background: var(--ssc-ok-bg); color: var(--ssc-ok); }
.ssc-duty-tag { align-self: flex-start; margin-top: 4px; font-size: var(--ssc-fs-2xs); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; background: var(--ssc-zdravlje); color: #fff; }
.ssc-tel { font-weight: 700; text-decoration: none; margin-top: 4px; }
.ssc .ssc-ph-other__h { font-size: var(--ssc-fs-base); margin: var(--ssc-s5) 0 var(--ssc-s2); }
.ssc-ph-other { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 0 var(--ssc-s5); font-size: var(--ssc-fs-sm); }
.ssc-ph-other li { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--ssc-s3); border-bottom: 1px solid var(--ssc-line); padding: 10px 0; margin: 0; }
.ssc-ph-other a { font-weight: 600; text-decoration: none; white-space: nowrap; }
.ssc .ssc-note { font-size: var(--ssc-fs-xs); color: var(--ssc-text-3); margin: var(--ssc-s3) 0 0; }
.ssc-disclaimer { padding: 14px 18px; border-radius: var(--ssc-r); background: var(--ssc-bg); font-size: var(--ssc-fs-xs); color: var(--ssc-text-2); margin: 0; }

/* Bočni paneli – kao kutije iz skice (.notify/.nums): ploha bez obruba i crta */
.ssc-side { display: flex; flex-direction: column; gap: 28px; }
.ssc-panel { background: var(--ssc-bg); border: 0; border-radius: var(--ssc-r); box-shadow: none; overflow: hidden; }
.ssc-panel__h { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 20px 20px 0; border-bottom: 0; }
.ssc .ssc-panel__h h3 { font-size: var(--ssc-fs-lg); display: flex; gap: 8px; align-items: center; }
.ssc-panel__h .ssc-ic { width: 26px; height: 26px; }
.ssc-panel__h a { font-size: var(--ssc-fs-xs); font-weight: 700; }
.ssc-panel__b { padding: 12px 20px 20px; margin: 0; }
.ssc-panel__f { padding: 0 20px 16px; background: none; border-top: 0; font-size: var(--ssc-fs-2xs); color: var(--ssc-text-3); }
.ssc-panel__f a { color: var(--ssc-text-3); }
.ssc-duty { display: flex; flex-direction: column; gap: 2px; }
.ssc-duty__lbl { font-size: var(--ssc-fs-2xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ssc-zdravlje); }
.ssc-duty__name { font-size: var(--ssc-fs-md); font-weight: 700; }
.ssc-duty__addr { font-size: var(--ssc-fs-sm); color: var(--ssc-text-2); }
.ssc-call { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; height: 38px; padding: 0 14px; border-radius: 8px; background: var(--ssc-zdravlje); color: #fff !important; text-decoration: none; font-weight: 700; font-size: var(--ssc-fs-sm); align-self: flex-start; }
.ssc-call svg { width: 16px; height: 16px; }
.ssc-kv { list-style: none; }
.ssc-kv li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; padding: 8px 0; border-top: 1px solid var(--ssc-line); font-size: var(--ssc-fs-sm); }
.ssc-kv li:first-child { border-top: 0; }
.ssc-kv small { display: block; color: var(--ssc-text-3); font-size: var(--ssc-fs-2xs); }
.ssc-kv a { font-weight: 700; text-decoration: none; white-space: nowrap; }

/* Zrak */
.ssc-air__main { display: flex; align-items: center; gap: 14px; --ssc-aq-c: #50c878; }
.ssc-aq-2 { --ssc-aq-c: #a3d65c; } .ssc-aq-3 { --ssc-aq-c: #f2c94c; } .ssc-aq-4 { --ssc-aq-c: #f2994a; } .ssc-aq-5 { --ssc-aq-c: #eb5757; } .ssc-aq-6 { --ssc-aq-c: #8e2a6b; }
.ssc-air__ring { position: relative; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: var(--ssc-fs-lg); background: conic-gradient(var(--ssc-aq-c) calc(var(--ssc-aq) * 1%), #e8edf3 0); flex-shrink: 0; }
.ssc-air__ring::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--ssc-surface); }
.ssc-air__ring span { position: relative; z-index: 1; }
.ssc-air__cat { display: block; font-weight: 800; font-size: var(--ssc-fs-md); }
.ssc-air__sub { display: block; font-size: var(--ssc-fs-xs); color: var(--ssc-text-2); }
.ssc-air__scale { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; margin: 12px 0 10px; }
.ssc-air__scale i { height: 6px; border-radius: 2px; background: #50c878; }
.ssc-air__scale i:nth-child(2) { background: #a3d65c; } .ssc-air__scale i:nth-child(3) { background: #f2c94c; } .ssc-air__scale i:nth-child(4) { background: #f2994a; } .ssc-air__scale i:nth-child(5) { background: #eb5757; } .ssc-air__scale i:nth-child(6) { background: #8e2a6b; }
.ssc-pol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ssc-pol div { background: var(--ssc-surface); border-radius: 6px; padding: 6px; text-align: center; font-size: var(--ssc-fs-2xs); color: var(--ssc-text-2); }
.ssc-pol b { display: block; font-size: var(--ssc-fs-sm); color: var(--ssc-text); }
.ssc-tip { margin: 10px 0 0; font-size: var(--ssc-fs-xs); color: var(--ssc-text-2); background: var(--ssc-surface); border-radius: 8px; padding: 8px 10px; }

/* Bočni stupac po skici: hitni brojevi (tamno), prijava kvara, „Znate za prekid…?”. Uski ekran ili veliko slovo u
   postavkama mobitela (Hrc 27.10.2026.: „moram scrollat lijevo desno”): broj prelazi u novi red, ne gura stranicu. */
.ssc-nums { background: var(--ssc-primary); color: #fff; border-radius: var(--ssc-r); padding: 20px; }
.ssc .ssc-nums h2 { color: #fff; font-size: var(--ssc-fs-lg); margin-bottom: 12px; }
.ssc .ssc-nums a { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 0; font-size: var(--ssc-fs-sm); color: #fff; text-decoration: none; } /* broj uvijek ispod naziva, i kad bi stao desno (Hrc 28.10.2026.: Elektra Sisak) */
.ssc-nums a + a { box-shadow: 0 -1px 0 rgba(255, 255, 255, .12); }
.ssc-nums a b { font-size: var(--ssc-fs-lg); white-space: nowrap; }
.ssc-nums a small { display: block; font-size: var(--ssc-fs-2xs); opacity: .75; }
.ssc-nums a:hover span { text-decoration: underline; }
.ssc-nums--light { background: var(--ssc-bg); color: var(--ssc-text); }
.ssc .ssc-nums--light h2, .ssc .ssc-nums--light a { color: var(--ssc-text); }
.ssc-nums--light a + a { box-shadow: 0 -1px 0 #dfe4ee; }
.ssc-nums--light a b { color: var(--ssc-link); }
.ssc-notify { background: var(--ssc-tint); border-radius: var(--ssc-r); padding: 20px; }
.ssc .ssc-notify h2 { font-size: var(--ssc-fs-lg); }
.ssc-notify p { font-size: var(--ssc-fs-sm); color: var(--ssc-text-2); margin: 6px 0 14px; }
.ssc .ssc-btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--ssc-fs-sm); border-radius: 6px; padding: 11px 16px; background: var(--ssc-link); color: #fff; text-decoration: none; }
.ssc .ssc-btn:hover { background: var(--ssc-primary-2); }
/* Pregled: Prijevoz – isti blok kao sidebar (naziv lijevo, broj desno u jednom retku), poveznice kao gumbi. */
.ssc-transport { display: grid; gap: 16px; }
.ssc .ssc-carrier h3 { font-size: var(--ssc-fs-lg); margin: 0 0 4px; color: var(--ssc-text); }
.ssc .ssc-carrier__d { margin: 0 0 8px; font-size: var(--ssc-fs-sm); color: var(--ssc-text-2); }
.ssc .ssc-carrier__links { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.ssc .ssc-nums .ssc-carrier__links a.ssc-btn { display: inline-flex; justify-content: center; max-width: 100%; padding: 11px 16px; color: #fff; box-shadow: none; text-align: center; }
.ssc .ssc-nums .ssc-carrier__links a.ssc-btn--sec { background: #e8effb; color: var(--ssc-link); }
.ssc .ssc-nums .ssc-carrier__links a.ssc-btn--sec:hover { background: #dbe5f7; }
.ssc .ssc-panel__h h2 { font-size: var(--ssc-fs-lg); display: flex; gap: 8px; align-items: center; }
@container ssc-centar (max-width: 900px) { .ssc-side { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); align-items: start; } }

/* ---------- Widget ---------- */
.ssc-widget { container: ssc-widget / inline-size; background: var(--ssc-surface); border: 1px solid var(--ssc-line); border-radius: var(--ssc-r-lg); overflow: hidden; box-shadow: var(--ssc-shadow); }
.ssc-widget__h { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 16px; background: var(--ssc-primary); }
.ssc .ssc-widget__h h3 { color: #fff; font-size: var(--ssc-fs-md); }
.ssc-widget__h a { color: #9fd6ff; font-size: var(--ssc-fs-xs); font-weight: 700; text-decoration: none; }
.ssc-widget__list { list-style: none; margin: 0; padding: 0; }
.ssc-widget__list li { display: grid; grid-template-columns: 32px 1fr; gap: 10px; padding: 11px 16px; border-top: 1px solid var(--ssc-line); margin: 0; }
.ssc-widget__list li:first-child { border-top: 0; }
.ssc-widget__list .ssc-ic { width: 32px; height: 32px; }
.ssc-widget .ssc-kind { display: flex; gap: 6px; align-items: center; }
.ssc-widget .ssc-live-tag { font-size: .625rem; padding: 1px 5px; }
.ssc-widget__where { display: block; font-weight: 700; font-size: var(--ssc-fs-sm); line-height: 1.3; margin: 2px 0; }
.ssc-widget__when { display: block; font-size: var(--ssc-fs-xs); color: var(--ssc-text-2); font-variant-numeric: tabular-nums; }
.ssc-widget__src { display: block; font-size: var(--ssc-fs-2xs); color: var(--ssc-text-3); }
.ssc-widget__src a { color: var(--ssc-text-3); }
.ssc-widget__empty { padding: 16px; }
.ssc .ssc-widget__more { display: block; padding: var(--ssc-s3) var(--ssc-s4); border-top: 1px solid var(--ssc-line); font-size: var(--ssc-fs-sm); font-weight: 600; text-decoration: none; color: var(--ssc-link); }
.ssc .ssc-widget__more:hover { background: #f8fafc; }
.ssc-widget__f { margin: 0; padding: 8px 16px; background: #f8fafc; border-top: 1px solid var(--ssc-line); font-size: var(--ssc-fs-2xs); color: var(--ssc-text-3); }
.ssc .ssc-ph-other b { font-weight: 700; color: var(--ssc-text); }

/* Mobitel – mora biti na kraju bloka centra da nadjača osnovna pravila. */
@container ssc-centar (max-width: 600px) {
	.ssc-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ssc-stat:last-child:nth-child(odd) { grid-column: 1 / -1; } /* 3 vrste: zadnja preko cijelog reda, bez rupe */
	/* S navigacijom servisa: pločice-poveznice su suvišne, Struja i Voda postaju mali filtri – rezultati odmah ispod tražilice */
	.has-nav .ssc-status { margin-top: 12px; gap: 8px; }
	.has-nav .ssc-status a.ssc-stat { display: none; }
	.has-nav > .ssc-nav { display: flex; }
	.has-nav .ssc-status--links { display: none; } /* Ostale servisne stranice: na mobitelu samo navigacija */
	.has-nav .ssc-stat { grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; row-gap: 0; align-items: center; padding: 9px 30px 9px 10px; }
	.has-nav .ssc-stat .ssc-ic { width: 32px; height: 32px; border-radius: 8px; grid-row: 1 / 3; }
	.has-nav .ssc-stat strong { font-size: var(--ssc-fs-base); }
	.has-nav .ssc-stat[aria-pressed="true"]::after { top: 50%; right: 10px; transform: translateY(-50%); }
	.has-nav .ssc-layout { margin-top: 20px; }
	.ssc .ssc-nav a { font-size: var(--ssc-fs-xs); min-height: 36px; padding-right: 12px; }
	.ssc-nav__ic { width: 26px; height: 26px; }
	.ssc-nav { gap: 6px; margin-bottom: 16px; }
	.ssc-nav__l { display: none; }
	.ssc-nav__s { display: inline; }
	.ssc-toolbar { display: grid; grid-template-columns: 1fr; }
	.ssc-search { width: 100%; max-width: none; }
	.ssc-card { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 14px; }
	.ssc-card .ssc-ic { width: 40px; height: 40px; }
	.ssc-card__time { grid-column: 2; align-items: flex-start; text-align: left; white-space: normal; }
	.ssc-done li { grid-template-columns: 1fr; gap: 2px; }
	.ssc-ph-grid { grid-template-columns: 1fr; }
	.ssc-side { grid-template-columns: 1fr; }
}

/* ---------- Traka za zaglavlje [sisak_servis_traka] ---------- */
.ssc-strip {
	--ssc-strip-bg: var(--ssc-primary); --ssc-strip-fg: #fff; --ssc-strip-muted: #aab6d3; --ssc-strip-line: rgba(255, 255, 255, .14);
	background: var(--ssc-strip-bg); color: var(--ssc-strip-fg);
}
.ssc-strip--light { --ssc-strip-bg: var(--ssc-surface); --ssc-strip-fg: var(--ssc-text); --ssc-strip-muted: var(--ssc-text-3); --ssc-strip-line: var(--ssc-line); }
.ssc-strip { container: ssc-strip / inline-size; }
/* Stavke se prelamaju u retke prema širini roditelja (zaglavlje, stupac sadržaja, bočni stupac).
   Razmak od 1 px na podlozi crte daje pravilne razdjelnike i nakon prelamanja. */
.ssc-strip__row { display: flex; flex-wrap: wrap; gap: 1px; background: var(--ssc-strip-line); }
.ssc .ssc-strip__item {
	display: flex; flex-direction: column; justify-content: center; gap: var(--ssc-s1); flex: 1 0 auto; min-width: 0;
	padding: var(--ssc-s3) var(--ssc-s5); background: var(--ssc-strip-bg); color: inherit; text-decoration: none;
}
.ssc a.ssc-strip__item:hover .ssc-strip__lbl, .ssc a.ssc-strip__item:focus-visible .ssc-strip__lbl { color: var(--ssc-strip-fg); }
.ssc-strip__lbl { font-size: var(--ssc-fs-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ssc-strip-muted); white-space: nowrap; }
.ssc-strip__line { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ssc-strip__ic { width: 20px; height: 20px; flex-shrink: 0; opacity: .9; }
.ssc-strip__val { font-size: 1.375rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.ssc-strip__val--sm { font-size: var(--ssc-fs-md); font-weight: 700; }
.ssc-strip__unit { font-size: var(--ssc-fs-sm); color: var(--ssc-strip-muted); margin-right: var(--ssc-s2); }
.ssc-strip__unit:last-child { margin-right: 0; }
.ssc-strip__arrow { display: inline-flex; color: #7cc4ff; }
.ssc-strip--light .ssc-strip__arrow { color: var(--ssc-link); }
.ssc-strip__arrow .ssc-strip__ic { width: 18px; height: 18px; }
.ssc-strip__aq { width: 12px; height: 12px; border-radius: 50%; background: var(--ssc-aq-c, #50c878); flex-shrink: 0; }
.ssc-strip__aq.ssc-aq-1 { --ssc-aq-c: #50c878; } .ssc-strip__aq.ssc-aq-2 { --ssc-aq-c: #a3d65c; } .ssc-strip__aq.ssc-aq-3 { --ssc-aq-c: #f2c94c; }
.ssc-strip__aq.ssc-aq-4 { --ssc-aq-c: #f2994a; } .ssc-strip__aq.ssc-aq-5 { --ssc-aq-c: #eb5757; } .ssc-strip__aq.ssc-aq-6 { --ssc-aq-c: #b8336a; }
.ssc-strip__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-right: 2px; }
.ssc-strip__dot--live { background: #ff4d4d; box-shadow: 0 0 0 3px rgba(255, 77, 77, .25); }
.ssc-strip__dot--today { background: #f2c94c; }
.ssc-strip__dot--ok { background: #4cc77a; }
@media (prefers-reduced-motion: no-preference) {
	.ssc-strip__dot--live { animation: ssc-pulse 2s ease-in-out infinite; }
}
@keyframes ssc-pulse { 50% { box-shadow: 0 0 0 6px rgba(255, 77, 77, 0); } }
@container ssc-strip (max-width: 760px) {
	/* Uže od punog zaglavlja: servisni centar prvi, u svom retku. */
	.ssc .ssc-strip__item--service { order: -1; flex-basis: 100%; }
}
@container ssc-strip (max-width: 480px) {
	.ssc .ssc-strip__item { padding: var(--ssc-s2) var(--ssc-s4); }
	.ssc .ssc-strip__item--opt, .ssc .ssc-strip__item--date { display: none; }
	.ssc-strip__val { font-size: var(--ssc-fs-lg); }
}

/* Upozorenja DHMZ-a (002 A): žuto / narančasto / crveno (boje Meteoalarma). */
.ssc-warn-yellow { --ssc-warn-c: #f2c200; --ssc-warn-bg: #fff8d6; }
.ssc-warn-orange { --ssc-warn-c: #f07d00; --ssc-warn-bg: #fff0e0; }
.ssc-warn-red { --ssc-warn-c: #d62020; --ssc-warn-bg: #fde8e8; }
.ssc .ssc-warn { border-left: 5px solid var(--ssc-warn-c, #f2c200); background: var(--ssc-warn-bg, #fff8d6); border-radius: var(--ssc-r); padding: 12px 16px; margin: 0 0 10px; }
.ssc .ssc-warn__lvl { margin: 0; font-size: var(--ssc-fs-xs); font-weight: 700; color: var(--ssc-text-2); display: flex; align-items: center; gap: 6px; }
.ssc .ssc-warn__lvl b { color: var(--ssc-warn-c); }
.ssc .ssc-warn__dot, .ssc-strip__warn { width: 12px; height: 12px; border-radius: 50%; background: var(--ssc-warn-c, #f2c200); flex-shrink: 0; display: inline-block; }
.ssc .ssc-warn__t { margin: 4px 0 2px; font-size: var(--ssc-fs-md); line-height: 1.3; color: var(--ssc-text); }
.ssc .ssc-warn__time { margin: 0 0 6px; font-size: var(--ssc-fs-sm); color: var(--ssc-text-2); }
.ssc .ssc-warn__d, .ssc .ssc-warn__i { margin: 4px 0 0; font-size: var(--ssc-fs-sm); color: var(--ssc-text); }
.ssc .ssc-warn__i { color: var(--ssc-text-2); }

/* ---------- Stranica Vrijeme [sisak_vrijeme] (010; skica teme resources/skice/vrijeme.html) ---------- */
.ssc-vrijeme { --ssc-wx-2xl: var(--fs-2xl, 2rem); --ssc-wx-sep: #dfe4ee; }
.ssc-wx { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin: 24px 0 0; }
.ssc-wx > *, .ssc-wx section { min-width: 0; }
.ssc-wx h2 { font-size: var(--ssc-fs-xl); margin: 0; color: var(--ssc-text); }
.ssc-wx .ssc-sec { margin: 0; }
.ssc-wx-i { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; }
.ssc-wx-i svg { width: 100%; height: 100%; opacity: 1; }
.ssc-wx-i.is-big { width: 88px; height: 88px; }
.ssc-wx-card { background: var(--ssc-bg); border-radius: 14px; padding: 20px; }
.ssc-wx-sh { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.ssc-wx-sh h2 { font-size: var(--ssc-fs-lg); }
section > .ssc-wx-sh h2 { font-size: var(--ssc-fs-xl); }
.ssc-wx-card .ssc-wx-sh h2 { font-size: var(--ssc-fs-lg); }
.ssc-wx-sh small { color: var(--ssc-text-3); font-size: var(--ssc-fs-xs); }
/* mjesta */
.ssc-wx-places { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.ssc-wx-places a { flex: none; display: inline-flex; gap: 8px; align-items: center; background: var(--ssc-bg); border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: var(--ssc-fs-sm); color: var(--ssc-primary); text-decoration: none; }
.ssc-wx-places a b { font-family: var(--ssc-font-label); }
.ssc-wx-places a.is-cur { background: var(--ssc-primary); color: #fff; }
.ssc-wx-places .ssc-wx-i { width: 18px; height: 18px; }
.ssc-wx-sep { flex: none; align-self: center; color: var(--ssc-text-3); font-size: var(--ssc-fs-xs); padding: 0 4px; }
/* sada */
.ssc-wx-hero { background: linear-gradient(135deg, var(--ssc-primary), #1b2d6b); color: #fff; border-radius: 16px; padding: 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; }
.ssc-wx .ssc-wx-hero h2 { font-size: var(--ssc-fs-md); color: #fff; }
.ssc-wx-sub { color: #b9c6ea; font-size: var(--ssc-fs-sm); }
.ssc-wx-now { display: flex; align-items: center; gap: 18px; margin-top: 6px; }
.ssc-wx-t { font-family: var(--ssc-font-label); font-size: 5.5rem; line-height: 1; }
.ssc .ssc-wx-cond { font-size: var(--ssc-fs-lg); font-weight: 700; margin: 6px 0 0; color: #fff; }
.ssc .ssc-wx-mm { color: #dbe2f3; font-size: var(--ssc-fs-sm); margin: 0; }
.ssc .ssc-wx-txt { color: #ffd400; font-size: var(--ssc-fs-sm); font-weight: 700; margin: 14px 0 0; } /* opis vremena istaknut žutom portala (vlasnik 28.10.2026.) */
.ssc-wx-parts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.ssc-wx-parts div { background: rgba(255, 255, 255, .08); border-radius: 12px; padding: 12px; text-align: center; display: grid; gap: 4px; justify-items: center; }
.ssc-wx-parts small { color: #b9c6ea; font-size: var(--ssc-fs-xs); }
.ssc-wx-parts b { font-family: var(--ssc-font-label); font-size: var(--ssc-fs-lg); }
.ssc-wx-parts em { font-style: normal; font-size: var(--ssc-fs-2xs); color: #8fc2ff; }
.ssc-wx-hbot { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 14px; }
.ssc-wx-hbot small { display: block; color: #b9c6ea; font-size: var(--ssc-fs-xs); }
.ssc-wx-hbot b { font-size: var(--ssc-fs-md); }
/* 24 sata */
.ssc-wx-24 { overflow-x: auto; color: var(--ssc-link); }
.ssc-wx-row { display: grid; grid-template-columns: repeat(var(--ssc-wx-n, 24), 52px); width: max-content; text-align: center; font-size: var(--ssc-fs-sm); color: var(--ssc-text); }
.ssc-wx-row.is-h { color: var(--ssc-text-3); font-size: var(--ssc-fs-xs); }
.ssc-wx-row.is-ico .ssc-wx-i { width: 24px; height: 24px; color: var(--ssc-primary); }
.ssc-wx-line { display: block; height: 70px; }
.ssc-wx-tv { font-family: var(--ssc-font-label); font-weight: 700; }
.ssc-wx-p { color: var(--ssc-link); font-size: var(--ssc-fs-xs); font-weight: 700; }
/* 10 dana + Sunce i Mjesec */
.ssc-wx-two { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.ssc-wx-days { display: grid; }
.ssc-wx-day { display: grid; grid-template-columns: 110px 32px 40px 44px minmax(0, 1fr) 44px 70px; gap: 10px; align-items: center; padding: 10px 0; font-size: var(--ssc-fs-sm); color: var(--ssc-text); }
.ssc-wx-day + .ssc-wx-day { box-shadow: 0 -1px 0 var(--ssc-wx-sep); }
.ssc-wx-day b { display: block; }
.ssc-wx-day small { color: var(--ssc-text-3); font-size: var(--ssc-fs-xs); }
.ssc-wx-day .ssc-wx-i { color: var(--ssc-primary); }
.ssc-wx-lo { color: var(--ssc-text-3); text-align: right; }
.ssc-wx-hi { font-weight: 700; }
.ssc-wx-bar { height: 6px; border-radius: 3px; background: #e1e6f0; position: relative; }
.ssc-wx-bar i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, #3d8be8, #f2a33a); min-width: 6px; }
.ssc-wx-w { color: var(--ssc-text-2); font-size: var(--ssc-fs-xs); }
.ssc-wx-side { display: grid; gap: 16px; }
.ssc-wx-arc { display: block; width: 100%; height: 90px; color: var(--ssc-text-3); }
.ssc-wx-sun { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; margin-top: 8px; color: var(--ssc-text); }
.ssc-wx-sun small { display: block; color: var(--ssc-text-3); font-size: var(--ssc-fs-xs); }
.ssc-wx-sun b { font-family: var(--ssc-font-label); font-size: var(--ssc-fs-lg); }
.ssc-wx-moon { display: flex; gap: 12px; align-items: center; margin-top: 12px; padding-top: 12px; box-shadow: 0 -1px 0 var(--ssc-wx-sep); font-size: var(--ssc-fs-sm); color: var(--ssc-text); }
.ssc-wx-moon small { display: block; color: var(--ssc-text-3); }
/* trenutni uvjeti */
.ssc-wx-cond { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ssc-wx-cond > div { background: var(--ssc-bg); border-radius: 14px; padding: 16px; color: var(--ssc-text); }
.ssc-wx-cond small { display: block; color: var(--ssc-text-3); font-size: var(--ssc-fs-xs); }
.ssc-wx-cond b { display: block; font-family: var(--ssc-font-label); font-size: var(--ssc-wx-2xl); line-height: 1.1; margin-top: 4px; }
.ssc-wx-cond b span { font-size: var(--ssc-fs-sm); font-family: var(--ssc-font); }
.ssc .ssc-wx-cond p { color: var(--ssc-text-2); font-size: var(--ssc-fs-xs); margin: 4px 0 0; }
/* županija */
.ssc-wx-towns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ssc-wx-towns a { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; background: var(--ssc-bg); border-radius: 14px; padding: 14px 16px; text-decoration: none; color: var(--ssc-primary); }
.ssc-wx-towns b { font-size: var(--ssc-fs-md); }
.ssc-wx-tt { grid-row: 1 / 3; grid-column: 2; font-family: var(--ssc-font-label); font-size: var(--ssc-wx-2xl); }
.ssc-wx-towns small { color: var(--ssc-text-2); font-size: var(--ssc-fs-xs); }
.ssc-wx-towns a.is-cmp { background: var(--ssc-surface); box-shadow: 0 0 0 1px var(--ssc-wx-sep); }
.ssc-wx .ssc-zrak-wrap { margin: 0; }
/* zrak + pelud (3c) */
.ssc-wx-air.has-pollen { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.ssc-wx-pol { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; font-size: var(--ssc-fs-sm); color: var(--ssc-text); }
.ssc-wx-pol + .ssc-wx-pol { box-shadow: 0 -1px 0 var(--ssc-wx-sep); }
.ssc-wx-pol b { text-align: right; }
.ssc-wx-pol b small { display: block; font-weight: 400; color: var(--ssc-text-3); font-size: var(--ssc-fs-2xs); }
.ssc-wx-pol.is-l0 b { color: var(--ssc-text-3); font-weight: 400; }
.ssc-wx-pol.is-l1 b { color: var(--ssc-ok); }
.ssc-wx-pol.is-l2 b { color: var(--ssc-warn); }
.ssc-wx-pol.is-l3 b { color: var(--ssc-live); }
.ssc-wx-pollen .ssc-src { margin-top: 8px; }
@container ssc-centar (max-width: 1000px) {
	.ssc-wx-hero, .ssc-wx-two, .ssc-wx-air.has-pollen { grid-template-columns: 1fr; }
	.ssc-wx-cond, .ssc-wx-towns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container ssc-centar (max-width: 560px) {
	.ssc-wx-parts { grid-template-columns: repeat(2, 1fr); }
	.ssc-wx-t { font-size: 4.5rem; }
	.ssc-wx-day { grid-template-columns: 92px 28px 34px 34px minmax(0, 1fr) 34px; }
	.ssc-wx-w { display: none; }
}
/* Najuži mobitel ili veliko slovo u postavkama mobitela: dan se smije suziti, traka temperature ostaje (bez guranja stranice). */
@container ssc-centar (max-width: 380px) {
	.ssc-wx-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ssc-wx-day { grid-template-columns: minmax(0, 1fr) 24px 30px 30px minmax(24px, 48px) 30px; gap: 6px; }
}