/* app/www/oko-zdravlje.css — OKO Srbije — sloj „zdravlje".
Health pivot 2026-07-31. Loads AFTER oko.css and never redefines its tokens:
the light topo-paper / dark orbital-night bases, the signature turquoise and
the Archivo + IBM Plex trio all come from there. This file styles the new
blocks (spec sections 6 and 7) and carries the accessibility floor of
section 1.5 into every one of them.
THREE RULES THAT ARE NOT NEGOTIABLE HERE
----------------------------------------
1. 16 px floor. Nothing that carries meaning renders below 1rem. The single
documented exception is .oko-fineprint (privacy sentence, spec 6.1), and
it still never goes below 14 px.
2. No horizontal scrolling. Tiles, chips and rank rows STACK VERTICALLY.
Three items down the page beats five items sideways (user jury).
3. Colour is never the only channel. Every level marker ships with (a) the
written class word from the recognised scale, (b) the number, and (c) a
five-segment meter whose FILLED-SEGMENT COUNT repeats the level without
any colour at all. Works for deuteranopia, for greyscale printing, and
for anyone who turned colours off.
Turquoise discipline (spec 6.4): inside .ozd, --oko means "here is what to
do". It is spent on the single action block and on focus rings. Decorative
turquoise from oko.css (neatline corners, card reticles) is neutralised in
this scope on purpose.
MARKUP CONTRACT (what the modules must emit)
--------------------------------------------
Level marker, wherever a level is shown:
vrlo visok
The count equals the level (1..5). The word is mandatory.
The level class ozd-n1..ozd-n5 (or ozd-nd for "nema podataka") goes on the
block that shows the level — .ozd-presuda, .ozd-broj, .ozd-sprema-stavka,
.ozd-rang-red, .ozd-dokaz, .ozd-nivo — because it sets --lvl and --lvl-mark
for everything inside it.
Topic icon (sprite app/www/oko-ikone.svg, ids "oko-ic-"):
Always beside a written topic name; the icon is never the only label.
Evidence point (spec 6.3): the coloured/shaped marker is a ::before, so the
row needs exactly one text wrapper:
preko praga — 7,6 je u klasi ...
Uobičajeno ne znači bezopasno.
Missing data (rule Z10 / graft G2.2) uses .ozd-nema and nothing else — no
grey card, no zero.
*/
/* ======================================================================== */
/* §Z0 TOKENI SLOJA ZDRAVLJA */
/* Five verdict levels N1..N5. Two variants per level: */
/* --nX readable TEXT colour on --paper / --card (checked >= 4.5:1) */
/* --nX-mark saturated MARKER colour — DECORATIVE tints only */
/* A11Y 2026-07-31 (measured): the -mark saturates fail WCAG 1.4.11 (3:1 */
/* non-text) on the light card — n3-mark #E0A62B = 2,04:1, n2-mark #4FA3A0 */
/* = 2,78:1. Every marker that CARRIES the level (meter fill, evidence dot, */
/* level border) therefore uses --lvl (the text variant: worst case 4,64:1 */
/* light, 5,23:1 dark). --lvl-mark stays defined for background tints only. */
/* Light values are dark enough to read on paper; dark values are light */
/* enough to read on orbital night. Neither theme is the afterthought. */
/* ======================================================================== */
:root {
--n1: #16694A; --n1-mark: #1E9E6A;
--n2: #14615E; --n2-mark: #4FA3A0;
--n3: #8A5A05; --n3-mark: #E0A62B;
--n4: #B33A22; --n4-mark: #D6452D;
--n5: #8C1F12; --n5-mark: #A5271A;
--nnd: #4C5A55; --nnd-mark: var(--nd);
/* Vertical rhythm of the single-column "Danas kod vas" sheet. */
--ozd-kolona: 62ch;
--ozd-razmak: clamp(1.15rem, 3.2vw, 1.9rem);
}
@media (prefers-color-scheme: dark) {
:root {
--n1: #5FD9A4; --n1-mark: #34C088;
--n2: #6FD8D2; --n2-mark: #4FC4BF;
--n3: #F3C761; --n3-mark: #F1BE49;
--n4: #FFB08F; --n4-mark: #F0674B;
--n5: #FF6A4D; --n5-mark: #E24A32;
--nnd: #AEBDD4; --nnd-mark: var(--nd);
}
}
/* Explicit theme switch (bslib data-bs-theme) wins in BOTH directions. */
:root[data-bs-theme="light"] {
--n1: #16694A; --n1-mark: #1E9E6A;
--n2: #14615E; --n2-mark: #4FA3A0;
--n3: #8A5A05; --n3-mark: #E0A62B;
--n4: #B33A22; --n4-mark: #D6452D;
--n5: #8C1F12; --n5-mark: #A5271A;
--nnd: #4C5A55; --nnd-mark: var(--nd);
}
:root[data-bs-theme="dark"] {
--n1: #5FD9A4; --n1-mark: #34C088;
--n2: #6FD8D2; --n2-mark: #4FC4BF;
--n3: #F3C761; --n3-mark: #F1BE49;
--n4: #FFB08F; --n4-mark: #F0674B;
--n5: #FF6A4D; --n5-mark: #E24A32;
--nnd: #AEBDD4; --nnd-mark: var(--nd);
}
/* Per-level shorthand: one class sets both the text and the marker colour. */
.ozd-n1 { --lvl: var(--n1); --lvl-mark: var(--n1-mark); }
.ozd-n2 { --lvl: var(--n2); --lvl-mark: var(--n2-mark); }
.ozd-n3 { --lvl: var(--n3); --lvl-mark: var(--n3-mark); }
.ozd-n4 { --lvl: var(--n4); --lvl-mark: var(--n4-mark); }
.ozd-n5 { --lvl: var(--n5); --lvl-mark: var(--n5-mark); }
.ozd-nd { --lvl: var(--nnd); --lvl-mark: var(--nnd-mark); }
/* ======================================================================== */
/* §Z1 LIST — jedna kolona, bez mape i grafika iznad preloma */
/* ======================================================================== */
.ozd {
max-width: var(--ozd-kolona);
margin: clamp(0.75rem, 2.5vw, 1.75rem) auto;
padding: 0 clamp(0.9rem, 4vw, 1.4rem) clamp(2rem, 5vw, 3rem);
font-family: var(--font-body);
font-size: 1.0625rem; /* 17 px base: floor is 16, this is the body */
line-height: 1.6;
color: var(--ink);
}
/* Spec 6.4: turquoise means "do this". Decorative turquoise from oko.css is
switched off inside this sheet so the action block is the only one. */
.ozd .oko-neat,
.ozd .oko-card-reticle,
.ozd .oko-sheet::before,
.ozd .oko-sheet::after { border-color: var(--line); }
.ozd > * + * { margin-top: var(--ozd-razmak); }
.ozd-sekcija { margin-top: calc(var(--ozd-razmak) * 1.35); }
.ozd-sekcija-naslov {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.05rem;
letter-spacing: normal;
text-transform: none;
color: var(--ink);
margin: 0 0 0.6rem;
}
/* Row-sized link to another screen ("Sve vrednosti danas ->"). */
.ozd-veza {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: 1.0625rem;
font-weight: 600;
color: var(--oko);
text-decoration: none;
border-bottom: 1px solid color-mix(in srgb, var(--oko) 45%, transparent);
padding-bottom: 1px;
}
.ozd-veza:hover, .ozd-veza:focus { color: var(--oko); border-bottom-color: var(--oko); }
/* ======================================================================== */
/* §Z2 [1] TRAKA MESTA (spec 6.1) */
/* Uspravno na telefonu, jedan red na sirokom ekranu. Nikad skrol. */
/* ======================================================================== */
.ozd-mesto {
padding-bottom: 0.9rem;
border-bottom: 1px solid var(--line);
}
.ozd-mesto-red {
display: flex;
flex-direction: column; /* vertical first — spec 1.5 */
align-items: flex-start;
gap: 0.4rem 0.75rem;
font-size: 1rem;
}
@media (min-width: 620px) {
.ozd-mesto-red { flex-direction: row; flex-wrap: wrap; align-items: baseline; }
}
.ozd-datum { color: var(--ink-2); }
.ozd-okrug {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.25rem;
letter-spacing: normal;
color: var(--ink);
}
.ozd-mesto .form-select,
.ozd-mesto .selectize-input,
.ozd-mesto select.form-control {
font-size: 1rem;
min-height: 2.75rem; /* comfortable target for 60+ hands */
max-width: 100%;
}
.ozd-zakoga { margin-top: 0.75rem; }
.ozd-zakoga > label,
.ozd-zakoga .control-label {
display: block;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 600;
letter-spacing: normal;
text-transform: none;
color: var(--ink);
margin-bottom: 0.35rem;
}
/* G2.8 — micro-caveat sits WITH the place, not in the footer. */
.ozd-ograda-mikro {
margin: 0.35rem 0 0;
font-size: 1rem;
color: var(--ink-2);
}
/* ======================================================================== */
/* §Z3 [2] PRESUDA (spec 6.2) */
/* Archivo 800, najvise dva reda, BEZ razmaknutog verzala. */
/* ======================================================================== */
.ozd-presuda { margin-top: calc(var(--ozd-razmak) * 1.1); }
.ozd-presuda-glavna {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2.1rem, 5.6vw, 3.4rem);
line-height: 1.08;
letter-spacing: normal; /* spec 1.5 — "Nj" must stay one letter */
text-transform: none; /* krupno da, razmaknuti verzal ne */
text-wrap: balance;
color: var(--ink);
margin: 0;
overflow-wrap: break-word;
}
/* Second sentence ("Najvise se tice ...") is quieter but still large. */
.ozd-presuda-grupe {
margin: 0.5rem 0 0;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.25rem, 3vw, 1.7rem);
line-height: 1.25;
letter-spacing: normal;
color: var(--ink-2);
}
/* The verdict is tinted by its level, but the LEVEL WORD lives in the text
itself ("vrlo visok", "nezdrav za osetljive grupe"), so colour adds
emphasis and never carries the message alone. */
.ozd-presuda.ozd-n3 .ozd-presuda-glavna,
.ozd-presuda.ozd-n4 .ozd-presuda-glavna,
.ozd-presuda.ozd-n5 .ozd-presuda-glavna { color: var(--lvl); }
/* Z6 — stale-data verdict is set in the SAME large type, never small and grey. */
.ozd-presuda--nesvezo .ozd-presuda-glavna { color: var(--ink); }
/* ======================================================================== */
/* §Z4 [3] RAZLOG + TRI TACKE DOKAZA (spec 6.3, graft G4.1) */
/* ======================================================================== */
.ozd-razlog {
font-size: 1.125rem;
line-height: 1.6;
color: var(--ink);
margin: 0;
}
/* Evidence points are ROWS, not cards, and only the ones that fired show. */
.ozd-dokazi {
list-style: none;
margin: 1rem 0 0;
padding: 0;
display: flex;
flex-direction: column; /* never a horizontal strip */
gap: 0.7rem;
}
/* Flex, not grid: the ::before marker is itself a box in the flow, and a grid
with a fixed first column collapses the text to one word per line the moment
a module emits one wrapper more than expected. Flex degrades gracefully. */
.ozd-dokaz {
display: flex;
align-items: flex-start;
gap: 0.7rem;
font-size: 1.0625rem;
line-height: 1.55;
color: var(--ink);
}
.ozd-dokaz::before {
content: "";
flex: 0 0 auto;
width: 0.6rem; height: 0.6rem;
margin-top: 0.55em;
border-radius: 50%;
background: var(--lvl, var(--ink-2)); /* text variant: >=3:1 both themes */
/* Shape differs by kind as a second, colour-free channel (see below). */
}
/* The text body takes the rest of the row and is allowed to shrink. */
.ozd-dokaz > * { min-width: 0; }
.ozd-dokaz-telo, .ozd-dokaz > *:last-child { flex: 1 1 auto; }
.ozd-dokaz-oznaka {
font-weight: 700;
color: var(--lvl, var(--ink));
}
.ozd-dokaz-tekst { color: var(--ink); }
/* Kind-specific marker SHAPE — readable with colour switched off. */
.ozd-dokaz--prag::before { border-radius: 50%; } /* dot */
.ozd-dokaz--neobicno::before { border-radius: 1px; transform: rotate(45deg); } /* diamond */
.ozd-dokaz--prvi::before { border-radius: 1px; } /* square */
.ozd-dokaz--nije::before { border-radius: 50%; background: transparent;
border: 2px solid var(--ink-2); } /* ring */
/* G4.2 — the "yes, but it is usual here" sentence, plus its mandatory
companion line. Deliberately NOT tinted: it must not read as reassurance. */
.ozd-dokaz--nije .ozd-dokaz-oznaka,
.ozd-dokaz--neobicno.ozd-dokaz--uobicajeno .ozd-dokaz-oznaka { color: var(--ink-2); }
.ozd-dokaz-dopuna {
display: block;
margin-top: 0.2rem;
font-size: 1rem;
color: var(--ink-2);
}
/* ======================================================================== */
/* §Z5 [4] JEDNA RADNJA (spec 6.4) */
/* Jedini tirkizni element ekrana. Najvise dva pasusa. */
/* ======================================================================== */
.ozd-radnja {
padding: 1rem 1.1rem;
background: color-mix(in srgb, var(--oko) 8%, var(--card));
border: 1px solid var(--line);
border-left: 3px solid var(--oko);
border-radius: 0 10px 10px 0;
}
.ozd-radnja-naslov {
font-family: var(--font-body);
font-size: 1rem;
font-weight: 700;
letter-spacing: normal;
text-transform: none;
color: var(--oko);
margin: 0 0 0.45rem;
}
.ozd-radnja p {
margin: 0;
font-size: 1.0625rem;
line-height: 1.6;
color: var(--ink);
}
.ozd-radnja p + p { margin-top: 0.75rem; }
/* Sentences the epidemiology jury made mandatory (Z4 fluid caveat, the
"check on the neighbour who lives alone" line) must not be styled down. */
.ozd-radnja strong { font-weight: 700; color: var(--ink); }
/* ======================================================================== */
/* §Z6 [5] TRI BROJA (spec 6.5) — USPRAVNO, bez vodoravnog skrola */
/* ======================================================================== */
.ozd-brojevi {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column; /* the whole point: no side-scrolling strip */
gap: 0.85rem;
}
.ozd-broj {
padding: 0.9rem 1rem;
background: var(--card);
border: 1px solid var(--line);
border-left: 3px solid var(--lvl, var(--line-strong, var(--line)));
border-radius: 0 10px 10px 0;
}
.ozd-broj-tema {
display: flex;
align-items: center;
gap: 0.45rem;
font-family: var(--font-body);
font-size: 1rem; /* spec 6.5 says 14 px; section 1.5 floor wins */
font-weight: 700;
letter-spacing: normal;
text-transform: none;
color: var(--ink-2);
margin: 0 0 0.3rem;
}
.ozd-broj-vrednost {
display: block;
font-family: var(--font-mono);
font-weight: 500;
font-size: 1.875rem; /* 30 px */
line-height: 1.15;
letter-spacing: normal;
color: var(--ink);
overflow-wrap: anywhere;
}
.ozd-broj-jed {
font-size: 1.125rem;
color: var(--ink-2);
margin-left: 0.3ch;
}
.ozd-broj-klasa {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: 0.3rem;
font-size: 1.0625rem;
font-weight: 700;
letter-spacing: normal;
color: var(--lvl, var(--ink));
}
.ozd-broj-prevod {
margin: 0.45rem 0 0;
font-size: 1.0625rem;
line-height: 1.55;
color: var(--ink);
}
.ozd-broj-ograda {
margin: 0.4rem 0 0;
font-size: 1rem;
color: var(--ink-2);
}
/* ======================================================================== */
/* §Z7 MERAC NIVOA — drugi kanal uz boju i rec (daltonisti, stampa) */
/* Five segments; the number of filled ones IS the level. Never alone: */
/* .ozd-nivo-rec next to it always spells the class word out. */
/* ======================================================================== */
.ozd-nivo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.ozd-nivo-rec {
font-weight: 700;
font-size: 1.0625rem;
letter-spacing: normal; /* status word: never tracked out */
text-transform: none;
color: var(--lvl, var(--ink));
}
.ozd-meter {
display: inline-flex;
align-items: flex-end;
gap: 2px;
height: 1.05rem;
flex: 0 0 auto;
}
.ozd-meter i {
display: block;
width: 0.34rem;
height: 0.45rem;
/* Border and fill both use --lvl (the TEXT variant): measured worst case
4,64:1 light / 5,23:1 dark, so filled vs unfilled stays >=3:1 (1.4.11).
The saturated --lvl-mark ambers measured as low as 2,04:1 on the card. */
border: 1px solid var(--lvl, var(--ink-2));
border-radius: 1px;
background: transparent;
}
/* Rising staircase: even unfilled, the silhouette encodes position. */
.ozd-meter i:nth-child(2) { height: 0.6rem; }
.ozd-meter i:nth-child(3) { height: 0.75rem; }
.ozd-meter i:nth-child(4) { height: 0.9rem; }
.ozd-meter i:nth-child(5) { height: 1.05rem; }
.ozd-meter i.je { background: var(--lvl, var(--ink-2)); }
/* ======================================================================== */
/* §Z8 „ZASTO OVO ZNAMO" (graft G2.3) — jedino mesto za metod i bazu */
/* ======================================================================== */
.ozd-zasto {
background: var(--paper-2);
border: 1px solid var(--line);
border-radius: 10px;
padding: 0;
}
.ozd-zasto > summary {
cursor: pointer;
list-style: none;
padding: 0.85rem 1rem;
font-family: var(--font-body);
font-size: 1.0625rem;
font-weight: 600;
letter-spacing: normal;
color: var(--ink);
display: flex;
align-items: center;
gap: 0.55rem;
}
.ozd-zasto > summary::-webkit-details-marker { display: none; }
.ozd-zasto > summary::before {
content: "";
width: 0.6rem; height: 0.6rem;
border-right: 2px solid var(--ink-2);
border-bottom: 2px solid var(--ink-2);
transform: rotate(-45deg);
transition: transform 0.15s ease;
flex: 0 0 auto;
}
.ozd-zasto[open] > summary::before { transform: rotate(45deg); }
.ozd-zasto > summary:focus-visible { outline: 2px solid var(--oko); outline-offset: -2px; }
.ozd-zasto-telo { padding: 0 1rem 1rem; }
.ozd-zasto-red {
margin: 0 0 0.6rem;
font-size: 1rem;
line-height: 1.55;
color: var(--ink);
overflow-wrap: anywhere;
}
.ozd-zasto-red:last-child { margin-bottom: 0; }
.ozd-zasto-red .ozd-zasto-broj { font-family: var(--font-mono); color: var(--ink); }
.ozd-zasto-izvor { color: var(--ink-2); }
.ozd-zasto a { color: var(--oko); overflow-wrap: anywhere; }
/* ======================================================================== */
/* §Z9 ISPOD PRELOMA (spec 6.7) */
/* ======================================================================== */
/* 1 — mirne teme, jedan red umesto praznih kartica */
.ozd-mirno {
margin: 0;
padding: 0.75rem 0.95rem;
background: var(--paper-2);
border: 1px solid var(--line);
border-radius: 10px;
font-size: 1.0625rem;
color: var(--ink);
}
/* 2 — SPREMA SE (graft G4.3): 0-3 najave sa imenovanim danom */
.ozd-sprema { padding: 0; }
.ozd-sprema-lista { list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 0.6rem; }
.ozd-sprema-stavka {
display: grid;
grid-template-columns: 1.2rem 1fr;
gap: 0 0.6rem;
align-items: start;
font-size: 1.0625rem;
line-height: 1.55;
padding: 0.65rem 0.85rem;
background: var(--card);
border: 1px solid var(--line);
border-left: 3px solid var(--lvl, var(--line-strong, var(--line)));
border-radius: 0 10px 10px 0;
}
.ozd-sprema-stavka::before {
content: "";
width: 0.62rem; height: 0.62rem;
margin-top: 0.5em;
border-top: 2px solid var(--ink-2);
border-right: 2px solid var(--ink-2);
transform: rotate(45deg);
}
.ozd-sprema-dan { font-weight: 700; color: var(--ink); }
/* 3 — „Juce smo rekli" (prikazuje se samo ako upis postoji) */
.ozd-juce {
margin: 0;
padding: 0.8rem 0.95rem;
border: 1px dashed var(--line);
border-radius: 10px;
font-size: 1.0625rem;
color: var(--ink);
}
.ozd-juce-ishod { font-weight: 700; }
/* 4 — „Vas okrug protiv sebe" (graft G3.1), iz _year skale */
.ozd-protiv {
padding: 1rem 1.1rem;
background: var(--card);
border: 1px solid var(--line);
border-radius: 10px;
}
.ozd-protiv-naslov {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.15rem;
letter-spacing: normal;
color: var(--ink);
margin: 0 0 0.7rem;
}
.ozd-protiv-lista { list-style: none; margin: 0 0 0.75rem; padding: 0;
display: flex; flex-direction: column; gap: 0.4rem; }
.ozd-protiv-red {
display: flex;
flex-wrap: wrap; /* wraps on a phone instead of scrolling */
align-items: baseline;
gap: 0.25rem 0.7rem;
font-size: 1.0625rem;
}
.ozd-protiv-godina {
font-family: var(--font-mono);
font-weight: 500;
color: var(--ink-2);
min-width: 4.5ch;
}
.ozd-protiv-vrednost { font-family: var(--font-mono); color: var(--ink); }
.ozd-protiv-zakljucak { margin: 0; font-size: 1.0625rem; color: var(--ink); }
.ozd-protiv-zakljucak + .ozd-protiv-zakljucak { margin-top: 0.35rem; }
/* 5 — deljivi red (graft G3.5), bez PNG generatora */
.ozd-deli {
display: flex;
flex-direction: column; /* text above button; never a wide row */
gap: 0.6rem;
padding: 0.9rem 1rem;
background: var(--paper-2);
border: 1px solid var(--line);
border-radius: 10px;
}
.ozd-deli-tekst {
margin: 0;
font-size: 1.0625rem;
line-height: 1.55;
color: var(--ink);
overflow-wrap: anywhere;
}
.ozd-deli .btn { align-self: flex-start; font-size: 1rem; white-space: normal; }
/* 6 — pretplata (graft G4.5): jedno polje, bez reci „registracija" */
.ozd-pretplata {
padding: 1rem 1.1rem;
background: var(--card);
border: 1px solid var(--line);
border-radius: 10px;
}
.ozd-pretplata-lede { margin: 0 0 0.7rem; font-size: 1.0625rem; color: var(--ink); }
.ozd-pretplata-red { display: flex; flex-direction: column; gap: 0.6rem; }
@media (min-width: 620px) {
.ozd-pretplata-red { flex-direction: row; align-items: flex-end; flex-wrap: wrap; }
.ozd-pretplata-red > .shiny-input-container { flex: 1 1 16rem; margin-bottom: 0; }
}
.ozd-pretplata .form-control { font-size: 1rem; min-height: 2.75rem; }
.ozd-pretplata .btn { font-size: 1rem; min-height: 2.75rem; white-space: normal; }
.ozd-pretplata-retkost { margin: 0.55rem 0 0; font-size: 1rem; color: var(--ink-2); }
/* 7 — napomena: minimum 16 px, nikad sivo na sivom */
.ozd-napomena {
margin: 0;
padding: 0.9rem 1rem;
border-top: 1px solid var(--line);
font-size: 1rem;
line-height: 1.55;
color: var(--ink); /* full ink, not --ink-2: spec 1.5 */
}
.ozd-napomena a { color: var(--oko); overflow-wrap: anywhere; }
/* ======================================================================== */
/* §Z10 NEMA PODATKA (Z10 / graft G2.2) — postena recenica, ne siva karta */
/* ======================================================================== */
.ozd-nema {
margin: 0;
padding: 0.9rem 1rem;
background: transparent;
border: 1px dashed var(--line);
border-radius: 10px;
font-size: 1.0625rem;
line-height: 1.55;
color: var(--ink);
}
.ozd-nema strong { font-weight: 700; }
/* Generic caveat paragraph used by any block (resolution, model, sources). */
.ozd-ograda {
margin: 0.5rem 0 0;
font-size: 1rem;
line-height: 1.5;
color: var(--ink-2);
}
/* ======================================================================== */
/* §Z11 CIPOVI OSETLJIVIH GRUPA (spec 4) — uspravno slaganje, bez skrola */
/* ======================================================================== */
.ozd-cipovi {
display: flex;
flex-wrap: wrap; /* wraps; never overflow-x */
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
overflow-x: visible;
}
.ozd-cip {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.5rem 0.85rem;
min-height: 2.5rem;
background: var(--card);
/* Interactive control: boundary must hold 3:1 (--line was 1,63:1 on card). */
border: 1px solid var(--line-strong, var(--line));
border-radius: 999px;
font-size: 1rem;
line-height: 1.3;
color: var(--ink);
cursor: pointer;
white-space: normal; /* long labels wrap inside the chip */
}
.ozd-cip input[type="checkbox"] { margin: 0; width: 1.05rem; height: 1.05rem; accent-color: var(--oko); }
.ozd-cip:hover { border-color: var(--oko); }
.ozd-cip:focus-within { outline: 2px solid var(--oko); outline-offset: 2px; }
/* Selected state carries a check mark AND a border weight change, so it is
not signalled by colour alone. */
.ozd-cip.je-izabran {
border-color: var(--oko);
border-width: 2px;
padding: calc(0.5rem - 1px) calc(0.85rem - 1px);
background: color-mix(in srgb, var(--oko) 10%, var(--card));
font-weight: 600;
}
.ozd-cip-obj { color: var(--ink-2); font-size: 1rem; }
/* ======================================================================== */
/* §Z12 RANGLISTA (spec 7) — drugi ekran */
/* ======================================================================== */
.ozd-rang { max-width: var(--ozd-kolona); margin: 0 auto; }
.ozd-rang-naslov {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.4rem, 3.6vw, 2rem);
line-height: 1.2;
letter-spacing: normal;
color: var(--ink);
margin: 0 0 0.6rem;
}
/* Spec 7.3: this text sits ABOVE the table at 16 px, never in a footnote. */
.ozd-rang-uput {
margin: 0 0 1rem;
font-size: 1rem;
line-height: 1.55;
color: var(--ink);
}
.ozd-rang-lista {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column; /* 30 rows down the page, no scroll box */
gap: 2px;
}
.ozd-rang-red {
display: grid;
grid-template-columns: 2.6rem 1fr auto;
grid-template-areas: "mesto okrug vrednost" ". klasa klasa";
gap: 0.15rem 0.7rem;
align-items: baseline;
padding: 0.6rem 0.7rem;
border-bottom: 1px solid var(--line);
font-size: 1.0625rem;
}
@media (min-width: 620px) {
.ozd-rang-red {
grid-template-columns: 2.6rem 1fr auto auto;
grid-template-areas: "mesto okrug vrednost klasa";
}
}
.ozd-rang-mesto {
grid-area: mesto;
font-family: var(--font-mono);
color: var(--ink-2);
}
.ozd-rang-okrug { grid-area: okrug; color: var(--ink); overflow-wrap: anywhere; }
.ozd-rang-vrednost {
grid-area: vrednost;
font-family: var(--font-mono);
color: var(--ink);
white-space: normal;
}
.ozd-rang-klasa {
grid-area: klasa;
font-weight: 700;
letter-spacing: normal;
color: var(--lvl, var(--ink));
}
/* User's own district: sticky and marked by a rule, not only by tint. */
.ozd-rang-red--vas {
position: sticky;
top: 0;
z-index: 2;
background: color-mix(in srgb, var(--oko) 10%, var(--card));
border-left: 3px solid var(--oko);
border-radius: 0 6px 6px 0;
font-weight: 600;
}
/* G3.2 — tie bracket. Districts inside one bracket are drawn as one group,
and the word "izjednačeno" is printed; arrows are suppressed for them. */
.ozd-rang-grupa {
position: relative;
padding-left: 0.85rem;
border-left: 3px solid var(--line);
border-radius: 6px 0 0 6px;
margin: 0.35rem 0;
}
.ozd-rang-izj {
display: inline-block;
margin: 0.15rem 0 0.35rem;
font-size: 1rem;
font-weight: 600;
color: var(--ink-2);
}
.ozd-rang-grupa .ozd-rang-strelica { display: none !important; } /* Z8 */
.ozd-rang-strelica { font-family: var(--font-mono); color: var(--ink-2); }
.ozd-rang-nema {
margin: 1rem 0 0;
padding: 0.9rem 1rem;
border: 1px dashed var(--line);
border-radius: 10px;
font-size: 1.0625rem;
color: var(--ink);
}
/* ======================================================================== */
/* §Z13 IKONE — SVG sprajt app/www/oko-ikone.svg */
/* ======================================================================== */
.oko-ic {
width: 1.35em;
height: 1.35em;
flex: 0 0 auto;
color: inherit; /* symbols stroke with currentColor */
vertical-align: -0.22em;
overflow: visible;
}
.oko-ic--lg { width: 1.9em; height: 1.9em; }
.oko-ic--sm { width: 1.1em; height: 1.1em; }
/* Applies when the sprite is inlined into the page (host CSS reaches inside). */
.oko-ic use, .oko-ic g, .oko-ic path, .oko-ic circle, .oko-ic ellipse, .oko-ic rect {
vector-effect: non-scaling-stroke;
}
/* The sprite container itself must take up no space wherever it is inlined. */
.oko-ikone-sprajt { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Level-tinted icon (still beside a written label, never instead of one). */
.ozd-ikona { color: var(--lvl, var(--ink-2)); }
/* ======================================================================== */
/* §Z14 PRISTUPACNOST — pod ovim se ne ide (spec 1.5) */
/* ======================================================================== */
/* 16 px floor. Every class in this file is already at or above 1rem; what is
caught here are the framework helpers that a module may reach for and that
would otherwise land the "nije zamena za savet lekara" note at 12 px.
Deliberately NOT a blanket `.ozd span` rule — that would outrank the sized
classes above it and blow up the mono readings. */
.ozd small, .ozd .small, .ozd .text-muted, .ozd .form-text,
.ozd .help-block, .ozd .shiny-input-container .help-block,
.ozd-rang small, .ozd-rang .small, .ozd-rang .text-muted, .ozd-rang .form-text {
font-size: 1rem;
line-height: 1.5;
}
/* ...with one documented exception, and it still holds 14 px (spec 6.1). */
.ozd .oko-fineprint, .ozd-fineprint {
font-size: 0.875rem;
line-height: 1.5;
color: var(--ink-2);
}
/* No content scrolls sideways, whatever a module tries. */
.ozd, .ozd-rang, .ozd-brojevi, .ozd-cipovi, .ozd-dokazi,
.ozd-rang-lista, .ozd-sprema-lista { overflow-x: visible; max-width: 100%; }
.ozd img, .ozd svg, .ozd table { max-width: 100%; }
/* Wide tables are the one thing allowed their own scroller — never the page. */
.ozd-scroll-tabela { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Touch targets. */
.ozd .btn, .ozd .form-control, .ozd .form-select, .ozd-cip { min-height: 2.75rem; }
/* Focus ring — turquoise here is navigation, which is a kind of "do this". */
.ozd :focus-visible, .ozd-rang :focus-visible {
outline: 2px solid var(--oko);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.ozd *, .ozd-rang * { transition: none !important; animation: none !important; }
}
/* Greyscale / print: the meter and the words carry everything; tints drop to
ink so nothing depends on hue on paper. */
@media print {
.ozd, .ozd-rang { color: #000; }
.ozd-nivo-rec, .ozd-broj-klasa, .ozd-rang-klasa,
.ozd-presuda-glavna, .ozd-dokaz-oznaka { color: #000 !important; }
.ozd-meter i { border-color: #000; }
.ozd-meter i.je { background: #000; }
.ozd-radnja, .ozd-broj, .ozd-sprema-stavka { border-left-color: #000; }
.ozd-zasto[open] > summary::before { display: none; }
}
/* Forced-colours mode (Windows high contrast): keep the level meter visible. */
@media (forced-colors: active) {
.ozd-meter i { border-color: CanvasText; }
.ozd-meter i.je { background: CanvasText; }
.ozd-radnja, .ozd-broj, .ozd-rang-red--vas { border-left-color: CanvasText; }
}
/* ---------------------------------------------------------------------------
Izbor okruga na mapi i grafička traka tema (naslovna „Danas kod vas").
Mapa je DODATNI ulaz — padajući izbor ostaje jer mapa nije dostupna
tastaturom ni čitačem ekrana. Boja nikad nije jedini kanal: uz tačku statusa
uvek ide i reč.
--------------------------------------------------------------------------- */
.oko-danas-mapa { margin: .9rem 0 .2rem; }
.oko-danas-mapa-uput { font-size: 1rem; margin: 0 0 .4rem; opacity: .85; }
.oko-danas-mapa .oko-map-frame { max-width: 100%; }
.oko-danas-mapa .leaflet-container { cursor: pointer; border-radius: 6px; }
.oko-danas-teme { margin: 2rem 0 1rem; }
.oko-danas-teme-naslov { font-size: 1.15rem; margin: 0 0 .25rem; }
.oko-danas-teme-uput { font-size: 1rem; margin: 0 0 .75rem; opacity: .85; }
/* Mreža se prelama; nikad vodoravni skrol (§1.5). */
.oko-danas-teme-mreza {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
gap: .5rem;
}
.oko-danas-plocica {
display: flex; align-items: center; gap: .5rem;
min-height: 2.75rem; /* >= 44 px dodirna meta */
padding: .55rem .7rem;
border: 1px solid var(--line, #c9d3d1);
border-radius: 8px;
background: var(--card, #fff);
color: inherit; text-decoration: none;
font-size: 1rem; line-height: 1.25;
}
.oko-danas-plocica:hover,
.oko-danas-plocica:focus-visible {
border-color: var(--oko, #0B7266);
outline: 2px solid var(--oko, #0B7266);
outline-offset: 1px;
text-decoration: none;
}
.oko-danas-plocica-tacka {
flex: 0 0 auto; width: .85rem; height: .85rem; border-radius: 50%;
border: 1px solid rgba(0,0,0,.25);
}
.oko-danas-plocica-ime { flex: 1 1 auto; font-weight: 600; }
.oko-danas-plocica-rec { flex: 0 0 auto; font-size: .95rem; opacity: .8; white-space: nowrap; }
@media (max-width: 420px) {
.oko-danas-teme-mreza { grid-template-columns: 1fr 1fr; }
/* Pločica se prelama u dva reda umesto da se reč statusa sakrije: sakrivanje
bi ostavilo boju kao JEDINI kanal, što je zabranjeno (daltonizam, štampa). */
.oko-danas-plocica { flex-wrap: wrap; align-items: flex-start; }
.oko-danas-plocica-ime { flex: 1 1 100%; order: 2; }
.oko-danas-plocica-rec { flex: 1 1 100%; order: 3; white-space: normal; }
}