/* Notna hranilnica — ista zelena družina kot ostale aplikacije v tej zbirki. */
:root {
  --zelena: #2FA37C;
  --zelena-temna: #1F7059;
  --zelena-svetla: #6FCF97;
  --rdeca: #E05C5C;
  --rdeca-temna: #B91C1C;

  --ozadje: linear-gradient(180deg, #F2FAF6 0%, #FFFFFF 100%);
  --povrsina: #FFFFFF;
  --povrsina-2: #F2FAF6;
  --povrsina-3: #E8F4EE;
  --rob: #E3E7E5;
  --besedilo: #1A1A2E;
  --besedilo-2: #55605C;
  --besedilo-3: #8A9591;
  --senca: 0 12px 30px -8px rgba(20,50,40,0.14);
  --senca-mehka: 0 1px 3px rgba(31,112,89,0.06);

  --r-mala: 10px;
  --r-srednja: 14px;
  --r-velika: 20px;

  /* Najmanjša tarča za prst. Vse, kar se tapka, mora doseči to mero. */
  --tarca: 44px;
  --sirina-vsebine: 900px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ozadje: linear-gradient(180deg, #101714 0%, #0C1210 100%);
    --povrsina: #182320;
    --povrsina-2: #1E2C28;
    --povrsina-3: #24352F;
    --rob: #2A3B36;
    --besedilo: #ECF3F0;
    --besedilo-2: #B7C4BF;
    --besedilo-3: #8A9994;
    --senca: 0 12px 30px -8px rgba(0,0,0,0.5);
    --senca-mehka: 0 1px 3px rgba(0,0,0,0.25);
    --zelena-svetla: #7FDCA8;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overscroll-behavior-y: none; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--ozadje);
  background-attachment: fixed;
  color: var(--besedilo);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font-family: inherit; cursor: pointer; color: inherit; }
input, textarea, select { font-family: inherit; font-size: 1rem; }

/* Ikone so risane črte in sedijo v vrstici z besedilom. */
.ikona-svg { display: block; flex: none; }
.ikona-svg + span, .ikona-svg + * { min-width: 0; }

/* ===== GUMBI ===== */
.gumb {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: var(--tarca); padding: 0.6rem 1rem;
  border: 1px solid var(--rob); border-radius: var(--r-mala);
  background: var(--povrsina-2); color: var(--besedilo-2);
  font-size: 0.92rem; font-weight: 600; white-space: nowrap;
}
.gumb:hover { border-color: var(--zelena); color: var(--zelena); }
.gumb--glavni { background: var(--zelena); border-color: var(--zelena); color: #fff; }
.gumb--glavni:hover { background: var(--zelena-temna); border-color: var(--zelena-temna); color: #fff; }
.gumb--nevarno { background: var(--rdeca); border-color: var(--rdeca); color: #fff; }
.gumb--nevarno:hover { background: var(--rdeca-temna); border-color: var(--rdeca-temna); color: #fff; }
.gumb--sirok { width: 100%; }

.ikona-gumb {
  display: grid; place-items: center; flex: none;
  width: var(--tarca); height: var(--tarca);
  border: 1px solid var(--rob); border-radius: var(--r-mala);
  background: var(--povrsina-2); color: var(--besedilo-2);
}
.ikona-gumb:hover { border-color: var(--zelena); color: var(--zelena); }
.ikona-gumb:active { transform: scale(0.95); }

/* ===== GLAVA ===== */
.glava {
  position: sticky; top: 0; z-index: 20;
  background: var(--povrsina);
  border-bottom: 1px solid var(--rob);
  padding: calc(0.6rem + env(safe-area-inset-top)) 1rem 0.7rem;
}
.glava-notranjost { max-width: var(--sirina-vsebine); margin: 0 auto; }
.glava-vrh { display: flex; align-items: center; gap: 0.45rem; }

/* Nazaj/naprej po zgodovini — na dotičnih napravah ju ni (sistemska gesta,
   pa tudi prostora v glavi za štiri gumbe ni). */
.zgodovina { display: none; gap: 0.2rem; flex: none; }
@media (min-width: 620px) {
  .zgodovina { display: flex; }
}
.zgodovina .ikona-gumb:disabled { opacity: 0.35; cursor: default; }
.zgodovina .ikona-gumb:disabled:hover { border-color: var(--rob); color: var(--besedilo-2); }
.naslov-app {
  font-size: 1.02rem; font-weight: 700; margin: 0;
  display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0;
  color: var(--besedilo);
}
.naslov-app .ikona-svg { color: var(--zelena); }
.naslov-app span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.iskalnik { position: relative; margin-top: 0.6rem; }
.iskalnik input {
  width: 100%; min-height: var(--tarca);
  padding: 0.6rem 2.9rem 0.6rem 2.6rem;
  border: 1px solid var(--rob); border-radius: var(--r-srednja);
  background: var(--povrsina-2); color: var(--besedilo);
}
.iskalnik input:focus { outline: 2px solid var(--zelena); outline-offset: -1px; border-color: transparent; }
/* Brskalnik <input type="search"> riše svoj križec — poleg našega bi bila dva. */
.iskalnik input::-webkit-search-cancel-button,
.iskalnik input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.iskalnik .lupa {
  position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%);
  color: var(--besedilo-3); pointer-events: none;
}
.iskalnik .pocisti {
  position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 2rem; height: 2rem;
  border: 0; border-radius: 50%; background: var(--povrsina-3); color: var(--besedilo-2);
}

/* ===== DROBTINICE ===== */
.drobtinice {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.1rem;
  max-width: var(--sirina-vsebine); margin: 0 auto;
  padding: 0.7rem 1rem 0; font-size: 0.85rem;
}
.drobtinice button {
  display: inline-flex; align-items: center; gap: 0.3rem;
  border: 0; background: none; color: var(--zelena); font-size: 0.85rem;
  padding: 0.3rem 0.4rem; border-radius: 7px; font-weight: 600;
}
.drobtinice button:hover:not(:disabled) { background: var(--povrsina-3); }
.drobtinice button:disabled { color: var(--besedilo); cursor: default; }
.drobtinice .locilo { color: var(--besedilo-3); padding: 0 0.1rem; }

/* ===== SEZNAM ===== */
.vsebina {
  max-width: var(--sirina-vsebine); margin: 0 auto;
  padding: 0.6rem 1rem calc(6.5rem + env(safe-area-inset-bottom));
}
.skupina-naslov {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--besedilo-3); margin: 1.1rem 0 0.5rem;
}
.skupina-naslov:first-child { margin-top: 0.4rem; }
/* Števec je bil navaden `inline` span: njegova višina je padla iz privzete
   višine vrstice pri 0,7 rem, oblazinjenje pa je prištelo še nekaj čez. Tablet
   je zato stal nižje od velikih tiskanih črk ob sebi in bil videti obešen.
   Zdaj je inline-flex s FIKSNO višino in `line-height: 1` — številka sedi na
   sredini tablete, tableta pa na sredini vrstice. `letter-spacing` naslova se ne
   deduje (razmik za zadnjo črko bi odrinil tableto v desno), številke pa so
   enakoširoke, da „9" in „22" enako odmakneta rob. */
.stevec {
  display: inline-flex; align-items: center; justify-content: center;
  height: 1.15rem; min-width: 1.5rem; padding: 0 0.4rem;
  background: var(--povrsina-3); color: var(--besedilo-2);
  border-radius: 999px; font-size: 0.7rem; line-height: 1; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.vrstica {
  display: flex; align-items: center; gap: 0.15rem;
  background: var(--povrsina); border: 1px solid var(--rob);
  border-radius: var(--r-srednja); padding: 0.35rem 0.4rem 0.35rem 0.7rem;
  margin-bottom: 0.45rem; box-shadow: var(--senca-mehka);
  transition: border-color 0.12s ease, background 0.12s ease;
}
.vrstica:hover { border-color: var(--zelena-svetla); }
.vrstica.izbrana { border-color: var(--zelena); background: var(--povrsina-3); }
.vrstica .odpri {
  flex: 1; min-width: 0; min-height: var(--tarca);
  display: flex; align-items: center; gap: 0.7rem;
  border: 0; background: none; text-align: left; padding: 0.3rem 0;
}
.vrstica .ikona { flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 9px; }
.ikona--mapa { color: var(--zelena); background: var(--povrsina-3); }
.ikona--nota { color: var(--besedilo-2); }
.vrstica.izbrana .ikona--nota { color: var(--zelena); }
.vrstica .telo { flex: 1; min-width: 0; }
/* display:block je nujen — na inline <span> se text-overflow ne uveljavi in
   dolg naslov steče pod gumbe namesto da bi se skrajšal s tremi pikami. */
.vrstica .ime {
  display: block; font-weight: 600; font-size: 0.94rem; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vrstica .pod {
  display: block; font-size: 0.775rem; color: var(--besedilo-3); margin-top: 0.1rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vrstica .akcije { display: flex; gap: 0.1rem; flex: none; }
.vrstica .akcije button {
  display: grid; place-items: center;
  width: var(--tarca); height: var(--tarca);
  border: 0; background: none; color: var(--besedilo-3); border-radius: 9px;
}
.vrstica .akcije button:hover { background: var(--povrsina-3); color: var(--zelena); }

.prazno {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; color: var(--besedilo-3); padding: 3.5rem 1rem;
  font-size: 0.92rem; line-height: 1.55;
}
.prazno .ikona-svg { color: var(--besedilo-3); opacity: 0.45; margin-bottom: 0.9rem; }
.prazno p { margin: 0.15rem 0; }
.prazno .drobno { font-size: 0.83rem; opacity: 0.85; }
.prazno--sredina { padding-top: 38vh; }

/* ===== PLAVAJOČI GUMB ===== */
.fab {
  position: fixed; z-index: 30;
  right: max(1rem, calc(50% - var(--sirina-vsebine) / 2 + 1rem));
  bottom: calc(1.1rem + env(safe-area-inset-bottom));
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: var(--zelena); color: #fff; border: 0;
  display: grid; place-items: center;
  box-shadow: 0 8px 22px rgba(47,163,124,0.42);
}
.fab:hover { background: var(--zelena-temna); }
.fab:active { transform: scale(0.93); }

/* ===== VRSTICA IZBORA ===== */
.izbor-vrstica {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--povrsina); border-top: 1px solid var(--rob);
  padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 24px rgba(0,0,0,0.1);
}
.izbor-notranjost {
  max-width: var(--sirina-vsebine); margin: 0 auto;
  display: flex; align-items: center; gap: 0.6rem;
}
.izbor-vrstica .stevilo { font-weight: 700; font-size: 0.9rem; flex: 1; min-width: 0; }

/* ===== POTEG IN SPUST ===== */
.spust {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(16,40,32,0.55); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 1.5rem;
  animation: pojaviSe 0.12s ease;
}
.spust-okvir {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--povrsina); border: 2.5px dashed var(--zelena);
  border-radius: var(--r-velika); padding: 2.5rem 2rem;
  max-width: 420px; width: 100%; box-shadow: var(--senca);
}
.spust-okvir .ikona-svg { color: var(--zelena); margin-bottom: 0.8rem; }
.spust-naslov { margin: 0 0 0.35rem; font-size: 1.15rem; font-weight: 700; color: var(--besedilo); }
.spust-pod { margin: 0; font-size: 0.87rem; color: var(--besedilo-2); line-height: 1.5; }

/* Spustno polje v modalu „Dodaj nove note" — isti jezik kot celozaslonska
   prekrivka (črtkan zelen okvir), le manjše in vedno na očeh. */
.spust-zona {
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  width: 100%; margin: 0.2rem 0 0.9rem; padding: 1.1rem 1rem;
  border: 2px dashed var(--rob); border-radius: var(--r-srednja);
  background: var(--povrsina-2); color: var(--besedilo-2); text-align: center;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.spust-zona .ikona-svg { color: var(--zelena); margin-bottom: 0.35rem; }
.spust-zona .sz-naslov { font-weight: 700; font-size: 0.95rem; color: var(--besedilo); }
.spust-zona small { font-size: 0.8rem; color: var(--besedilo-3); }
.spust-zona:hover, .spust-zona.nad { border-color: var(--zelena); background: var(--povrsina-3); }
.spust-zona.nad { border-style: solid; }

/* ===== MODAL ===== */
.zavesa {
  position: fixed; inset: 0; background: rgba(10,25,20,0.5); z-index: 50;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0.7rem; backdrop-filter: blur(2px);
  animation: pojaviSe 0.14s ease;
}
@media (min-width: 640px) { .zavesa { align-items: center; padding: 1.5rem; } }
.modal {
  background: var(--povrsina); border-radius: var(--r-velika); width: 100%; max-width: 460px;
  max-height: 86vh; overflow-y: auto; box-shadow: var(--senca);
  padding: 1.2rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom));
  animation: zdrsniGor 0.18s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@media (min-width: 640px) { .modal { animation: pojaviSe 0.16s ease; } }
.modal h2 { margin: 0 0 0.3rem; font-size: 1.08rem; }
.modal-pod { margin: 0 0 0.9rem; font-size: 0.86rem; color: var(--besedilo-2); line-height: 1.5; }
.modal label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--besedilo-2); margin: 0.85rem 0 0.3rem; }
.modal input[type=text], .modal input[type=password], .modal textarea {
  width: 100%; min-height: var(--tarca); padding: 0.6rem 0.75rem;
  border: 1px solid var(--rob); border-radius: var(--r-mala);
  background: var(--povrsina-2); color: var(--besedilo);
}
.modal input:focus, .modal textarea:focus { outline: 2px solid var(--zelena); outline-offset: -1px; }
.modal textarea { min-height: 4.5rem; resize: vertical; }
.modal-gumbi { display: flex; gap: 0.5rem; margin-top: 1.2rem; }
.modal-gumbi .gumb { flex: 1; }

.opozorilo {
  display: flex; align-items: flex-start; gap: 0.5rem;
  background: rgba(224,92,92,0.1); border: 1px solid rgba(224,92,92,0.28);
  color: var(--rdeca-temna); padding: 0.65rem 0.75rem; border-radius: var(--r-mala);
  font-size: 0.85rem; line-height: 1.45; margin-top: 0.8rem;
}
.opozorilo .ikona-svg { margin-top: 0.1rem; }
@media (prefers-color-scheme: dark) { .opozorilo { color: #F0A5A5; } }

.izid { list-style: none; margin: 1rem 0 0; padding: 0; font-size: 0.9rem; color: var(--besedilo-2); }
.izid li { padding: 0.3rem 0; border-bottom: 1px solid var(--rob); }
.izid li:last-child { border-bottom: 0; }
.izid strong { color: var(--zelena); font-size: 1.05rem; }
.izid-napaka { color: var(--rdeca); }

/* Meni v modalu */
/* Vrstice z opisom so višje od tistih brez — brez enotne mere so razmaki v meniju
   neenakomerni. Fiksna višina jih poravna, ikona pa se poravna z naslovom, ne s
   sredino celotne vrstice. */
.meni-vrstica {
  display: flex; align-items: center; gap: 0.8rem; width: 100%;
  min-height: 3.4rem; padding: 0.7rem 0.6rem;
  border: 0; background: none; color: var(--besedilo);
  border-radius: var(--r-mala); font-size: 0.95rem; text-align: left;
}
.modal .meni-vrstica + .meni-vrstica { margin-top: 2px; }
.meni-vrstica:hover { background: var(--povrsina-2); }
.meni-vrstica .mi { display: grid; place-items: center; width: 1.7rem; height: 1.45rem; flex: none; color: var(--besedilo-2); }
.meni-vrstica .mv-naslov { display: block; font-weight: 500; }
.meni-vrstica.nevarno { color: var(--rdeca); }
.meni-vrstica.nevarno .mi { color: var(--rdeca); }
.meni-vrstica .mv-naslov { line-height: 1.45; }
.meni-vrstica small { display: block; color: var(--besedilo-3); font-size: 0.76rem; margin-top: 0.05rem; line-height: 1.35; }

/* Izbirnik ciljne mape */
.drevo-izbira {
  border: 1px solid var(--rob); border-radius: var(--r-mala);
  max-height: 42vh; overflow-y: auto; padding: 0.25rem; background: var(--povrsina-2);
}
.drevo-izbira button {
  display: flex; align-items: center; gap: 0.45rem; width: 100%; text-align: left;
  border: 0; background: none; color: var(--besedilo);
  padding: 0.55rem 0.6rem; border-radius: 8px; font-size: 0.9rem; min-height: 2.4rem;
}
.drevo-izbira button .ikona-svg { color: var(--besedilo-3); }
.drevo-izbira button:hover:not(:disabled) { background: var(--povrsina-3); }
.drevo-izbira button.aktivna { background: var(--zelena); color: #fff; font-weight: 600; }
.drevo-izbira button.aktivna .ikona-svg { color: #fff; }
.drevo-izbira button:disabled { color: var(--besedilo-3); cursor: not-allowed; }
.drevo-izbira small { opacity: 0.7; }

/* ===== NAPREDEK ===== */
.napredek-crta { height: 7px; background: var(--povrsina-3); border-radius: 999px; overflow: hidden; margin: 1rem 0 0.5rem; }
.napredek-crta div { height: 100%; background: var(--zelena); border-radius: 999px; transition: width 0.25s ease; }
.napredek-besedilo { font-size: 0.83rem; color: var(--besedilo-2); text-align: center; }

/* ===== BRALNIK ===== */
.bralnik {
  position: fixed; inset: 0; z-index: 60;
  background: var(--povrsina-2); display: flex; flex-direction: column;
}
.bralnik-glava {
  display: flex; align-items: center; gap: 0.5rem; flex: none;
  padding: calc(0.55rem + env(safe-area-inset-top)) 0.7rem 0.55rem;
  border-bottom: 1px solid var(--rob); background: var(--povrsina);
}
.bralnik-naslov { flex: 1; min-width: 0; }
.bn-ime { display: block; font-weight: 600; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-pod { display: block; font-size: 0.74rem; color: var(--besedilo-3); margin-top: 0.05rem; }

.zoom { display: flex; align-items: center; gap: 2px; background: var(--povrsina-2); border-radius: var(--r-mala); padding: 2px; flex: none; }
.zoom button {
  display: grid; place-items: center; min-width: var(--tarca); height: 2.4rem;
  border: 0; background: none; color: var(--besedilo-2); border-radius: 8px;
  font-size: 0.78rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.zoom button:hover { background: var(--povrsina); color: var(--zelena); }
.zoom button:nth-child(2) { min-width: 3.6rem; }
/* Povečave na dotik ni.
   Na telefonu in tablici se stran že tako prilega širini zaslona, ščipanje s prsti
   pa je bilo tam ves čas nezanesljivo: brskalniku smo pinch vzeli iz rok, sami pa
   smo znali le raztegniti CSS in ob spustu prstov na novo izrisati — vmes se je
   slika razmazala, ob hitrem gibu pa se merilo sploh ni ujelo. Namesto krpanja
   gumbe in geste na dotiku odstranimo; branje not povečave ne potrebuje.
   Na miški povečava ostane (gumbi + ctrl + kolešček), ker tam dela zanesljivo. */
@media (pointer: coarse) {
  .zoom { display: none; }
}

/* Telo je dvostolpično: trak sličic in okno s stranmi. */
.bralnik-telo { flex: 1; display: flex; min-height: 0; }
.bralnik-okno {
  flex: 1; overflow: auto; -webkit-overflow-scrolling: touch;
  /* Med ščipanjem prestrežemo povečavo sami, zato brskalniku prepustimo le drsenje. */
  touch-action: pan-x pan-y;
}
.bralnik-platno {
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  padding: 0.7rem 0 1.5rem; will-change: transform;
}
.stran {
  background: #fff; border-radius: 3px; box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  overflow: hidden; max-width: 100%;
}
.stran canvas { display: block; }
.stran-napaka { display: grid; place-items: center; color: var(--rdeca); font-size: 0.85rem; padding: 2rem 1rem; background: var(--povrsina); }
.bralnik-slika { display: block; max-width: 100%; height: auto; margin: 0 auto; background: #fff; }
.bralnik-nalaganje {
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  padding-top: 30vh; color: var(--besedilo-3); font-size: 0.9rem;
}
.bralnik-nalaganje .ikona-svg { opacity: 0.5; animation: utrip 1.4s ease-in-out infinite; }
.bralnik-napaka { text-align: center; color: var(--rdeca); padding: 3rem 1.5rem; font-size: 0.92rem; }

/* Trak sličic — na telefonu ga ni (prostora ni), od tablice navzgor stoji ob strani.
   Od 1000 px naprej ni več letev ob levem robu monitorja, ampak plošča tik ob
   strani: skupaj z njo tvori en blok, ki stoji na sredini zaslona. */
.trak { display: none; }
@media (min-width: 760px) {
  .trak {
    display: block; flex: none; width: 148px; overflow-y: auto;
    background: var(--povrsina); border-right: 1px solid var(--rob);
    padding: 0.6rem 0.5rem; scrollbar-width: thin;
  }
  .slicica {
    display: block; width: 100%; border: 0; background: none; padding: 0 0 0.55rem;
    cursor: pointer;
  }
  .slicica-okvir {
    display: grid; place-items: center; width: 100%; min-height: 90px;
    background: #fff; border: 2px solid transparent; border-radius: 5px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.16); overflow: hidden;
  }
  .slicica-okvir canvas { display: block; width: 100%; height: auto; }
  .slicica-st {
    display: block; text-align: center; font-size: 0.7rem; color: var(--besedilo-3);
    margin-top: 0.2rem; font-variant-numeric: tabular-nums;
  }
  .slicica:hover .slicica-okvir { border-color: var(--zelena-svetla); }
  .slicica.aktivna .slicica-okvir { border-color: var(--zelena); }
  .slicica.aktivna .slicica-st { color: var(--zelena); font-weight: 700; }
}

/* ===== BRALNIK NA RAČUNALNIKU =====
   Prej je drsno okno zasedlo ves preostanek zaslona: stran je plavala nekje na
   njegovi sredini, trak sličic pa je obtičal ob levem robu monitorja — pol metra
   stran od note, ki ji pripada, z veliko prazno ploskvijo vmes.
   Zdaj okno omeji `bralnik.js` točno na širino strani (izračunano iz VIŠINE okna,
   da je cel A4 viden naenkrat), tu pa preostanek prostora razdelimo levo in desno.
   Rezultat je en sam blok [sličice | list] na sredini. */
@media (min-width: 1000px) {
  .bralnik-telo { justify-content: center; gap: 0.9rem; padding: 0 1.2rem; }
  /* Plošča se drži vsebine: raztegnjena čez vso višino je pod zadnjo sličico
     ostajala velika prazna bela ploskev. */
  .trak {
    border-right: 0; border: 1px solid var(--rob); border-radius: var(--r-srednja);
    margin: 0.9rem 0 1.1rem; width: 134px;
    align-self: flex-start; max-height: calc(100% - 2rem);
  }
  .bralnik-okno { flex: 0 1 auto; width: 100%; }
  .bralnik-platno { padding: 0.9rem 0 1.1rem; }
}

.bralnik-noga {
  display: flex; gap: 0.5rem; flex: none;
  padding: 0.6rem 0.8rem calc(0.6rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rob); background: var(--povrsina);
}
.bralnik-noga .gumb { flex: 1; }
@media (min-width: 620px) {
  .bralnik-noga { justify-content: center; }
  .bralnik-noga .gumb { flex: 0 1 220px; }
}

/* Priprava na tisk (telefon) */
.tisk-cakanje {
  position: fixed; inset: 0; z-index: 80; background: rgba(10,25,20,0.55);
  display: grid; place-items: center; backdrop-filter: blur(2px);
}
.tisk-okvir {
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  background: var(--povrsina); border-radius: var(--r-velika);
  padding: 1.8rem 2rem; box-shadow: var(--senca); text-align: center;
}
.tisk-okvir .ikona-svg { color: var(--zelena); animation: utrip 1.4s ease-in-out infinite; }
.tisk-okvir p { margin: 0; font-size: 0.9rem; color: var(--besedilo-2); }

/* Tiskalna stran: skrita na zaslonu, edina vidna med tiskanjem. */
#tiskalno { display: none; }
@media print {
  body > *:not(#tiskalno) { display: none !important; }
  #tiskalno { display: block !important; }
  #tiskalno img { display: block; width: 100%; page-break-after: always; break-after: page; }
  #tiskalno img:last-child { page-break-after: auto; break-after: auto; }
  @page { margin: 8mm; }
}

/* ===== OSVEŽITEV S POTEGOM =====
   Kometni obroč (glej komet.js). Prehod je na `opacity` IN `transform`, da se
   ob koncu umakne z bledenjem in ne izgine sredi giba. */
.osvezi-kazalnik {
  position: fixed; top: -2.9rem; left: 50%; z-index: 45;
  display: grid; place-items: center; width: 2.7rem; height: 2.7rem;
  border-radius: 50%; background: var(--povrsina);
  box-shadow: var(--senca); opacity: 0; pointer-events: none;
  transform: translate(-50%, 0);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.osvezi-kazalnik svg { display: block; overflow: visible; }
/* Barvo in sij nosi komet sam; dokler poteg ni dovolj dolg, je pridušen. */
.osvezi-kazalnik .komet line { stroke: var(--zelena-svetla); stroke-width: 1.9; stroke-linecap: round; }
.osvezi-kazalnik .komet { opacity: 0.55; transition: opacity 0.15s ease; }
.osvezi-kazalnik.viden { opacity: 1; }
.osvezi-kazalnik.pripravljen .komet,
.osvezi-kazalnik.osvezuje .komet { opacity: 1; filter: drop-shadow(0 0 2.5px rgba(47, 163, 124, 0.55)); }

/* ===== PRIJAVA ===== */
.prijava-ovoj { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.prijava {
  background: var(--povrsina); border: 1px solid var(--rob); border-radius: var(--r-velika);
  padding: 2.2rem 1.6rem; width: 100%; max-width: 370px; box-shadow: var(--senca); text-align: center;
}
.prijava .logo {
  display: grid; place-items: center; width: 4.2rem; height: 4.2rem; margin: 0 auto 0.9rem;
  border-radius: var(--r-velika); background: var(--povrsina-3); color: var(--zelena);
}
.prijava h1 { font-size: 1.28rem; margin: 0 0 0.3rem; }
.prijava .podnaslov { color: var(--besedilo-3); font-size: 0.86rem; margin: 0 0 1.5rem; }
.prijava input {
  width: 100%; min-height: var(--tarca); padding: 0.7rem 0.8rem; margin-bottom: 0.6rem;
  border: 1px solid var(--rob); border-radius: var(--r-mala);
  background: var(--povrsina-2); color: var(--besedilo);
}
.prijava input:focus { outline: 2px solid var(--zelena); outline-offset: -1px; }
.prijava .gumb--sirok { margin-top: 0.4rem; }
.prijava .napaka { color: var(--rdeca); font-size: 0.85rem; margin-top: 0.8rem; min-height: 1.2rem; }

/* ===== OBVESTILO ===== */
.obvestilo {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(5.6rem + env(safe-area-inset-bottom)); z-index: 70;
  display: flex; align-items: center; gap: 0.45rem;
  background: var(--besedilo); color: var(--povrsina);
  padding: 0.7rem 1.1rem; border-radius: var(--r-mala); font-size: 0.86rem;
  max-width: calc(100vw - 2rem); box-shadow: var(--senca);
  animation: zdrsniGor 0.2s ease;
}
.obvestilo.napaka { background: var(--rdeca); color: #fff; }
/* Uspeh nosi barvo aplikacije: „Osveženo." je potrditev dejanja, ne obvestilo
   o težavi, in sivo-črna tablica je bila zanjo enako mračna kot za napako. */
.obvestilo.uspeh { background: var(--zelena); color: #fff; font-weight: 600; }
/* Odhod z bledenjem — brez tega obvestilo v enem okvirju izgine (glej app.js). */
.obvestilo.odhaja {
  opacity: 0; transform: translate(-50%, 8px);
  transition: opacity 0.26s ease, transform 0.26s ease;
}

@keyframes pojaviSe { from { opacity: 0; } to { opacity: 1; } }
@keyframes zdrsniGor { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes utrip { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.7; } }
.modal { animation-name: zdrsniGorModal; }
@keyframes zdrsniGorModal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ===== TELEFON =====
   Trije gumbi v vrstici pojedo pri 393 px tretjino širine in naslov se odreže
   po nekaj besedah. Na telefonu zato ostane samo „⋮" — tisk in prenos sta prva
   dva vnosa v njem, torej en dotik več za dejanje, ki ga tam skoraj ne rabi
   (tiskala bo z računalnika). Naslov note je pomembnejši. */
@media (max-width: 619px) {
  .vrstica .akcije .skrij-ozko { display: none; }
}

/* ===== TABLICA IN ŠIRŠE =====
   Mape gredo v mrežo: na širokem zaslonu je seznam enovrstičnih map redek in
   zahteva veliko drsenja, mreža pa pokaže celo raven naenkrat. */
@media (min-width: 620px) {
  /* Mreža map je odpadla: mape so bile ozke kartice, note pod njimi polne širine,
     kar je bilo videti kot dva različna seznama. Zdaj imata oba enako mero. */
}
@media (min-width: 1000px) {
  :root { --sirina-vsebine: 960px; }
  /* Na miški je tarča lahko manjša; gostejši seznam pokaže več not naenkrat. */
  .vrstica { padding: 0.3rem 0.4rem 0.3rem 0.75rem; }
}

.skrito { display: none !important; }