/* ==========================================================================
   Stanoskop — stil.css (identitet od 12.10.2026)
   Karakter: laboratorijski nalaz. Papir, tanke linije, brojevi u uskom
   rezu. Jedna boja za mere i radnje (petrolej), tri semanticke boje koje
   uvek idu uz rec.

   Fontovi se ucitavaju iz <head> (web/layout.py) preko <link> sa
   preconnect, NE iz @import - @import blokira iscrtavanje i na slabom
   telefonu se vidi kao prazna strana.
     IBM Plex Sans 400            — tekst
     IBM Plex Sans Condensed 600  — naslovi, brojevi, dugmad, oznake

   ZNAK ispred "Stanoskop" se crta iz ovog fajla (.vrh .ime::before), pa
   HTML ostaje isti.
   ========================================================================== */

/* ---------- 1. Ugovor: promenljive (imena se ne menjaju) ---------- */
:root {
  --papir: #F2F0EC;        /* podloga strane */
  --povrsina: #FFFFFF;     /* kartice, polja, grafik */
  --tekst: #14171A;
  --tiho: #4F565E;         /* 7,6:1 na beloj — nikad svetlija */
  --linija: #D7D3CC;

  --mera: #0B5F73;         /* izmereni brojevi i radnje; grafik crta ovom bojom */
  --mera-tiho: #D8EEF4;

  --dobro: #0B6E47;   --dobro-tiho: #DDF0E6;
  --paznja: #7A4E00;  --paznja-tiho: #FAEBCE;
  --lose: #9B2C1C;    --lose-tiho: #F8E1DC;

  --f-naslov: "IBM Plex Sans Condensed", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-tekst: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --r: 6px;                /* ugao: tesan, ovo je izvestaj */
  --p: 20px;               /* unutrasnji razmak kartice */

  /* Dodatne (nisu deo ugovora, koristi ih samo ovaj fajl) */
  --linija-jaka: #7C838B;  /* ivice polja i dugmadi: 3,9:1 */
  --mera-na: #FFFFFF;      /* tekst na punoj --mera podlozi */
  --znak: url("data:image/svg+xml,<svg viewBox='0 0 86 86' xmlns='http://www.w3.org/2000/svg'><rect width='30' height='30' rx='4'/><rect x='44' width='30' height='30' rx='4'/><rect y='44' width='30' height='30' rx='4'/><rect x='43.5' y='43.5' width='39' height='39' rx='2.5' fill='none' stroke='%23000' stroke-width='7'/></svg>");

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papir: #0F1114;
    --povrsina: #17191C;
    --tekst: #F2F0EC;
    --tiho: #B6B5B3;
    --linija: #2A3038;

    --mera: #3DD1EE;
    --mera-tiho: #0A2630;

    --dobro: #2FD08C;   --dobro-tiho: #10281F;
    --paznja: #F5A524;  --paznja-tiho: #2A1E08;
    --lose: #FF8A75;    --lose-tiho: #2E1310;

    --linija-jaka: #7C838B;
    --mera-na: #0F1114;

    color-scheme: dark;
  }
}

/* ---------- 2. Osnova ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  padding-inline: 16px;
  background: var(--papir);
  color: var(--tekst);
  font-family: var(--f-tekst);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  overflow-wrap: break-word;
}

.okvir { max-width: 760px; margin: 0 auto; }
.mera { max-width: 62ch; }

h1, h2, h3 {
  font-family: var(--f-naslov);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.12;
  text-wrap: balance;
  margin: 0 0 12px;
}
h1 { font-size: clamp(2rem, 7vw, 3.25rem); letter-spacing: -0.02em; line-height: 1.04; }
h2 { font-size: clamp(1.4rem, 4vw, 1.75rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 14px; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong, b, th, dt { font-family: var(--f-naslov); font-weight: 600; }

a {
  color: var(--mera);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 2px; }

.tiho { color: var(--tiho); }
.sitno { font-size: 15px; line-height: 1.5; color: var(--tiho); }

/* Brojevi: uvek u koloni */
.broj, td, .cena, .grafik text {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.broj, .cena { font-family: var(--f-naslov); font-weight: 600; }

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 8px 16px 8px 0; border-top: 1px solid var(--linija); vertical-align: top; }

/* Fokus: uvek vidljiv, nikad samo na mis */
.dugme:focus-visible, button:focus-visible, a:focus-visible,
input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--mera);
  outline-offset: 2px;
}

/* ---------- 3. Zaglavlje i podnozje ---------- */
.vrh {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 24px;
  padding: 14px 0;
  margin-bottom: 40px;
  border-bottom: 2px solid var(--tekst);
}

/* Znak se crta iz CSS-a, pa HTML ostaje isti: <a class="ime">Stanoskop</a> */
.vrh .ime {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-right: auto;
  font-family: var(--f-naslov);
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  color: var(--tekst);
  text-decoration: none;
}
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .vrh .ime::before {
    content: "";
    flex: none;
    width: 26px;
    height: 26px;
    background: currentColor;
    -webkit-mask: var(--znak) center / contain no-repeat;
    mask: var(--znak) center / contain no-repeat;
  }
}

.vrh nav { display: flex; flex-wrap: wrap; gap: 0 4px; margin-left: -12px; }
.vrh nav a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  font-family: var(--f-naslov);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--tekst);
  text-decoration: none;
}
.vrh nav a:hover,
.vrh nav a:focus-visible,
.vrh nav a[aria-current] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

footer.dno {
  margin: 64px 0 0;
  padding: 24px 0 48px;
  border-top: 2px solid var(--tekst);
  color: var(--tiho);
  font-size: 15px;
  line-height: 1.55;
}
footer.dno p { margin: 0 0 10px; max-width: 62ch; }
footer.dno a { color: var(--tekst); display: inline-block; padding-block: 8px; }

/* ---------- 4. Radnje ---------- */
.dugme, button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 12px 24px;
  border: 1px solid var(--mera);
  border-radius: var(--r);
  background: var(--mera);
  color: var(--mera-na);
  font-family: var(--f-naslov);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.dugme:hover, button:hover { text-decoration: none; filter: brightness(1.08); }
.dugme:active, button:active { filter: none; opacity: .85; }

.dugme.drugo, button.drugo {
  background: var(--povrsina);
  color: var(--tekst);
  border-color: var(--linija-jaka);
}
.dugme.drugo:hover, button.drugo:hover { filter: none; border-color: var(--tekst); }

.dugme.opasno, button.opasno {
  background: var(--povrsina);
  color: var(--lose);
  border-color: var(--lose);
}
.dugme.opasno:hover, button.opasno:hover { filter: none; background: var(--lose-tiho); }

button:disabled, .dugme[aria-disabled="true"] { opacity: .5; cursor: not-allowed; filter: none; }

/* ---------- 5. Unos ---------- */
label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--f-naslov);
  font-weight: 600;
  font-size: 18px;
}

input[type=url], input[type=text], input[type=email], input[type=number], select {
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 12px 16px;
  border: 1px solid var(--linija-jaka);
  border-radius: var(--r);
  background: var(--povrsina);
  color: var(--tekst);
  font-family: var(--f-tekst);
  font-size: 18px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
input[type=url], input[type=text], input[type=email], input[type=number] { -webkit-appearance: none; appearance: none; }
input::placeholder { color: var(--tiho); opacity: 1; }
input:focus, select:focus { border-color: var(--mera); }

form { margin: 0 0 40px; }
form .sitno { margin-top: 8px; }
.kartica form, .dugmad form, .red form { margin: 0; }

/* Polje za link je najveci element strane */
input[type=url] { min-height: 64px; font-size: 20px; border-width: 2px; border-color: var(--tekst); }

/* ---------- 6. Raspored u redu ---------- */
.red { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.red > * { flex: 0 1 auto; min-width: 0; }
.red .raste { flex: 1 1 260px; }
.red > .dugme, .red > button { min-height: 64px; padding-inline: 32px; }
@media (max-width: 480px) {
  .red > .dugme, .red > button { flex: 1 1 100%; }
}

/* ---------- 7. Izbor (skriven input + label kao dugme) ---------- */
.izbor { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.izbor input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.izbor label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--linija-jaka);
  border-radius: var(--r);
  background: var(--povrsina);
  color: var(--tekst);
  font-family: var(--f-naslov);
  font-weight: 600;
  font-size: 17px;
  cursor: pointer;
}
/* Izabrano: puna boja I kvacica — stanje se ne cita samo iz boje */
.izbor input:checked + label {
  background: var(--mera);
  border-color: var(--mera);
  color: var(--mera-na);
}
.izbor input:checked + label::before {
  content: "";
  width: 11px;
  height: 6px;
  margin-top: -4px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
.izbor input:focus-visible + label { outline: 3px solid var(--mera); outline-offset: 2px; }

/* ---------- 8. Kartica stana ---------- */
.kartica {
  margin: 0 0 16px;
  padding: var(--p);
  border: 1px solid var(--linija);
  border-radius: var(--r);
  background: var(--povrsina);
}
.kartica .glava {
  margin-bottom: 6px;
  font-family: var(--f-naslov);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
}
.kartica .cena {
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.kartica .dugmad {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--linija);
}
.kartica .dugmad .dugme, .kartica .dugmad button { min-height: 48px; padding: 8px 16px; font-size: 17px; }

/* ---------- 9. Oznake ---------- */
.oznake { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.oznaka {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 2px 10px;
  border: 1px solid var(--linija-jaka);
  border-radius: 3px;
  background: var(--povrsina);
  color: var(--tekst);
  font-family: var(--f-naslov);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.25;
}
.oznaka.dobro  { color: var(--dobro);  background: var(--dobro-tiho);  border-color: currentColor; }
.oznaka.paznja { color: var(--paznja); background: var(--paznja-tiho); border-color: currentColor; }
.oznaka.lose   { color: var(--lose);   background: var(--lose-tiho);   border-color: currentColor; }

/* ---------- 10. Izvestaj ---------- */
/* Svaki odeljak: tanka linija iznad, naslov, pa redovi kao u nalazu. */
.odeljak {
  margin: 0 0 8px;
  padding: 20px 0 16px;
  border-top: 1px solid var(--linija);
}
.odeljak h2 {
  margin-bottom: 10px;
  font-size: 1.3rem;
  letter-spacing: 0;
}
.odeljak ul { margin: 0; padding: 0; list-style: none; }
.odeljak li {
  margin: 0;
  padding: 8px 0;
  border-top: 1px solid var(--linija);
  font-variant-numeric: tabular-nums lining-nums;
}
.odeljak li:first-child { border-top: 0; padding-top: 0; }

/* Grafik cene: SVG crta iz var(--mera), var(--tekst), var(--tiho) */
.grafik-okvir {
  margin: 0 0 24px;
  padding: 16px 12px;
  border: 1px solid var(--linija);
  border-radius: var(--r);
  background: var(--povrsina);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.grafik { display: block; width: 100%; height: auto; min-width: 300px; }
.grafik text { font-family: var(--f-naslov); }

/* ---------- 11. Isticanje ---------- */
/* Bez trake levo: ceo okvir, tonirana podloga. */
.istaknuto, .greska, .deli {
  margin: 0 0 20px;
  padding: 16px var(--p);
  border: 1px solid var(--mera);
  border-radius: var(--r);
  background: var(--mera-tiho);
  color: var(--tekst);
}
.istaknuto strong, .greska strong { display: block; margin-bottom: 4px; }
.greska {
  border-color: var(--paznja);
  background: var(--paznja-tiho);
}
.deli {
  margin: 32px 0 0;
  border-style: dashed;
  border-color: var(--linija-jaka);
  background: var(--povrsina);
  font-size: 16px;
}
.deli code {
  display: block;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 3px;
  background: var(--papir);
  font-family: var(--f-naslov);
  font-weight: 600;
  font-size: 16px;
  word-break: break-all;
  -webkit-user-select: all;
  user-select: all;
}

/* Prazno stanje: levo poravnato, isprekidan okvir */
.prazno {
  padding: 32px var(--p);
  border: 1px dashed var(--linija-jaka);
  border-radius: var(--r);
  background: var(--povrsina);
  text-align: left;
}
.prazno h2 { font-size: 1.4rem; }

/* ---------- 12. Tri broja kao dokaz ---------- */
.dokazi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}
@media (max-width: 620px) {
  .dokazi { grid-template-columns: 1fr; gap: 0; }
}
.dokaz {
  padding: 14px 0 0;
  border-top: 2px solid var(--tekst);
}
@media (max-width: 620px) {
  .dokaz { padding-bottom: 14px; }
}
.dokaz .broj {
  display: block;
  font-family: var(--f-naslov);
  font-weight: 600;
  font-size: clamp(2rem, 6vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--mera);
}
.dokaz .sta {
  display: block;
  margin-top: 6px;
  color: var(--tiho);
  font-size: 16px;
  line-height: 1.45;
}

/* ---------- 13. Koraci ---------- */
ol.koraci { list-style: none; counter-reset: k; margin: 0 0 40px; padding: 0; }
ol.koraci > li {
  counter-increment: k;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 0 12px;
  min-width: 0;
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid var(--linija);
}
ol.koraci > li:first-child { border-top: 2px solid var(--tekst); }
ol.koraci > li::before {
  content: counter(k);
  font-family: var(--f-naslov);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--mera);
}

/* ---------- 14. Cene: sta je besplatno, sta se placa ----------
   Covek koji dodje sa reklame prvo pita koliko kosta. Dva stupca jedan
   do drugog odgovaraju na to bez citanja: levo besplatno, desno cena.
   Na telefonu padaju jedan pod drugi - besplatno prvo. */
.cene { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 10px; }
.cene .kartica { margin: 0; }
.cene .iznos {
  font-family: var(--f-naslov);
  font-weight: 600;
  font-size: 2.1rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.cene .za { margin: 2px 0 0; }
.cene ul { margin: 14px 0 0; padding-left: 20px; }
.cene li { margin: 0 0 7px; }
@media (max-width: 560px) {
  .cene { grid-template-columns: 1fr; }
}

/* ---------- 15. Pokret i stampa ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Izvestaj se stampa kao nalaz: bez navigacije i dugmadi */
@media print {
  body { background: #fff; color: #000; padding: 0; }
  .vrh nav, .dugme, button, .deli, footer.dno a { display: none !important; }
  .kartica, .grafik-okvir, .istaknuto, .greska { break-inside: avoid; }
}