/* Darbo srities juosta įrankyje (D2). Įkelia TIK trys skaičiuoklės.
 *
 * ── KAM ─────────────────────────────────────────────────────────────────────
 *
 * Naudotojas, atidaręs skaičiuoklę iš darbo srities, turi matyti, kad tebėra Samatukas
 * darbo srityje — ir turėti kelią atgal. Iki šiol įrankis atsidarydavo kaip visiškai
 * atskira svetainė, ir vienintelis kelias atgal buvo naršyklės „Atgal".
 *
 * ── KODĖL ATSKIRAS FAILAS ───────────────────────────────────────────────────
 *
 * `tools.css` yra bendras įrankių apvalkalas, kurį saugo griežti sargai (jokių elementų
 * selektorių, jokių literalių spalvų, jokio `@media print`). Juosta yra nauja, sąlyginė
 * chrome dalis, todėl jai skiriamas savas failas — bendras apvalkalas lieka nepaliestas.
 *
 * ── KODĖL BE TAPATYBĖS SLUOKSNIO ────────────────────────────────────────────
 *
 * Juosta naudoja TIK bendrus `shared.css` tokenus. `identity.css` (D1 šriftas ir paletė) į
 * `tools/**` neįkeliamas sąmoningai ir tai saugo atskiras sargas: skaičiuoklės lieka su
 * sisteminiu šriftu, o juosta atrodo kaip tos pačios rankos darbas dėl anatomijos —
 * plaukelio linijos, mono didžiųjų raidžių etiketės ir 44px taikinių — o ne dėl šrifto.
 */

/* ── VIENAS GEOMETRIJOS ŠALTINIS (D4C4-N1) ───────────────────────────────────
 *
 * Nuo N1 karkasas rezervuoja darbo srities vietą DAR PRIEŠ sesiją, todėl rezervacija ir
 * tikroji juosta PRIVALO remtis ta pačia reikšme. Du atskiri `15rem` anksčiau ar vėliau
 * išsiskirtų, ir perdavimas (rezervacija → tikra juosta) vėl pastumtų išdėstymą.
 *
 * `--tool-ws-band-h` daro juostos aukštį DETERMINUOTĄ: iki N1 ji buvo `flex-wrap: wrap` ir
 * su ilgu el. paštu išaugdavo ~53px → ~136px, t. y. rezervuoti buvo tiesiog nėra ko.
 * Formulė: 44px lietimo taikinys + vertikalus vidinis tarpas + 1px kraštinė. */
:root {
  --tool-rail-w: 15rem;                       /* 240px — juosta ir jos rezervacija */
  --tool-ws-band-h: calc(44px + 0.7rem + 1px);   /* ≈56.2px (padding 0.35rem × 2) */

  /* ── Darbo srities anatomijos tokenai (D4C4-N2b) ──────────────────────────
     Tie patys trys dydžiai kaip `app.css`. Įrankyje organizacijos perjungiklio ir apatinių
     veiksmų NĖRA, todėl abu virsta rezervuota tuščia vieta — be dėžutės, be etiketės, be
     skeleto ir be netikros organizacijos. Reikšmės privalo sutapti su `app.css`: skirtumas
     tyliai nustumtų paskyros grupę į kitą aukštį nei `/app/`. */
  /* `/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);
}

/* Tiesioginis `#app` flex vaikas. `flex-shrink: 0` yra BŪTINAS: be jo darbo sritis
   suspaustų juostą iki nulinio aukščio (ta pati priežastis kaip `tool-header`). */
.tool-ws-band {
  flex-shrink: 0;
  display: flex;
  /* N1: `nowrap` + fiksuotas aukštis. Juosta nebeauga nuo turinio, todėl mobilią jos vietą
     galima rezervuoti tiksliai. Perpildymas tvarkomas VIDUJE, ne ant visos juostos. */
  flex-wrap: nowrap;
  height: var(--tool-ws-band-h);
  align-items: center;
  gap: 0.25rem 1rem;
  padding: 0.35rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-overlay);
}

/* Kontekstas atiduoda vietą navigacijai ir trumpėja pats. `overflow: hidden` yra ČIA, o
   NE ant visos juostos: ant juostos jis nukirstų mėsainio fokuso žiedą. */
.tool-ws-context {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  flex: 1 1 auto;
  overflow: hidden;
  gap: 0.3rem 0.75rem;
  margin: 0;
  min-width: 0;
}

/* Mono didžiosios raidės — ta pati mikro-etiketės gramatika kaip darbo srities juostoje.
   Tai kontekstas, ne antraštė, todėl jis tylus ir nekonkuruoja su įrankio pavadinimu. */
.tool-ws-label {
  flex: none;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Ilgas el. paštas negali išstumti navigacijos už ekrano ribų — ir nuo N1 negali auginti
   juostos aukščio. Vietoje laužymo per kelias eilutes jis trumpinamas daugtaškiu. */
.tool-ws-account {
  min-width: 0;
  font-size: 0.78rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Navigacija NIEKADA netraukiama ir nelaužoma: kelias atgal į darbo sritį yra vienintelė
   juostos paskirtis, todėl trumpėja kontekstas, o ne ji. */
.tool-ws-nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  flex: none;
  gap: 0.25rem;
  margin-left: auto;
}

/* 44px pirštų riba galioja ir teksto nuorodoms. Įtrauka horizontali, todėl juosta lieka
   plona, o taikinys — pilno aukščio. */
.tool-ws-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
}

/* Hover TIK tikram žymekliui: lietimo ekrane jis „prilimptų" po paspaudimo. */
@media (hover: hover) and (pointer: fine) {
  .tool-ws-link:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .tool-ws-link {
    transition: background 150ms ease, color 150ms ease;
  }
}

/* ── Siauras ekranas ─────────────────────────────────────────────────────────
   Juosta lieka viena eilute kiek įmanoma ilgiau; nebetelpant navigacija persikelia žemyn,
   bet NIEKADA nėra slepiama — kelias atgal į darbo sritį yra jos vienintelė paskirtis. */
@media (max-width: 40rem) {
  /* Siauras ekranas turi mažesnę įtrauką, todėl ir aukštis kitas — bet vis tiek TIKSLUS. */
  :root { --tool-ws-band-h: calc(44px + 0.5rem + 1px); }   /* ≈53px */

  .tool-ws-band {
    padding: 0.25rem 0.75rem;
    gap: 0 0.5rem;
  }
  .tool-ws-account { font-size: 0.74rem; }
  .tool-ws-nav { margin-left: auto; }
  .tool-ws-link { padding: 0 0.45rem; font-size: 0.78rem; }
}

/* ── Pilno ekrano režimai ────────────────────────────────────────────────────
 *
 * Skardos lankstinių redaktorius 2 žingsnyje SĄMONINGAI atiduoda visą ekraną drobei:
 * lietimo įrenginyje jis paslepia net savo antraštę, o `#profile-editor-wrap` gauna
 * `height: 100vh`, kuris prielaidauja, kad virš jo NIEKO nėra. Juosta privalo tą režimą
 * gerbti — kitaip CAD drobė išsikištų už ekrano apačios per juostos aukštį.
 *
 * Taisyklė NAUJA ir atskira: esamas antraštės slėpimo selektorius yra pririštas sargo, todėl
 * jis neliečiamas. */
html.touch-device body.step-editor .tool-ws-band {
  display: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   NUOLATINĖ DARBO SRITIES JUOSTA (D4B)
   ════════════════════════════════════════════════════════════════════════════

   ── KAM ─────────────────────────────────────────────────────────────────────

   D2 juosta pasakė „tu vis dar Samatuke" ir davė kelią atgal. Bet įrankyje nebelikdavo
   pačios NAVIGACIJOS: kad patektum į kitą įrankį, objektus ar paskyrą, reikėdavo grįžti
   į `/app/`. D4B grąžina tą patį navigacijos stuburą į įrankio dokumentą.

   ── KODĖL FAIL-CLOSED, O NE PROGRESYVUS PRAPLĖTIMAS ─────────────────────────

   `/app/` juosta be JS lieka matoma sukrauta virš darbo srities — ten tai teisinga.
   ĮRANKYJE tai būtų DESTRUKTYVU: `body` yra `overflow: hidden`, o `#app` — `100dvh`,
   todėl bet kas, sukrauta virš jo, išstumtų vedlio mygtukų juostą už neslenkančio ekrano.
   Todėl juosta bazėje yra `display: none` ir atsiranda TIK kai abu sluoksniai patvirtino:
   `tool-rail-ready` (tikra sesija) IR `app-shell-ready` (stalčius prijungtas).

   ── LŪŽIO ŠALTINIS ──────────────────────────────────────────────────────────

   `body.tool-rail-bp-60` / `body.tool-rail-bp-75` yra VIENINTELIS lūžio šaltinis: tą pačią
   klasę skaito ir CSS (žemiau), ir `workspaceBand.js` (`matchMedia`). Skardos lankstiniams
   riba aukštesnė, nes ties 60rem CAD drobei liktų per mažai vietos — o jų katalogas D4B
   metu NEKEIČIAMAS nė vienu pikseliu.

   Režimą renka GRYNAS CSS, ne JS: taip išdėstymas niekada nepriklauso nuo modulio įvykdymo
   momento. Kiekvienam slenksčiui yra po du blokus (juosta / stalčius), be persidengimo.

   ── SPALVOS ─────────────────────────────────────────────────────────────────

   Tik `shared.css` tokenai. Perdanga — `var(--text-primary)` su `opacity`, nes literalios
   spalvos (tiek hex, tiek funkcinės formos) šiame faile draudžiamos sargo. Tapatybės
   sluoksnio (D4A) čia NĖRA: D4B nekeičia nė vienos spalvos REIKŠMĖS.
*/

/* ── Bazė: viskas paslėpta, kol apvalkalas nepatvirtintas ──────────────────── */

.tool-rail,
.tool-rail-veil,
.tool-rail-toggle,
.tool-rail-close { display: none; }

/* ── Juostos vidus (nepriklauso nuo režimo) ────────────────────────────────── */

.tool-rail {
  flex-direction: column;
  gap: 0.5rem;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  box-sizing: border-box;
  overflow-y: auto;                 /* žemas ekranas: paskyros riba lieka pasiekiama */
}

/* Ženklas — ta pati anatomija kaip `/app/` juostoje ir kaip įrankio antraštėje.
   Dydis ir tarpai atitinka `.app-page .app-brand` (D4A tapatybės sluoksnis), o ne bazinį
   `.app-brand`: `/app/` visada turi `.app-page`, todėl TIKROJI jo reikšmė yra ši. */
.tool-rail-brand {
  flex: none;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  text-decoration: none;
}

/* Grupės antraštė: mikro-etiketė, ta pati gramatika kaip `.app-page .app-nav-group` —
   įskaitant skiriamąją liniją. Be jos įrankio grupės prasidėtų 0,5rem aukščiau nei `/app/`,
   ir visa paskyros grupė nusėstų ne ten. */
.tool-rail-group {
  margin: 0.5rem 0 0.15rem;
  padding: 0.5rem 0.6rem 0;
  border-top: 1px solid var(--border);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tool-rail-nav,
.tool-rail-tools,
.tool-rail-account-nav {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

/* `.app-nav` naudoja 0.15rem — tas pats ritmas dviem globaliems rodiniams.

   `margin-top` rezervo čia NEBĖRA: iki D4C4 virš navigacijos buvo tuščias tarpas, o dabar ten
   stovi TIKRAS organizacijos blokas (žemiau), užimantis lygiai tą patį aukštį. Vieta be turinio
   buvo teisingas tarpinis žingsnis, bet įrankyje ji reiškė, kad įmonės ir rolės naudotojas
   nemato niekada. */
.tool-rail-nav {
  gap: 0.15rem;
}

/* ── Organizacijos kontekstas (D4C4) ────────────────────────────────────────
   Geometrija privalo sutapti su `/app/` `.app-org` iki pikselio — abi juostas naudotojas mato
   vieną po kitos. Todėl kiekvienas dydis turi savo atitikmenį:
     tarpas 0.25rem              = `.app-org { gap }`
     pavadinimo eilutė 44px      = `.app-org-select { min-height: var(--control-h) }`
     rolės eilutė 0.78rem × 1.5  = `.app-org-state { min-height }`
     apatinis tarpas 1rem        = `.app-sidebar > .app-org { margin-bottom }`
   Kartu tai duoda tą patį `--ws-context-h`, kurį anksčiau laikė tuščias rezervas.

   Mazgai lieka TUŠTI, kol nėra patvirtintos sesijos; aukštis nuo turinio nepriklauso. */
.tool-rail-org {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: none;
  gap: 0.25rem;
  margin: 0 0 1rem;
  min-width: 0;
}

.tool-rail-org-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* 44px čia yra ne lietimo taikinys (paspausti nėra ko), o TIKSLIAI to lauko aukštis, kurį
   `/app/` pusėje užima organizacijos pasirinkimas. */
.tool-rail-org-name {
  display: flex;
  align-items: center;
  min-height: 44px;
  min-width: 0;
  font-size: 0.85rem;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.tool-rail-org-role {
  min-height: calc(0.78rem * 1.5);
  font-size: 0.78rem;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.tool-rail-tools { margin-top: 0.5rem; }

/* Punktas. `border-left` egzistuoja VISOSE būsenose permatomas, todėl pažymėjus punktą
   tekstas nepasislenka nė per pikselį (ta pati priežastis kaip `/app/`). */
.tool-rail-item,
.tool-rail-tool {
  display: flex;
  align-items: center;
  min-height: 44px;
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
}

.tool-rail-item {
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;
}

/* Antrinė navigacija: tylesnė DYDŽIU ir SVORIU, ne spalva — akcentas lieka rezervuotas
   dabartinei vietai ir fokusui. */
.tool-rail-tool {
  padding: 0.3rem 0.6rem;
  color: var(--text-muted);
  font-size: 0.9rem;                /* = `.app-page .app-tool-link` (--app-fs-body) */
}

/* Dabartinis įrankis: TRYS signalai — paviršius, tekstas, kairysis žymeklis. Fonas
   NEUTRALUS, ne akcento: akcentu pažymima tik 3px kraštinė. */
.tool-rail-tool[aria-current='page'] {
  background: var(--bg-overlay);
  border-left-color: var(--accent);
  color: var(--text-primary);
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  .tool-rail-item:hover,
  .tool-rail-tool:hover {
    background: var(--bg-overlay);
    color: var(--text-primary);
  }
  .tool-rail-brand:hover { color: var(--accent); }
}

/* ── Paskyros riba (D4C4-N2b) ───────────────────────────────────────────────
   Riba PERKELTA nuo `.tool-rail-account` prie `.tool-rail-account-nav`, nes `/app/` pusėje
   ją neša `.app-account`, kuris apima IR navigaciją, IR el. paštą, IR veiksmus. Įrankyje
   tas pats vaidmuo tenka navigacijai — todėl `margin-top: auto` gyvena BŪTENT čia, ne prie
   el. pašto apvalkalo. Perkėlus jį žemiau, visa paskyros grupė priliptų prie apačios ir
   `/app/` aukščio nebeatitiktų. */
.tool-rail-account-nav {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  gap: 0.1rem;
}

/* Grupės antraštė paskyros bloke SAVO `border-top` išlaiko. Pirmas instinktas buvo ją
   nuimti kaip „dvigubą liniją", bet `/app/` pusėje jos abi YRA: `.app-account` turi savo
   ribą, o `.app-page .app-nav-group` viduje — savo. Nuėmus, paskyros antraštė atsidurdavo
   9px žemiau nei `/app/`, nors visi punktai po ja sutapdavo. Paritetas svarbiau. */

/* El. pašto ir apatinių veiksmų REZERVAS. Įrankyje nei atsijungimo, nei temos mygtuko nėra,
   bet `/app/` pusėje jie užima vietą — todėl ji rezervuojama tuščia.

   Du tikri spąstai, dėl kurių reikšmės atrodo keistai:
   1. `box-sizing: border-box` (paveldėtas iš `.tool-rail`) reiškia, kad `padding-bottom`
      TELPA į `min-height` — todėl `min-height` privalo apimti ir jį, kitaip rezervas būtų
      per mažas per visą veiksmų aukštį.
   2. `flex: none` yra būtinas: žemame ekrane juosta persipildo, ir be jo flex-shrink
      suspaustų būtent šį bloką — paskyros grupė pajudėtų tik tam tikruose aukščiuose. */
.tool-rail-account {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;                        /* = `.app-account { gap: var(--app-gap-sm) }` */
  /* `padding-bottom` rezervo NEBĖRA: apačioje dabar stovi tikra veiksmų eilutė. `min-height`
     lieka, nes el. paštas iki READY yra `hidden` — be jo eilutės vieta susitrauktų. */
  min-height: calc(var(--ws-email-lh) + 0.5rem + var(--ws-actions-h));
}

/* ── Veiksmų eilutė (D4C4) ──────────────────────────────────────────────────
   Ta pati anatomija kaip `.app-account-actions`. Aukštis NEPRIKLAUSO nuo to, ar „Atsijungti"
   jau matomas: temos mygtukas yra 44px = `--ws-actions-h`, todėl eilutė turi galutinį aukštį
   dar prieš READY. Būtent todėl atsiradęs atsijungimo mygtukas nieko nepastumia. */
.tool-rail-actions {
  display: flex;
  align-items: center;
  flex: none;
  gap: 0.5rem;
  min-height: var(--ws-actions-h);
}

/* Temos mygtukas — identiškas `.app-theme-btn`, bet savo klase: `app.css` į įrankius
   neįkeliamas, todėl paveldėti nėra iš ko. */
.tool-rail-theme {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ws-actions-h);
  height: var(--ws-actions-h);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

/* Ikonų perjungimas — ta pati taisyklė kaip `/app/`: šviečia ta, kuri rodo KITĄ būseną. */
.tool-rail-theme .app-theme-icon-moon { display: none; }
body.dark .tool-rail-theme .app-theme-icon-sun { display: none; }
body.dark .tool-rail-theme .app-theme-icon-moon { display: inline; }

.tool-rail-signout {
  flex: 1 1 auto;
  min-height: var(--ws-actions-h);
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.tool-rail-signout[disabled] { cursor: default; opacity: 0.6; }

@media (hover: hover) and (pointer: fine) {
  .tool-rail-theme:hover,
  .tool-rail-signout:hover:not([disabled]) {
    background: var(--bg-overlay);
    color: var(--text-primary);
  }
}

/* Ta pati eilutės rezervacija kaip `/app/` `.app-account-email-row`. */
.tool-rail-email-row { min-height: var(--ws-email-lh); }

.tool-rail-email {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;                /* = `.app-account-email`; be jo rezervas nesutaptų */
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* Stalčiaus valdikliai. 44x44 pirštų taikinys abiem. */
.tool-rail-toggle,
.tool-rail-close {
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
  .tool-rail-toggle:hover,
  .tool-rail-close:hover {
    background: var(--bg-overlay);
    color: var(--text-primary);
  }
}

.tool-rail-brand:focus-visible,
.tool-rail-item:focus-visible,
.tool-rail-tool:focus-visible,
.tool-rail-toggle:focus-visible,
.tool-rail-close:focus-visible,
.tool-rail-theme:focus-visible,
.tool-rail-signout:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .tool-rail-item,
  .tool-rail-tool {
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  }
  .tool-rail-brand,
  .tool-rail-toggle,
  .tool-rail-close {
    transition: background 150ms ease, color 150ms ease;
  }
  .tool-rail { transition: transform 180ms ease-out; }
  .tool-rail-veil { transition: opacity 180ms ease-out; }
}

/* ════════════════════════════════════════════════════════════════════════════
   REŽIMAI. Po du blokus kiekvienam slenksčiui; jie niekada nepersidengia:
   bp-60 juosta nuo 60rem / stalčius iki 60rem; bp-75 juosta nuo 75rem / stalčius iki 75rem.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── bp-60: NUOLATINĖ JUOSTA ───────────────────────────────────────────────── */
@media (min-width: 60rem) {
  body.tool-rail-bp-60.tool-rail-ready.app-shell-ready { display: flex; flex-direction: row; }

  body.tool-rail-bp-60.tool-rail-ready.app-shell-ready > .tool-rail {
    display: flex;
    width: var(--tool-rail-w);
    flex: 0 0 var(--tool-rail-w);
    height: 100dvh;
    padding: 1.5rem 1rem;
  }

  /* `min-width: 0` neleidžia ilgam turiniui išplėsti karkaso. */
  body.tool-rail-bp-60.tool-rail-ready.app-shell-ready > #app { flex: 1 1 auto; min-width: 0; }

  /* Vienas ženklas ekrane: juostai esant, antraštės ženklas, skirtukas ir D2 juosta dingsta. */
  body.tool-rail-bp-60.tool-rail-ready.app-shell-ready .tool-brand,
  body.tool-rail-bp-60.tool-rail-ready.app-shell-ready .tool-header-sep,
  body.tool-rail-bp-60.tool-rail-ready.app-shell-ready .tool-ws-band { display: none; }

  /* Spausdinimo sritis NEGALI tapti flex elementu: `doShare()` (html2pdf) ją parodo EKRANO
     medijoje, todėl ji atsidurtų šalia juostos ir susitrauktų. Galioja tik su juosta. */
  body.tool-rail-bp-60.tool-rail-ready.app-shell-ready > #print-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
}

/* ── bp-60: STALČIUS ───────────────────────────────────────────────────────── */
@media (max-width: 59.999rem) {
  body.tool-rail-bp-60.tool-rail-ready.app-shell-ready > .tool-rail {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 951;                    /* virš įrankių perdangų, po `#preview-overlay` (1000) */
    width: min(17.5rem, calc(100vw - 3rem));
    height: 100dvh;
    padding: 1rem;
    transform: translateX(-100%);
  }
  body.tool-rail-bp-60.tool-rail-ready.app-shell-ready.app-drawer-open > .tool-rail {
    transform: translateX(0);
  }
  body.tool-rail-bp-60.tool-rail-ready.app-shell-ready .tool-rail-toggle,
  body.tool-rail-bp-60.tool-rail-ready.app-shell-ready .tool-rail-close { display: inline-flex; }

  /* Stalčiaus režime matomas lieka ANTRAŠTĖS temos mygtukas, todėl juostos kopija
     paslepiama — kitaip stalčių atidarius fokusuojami būtų du tos pačios temos valdikliai. */
  body.tool-rail-bp-60 .tool-rail-theme { display: none; }
  body.tool-rail-bp-60.tool-rail-ready.app-shell-ready .tool-rail-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
  }
  body.tool-rail-bp-60.tool-rail-ready.app-shell-ready .tool-rail-brand { padding-right: 44px; }
  body.tool-rail-bp-60.tool-rail-ready.app-shell-ready > .tool-rail-veil {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 950;
    background: var(--text-primary);
    opacity: 0;
  }
  body.tool-rail-bp-60.tool-rail-ready.app-shell-ready.app-drawer-open > .tool-rail-veil {
    opacity: 0.45;
  }
  /* `hidden` yra vienintelis perdangos matomumo jungiklis — jį valdo `appShell.js`. */
  body.tool-rail-bp-60.tool-rail-ready.app-shell-ready > .tool-rail-veil[hidden] {
    display: none;
  }
}

/* ── bp-75: NUOLATINĖ JUOSTA ───────────────────────────────────────────────── */
@media (min-width: 75rem) {
  body.tool-rail-bp-75.tool-rail-ready.app-shell-ready { display: flex; flex-direction: row; }

  body.tool-rail-bp-75.tool-rail-ready.app-shell-ready > .tool-rail {
    display: flex;
    width: var(--tool-rail-w);
    flex: 0 0 var(--tool-rail-w);
    height: 100dvh;
    padding: 1.5rem 1rem;
  }

  body.tool-rail-bp-75.tool-rail-ready.app-shell-ready > #app { flex: 1 1 auto; min-width: 0; }

  body.tool-rail-bp-75.tool-rail-ready.app-shell-ready .tool-brand,
  body.tool-rail-bp-75.tool-rail-ready.app-shell-ready .tool-header-sep,
  body.tool-rail-bp-75.tool-rail-ready.app-shell-ready .tool-ws-band { display: none; }

  body.tool-rail-bp-75.tool-rail-ready.app-shell-ready > #print-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
}

/* ── bp-75: STALČIUS ───────────────────────────────────────────────────────── */
@media (max-width: 74.999rem) {
  body.tool-rail-bp-75.tool-rail-ready.app-shell-ready > .tool-rail {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 951;
    width: min(17.5rem, calc(100vw - 3rem));
    height: 100dvh;
    padding: 1rem;
    transform: translateX(-100%);
  }
  body.tool-rail-bp-75.tool-rail-ready.app-shell-ready.app-drawer-open > .tool-rail {
    transform: translateX(0);
  }
  body.tool-rail-bp-75.tool-rail-ready.app-shell-ready .tool-rail-toggle,
  body.tool-rail-bp-75.tool-rail-ready.app-shell-ready .tool-rail-close { display: inline-flex; }

  /* Stalčiaus režime matomas lieka ANTRAŠTĖS temos mygtukas, todėl juostos kopija
     paslepiama — kitaip stalčių atidarius fokusuojami būtų du tos pačios temos valdikliai. */
  body.tool-rail-bp-75 .tool-rail-theme { display: none; }
  body.tool-rail-bp-75.tool-rail-ready.app-shell-ready .tool-rail-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
  }
  body.tool-rail-bp-75.tool-rail-ready.app-shell-ready .tool-rail-brand { padding-right: 44px; }
  body.tool-rail-bp-75.tool-rail-ready.app-shell-ready > .tool-rail-veil {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 950;
    background: var(--text-primary);
    opacity: 0;
  }
  body.tool-rail-bp-75.tool-rail-ready.app-shell-ready.app-drawer-open > .tool-rail-veil {
    opacity: 0.45;
  }
  body.tool-rail-bp-75.tool-rail-ready.app-shell-ready > .tool-rail-veil[hidden] {
    display: none;
  }
}

/* ── Pilno ekrano režimai ──────────────────────────────────────────────────────
   Skardos lankstinių redaktorius 2 žingsnyje sąmoningai atiduoda visą ekraną drobei
   (`#profile-editor-wrap` gauna `height: 100vh`, kuris prielaidauja, kad virš jo NIEKO
   nėra). Visa darbo srities chrome privalo tą režimą gerbti. */
html.touch-device body.step-editor .tool-rail,
html.touch-device body.step-editor .tool-rail-veil,
html.touch-device body.step-editor .tool-rail-toggle { display: none; }


/* ════════════════════════════════════════════════════════════════════════════
   PIRMO KADRO DARBO SRITIES GEOMETRIJA (D4C4-N1)
   ════════════════════════════════════════════════════════════════════════════

   ── PROBLEMA (išmatuota N0) ─────────────────────────────────────────────────

   Tikra juosta gali įeiti į išdėstymą tik pasibaigus keturių nuoseklių modulių grandinei
   (workspaceBand → supabaseClient → supabase.js → 4 moduliai) ir patvirtinus sesiją. Tai
   įvyksta ≥445 ms po FCP, t. y. kai naudotojas įrankį JAU MATO. Tada `#app` pašoka
   0 → 240px, o karkaso CLS siekia 0.19–0.22.

   ── SPRENDIMAS ──────────────────────────────────────────────────────────────

   `?workspace=1` yra KETINIMAS, todėl `theme-init.js` dar prieš pirmą atvaizdavimą uždeda
   `html.tool-ws-intent`, o čia rezervuojama TIK GEOMETRIJA: staliniame — 240px inertiškas
   `body::before`, mobiliame — tikslus juostos aukštis. Jokių duomenų, jokių mazgų, jokio
   fokuso: pseudoelementas turi tuščią `content` ir negali būti pasiektas klaviatūra.

   GEOMETRIJA GALI ŽINOTI KETINIMĄ. DUOMENYS PRIVALO ŽINOTI ĮGALIOJIMĄ.

   ── PERDAVIMAS ──────────────────────────────────────────────────────────────

   Kai sesija patvirtinama, `workspaceBand.js` (NEKEISTAS) uždeda abi READY klases. Tos
   pačios stiliaus perskaičiavimo metu rezervacija dingsta, o tikra juosta užima LYGIAI tą
   patį plotį iš to paties tokeno — todėl `#app.x` ir `#app.width` nepasikeičia.

   ── KAI SESIJOS NĖRA ────────────────────────────────────────────────────────

   Rezervacija LIEKA. Sutraukus ją atsirastų tas pats postūmis, tik priešinga kryptimi.
   Tikra juosta lieka paslėpta, privataus turinio neatsiranda. */

/* ── Stalinis: 60rem įrankiai (sutartys, stogas) ───────────────────────────── */
@media (min-width: 60rem) {
  html.tool-ws-intent body.tool-rail-bp-60 { display: flex; flex-direction: row; }

  /* N2b: koloną nuo PIRMO kadro užima TIKRA juosta, o ne pseudoelementas. N1 rezervacija
     čia buvo teisingas tarpinis žingsnis, bet ji galėjo turėti tik geometriją — todėl
     juosta pirmame kadre atrodė tuščia. Dabar rodomas STATINIS, visiems vienodas turinys:
     ženklas, rodiniai, trys įrankiai, paskyros nuorodos. Privatūs mazgai lieka `hidden`
     ir laukia TIKROS sesijos — juos ir toliau atrakina tik `workspaceBand.js`. */
  html.tool-ws-intent body.tool-rail-bp-60 > .tool-rail {
    display: flex;
    width: var(--tool-rail-w);
    flex: 0 0 var(--tool-rail-w);
    height: 100dvh;
    padding: 1.5rem 1rem;
  }

  html.tool-ws-intent body.tool-rail-bp-60 > #app { flex: 1 1 auto; min-width: 0; }

  /* Vienas ženklas ekrane — nuo pirmo kadro, o ne nuo READY. Juostos ženklas jau yra,
     todėl antraštės kopija būtų antras tas pats žodis, kuris dingtų tik po hidratacijos. */
  html.tool-ws-intent body.tool-rail-bp-60 .tool-brand,
  html.tool-ws-intent body.tool-rail-bp-60 .tool-header-sep,
  html.tool-ws-intent body.tool-rail-bp-60 .tool-ws-band { display: none; }

  /* TEMOS PARITETAS (D4C4): nuolatinėje juostoje temos mygtukas priklauso apačiai — ten,
     kur jis yra `/app/`. Antraštės kopija slepiama, kad liktų LYGIAI VIENAS matomas ir
     fokusuojamas valdiklis. Abu vis tiek valdo tą pačią būseną per `theme-toggle.js`. */
  html.tool-ws-intent body.tool-rail-bp-60 .tool-theme-btn { display: none; }

  /* Ta pati priežastis kaip READY taisyklėje: `doShare()` (html2pdf) rodo `#print-area`
     EKRANO medijoje, todėl flex kontekste jis taptų susitraukusiu elementu šalia
     rezervacijos. Be šios eilutės N1 sugadintų stogo PDF eksportą. */
  html.tool-ws-intent body.tool-rail-bp-60 > #print-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }

  /* PERDAVIMO taisyklės nebėra ir nebereikia: rezervacijos pseudoelemento šiame lūžyje
     nebeliko visai, todėl nėra kam dingti atėjus READY. Vietoje perdavimo yra TĘSTINUMAS —
     ta pati juosta stovi ir prieš, ir po jo. */
}

/* ── Stalinis: 75rem įrankis (skardos lankstiniai) ─────────────────────────── */
@media (min-width: 75rem) {
  html.tool-ws-intent body.tool-rail-bp-75 { display: flex; flex-direction: row; }

  /* Ta pati N2b logika kaip bp-60; skiriasi TIK slenkstis. */
  html.tool-ws-intent body.tool-rail-bp-75 > .tool-rail {
    display: flex;
    width: var(--tool-rail-w);
    flex: 0 0 var(--tool-rail-w);
    height: 100dvh;
    padding: 1.5rem 1rem;
  }

  html.tool-ws-intent body.tool-rail-bp-75 > #app { flex: 1 1 auto; min-width: 0; }

  html.tool-ws-intent body.tool-rail-bp-75 .tool-brand,
  html.tool-ws-intent body.tool-rail-bp-75 .tool-header-sep,
  html.tool-ws-intent body.tool-rail-bp-75 .tool-ws-band { display: none; }

  /* TEMOS PARITETAS (D4C4): nuolatinėje juostoje temos mygtukas priklauso apačiai — ten,
     kur jis yra `/app/`. Antraštės kopija slepiama, kad liktų LYGIAI VIENAS matomas ir
     fokusuojamas valdiklis. Abu vis tiek valdo tą pačią būseną per `theme-toggle.js`. */
  html.tool-ws-intent body.tool-rail-bp-75 .tool-theme-btn { display: none; }

  html.tool-ws-intent body.tool-rail-bp-75 > #print-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
}

/* ── Mobilus: vietoje kolonos rezervuojamas juostos AUKŠTIS ─────────────────
 *
 * Žemiau slenksčio juosta yra horizontali, o ne kolona, todėl rezervuojamas tikslus jos
 * aukštis. Paslėpta juosta (`.hidden` → `display: none`) vietos neužima, tad tarpą laiko
 * kitas elementas. DOM ryšys patikrintas visuose trijuose įrankiuose:
 * `#tool-ws-band` + `#wizard-progress-bar` yra tiesioginiai kaimynai.
 *
 * Perdavimas savaiminis: patvirtinus sesiją `workspaceBand.js` nuima `.hidden`, selektorius
 * nustoja galioti, tarpas dingsta ir tą pačią akimirką juosta įeina į srautą. */
@media (max-width: 59.999rem) {
  html.tool-ws-intent body.tool-rail-bp-60 .tool-ws-band.hidden + #wizard-progress-bar {
    margin-top: var(--tool-ws-band-h);
  }
}

@media (max-width: 74.999rem) {
  html.tool-ws-intent body.tool-rail-bp-75 .tool-ws-band.hidden + #wizard-progress-bar {
    margin-top: var(--tool-ws-band-h);
  }
}

/* ── Pilno ekrano redaktorius ────────────────────────────────────────────────
 *
 * Skardos redaktorius lietimo įrenginyje atiduoda visą ekraną drobei. Rezervacija privalo
 * tą gerbti lygiai taip pat, kaip tai daro tikra juosta.
 *
 * SVARBU: selektorius APIMA `tool-ws-intent`. Nauja plati `html.touch-device …` taisyklė
 * paliestų ir nemokamą įrankį be darbo srities — o N1 neturi teisės keisti nieko, kas
 * vyksta be ketinimo. Esamos plačios taisyklės paliekamos nepakeistos.
 *
 * N2b: anksčiau čia buvo neutralizuojamas REZERVACIJOS pseudoelementas. Jo nebėra, todėl tą
 * patį vaidmenį perima statinė juosta — kitaip redaktorius pirmame kadre netektų 240px, nors
 * iki N2b jų neprarasdavo. `:not(.tool-rail-ready)` yra BŪTINAS: po tikro READY elgesys
 * privalo likti TOKS PAT, koks buvo iki N2b (juostą tada rodo READY taisyklė), o be šio
 * patikslinimo naujoji taisyklė ją nugalėtų specifiškumu ir paslėptų visam laikui. */
html.tool-ws-intent.touch-device body.step-editor:not(.tool-rail-ready) > .tool-rail {
  display: none;
}

html.tool-ws-intent.touch-device body.step-editor .tool-ws-band.hidden + #wizard-progress-bar {
  margin-top: 0;
}

/* ── Popierius ─────────────────────────────────────────────────────────────────
   Darbo srities chrome NIEKADA nepatenka ant popieriaus. `body` grąžinamas į `block`,
   kad `#print-area` atgautų normalų srautą (puslapiavimas), o `position` — į `static`
   dėl tos pačios priežasties. */
@media print {
  .tool-rail,
  .tool-rail-veil,
  .tool-rail-toggle,
  .tool-rail-close,
  .tool-ws-band { display: none !important; }

  /* `!important` čia BŪTINAS, ir tai išmatuota, o ne atsargumas: nuolatinės juostos
     taisyklė yra `body.tool-rail-bp-60.tool-rail-ready.app-shell-ready` (0,4,1), o šios
     bendresnės (0,3,1) jos nenugalėtų — spaudinyje karkasas liktų `flex`, o `#print-area`
     taptų susitraukusiu flex elementu šalia (paslėptos) juostos. */
  body.tool-rail-ready.app-shell-ready { display: block !important; }
  body.tool-rail-ready.app-shell-ready > #print-area { position: static !important; }
}

/* ── Popierius: ketinimo geometrija (D4C4-N1) ──────────────────────────────────
   Rezervacija yra tik ekrano karkasas. Spaudinyje jos negali likti NEI kaip kolonos, NEI
   kaip tarpo — kitaip pirmas lapas prasidėtų 240px per toli arba su tuščia juosta viršuje.
   `!important` dėl tos pačios priežasties kaip gretimame bloke: ketinimo taisyklės yra
   media-lygio ir be jo nenugalėtų. Esami spausdinimo keliai nekeičiami. */
@media print {
  html.tool-ws-intent body::before { content: none !important; }
  html.tool-ws-intent body { display: block !important; }
  html.tool-ws-intent body > #print-area { position: static !important; }
  html.tool-ws-intent .tool-ws-band.hidden + #wizard-progress-bar { margin-top: 0 !important; }
}

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