/* SaaS darbo srities (`/app/`) stiliai (E2.a.7).
 *
 * Kodėl atskirai nuo `auth.css`: tas failas aprašo prisijungimo/registracijos FORMAS
 * (vienas siauras stulpelis, statusas virš formos, submit per visą plotį). Darbo sritis yra
 * kitos formos ekranas — antraštė su atsijungimu ir įrankių kortelių tinklas. Sudėjus abu į
 * vieną failą, `.auth-*` klasės pradėtų reikšti dvi skirtingas išdėstymo idėjas.
 *
 * Remiasi `shared.css` kintamaisiais ir klasėmis (`.card`, `.btn`, `.hidden`) — naujos dizaino
 * sistemos nekuriama. Jokio inline `style`, jokio framework.
 */

/* ── Darbo srities tokenai (E2.c P0) ──────────────────────────────────────────
 *
 * Sąmoningai APP scope, o ne `shared.css` `:root`: šių dydžių reikia tik SaaS darbo sričiai,
 * o `shared.css` naudoja ir titulinis puslapis, ir visi trys įrankiai — globalus tokenas ten
 * būtų nepanaudotas svoris ir bereikalinga regresijos rizika.
 *
 * Pridėti TIK du, nes tik jie remiasi realiai pasikartojančiomis reikšmėmis:
 *   • `--control-h` — ta pati 44px pirštų riba kartojosi 7 vietose kaip „magiškas skaičius";
 *   • `--focus-ring*` — juos naudoja žemiau esantis klaviatūros fokuso modelis.
 *
 * Tarpų (`--space-*`) ir šrifto dydžių (`--fs-*`) skalės ČIA NEĮVEDAMOS. Auditas parodė, kad
 * esamos reikšmės skalės nesudaro: 0.4/0.6/0.85/0.9/1.25rem kartu naudojami 23 kartus ir į
 * jokią švarią skalę netelpa, todėl tokenizavimas reikštų ~23 deklaracijų perrašymą, t. y.
 * CSS refaktorių, o ne pagrindo paruošimą. Skalė bus nustatyta P1 kartu su realiais
 * sidebar/page-header komponentais, kurie ją ir naudos.
 */
/* ── Karkaso tokenai (E2.c P1A) ───────────────────────────────────────────────
 *
 * Trys tarpų dydžiai, o ne pilna skalė: čia surašyta tik tai, ką realiai naudoja karkasas.
 * Legacy `app.css` reikšmės (0.4/0.6/0.85/0.9rem ir kt.) SĄMONINGAI nekonvertuojamos — tai
 * būtų refaktorius, o ne karkaso pridėjimas.
 *
 * `--app-sidebar-w: 15rem` (240px): trumpos LT etiketės („Objektai", „Komanda") ir įmonės
 * sąrašas telpa, o 1024px ekrane darbo sričiai lieka ~784px. 280–320px „modern SaaS" juosta
 * čia atimtų darbo vietą be jokios naudos.
 *
 * `--app-content-max: 64rem`: didesnis nei ankstesni 56rem, nes juosta jau suvalgo horizontalią
 * erdvę — 1440px ekrane senoji riba paliktų turinį nereikalingai siaurą.
 *
 * `--app-shell-bp` yra tik DOKUMENTACIJA: `@media` sąlygose kintamųjų naudoti negalima, todėl
 * 60rem įrašytas ir žemiau esančiame media query. Abu privalo sutapti.
 */
.app-page {
  --app-sidebar-w: 15rem;
  --app-content-max: 64rem;
  --app-shell-bp: 60rem;
  --app-gap-sm: 0.5rem;
  --app-gap-md: 1rem;
  --app-gap-lg: 1.5rem;

  --control-h: 44px;

  /* ── Darbo srities anatomijos tokenai (D4C4-N2b) ──────────────────────────
     Šie du dydžiai yra BENDRA `/app/` juostos ir įrankių juostos kalba. Reikšmė turi būti VIENODA abiejuose
     lapuose, kitaip paskyros grupė vienoje pusėje atsidurtų kitame aukštyje nei kitoje. El. pašto eilutės (ir jos
     `--ws-email-lh` rezervo) nebėra — savininkas 2026-10-11. */
  /* `/app/` organizacijos bloko aukštis. Nuo 2026-10-04 (savininkas) tai VIENA eilutė: rolės langelis, o kelių
     įmonių naudotojui — šalia jo perjungiklis (`.app-org-select { min-height: var(--control-h) }`). Užrašo
     „Įmonė" ir pavadinimo eilučių nebėra, todėl buvusi formulė (~88,72px) virto vienu lauko aukščiu. */
  --ws-context-h: 44px;
  --ws-actions-h: 44px;

  /* Tas pats 2px + 2px šablonas, kurį jau naudoja `.auth-status:focus-visible` — nauja
     fokuso kalba nekuriama, esama tik išplečiama į visą darbo sritį. */
  --focus-ring: 2px solid var(--accent);
  --focus-ring-offset: 2px;

  /* ── PAKELTO DARBO PAVIRŠIAUS VAIDMUO (E2.c P3C) ────────────────────────────
   *
   * Problema, kurią tai uždaro: `--bg-surface` darbo srityje tarnavo DVIEM priešingiems
   * vaidmenims vienu metu — juostos apdailai (kuri turi būti giliau už puslapį) ir darbo
   * registrams (kurie turi būti virš jo). Šviesioje temoje abu atsitiktinai atrodė teisingai,
   * nes tokenas ten yra šviesiausias (#ffffff virš #f8f9fa). Tamsioje temoje jis yra
   * TAMSIAUSIAS (#181825 po #1e1e2e), todėl registras skaitėsi kaip įduba puslapyje.
   *
   * Sprendimas — NE nauja spalva, o vaidmens atskyrimas: šis tokenas nurodo „pakeltas darbo
   * paviršius", o jo reikšmė kiekvienoje temoje imama iš JAU ESAMŲ tokenų. Naujų hex reikšmių,
   * gradientų, šešėlių ar paletės pakeitimų nėra.
   *
   * Šviesi: tas pats baltas, kuris pakeltą turinį komunikavo ir iki šiol — jokios regresijos.
   * Tamsi (žemiau): `--bg-overlay`, t. y. tas pats paviršius, kurį JAU naudoja visos kitos
   * darbo turinio panelės (redaktorius, patvirtinimai, versijų istorija, kvietimo nuoroda).
   * Registrai buvo vienintelė vieta, likusi ant juostos tokeno. */
  --app-register-surface: var(--bg-surface);

  min-height: 100vh;
  /* Sukrautas variantas yra BAZĖ, o dviejų stulpelių karkasas — praplėtimas plačiam ekranui.
     Taip siauras ekranas gauna teisingą išdėstymą net tada, jei media query kada nors
     nesuveiktų, o ne atvirkščiai. */
  display: flex;
  flex-direction: column;
  background: var(--bg-base);
}

/* ── Kairė juosta ─────────────────────────────────────────────────────────────
 *
 * Struktūrinis paviršius, o ne „plaukiojanti kortelė": jokio šešėlio, jokio radius, jokio
 * tarpo nuo krašto. Nuo darbo srities atskiria vienas 1px rėmelis — tiek, kiek reikia
 * suprasti ribą, ir ne daugiau. */
/* Tarpai SKIRTINGI, ne vienodi (E2.c P1C).
 *
 * Iki tol visi keturi blokai buvo atskirti tuo pačiu 16px tarpu, todėl hierarchija „pirma
 * kurioje įmonėje, tada kuriame rodinyje" egzistavo tik komentare. Dabar erdvė ją pasako pati:
 * ženklas ir įmonė laikomi kartu (jie abu atsako „kur aš esu"), o navigacija ir įrankiai
 * atskiriami aiškiau. Bazinis `gap` paliktas mažas, o atskyrimai daromi taškiniais `margin`. */
.app-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--app-gap-sm);
  padding: var(--app-gap-md);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  /* Užvedimo fonas (savininkas 2026-10-04: „turi aiškiau paryškėti"). `--bg-overlay` nuo juostos skyrėsi
     ~1,07:1 — beveik nematomai; 10 % rašalo per bet kurį pagrindą duoda ~1,2–1,3:1 abiejose temose.
     Ta pati reikšmė kaip įrankių juostoje (`workspace-band.css` `.tool-rail`). */
  --rail-hover: color-mix(in srgb, var(--text-primary) 10%, transparent);
  /* Slinkties juosta PASLĖPTA, slinkti galima (ratukas, pirštas, Tab). Klasikinė Windows juosta (~15 px) atsiranda
     išskleidus pogrupį žemame ekrane ir atima plotį — „Sąskaitų generatorius" su ikona tada lūždavo į dvi eilutes,
     ir juosta „šokinėtų" (savininkas 2026-10-04). Tas pats — įrankių `.tool-rail`. */
  scrollbar-width: none;
}

/* Safari ir senesni Chromium `scrollbar-width` nemoka. */
.app-sidebar::-webkit-scrollbar { display: none; }

/* Įmonė — iškart po ženklo: kartu jie sudaro vieną „kur aš esu" bloką. */
.app-sidebar > .app-org { margin-bottom: var(--app-gap-md); }

/* Įrankiai — aiškiai atskirti nuo globalių rodinių, bet ne per plačiai: tai vis dar navigacija. */
.app-sidebar > .app-tools { margin-top: var(--app-gap-sm); }

/* Ženklas — logotipas (`.brand-logo`, `shared.css`) 44px eilutėje (pirštų taikinys). Ta pati anatomija kaip
   įrankių `.tool-rail-brand`: eilutės aukštis privalo sutapti, kitaip navigacija po ženklu tarp `/app/` ir
   įrankio pasislinktų (static-security 2al G11). */
.app-brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
  text-decoration: none;
}

/* Organizacijos sritis — VIENA 44px eilutė (savininkas 2026-10-04): rolės langelis, o kelių įmonių naudotojui
   šalia jo perjungiklis. Eilutė egzistuoja visada (`min-height`), todėl nei atėjęs „Kraunama…", nei atsiradęs
   perjungiklis navigacijos nepastumia. `min-width: 0` būtinas: be jo ilgas įmonės pavadinimas perjungiklyje
   išplėstų juostą virš jai skirto pločio. */
.app-org {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--control-h);
  margin: 0;
  min-width: 0;
}

/* Rolės langelis (savininkas 2026-10-04): „Savininkas" / „Administratorius" / „Narys" spalvotame langelyje po
   ženklu. Ta pati ženkliuko forma kaip sąskaitų būsenų (`.inv-badge`), akcento atspalvis, tekstas
   `--text-primary` — įskaitomas abiejose temose. Tuščias mazgas (be sesijos) langelio nerodo, o būsenos tekstas
   (`is-status`: `/app/` „Kraunama…", abiejose juostose „Nepavyko įkelti įmonių.") lieka paprastas tekstas. Ta pati taisyklė — ir kitos juostos faile
   (`workspace-band.css` / `app.css`), raidė į raidę. */
.rail-role {
  display: inline-flex;
  align-items: center;
  flex: none;
  /* Tas pats aukštis ir TUŠČIAM mazgui (pirmas kadras be sesijos): atėjus rolei langelis pasidaro spalvotas
     vietoje, nepašokdamas eilutės viduje (0.78rem × 1.5 eilutė + 0.25rem × 2 paraštės). */
  min-height: calc(0.78rem * 1.5 + 0.5rem);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.rail-role:not(:empty):not(.is-status) {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--text-primary);
  font-weight: 600;
}

/* Įmonės eilutė juostos apačioje (savininkas 2026-10-04, SĄSKAITA etalonas): pirmoji pavadinimo raidė
   spalvotame langelyje ir pavadinimas. Linija VIRŠ eilutės skiria apatinį bloką (vietoje buvusios „Paskyra"
   antraštės linijos) — ji ant pačios eilutės, todėl abiejose juostose stovi toje pačioje vietoje nepriklausomai
   nuo apvalkalų. Turinio aukštis 44px = `/app/` perjungiklio aukštis (`min-height` apima ir paraštę, ir liniją:
   `box-sizing: border-box`). Raidė lygiuojasi su punktų ikonomis (3px žymeklis + 0.6rem). Tuščias raidės
   langelis (be sesijos) nematomas, bet vietą laiko. Ta pati taisyklė — ir kitos juostos faile, raidė į raidę. */
.rail-org {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  min-height: calc(44px + 0.5rem + 1px);
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.6rem 0 calc(0.6rem + 3px);
  border-top: 1px solid var(--border);
  /* Veiklų langelio (KV1) atramos taškas. */
  position: relative;
}
.rail-org-initial {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--accent);
  color: var(--s-ink);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}
.rail-org-initial:empty { visibility: hidden; }
.rail-org-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Veiklų meniu (KV1, savininkas 2026-10-11, foto A2/A3) — IDENTIŠKA `workspace-band.css` ──────────────
   Įmonės eilutė — mygtukas su rodykle (44px pirštų taikinys); langelis iššoka VIRŠ eilutės (eilutė — juostos apačioje).
   Atsiradimas ir dingimas — 180 ms (`is-open`); užvedimas — tik pelei. */
.rail-org-btn {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  min-height: 44px;
  margin: 0 -0.4rem;
  padding: 0 0.4rem;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: opacity 200ms ease-out;
}
/* Veiklos dar nėra (įkrova be įrašo, be įmonės): tuščias mygtukas nematomas ir neprieinamas, bet vietą laiko. */
.rail-org-btn:has(.rail-org-name:empty) { visibility: hidden; }
/* F9: kol pakartotinė veiklų užklausa vyksta, „Bandyti dar kartą" pritemsta (200 ms, kaip J3 laukimas) — antras
   paspaudimas užklausos nekartoja (sargas — `app.js` / `workspaceBand.js`). Permatomumas — ne judesys. */
.rail-org-btn[aria-busy='true'] { opacity: 0.6; cursor: progress; }
.rail-org-caret {
  flex: none;
  color: var(--text-primary);
  transition: transform 180ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.rail-org-btn[aria-expanded="true"] .rail-org-caret { transform: rotate(180deg); }
.rail-org-menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 0.25rem);
  z-index: 5;
  padding: 0.35rem;
  /* Ryškesnis rėmas vietoje šešėlio: juostos stiliuje literalių spalvų nėra (2aa), o taisyklė abiejose juostose ta pati. */
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 180ms ease, transform 180ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.rail-org-menu.is-open { opacity: 1; transform: none; }
/* Tas pats langelis viršutinėje juostoje (telefone atidaro veiklos raidė, savininkas 2026-10-12): nusileidžia PO juosta
   dešinėje, virš turinio (redaktoriaus mygtukų), bet po stalčiumi ir modaliniais langais. */
.bar-org-menu {
  top: calc(100% + 4px);
  bottom: auto;
  left: auto;
  right: 0.9rem;
  z-index: 250;
  width: min(18rem, calc(100vw - 1.8rem));
  transform: translateY(-6px);
}
.rail-org-list {
  margin: 0;
  padding: 0 0 0.35rem;
  list-style: none;
  border-bottom: 1px solid var(--border);
}
/* `.rail-org-menu` priekyje — kad `/app/` `.app-nav-item` (pilka, kitas dydis; klasė stalčiui uždaryti) jų neperrašytų. */
.rail-org-menu .rail-org-item,
.rail-org-menu .rail-org-add {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 44px;
  padding: 0 0.6rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.rail-org-item[aria-current="true"] { font-weight: 700; }
.rail-org-add { margin-top: 0.35rem; }
.rail-org-add-icon { flex: none; }
@media (hover: hover) and (pointer: fine) {
  .rail-org-btn:hover,
  .rail-org-item:hover,
  .rail-org-add:hover { background: var(--rail-hover); }
}
@media (prefers-reduced-motion: reduce) {
  .rail-org-menu,
  .rail-org-caret { transition: none; }
}

/* ── Globali navigacija ───────────────────────────────────────────────────────
 *
 * Punktai NĖRA `.btn`: mygtuko išvaizda navigacijoje konkuruotų su tikrais veiksmais
 * („Naujas objektas"), o užrakinta taisyklė sako — vienas pirminis veiksmas rodinyje. */
.app-nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.app-nav-item {
  display: flex;
  align-items: center;
  min-height: var(--control-h);
  padding: 0.4rem 0.6rem;
  /* Kairysis žymeklis egzistuoja VISOSE būsenose, tik permatomas — todėl aktyvus punktas
     nepastumia teksto nė per pikselį. */
  border: none;
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  /* „Klientai" (2026-10-24) — nuoroda į sąskaitų puslapį tarp rodinių mygtukų: be pabraukimo, kaip kiti punktai. */
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

/* Užvedimas — tik pelei: lietimo ekrane `:hover` po bakstelėjimo prilimpa, o aiškus fonas atrodytų kaip
   pasirinktas punktas (ta pati apsauga kaip `workspace-band.css` juostoje). */
@media (hover: hover) and (pointer: fine) {
  .app-nav-item:hover {
    background: var(--rail-hover);
    color: var(--text-primary);
  }
}

/* Aktyvus rodinys — TRYS signalai, ne vien spalva: paviršius, teksto svoris ir kairysis
   žymeklis. Tai NĖRA pirminio mygtuko išvaizda: fonas neutralus, o ne akcento. */
.app-nav-item[aria-current='page'] {
  background: var(--bg-overlay);
  border-left-color: var(--accent);
  color: var(--text-primary);
  font-weight: 600;
}

/* Punkto ikona (savininkas 2026-10-04, nuotrauka 63). Savininko piešiniai iš `assets/images/*.svg` įterpti INLINE:
   jų `currentColor` ima ikonos spalvą (ji seka temą), o ikona yra pirmame kadre kartu su tekstu — be atskiros
   užklausos, todėl juosta pereinant tarp puslapių nesublyksi.
   Spalva — RYŠKIAUSIA teksto spalva visose būsenose, ne punkto teksto (savininkas 2026-10-04: „labai pilkos"):
   ploni piešinių brūkšniai (0,5–0,7 px) su glotninimu atrodo blankesni už tos pačios spalvos tekstą, o įrankių
   nuorodų tekstas dar ir tylesnis (`--text-muted`). Kopijų tapatumą su failais
   tikrina static-security 2ar. 18 px + 0.5rem, ne 20 px: 240 px juostoje „Sąskaitų generatorius" antraštėje
   tekstui lieka 184,8 px, pats tekstas — 140,5 px; su 20 px ikona jis lūžtų į dvi eilutes.
   Ta pati taisyklė — ir kitos juostos faile (`workspace-band.css` / `app.css`), raidė į raidę. */
.rail-icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-right: 0.5rem;
  color: var(--text-primary);
}

/* ── „Sąskaitų generatorius" pogrupis (INV, 2026-10-03) ─────────────────────────────────────
 *
 * Antraštė — MYGTUKAS, kuris pogrupį išskleidžia / sutraukia (ne nuoroda: paspaudus niekas
 * neperkraunama), tas pats elgesys kaip įrankių juostoje. Būsena gyvena vien `aria-expanded`;
 * apvalkalas animuojamas `grid-template-rows` 0fr → 1fr, 300 ms. Sutrauktas pogrupis nepasiekiamas
 * nei Tab, nei skaitytuvui (`visibility`). Judesio jautrumą gerbia bendras `.app-page`
 * reduced-motion blokas (jis palieka tik spalvų perėjimus). */
.app-nav-toggle-wrap {
  display: flex;
  flex-direction: column;
}

.app-nav-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--control-h);
  padding: 0.4rem 0.6rem;
  border: none;
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  /* Kaip kiti punktai (`.app-nav-item`): nepasirinktas pogrupis neišsiskiria nei spalva, nei svoriu. */
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .app-nav-toggle:hover { background: var(--rail-hover); color: var(--text-primary); }
}

/* Pogrupyje yra dabartinis rodinys — antraštė tamsesnė. TIK spalva, ne storis: pusjuodis „Sąskaitų generatorius"
   netelpa į vieną eilutę ir antraštė „šokinėtų" (savininkas 2026-10-04; tas pats `workspace-band.css`). */
.app-nav-toggle-wrap:has([aria-current='page']) > .app-nav-toggle { color: var(--text-primary); }

.app-nav-toggle-caret {
  flex: 0 0 auto;
  /* Prispausta prie dešinio krašto; −0.4rem — permatomas rodyklės laukelis (5,4 px) užeina ant punkto paraštės,
     kad pavadinimas su ikona tilptų vienoje eilutėje (atsarga 6,7 px). */
  margin: 0 -0.4rem 0 auto;
  color: var(--text-muted);
  transition: transform 300ms ease-out;
}

.app-nav-toggle[aria-expanded='true'] .app-nav-toggle-caret { transform: rotate(180deg); }

.app-nav-sub-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms ease-out;
}

.app-nav-toggle[aria-expanded='true'] + .app-nav-sub-wrap { grid-template-rows: 1fr; }

.app-nav-sub {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0 0 0 0.85rem;
  list-style: none;
  visibility: hidden;
  transition: visibility 0s linear 300ms;
}

/* Apatinis tarpas — ant paskutinio punkto, ne ant sąrašo (sutraukto apvalkalo aukštis lieka 0). */
.app-nav-sub > li:last-child { padding-bottom: 0.25rem; }

.app-nav-toggle[aria-expanded='true'] + .app-nav-sub-wrap > .app-nav-sub {
  visibility: visible;
  transition-delay: 0s;
}

.app-nav-sub-item {
  min-height: 44px;
  font-size: 0.88rem;
  /* Pogrupio punktai — nuorodos (`<a>`), o `.app-nav-item` kurtas mygtukams: be šios eilutės naršyklė
     juos pabraukdavo (įrankių juostoje `.tool-rail-sub-item` — ne; savininkas 2026-10-04). */
  text-decoration: none;
}

/* ── Įrankiai juostoje (E2.c P1C) ─────────────────────────────────────────────
 *
 * Antrinė navigacija: tai tikros nuorodos, išvedančios iš darbo srities, todėl jos NEGALI
 * atrodyti taip pat svarbiai kaip „Objektai" ir „Komanda". Skirtumas daromas svoriu ir dydžiu,
 * ne spalva — akcentas lieka rezervuotas aktyviam rodiniui ir fokusui.
 *
 * Kortelių čia sąmoningai nėra: juostoje jos virstų dėžučių sąrašu, o užrakinta kryptis sako,
 * kad juosta yra struktūra, ne kortelių rinkinys. */
.app-tools {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

/* Grupės antraštė. Pagrįsta, nes po ja — kelios skirtingos paskirties vietos; prie dviejų
   globalių rodinių tokia antraštė būtų tik triukšmas, todėl ten jos nėra. */
.app-nav-group {
  margin: 0 0 0.15rem;
  padding: 0 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.app-tool-link {
  display: flex;
  align-items: center;
  min-height: var(--control-h);
  /* Ta pati kairė kraštinė kaip navigacijos punktų — tekstas lygiuojasi vertikaliai, nors
     žymeklio šie punktai niekada negauna (jie nekeičia dabartinio rodinio). */
  padding: 0.3rem 0.6rem;
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.85rem;
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .app-tool-link:hover {
    background: var(--rail-hover);
    color: var(--text-primary);
  }
}

/* Pogrupiai „Įrankiuose" — „Skardos lankstiniai" (savininkas 2026-10-18) ir „Sąskaitų generatorius" (2026-10-24): antraštė
   atrodo kaip kaimyninės įrankių nuorodos (`.app-tool-link`) — tylesnė, ta pati įtrauka (kaip `workspace-band.css`). */
.app-tools .app-nav-toggle {
  padding: 0.3rem 0.6rem;
  color: var(--text-muted);
}

@media (hover: hover) and (pointer: fine) {
  .app-tools .app-nav-toggle:hover { color: var(--text-primary); }
}

/* ── Paskyros sritis ──────────────────────────────────────────────────────── */

/* `margin-top: auto` prispaudžia sritį prie juostos apačios TIK tada, kai juosta yra pilno
   aukščio stulpelis (desktop). Sukrautame variante ji tiesiog seka navigaciją.
 *
 * Plona viršutinė kraštinė (E2.c P1C) atskiria paskyrą nuo navigacijos: iki tol visi juostos
 * blokai buvo atskirti vienodu 16px tarpu, todėl „kur einu" ir „kas aš esu" atrodė lygiaverčiai.
 * Kraštinė, o ne didesnis tarpas — tarpo apačioje nesimatytų, nes sritis prispausta prie krašto. */
/* Savos ribos linijos nėra (savininkas 2026-10-04: „dvi linijos — reikia vienos"): apatinį bloką skiria
   įmonės eilutės linija (`.rail-org`), ta pati taisyklė kaip įrankių juostoje — abi juostos lieka vienodos. */
.app-account {
  display: flex;
  flex-direction: column;
  gap: var(--app-gap-sm);
  padding-top: var(--app-gap-md);
}

/* ── Objektų paieška (E2.c P3B) ───────────────────────────────────────────────
 *
 * Jokio naujo vizualinio žodyno: naudojamas TAS PATS `.form-group` + `.form-label` +
 * `.form-input` šablonas, kurį jau naudoja objekto kūrimo forma keliomis eilutėmis aukščiau.
 * Todėl čia lieka tik du dalykai, kurių bendras šablonas neduoda.
 *
 * 1. Tarpas iki sąrašo — kad laukas priklausytų registrui, o ne kabotų tarp veiksmų.
 * 2. Plotis. Registro konteineris plačiame ekrane siekia ~688px, o paieškos laukas per visą tą
 *    plotį virstų plakatu — nors į jį įrašomi keli žodžiai. Riba palieka jį praktišku valdikliu.
 *
 * Jokio šešėlio, jokios piliulės, jokios plaukiojančios juostos ir jokio didinamojo stiklo
 * ikonos: tai registro valdiklis, ne SaaS dekoracija. */
.app-projects-search {
  margin: 0 0 var(--app-gap-md);
  max-width: 26rem;
}

/* Touch target — TA PATI riba ir ta pati priežastis kaip kūrimo bei redagavimo formose:
   `shared.css` laukai yra žemesni, o šitą pildo pirštas telefone. Bendra taisyklė čia
   negalima — `.form-input` naudoja ir įrankiai, kurių išvaizdos P3B nekeičia. */
.app-projects-search .form-input { min-height: var(--control-h); }

/* ── Paskyros valdikliai (E2.c P3A) ───────────────────────────────────────────
 *
 * El. pašto eilutės juostoje NĖRA (savininkas 2026-10-11, pagal SĄSKAITA): adresas matomas tik „Paskyros
 * nustatymuose". Todėl nebėra ir jos eilutės rezervo — juostos apačia nuo pirmo kadro galutinė. */

/* Du realūs veiksmai vienoje eilutėje. Tai NĖRA paskyros meniu: išskleidimas pridėtų sluoksnį
   be turinio. Temos mygtukas lieka savo dydžio, atsijungimas užima likusį plotį. */
.app-account-actions {
  display: flex;
  align-items: center;
  gap: var(--app-gap-sm);
}

.app-signout {
  width: 100%;
  font-size: 0.85rem;
}

/* Eilutėje `width: 100%` išstumtų temos mygtuką, todėl čia atsijungimas tampa tampriu elementu.
   Pati atsijungimo elgsena, klasės ir tekstas NEPAKEISTI — tik vieta. */
.app-account-actions .app-signout {
  width: auto;
  flex: 1 1 auto;
}

/* Temos jungiklis: ta pati santūri kalba kaip viešame puslapyje, bet app-scoped — `/app/`
   neįkelia `home.css`, todėl kelios taisyklės čia yra pigiau nei viso failo užtraukimas.
   Pilnas 44px taikinys pagal `--control-h`; kvadratinis, kad neatrodytų kaip antras veiksmas. */
.app-theme-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h);
  height: var(--control-h);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

/* Užvedimas — tik pelei: lietimo ekrane `:hover` po bakstelėjimo prilimpa, ir paspaustas mygtukas atrodytų
   tebeužvestas (ta pati apsauga kaip navigacijos punktams). */
@media (hover: hover) and (pointer: fine) {
  .app-theme-btn:hover {
    background: var(--bg-overlay);
    color: var(--text-primary);
  }
}

/* Viršutinės juostos temos mygtukas (savininkas 2026-10-10): tas pats jungiklis, bet MATOMAS KVADRATAS — toks pat
   kaip ☰ šalia jo ir įrankių juostos `.tool-theme-btn` (`tools.css`): pakeltas fonas, `--radius-md`, ramesnis
   rašalas. Rėmelis ir 44px — iš `.app-theme-btn`. Užvesto fonas — vienu tonu tamsesnis už pakeltą. */
.app-topbar-theme {
  border-radius: var(--radius-md);
  background: var(--bg-overlay);
  color: var(--text-secondary);
}

@media (hover: hover) and (pointer: fine) {
  .app-topbar-theme:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
  }
}

/* Kurią ikoną rodyti, sprendžia TEMA, o ne JavaScript: taip jungiklis teisingas net tada, jei
   modulis dar neįsikėlė ar nulūžo. Perjungimas momentinis — animacija duotų mišrios būsenos
   blyksnį. */
.app-theme-icon { display: none; }
.app-theme-icon-moon { display: block; }
body.dark .app-theme-icon-moon { display: none; }
body.dark .app-theme-icon-sun { display: block; }

.app-signout[disabled] {
  opacity: 0.65;
  cursor: progress;
}

/* Tamsi tema: pakeltas darbo paviršius (E2.c P3C).
 *
 * `--bg-overlay` čia NĖRA nauja spalva — tai tas pats tokenas, kurį jau naudoja redaktoriaus,
 * patvirtinimo, versijų istorijos ir kvietimo nuorodos panelės. Registrai prie jų prisijungia,
 * o juosta (`--bg-surface`) SĄMONINGAI lieka gilesnė: ji yra apdaila, ne turinys.
 *
 * Gaunama tvarka tamsoje: juosta #181825 < puslapis #1e1e2e < registras #313244.
 *
 * Selektorius rišamas prie `.app-page`, o ne prie `body.dark` vieno: tokenas lieka darbo
 * srities, ir nei viešas puslapis, nei Auth, nei įrankiai jo negauna. Tas pats `body.dark`
 * šablonas jau naudojamas šiame faile (temos ikonos aukščiau) — naujo temos selektoriaus
 * modelio nekuriama. */
body.dark .app-page {
  --app-register-surface: var(--bg-overlay);
}

/* ── Darbo sritis ir rodinio antraštė ─────────────────────────────────────── */

.app-workspace {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;                 /* be jo ilgas turinys išplėstų karkasą */
}

.app-pagehead {
  width: 100%;
  max-width: var(--app-content-max);
  margin: 0 auto;
  padding: var(--app-gap-lg) 1.25rem 0;
}

/* ── Mobili viršutinė juosta ir stalčius (E2.c P1B) ───────────────────────────
 *
 * Sluoksnių sutartis (be „magiškų" skaičių):
 *   1 — darbo sritis (be z-index)
 *   2 — mobili viršutinė juosta
 *   3 — perdanga
 *   4 — stalčius
 *
 * Viršutinė juosta ir stalčiaus elgsena įsijungia TIK kartu su `.app-shell-ready`, kurią
 * uždeda `app/appShell.js`. Iki tol (arba jei modulis neįsikeltų) galioja P1A sukrautas
 * išdėstymas — navigacija lieka matoma ir naudojama, o ne pasislepia už ekrano krašto.
 *
 * PIRMAS KADRAS SU JAVASCRIPT (savininkas 2026-10-10, išmatuota): moduliai įsivykdo PO pirmo piešimo, todėl
 * telefone pirmiau pasirodydavo visa sukrauta juosta (683px), o po akimirkos ji išvažiuodavo į stalčių ir turinys
 * pašokdavo — 4 kadrai be ribojimo, ~0,4 s su 4× lėtesniu CPU, ~4,4 s lėtame tinkle. `theme-init.js` (klasikinis
 * skriptas `<head>`) todėl uždeda `html.app-shell-pending`: kol jis yra, juosta jau galutinės formos (viršutinė
 * eilutė, stalčius paslėptas), o `DOMContentLoaded` metu — kai visi moduliai JAU įvykdyti — jis nuimamas. Jei
 * `app.js` nepasileido, tą akimirką grįžta P1A sukrauta juosta: navigacija lieka pasiekiama (fail-open). Be JS
 * žymės nėra niekada, todėl tada visada P1A. */
.app-topbar { display: none; }
.app-sidebar-close { display: none; }
.app-overlay { display: none; }
/* ☰ atsiranda su paruoštu stalčiumi — arba nuo pirmo kadro, kai `theme-init.js` jį užtaisė (J3) radęs galiojantį
   pristatymo įrašą (`data-ws-armed="1"`, žemiau): tada ankstyvas paspaudimas užrašomas, o stalčių atidaro
   `appShell.js`, vos jis sukurtas. Be įrašo pirmame kadre jis dar nieko neatidarytų, todėl lieka paslėptas. */
.app-menu-toggle { display: none; }

/* Veiklos raidė viršutinėje juostoje — ta pati taisyklė kaip `workspace-band.css` (raidė į raidę; static-security
   `2at`): `.rail-org-initial` spalvos, 44px pirštų taikinys, 1.2rem pusjuodis — „didelis tekstas" (WCAG ≥ 18,66px),
   kuriam pakanka 3 : 1. Bazėje paslėpta: ji atidaro stalčių, todėl rodoma tik su juo ir tik su įmone (žemiau). */
.ws-bar-org {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--s-ink);
  font: inherit;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: opacity 200ms ease-out;
}

/* Ankstyvas paspaudimas (J3): kol stalčiaus dar nėra, užtaisyto ☰ ar raidės paspaudimas tik užrašomas
   (`data-ws-pending="1"`, `aria-busy`). Mygtukas tai parodo — pritemsta (200 ms), kad bakstelėjimas neatrodytų
   prarytas — ir atsistato, vos `appShell.js` jį perima (atidaro stalčių arba pasenusį ketinimą atmeta). Tas pats kaip
   įrankių juostoje (`workspace-band.css`). */
.app-menu-toggle[data-ws-pending='1'],
.ws-bar-org[data-ws-pending='1'] { opacity: 0.6; }

@media (max-width: 59.999rem) {
  /* `sticky`: juosta lieka viršuje slenkant (sluoksnis 2 — po perdanga ir stalčiumi). Ta pati eilutė kaip įrankiuose:
     0.5rem + 44px + 0.5rem + 1px = 61px (paritetą tikrina static-security `2aj` G10). */
  .app-shell-pending .app-topbar,
  .app-shell-ready .app-topbar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--app-gap-sm);
    padding: 0.5rem 0.9rem;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
  }

  /* Pirmas kadras su JS: sukrauta juosta nepiešiama (ji taps stalčiumi). Tik kol modulis dar neatėjo — žr. antraštę. */
  .app-shell-pending .app-page:not(.app-shell-ready) > .app-sidebar { display: none; }

  /* Logotipas (`.brand-logo`) 44px taikinyje — tokio pat aukščio kaip meniu mygtukas. */
  .app-topbar-brand {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-h);
    text-decoration: none;
  }

  /* Veiksmai — FIKSUOTAS 3 × 44px tinklelis, stulpelis pagal DOM eilę (raidė, tema, ☰): kol raidė ar ☰ dar paslėpti,
     jų stulpeliai tušti, todėl tema nepajuda, kai jie atsiranda. `nth-child`, ne klasė ir ne `order` — matoma eilė
     negali išsiskirti su Tab eile. Tas pats kaip įrankių juostoje (`workspace-band.css`). */
  .app-topbar .ws-bar-actions {
    display: grid;
    grid-template-columns: repeat(3, var(--control-h));
    gap: var(--app-gap-sm);
    align-items: center;
  }
  .app-topbar .ws-bar-actions > :nth-child(1) { grid-column: 1; }
  .app-topbar .ws-bar-actions > :nth-child(2) { grid-column: 2; }
  .app-topbar .ws-bar-actions > :nth-child(3) { grid-column: 3; }

  /* Raidė — kartu su stalčiumi, kurį ji atidaro, ir tik su įmone (`hidden` nuima `app.js`). Pirmame kadre — tik
     užtaisyta iš galiojančio pristatymo įrašo (`theme-init.js`, J3), kaip ir įrankių juostoje: tada pereinant iš
     įrankio langelis nei dingsta, nei išnyra. Žymė viena (be `data-ws-armed`) jos neatidengia (static-security 2at). */
  .app-shell-ready .ws-bar-org:not([hidden]),
  .app-shell-pending .ws-bar-org[data-ws-armed='1']:not([hidden]) { display: inline-flex; }

  /* Telefone tema perjungiama TIK viršutinėje juostoje: juostos (stalčiaus) kopija paslepiama, kitaip stalčių
     atidarius fokusuojami būtų du tos pačios temos valdikliai. P1A sukrautoje juostoje (be juostos) ji lieka. */
  .app-shell-ready .app-account-actions .app-theme-btn { display: none; }

  /* Pirštų taikinys — tas pats tokenas kaip visur kitur. Užtaisytas ☰ (J3, žr. bazę) pirmame kadre — tos pačios formos. */
  .app-shell-ready .app-menu-toggle,
  .app-shell-pending .app-menu-toggle[data-ws-armed='1'],
  .app-shell-ready .app-sidebar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-h);
    height: var(--control-h);
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, opacity 200ms ease-out;
  }

  /* ☰ — matomas kvadratas (savininkas 2026-10-10), toks pat kaip temos mygtukas šalia jo: rėmelis ir pakeltas fonas.
     Uždarymo mygtukas stalčiuje lieka be rėmelio — jis ne juostos valdiklis. */
  .app-shell-ready .app-menu-toggle,
  .app-shell-pending .app-menu-toggle[data-ws-armed='1'] {
    border-color: var(--border);
    background: var(--bg-overlay);
  }

  /* Juosta tampa išslenkančiu stalčiumi. `translateX` (ne `display`) — kad `inert` ir fokuso
     valdymas liktų vienintelis prieinamumo mechanizmas, o CSS nedubliuotų tos pačios logikos. */
  .app-shell-ready .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 4;
    /* Pakankamai platus organizacijos sąrašui, bet paliekantis matomą perdangos juostą —
       taip matyti, kad tai perdanga, o ne naujas puslapis. Siaurame ekrane formulė pati
       susitraukia, todėl 256px stresas neišeina už ribų. */
    width: min(17.5rem, calc(100vw - 3rem));
    height: 100dvh;
    padding: var(--app-gap-md);
    border-bottom: none;
    border-right: 1px solid var(--border);
    overflow-y: auto;           /* žemas ekranas: atsijungimas lieka pasiekiamas */
    transform: translateX(-100%);
    transition: transform 180ms ease-out;
  }

  .app-shell-ready.app-drawer-open .app-sidebar { transform: translateX(0); }

  /* Uždarymas — viršutiniame dešiniame stalčiaus kampe. `absolute` (ne papildomas DOM
     apvalkalas): prekės ženklas lieka pirmas srauto elementas, todėl `Tab` iš uždarymo eina
     natūralia tvarka per organizaciją, navigaciją ir atsijungimą. `top` = stalčiaus įtrauka: mygtukas
     stovi toje pačioje 44px eilutėje kaip ženklas (abu centruoti vienoje linijoje). */
  .app-shell-ready .app-sidebar-close {
    position: absolute;
    top: var(--app-gap-md);
    right: var(--app-gap-sm);
  }

  /* Vieta mygtukui, kad jis neužliptų ant ilgo prekės ženklo. */
  .app-shell-ready .app-brand { padding-right: var(--control-h); }

  .app-shell-ready .app-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 3;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 180ms ease-out;
  }

  .app-shell-ready.app-drawer-open .app-overlay { opacity: 1; }

  /* Fono slinkimo užraktas — CSS'u, ne `document.body.style`. Užraktas pririštas prie TOS PAČIOS klasės kaip ir
     visa kita stalčiaus būsena, todėl negali likti įjungtas atskirai nuo jos.
     Užrakinama ŠAKNIS (`html` — naršyklės slinkties sritis), o ne puslapis: viršutinė juosta lipni, todėl stalčių
     galima atidaryti bet kurioje slinkties vietoje, o sutrumpintas puslapis (iki 2026-10-11 — `height: 100dvh`)
     priversdavo naršyklę nuslinkti į viršų: turinys po perdanga peršokdavo, o uždarius vieta būdavo prarasta
     (išmatuota: 1500 → 0). `overflow: hidden` šaknyje slinkimą sustabdo, o vieta lieka. */
  html:has(.app-page.app-shell-ready.app-drawer-open) { overflow: hidden; }

  /* `hidden` yra vienintelis perdangos matomumo jungiklis — jį valdo `appShell.js`. */
  .app-shell-ready .app-overlay[hidden] { display: none; }

  /* Fokusuotas laukas ar `scrollIntoView` taikinys neturi likti po lipnia viršutine juosta (iOS Safari): įtrauka =
     juostos aukštis (0.5rem + 44px + 0.5rem + 1px) ir dar 0.5rem oro. Tai `scroll-margin-top` DARBO SRITIES mazgams,
     o ne `scroll-padding-top` šakniai: su šaknies įtrauka pačios juostos mygtukai (lipnūs, viršuje) atsidurdavo „po"
     įtrauka, todėl kiekvienas jų fokusavimas (uždarius stalčių fokusas grįžta į ☰; Shift+Tab) nuslinkdavo puslapį
     (išmatuota: 1500 → 1074, `qa:workspace-geometry` T19). Tik kol juosta yra — tos pačios dvi sąlygos, kurios ją
     rodo; P1A sukrautame variante (be JS) juostos nėra, todėl ir įtraukos nėra. */
  .app-shell-pending .app-workspace *,
  .app-shell-ready .app-workspace * {
    scroll-margin-top: calc(var(--control-h) + 2 * var(--app-gap-sm) + 1px + var(--app-gap-sm));
  }
}

/* Užvedimas — TIK tikram žymekliui: lietimo ekrane jis „prilimptų" po bakstelėjimo. ☰ pagrindas jau pakeltas,
   todėl jo užvedimas — vienu tonu tamsesnis. Ši pora matoma tik siaurame ekrane (žr. aukščiau). */
@media (hover: hover) and (pointer: fine) {
  .app-shell-ready .app-sidebar-close:hover {
    background: var(--bg-overlay);
    color: var(--text-primary);
  }
  .app-shell-ready .app-menu-toggle:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
  }
}

/* Be pristatymo įrašo raidė ir ☰ atsiranda tik paruošus stalčių, kurį jie atidaro (`/app/` — įvykdžius moduliui). Kad
   tai nebūtų kietas šuolis, jie išnyra per 200 ms (easeOutCubic: greitai pajuda, švelniai sustoja); jų stulpeliai jau
   rezervuoti, todėl kiti valdikliai nejuda. Tas pats kaip įrankių juostoje. Judesio jautriems animaciją išjungia
   bendras `.app-page` sumažinto judesio blokas (kaip ir `app-panel-in`), todėl atskiro `no-preference` čia nėra.
   Užtaisyti (`data-ws-armed="1"`) stovi nuo pirmo kadro, todėl paruošus stalčių jų NEanimuoja — kitaip jau matomas
   mygtukas akimirkai užgestų (tas pats kaip įrankių juostoje). */
@keyframes ws-bar-in {
  from { opacity: 0; transform: scale(0.92); }
}

.app-shell-ready .app-menu-toggle:not([data-ws-armed='1']),
.app-shell-ready .ws-bar-org:not([data-ws-armed='1']) {
  animation: ws-bar-in 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* ── Desktop: dvi kolonos ─────────────────────────────────────────────────── */
@media (min-width: 60rem) {
  .app-page { flex-direction: row; }

  .app-sidebar {
    position: sticky;           /* juosta lieka matoma slenkant darbo sritį */
    top: 0;
    align-self: flex-start;
    width: var(--app-sidebar-w);
    flex: 0 0 var(--app-sidebar-w);
    height: 100vh;
    padding: var(--app-gap-lg) var(--app-gap-md);
    border-bottom: none;
    border-right: 1px solid var(--border);
    overflow-y: auto;           /* daug organizacijų neišstums paskyros srities iš ekrano */
    /* Pereinant tarp dokumentų juosta — ATSKIRA grupė (žr. N2 bloką failo gale): tas pats vardas kaip
       įrankių `.tool-rail`, todėl juosta stovi, o liejasi tik darbo sritis. */
    view-transition-name: workspace-rail;
  }

  /* Paskyros sritis prie apačios — tik kai juosta yra pilno aukščio stulpelis. */
  .app-account { margin-top: auto; }
}

/* ── BŪSENŲ GRĮŽTAMASIS RYŠYS (E2.c P2D) ──────────────────────────────────────
 *
 * Visa ši sekcija remiasi TIK tuo, kas jau egzistuoja: `aria-busy` atributu, kurį valdikliai
 * ir sąrašai jau nustato patys. Jokios naujos async būsenos, jokio `MutationObserver`, jokio
 * polling — CSS tiesiog pamato tai, ką kodas ir taip pasako prieinamumo medžiui.
 *
 * `aria-busy` lieka SEMANTINIS autoritetas; visa, kas žemiau — tik jo matoma išraiška.
 */

/* Vykdomo veiksmo žymuo mygtuke. `::after` yra dekoratyvus ir į prieinamumo medį nepatenka,
   todėl ekrano skaitytojas nieko nedubliuoja — jam ir toliau kalba `aria-busy`.
 *
 * Užrašas LIEKA matomas: žiedas atsiranda šalia jo, o ne vietoje jo. `.btn` yra `inline-flex`
 * su `gap: 0.4rem`, todėl atskiro tarpo nereikia ir mygtukas paauga vos per ~0.85em. */
.app-page .btn[aria-busy='true']::after {
  content: '';
  flex: none;
  width: 0.85em;
  height: 0.85em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: app-spin 650ms linear infinite;
}

@keyframes app-spin {
  to { transform: rotate(1turn); }
}

/* Užimtas DUOMENŲ regionas ramiai pritemsta. Tai NĖRA `disabled`: jokio `pointer-events`,
   jokio blur, jokio perdengimo — turinys lieka skaitomas, žymimas ir spaudžiamas.
 *
 * Taikoma TIK realiems duomenų sąrašams. Juosta, viršutinė juosta ir visa darbo sritis
 * nepritemsta niekada: vienos sekcijos krovimas nėra viso ekrano būsena.
 *
 * 0.75, o ne 0.7: prie 0.7 antrinis meta tekstas šviesioje temoje jau ima blukti. */
.app-project-list[aria-busy='true'],
.app-member-list[aria-busy='true'],
.app-doc-history-body[aria-busy='true'] {
  opacity: 0.75;
  transition: opacity 120ms ease;
}

/* ── „Kraunama…" be mirktelėjimo (E2.c P2D) ───────────────────────────────────
 *
 * Greitas atsakymas anksčiau spėdavo parodyti ir paslėpti krovimo tekstą per kelias dešimtis
 * milisekundžių — akis pagaudavo tik blyksnį. Atidėtas pasirodymas tą blyksnį panaikina: jei
 * duomenys grįžta greičiau nei per 150 ms, naudotojas krovimo teksto apskritai nepamato.
 *
 * Atidedamas TIK KROVIMO INDIKATORIUS. Klasę uždeda tas pats kelias, kuris rašo krovimo
 * tekstą, ir nuima ją rašydamas bet kokį kitą — todėl rezultatas, tuščia būsena ir klaida
 * rodomi IŠKART, be jokio uždelsimo. */
.app-projects-state.app-state-loading {
  animation: app-state-in 120ms ease-out both;
  animation-delay: 150ms;
}

/* Abu kadrai užrašyti AIŠKIAI. Su vien `from` pabaigos reikšmė būtų numanoma iš elemento
   stiliaus, ir „ar tekstas tikrai vėl tampa matomas" priklausytų nuo netiesioginio kadro
   elgsenos. Čia tai per svarbu, kad būtų paliekama numanoma. */
@keyframes app-state-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── Paspaudimo grįžtamasis ryšys (E2.c P2D) ──────────────────────────────────
 *
 * Visas blokas gyvena `no-preference` viduje SĄMONINGAI: sumažinto judesio režime naudotojas
 * negauna nei mastelio, nei „momentinio" jo varianto — erdvinio judesio tiesiog nėra. Spalvos,
 * fokuso ir hover grįžtamasis ryšys lieka nepakitęs abiem atvejais.
 *
 * `transform` nieko nestumdo ir nekeičia išdėstymo, todėl kaimynai nejuda, o fokuso žiedas
 * lieka vietoje. 0.98, ne 0.95: tai patvirtinimas, kad sistema išgirdo, o ne animacija. */
@media (prefers-reduced-motion: no-preference) {
  .app-page .btn {
    transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 120ms ease-out;
  }

  .app-page .btn:active { transform: scale(0.98); }
}

/* ── Klaviatūros fokusas (E2.c P0) ────────────────────────────────────────────
 *
 * Problema, kurią tai uždaro: `shared.css` `.form-input:focus` nuima naršyklės kontūrą ir
 * palieka tik rėmelio spalvą. Rėmelio atspalvio pokytis nėra pakankamas fokuso indikatorius,
 * o `:focus` be `-visible` jį rodo ir pelės naudotojui.
 *
 * Sprendimas apribotas `.app-page` — `shared.css` NEKEIČIAMAS, todėl įrankiai, titulinis ir
 * prisijungimo puslapiai lieka tokie patys iki paskutinio pikselio.
 *
 * `outline` (ne `box-shadow`): jis seka elemento `border-radius`, neįeina į išdėstymo srautą
 * ir todėl nieko nepastumia. Nuošalis 2px atitraukia žiedą nuo elemento, todėl jis matomas ir
 * ant `--accent` fono turinčio pirminio mygtuko.
 *
 * `:focus-visible`, o ne `:focus`: pelės paspaudimas žiedo negauna, klaviatūra — visada.
 * UA numatytasis fokusas niekur nenaikinamas: čia tik PRIDEDAMA. */
.app-page a:focus-visible,
.app-page button:focus-visible,
.app-page input:focus-visible,
.app-page select:focus-visible,
.app-page textarea:focus-visible,
.app-page [tabindex]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Didesnis specifiškumas nei `shared.css` `.form-input:focus` (0,2,0), todėl klaviatūros
   fokusas atgauna pilnavertį žiedą. Pelės fokusas ir toliau naudoja esamą rėmelio elgseną. */
.app-page .form-input:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* ── Turinys ──────────────────────────────────────────────────────────────── */

.app-main {
  flex: 1;
  width: 100%;
  /* Iki E2.c P1A buvo 56rem be juostos. Dabar juosta jau atima horizontalią erdvę, todėl
     turinio riba pakelta — kitaip 1440px ekrane darbo sritis atrodytų nereikalingai siaura. */
  max-width: var(--app-content-max);
  margin: 0 auto;
  padding: var(--app-gap-md) 1.25rem 3rem;
}

/* Rodinio pavadinimas. Darbo įrankio antraštė, ne marketingo — kompaktiška ir aiški. */
.app-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* ── Sekcijų MICRO-LABEL (E2.c P2A) ───────────────────────────────────────────
 *
 * Problema, kurią tai uždaro: H1 „Objektai" ir iškart po juo H2 „Jūsų objektai" (arba
 * „Komanda" → „Komandos nariai") sakė tą patį dviem beveik vienodo svorio lygiais. Du
 * pilno svorio pavadinimai vienas po kito yra stipriausias „sugeneruoto šablono" požymis
 * visame ekrane.
 *
 * Sprendimas NĖRA `sr-only` slėpimas: antraštė yra `aria-labelledby` taikinys IR ji realiai
 * keičia tekstą („Šiukšliadėžė"), todėl jos matomumas turi likti. Vietoje to ji nuleidžiama
 * į etiketės vaidmenį — ta pačia kalba, kurią juostoje jau naudoja `.app-nav-group`.
 * Semantika (H2/H3) NEPAKEISTA: tai vizualinis svoris, ne demotion.
 *
 * Skaičių prie teksto rašo tas pats render kelias, kuris piešia sąrašą (žr. `projects.js`
 * `applyActive`) — jokios antros būsenos ir jokio DOM skaičiavimo. */
.app-section-title {
  margin: 1.5rem 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary);       /* ryški, ne pilka (savininkas 2026-10-04) */
}

/* IŠIMTIS: dokumentų rodinio antraštė yra OBJEKTO PAVADINIMAS, t. y. tikras turinys, o ne
   sekcijos etiketė. Jis privalo vizualiai pranokti statinį „Objektai" H1 — naudotojas atsidarė
   būtent šį objektą. Antraščių semantika nepakinta (H1 lieka vienintelis ir tas pats). */
.app-section-title.app-docs-context {
  margin-top: 0;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.app-note {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.app-retry { margin: 0 0 1rem; }

/* Įrankių kortelių (`.app-tool`, `.app-tool-name`, `.app-tool-note`) taisyklės pašalintos
   E2.c P1C: skaičiuoklės nebėra darbo srities turinys — jos persikėlė į juostą kaip
   kompaktiškos nuorodos (`.app-tool-link`, žr. aukščiau). Didelės kortelės kartojosi ir
   „Komandos" rodinyje, kuriam neturėjo jokio ryšio. */

/* ── Objektai (E2.b.1b) ───────────────────────────────────────────────────── */
/*
 * Naudojami esami `shared.css` primityvai: `.form-group`, `.form-label`, `.form-input`, `.btn`,
 * `.hidden` ir spalvų kintamieji. Naujos dizaino sistemos nekuriama — čia tik išdėstymas.
 */

.app-projects-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1rem;
}

/* Kūrimo forma irgi yra PAKELTAS darbo turinys (E2.c P3C).
 *
 * Ji buvo vienintelė iš savo giminės, likusi ant juostos tokeno: redagavimo forma, patvirtinimo
 * skydeliai, versijų istorija ir kvietimo nuoroda `--bg-overlay` naudoja jau seniai. Palikus ją
 * `--bg-surface`, tamsioje temoje ji būtų atrodžiusi kaip įduba TIESIAI VIRŠ pakelto registro —
 * t. y. P3C būtų sukūręs naują nenuoseklumą vietoje seno. Todėl ji prisijungia prie to paties
 * vaidmens; jokių kitų jos savybių P3C nekeičia. */
.app-project-form {
  margin: 0 0 1.25rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--app-register-surface);
  /* Panelė atsiranda, o ne šokteli (CLAUDE.md animacijų taisyklė). `.hidden` yra
     `display: none`, todėl `transition` čia neveiktų — animuojama tik atsiradimas, ir tik
     `opacity`/`transform`: aukščio animacija „šokintų" išdėstymą ir keistų touch target dydį
     pačiu paspaudimo momentu. */
  animation: app-panel-in 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes app-panel-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* Naudotojo pasirinkimo laikymasis suvienodintas failo apačioje (žr. „Sumažintas judesys"). */

.app-project-form .form-group { margin-bottom: 0.9rem; }

/* Touch target: `.btn` jau turi 44px, o laukai `shared.css` yra žemesni — objektų formoje
   ji pildoma pirštu telefone, todėl aukštis pakeliamas iki tos pačios ribos. */
.app-project-form .form-input { min-height: var(--control-h); }

.app-project-notes {
  min-height: 5rem;
  resize: vertical;
  font-family: inherit;
  line-height: 1.45;
}

/* Netinkamas laukas — rėmelis PLUS `aria-invalid` (jį nustato authForms.js `markInvalid`). */
.app-project-form .form-input[aria-invalid='true'] { border-color: var(--danger); }

.app-project-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
}

/* Patvirtinimo ir formos mygtukai — pirštų taikinys (rasta E2.c P2B lokaliame QA).
 *
 * Objektų trynimo patvirtinimas naudoja `btn-sm`, todėl ties 375px jo abu mygtukai buvo
 * 32px aukščio — įskaitant patį destruktyvųjį. Tai seniai egzistavusi spraga, bet ji tapo ir
 * nenuoseklumu: komandos patvirtinimo mygtukai tokioje pačioje situacijoje yra 44px. Vienoda
 * patvirtinimo anatomija apima ir taikinio dydį — ypač ten, kur klaidingas paspaudimas
 * kainuoja brangiausiai. */
.app-project-form-actions .btn {
  min-height: var(--control-h);
}

.app-project-form-actions .btn[disabled] {
  opacity: 0.65;
  cursor: progress;
}

/* Neutralios sąrašo būsenos (kraunama / dar nėra objektų). Klaidos rodomos `#app-status`. */
.app-projects-state {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.app-projects-retry { margin: 0.75rem 0 0; }

/* ── DARBO REGISTRAS (E2.c P2A) ───────────────────────────────────────────────
 *
 * Iki šiol kiekvienas įrašas — objektas, dokumentas, narys, kvietimas — buvo atskira
 * plaukiojanti kortelė su savo rėmeliu, radius ir fonu. Keturios visiškai skirtingos esybės
 * atrodė kaip ta pati anoniminė dėžutė, o vertikalės sąrašas suvalgydavo dvigubai daugiau, nei
 * duomenys reikalauja: prie kiekvieno įrašo prisidėdavo dar vienas rėmas ir tarpas iki kito.
 *
 * Dabar sąrašas yra VIENAS struktūrinis paviršius: išorinis rėmas priklauso sąrašui, o eilutes
 * atskiria viena 1px siūlė. Tai ta pati kalba, kurią jau naudoja kairė juosta („struktūrinis
 * paviršius, ne plaukiojanti kortelė") — tik pratęsta į turinio sritį.
 *
 * Šešėlių, gradientų ir „pakylėjimo" čia nėra ir negali būti: registro tapatybė yra tikslumas
 * ir struktūra, ne dekoracija.
 *
 * `overflow: hidden` SĄMONINGAI nenaudojamas, nors apvalūs kampai jį provokuoja: eilutėse yra
 * fokusuojamų mygtukų, ir jų fokuso žiedas prie krašto būtų nukirptas. Eilutės fono neturi,
 * todėl kirpti nieko ir nereikia.
 */
/* Registro paviršius (E2.c P3C): vienas vaidmuo VISIEMS P2 registrams.
 *
 * Šios dvi klasės dengia visus keturis: `.app-project-list` naudoja ir objektai, ir dokumentai
 * (abu su savo šiukšliadėžėmis), `.app-member-list` — ir nariai, ir kvietimai. Todėl gylio
 * modelis negali išsiskirti tarp rodinių: „Objektai pakelti, Komanda įdubusi" čia struktūriškai
 * neįmanoma. */
.app-project-list,
.app-member-list {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--app-register-surface);
}

/* Siūlė TIK tarp eilučių — ne po paskutine ir ne prieš pirmą (tam jau yra registro rėmas).
   Selektorius pagal `li`, o ne pagal eilutės klasę: viename registre gyvena `.app-project`
   arba `.app-doc`, ir siūlė turi veikti abiem be dubliuotų taisyklių. */
.app-project-list > li + li,
.app-member-list > li + li {
  border-top: 1px solid var(--border);
}

.app-project-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Eilutės vidinis tarpas mažesnis nei senos kortelės (0.8/0.95rem): tankio taikinys 6–7/10.
   Valdiklių aukštis NEMAŽINAMAS — jie ir toliau laiko `--control-h` pirštų ribą. */
.app-project,
.app-doc {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.65rem 0.85rem;
}

.app-project-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  /* Ilgas pavadinimas be tarpų negali išplėsti puslapio už ekrano ribų (mobilus vaizdas). */
  overflow-wrap: anywhere;
}

/* ── Meta eilutė ──────────────────────────────────────────────────────────────
 *
 * Antriniai duomenys (adresas, klientas, datos) anksčiau buvo atskiri vertikalūs `span` —
 * po vienos reikšmės eilutėje. Dabar jie sudaro VIENĄ besilaužiančią eilutę, todėl įrašas
 * užima dvi teksto eilutes, o ne keturias.
 *
 * Atskyrimas yra TARPAS, o ne simbolis: į tekstą separatorius nerašomas niekada (kitaip jis
 * taptų duomenų dalimi ir atsirastų ekrano skaitytojo sraute), o CSS `::before` taškas
 * laužiantis eilutę atsidurtų naujos eilutės pradžioje kaip našlaitis. Laukai turi savo
 * etiketes („Klientas:", „Atnaujinta:"), todėl tarpo pakanka. */
.app-meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 0.9rem;
  margin: 0;
  min-width: 0;
}

/* Meta tekstas 0.85rem, ne 0.8rem: tai TIKRI duomenys (adresas, klientas, data), kuriuos
   skaito ir žmogus, silpnai gaudantis kompiuteriuose, ir dažnai — statybvietėje. Micro-label
   dydis (0.75rem) skirtas TIK sekcijų ir rolių etiketėms, ne duomenims. */
.app-project-meta {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.app-projects-limit { margin: 0.75rem 0 0; }

/* ── Objekto dokumentai (E2.b.2c) ──────────────────────────────────────────── */

/* Sąrašo mazgas dalijasi `.app-project-list` tinkleliu — atskiro tinklelio nereikia. */

.app-docs-subtitle {
  margin: -0.25rem 0 0.75rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* Dokumento eilutės išdėstymas paimtas iš bendros `.app-project, .app-doc` taisyklės
   (žr. „DARBO REGISTRAS") — atskiros kopijos su tomis pačiomis reikšmėmis nebėra. */

.app-doc-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  /* Ilgas pavadinimas be tarpų negali išplėsti puslapio už ekrano ribų (mobilus vaizdas). */
  overflow-wrap: anywhere;
}

.app-doc-meta {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* „Atidaryti" (E2.b.2d.3). Tas pats 44px pirštų minimumas kaip objektų veiksmuose. */
.app-doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
}

.app-doc-actions .btn { min-height: var(--control-h); }

/* ── Objekto veiksmai ir inline panelės (E2.b.1c) ──────────────────────────── */

.app-project-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
}

/* Veiksmų mygtukai naudoja `.btn-sm` (32px), todėl kortelėje jie neužgožia pavadinimo. Bet
   pirštui to nepakanka, tad objektų sąraše aukštis pakeliamas iki bendros 44px ribos. */
.app-project-actions .btn { min-height: var(--control-h); }

.app-project-actions .btn[disabled] {
  opacity: 0.65;
  cursor: progress;
}

/* Panelės vieta kortelėje. Tuščia (uždaryta) — nieko neužima. */
.app-project-panel:empty { display: none; }

/* ── VIENAS PATVIRTINIMO DIALEKTAS (E2.c P2B) ─────────────────────────────────
 *
 * Iki šiol produkte gyveno DU skirtingi patvirtinimo skydeliai: objektų ir dokumentų —
 * įrėminta dėžutė su savo paviršiumi ir atsiradimo animacija; komandos ir kvietimų — plikas
 * `border-top` plaukelis be fono ir be judesio. Ta pati sąveika (pavojingas veiksmas →
 * patvirtink) dviejuose ekranuose atrodė ir „atsirasdavo" skirtingai.
 *
 * Dabar visi keturi naudoja TĄ PATĮ dialektą. Animacija paimta esama (`app-panel-in`) —
 * naujo keyframe, naujos trukmės ar naujo judesio žodyno nekuriama, o `prefers-reduced-motion`
 * blokas failo apačioje ją ir toliau išjungia be jokių išimčių. */
.app-project-edit,
.app-project-confirm,
.app-member-confirm,
.app-invite-confirm,
.app-doc-history {
  margin: 0.75rem 0 0;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-overlay);
  /* Ta pati atsiradimo animacija kaip kūrimo panelėje (CLAUDE.md animacijų taisyklė):
     `.hidden`/`replaceChildren` yra display-lygio pokytis, todėl `transition` neveiktų. */
  animation: app-panel-in 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.app-project-edit .form-group { margin-bottom: 0.75rem; }
.app-project-edit .form-input { min-height: var(--control-h); }
.app-project-edit .form-input[aria-invalid='true'] { border-color: var(--danger); }

/* Patvirtinimo sakinys — vienodas visuose keturiuose skydeliuose (E2.c P2B).
 *
 * Komandos ir kvietimų variantas anksčiau buvo `--text-secondary`, t. y. blankesnis už
 * objektų. Tai buvo atvirkščiai nei reikia: tekstas, kurį naudotojas privalo perskaityti
 * PRIEŠ negrįžtamą sprendimą, yra pats svarbiausias skydelio turinys.
 * `overflow-wrap` išlaikytas dėl ilgų el. pašto adresų kvietimų klausimuose. */
.app-project-confirm-text,
.app-member-confirm-text,
.app-invite-confirm-text {
  margin: 0 0 0.6rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

/* Sumažinto judesio taisyklė šioms panelėms — bendrame bloke failo apačioje. */

/* ── Versijų istorija ir peržiūra kortelėje (E2.b.3 Phase C) ────────────────── */

/* Panelės rėmas ir animacija paimti iš `.app-project-confirm` grupės (aukščiau) — atskiro
   dizaino nėra sąmoningai: istorija turi atrodyti kaip natūrali kortelės dalis. */

.app-doc-history-head {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.app-doc-history-body { display: block; }

.app-doc-history-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Eilutė laužiasi, o ne slysta horizontaliai: ilga etiketė ar data neišplečia eilutės.
 *
 * Rėmas, radius ir fonas PAŠALINTI (E2.c P2A). Tai buvo vienintelis tikras „kortelė kortelėje
 * kortelėje" atvejis visame produkte: `.app-doc` (kortelė) → `.app-doc-history` (panelė su
 * savo rėmu ir fonu) → `.app-doc-history-item` (dar vienas rėmas ir fonas). Trys dėžutės
 * gilyn — būtent tas šablonas, kurio anti-generic taisyklė draudžia.
 *
 * Dabar istorijos įrašai yra tos pačios kalbos eilutės kaip ir visur kitur: skiria viena
 * siūlė, o rėmas priklauso juos talpinančiai panelei. */
.app-doc-history-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  padding: 0.4rem 0;
  overflow-wrap: anywhere;
}

.app-doc-history-item + .app-doc-history-item {
  border-top: 1px solid var(--border);
}

/* Pirštui skirta riba ta pati kaip kituose veiksmuose. */
.app-doc-history-item .btn { min-height: var(--control-h); }

/* „Dabartinė" — subtili žymė, ne antra eilutė sąraše. */
.app-doc-current {
  font-weight: 600;
  color: var(--text-primary);
}

/* Snapshot peržiūra: PREVIEW-SPECIFIC stack. Be jo `span` laukai (inline) susilietų į vieną
   tekstą, nes panelės kūnas yra `display: block`. Istorijos SĄRAŠO išvaizda čia nedalyvauja —
   jos eilutės turi savo `.app-doc-history-item` flex tinklelį. */
.app-doc-history-preview {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  /* Ilgas pavadinimas be tarpų negali išplėsti kortelės (mobilus vaizdas). */
  min-width: 0;
}

.app-doc-history-preview .app-doc-history-head { margin: 0; }

/* Būsenos žymės — viena loginė eilutė, kuri siaurame ekrane laužiasi, o ne slysta. */
.app-doc-history-preview-status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.6rem;
  margin: 0;
  min-width: 0;
}

/* ── Komandos sąrašai (E2.b.4 Phase D; registras E2.c P2A) ────────────────────
 *
 * Eilutė bazėje lieka `flex column`, o ne griežtas stulpelių tinklelis: 390 px plotyje
 * lygiuotos kolonos arba reikalautų horizontalaus slydimo, arba spaustų el. paštą į vieną
 * simbolį per eilutę. `min-width: 0` + `overflow-wrap` yra tai, kas laiko ilgą adresą savo
 * eilutėje ir neišplečia puslapio. Kolonos įsijungia TIK ≥60rem (žr. registro tinklelius).
 *
 * Rėmas, radius ir fonas priklauso registrui (`.app-member-list`), ne eilutei — todėl narių
 * sąrašas nebėra vienodų kortelių siena.
 *
 * `.app-views` rodinių juostos čia nebėra: nuo E2.c P1A globali navigacija gyvena kairėje
 * juostoje (`.app-nav`), o ne rodinio turinio viršuje.
 */
.app-member-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.app-member,
.app-invite {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.65rem 0.85rem;
}

/* Įrašo pavadinimas — TA PATI 0.95rem reikšmė kaip objekto ir dokumento eilutėse (anksčiau
   čia buvo atskiri 0.92rem): vienas dydis vienam hierarchijos vaidmeniui. */
.app-member-name,
.app-invite-email {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  /* Ilgas el. paštas be tarpų privalo laužtis, kitaip jis išplečia eilutę už ekrano. */
  overflow-wrap: anywhere;
}

/* TIKRI duomenys (el. paštas, narystės data, kvietimo būsena) — 0.85rem, kaip ir objektų
   meta. Rolė čia SĄMONINGAI nebedalyvauja: ji yra etiketė, ne duomuo (žr. žemiau). */
.app-member-meta,
.app-member-since,
.app-invite-state {
  font-size: 0.85rem;
  color: var(--text-secondary);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ── Rolė — MICRO-LABEL (E2.c P2A) ────────────────────────────────────────────
 *
 * Rolė yra svarbiausias komandos rodinio duomuo („kas ką gali"), bet iki šiol ji buvo tik dar
 * vienas pilkas 0.8rem tekstas tarp el. pašto ir datos — atsakymui į „kas čia administratorius?"
 * reikėdavo perskaityti trečią kiekvieno įrašo eilutę.
 *
 * Etiketės forma (didžiosios, tarpai tarp raidžių) daro ją skenuojamą vertikaliai, o ≥60rem
 * ji dar ir atsiduria savo kolonoje. JOKIŲ pill/badge burbulų, jokių naujų spalvų ir jokio
 * kodavimo vien spalva — rolės pavadinimas lieka tekstas.
 *
 * Dydis — tas pats 0.75rem micro-label tokenas kaip sekcijų etikečių; lietuviški rolių vardai
 * trumpi („SAVININKAS", „NARYS"), todėl didžiosios raidės skaitomumo nemažina. */
.app-member-role,
.app-invite-role {
  min-width: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

/* „Jūs" — tekstinė žymė, ne spalvinis užuominų kodas. */
.app-member-you {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
}

/* Būsena visada turi TEKSTĄ (žr. `app/team.js`); spalva tik pastiprina.
 *
 * ── SVORIAI (E2.c P2B) ───────────────────────────────────────────────────────
 *
 * „Laukia" yra vienintelė AKTUALI būsena — tik ji dar laukia veiksmo, ir tik jos eilutėje
 * apskritai yra ką daryti. Todėl ji gauna kuklų teksto svorį; jokių naujų spalvų, jokių
 * pill/badge burbulų.
 *
 * „Priimtas" anksčiau naudojo akcentą, nors tai baigta, istorinė būsena. Akcentas produkte
 * reiškia „kur aš esu / ką galiu" (aktyvi navigacija, fokusas, „Jūs"), todėl jo atidavimas
 * užbaigtam įrašui ir nuvertindavo akcentą, ir klaidingai pritraukdavo akį. Dabar „Priimtas"
 * prisijungia prie kitų terminalinių būsenų. */
.app-invite-state-pending {
  color: var(--text-primary);
  font-weight: 600;
}

.app-invite-state-expired,
.app-invite-state-declined,
.app-invite-state-revoked,
.app-invite-state-accepted { color: var(--text-secondary); }

.app-invites { margin-top: 1.25rem; }

/* ── Kvietimų administravimas (E2.b.4 Phase F) ────────────────────────────── */
/*
 * Visos taisyklės scoped į `.app-invite*` — jokio globalaus `.btn` ar `input` perrašymo:
 * kvietimų forma gyvena tame pačiame ekrane kaip objektų formos ir negali jų paveikti.
 */

.app-invite-hosts { margin-top: 0.75rem; }

.app-invite-form { margin-bottom: 1rem; }

/* Formos pavadinimas — ketvirtas hierarchijos lygis (H1 Komanda → H2 Nariai → H3 Kvietimai →
   H4 Pakviesti narį). Ne micro-label: tai turinio antraštė, o ne sekcijos etiketė. */
.app-invite-form-title {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* ── FORMOS LAUKŲ TINKLELIS (E2.c P2C) ────────────────────────────────────────
 *
 * Uždaro realų hosted radinį: ties ~1054px etiketė „Rolė" likdavo vienoje eilutėje, o jos
 * `select` nukeliaudavo po kitu lauku — etiketė imdavo rodyti į svetimą valdiklį.
 *
 * Priežastis buvo struktūrinė: etiketės ir laukai buvo atskiri formos vaikai, todėl laužimas
 * galėjo įvykti TARP etiketės ir jos lauko. Dabar kiekviena `.form-group` yra vienas nedalomas
 * tinklelio elementas, o `auto-fit` + `minmax` parenka stulpelių skaičių pagal turimą plotį.
 *
 * Tai INTRINSIC išdėstymas: jokio naujo breakpoint'o, jokios JS logikos. Kai vienam stulpeliui
 * lieka mažiau nei 16rem, grupės natūraliai susikrauna viena po kita — visos iš karto, o ne
 * pusiau. */
.app-invite-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0 var(--app-gap-md);
  align-items: start;
}

/* Laukas užpildo savo tinklelio stulpelį; plotį riboja stulpelis, ne fiksuota reikšmė. */
.app-invite-email-input,
.app-invite-role-select {
  width: 100%;
  min-width: 0;
}

/* ── NUORODOS PERDAVIMO ŽINGSNIS (E2.c P2C) ───────────────────────────────────
 *
 * Naudojamas TAS PATS inline panelės dialektas kaip patvirtinimuose ir versijų istorijoje
 * (rėmas + `--bg-overlay` + `--radius-md`) — naujo kortelės stiliaus nekuriama.
 *
 * Judesio čia SĄMONINGAI nėra: šis etapas naujo judesio neįveda. Panelė atsiranda po
 * naudotojo veiksmo kartu su statuso pranešimu ir fokuso perkėlimu, todėl jos atsiradimas
 * ir taip nelieka nepastebėtas. */
.app-invite-copy {
  /* `display: block` AIŠKIAI: kortelė yra vertikali seka, o ne veiksmų juosta. */
  display: block;
  margin: 0 0 1rem;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-overlay);
}

.app-invite-copy-title {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* Fokusas atkeliauja programiškai (`tabindex="-1"`), todėl žiedas turi būti matomas — jį
   duoda bendra `.app-page [tabindex]:focus-visible` taisyklė; čia tik neleidžiama jo nukirpti. */
.app-invite-copy-title:focus-visible { outline-offset: var(--focus-ring-offset); }

.app-invite-copy-for {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0 0 0.4rem;
  min-width: 0;
}

.app-invite-copy-email {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.app-invite-copy-text {
  margin: 0 0 0.6rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-primary);
}

.app-invite-copy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
}

.app-invite-copy-actions .btn { min-height: var(--control-h); }

/* Vienkartinės nuorodos įspėjimas: NE smulki pilka pastaba ir NE raudona dėžutė. Tai faktas,
   kurį naudotojas privalo perskaityti, todėl jis gauna įprastą antrinio teksto svorį. */
.app-invite-copy-hint {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Veiksmai laužomi į kitą eilutę: 390 px kortelė neturi horizontalaus slinkimo.
   `.app-member-actions` (Phase G) turi tą patį elgesį, todėl jungiasi prie tos pačios
   taisyklės, o ne kartoja tas pačias reikšmes atskirai. */
/* `.app-invite-copy` iš šios grupės PAŠALINTA (E2.c P2C): anksčiau tai buvo viena eilutė
   [mygtukas + pastaba], todėl `display: flex` tiko. Dabar tai kelių eilučių perdavimo žingsnis
   (antraštė, adresatas, paaiškinimas, veiksmas, įspėjimas), ir paveldėtas `flex` suliedavo jas
   į vieną juostą. Kortelės išdėstymą dabar nustato jos pačios taisyklė žemiau. */
.app-member-actions,
.app-invite-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
}

/* Nuo E2.c P2B komandos eilutės veiksmai naudoja tą patį kompaktišką `btn-sm` dydį kaip
   objektų ir dokumentų eilutės. `btn-sm` nuleidžia aukštį iki 32px, todėl pirštų taikinys
   grąžinamas atgal — lygiai tas pats sprendimas, kuris jau galioja `.app-project-actions`.
   Vizualinis svoris mažas, taikinys — ne. */
.app-member-actions .btn,
.app-invite-actions .btn {
  min-height: var(--control-h);
}

/* Skydelio vieta narių/kvietimų eilutėje (E2.c P2B).
 *
 * Patvirtinimas gyvena veiksmų juostos VIDUJE (`app-member-confirm-host` yra flex elementas
 * tarp mygtukų), todėl be šios taisyklės dėžutė bandytų tilpti šalia jų ir ilgas sakinys
 * suspaustų arba išstumtų veiksmus. `flex: 1 1 100%` nuleidžia ją į savo eilutę per visą
 * plotį — būtent taip, kaip objektų kortelėje elgiasi `.app-project-panel`.
 *
 * Tuščias host'as nepalieka nei tarpo, nei laužtos eilutės. */
.app-member-confirm-host,
.app-invite-confirm-host {
  flex: 1 1 100%;
  min-width: 0;
}

.app-member-confirm-host:empty,
.app-invite-confirm-host:empty { display: none; }

/* Ilgas el. paštas kvietimo eilutėje laužomas, o ne stumia kortelės kraštą. */
.app-invite-email { overflow-wrap: anywhere; }


.app-subsection-title {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* „Kvietimai" — TIKRA sekcijos antraštė, todėl ji gauna tą patį micro-label svorį kaip
   „Nariai" virš jos. Be to hierarchija būtų apversta: H3 atrodytų didesnis už savo H2.
 *
 * Elemento kvalifikatorius (`h3`) čia BŪTINAS, o ne stiliaus tingumas: tą pačią klasę
 * naudoja ir kvietimo formos pavadinimas (`<p>` iš `teamInvitations.js`), o formos išvaizda
 * priklauso P2C etapui. Kvalifikatorius uždaro pakeitimą TIK ties sekcijos antrašte. */
h3.app-subsection-title {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary);       /* ryški, ne pilka (savininkas 2026-10-04) */
}

/* ── Skaitmenų lygiavimas (E2.c P2A) ──────────────────────────────────────────
 *
 * Datos ir skaičiai registre stovi vienas po kitu, todėl proporcinės skaitmenų pločių
 * reikšmės („1" siauresnis už „8") juos vizualiai išklibina. `tabular-nums` sulygiuoja
 * stulpelius be jokios lentelės ir be jokio fiksuoto pločio.
 *
 * Apimtis TIK darbo srities meta duomenys — bendra svetainės tipografija nekeičiama. */
.app-project-meta,
.app-doc-meta,
.app-member-meta,
.app-member-since,
.app-meta-line {
  font-variant-numeric: tabular-nums;
}

/* Pirmo karto tuščia būsena (E2.c P2A): naujam naudotojui ŠIS sakinys yra visas puslapio
   turinys, todėl jis nebeturi atrodyti kaip pilka tarnybinė pastaba. Vienas dydžio žingsnis
   ir pagrindinė teksto spalva — jokio milžiniško CTA, jokios iliustracijos, jokio judesio.
   Klasę uždeda `projects.js` TIK aktyvaus sąrašo tuščiai būsenai (šiukšliadėžė lieka rami). */
.app-projects-state.app-state-first-run {
  font-size: 1rem;
  color: var(--text-primary);
}

/* ── Registro tinkleliai (E2.c P2A) ───────────────────────────────────────────
 *
 * TIK ≥60rem. Bazė (telefonas, planšetė) lieka vienos kolonos srautas — tai ne „desktop,
 * suspaustas iki mobile", o mobile, praplėstas kolonomis ten, kur plotis realiai yra.
 *
 * Objekto ir dokumento eilutė: DVI zonos. Griežtų kolonų adresui/klientui čia nėra
 * sąmoningai — abu laukai neprivalomi, todėl kolonos būtų pusiau tuščios, o jų plotis
 * priklausytų nuo atsitiktinio ilgiausio įrašo.
 *
 * Narių ir kvietimų eilutė: rolė (ir kvietimo būsena) gauna SAVO koloną — jų reikšmės
 * vienodos formos, todėl kolona realiai skenuojama vertikaliai.
 *
 * Veiksmai narių/kvietimų eilutėse eina per VISĄ plotį atskiroje eilutėje: jų viduje gyvena
 * patvirtinimo skydelis su ilgu sakiniu, o `max-content` kolonoje jis arba išstumtų turinį,
 * arba būtų suspaustas į kelis simbolius per eilutę. */
@media (min-width: 60rem) {
  .app-project,
  .app-doc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: var(--app-gap-md);
    align-items: start;
  }

  .app-project > *,
  .app-doc > * {
    grid-column: 1;
    min-width: 0;
  }

  .app-project > .app-project-actions,
  .app-doc > .app-doc-actions {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }

  /* Inline panelė (redagavimas, patvirtinimas, versijų istorija) — per visą eilutės plotį.
     Panelės elgsena nekeičiama: tai tik jos vieta tinklelyje. */
  .app-project-panel {
    grid-column: 1 / -1;
  }

  .app-member,
  .app-invite {
    display: grid;
    column-gap: var(--app-gap-md);
    align-items: baseline;
  }

  .app-member { grid-template-columns: minmax(0, 1fr) max-content; }
  .app-invite { grid-template-columns: minmax(0, 1fr) max-content max-content; }

  .app-member > *,
  .app-invite > * {
    grid-column: 1;
    min-width: 0;
  }

  .app-member-role { grid-column: 2; grid-row: 1; }
  .app-invite-role { grid-column: 2; grid-row: 1; }
  .app-invite-state { grid-column: 3; grid-row: 1; }

  .app-member > .app-member-actions,
  .app-invite > .app-invite-actions {
    grid-column: 1 / -1;
  }
}

/* Mobilus: vienas stulpelis ir mažiau oro pakraščiuose. */
@media (max-width: 30rem) {
  .app-main { padding: 1.25rem 0.9rem 2rem; }
  .app-sidebar { padding: 0.9rem; }
  .app-pagehead { padding-left: 0.9rem; padding-right: 0.9rem; }
  /* Kvietimų (Phase F) ir narių (Phase G) veiksmai — irgi per visą plotį, tas pats pirštų
     taikinio principas. */
  .app-member-actions .btn,
  .app-invite-actions .btn,
  .app-invite-copy .btn { flex: 1 1 100%; }
  .app-project-form { padding: 0.85rem; }
  /* Veiksmų mygtukai per visą plotį — pirštu lengviau pataikyti nei į du siaurus. */
  .app-project-form-actions .btn { flex: 1 1 100%; }
}

/* ── Sumažintas judesys (E2.c P0) ─────────────────────────────────────────────
 *
 * Anksčiau darbo srityje buvo DU atskiri `prefers-reduced-motion` blokai, kurie vardijo
 * konkrečias paneles. Toks sąrašas sensta tyliai: kiekvienas naujas animuotas elementas
 * lieka neuždengtas, kol kas nors nepastebi. Čia jis pakeičiamas viena taisykle, kuri
 * galioja visai darbo sričiai — įskaitant tai, kas dar nesukurta.
 *
 * Kas išjungiama: VISOS įėjimo animacijos (`app-panel-in` ir bet kuri būsima).
 *
 * Kas SĄMONINGAI lieka: spalvų, rėmelių ir kontūro perėjimai. Jie neturi erdvinio judesio,
 * trunka 120–200 ms ir yra būsenos grįžtamasis ryšys — jų išjungimas sumažintų informaciją,
 * o ne judesio jautrumą. Todėl čia nėra `transition: none`, o `transition-property` sąrašas,
 * iš kurio pašalintas `transform` ir matmenys: jei ateityje kas nors pridės slenkantį ar
 * augantį elementą, jis šioje būsenoje nejudės automatiškai, be atskiro priminimo.
 *
 * `outline-color` į sąrašą SĄMONINGAI NEĮTRAUKTAS. Įtrauktas jis paveldėdavo esamą laukų
 * `transition-duration: 0.12s` ir fokuso žiedas imdavo atsirasti palaipsniui — būtent tame
 * režime, kuriame naudotojas prašo mažiau judesio, o fokusas turi būti matomas iš karto.
 * (Išmatuota: `outline-color` grąžindavo `currentColor` iškart po fokuso.)
 *
 * Apimtis — tik `.app-page`: `shared.css`, įrankiai ir titulinis puslapis nepaliečiami. */
@media (prefers-reduced-motion: reduce) {
  .app-page,
  .app-page *,
  .app-page *::before,
  .app-page *::after {
    animation: none !important;
    transition-property: background-color, border-color, color, box-shadow, opacity !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   D2 — DARBO SRITIES AMATAS
   ═══════════════════════════════════════════════════════════════════════════

   ── KODĖL ŠIS BLOKAS YRA GALE, O NE ĮTERPTAS Į ESAMAS TAISYKLES ─────────────

   Beveik kiekviena šio failo taisyklė yra pririšta testais, ir dalis jų lygina PAŽODINĮ
   šaltinio tekstą kartu su eilučių lūžiais (pvz. `.app-project-list,\n.app-member-list`).
   Įterpiant deklaracijas į tokias taisykles rizikuojama sulaužyti sargą, kuris saugo visai
   kitą dalyką, ir tas lūžis atrodytų kaip atsitiktinis.

   Todėl amatas pridedamas kaip vienas peržiūrimas sluoksnis: visos ankstesnės taisyklės
   lieka baitas į baitą tokios pačios, o čia esančios laimi kaskadoje pagal eiliškumą.

   ── KAS ČIA NEDAROMA ────────────────────────────────────────────────────────

   Informacijos architektūra nekeičiama: registras lieka registru. Jokių kortelių sienų,
   jokių skydelių su rodikliais, jokio brėžinio lapo dekoro — tinklelio fono, kampinių
   spaudų ar matininko oranžinės sklaidos darbo srityje nėra ir nebus. Tai ta pati ranka,
   bet ne tas pats lapas. */

/* ── Tipografijos ir tarpų skalė ────────────────────────────────────────────
 *
 * Iki šiol darbo sritis neturėjo skalės: 0.4/0.6/0.85/0.9/1.25rem gyveno greta be jokio
 * ryšio. Čia įvedami vaidmenys, kuriuos naudoja žemiau esančios taisyklės. Senos reikšmės
 * NEPERRAŠOMOS — jos tiesiog nustoja būti vieninteliu autoritetu. */
.app-page {
  --app-fs-title: 1.3rem;      /* rodinio H1 */
  --app-fs-section: 1rem;      /* sekcijos H2 */
  --app-fs-row: 0.98rem;       /* eilutės pavadinimas */
  --app-fs-body: 0.9rem;       /* valdikliai, nuorodos */
  --app-fs-meta: 0.8rem;       /* eilutės metaduomenys */
  --app-fs-micro: 0.7rem;      /* mono didžiųjų raidžių etiketė */

  --app-space-1: 0.25rem;
  --app-space-2: 0.5rem;
  --app-space-3: 0.75rem;
  --app-space-4: 1rem;
}

/* ── Hierarchija ────────────────────────────────────────────────────────────
 *
 * Problema, kurią tai uždaro: rodinio antraštė (1.35rem/600) ir eilutės pavadinimas
 * (0.95rem/600) skyrėsi beveik vien dydžiu, todėl ekranas skaitėsi kaip vienas ilgas
 * sąrašas be lygių. Dabar kiekvienas lygis turi savo svorį IR savo tarpą. */
.app-page .app-title {
  font-size: var(--app-fs-title);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.app-page .app-section-title {
  font-size: var(--app-fs-section);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Grupės etiketė tampa mono didžiųjų raidžių langeliu su plaukelio linija virš jos: tas pats
   mikro-etiketės žodynas kaip viešame puslapyje, tik be jokio spaudo dekoro. */
.app-page .app-nav-group {
  margin-top: var(--app-space-2);
  padding-top: var(--app-space-2);
  border-top: 1px solid var(--border);
  font-size: var(--app-fs-micro);
  letter-spacing: 0.09em;
  font-variant-numeric: tabular-nums;
}

/* ── Registro eilutės ───────────────────────────────────────────────────────
 *
 * Eilutė iki šiol neturėjo JOKIO atsako į žymeklį: sąrašas atrodė kaip statinis tekstas,
 * nors kiekviena eilutė turi veiksmų. Atsakas yra paviršiaus, ne pakylėjimo — registras
 * lieka plokščias, be šešėlių. */
.app-page .app-project-name,
.app-page .app-doc-name,
.app-page .app-member-name,
.app-page .app-invite-email {
  font-size: var(--app-fs-row);
  letter-spacing: -0.005em;
}

/* Metaduomenys atsitraukia per dydį IR per spalvą, todėl pavadinimas lieka vienintelis
   pirmo žvilgsnio taikinys. Lentelinės figūros: datos ir skaičiai eilutėse nešokinėja. */
.app-page .app-project-meta,
.app-page .app-doc-meta,
.app-page .app-member-meta,
.app-page .app-member-since,
.app-page .app-meta-line {
  font-size: var(--app-fs-meta);
  font-variant-numeric: tabular-nums;
}

@media (hover: hover) and (pointer: fine) {
  .app-page .app-project:hover,
  .app-page .app-doc:hover,
  .app-page .app-member:hover,
  .app-page .app-invite:hover {
    background: var(--bg-hover);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .app-page .app-project,
  .app-page .app-doc,
  .app-page .app-member,
  .app-page .app-invite {
    transition: background 150ms ease;
  }
}

/* ── Tylūs tretiniai veiksmai ───────────────────────────────────────────────
 *
 * Kiekviena eilutė turėjo tris vienodo svorio apibrėžtus mygtukus, todėl registras atrodė
 * kaip dėžučių siena: dvylika vienodų rėmelių keturiose eilutėse. Rėmelį pasilieka tik tas
 * veiksmas, kuris realiai yra pagrindinis; likusieji tampa tyliais tekstiniais valdikliais
 * ir rėmelį atgauna TIK po žymekliu.
 *
 * 44px pirštų riba NEKEIČIAMA — ji ateina iš aukščiau esančių taisyklių. */
.app-page .app-project-actions .btn-ghost,
.app-page .app-doc-actions .btn-ghost,
.app-page .app-member-actions .btn-ghost,
.app-page .app-invite-actions .btn-ghost {
  border-color: transparent;
  background: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .app-page .app-project-actions .btn-ghost:hover,
  .app-page .app-doc-actions .btn-ghost:hover,
  .app-page .app-member-actions .btn-ghost:hover,
  .app-page .app-invite-actions .btn-ghost:hover {
    border-color: var(--border);
    background: var(--bg-overlay);
  }
}

/* Objekto „Ištrinti" (savininkas 2026-10-25) — raudonas tekstas, užvedus — ir raudonas rėmelis. Užpildytas raudonas
   mygtukas lieka tik patvirtinimo žingsniui (`btn-danger`). */
.app-page .app-project-actions .app-project-delete { color: var(--danger); }
@media (hover: hover) and (pointer: fine) {
  .app-page .app-project-actions .app-project-delete:hover { border-color: var(--danger); color: var(--danger); }
}

/* ── Atsijungimas nustoja būti sunkiausiu juostos elementu ──────────────────
 *
 * Apibrėžtas beveik per visą plotį mygtukas buvo vizualiai sunkesnis už „Objektai" ir
 * „Komanda" — t. y. retas veiksmas atrodė svarbesnis už kasdienį. Dabar tai tylus tekstinis
 * valdiklis; taikinys lieka 44px, tik rėmelis dingsta iki žymeklio. */
.app-page .app-signout {
  border-color: transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--app-fs-body);
}

@media (hover: hover) and (pointer: fine) {
  .app-page .app-signout:hover {
    border-color: var(--border);
    color: var(--text-primary);
  }
}

/* ── Būsenos juosta ─────────────────────────────────────────────────────────
 *
 * `#app-status` driekėsi per visą ~1100px turinio plotį dėl vieno sakinio, todėl trumpas
 * pranešimas atrodė kaip tuščia dėžė. Riba matavimo, ne dekoro: ~65 simboliai eilutėje.
 * Rišama prie `.app-page`, todėl penki Auth puslapiai lieka nepaliesti. */
.app-page .auth-status {
  max-width: 40rem;
}

/* Pranešimas lieka matomas ir tada, kai forma toli žemiau (telefone „Slaptažodžio keitimas", „Sąskaitų nustatymai"):
   kol regione yra tekstas, jis prilimpa prie lango viršaus (peržiūra 2026-10-05). Fonas nepermatomas (`--bg-overlay`). */
.app-page .auth-status:not(.hidden) {
  position: sticky;
  top: 0.5rem;
  z-index: 2;            /* žemiau mobiliojo stalčiaus uždangos (z-index 3) */
}

/* Sėkmės pranešimas po 3 s išnyksta (savininkas 2026-10-25; `createStatusRegion` `okMs`, app.js `STATUS_OK_MS`): 240 ms
   išblukimas su nedideliu pakilimu (`STATUS_LEAVE_MS`); sumažinto judesio režime — be animacijos. */
.app-page .auth-status.auth-status-leaving { animation: app-status-out 240ms ease-in forwards; }
@keyframes app-status-out { to { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .app-page .auth-status.auth-status-leaving { animation: none; }
}

/* Telefone viršuje jau prilipusi viršutinė juosta (61px = 0.5rem + 44px + 0.5rem + 1px), todėl pranešimas prilimpa PO ja,
   tuo pačiu 0.5rem tarpu, o ne po ja pasislėpęs. Tos pačios dvi sąlygos, kurios juostą rodo. */
@media (max-width: 59.999rem) {
  .app-shell-pending .auth-status:not(.hidden),
  .app-shell-ready .auth-status:not(.hidden) {
    top: calc(var(--control-h) + 2 * var(--app-gap-sm) + 1px + var(--app-gap-sm));
  }
}

/* Būsenos tekstas sąraše — ramesnis ir su ta pačia meta skale. */
.app-page .app-projects-state,
.app-page .app-note {
  font-size: var(--app-fs-meta);
}

/* ── Įrankių nuorodos juostoje ──────────────────────────────────────────────
 *
 * Jos veda IŠ darbo srities, todėl lieka tylesnės už rodinius. Dabar jos neša ir darbo
 * srities kontekstą (`?workspace=1`), bet vizualiai tai nieko nekeičia. */
.app-page .app-tool-link {
  font-size: var(--app-fs-body);
}

/* ═══════════════════════════════════════════════════════════════════════════
   D3 — PASKYROS SRITIS (profilis · įmonė · sauga)

   ── KODĖL ŠIS BLOKAS YRA GALE ─────────────────────────────────────────────
   Esamos taisyklės yra prirakintos statinio sargo (kūnas lyginamas newline-tiksliai), todėl
   jų redagavimas būtų rizika be naudos. Naujos klasės pridedamos, o ne įterpiamos.

   ── KAS ČIA NEDAROMA ──────────────────────────────────────────────────────
   Jokių kortelių, jokių šešėlių, jokių gradientų, jokio „marketinginio" oranžinio. Paskyros
   sritis yra tas pats REGISTRAS kaip objektai ir komanda — tik jo eilutės yra laukai.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Juostos paskyros grupė. Tarpas viršuje atskiria ją nuo įrankių grupės, o plaukelio linija
   pasako, kad tai kita navigacijos kategorija — be antros dėžės ir be fono. */
.app-account-nav {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

/* ── Nustatymai (savininkas 2026-10-04, SĄSKAITA etalonas) ──────────────────────
   Skirtukai po H1; kiekviena sekcija — eilutė: kairėje pavadinimas ir paaiškinimas, dešinėje kortelė su laukais
   ir „Išsaugoti" kortelės apačioje. Siaurame ekrane — vienas stulpelis. */
.app-settings-tabs {
  display: flex;
  gap: 0 1.75rem;
  margin-top: var(--app-space-3);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.app-settings-tabs::-webkit-scrollbar { display: none; }

/* Storis VIENODAS visose būsenose — kitaip pasirinkus skirtuką jo plotis pasikeistų ir juosta pašoktų;
   „čia esate" sako spalva ir akcento brūkšnys. */
.app-settings-tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
  margin-bottom: -1px;
  padding: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
}
.app-settings-tab[aria-current='page'] {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}
@media (hover: hover) and (pointer: fine) {
  .app-settings-tab:not([aria-current='page']):hover { color: var(--text-primary); }
}
.app-settings-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.app-settings {
  --settings-card-pad: 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--app-space-3);
  padding: 1.5rem 0;
}
.app-settings + .app-settings,
.app-settings-group + .app-settings { border-top: 1px solid var(--border); }

@media (min-width: 60rem) {
  .app-settings {
    --settings-card-pad: 1.5rem;
    grid-template-columns: minmax(11rem, 17rem) minmax(0, 1fr);
    gap: 2.5rem;
  }
}

.app-settings-intro {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.app-settings-heading {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
}
.app-settings-lead {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.app-settings-card {
  display: flex;
  flex-direction: column;
  gap: var(--app-space-3);
  min-width: 0;
  padding: var(--settings-card-pad);
  background: var(--app-register-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* Kortelės apačia: „Išsaugoti" dešinėje, ant savo juostos (kaip etalone). */
.app-settings-card .app-settings-actions {
  justify-content: flex-end;
  margin: var(--app-space-2) calc(-1 * var(--settings-card-pad)) calc(-1 * var(--settings-card-pad));
  padding: 0.85rem var(--settings-card-pad);
  background: var(--bg-base);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Serijos ir mokėjimas: būsenos ir rolės tekstas, po jų — dvi sekcijos. */
.app-settings-group {
  display: flex;
  flex-direction: column;
}

.app-settings-check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--control-h);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
}
.app-settings-check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
}

/* „Serijų nustatymai" lentelė (etalonas): Serija | Sekantis nr. | Veiksmai. Antraštės — ryškios (užrašų taisyklė),
   numeriai — lentelinio pločio skaitmenys, kad stulpelis nešokinėtų. Ne administratoriui veiksmų stulpelio nėra. */
.app-series-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--app-fs-body);
}
.app-series-table th,
.app-series-table td {
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}
.app-series-table thead th {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-base);
}
.app-series-table tbody tr:last-child > * { border-bottom: 0; }
.app-series-name { font-weight: 400; }
.app-series-code {
  display: block;
  font-weight: 600;
  color: var(--text-primary);
}
/* Dokumento tipas — eilutės pavadinimas, todėl ryškus (CLAUDE.md „Užrašų ryškumo taisyklė"). */
.app-series-type {
  display: block;
  font-size: var(--app-fs-meta);
  color: var(--text-primary);
}
.app-series-next {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.app-series-actions { width: 1%; text-align: right; white-space: nowrap; }
.app-series-edit-btn { min-height: var(--control-h); }
.app-series-table.is-readonly .app-series-actions { display: none; }

/* Redagavimo skydelis — po lentele, atskirtas linija; antraštė pasako, KURĮ tipą redaguojame. */
.app-series-edit {
  margin-top: var(--app-space-2);
  padding-top: var(--app-space-3);
  border-top: 1px solid var(--border);
}
.app-series-edit-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* Perjungiant skirtuką turinys atsiranda švelniai (CLAUDE.md animacijų taisyklė), ne akimirksniu. */
@media (prefers-reduced-motion: no-preference) {
  .app-settings:not(.hidden),
  .app-settings-group:not(.hidden),
  .app-series-edit:not(.hidden),
  .app-business-page:not(.hidden),
  .app-business-series:not(.hidden) {
    animation: app-settings-in 220ms ease-out;
  }
  .app-settings-group > .app-settings { animation: none; }
}
@keyframes app-settings-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ── Nauja veikla (KV1, savininkas 2026-10-11, foto A4 ir veiklų formos pagal SĄSKAITA) ────────────────────
   Centruotas stulpelis: žingsnių taškai, antraštė, tipų kortelės (IV, MB, UAB), „ARBA" ir sąrašas (IĮ, VšĮ, asociacija,
   AB); 2 žingsnyje — siauresnė forma ir „Atgal" / „Tęsti toliau". Visi užrašai ryškūs (`--text-primary`). */
.app-business {
  max-width: 54rem;
  margin: 0 auto;
  padding: 0.5rem 0 2rem;
  text-align: center;
}
.app-business-steps {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin: 0 auto 1.75rem;
  padding: 0;
  list-style: none;
}
.app-business-dot {
  width: 14px;
  height: 14px;
  border: 2px solid var(--accent);
  border-radius: 999px;
  background: transparent;
}
.app-business-dot[aria-current="step"] { border-style: dashed; }
.app-business-dot.is-done { background: var(--accent); }
.app-business-dot + .app-business-dot { margin-left: 15rem; position: relative; }
.app-business-dot + .app-business-dot::before {
  content: '';
  position: absolute;
  right: calc(100% + 2px);
  top: 50%;
  width: 15rem;
  height: 2px;
  background: var(--border);
  transform: translateY(-50%);
}
.app-business-title {
  margin: 0 0 0.75rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
}
.app-business-lead {
  max-width: 34rem;
  margin: 0 auto 1.75rem;
  color: var(--text-primary);
  line-height: 1.5;
}
.app-business-question {
  margin: 0 0 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}
.app-business-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.app-business-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 11rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--app-register-surface);
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.08);
  transition: border-color 180ms ease, transform 180ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.app-business-card-code { font-size: 2rem; font-weight: 800; line-height: 1.1; }
.app-business-card-name { font-weight: 600; }
.app-business-or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.75rem 0 0.25rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.app-business-or::before,
.app-business-or::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--border); }
.app-business-list { margin: 0; padding: 0; list-style: none; text-align: left; }
.app-business-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 0 0.25rem;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
}
.app-business-row-icon { flex: none; }
@media (hover: hover) and (pointer: fine) {
  .app-business-card:hover { border-color: var(--accent); transform: translateY(-2px); }
  .app-business-row:hover { color: var(--accent); }
}
.app-business-form {
  max-width: 34rem;
  margin: 0 auto;
  text-align: left;
}
.app-business-form .app-business-title,
.app-business-form .app-business-lead { text-align: center; }
.app-business-form .form-input { min-height: var(--control-h); }
/* Laukai vienas po kito su tarpu — etiketė priklauso SAVO laukui, ne ankstesniam. */
.app-business-form .form-group { margin: 0 0 var(--app-space-4); }
.app-business-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--control-h);
  margin: 0.25rem 0 1rem;
  cursor: pointer;
}
.app-business-switch-label { font-size: 0.88rem; font-weight: 500; color: var(--text-primary); }
.app-business-switch input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 48px;
  height: 28px;
  margin: 0;
  border-radius: 999px;
  background: var(--border-mid);
  cursor: pointer;
  transition: background-color 180ms ease;
}
.app-business-switch input::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  /* Pakelto paviršiaus vaidmuo (šviesioje — balta, tamsioje — `--bg-overlay`): matosi ir ant takelio, ir ant akcento. */
  background: var(--app-register-surface);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
  transition: transform 180ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.app-business-switch input:checked { background: var(--accent); }
.app-business-switch input:checked::after { transform: translateX(20px); }
.app-business-switch input:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.app-business-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.5rem 0 0;
}
.app-business-back {
  min-height: var(--control-h);
  padding: 0 0.25rem;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
@media (max-width: 40rem) {
  .app-business-cards { grid-template-columns: 1fr; }
  .app-business-card { min-height: 6.5rem; }
  .app-business-dot + .app-business-dot { margin-left: 8rem; }
  .app-business-dot + .app-business-dot::before { width: 8rem; }
  .app-business-title { font-size: 1.35rem; }
}

/* Paaiškinimas, kodėl laukai neredaguojami. Tai KONTEKSTAS, ne klaida, todėl jis tylus —
   klaidos spalva čia meluotų apie tai, kad kažkas nepavyko. */
.app-settings-note {
  margin: 0;
  font-size: var(--app-fs-meta);
  color: var(--text-secondary);
}

/* Forma: viena stulpelio gijos linija. Dviejų stulpelių tinklelis čia būtų blogesnis —
   laukai yra skirtingo ilgio ir skirtingos svarbos, o akis skaito juos iš eilės. */
.app-settings-form {
  display: flex;
  flex-direction: column;
  gap: var(--app-space-3);
  margin: 0;
}

/* Veiksmų eilutė. `margin-top` didesnis už tarpą tarp laukų: mygtukas nėra dar vienas laukas. */
.app-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--app-space-2);
  margin: var(--app-space-2) 0 0;
}

/* Du laukai vienoje eilutėje (Vardas | Pavardė, etalonas). Siaurame ekrane — vienas po kitu, kad 16px laukai
   ir jų užrašai tilptų be laužymo. */
.app-settings-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--app-space-3);
}
@media (min-width: 40rem) {
  .app-settings-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Skaitymo režimo laukas: tas pats rėmelis, bet be „įvesk čia" kvietimo. Naudojamas
   `readonly`, o ne `disabled`, todėl reikšmę galima pažymėti ir nukopijuoti. */
.app-settings-form .form-input[readonly] {
  background: var(--bg-base);
  color: var(--text-secondary);
  cursor: default;
}

/* iOS Safari priartina puslapį, kai fokusuojamas laukas su mažesniu nei 16px šriftu. Tas pats sprendimas kaip
   `tools.css`: tik lietimo įrenginiuose (įvesties įrenginys, ne ekrano plotis), todėl darbalaukio tankis nesikeičia. */
@media screen and (pointer: coarse) {
  .app-settings-form .form-input { font-size: 16px; }
}

/* ── Perėjimas tarp dokumentų (D4C4-N2) ────────────────────────────────────────
   Darbo sritis yra kelių ATSKIRŲ dokumentų rinkinys: `/app/**` ir trys įrankiai. Perėjimas
   tarp jų iki šiol buvo kietas kirtis — naršyklė nubraukdavo seną kadrą ir piešdavo naują.
   Geometriją N1 jau padarė vienodą pirmame kadre, todėl liko tik pats perjungimas.

   `@view-transition` veikia BE JOKIO JavaScript: naršyklė pati padaro seno ir naujo
   dokumento nuotraukas ir jas sukryžmina. Todėl čia nėra nė vienos JS eilutės — o jei
   naršyklė šito nemoka, tiesiog nieko neįvyksta ir lieka tas pats kietas kirtis.

   Ribos `@media` viduje yra sąmoningos ir patikrintos tikra naršykle (Edge 152):
   - `min-width: 60rem` — siaurame ekrane įrankis atveriamas per meniu, kur perėjimas
     dengtų patį veiksmą; be to siauras kelias yra jautriausias našumui.
   - `prefers-reduced-motion: no-preference` — judesio jautrumas gerbiamas be išimčių.
   Už abiejų ribų perėjimas NEĮVYKSTA — tai išmatuota, ne numanoma.

   Blokas privalo būti VIENODAS `app.css` ir `workspace-band.css`. Perėjimas tarp dokumentų
   įvyksta tik tada, kai jį deklaruoja ABU dokumentai; `/app/**` krauna `app.css`, įrankiai
   — `workspace-band.css`. Bet koks skirtumas tarp jų tyliai išjungtų pusę perėjimų.

   Trukmė prisegama tyčia: UA numatytoji `root` trukmė yra 250 ms (išmatuota, ne spėta).
   Mastelio, postūmio ar suliejimo taisyklių neįvedama. UA `root` grupei visada sukuria
   `transform`/`width`/`backdrop-filter` kadrus, bet lango dydis nesikeičia, todėl tie kadrai
   yra tapatybiniai — geometrija nejuda, o būtent tai ir yra N1 rezultatas, kurio negalima prarasti.

   JUOSTA — ATSKIRA GRUPĖ (savininkas 2026-10-04). Kryžminant visą dokumentą juosta liejosi kartu
   su turiniu, todėl kiekvienas jos skirtumas (kitas dabartinis punktas, pogrupis) matėsi kaip
   krustelėjimas. Vardą `workspace-rail` juostai duoda NE šis blokas, o nuolatinės juostos taisyklė
   (`/app/` — `.app-sidebar` nuo 60rem; įrankiuose — `.tool-rail` nuo savo lūžio): vienoda juosta
   abiejuose dokumentuose yra dvi vienodos nuotraukos, todėl ji stovi, o liejasi tik turinys.
   Stalčius vardo negauna — kitaip perėjimas pieštų juostą, „išvažiuojančią" už ekrano. */
@media (min-width: 60rem) and (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 200ms;
    animation-timing-function: ease;
  }

  /* Juostos grupė — ta pati trukmė kaip `root`, kad dabartinio punkto žymeklis persikeltų kartu su turiniu. */
  ::view-transition-group(workspace-rail),
  ::view-transition-old(workspace-rail),
  ::view-transition-new(workspace-rail) {
    animation-duration: 200ms;
    animation-timing-function: ease;
  }
}