/* 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 trys dydžiai yra BENDRA `/app/` juostos ir įrankių juostos kalba. Įrankiuose tų
     pačių blokų NĖRA (organizacijos perjungiklio ir apatinių veiksmų), todėl ten jie
     virsta rezervuota tuščia vieta. Reikšmė turi būti VIENODA abiejuose lapuose, kitaip
     paskyros grupė vienoje pusėje atsidurtų kitame aukštyje nei kitoje.
     `--ws-email-lh` = `.app-account-email` šrifto ir `line-height` sandauga. */
  /* `/app/` organizacijos bloko aukštis — IŠVESTAS IŠ KOMPONENTO, ne įrašytas ranka.
     Anksčiau čia stovėjo išmatuotas 88.7px; formulė duoda tą patį (~88.72px), bet pati
     pasako, IŠ KO jis susideda, ir seka paskui šrifto ar lauko aukščio pakeitimą:
       etiketė 0.75rem×1.5 + tarpas 0.25rem + laukas 44px + tarpas 0.25rem + rolė 0.78rem×1.5
     Rolės eilutė į formulę įeina TIK todėl, kad `.app-org-state` turi `min-height` —
     be jo ji tuščia būtų 0px, ir rezervas meluotų per 18,7px. */
  --ws-context-h: calc(0.75rem * 1.5 + 0.25rem + 44px + 0.25rem + 0.78rem * 1.5);
  --ws-actions-h: 44px;
  --ws-email-lh: calc(0.78rem * 1.35);

  /* 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);
}

/* Į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); }

.app-brand {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  text-decoration: none;
}

/* Organizacijos sritis. `min-width: 0` abiejuose lygiuose būtinas: be jo ilgas įmonės
   pavadinimas išplėstų juostą virš jai skirto pločio. */
.app-org {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  margin: 0;
  min-width: 0;
}

/* Etiketė (E2.c P2D, carry S-8): 0.7rem `--text-muted` prie didžiųjų raidžių ir tarpų tarp jų
   buvo ties skaitomumo riba. Dydis suvienodintas su bendru micro-label tokenu (0.75rem), o
   spalva pakelta į `--text-secondary` — naujų spalvų neįvedama.

   Etiketė SĄMONINGAI lieka silpnesnė už įmonės pavadinimą (0.85rem, pilnas kontrastas):
   svarbiausia eilutėje yra pati įmonė, o ne žodis „Įmonė". */
.app-org-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}

.app-org-select {
  width: 100%;
  min-width: 0;
  /* Pirštų taikinys — tas pats tokenas kaip visuose kituose valdikliuose. */
  min-height: var(--control-h);
  padding: 0.3rem 0.4rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text-primary);
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  /* Ilgas pavadinimas kerpamas, o ne plečia juostą. Pilna reikšmė lieka pasiekiama pačiame
     valdiklyje (native `<select>` ją rodo atidarius). */
  text-overflow: ellipsis;
}

/* Vienos įmonės atveju valdiklis lieka matomas (naudotojas turi žinoti, kur dirba),
   bet neaktyvus — todėl neatrodo kaip veiksmas, kurio nėra. */
/* ── VIENA ĮMONĖ: FAKTAS, O NE SUGEDĘS VALDIKLIS (E2.c P2D) ───────────────────
 *
 * Kai naudotojas priklauso vienai organizacijai, `renderOrgSwitcher` valdiklį palieka matomą,
 * bet `disabled` — kad būtų matyti, kurioje įmonėje dirbama. Bėda buvo pateikime: 0.75 opacity
 * PLIUS naršyklės savas pilkinimas plius vis dar piešiama išskleidimo rodyklė kartu atrodė
 * kaip neveikiantis dropdown, o ne kaip informacija.
 *
 * Dabar tai skaitosi kaip tekstas: pilnas kontrastas ir jokio netikro pasirinkimo pažado.
 * `-webkit-text-fill-color` būtinas atskirai — WebKit/Blink `disabled` valdiklių tekstą pilkina
 * juo, o ne `color`, todėl vien `color` čia nepakaktų.
 *
 * `renderOrgSwitcher` LOGIKA NEPAKEISTA: `disabled` uždeda ji pati pagal serverio patvirtintą
 * sąrašą, o šis blokas tik pakeičia išvaizdą. Selektorius siauras — kelių įmonių AKTYVUS
 * valdiklis jo neatitinka ir lieka akivaizdžiai interaktyvus (rodyklė, fonas, rėmas). */
.app-org-select[disabled] {
  opacity: 1;
  color: var(--text-primary);
  -webkit-text-fill-color: var(--text-primary);
  background: transparent;
  border-color: transparent;
  appearance: none;
  -webkit-appearance: none;
  padding-left: 0;
  cursor: default;
}

/* `min-height` yra ne kosmetika, o didžiausio likusio šuolio taisymas. Tuščias būsenos
   mazgas pirmame kadre užima 0px, o atėjus „Kraunama…" — 18,7px, todėl VISA navigacija
   (įskaitant ĮRANKIAI skirtuką) šokteldavo 284,3 → 265,6 → 284,3. Eilutės vieta dabar
   egzistuoja visada; keičiasi tik jos turinys. Reikšmė = šrifto dydis × eilutės aukštis. */
.app-org-state {
  min-height: calc(0.78rem * 1.5);

  font-size: 0.78rem;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

/* ── 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;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.app-nav-item:hover {
  background: var(--bg-overlay);
  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;
}

/* ── Į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;
}

.app-tool-link:hover {
  background: var(--bg-overlay);
  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. */
.app-account {
  display: flex;
  flex-direction: column;
  gap: var(--app-gap-sm);
  padding-top: var(--app-gap-md);
  border-top: 1px solid var(--border);
}

/* ── 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); }

/* ── Aktyvi paskyra ir paskyros valdikliai (E2.c P3A) ─────────────────────────
 *
 * Adresas yra RAMUS: `--text-muted`, mažesnis šriftas, be akcento, be rėmelio ir be ženkliuko.
 * Jis atsako į „kuria paskyra dirbu", bet neturi konkuruoti nei su įmonės perjungikliu virš
 * navigacijos, nei su rodinio antrašte.
 *
 * `overflow-wrap: anywhere` nėra atsargumas dėl visa ko: el. paštas gali neturėti nė vieno
 * tarpo, o mobilus stalčius yra siauras — be jo ilgas adresas išstumtų juostą į šoną. */
/* N2b: eilutės VIETA egzistuoja dar prieš adresą. `min-height` ant apvalkalo, o ne fiktyvus
   tekstas ant paties `<p>`: ekrano skaitytuvui čia nėra ko skaityti, kol el. pašto nėra, o
   prisegtas `<p>` privalo likti tuščias ir `hidden`, kad `forgetAccountEmail()` semantika
   nepakistų. Be šio apvalkalo atėjęs adresas pastumdavo visą paskyros grupę 24,8px aukštyn. */
.app-account-email-row {
  min-height: var(--ws-email-lh);
}

.app-account-email {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* 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;
}

.app-theme-btn:hover {
  background: var(--bg-overlay);
  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. */
.app-topbar { display: none; }
.app-sidebar-close { display: none; }
.app-overlay { display: none; }

@media (max-width: 59.999rem) {
  .app-shell-ready .app-topbar {
    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);
  }

  .app-topbar-brand {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    text-decoration: none;
  }

  /* Pirštų taikinys — tas pats tokenas kaip visur kitur. */
  .app-shell-ready .app-menu-toggle,
  .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;
  }

  .app-shell-ready .app-menu-toggle:hover,
  .app-shell-ready .app-sidebar-close:hover {
    background: var(--bg-overlay);
    color: var(--text-primary);
  }

  /* 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ą. */
  .app-shell-ready .app-sidebar-close {
    position: absolute;
    top: var(--app-gap-sm);
    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`. `.app-page` yra vienintelis
     `<body>` vaikas ir talpina visą turinį, todėl apribojus jį puslapis nebeslenka. 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. */
  .app-shell-ready.app-drawer-open {
    height: 100dvh;
    overflow: hidden;
  }

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

/* ── 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 */
  }

  /* 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` ir
 * `.app-org-label`. 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-muted);
}

/* 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-muted);
}

/* ── 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;
}

/* Ženklas juostoje — tas pats svoris kaip viešame puslapyje, kad abu paviršiai skaitytųsi
   kaip vienas produktas. */
.app-page .app-brand {
  font-size: 1.05rem;
  letter-spacing: -0.015em;
}

/* 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);
  }
}

/* ── 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;
}

/* 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;
}

/* ── Nustatymų sekcija ──────────────────────────────────────────────────────
   Tas pats vertikalus ritmas kaip objektų ir komandos sekcijose: antraštė, būsena, turinys. */
.app-settings {
  display: flex;
  flex-direction: column;
  gap: var(--app-space-3);
  max-width: 44rem;
}

/* 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;
}

/* ── Skaitomos reikšmės eilutė (paskyra ir sauga) ────────────────────────────
   Etiketė + reikšmė vienoje eilutėje, atskirtos plaukeliu. Tai ne forma ir neapsimeta ja:
   redaguoti čia nėra ko, todėl ir lauko rėmelio nėra. */
.app-settings-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem var(--app-space-3);
  margin: 0;
  padding-bottom: var(--app-space-2);
  border-bottom: 1px solid var(--border);
}

/* Mono didžiosios raidės — ta pati mikro-etiketės gramatika kaip juostos grupių varduose. */
.app-settings-key {
  flex: none;
  min-width: 8rem;
  font-size: var(--app-fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Reikšmė gali būti ilgas el. paštas arba ilgas paaiškinimas — abu privalo lūžti, o ne
   išstumti maketą. `min-width: 0` yra būtinas flex vaikui, kitaip `overflow-wrap` neveikia. */
.app-settings-value {
  flex: 1 1 16rem;
  min-width: 0;
  font-size: var(--app-fs-body);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

/* 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;
}

/* ── Siauras ekranas ────────────────────────────────────────────────────────
   Etiketė ir reikšmė sudedamos viena po kita: 8rem etiketės stulpelis 390px pločio ekrane
   paliktų reikšmei mažiau vietos nei jai reikia. */
@media (max-width: 40rem) {
  .app-settings-key {
    min-width: 100%;
  }
}

/* ── 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).
   Savo `view-transition-name`, 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. */
@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;
  }
}