/* =========================================================================
   DARBAS — „Šiandien" ekranas (4.1)
   Grynas CSS. Jokių karkasų, jokių išorinių resursų, jokio build žingsnio.

   Vienintelė animacija — sulankstymas. Ekranas, į kurį žiūrima vienu
   žvilgsniu prieš išeinant iš kiemo, neturi judėti.
   ========================================================================= */

:root {
  --fonas:        #f6f6f4;
  --pavirsius:    #ffffff;
  --krastas:      #e2e2dd;
  --tekstas:      #17191b;
  /* ‼️ P85: 4.62 -> 5.12. Nuo P85 tai REIKŠMIŲ spalva nustatymuose, o jos
     rodomos ir ant atviros sekcijos fono, kur senoji davė 4.10. Tas pats
     pataisė ir seniau tylėjusią vietą: `.seka__vieta` ant `--pilkas-fonas`
     buvo 4.38 — irgi žemiau ribos, tik to niekas nebuvo išmatavęs. */
  --blankus:      #64696e;
  --labai-blankus:#9aa0a6;
  /* ‼️ P83: PENKIOS AKCENTO PALETĖS.
     Kiekviena hex reikšmė užrašyta LYGIAI KARTĄ temai, ir tą patį kintamąjį
     ima tiek aktyvus akcentas, tiek rinkiklio apskritimas — parodyti vieną
     spalvą, o pritaikyti kitą, tampa neįmanoma. Vardai kaip P75 `--kal-*`,
     kad kontrasto testas juos rastų pats. */
  --sp-zalia:     #1D6B4F;
  /* ‼️ P84: du atspalviai patamsinti 4-5 %. P83 reikšmės (#2563EB, #C2410C)
     ant PUSLAPIO fono davė 4.78 ir 4.79, bet nuo P84 pavadinimai rodomi ir ant
     ATVIROS sekcijos fono, kuris tamsesnis — ten jos nukrisdavo iki 4.24 ir
     4.25, žemiau pačių užsibrėžtos 4.5 ribos. Skirtumas akiai nematomas,
     riba — matoma testu. */
  --sp-melyna:    #235EDF;
  --sp-violetine: #7C3AED;
  --sp-oranzine:  #BA3E0C;
  --sp-pilka:     #374151;

  --akcentas:     var(--sp-zalia);
  /* ‼️ P83: IŠVEDAMAS iš `--akcentas`, ne įrašomas. Anksčiau tai buvo antra
     nepriklausoma reikšmė, ir pakeitus akcentą būtų likęs žalias fonas po
     mėlynu tekstu — klaida, kurios niekas nepamatytų, kol nepakeis spalvos. */
  --akcentas-fon: color-mix(in srgb, var(--akcentas) 12%, var(--pavirsius));
  --iseiga:       #a03030;
  --klaida:       #b03030;   /* trynimas, uzdaryto menesio ispejimas */
  --klaida-fon:   #fbecea;
  --demesio:      #9a6a12;   /* nepilna diena, truksta irašo */
  --pilkas-fonas: #f0f0ed;
  /* P79: atviros nustatymu sekcijos fonas. NE `--pilkas-fonas` — tas nuo
     `--fonas` skiriasi 1.055:1 ir sviesioje temoje praktiskai nesimato.
     Cia reikia ne atspalvio, o RIBOS: is karto matyti, kur sekcija baigiasi. */
  --atvira-sekcija: #e9e9e3;
  /* --------------------------------------------------------------------
     P75 · KALENDORIAUS DIENŲ SPALVOS

     Iki tol šventinė ir atostogos naudojo TĄ PATĮ foną (--atostogu-fonas),
     ir skyrėsi tik rėmeliu — todėl gruodžio 24-26 atrodė kaip įprastos
     dienos. Dabar kiekvienas tipas turi savo spalvą, o ne atspalvį.

     ŠVENTINĖ RYŠKIAUSIA: tai vienintelė spalva, reiškianti „nedirbama
     pagal įstatymą" — ne pasirinkimas, o faktas. „Nedirbta" irgi rausva,
     bet BLYŠKI ir punktyrinė: klausimas, ne konstatavimas.
     -------------------------------------------------------------------- */
  --kal-sventine:      #ffd3d9;   /* sodri rausva — ryškiausia */
  --kal-atostogos:     #cbdff7;   /* mėlyna */
  --kal-tevadienis:    #c8e6d0;   /* žalia */
  --kal-komandiruote:  #fae0b0;   /* geltona / oranžinė */
  /* ‼️ P106: kelionė yra DIRBTA diena, todėl jos spalva atskira nuo
     komandiruotės (geltonos) ir nuo atostogų (mėlynos). Violetinė — vienintelė
     laisva šeimos vieta, kurios nė vienas kitas tipas neužima. */
  --kal-kelione:       #ded0f2;   /* violetinė */
  --kal-laisva:        #e8e8e5;   /* pilka — „nieko" būsena */
  --kal-nedirbta:      #fdeef0;   /* blyški rausva */
  --kal-nedirbta-krastas: #d1495b;

  --plotis: 40rem;      /* 640 px — PC ekrane kortelė neturi atrodyti siaura */
  --tabu-aukstis: 3.75rem;
  --antrastes-aukstis: 2.75rem;   /* P69: 44 px — iOS minimumas paspaudimui */

  --mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", Menlo,
          Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fonas:        #111315;
    --pavirsius:    #191c1f;
    --krastas:      #2a2f34;
    --tekstas:      #e8eaec;
    --blankus:      #98a0a7;
    --labai-blankus:#6a7278;
    --sp-zalia:     #4ADE80;
    --sp-melyna:    #60A5FA;
    --sp-violetine: #A78BFA;
    --sp-oranzine:  #FB923C;
    --sp-pilka:     #9CA3AF;

    --akcentas:     var(--sp-zalia);
    /* `--akcentas-fon` čia NEperrašomas: `color-mix` formulė ta pati, o
       `--pavirsius` tamsioje temoje jau kitas, tad rezultatas irgi kitas. */
    --iseiga:       #e2807d;
    --klaida:       #e8817d;
    --klaida-fon:   #33201f;
    --demesio:      #e0ac5c;
    --pilkas-fonas: #202429;
    --atvira-sekcija: #252a30;   /* P79 — sviesesnis uz `--fonas`, 1.29:1 */
    /* P75: tamsioje temoje tie patys tonai, tik atvirkščiai — tamsūs fonai
       šviesiam tekstui. Sotumas išlaikytas: išblukinti juos reikštų grąžinti
       tą pačią bėdą kita spalvų sistema. */
    --kal-sventine:      #5a2029;
    --kal-atostogos:     #1e3557;
    --kal-tevadienis:    #173d23;
    --kal-komandiruote:  #453619;
    --kal-kelione:       #342a4a;
    --kal-laisva:        #23272b;
    --kal-nedirbta:      #33201f;
    --kal-nedirbta-krastas: #b05a5a;
  }
}

*, *::before, *::after { box-sizing: border-box; }

/* Dvigubas tap zoom netyčia pataikius erzina. `manipulation` palieka
   slinkimą ir suspaudimą (pinch), bet dvigubo paspaudimo mastelį nuima. */
button, .eil, .dezute__eilute, .tabas, .jungiklis, label, summary {
  touch-action: manipulation;
}

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

body {
  margin: 0;
  background: var(--fonas);
  color: var(--tekstas);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

/* --- Prieigos raktas ---------------------------------------------------- */

.raktas {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.raktas__forma {
  width: 100%;
  max-width: 20rem;
  text-align: center;
}

/* Vieta tikrai ikonai (4.8). Kol jos nėra — paprastas simbolis rėmelyje, o ne
   tuščia skylė: aukštis privalo būti toks pat, kad atėjus ikonai niekas
   nepasislinktų. */
.raktas__zenklas {
  width: 5.5rem;
  height: 5.5rem;
  margin: 0 auto 1.25rem;
  display: grid;
  place-items: center;
  font-size: 2.5rem;
  color: var(--akcentas);
  background: var(--pavirsius);
  border: 1px solid var(--krastas);
  border-radius: 1.375rem;
}

.raktas__antraste {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--tekstas);
}

.raktas__paantraste {
  margin: 0.25rem 0 2rem;
  font-size: 0.875rem;
  color: var(--blankus);
}

/* ‼️ ANTRINIS kelias atskirtas linija ir tarpu, ne vien spalva: Face ID
   spaudžiamas kasdien, raktas — kartą per metus. */
.raktas__antrinis {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--krastas);
  text-align: left;
}

.raktas__label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  color: var(--blankus);
}

.raktas__laukas {
  width: 100%;
  padding: 0.75rem;
  font: inherit;
  color: var(--tekstas);
  background: var(--pavirsius);
  border: 1px solid var(--krastas);
  border-radius: 0.5rem;
}

.raktas__laukas:focus-visible {
  outline: 2px solid var(--akcentas);
  outline-offset: 1px;
}

.raktas__klaida {
  margin: 0.625rem 0 0;
  font-size: 0.875rem;
  color: var(--iseiga);
}

.raktas__mygtukas {
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--akcentas);
  border: 1px solid var(--akcentas);
  border-radius: 0.5rem;
  cursor: pointer;
}

/* Nebeveikiantis Face ID lieka SAVO VIETOJE — dingęs mygtukas pastumtų
   viską, kas žemiau, ir ekranas vėl šoktelėtų (P70). */
.raktas__mygtukas:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.raktas__mygtukas--antrinis {
  color: var(--tekstas);
  background: var(--pavirsius);
  border-color: var(--krastas);
  font-weight: 500;
}

.raktas__mygtukas--antrinis:hover { border-color: var(--blankus); }

/* iOS sisteminė Face ID piktograma: keturi kampai, akys, nosis, šypsena.
   Inline SVG — jokių išorinių resursų, jokio emoji (jis atrodo kitaip
   kiekvienoje platformoje). */
.faceid-ikona {
  width: 1.375rem;
  height: 1.375rem;
  flex: 0 0 auto;
}

@media (prefers-color-scheme: dark) {
  .raktas__mygtukas { color: #08120c; }
  .raktas__mygtukas--antrinis { color: var(--tekstas); }
}

/* --- Bendras rėmas ------------------------------------------------------ */

.turinys {
  max-width: var(--plotis);
  margin: 0 auto;
  /* P69: viršuje — vieta antraštei; apačioje — juostai. */
  padding: calc(var(--antrastes-aukstis) + env(safe-area-inset-top) + 1rem)
           1.25rem calc(var(--tabu-aukstis) + 2.5rem);
}

@media (min-width: 40rem) {
  .turinys { padding-left: 2rem; padding-right: 2rem; }
}

.skiltis {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--labai-blankus);
}

/* --- 1. Būsena ---------------------------------------------------------- */

.busena {
  padding: 0.5rem 0 1.75rem;
  border-bottom: 1px solid var(--krastas);
  margin-bottom: 1.75rem;
}

/* Data su navigacija:   ‹   2026.03.13 · penktadienis   ›   */
.data {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.data__tekstas {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: 1rem;
  color: var(--blankus);
}

/* Fiksuotas dydis abiem: išjungtas mygtukas užima tiek pat vietos, todėl
   data nešokinėja pereinant tarp dienų. */
.data__mygtukas {
  flex: 0 0 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--tekstas);
  background: var(--pavirsius);
  border: 1px solid var(--krastas);
  border-radius: 0.5rem;
  cursor: pointer;
}

.data__mygtukas:hover:not(:disabled) {
  background: var(--pilkas-fonas);
  border-color: var(--blankus);
}

.data__mygtukas:active:not(:disabled) { background: var(--krastas); }

/* Neaktyvus lieka matomas, bet aiškiai išjungtas */
.data__mygtukas:disabled { opacity: 0.35; cursor: default; }

.data__mygtukas:focus-visible {
  outline: 2px solid var(--akcentas);
  outline-offset: 1px;
}

/* ‼️ P104: DYDIS 3.5-5rem -> 2.5-3.5rem, IR TAI NE SKONIO KLAUSIMAS.

   Eilutėje dabar du skaičiai vietoj vieno („Darbe 11h45 · dirbta 8h"), o
   plotis liko tas pats. Matuota kaip P102 — tikra naršykle (Chrome 151,
   Segoe UI) ir tikru `skaitiklioEilute` išvedamu HTML, ne panašiu. Turinys
   imtas ILGIAUSIAS realus: abu skaičiai keturženkliai, „Darbe 11h45 ·
   dirbta 11h45".

   Ties kuriuo ekrano pločiu eilutė lūžta į dvi:

                          ilgiausias    375 px      + „įvesta" žymė
     3.5rem (buvęs)       <457 px       NETELPA     <499 px
     3.0rem               <398 px       NETELPA     <439 px
     2.75rem              <368 px       atsarga  7  <409 px
     2.5rem (dabartinis)  <338 px       atsarga 37  <380 px
     2.25rem              <308 px       atsarga 67  <350 px
     2.0rem               <279 px       atsarga 96  <320 px

   Rinktasi DIDŽIAUSIAS dydis, kuris dar telpa su atsarga. Skaitiklis yra tas
   dalykas, kurį matai neskaitydamas; sumažinti jį labiau, nei reikia, reikštų
   atiduoti tai be priežasties. 37 px atsarga padengia šriftų skirtumą
   (matuota Segoe UI, telefone piešia SF Pro) — P102 pakako 43 px, o 2.75rem
   likę 7 px yra tiksliai ta riba, kurios P100 nedrįso peržengti.

   ‼️ VIENAS ATVEJIS 375 px NETELPA: `dirbta` įvesta ranka IR abu skaičiai
   keturženkliai (<380 px). Tada žemyn nukrenta VIEN „įvesta" žymė — abu
   skaičiai lieka vienoje eilutėje, nes `<wbr>` prieš žymę yra paskutinis
   leidžiamas lūžis (žr. app.js). Mažinti dydžio dėl to neverta: kaina būtų
   nuolat mažesnis skaitiklis dėl retos žymės.

   clamp'o viršus 3.5rem, ne 5rem: 5rem eilutė nesutilptų ir 640 px kortelėje
   (lūžta <457 px jau ties 3.5rem). 17vw -> 10.5vw dėl to paties — 375 px
   ekrane tai duoda lygiai 2.5rem, 533 px ir plačiau — 3.5rem. */
.skaitiklis {
  margin: 0.25rem 0 0;
  font-size: clamp(2.5rem, 10.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.skaitiklis__vnt {
  font-size: 0.44em;
  font-weight: 600;
  color: var(--blankus);
  letter-spacing: 0;
  margin-left: 0.06em;
}

/* ‼️ P104: „Darbe" ir „dirbta" nelūžta nuo savo skaičių — pora yra vienas
   dalykas, ir „dirbta" eilutės gale be reikšmės būtų klausimas, ne atsakymas. */
.skaitiklis__pora { white-space: nowrap; }

/* ‼️ ABU SKAIČIAI VIENODO DYDŽIO. Skiriasi TIK svoris.

   Dydis sako „tai tos pačios rūšies dydžiai" — jei `dirbta` būtų mažesnis,
   jis atrodytų kaip išnaša, o jis yra deklaracija. Svoris sako, kuris iš jų
   yra atsakymas: buvimas 700, dirbta 400. Spalva abiem ta pati (`--tekstas`),
   nes blankinimas atimtų kontrastą, o skirtumo nepadarytų aiškesnio. */
.skaitiklis__pora--antrinis,
.skaitiklis__pora--antrinis .skaitiklis__vnt { font-weight: 400; }

/* Žodžiai, ne skaičiai: mažesni ir pilki, kaip ir vienetai šalia. */
.skaitiklis__vardas {
  font-size: 0.36em;
  font-weight: 500;
  color: var(--blankus);
  letter-spacing: 0;
  margin-right: 0.35em;
}

.skaitiklis__skyriklis {
  font-size: 0.36em;
  font-weight: 500;
  color: var(--labai-blankus);
  letter-spacing: 0;
  margin: 0 0.5em;
}

/* „–" = dar nežinoma (P141: EN brūkšnys — em šiame dydžyje yra juosta, o
   brūkšnelis susilietų su neigiamo skaičiaus ženklu). Dydis lieka skaičiaus —
   vieta atsakymui rezervuota, ir jam atsiradus eilutė nešokteli — bet svoris ir
   spalva jį iš teiginių išima: pilnu svoriu tai atrodė kaip užtušuotas skaičius. */
.skaitiklis__nera { font-weight: 400; color: var(--blankus); }



/* Dienos suvestinė: iš kur gavosi skaičius. */
/*
   ‼️ NORMOS EILUTĖ YRA PILKA, IR TAI NE APSIRIKIMAS.
   Tipinė diena duoda +41 min vien dėl atvykimo ~05:36 — tai ĮPROTIS, ne
   viršvalandžiai (spec 1 sk.: „sistema jokiu būdu negali jų sumuoti
   automatiškai"). Žalia lieka tik DEKLARUOTIEMS viršvalandžiams (6 sk.);
   nudažius ją čia ekranas kasdien girtų už tai, ko niekas neužsakė.
*/
.busena__norma {
  margin: 0.375rem 0 0;
  /* Kiek didesnis už likusias smulkias eilutes: tai vienintelė vieta,
     kur matyti visa diena vienu žvilgsniu (P48). */
  font-size: 1rem;
  color: var(--blankus);
  font-variant-numeric: tabular-nums;
}

.busena__norma b { font-weight: 600; color: var(--tekstas); }

/* Siūlymas - ATSKIRA eilutė. Įsprausta į „dirbta ... norma ..." eilutę ji
   kartodavo tą patį skaičių ir žodį „siūloma" du kartus (P15).
   Tai KVIETIMAS VEIKTI, ne suvestinės dalis, todėl ir atrodo kitaip. */
.siulymas {
  margin: 0.375rem 0 0;
  font-size: 0.9375rem;
  color: var(--tekstas);
  font-variant-numeric: tabular-nums;
}

.siulymas b { font-weight: 600; }

/* Diena, kurioje tik GPS šnypštys. Didelio „1min" nerodome: tai ne darbas. */
.nedirbta {
  margin: 0.25rem 0 0;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--blankus);
}

/* Sesijų grupės, kai tarp jų daugiau nei grupavimo_riba_val valandų */
/* ‼️ P133: GRUPIŲ LENTELĖS (`.grupes`, `.grupe*`) ČIA NEBĖRA. Ji rodė tuos
   pačius laikus ir trukmes, kaip laiko juosta, tik kitaip išdėliotus.
   Atsirado ji tada, kai juosta trukmių dar nerodė (iki P30), ir nuo tada
   buvo antra tos pačios dienos kopija. `.grupe-antraste` (P34) yra KITAS
   dalykas — peržiūros dėžutės skiltis, ir ji lieka.

   Grupavimas nedingo: jis gyvena `lib/calc` ir lemia, kuri grupė pagrindinė,
   o iš to — bazinę reikšmę, pietus ir perteklių. Tik nebepiešiamas. */

/* Tuščia diena — be didelio nulio */
.tuscia-diena {
  margin: 0.75rem 0 0;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.tuscia-diena--blankus { color: var(--blankus); }

.tuscia-diena__mygtukas {
  margin-top: 0.875rem;
  padding: 0.5rem 1rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--tekstas);
  background: var(--pavirsius);
  border: 1px solid var(--krastas);
  border-radius: 0.5rem;
  cursor: pointer;
}

.busena__bankas {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: var(--labai-blankus);
  font-variant-numeric: tabular-nums;
}

.zyme {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.0625rem 0.4375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 0.25rem;
  background: var(--akcentas-fon);
  color: var(--akcentas);
  vertical-align: 0.12em;
}

/* --- 2. Laiko juosta ---------------------------------------------------- */

/* ‼️ P128 · ANTRAŠTĖS EILUTĖ: vardas kairėje, ⋯ dešinėje.

   Antraštė LIEKA `<h2>`. Ji atrodo kaip etiketė — didžiosios raidės, pilka,
   0.75rem — ir mygtuku jos niekas nespaustų tikėdamasis veiksmo. Todėl
   veiksmas turi savo ženkliuką šalia jos, o ne joje. */
.juosta__virsus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.juosta__virsus .skiltis { margin-bottom: 0; }

/* ‼️ MATOMAS DYDIS 32 px, PASPAUDIMO ZONA 44 px.
   Zona plečiama `::after`, tik aukštyn ir žemyn: eilutės aukščio ji nekeičia,
   o į šonus plėsti nėra ko — dešinėje kortelės kraštas, kairėje antraštė,
   kuri paspaudimų nelaukia. Žemyn 6 px telpa į pačios eilutės apatinį tarpą,
   tad pirmo juostos punch'o ji nesiekia. */
.juosta__iranklis {
  position: relative;
  width: 2.75rem;
  height: 2rem;
  margin-right: -0.5rem;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: none;
  color: var(--labai-blankus);
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.juosta__iranklis::after {
  content: '';
  position: absolute;
  inset: -0.375rem 0;
}

.juosta__iranklis:hover { color: var(--tekstas); background: var(--pilkas-fonas); }

.juosta__iranklis:focus-visible {
  outline: 2px solid var(--akcentas);
  outline-offset: -2px;
}

/* ‼️ P126 · JUOSTA YRA TEKSTAS, NE BLOKŲ KRŪVA.

   MATUOTA TIKRA NARŠYKLE (Chrome 151, Segoe UI Mono / 375 px), tikru
   `piesJuosta` išvedamu HTML. Matuojamas atstumas tarp TEKSTŲ, ne tarp
   dėžučių — akis mato tekstą:

                          eilutė   virš trukmės   po trukmės   juosta*
     P125 (buvo)           44 px       35,8 px       20,3 px    357 px
     tik centravimas       44 px         26 px         26 px    345 px
     40 px, lh 1.7         40 px         22 px         22 px    314 px
     36 px, lh 1.6         36 px         18 px         18 px    285 px
     32 px, lh 1.5 (šis)   32 px         14 px         14 px    256 px

     * keturių punch'ų diena: 05:35 · 07:36 · 07:52 · 16:04

   ‼️ ASIMETRIJA BUVO NE ATSITIKTINĖ. `.eil__laikas` yra `display: flex`, ir
   flex'as mygtuko numatytojo vertikalaus centravimo NEBEDARO: tekstas
   likdavo 44 px dėžės VIRŠUJE. `.trukme` yra paprastas mygtukas ir centruoja
   savaime. Todėl virš trukmės susidėdavo dvi tuštumos, o po ja — viena, nors
   trukmė priklauso intervalui, ne vienam iš punch'ų. Taiso `align-content`
   (veikia todėl, kad eilutė yra `flex-wrap: wrap`).

   ‼️ 44 px -> 32 px. Būtent tas 44 px `min-height` ir pūtė juostą: eilutės yra
   GRETIMOS ir keičiasi pakaitomis, todėl kiekviena tuštuma matoma du kartus.
   32 px per visą kortelės plotį lieka patogus taikinys — jį renkiesi ne
   tikslumu, o eilute — o iOS 44 px minimumas rašytas pavieniam mygtukui, ne
   tankiam sąrašui, kuriame visos eilutės vienodos ir nė viena negrįžtama. */
.juosta__kunas {
  font-family: var(--mono);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Rodyklė ir laikas — fiksuoto pločio stulpeliai, todėl -> ir <- lieka
   sulygiuoti nepriklausomai nuo to, kas eina po jų. */
.eil {
  display: grid;
  /* ‼️ P119: DVI kolonos. Trečioji buvo [×] dešinėje (P38); veiksmų eilutėje
     nebėra nė vieno, o pats laikas atidaro punch'o modalą. */
  grid-template-columns: 2.25rem 1fr;
  align-items: baseline;
  gap: 0 0.25rem;
}

.eil__rodykle { color: var(--labai-blankus); }

/* Laikas yra mygtukas, bet mygtuku atrodyti neturi — juosta pilna rėmelių
   virstų tinkleliu. Paspaudimo zona ateina iš `min-height`, ne iš matomo
   dydžio; tas pats sprendimas, kaip `.trukme` (P115).

   ‼️ P126: `align-content: center` — DĖL JO tekstas stovi dėžės VIDURYJE, kaip
   ir `.trukme`. Be jo flex'o eilutė lipdavo prie viršaus, ir tarpas virš
   trukmės būdavo pusantro karto didesnis už tarpą po ja. */
.eil__laikas {
  display: flex;
  align-items: baseline;
  align-content: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  min-height: 2rem;
  padding: 0 0.25rem;
  margin-left: -0.25rem;
  border: 0;
  border-radius: 0.375rem;
  background: none;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: left;
  cursor: pointer;
}

.eil__laikas:hover, .eil__laikas:focus-visible { background: var(--pilkas-fonas); }

.eil--in  .eil__rodykle { color: var(--akcentas); }
.eil--out .eil__rodykle { color: var(--blankus); }

.eil--blankus .eil__laikas,
.eil--blankus .eil__rodykle { color: var(--labai-blankus); }

.eil__priezastis {
  margin-left: 0.75rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--labai-blankus);
}

/* Pastaba stovi TARP laikų — toje vietoje, kurią paaiškina (9 sk.). */
.pastaba {
  margin: 0.125rem 0 0.375rem 2.25rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--tekstas);
  border-left: 2px solid var(--krastas);
  padding: 0.125rem 0 0.125rem 0.75rem;
}

.tuscia {
  font-family: var(--sans);
  color: var(--blankus);
}

/* --- Sulankstyti trumpi įrašai ------------------------------------------ */

.trumpi { margin: 0.25rem 0; }

.trumpi__jungiklis {
  font: inherit;
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--blankus);
  background: var(--pilkas-fonas);
  border: 1px solid var(--krastas);
  border-radius: 0.375rem;
  padding: 0.25rem 0.625rem;
  margin-left: 2.25rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Neaiškūs įrašai — tas pats sulankstymas, bet su įspėjimo ženklu */
.trumpi__jungiklis--demesio {
  border-color: var(--krastas);
  color: var(--tekstas);
}

.trumpi__paaiskinimas {
  margin: 0.5rem 0 0 2.25rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--blankus);
}

.trumpi__jungiklis:focus-visible {
  outline: 2px solid var(--akcentas);
  outline-offset: 1px;
}

.trumpi__strele {
  display: inline-block;
  transition: transform 0.15s ease;
}

.trumpi__jungiklis[aria-expanded="true"] .trumpi__strele { transform: rotate(180deg); }

.trumpi__kunas {
  overflow: hidden;
  color: var(--labai-blankus);
}

/* Vienintelė animacija visame ekrane. */
@media (prefers-reduced-motion: no-preference) {
  .trumpi__kunas { animation: issiskleidimas 0.15s ease; }
}

@keyframes issiskleidimas {
  from { opacity: 0; transform: translateY(-0.25rem); }
  to   { opacity: 1; transform: none; }
}

/* --- Dienos įrašai (entries) --------------------------------------------- */

.irasai { margin-top: 2rem; }

.irasai__sarasas {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--krastas);
}

.irasas {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0.125rem 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--krastas);
}

/*
   ‼️ VIENINTELĖ VIETA, KUR ŽALIA PAGRĮSTA.
   Skaitiklio „virš normos" eilutė yra pilka sąmoningai (spec 1 sk.: +41 min
   yra įprotis, ne laimėjimas). Čia kas kita — tai DEKLARUOTI viršvalandžiai,
   naudotojo sprendimas (6 sk.). Juos ir verta pagirti.
*/
.irasas__suma {
  grid-row: 1 / 3;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.irasas__suma--plius  { color: var(--akcentas); }
.irasas__suma--minus  { color: var(--iseiga); }

.irasas__antraste {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.irasas__tipas { font-weight: 600; }

.irasas__laikai {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--labai-blankus);
  font-variant-numeric: tabular-nums;
}

.irasas__zyme {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--blankus);
  background: var(--pilkas-fonas);
  border: 1px solid var(--krastas);
  border-radius: 0.25rem;
  padding: 0.0625rem 0.375rem;
}

.irasas__pastaba {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--blankus);
}

.bankas-pokytis {
  margin: 0.875rem 0 0;
  font-size: 0.9375rem;
  color: var(--blankus);
  font-variant-numeric: tabular-nums;
}

.bankas-pokytis b { color: var(--tekstas); font-weight: 600; }

/* --- Ramus pranešimas laiko juostos vietoje ------------------------------
   ‼️ P100: buvo peržiūros juosta („Peržiūra: 2025-12-19 · grįžti į šiandien").
   Juostos nebeliko — datą sako antraštė, o grąžina „Šiandien" tab'as. Stilius
   lieka, nes jį naudoja „Žinutė atšaukta": tai irgi ne klaida, o ramus
   pasakymas, ir raudonas `.klaida` čia būtų per stiprus.                    */

.perziura {
  margin: 1.75rem 0 0;
  padding: 0.625rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--blankus);
  background: var(--pilkas-fonas);
  border: 1px solid var(--krastas);
  border-radius: 0.5rem;
}

/* --- 3. Tabai ----------------------------------------------------------- */

.tabai {
  position: fixed;
  inset: auto 0 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: var(--plotis);
  margin: 0 auto;
  background: var(--pavirsius);
  border-top: 1px solid var(--krastas);
  padding-bottom: env(safe-area-inset-bottom);
}

.tabas {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  height: var(--tabu-aukstis);
  font: inherit;
  font-size: 0.6875rem;
  color: var(--labai-blankus);
  background: none;
  border: none;
  cursor: pointer;
}

.tabas__zenklas { font-size: 1.0625rem; line-height: 1; }

.tabas--aktyvus { color: var(--akcentas); font-weight: 600; }

.tabas:focus-visible {
  outline: 2px solid var(--akcentas);
  outline-offset: -2px;
}

.ruosiama {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabu-aukstis) + 1rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  margin: 0;
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  color: var(--fonas);
  background: var(--tekstas);
  border-radius: 2rem;
}

/* --- Klaida ------------------------------------------------------------- */

.klaida {
  margin: 1rem 0 0;
  padding: 0.75rem;
  font-size: 0.9375rem;
  color: var(--iseiga);
  background: var(--pilkas-fonas);
  border: 1px solid var(--krastas);
  border-radius: 0.5rem;
}

/* =========================================================================
   4.2 — deklaravimas ir peržiūros dėžutė
   ========================================================================= */

/* ‼️ P80: FLEX, ne `grid-template-columns: 1fr 1fr`.

   Fiksuoti stulpeliai reiškia, kad likus vienam mygtukui jis atsisėda į
   PIRMĄ stulpelį — kairėje, su tuščia puse dešinėje. Tinklelis nemato, kad
   antro mygtuko nebėra; jis tik piešia dvi vietas.

   `flex-basis: calc(50% - pusė tarpo)` atkuria tą patį plotį DVIEM mygtukams
   tiksliai (2 × (50% − 0.3125rem) + 0.625rem = 100%), o vienam palieka jį
   nepakitusį ir `justify-content` nustumia į vidurį.

   Per visą plotį netempiam (`flex-grow: 0`): tai antrinis veiksmas — pagrindinis
   yra pati kortelė. */
.veiksmai {
  display: flex;
  justify-content: center;
  gap: 0.625rem;
  margin-top: 2rem;
}

.veiksmas {
  flex: 0 1 calc(50% - 0.3125rem);
  padding: 0.75rem;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tekstas);
  background: var(--pavirsius);
  border: 1px solid var(--krastas);
  border-radius: 0.5rem;
  cursor: pointer;
}

.veiksmas:hover { border-color: var(--blankus); }

.zenkliukas {
  display: inline-block;
  min-width: 1.375rem;
  margin-left: 0.25rem;
  padding: 0.0625rem 0.375rem;
  font-size: 0.75rem;
  color: #fff;
  background: var(--iseiga);
  border-radius: 1rem;
}

/* --- Pilno ekrano sluoksnis ---------------------------------------------- */

.ekranas {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: var(--fonas);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* --------------------------------------------------------------------------
   P65 · TAB'AS nėra modalas

   Kalendorius ir Viršvalandžiai yra LYGIAVERČIAI su „Šiandien" — iš jų
   neišeinama, į juos pereinama. Todėl juosta lieka matoma, „Atgal" nėra, ir
   sluoksnis žemesnis: modalas (z-index 10) juos uždengia kartu su juosta,
   o jie patys jos neuždengia.
   -------------------------------------------------------------------------- */
.ekranas--tabas {
  /* Tarp antraštės ir juostos: nė vienos jų neuždengia. */
  top: calc(var(--antrastes-aukstis) + env(safe-area-inset-top));
  bottom: calc(var(--tabu-aukstis) + env(safe-area-inset-bottom));
  z-index: 5;
}

/* --------------------------------------------------------------------------
   P66/P69 · Programos antraštė

   ‼️ JUOSTA, ne plaukiojanti piktograma. Plaukiojantis ⚙ uždengdavo dienos
   navigacijos `›` mygtuką — persidengimas, kurio jokiu z-index'u neišspręsi,
   nes abu elementai teisėtai nori tos pačios vietos. Juosta ją pasidalija:
   antraštė viršuje, turinys žemiau.

   Virš tab'ų, po modalais: iš vieno klausimo lango į nustatymus nešokama.
   -------------------------------------------------------------------------- */
.programos-antraste {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  max-width: var(--plotis);
  margin: 0 auto;
  height: calc(var(--antrastes-aukstis) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 0.75rem 0 1.25rem;
  background: var(--fonas);
  border-bottom: 1px solid var(--krastas);
}

.programos-antraste__vardas {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.programos-ikona {
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 0;
  border-radius: 0.5rem;
  background: none;
  color: var(--labai-blankus);
  font-size: 1.25rem;
  cursor: pointer;
}

.programos-ikona:hover { color: var(--tekstas); background: var(--pilkas-fonas); }

.programos-ikona:focus-visible {
  outline: 2px solid var(--akcentas);
  outline-offset: -2px;
}

.ekranas__virsus {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  background: var(--fonas);
  border-bottom: 1px solid var(--krastas);
}

.ekranas__atgal {
  font: inherit;
  font-size: 0.9375rem;
  color: var(--blankus);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0;
}

.ekranas__antraste {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.ekranas__kunas {
  max-width: var(--plotis);
  margin: 0 auto;
  padding: 1.25rem 1.25rem 3rem;
}

.ekranas__mygtukai {
  display: flex;
  gap: 0.625rem;
  margin-top: 1.75rem;
}

/* ‼️ P80: eilutė, kurioje mygtukų skaičius KINTA.

   Įprastame `.ekranas__mygtukai` mygtukai dalijasi plotį po lygiai (`flex: 1`),
   ir tai teisinga ten, kur jų skaičius pastovus: dienos ekrane „Išsaugoti" ir
   „Atšaukti" yra po pusę. Bet kur skaičius kinta, tas pats `flex: 1`
   likusį vienintelį mygtuką ištempia per VISĄ plotį — ir „Uždaryti" ima
   atrodyti kaip svarbiausia, ką čia galima padaryti.

   Ta pati taisyklė kaip `.veiksmai`: plotis nesikeičia, keičiasi tik padėtis. */
.ekranas__mygtukai--kintantis { justify-content: center; }

.ekranas__mygtukai--kintantis .mygtukas {
  flex: 0 1 calc(50% - 0.3125rem);
}

.mygtukas {
  flex: 1;
  padding: 0.8125rem;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tekstas);
  background: var(--pavirsius);
  border: 1px solid var(--krastas);
  border-radius: 0.5rem;
  cursor: pointer;
}

/* ‼️ P119: PLOTIS TOKS PAT, kaip antrinio. `flex: 2` duodavo du trečdalius,
   nors P80 komentaras šalia teigė „per visą pusę" — kodas ir jo paaiškinimas
   nesutapo, o ekrane tai matėsi kaip pakrypusi eilutė. Pagrindinį veiksmą ir
   taip pasako spalva; plotis to sakyti neprivalo. */
.mygtukas--pirminis {
  color: #fff;
  background: var(--akcentas);
  border-color: var(--akcentas);
}

@media (prefers-color-scheme: dark) {
  .mygtukas--pirminis { color: #08120c; }
}

.mygtukas:disabled { opacity: 0.45; cursor: default; }

/* --- Laukai --------------------------------------------------------------- */

.dekl__faktas {
  margin: 0 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--krastas);
  font-size: 0.9375rem;
  color: var(--blankus);
  font-variant-numeric: tabular-nums;
}

.dekl__faktas b { color: var(--tekstas); font-size: 1.125rem; }

.laukas {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  flex-wrap: wrap;
}

.laukas__vardas {
  flex: 0 0 4.5rem;
  font-size: 0.8125rem;
  color: var(--labai-blankus);
}

.pasirinkimai { display: flex; flex-wrap: wrap; gap: 0.375rem; }

.pasirinkimas {
  padding: 0.3125rem 0.625rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--blankus);
  background: var(--pavirsius);
  border: 1px solid var(--krastas);
  border-radius: 1rem;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}

.pasirinkimas--pasirinktas {
  color: var(--akcentas);
  background: var(--akcentas-fon);
  border-color: var(--akcentas);
  font-weight: 600;
}

.skaicius { display: flex; align-items: center; gap: 0.5rem; }

.skaicius__mygtukas {
  width: 2.25rem;
  height: 2.25rem;
  font: inherit;
  font-size: 1.25rem;
  color: var(--tekstas);
  background: var(--pavirsius);
  border: 1px solid var(--krastas);
  border-radius: 0.5rem;
  cursor: pointer;
}

.skaicius__reiksme {
  min-width: 4.5rem;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.nuoroda {
  font: inherit;
  font-size: 0.8125rem;
  color: var(--blankus);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}

.jungiklis { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; }


/* --------------------------------------------------------------------------
   P83 · AKCENTO SPALVA — penki patikrinti variantai

   ‼️ ATRIBUTAS, NE INLINE STILIUS. Telefonas nustato tik
   `document.documentElement.dataset.akcentas = 'melyna'`, o KURIĄ iš dviejų
   reikšmių paimti, sprendžia `prefers-color-scheme` — kaip ir visoms kitoms
   spalvoms. Įrašius hex tiesiai į `style`, viena reikšmė nugalėtų abi temas,
   ir tamsioji gautų šviesios temos spalvą.

   ‼️ LAISVO ĮVEDIMO NĖRA SĄMONINGAI. Akcentas yra ir FONAS baltam tekstui
   (`.mygtukas--pirminis`), tad bet kokia šviesi spalva mygtuką paverstų
   neįskaitomu. Kiekvieno varianto kontrastas tikrinamas testu (>= 4.5:1),
   lygiai kaip P75 kalendoriaus spalvos.

   Šviesioje temoje tekstas ant akcento yra baltas, tamsioje — beveik juodas
   (`#08120c`), todėl ir reikšmių poros: sodri tamsi / šviesi sodri.
   -------------------------------------------------------------------------- */

:root[data-akcentas="zalia"]     { --akcentas: var(--sp-zalia); }
:root[data-akcentas="melyna"]    { --akcentas: var(--sp-melyna); }
:root[data-akcentas="violetine"] { --akcentas: var(--sp-violetine); }
:root[data-akcentas="oranzine"]  { --akcentas: var(--sp-oranzine); }
:root[data-akcentas="pilka"]     { --akcentas: var(--sp-pilka); }

.akcentas[data-akcentas="zalia"]     { --spalva: var(--sp-zalia); }
.akcentas[data-akcentas="melyna"]    { --spalva: var(--sp-melyna); }
.akcentas[data-akcentas="violetine"] { --spalva: var(--sp-violetine); }
.akcentas[data-akcentas="oranzine"]  { --spalva: var(--sp-oranzine); }
.akcentas[data-akcentas="pilka"]     { --spalva: var(--sp-pilka); }

/* Rinkikliu nustatymuose. Apskritimai — pati spalva ir yra etiketė. */
.akcentai { display: flex; gap: 0.625rem; padding: 0.25rem 0; }

.akcentas {
  /* Numatytoji — perrašoma žemiau pagal spalvos raktą. Nežinomas raktas
     duotų neutralų apskritimą, ne nematomą. */
  --spalva: var(--krastas);
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: var(--spalva);
  cursor: pointer;
  /* Paspaudimo zona >= 44 px (iOS minimumas), nors apskritimas 32 px. */
  box-shadow: 0 0 0 0.375rem transparent;
}

/* ‼️ Pasirinktas žymimas RĖMELIU, ne spalvos pakeitimu: pati spalva yra
   informacija, ir jos keisti pasirinkimui negalima. Tarpas tarp rėmelio ir
   apskritimo — kad rėmelis matytųsi ir ant panašaus fono. */
.akcentas--pasirinktas {
  border-color: var(--tekstas);
  box-shadow: 0 0 0 2px var(--fonas) inset;
}

.akcentas:focus-visible { outline: 2px solid var(--tekstas); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   5.1 · Žinutė namo — gavėjai ir šablonai
   -------------------------------------------------------------------------- */

.gavejas {
  padding: 0.75rem 0;
  border-top: 1px solid var(--krastas);
}

.gavejas:first-child { border-top: 0; }

.gavejas__virsus { display: flex; align-items: center; gap: 0.5rem; }
.gavejas__vardas { flex: 1; min-width: 6rem; }

/* ‼️ Šablonų sąrašas kintamo ilgio, ir kiekvienas turi savo [×]. Numeracija
   piešiama CSS'u — HTML'e ji būtų dar viena vieta, kurią reikia perskaičiuoti
   ištrynus vidurinį variantą. */
.sablonai { counter-reset: sablonas; margin-top: 0.5rem; }

.sablonas {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.sablonas::before {
  counter-increment: sablonas;
  content: counter(sablonas) '.';
  padding-top: 0.5rem;
  color: var(--labai-blankus);
  font-variant-numeric: tabular-nums;
}

.sablonas__tekstas {
  flex: 1;
  min-height: 3.5rem;
  padding: 0.4375rem 0.5rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--tekstas);
  background: var(--pavirsius);
  border: 1px solid var(--krastas);
  border-radius: 0.375rem;
  resize: vertical;
}

/* Priminimas apie kintamuosius — po laukais, ne virš jų: klausimas „kaip
   įrašyti kilometrus" kyla rašant, ne prieš pradedant. */
.sablonu__uzuomina {
  margin: 0.25rem 0 0;
  color: var(--blankus);
  font-size: 0.8125rem;
  font-family: var(--mono);
}

/* ‼️ P103: „[+ Pridėti variantą]  10 / 30".

   Skaitiklis stovi ŠALIA mygtuko, ne po forma: jis kalba apie tą patį veiksmą,
   ir atsakymas „ar galiu dar" turi būti ten, kur klausiama. Ties riba mygtukas
   užgesinamas, o paaiškinimas atsiranda po eilute — klaida po paspaudimo
   reikštų, kad forma leido pabandyti ir tik tada pasakė (P90). */
.sablonu-eile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sablonu-eile__kiek {
  color: var(--blankus);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

/* Pasiekus ribą skaitiklis nustoja būti statistika ir tampa atsakymu „ne". */
.sablonu-eile__kiek--riba { color: var(--demesio); }

/* --------------------------------------------------------------------------
   P91 · Šablono peržiūra

   Burbulai, o ne eilutės sąraše: žinutė bus perskaityta telefone, ir peržiūra
   turi atrodyti taip pat. `white-space: pre-wrap` — šablonai daugiaeiliai, ir
   eilučių lūžiai yra teksto dalis.
   -------------------------------------------------------------------------- */

.perziura-zinutes { margin-top: 0.75rem; }

.perziura-zinutes__pavyzdys {
  margin: 0 0 0.5rem;
  color: var(--blankus);
  font-size: 0.8125rem;
  font-family: var(--mono);
}

.perziura-burbulas {
  margin-bottom: 0.5rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--krastas);
  border-radius: 1rem 1rem 1rem 0.25rem;
  background: var(--pavirsius);
  font-size: 0.9375rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Nė vieno šablono — peržiūrėti nėra ko, ir tai irgi atsakymas. */
.perziura-zinutes__tuscia {
  margin: 0;
  color: var(--demesio);
  font-size: 0.875rem;
}

/* ‼️ P90: eilutė yra MYGTUKAS į formą, ne rinkinys atskirų laukų.
   Anksčiau kiekvienas laukas buvo redaguojamas vietoje, ir „naujas gavėjas"
   neturėjo kur atsirasti — nes atsirasti jam reikėjo jau išsaugotam. */
.gavejas__eilute {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.625rem 0.5rem;
  font: inherit;
  text-align: left;
  color: var(--tekstas);
  background: none;
  border: 0;
  border-radius: 0.5rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .gavejas__eilute:hover {
    background-color: color-mix(in srgb, var(--tekstas) 6%, transparent);
  }
}

.gavejas__eilute:active {
  background-color: color-mix(in srgb, var(--tekstas) 10%, transparent);
}

.gavejas__vardas { flex: 1; font-weight: 600; }
.gavejas__tel { color: var(--blankus); font-size: 0.875rem; }

/* Neaktyvus gavėjas lieka MATOMAS, tik blankus: išjungtas ≠ ištrintas. */
.gavejas--neaktyvus .gavejas__vardas,
.gavejas--neaktyvus .gavejas__tel { color: var(--labai-blankus); }

.gavejas__zyme {
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  color: var(--blankus);
  background: var(--pilkas-fonas);
  border-radius: 1rem;
}

/* ‼️ Kliūtis, ne klaida. Rodoma PRIEŠ paspaudimą — mygtukas neaktyvus, o
   šalia parašyta, ko trūksta. Klaida po paspaudimo reikštų, kad forma leido
   pabandyti ir tik tada pasakė. */
.gav-kliutis {
  margin: 0.75rem 0 0;
  color: var(--demesio);
  font-size: 0.875rem;
}

/* P89: „Šiandien: išsiųsta 15:09  [Atstatyti]" */
.zinutes-siandien {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--pilkas-fonas);
  color: var(--blankus);
  font-size: 0.875rem;
}

.zinutes-siandien__veiksmas {
  margin-left: auto;
  padding: 0.25rem 0.625rem;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--akcentas);
  background: none;
  border: 1px solid var(--akcentas);
  border-radius: 0.375rem;
  cursor: pointer;
}

.ivestis--laikas { flex: 0 0 7rem; min-width: 0; }
.laukas__bruksnys { color: var(--blankus); }

/* P94: „Pertrauka tarp žinučių  [1] val." Vardas ilgesnis nei „Siųsti tarp",
   o `.laukas__vardas` stulpelis fiksuotas — be `auto` jis lūžtų per vidurį. */
.laukas__vardas--platus { flex: 0 0 auto; }
.ivestis--valandos { flex: 0 0 4rem; min-width: 0; }
.laukas__vienetas { font-size: 0.8125rem; color: var(--labai-blankus); }

/* --------------------------------------------------------------------------
   4.9 · Pranešimai nustatymuose

   Trys tipai vienas po kito — `.jungiklis` yra ta pati eilutė kaip „Pietūs"
   dienos ekrane, tik sudėta stulpeliu. Naujo komponento čia nereikia.
   -------------------------------------------------------------------------- */

.jungiklis--eilute { padding: 0.4375rem 0; }

/* ‼️ docs/pwa-push.md §1: iOS push veikia TIK įdiegtoje PWA. Vietoj jungiklio,
   kuris nieko nedarytų, rodomas sakinys — kitaip tai atrodo kaip klaida. */
.nu-push__uzuomina {
  margin: 0 0 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--pilkas-fonas);
  color: var(--blankus);
  font-size: 0.875rem;
  line-height: 1.45;
}

.ivestis {
  flex: 1;
  min-width: 8rem;
  padding: 0.4375rem 0.5rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--tekstas);
  background: var(--pavirsius);
  border: 1px solid var(--krastas);
  border-radius: 0.375rem;
}

/* P116: intervalo sąrašas naudoja tą patį `.ivestis`. Vietinė rodyklė ir
   sąrašo langas paliekami naršyklei — iOS jį rodo kaip ratuką, ir tai patogiau
   už bet ką, ką nupieštume patys. `max-width` saugo nuo ilgos eilutės
   („18:59 – 20:08 · 1h09 · Nufrezavau stalą") siaurame ekrane. */
select.ivestis {
  max-width: 100%;
  min-width: 0;
}

/* ‼️ P59: dekl__siulymas taisyklės pašalintos. Siūlymas gyveno ir kortelėje,
   ir dienos ekrane; antrasis buvo tik matomas, be jokio mygtuko šalia.
   Klausimas liko ten, kur yra ir atsakymas — modalas__siulymas. */

/* --- Dėžutė --------------------------------------------------------------- */

.grupe-antraste {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 1.75rem 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.grupe-antraste__n { margin-left: auto; color: var(--labai-blankus); font-weight: 400; }

.dezute__eilute {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  width: 100%;
  padding: 0.625rem 0;
  font: inherit;
  font-size: 0.9375rem;
  color: inherit;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--krastas);
  cursor: pointer;
}

.dezute__eilute:hover { background: var(--pilkas-fonas); }

.dezute__data {
  flex: 0 0 6rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.dezute__laikai {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--labai-blankus);
}

.dezute__zyme { margin-left: auto; color: var(--blankus); font-size: 0.875rem; }

.dezute__tuscia { color: var(--blankus); font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   P21 · „įvesta" prie didžiojo skaičiaus
   Skaičius yra deklaracija. Kai ją įvedė žmogus, o ne sistema, tai turi
   matytis nepaspaudus nieko — bet ir neturi konkuruoti su pačiu skaičiumi.
   -------------------------------------------------------------------------- */
.skaitiklis__zyme {
  margin-left: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--blankus);
  vertical-align: middle;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   P22 · rankinis punch'as
   -------------------------------------------------------------------------- */

/* ✎ prie laiko. Rankinis įrašas neapsimeta geolokacijos faktu, todėl žymė
   yra dalis duomenų, o ne apdaila. */
.eil__ranka {
  margin-left: 0.4rem;
  font-size: 0.8125rem;
  color: var(--blankus);
}

/* Nepilna sesija: klausimas ten pat, kur matomas trūkumas. */
.truksta {
  margin: 0.5rem 0 0;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--krastas);
  border-radius: 0.5rem;
}

.truksta__klausimas {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.9375rem;
  color: var(--blankus);
}

.truksta__zenklas { color: var(--demesio); }

/* ‼️ P117: ĮRANKIS, NE KLAUSIMAS. Rankinis įėjimas juostos apačioje stovi
   kasdien, ir kasdien jis beveik niekam nereikalingas — todėl be rėmelio, be
   ženklo ir blankus. ⚠ blokas turi šauktis dėmesio; šitas turi tik būti
   pasiekiamas tada, kai jo prireiks. */
.truksta--tylus {
  margin-top: 0.25rem;
  padding: 0;
  border: 0;
}

.truksta--tylus .truksta__forma { margin-left: 2.25rem; }

.truksta__mygtukas {
  margin-left: auto;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--krastas);
  border-radius: 0.375rem;
  background: none;
  color: var(--tekstas);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.truksta__mygtukas:hover { border-color: var(--blankus); }

.truksta__forma {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.truksta__label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: var(--blankus);
}

.truksta__label .ivestis { width: 8rem; }

/* --------------------------------------------------------------------------
   4.3 · REDAGAVIMAS IR POVEIKIO PERŽIŪRA
   -------------------------------------------------------------------------- */

/* Įrašo eilutė yra mygtukas — visa, ne maža ikonėlė kampe. */
.irasas { display: flex; align-items: flex-start; gap: 0.25rem; }

.irasas__mygtukas {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.125rem 0.75rem;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.5rem 0.25rem;
  border: 0;
  border-radius: 0.375rem;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.irasas__mygtukas:hover { background: color-mix(in srgb, var(--tekstas) 6%, transparent); }

/* Punch'o trynimas laiko juostoje. Neaktyvus lieka matomas — jis paaiškina,
   kodėl importuoto liesti negalima. */
/* Trynimas. Rodomas TIK prie rankinių įrašų, todėl gali būti ryškus:
   jei mygtukas matomas, jis ir veikia (P26).
   32x32 - pirštui, ne pelei. Prilipęs prie eilutės, ne nuklydęs į kraštą. */
.trinti {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  margin-left: 0.25rem;
  padding: 0;
  border: 0;
  border-radius: 0.375rem;
  background: none;
  color: var(--klaida);
  font: inherit;
  font-size: 1.0625rem;
  line-height: 1;
  cursor: pointer;
}

.trinti:hover, .trinti:focus-visible { background: var(--klaida-fon); }

.mygtukas--pavojus { color: var(--klaida); }

/* Uždaryto mėnesio užraktas. */
.uzraktas {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0 0 1rem;
  padding: 0.75rem;
  border: 1px solid var(--krastas);
  border-radius: 0.5rem;
  font-size: 0.9375rem;
}

.uzraktas__antraste { font-weight: 600; }
.uzraktas__min { color: var(--blankus); }

.uzraktas__istorija {
  margin: 0;
  padding-left: 1rem;
  color: var(--blankus);
  font-size: 0.875rem;
  line-height: 1.6;
}

.uzraktas .mygtukas { align-self: flex-start; }

/* --------------------------------------------------------------------------
   P123 · MODALO KARKASAS — vienas visiems

   LAPAS IŠ APAČIOS (iOS sheet): prilipęs prie apatinio krašto, per visą plotį
   iki tų pačių 640 px, kaip ir programa, suapvalinti tik viršutiniai kampai.
   Aukštis auga pagal turinį iki 60vh; toliau slenka TIK turinys.

   ‼️ ANTRAŠTĖ IR MYGTUKAI NESLENKA. Iki tol modalas buvo vienas slenkamas
   stačiakampis, ir ilgas įrašų sąrašas nustumdavo mygtukus žemyn — ekrane
   likdavo tik sąrašas, o veiksmų nesimatydavo (ta pati P103 klaida).

   ‼️ TRYS KELIAI Į LAUKĄ, VISI TAS PATS: [×], fonas už lapo ir Escape.
   Nė vienas jų nieko neįrašo, todėl „Uždaryti" apatinėje eilutėje nereikia —
   ir jo ten nebėra nė viename modale.
   -------------------------------------------------------------------------- */
.dangtis {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  /* Iš APAČIOS, ne per vidurį: iš ten lapas ateina, ir ten yra nykštys. */
  align-items: flex-end;
  justify-content: center;
  background: color-mix(in srgb, #000 55%, transparent);
}

.modalas {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--plotis);
  /* 60vh yra RIBA, ne dydis: trumpas modalas lieka trumpas. */
  max-height: 60vh;
  /* ‼️ SAUGI ZONA — ANT PAČIO LAPO, ne ant apatinės eilutės: ji slepiama
     (viršvalandžių modalas, kai „+ Pridėti" netinka), ir tada turinys atsidurtų
     tiesiai po iPhone braukimo juosta. */
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--fonas);
  border: 1px solid var(--krastas);
  border-bottom: 0;
  border-radius: 0.75rem 0.75rem 0 0;
}

/* Antraštės eilutė — fiksuota, ~52 px. */
.modalas__virsus {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--krastas);
}

/* Rankenėlė. VIZUALINIS ŽENKLAS, kad lapas atėjo iš apačios — tempti jos
   nereikia: uždarymui jau yra trys keliai, ir ketvirtas būtų tik dar vienas. */
.modalas__virsus::before {
  content: '';
  position: absolute;
  top: 0.375rem;
  left: 50%;
  width: 2.25rem;
  height: 0.25rem;
  transform: translateX(-50%);
  border-radius: 0.125rem;
  background: var(--krastas);
}

.modalas__antraste { margin: 0; font-size: 1.0625rem; }

/* ‼️ NE `.mygtukas`. Uždarymas nėra veiksmas su duomenimis, todėl ir atrodyti
   kaip „Išsaugoti" neturi. Dydis — 44 px, kaip ir kitos piktogramos. */
.modalas__x {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.75rem;
  padding: 0;
  font: inherit;
  font-size: 1.375rem;
  line-height: 1;
  color: var(--labai-blankus);
  background: none;
  border: 0;
  border-radius: 0.5rem;
  cursor: pointer;
}

.modalas__x:hover { color: var(--tekstas); background: var(--pilkas-fonas); }

.modalas__x:focus-visible {
  outline: 2px solid var(--akcentas);
  outline-offset: -2px;
}

/* Vienintelė slenkanti dalis. */
.modalas__kunas {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.25rem;
}

/* Apatinė eilutė — fiksuota, ~64 px, daugiausia DU vienodo pločio mygtukai
   (`.mygtukas` yra `flex: 1`). Vienas veiksmas išsitempia per visą plotį:
   dalintis jam nėra su kuo. */
.modalas__mygtukai {
  flex: 0 0 auto;
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--krastas);
}

/* Netilpę į du: veiksmų sąrašas TURINYJE, vienas po kito per visą plotį
   (punch'o modalas). */
.modalas__veiksmai {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* Poveikio peržiūra: kas keičiama. Modalinė sąmoningai — tai paskutinis
   taškas, kuriame dar galima apsigalvoti. */
.pov-keitimas {
  margin: 0 0 1rem;
  color: var(--blankus);
  font-variant-numeric: tabular-nums;
}

.pov-eil {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--krastas);
  font-variant-numeric: tabular-nums;
}

.pov-eil--tyli { color: var(--blankus); }
.pov-eil__vardas { color: var(--blankus); }
.pov-eil__reiksme { text-align: right; }
.pov-eil__reiksme b { font-weight: 600; }

.pov-laukiam { color: var(--blankus); }

/* Uždarytas mėnuo — pagal jį JAU SUMOKĖTA, todėl įspėjimas ryškus. */
.pov-ispejimas {
  margin: 0.75rem 0 0;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--klaida);
  border-radius: 0.5rem;
  color: var(--klaida);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Nepilna diena: vietoj siūlymo — kvietimas jį užbaigti (P25). */
.siulymas--nepilna { color: var(--demesio); }

/* Laikotarpio santrauka: kiek dienų bus paliesta (P27). */
.lk-santrauka {
  margin: 0.5rem 0 0;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--pilkas-fonas);
  color: var(--tekstas);
  font-size: 0.9375rem;
}

.lk-santrauka:empty { display: none; }

/* --------------------------------------------------------------------------
   P30 · sesijos trukmė ir aprašymas laiko juostoje

   Eilutė gyvena TARP `->` ir `<-`, todėl įtraukta tiek, kad būtų aišku, jog
   ji priklauso tam intervalui, o ne yra dar vienas punch'as.
   -------------------------------------------------------------------------- */
.sesija {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  /* ‼️ P126: vertikalaus tarpo čia NĖRA. Jį duoda pati `.trukme` dėžė, ir
     duoda simetriškai; pridėtas `padding` būtų trečias tarpas iš eilės. */
  padding: 0 0 0 2.25rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* ‼️ P115: TRUKMĖ YRA MYGTUKAS — ir sesijos, ir tarpo, tas pats.
   Iki tol jos atrodė vienodai, o elgėsi skirtingai; vienodai atrodantis
   dalykas privalo daryti tą patį. Mygtuku atrodyti nereikia: rėmelis kas
   antroje juostos eilutėje virstų tinkleliu. Paspaudimo zona 44px (iOS
   zona gaunama iš `min-height`, ne iš matomo dydžio — tokia pat, kaip
   `.eil__laikas`, kad tarpai virš ir po trukme sutaptų (P126). */
.trukme {
  min-height: 2rem;
  padding: 0 0.25rem;
  margin-left: -0.25rem;
  border: 0;
  border-radius: 0.375rem;
  background: none;
  color: var(--blankus);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: left;
  cursor: pointer;
}

.trukme:hover, .trukme:focus-visible {
  background: var(--pilkas-fonas);
  color: var(--tekstas);
}

/* Tarpas yra darbo PERTRŪKIS, todėl pilkesnis už sesiją. Skiriasi svoris,
   ne elgesys: mygtukas ir zona tie patys. */
.tarpas .trukme { color: var(--labai-blankus); }

/* Aprašymas ateina iš įrašo (P30), pastaba — iš punch'o (P115). Abu yra
   naudotojo tekstas, todėl ryškesni už išvestinę trukmę. */
.sesija__tekstas,
.uzrasas { color: var(--tekstas); }

.sesija__tekstas::before,
.uzrasas::before {
  content: "·";
  margin-right: 0.5rem;
  color: var(--labai-blankus);
}

/* --------------------------------------------------------------------------
   P113 · tarpas tarp dviejų sesijų

   Ta pati įtrauka, kaip `.sesija` — abi eilutės yra tarpai tarp rodyklių, tik
   viena rodo buvimą, kita jo nebuvimą. Todėl skiriasi ne vieta, o SVORIS:
   sesija yra darbas, tarpas — jo pertrūkis, ir jis pilkesnis.
   -------------------------------------------------------------------------- */
.tarpas {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0 0 0 2.25rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* P114/P115: atmestas tarpas kortelėje nepiešiamas visai, o atskirų
   „pridėti priežastį" ir [×] nebėra — juos pakeitė modalas, kurį atidaro
   pati trukmė. Todėl `.tarpas` savo vidaus stilių nebeturi: eilutė yra
   trukmė ir, jei yra, pastaba — lygiai kaip `.sesija`. */

/* --------------------------------------------------------------------------
   P31 · grįžimo juosta iš peržiūros dėžutės
   -------------------------------------------------------------------------- */
.seka {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--pilkas-fonas);
  font-size: 0.875rem;
}

.seka__atgal, .seka__kita {
  padding: 0.25rem 0.5rem;
  border: 0;
  border-radius: 0.375rem;
  background: none;
  color: var(--tekstas);
  font: inherit;
  cursor: pointer;
}

.seka__atgal:hover, .seka__kita:hover { background: var(--pavirsius); }
.seka__kita { margin-left: auto; }
.seka__vieta { color: var(--blankus); font-variant-numeric: tabular-nums; }

.mygtukas[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   ‼️ P119: `.patikslink*` TAISYKLIŲ ČIA NEBĖRA.

   P35 buvo padaręs klasterio įrašui atskirą eilutę su [Atvykimas][Išvykimas],
   P39a išdėliojęs keturis mygtukus dviem eilutėmis, kad tilptų. Dabar visi
   veiksmai gyvena punch'o modale, o juostos eilutė — ir sulankstytoje
   grupėje, ir už jos — yra tiesiog laikas.
   -------------------------------------------------------------------------- */

/* Dėžutės eilutė: klausimas dešinėje, data kairėje (P34). */
.dezute__zyme { color: var(--blankus); }

/* --------------------------------------------------------------------------
   P36 · vienas dienos redagavimo ekranas

   Trys skiltys viename sraute: DIENA, LAIKAI, ĮRAŠAI. Skiltys atskirtos
   linija, o ne atskirais ekranais — grįžimo mygtukų grandinės nebelieka.
   -------------------------------------------------------------------------- */
.skiltis--forma {
  margin: 1.5rem 0 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--krastas);
}

/* Įrašo eilutė redagavimo ekrane: turinys + [✎] + [×] viena juosta. */

/* Forma išsiskleidžia TOJE PAČIOJE vietoje, po savo eilute. */
.irasas-forma {
  margin: 0 0 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--krastas);
  border-radius: 0.5rem;
  background: var(--pilkas-fonas);
  list-style: none;
}

/* P37 · atrakinimo dialogas */
.atr-menuo {
  margin: 0 0 0.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--klaida);
  border-radius: 0.5rem;
  color: var(--klaida);
  font-size: 0.9375rem;
  line-height: 1.5;
}

#atrakinimo-dangtis .laukas { margin-bottom: 0.5rem; }

/* P42 · [Deklaruoti] šalia siūlymo — įvedimas ten, kur pasiūlymas */
.siulymas__mygtukas {
  min-height: 2.25rem;
  margin-left: 0.75rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--akcentas);
  border-radius: 0.375rem;
  background: var(--akcentas-fon);
  color: var(--akcentas);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.siulymas__mygtukas:hover { border-color: var(--tekstas); }

.laikai { display: flex; gap: 0.375rem; }
.laikai .ivestis { width: 7rem; }

/* P43 · „Nereikia" — tylesnis už [Deklaruoti]: tai atsisakymas, ne veiksmas */
.siulymas__mygtukas--tylus {
  border-color: var(--krastas);
  background: none;
  color: var(--blankus);
}

.siulymas__mygtukas--tylus:hover { color: var(--tekstas); }

/* Numatytoji „Dirbta" reikšmė — pasiūlymas, ne įvestis. */
.skaicius__reiksme--numatytoji { color: var(--blankus); }

/* --------------------------------------------------------------------------
   P45 · paskutinis signalas
   -------------------------------------------------------------------------- */
.signalas {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--labai-blankus);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   P46 · kalendorius

   Diena turi vieną FONĄ (kokia ji yra) ir iki trijų TAŠKŲ (kas joje yra).
   Du skirtingi klausimai — todėl ir du skirtingi vaizdiniai sluoksniai.
   -------------------------------------------------------------------------- */
.menuo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}

.menuo__vardas {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 600;
}

.kal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}

.kal__antraste {
  padding: 0.25rem 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--blankus);
}

.kal__tuscia { min-height: 2.75rem; }

.kal__diena {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  /* ‼️ 44px — iOS minimumas. Kalendoriuje langeliai maži, ir nepataikymas
     čia atidarytų ne tą dieną. */
  min-height: 2.75rem;
  padding: 0.25rem 0;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  background: var(--pavirsius);
  color: var(--tekstas);
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.kal__diena:hover:not([disabled]) { border-color: var(--blankus); }

.kal__nr { font-size: 0.9375rem; line-height: 1; }

/* Fonai — „kokia tai diena" */
/* ‼️ P75: kiekvienas tipas — SAVA spalva, ne atspalvis. Anksčiau šventinė ir
   atostogos dalijosi vienu fonu ir skyrėsi tik rėmeliu; gruodžio 24-26 dėl to
   nesimatė. Skaičius visur lieka tamsus ant šviesaus fono. */
.kal__diena--laisva       { background: var(--kal-laisva); }
.kal__diena--atostogos    { background: var(--kal-atostogos); }
.kal__diena--tevadienis   { background: var(--kal-tevadienis); }
.kal__diena--komandiruote,
.kal__diena--liga         { background: var(--kal-komandiruote); }
.kal__diena--kelione      { background: var(--kal-kelione); }

/* RYŠKIAUSIA: vienintelė spalva, reiškianti „nedirbama pagal įstatymą".
   ‼️ P76: rėmelio NĖRA. Sodri rausva išsiskiria pati, o rėmelis buvo
   dekoracija — vienintelis tipas su juo atrodė kaip išimtis be priežasties.
   Skaičiaus paryškinimas lieka: jis tos pačios spalvos darbas, ne papildoma
   linija. */
.kal__diena--sventine {
  background: var(--kal-sventine);
  font-weight: 600;
}

/* ‼️ Ta pati spalvų šeima, bet priešingas svoris: „nedirbta darbo dieną" yra
   KLAUSIMAS, ne faktas. Blyškus fonas ir punktyras — kad su švente
   nesusilietų net žvilgtelėjus. */
.kal__diena--nedirbta {
  background: var(--kal-nedirbta);
  border-color: var(--kal-nedirbta-krastas);
  border-style: dashed;
}

.kal__diena--siandien { outline: 2px solid var(--tekstas); outline-offset: -2px; }

.kal__diena--ateitis { opacity: 0.35; cursor: default; }
.kal__diena--tuscia  { background: none; cursor: default; color: var(--labai-blankus); }
.kal__diena[disabled] { cursor: default; }

/* Taškai — „kas toje dienoje yra" */
.kal__taskai { display: flex; gap: 0.1875rem; min-height: 0.375rem; }

.kal__taskas {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  display: inline-block;
}

.kal__taskas--virsvalandziai { background: var(--akcentas); }
/* P134: buvęs `--iseiga` — dabar BANKAS, ir jis gauna tašką abiem kryptimis.
   Spalva ta pati: ji jau reiškė „ne viršvalandžiai". „Reikia peržiūrėti"
   taško nebėra — jo vieta yra kortelės mygtukas, ne kalendorius. */
.kal__taskas--bankas         { background: var(--iseiga); }

.kal-suvestine {
  margin: 1rem 0 0;
  padding: 0.75rem;
  border-radius: 0.5rem;
  background: var(--pilkas-fonas);
  font-size: 0.9375rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

.kal-suvestine__uzraktas { color: var(--klaida); }

/* P71 · dirbta − norma yra STATISTIKA, ne sprendimas — todėl pilka, kaip ir
   dienos kortelėje. Žalias ar raudonas ženklas girtų arba bartų už tai, ko
   niekas neužsakė. */
.kal-suvestine__skirtumas { color: var(--blankus); }

.legenda { margin: 0.75rem 0 0; font-size: 0.875rem; }
.legenda summary { color: var(--blankus); cursor: pointer; }

.legenda__kunas {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0.5rem 0 0;
}

.legenda__eil { display: flex; align-items: center; gap: 0.5rem; color: var(--blankus); }

.legenda__fonas {
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid var(--krastas);
  border-radius: 0.25rem;
  display: inline-block;
}

/* P47 · senas bankas — rodomas, bet pažymėtas: jis buvo, tik nebeskaičiuojamas */
.bankas__zyme {
  margin-left: 0.5rem;
  font-size: 0.75rem;
  color: var(--labai-blankus);
}

/* --------------------------------------------------------------------------
   4.5 · dvi visada matomos eilutės

   Sąlyginis mygtukas verčia kaskart tikrinti, ar jis šiandien yra. Eilutė,
   kuri visada toje pačioje vietoje, atsako neieškant.
   -------------------------------------------------------------------------- */
.eilutes {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.75rem 0 0;
}

.eilute {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--krastas);
  border-radius: 0.5rem;
  background: var(--pavirsius);
  color: var(--tekstas);
  font: inherit;
  font-size: 0.9375rem;
  text-align: left;
  cursor: pointer;
}

.eilute:hover { border-color: var(--blankus); }

.eilute__vardas  { color: var(--blankus); }
.eilute__reiksme { font-variant-numeric: tabular-nums; text-align: right; }
.eilute__reiksme b { font-weight: 600; }

.eilute__siulymas {
  margin-left: 0.5rem;
  padding: 0.0625rem 0.375rem;
  border-radius: 0.25rem;
  background: var(--akcentas-fon);
  color: var(--akcentas);
  font-size: 0.8125rem;
}

.eilute__zyme { margin-left: 0.5rem; font-size: 0.75rem; color: var(--labai-blankus); }

/* ‼️ P143: PERTRAUKOS DIENOS PASTABA — PO SKAIČIUMI, ne šalia jo.
   „🏦 Bankas 0h · apskaita nuo šios dienos" vienoje eilutėje skaitosi kaip
   dienos rezultatas su prierašu; po skaičiumi ji akivaizdžiai yra paaiškinimas,
   kodėl skaičius toks. Dydis ir spalva tie patys, kaip `.eilute__zyme`:
   abi kalba apie tą pačią ribą, tik iš skirtingų jos pusių. */
.eilute__pastaba {
  display: block;
  font-size: 0.75rem;
  font-variant-numeric: normal;
  color: var(--labai-blankus);
}

/* Modalų TURINIO klasės. Karkasas — `.modalas__virsus` / `__kunas` /
   `__mygtukai` — gyvena vienoje vietoje, aukščiau prie `.dangtis`. */
.modalas__data { margin: 0 0 1rem; color: var(--blankus); }

.modalas__siulymas {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0.75rem 0 0;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--akcentas-fon);
  color: var(--akcentas);
  font-size: 0.9375rem;
}

.modalas__istorija {
  margin: 1.25rem 0 0.25rem;
  color: var(--blankus);
  font-size: 0.875rem;
}

.irasai__tuscia { color: var(--labai-blankus); list-style: none; padding: 0.5rem 0; }

.bankas__likutis {
  margin: 0 0 1rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  background: var(--pilkas-fonas);
  font-variant-numeric: tabular-nums;
}

/* P49 · „Nėra ką deklaruoti" — konstatavimas, ne kvietimas veikti */
.modalas__siulymas--tylus {
  background: var(--pilkas-fonas);
  color: var(--blankus);
}


/* --------------------------------------------------------------------------
   4.6 · „Viršvalandžiai" tabas — mėnesio suvestinė, laiškas, nustatymai

   Sąrašas rodo TIK nukrypimus, todėl eilučių būna vienetai, ne dešimtys.
   Dėl to jos gali sau leisti būti aukštos ir skaitomos, o ne tankios.
   -------------------------------------------------------------------------- */

.ekranas__ikona {
  margin-left: auto;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 0;
  background: none;
  color: var(--blankus);
  font-size: 1.25rem;
  cursor: pointer;
}

.ekranas__ikona:hover { color: var(--tekstas); }

.at-suma {
  margin: 0.75rem 0 1.25rem;
  padding: 0.75rem 0.875rem;
  background: var(--pilkas-fonas);
  border: 1px solid var(--krastas);
  border-radius: 0.5rem;
  font-variant-numeric: tabular-nums;
}

.at-suma__eil {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.125rem 0;
}

.at-suma__eil dt { color: var(--blankus); }
.at-suma__eil dd { margin: 0; font-weight: 600; }

/* ‼️ P129: ⚡ ir 🏦 yra `dirbta` DALYS, ne priedai — todėl įtraukti, o ne
   atskira sekcija. Įtrauka yra visas ženklas, kurio čia reikia: skaičiai
   lieka toje pačioje dešinėje kolonoje, ir suma skaitoma be perskaičiavimo. */
.at-suma__eil--dalis { padding-left: 1rem; }
.at-suma__eil--dalis dt,
.at-suma__eil--dalis dd { font-size: 0.9375rem; color: var(--blankus); }
.at-suma__eil--dalis dd { font-weight: 500; }

/* --------------------------------------------------------------------------
   P129 · dienų sąrašas mėnesio suvestinėje

   Tankus, monospace, kaip laiko juosta (P126): tai sąrašas skaičiavimui
   patikrinti, o ne kortelė kiekvienai dienai.
   -------------------------------------------------------------------------- */
.at-dienos__sarasas { list-style: none; margin: 0; padding: 0; }

.at-diena__mygtukas {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  width: 100%;
  min-height: 2rem;
  padding: 0.125rem 0.375rem;
  border: 0;
  border-radius: 0.375rem;
  background: none;
  color: var(--tekstas);
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  text-align: left;
  cursor: pointer;
}

.at-diena__mygtukas:hover { background: var(--pilkas-fonas); }

.at-diena__data { color: var(--blankus); }

/* Buvimas ir apskaita — ta pati pora ir ta pati tvarka, kaip skaitiklyje. */
.at-diena__laikai { color: var(--blankus); }
.at-diena__laikai b { font-weight: 600; color: var(--tekstas); }

/* Ženkleliai prisispaudžia prie dešinio krašto — jie yra išimtis, ne stulpelis. */
.at-diena__zenklas {
  font-size: 0.8125rem;
  color: var(--blankus);
  white-space: nowrap;
}

.at-diena__zenklas:first-of-type { margin-left: auto; }

.at-suma__zyme {
  margin-left: 0.5rem;
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--blankus);
}

.at-sarasas { list-style: none; margin: 0; padding: 0; }

.at-skiltis {
  margin: 1.5rem 0 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--blankus);
}

.at-eil {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  border-top: 1px solid var(--krastas);
}

.at-eil:last-child { border-bottom: 1px solid var(--krastas); }

/* ‼️ 44x44 - iOS minimumas. Langelis atsako į vienintelį klausimą, kurio
   sistema nežino, ir nepataikymas čia reiškia ne tą lapą. */
.at-eil__langelis {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.875rem 0 0 0.25rem;
}

.at-eil__mygtukas {
  flex: 1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.625rem 0.25rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.at-eil__mygtukas:hover { background: var(--pavirsius); }

.at-eil__data {
  flex: 0 0 3rem;
  color: var(--blankus);
  font-variant-numeric: tabular-nums;
}

.at-eil__tipas { color: var(--tekstas); }

.at-eil__pastaba {
  flex: 1 0 100%;
  padding-left: 3.5rem;
  color: var(--blankus);
  font-size: 0.9375rem;
}

.laiskas__zyme {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--demesio);
}

.laukas--forma {
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: var(--blankus);
}

.ivestis--tekstas {
  width: 100%;
  font-family: var(--mono);
  font-size: 0.9375rem;
  line-height: 1.5;
  resize: vertical;
}

.nu-santrauka {
  margin: 0.25rem 0 0.5rem;
  font-variant-numeric: tabular-nums;
}

/* P60 · mėnesio suma modalo viršuje ir grupių antraštės sąraše */
.modalas__suma {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.irasai__skiltis {
  margin-top: 0.5rem;
  padding: 0.375rem 0 0.125rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--labai-blankus);
}


/* --------------------------------------------------------------------------
   P72 · šventės nustatymuose ir metų/mėnesio rinkiklis
   -------------------------------------------------------------------------- */

/* Antraštė yra mygtukas, bet atrodo kaip antraštė: paspaudžiamumą rodo
   punktyras, ne rėmelis — kitaip juosta virstų trijų mygtukų eile. */
button.menuo__vardas {
  font-family: inherit;
  color: var(--tekstas);
  background: none;
  border: 0;
  border-bottom: 1px dashed var(--krastas);
  cursor: pointer;
}

button.menuo__vardas:hover { border-bottom-color: var(--blankus); }

.menesiu-rinkiklis {
  margin: 0.75rem 0;
  padding: 0.75rem;
  background: var(--pavirsius);
  border: 1px solid var(--krastas);
  border-radius: 0.5rem;
}

.menesiu-rinkiklis__tinklelis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.375rem;
  margin-top: 0.5rem;
}

.rink-menuo {
  min-height: 2.75rem;
  font: inherit;
  color: var(--tekstas);
  background: var(--fonas);
  border: 1px solid var(--krastas);
  border-radius: 0.5rem;
  cursor: pointer;
}

.rink-menuo:hover:not(:disabled) { border-color: var(--blankus); }

/* Mėnuo be duomenų — pilkas, bet PASPAUDŽIAMAS: tuščias mėnuo irgi yra
   atsakymas („nieko nebuvo"), ir jį pamatyti turi būti galima. */
.rink-menuo--tuscias { color: var(--labai-blankus); }

/* Ateities mėnuo — pusiau permatomas ir nepaspaudžiamas: jo dar nėra. */
.rink-menuo:disabled { opacity: 0.35; cursor: not-allowed; }

.rink-menuo--dabartinis {
  border-color: var(--akcentas);
  color: var(--akcentas);
  font-weight: 600;
}

.nu-sventes { list-style: none; margin: 0.25rem 0 0.75rem; padding: 0; }

.nu-svente {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--krastas);
  font-variant-numeric: tabular-nums;
}

.nu-svente__data { flex: 0 0 3.5rem; color: var(--blankus); }
.nu-svente__vardas { flex: 1; }
.nu-svente__zyme { color: var(--labai-blankus); font-size: 0.8125rem; }

/* Kilnojamos šventės nustatymuose — kiekviena savo eilutėje su tų metų data. */
.nu-svente__auto { display: block; }

/* 4.8 · naujos versijos juosta. Virš visko, įskaitant modalus: ji apie pačią
   programą, o ne apie tai, kas joje atidaryta. */
.nauja-versija {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  max-width: var(--plotis);
  margin: 0 auto;
  padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom));
  background: var(--pavirsius);
  border-top: 1px solid var(--krastas);
  font-size: 0.9375rem;
}

.nauja-versija .mygtukas { width: auto; margin: 0; }

/* --------------------------------------------------------------------------
   P73 · nustatymai sulankstomose grupėse

   `<details>`, ne savas jungiklis: atidarymas, klaviatūra ir „viena atvira
   nekeičia kitų" ateina iš naršyklės. Antraštėje — dabartinė reikšmė, kad
   atsakymą „kiek dabar" būtų galima gauti neatidarius.
   -------------------------------------------------------------------------- */

/* ‼️ P79: ATVIRA sekcija turi savo foną, uždaryta — ne.

   Iki tol abi atrodė vienodai, ir „Geofence" turinys tęsėsi be jokios ribos
   iki kitos antraštės: iš vaizdo nesimatė nei kuri atidaryta, nei kur ji
   baigiasi. Skiriamasis ženklas yra FONAS, o ne linija — linija pasako, kad
   čia riba, bet nepasako, kuri pusė kam priklauso.

   Kraštai išeina už teksto stulpelio (`margin-inline` neigiamas), todėl
   antraštės lieka sulygiuotos su likusiu ekranu, o spalvota dėžė matosi
   platesnė už turinį — kaip ir turi būti dėžė. */
/* ‼️ P87/P88: VIETA ABIEM KRAŠTINĖMS REZERVUOTA VISADA.

   `transparent`, ne `none`: 3px atsirastų ir dingtų kartu su atidarymu, o
   sąrašas dėl to šokinėtų. Tas pats principas kaip P83 apatinei linijai. */
.nu-grupe {
  margin-inline: -0.875rem;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
}

/* ‼️ P84: PIRMOS SEKCIJOS VIRŠUS.
   `.ekranas__kunas` duoda 1.25rem, prie kurių prisideda antraštės 1rem —
   pirmas pavadinimas atsidurdavo 2.25rem nuo juostos, o visi kiti — 1rem nuo
   savo linijos. Tarpą čia atiduoda ta pati antraštė, kaip ir visiems kitiems.
   Apačioje 3rem lieka: ten po paskutine sekcija ir turi būti oro. */
#ekranas-nustatymai .ekranas__kunas { padding-top: 0; }

/* ‼️ P84: TARPO NEBĖRA — jį visą duoda antraštės `padding`.

   Iki tol atstumai apie liniją buvo nelygūs: tekstas -> 0.75rem -> LINIJA ->
   1rem tarpo + 0.75rem padding -> kitas tekstas. Linija sėdėjo 0.75 nuo vienos
   pusės ir 1.75 nuo kitos, todėl kiekviena sekcija atrodė pastumta žemyn.

   Su vienodu `padding` ir be `margin` linija atsiduria tiksliai per vidurį:
   1rem iš abiejų pusių. Tarpo perkėlimas į `padding` turi ir antrą naudą —
   atviros sekcijos fonas apima tą tarpą, todėl atidarant niekas nešokteli. */

/* ‼️ P88: SKIRIAMOJI LINIJA — `box-shadow`, NE `border`.

   Iki P88 ji gyveno `border-bottom`. Dabar tą pačią savybę užėmė 3px akcento
   kraštinė, ir dvi ribos kovotų dėl vienos vietos: laimėtų vėlesnė, o kuri ji
   bus, priklausytų nuo failo tvarkos — būtent tokia klaida ir yra nematoma.

   `box-shadow` čia tinka geriau nei bet kuris kitas kelias:
     - VIETOS NEUŽIMA, tad aukštis nekinta (3 punktas)
     - piešiama IŠ KARTO už kraštinės, t. y. tarpe tarp dviejų sekcijų
     - nesikerta su niekuo, ką jau naudoja `.nu-grupe`

   `:not(:last-of-type)` lieka iš P83: riba yra tarpas TARP dviejų, o po
   paskutinės nėra ko atskirti. */
.nu-grupe:not(:last-of-type) { box-shadow: 0 1px 0 var(--krastas); }

/* ‼️ Atviros sekcijos linija NEREIKALINGA — jos fono kraštas jau pasako, kur
   ji baigiasi, o dvi ribos viena po kitos konkuruotų. `transparent`, ne
   `none`: aukštis nepasikeičia, tad atidarant sąrašas nešokteli.

   Suapvalinimas irgi TIK atvirai: uždarytos fono neturi, o 1px linija su
   apvaliais kampais užsiriečia galuose ir atrodo kaip brūkšnys, ne riba. */
/* ‼️ P87/P88: RYŠKUS POŽYMIS IŠ ABIEJŲ PUSIŲ.

   Fonas ir šrifto svoris buvo per švelnūs — akis jų nepagaudavo, ir spaudžiama
   būdavo ne ta eilutė. Dvi juostos paverčia sekciją apibrėžtu bloku: viena
   pasako, kur jis prasideda, kita — kur baigiasi.

   VIRŠUJE ir APAČIOJE, ne kairėje: sekcijos yra horizontalios eilutės, ir jas
   riboja horizontalios kraštinės. Kairė būtų teisinga vertikaliame sąraše. */
.nu-grupe[open] {
  background: var(--atvira-sekcija);
  border-radius: 0.625rem;
  border-top-color: var(--akcentas);
  border-bottom-color: var(--akcentas);
  /* Atviros sekcijos skiriamoji linija nereikalinga — jos apatinė 3px juosta
     jau yra riba, ir 1px pilka po ja būtų antra riba toje pačioje vietoje. */
  box-shadow: none;
}

/* ‼️ P87/P88: VIRŠ ATVIROS SEKCIJOS LINIJOS IRGI NEREIKIA.

   Linija gyvena PRIEŠ ją einančios sekcijos apačioje, o atsidariusios viršuje
   yra 3px akcento juosta. Be šito jos atsidurtų viena virš kitos.

   ‼️ ABI KRYPTYS PATIKRINTOS, ir reikia BŪTENT šitos:
     po atvira    -> `.nu-grupe[open] { box-shadow: none }` (viršuje)
     virš atviros -> ši taisyklė
   CSS neturi „ankstesnio brolio" selektoriaus, o pasakyti reikia apie sekciją
   PRIEŠ atvirąją — todėl `:has(+ ...)`, o ne paprastas `+`. */
.nu-grupe:has(+ .nu-grupe[open]) { box-shadow: none; }

/* ‼️ P85: VISA EILUTĖ YRA VIENAS MYGTUKAS.

   Pavadinimas akcento spalvos, reikšmė blanki — atrodė kaip du atskiri
   elementai, nors paspaudžiamas visas ruožas. Fono atsakas per visą plotį tai
   pasako be nė vieno papildomo ženklo.

   `border-radius` toks pat kaip atviros sekcijos: paryškinimas neturi kyšoti
   už jos suapvalintų kampų. */
.nu-grupe__antraste {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  min-height: 2.75rem;         /* iOS 44 px paspaudimo zona — apatinė riba */
  padding: 1rem 0.875rem;      /* P84: vienodas viršuje ir apačioje */
  border-radius: 0.625rem;
  cursor: pointer;
  list-style: none;
  /* iOS pats piešia pilką blyksnį. Su savo `:active` jie susidėtų. */
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.12s;
}

/* ‼️ PERMATOMAS SLUOKSNIS, ne konkreti spalva.

   Eilutė gyvena ant DVIEJŲ fonų — puslapio ir atviros sekcijos. Įrašius
   „šiek tiek tamsesnį" toną, ant vieno jų jis būtų per silpnas, ant kito per
   stiprus, o ties atvira sekcija dar ir sutaptų su jos pačios fonu, todėl
   užvedimas atrodytų kaip atidarymas.

   `--tekstas` šviesioje temoje beveik juodas, tamsioje beveik baltas — tas
   pats mišinys vienoje temoje tamsina, kitoje šviesina, ir abiem atvejais
   reiškia „paspausta". */
@media (hover: hover) {
  .nu-grupe__antraste:hover {
    background-color: color-mix(in srgb, var(--tekstas) 6%, transparent);
  }
}

.nu-grupe__antraste:active {
  background-color: color-mix(in srgb, var(--tekstas) 10%, transparent);
}

/* Rodyklė piešiama pačių — numatytoji `▸` kiekvienoje platformoje kitokia. */
.nu-grupe__antraste::-webkit-details-marker { display: none; }

/* ‼️ P79: `›`, pasukta, o ne `⌄`.

   `⌄` sėdi savo eilutės apačioje, todėl apversta 180° ji nušokdavo aukštyn —
   ta pati rodyklė dviejose skirtingose vietose. `›` yra vertikaliai centre,
   tad ±90° sukimas yra simetriškas ir rodyklė nepajuda.

   `align-self: center` — antraštė lygiuojama pagal BAZINĘ liniją (vardas 12px,
   reikšmė 16px), o rodyklė teksto neturi ir tokioje eilėje nugrimztų. */
.nu-grupe__antraste::after {
  content: '›';
  margin-left: auto;
  align-self: center;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--blankus);
  transform: rotate(90deg);
  transition: transform 0.15s;
}

.nu-grupe[open] > .nu-grupe__antraste::after {
  transform: rotate(-90deg);
  color: var(--tekstas);
}

/* ‼️ P84: PAVADINIMAI — AKCENTO SPALVOS.

   Su `--labai-blankus` jie atrodė mažiau svarbūs už reikšmes šalia, nors kaip
   tik jie yra navigacija: reikšmė atsako „kiek dabar", o pavadinimas sako, kur
   spausti. Akcentas tą tvarką atstato.

   Antra nauda — pasirinkta spalva (P83) matoma net tada, kai VISOS sekcijos
   uždarytos. Iki tol vienintelė vieta, kur ją buvo galima pamatyti, buvo pats
   rinkiklis.

   Kontrastas su fonu tikrinamas testu abiem temoms (>= 4.5:1) — akcentas čia
   yra TEKSTAS ant fono, ne fonas po tekstu. */
.nu-grupe__vardas {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--akcentas);
}

/* ‼️ P100/P102: ATIDARYTA SEKCIJA SKIRIASI DYDŽIU, SVORIU IR SPALVA.

   P85 keitė tik svorį (500 -> 600), ir to nepakako: atidaryta sekcija vis tiek
   sunkiai atsiskyrė. Dabar signalai trys, ir jie skirtingų rūšių — dydis
   keičia raidės aukštį, svoris storį, spalva tamsumą, todėl vienas kitą
   sustiprina, o ne kartoja.

   ‼️ ŠITAS ATŠAUKIA P84 SPRENDIMĄ „spalva atidarius NEsikeičia".

   P84 bijojo, kad spalvos pakeitimas atims akcentą iš tos eilutės, į kurią
   žiūri, ir nutrauks vertikalų sąrašo ritmą. Mišinys tos baimės nepateisina:
   75 % lieka akcentas, tad spalva ta pati — tik pritraukta prie teksto tono.
   Ritmo tai nenutraukia, nes UŽDARYTOS eilutės (o jų visada dauguma) lieka
   grynu akcentu, ir būtent jos tą ritmą ir piešia.

   Kryptis pasirinkta ne dėl grožio: `--tekstas` yra ta spalva, kuri temoje
   turi didžiausią kontrastą su fonu. Traukiant į ją, kontrastas ant
   `--atvira-sekcija` visiems penkiems akcentams IŠAUGA (šviesiojoje +1.4-1.8,
   tamsiojoje +0.6-1.3), o ne sumažėja. Blogiausias atvejis yra 6.30:1 —
   gerokai virš P84 ribos 4.5:1. Abi temos, visi akcentai tikrinami testu. */
/* ‼️ P102: DYDIS 0.75 -> 0.9rem (+20 %), IR VIETOS JAM ATSIRADO NE ČIA.

   P100 to paties padaryti nepavyko: ilgiausioje eilutėje („DARBO LAIKAS" su
   „06:00 – 14:30 · pietūs 30min") 375 px ekrane buvo likę vos 7 px, ir jau
   0.8rem juos suėsdavo visus. Išvada tada ir buvo užrašyta: norint didesnio
   pavadinimo, pirma turi sutrumpėti REIKŠMĖ.

   P102 ją ir sutrumpino — „06:00–14:30 · 30min" (žr. app.js). Tas pats
   matavimas tikra naršykle po sutrumpinimo:

                              PRIEŠ P102          PO P102
     0.75rem (buvęs)          lūžta <368 px       lūžta <312 px   atsarga 63 px
     0.8rem                   lūžta <375 px       lūžta <319 px   atsarga 56 px
     0.9rem  (dabartinis)     lūžta <388 px       lūžta <332 px   atsarga 43 px
     0.95rem                  lūžta <395 px       lūžta <339 px   atsarga 36 px

   Reikšmės sutrumpinimas atlaisvino 56 px — aštuonis kartus daugiau, nei
   viso buvo. 0.9rem lieka 43 px atsargos, ir tai jau gerokai daugiau už
   paklaidą tarp šriftų (matuota Chrome su Segoe UI, telefone piešia SF Pro),
   dėl kurios P100 nedrįso pridėti net „truputį".

   ‼️ AUKŠTIS NEPASIKEIČIA. Reikšmė šalia yra 1rem, tad eilutės aukštį lemia
   ji, ne pavadinimas: 0.9rem (14.4 px) vis dar mažesnis. Todėl atidarant
   turinys po antrašte nepašoka — tas pats principas kaip P84 su `padding` ir
   P87 su `transparent` kraštine. */
.nu-grupe[open] > .nu-grupe__antraste .nu-grupe__vardas {
  font-size: 0.9rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--akcentas) 75%, var(--tekstas));
}

/* ‼️ P85: `--blankus`, ne `--tekstas`. Reikšmė yra SANTRAUKA — juoda spalva
   darė ją svarbesnę už pavadinimą, nors pavadinimas čia yra navigacija, o
   reikšmė tik atsako „kiek dabar", kol jos neatidarei. */
.nu-grupe__reiksme {
  color: var(--blankus);
  font-variant-numeric: tabular-nums;
}

/* Vidinis tarpas — turinys neliečia dėžės kraštų. */
.nu-grupe__kunas { padding: 0 0.875rem 1.125rem; }

/* ‼️ P79: „Išsaugoti" nustatymuose nėra ekrano veiksmas.

   `.ekranas__mygtukai` yra dienos deklaravimui, kur išsaugojimas ir YRA visas
   ekrano tikslas, todėl mygtukas ten per visą plotį. Spindulys metrais tokio
   svorio neturi: čia jis lieka žalias, bet tiek platus, kiek pats žodis, ir
   dešinėje — ten, kur veiksmas baigia eilutę. */
.nu-grupe__kunas .ekranas__mygtukai { justify-content: flex-end; }
.nu-grupe__kunas .ekranas__mygtukai .mygtukas {
  flex: 0 0 auto;
  padding-inline: 1.5rem;
}

/* --------------------------------------------------------------------------
   15.6 · ATSARGINĖS KOPIJOS (P145)

   ‼️ NE `.eilute`, nors atrodo panašiai. Ten yra MYGTUKAS — su rėmeliu,
   `cursor: pointer` ir `:hover`, kuris žada, kad paspaudus kažkas atsivers.
   Čia paspausti nėra kur, ir toks pat rėmelis meluotų kiekvienam, kas bandys.
   -------------------------------------------------------------------------- */

.kopijos {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: 0.25rem 0 0;
}

.kopijos__eilute {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.375rem 0;
  font-size: 0.875rem;
}

/* Vardai blankūs, reikšmės ne: skaitoma dešinė skiltis, kairė tik nurodo,
   kuri eilutė kuri. */
.kopijos__vardas { flex: 0 0 auto; color: var(--blankus); }

.kopijos__reiksme {
  text-align: right;
  /* Dydžiai ir datos vienas po kito — vienodo pločio skaitmenys neleidžia
     stulpeliui šokinėti kas kartą, kai KB virsta MB. */
  font-variant-numeric: tabular-nums;
}

/* „Katalogo nėra", „Kopijų dar nėra" — sakinys vietoj tuščios lentelės. */
.kopijos__zinute {
  margin: 0.25rem 0 0.5rem;
  color: var(--blankus);
  font-size: 0.875rem;
}

.nu-grupe__antraste:focus-visible {
  outline: 2px solid var(--akcentas);
  outline-offset: -2px;
  border-radius: 0.625rem;     /* P79/P83: tas pats radiusas kaip atviros dėžės */
}

/* --------------------------------------------------------------------------
   5.2 · STATISTIKA

   ‼️ GRAFIKAI YRA `div` SU `width: N%`, IR TAI SĄMONINGA.

   Bibliotekos čia nereikia: visi penki vaizdai yra „palygink kelis skaičius
   tarpusavyje", o tam užtenka pločio. Canvas ar SVG atneštų savo mastelius,
   savo prieinamumo problemas ir savo priklausomybę — dėl juostos, kurią
   naršyklė ir taip piešia.

   Skiltys naudoja `nu-grupe` iš nustatymų: viena sulankstymo mechanika visai
   programai, ir dar viena jos kopija anksčiau ar vėliau nuo jos atsiskirtų.
   -------------------------------------------------------------------------- */

/* Laikotarpio rinkiklis: keturi mygtukai, vienas įjungtas. */
.st-rinkiklis {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
}

.st-rinkiklis__mygtukas {
  flex: 1 1 auto;
  padding: 0.5rem 0.625rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--tekstas);
  background: var(--pavirsius);
  border: 1px solid var(--krastas);
  border-radius: 0.5rem;
  cursor: pointer;
  white-space: nowrap;
}

/* Pasirinktas neša akcentą — tą patį, kurį naudotojas pasirinko nustatymuose. */
.st-rinkiklis__mygtukas[aria-pressed="true"] {
  background: color-mix(in srgb, var(--akcentas) 14%, var(--pavirsius));
  border-color: var(--akcentas);
  font-weight: 600;
}

.st-rinkiklis__mygtukas:focus-visible {
  outline: 2px solid var(--akcentas);
  outline-offset: 1px;
}

.st-datos {
  display: flex;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
}

.st-datos .laukas { flex: 1 1 0; margin: 0; }

/* Kuris ruožas rodomas — po rinkikliu, blankiai: tai patvirtinimas, ne veiksmas. */
.st-ruozas {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  color: var(--blankus);
  font-variant-numeric: tabular-nums;
}

.st-tuscia {
  margin: 1.5rem 0;
  text-align: center;
  color: var(--blankus);
}

/* --- Skaičių poros: vardas kairėje, reikšmė dešinėje --------------------- */
.st-suma {
  margin: 0 0 0.75rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.3125rem 0.75rem;
}

.st-suma:last-child { margin-bottom: 0; }

.st-suma dt { color: var(--blankus); font-size: 0.9375rem; }

.st-suma dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Nulis lieka matomas, bet nekonkuruoja su tuo, kas realiai buvo. */
.st-suma dd.st-nulis { font-weight: 400; color: var(--blankus); }

/* --- Horizontalios juostos ---------------------------------------------- */
.st-juostos {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.25rem 0.625rem;
}

.st-juosta__vardas {
  font-size: 0.8125rem;
  color: var(--blankus);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Vaga matoma visada — iš jos matyti, kad tuščias mėnuo yra nulis, o ne
   praleista eilutė. */
.st-juosta__vaga {
  height: 0.75rem;
  background: var(--pilkas-fonas);
  border-radius: 0.25rem;
  overflow: hidden;
}

/* ‼️ `display: block` NĖRA PERTEKLINIS.
   `<span>` yra inline, o inline elementui `width` ir `height` NEGALIOJA — be
   šitos eilutės vaga piešiama, o užpildo joje nėra visai. Vaga nuo to
   nenukenčia tik todėl, kad ji pati yra grid elementas, ir naršyklė ją
   blokuoja automatiškai; užpildas grid'e nedalyvauja. */
.st-juosta__uzpildas {
  display: block;
  height: 100%;
  background: var(--akcentas);
  border-radius: 0.25rem;
  min-width: 2px;              /* nenulinė reikšmė privalo matytis */
}

/* Neigiamas balansas — kita spalva, ne kita pusė: ašies čia nėra, ir
   veidrodinė juosta reikštų mastelį, kurio nėra. */
.st-juosta__uzpildas--minus { background: var(--demesio); }

.st-juosta__reiksme {
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* Nulinė eilutė lieka, bet blanki: tuščias mėnuo irgi yra atsakymas. */
.st-juosta__reiksme--nulis { font-weight: 400; color: var(--labai-blankus); }

/* --- Staklių palyginimas ------------------------------------------------- */
.st-palyginimas {
  margin: 1rem 0 0;
  padding-top: 0.875rem;
  border-top: 1px solid var(--krastas);
}

.st-palyginimas__antraste {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--labai-blankus);
}

.st-palyginimas__eilute {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.25rem 0;
  font-size: 0.9375rem;
}

.st-palyginimas__kitimas {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.st-palyginimas__kitimas--auga { color: var(--akcentas); }
.st-palyginimas__kitimas--krenta { color: var(--blankus); }

/* Tuščia skiltis paaiškina, KODĖL tuščia — kitaip atrodo kaip klaida. */
.st-nera {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--blankus);
}