/* Bendras nemokamų įrankių apvalkalas (TOOLS T1).
*
* ── KAM ŠIS FAILAS ──────────────────────────────────────────────────────────
*
* Trys nemokami įrankiai (stogo sąmata, skardos lankstiniai, sutarties generatorius)
* iki šiol turėjo TRIS to paties header'io kopijas, kurios jau buvo spėjusios išsiskirti
* (skirtingi H1 dydžiai, skirtingos tarpų reikšmės), ir nė viename iš jų neminėjo
* „Samatukas" — vartotojas, atėjęs tiesiogine nuoroda, nematydavo, kieno tai įrankis.
*
* Čia gyvena VIENA bendra to apvalkalo kalba. Kiekvieno įrankio darbo sritis
* (lentelės, CAD drobė, A4 dokumentas) lieka jo paties `styles.css` — jos sąmoningai
* NEVIENODINAME, nes tai trys skirtingos darbo eigos.
*
* ── KODĖL ATSKIRAS FAILAS, O NE `shared.css` ────────────────────────────────
*
* `shared.css` kraunamas 11 puslapių, tarp jų UŽDARYTŲ fazių: viešas puslapis, Auth ir
* `/app/`. Bet koks jo pakeitimas būtų tiesioginė regresijos rizika ten. Šis sluoksnis
* kraunamas TIK trijų įrankių puslapiuose.
*
* Krovimo tvarka: `shared.css` → `tools.css` → įrankio `styles.css`.
*
* ── KODĖL TIK KLASĖS, JOKIŲ ELEMENTŲ SELEKTORIŲ ─────────────────────────────
*
* Nė vienas selektorius čia neliečia plikų `header`, `h1`, `button`, `a`, `input`.
* Priežastis konkreti: stogo sąmata ir sutarties generatorius spausdinimo turinį
* generuoja Į TĄ PATĮ dokumentą (`#print-area`), o skardos įrankis — į naują langą per
* `document.write`. Plikas elementų selektorius nutekėtų į popierių. Klasės to negali.
*
* ── SPALVOS ─────────────────────────────────────────────────────────────────
*
* Tik `shared.css` tokenai — jokių naujų hex reikšmių. Tamsoje `--bg-surface` yra
* #181825, t. y. tas pats fonas, kurį header'is turėjo ir anksčiau; skiriasi tik
* apatinis brūkšnys, kuris iš #313244 pereina į šeimos `--border` (#45475a), kaip
* ir viešame puslapyje bei darbo srityje.
*/
/* ── Apvalkalo juosta ───────────────────────────────────────────────────────
*
* Viena eilutė nuo 390px iki darbalaukio. Aukštį lemia `min-height`, o ne padding:
* 44px temos mygtukas telpa į 48px juostą su vienodu tarpu iš abiejų pusių, ir juosta
* nepradeda augti, jei kada nors pasikeistų teksto dydis.
*
* `flex-shrink: 0` būtinas: `#app` visuose trijuose įrankiuose yra `height: 100dvh`
* flex stulpelis, todėl be jo header'is susispaustų, kai darbo sritis prašo vietos. */
.tool-header {
display: flex;
align-items: center;
gap: 0.5rem;
min-height: 48px;
padding: 0 1rem;
background: var(--bg-surface);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
/* ── Ženklas = vienintelis kelias namo ──────────────────────────────────────
*
* Pakeičia senąjį `← Grįžti`. Dvi naudos vienu ėjimu: puslapis pagaliau pasako, kieno
* tai įrankis, ir dingsta senoji 3,59:1 kontrasto problema — kartu su pačiu elementu.
*
* `min-height: 44px` duoda pilną lietimo taikinį, nors tekstas lieka 1rem: taikinys
* neprivalo būti tokio dydžio, kokio yra glifas. */
.tool-brand {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 0.15rem;
font-size: 1rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--text-primary);
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
transition: color 150ms ease;
}
.tool-brand:hover {
color: var(--accent);
}
/* Kontekstinis skirtukas. Grynai dekoratyvus — ekrano skaitytuvui jis nieko nesako,
todėl `aria-hidden` yra markup pusėje. Jis daro ženklo nuorodos prasmę savaime
suprantamą: „Samatukas / Stogo sąmata" skaitosi kaip kelias, o ne kaip du atsitiktiniai
žodžiai, todėl naujokas atspėja, kur nuves kairioji pusė. */
.tool-header-sep {
color: var(--text-muted);
font-size: 0.9rem;
flex-shrink: 0;
user-select: none;
}
/* ── Įrankio pavadinimas ────────────────────────────────────────────────────
*
* Neutralus sąmoningai. Akcentas šiame produkte reiškia veiksmą ir rezultatą (mygtukai,
* aktyvus žingsnis, galutinės sumos) — antraštėje jis būtų dekoracija ir konkuruotų su
* tikrais skaičiais ekrane. Anksčiau čia buvo violetinis CAPS su plačiu tarpu; jo nebėra.
*
* `min-width: 0` yra tai, kas leidžia `text-overflow` veikti flex vaikui: be jo flex
* elementas nesusitraukia žemiau savo turinio pločio ir juosta išsikištų 390px ekrane. */
.tool-header-title {
flex: 1;
min-width: 0;
margin: 0;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── Temos mygtukas ─────────────────────────────────────────────────────────
*
* Tas pats sprendimas kaip viešame puslapyje: 44×44 su dviem inline SVG vietoje 68px PNG.
* Kurią ikoną rodyti, sprendžia CSS pagal `body.dark`, todėl teisinga ikona matoma dar
* PRIEŠ įsikeliant `theme-toggle.js` moduliui (jis atidėtas). Nulis tinklo užklausų. */
.tool-theme-btn {
display: inline-flex;
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;
transition: background 150ms ease, color 150ms ease;
}
.tool-theme-btn:hover {
background: var(--bg-overlay);
color: var(--text-primary);
}
.tool-theme-icon { display: none; }
.tool-theme-icon-moon { display: block; }
body.dark .tool-theme-icon-moon { display: none; }
body.dark .tool-theme-icon-sun { display: block; }
/* ── Klaviatūros fokusas ────────────────────────────────────────────────────
*
* Apimtis sąmoningai siaura: TIK du nauji apvalkalo valdikliai. Platus fokuso auditas
* (formos, lentelės, CAD valdikliai) yra atskiras etapas — bet naujas chrome negali būti
* pristatytas neprieinamas, todėl šie du gauna žiedą iškart.
*
* `:focus-visible`, ne `:focus` — pelės paspaudimas žiedo nerodo. */
.tool-brand:focus-visible,
.tool-theme-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* ── Siauras ekranas ────────────────────────────────────────────────────────
*
* Antros eilutės NĖRA sąmoningai: trims elementams hamburgeris ar persilaužimas būtų
* perteklinis sluoksnis. Vietoje to susitraukia tik tai, kas gali susitraukti —
* įrankio pavadinimas gauna daugtaškį, o ženklas ir temos mygtukas lieka nepaliesti. */
@media (max-width: 640px) {
.tool-header {
padding: 0 0.75rem;
gap: 0.4rem;
}
.tool-header-title {
font-size: 0.85rem;
}
}
/* ── Lietimo įvesties tipografijos grindys (TOOLS T2) ───────────────────────
*
* iOS Safari automatiškai priartina puslapį, kai fokusuojamas įvesties laukas,
* kurio tekstas mažesnis nei 16px. Po priartinimo vartotojas lieka pastumtame
* vaizde — jis pats turi atitolinti, o darbo srities išdėstymas atrodo sugadintas.
* Visi trys įrankiai savo laukus rašo 0,7–0,88rem (11–14px), t. y. žemiau ribos.
*
* KODĖL `#app`, o ne plikas `input`: stogo sąmata ir sutarties generatorius
* spausdinimo turinį generuoja į `#print-area`, kuris yra `#app` BROLIS, o ne vaikas.
* ID apimtis fiziškai neleidžia šiai taisyklei pasiekti popieriaus. `screen` dar kartą
* tą patvirtina: spausdinimo medija su ja nesutampa niekada.
*
* KODĖL `pointer: coarse`, o ne plotis: 390px langas darbalaukyje yra pelė ir tankis
* ten vertingesnis; problema kyla nuo įvesties įrenginio, ne nuo ekrano dydžio.
*
* `select` sąraše nėra — iOS jo dėl teksto dydžio nepriartina; jis atidaro savo ratuką. */
@media screen and (pointer: coarse) {
#app input[type="text"],
#app input[type="number"],
#app input[type="tel"],
#app input[type="email"],
#app input[type="date"],
#app textarea {
font-size: 16px;
}
}
/* ── Klaviatūros fokuso pagrindas (TOOLS T3A) ───────────────────────────────
*
* Trys įrankiai turėjo 22 vietas su `outline: none`, o dauguma jų pakeisdavo
* kontūrą tik 1px rėmelio spalva arba visai niekuo. Praktinis rezultatas: per Tab
* einantis vartotojas nematydavo, kur yra. Čia tas pagrindas atkuriamas vienoje
* vietoje, tokiu pat pavidalu, kokį sutarties generatorius jau naudojo.
*
* KODĖL `:focus-visible`, o ne `:focus`: pelės paspaudimas žiedo nerodo. Todėl
* esamų `:focus { outline: none }` taisyklių NETRINAME — jos ir toliau tvarko
* pelės vaizdą, o klaviatūrai žiedą grąžina ši taisyklė.
*
* KODĖL SPECIFIŠKUMAS SVARBUS: `#app button:focus-visible` yra (1,1,1). Vietinės
* taisyklės, kurias reikia nugalėti, yra `.input-group input:focus` (0,2,1) ir
* `.custom-item-qty:focus` (0,2,0) — ID jas viršija. T2 metu priešinga klaida
* (silpnesnė vietinė taisyklė) tyliai neveikė, todėl čia specifiškumas skaičiuotas,
* o ne spėtas.
*
* KODĖL VARDIJAMI ELEMENTAI, o ne `*`: `#app *:focus-visible` uždėtų žiedą ir ant
* programinio fokuso taikinių (sutarties `.step-heading[tabindex="-1"]`), kur jis
* sąmoningai paslėptas. Vardijant tik tikrus valdiklius tokios regresijos nėra.
*
* `#preview-overlay` įtrauktas atskirai: stogo sąmatoje ir sutartyje jis yra `#app`
* BROLIS, todėl vien `#app` jo nepasiektų. `#print-area` sąmoningai neįtrauktas —
* popieriuje fokuso nėra. */
#app a:focus-visible,
#app button:focus-visible,
#app input:focus-visible,
#app select:focus-visible,
#app textarea:focus-visible,
#preview-overlay a:focus-visible,
#preview-overlay button:focus-visible,
#preview-overlay input:focus-visible,
#preview-overlay select:focus-visible,
#preview-overlay textarea:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* ── Lietimo taikinių pagrindas (TOOLS T3A) ─────────────────────────────────
*
* Vedlio mygtukai ir kliento laukai visuose trijuose įrankiuose vadinasi vienodai
* ir buvo vienodai per žemi pirštui: išmatuota 42,8px (vedlys) ir 31–33px (laukai)
* prie 390px lietimo ekrano. Aukštis keliamas TIK prie `pointer: coarse` — pelės
* darbalaukyje tankis yra vertybė, o 44px eilutės ten atrodytų išpūstos.
*
* `min-height`, o ne `height`: turinys gali būti aukštesnis (dvieilis tekstas), ir
* tokiu atveju mygtukas turi augti, o ne apkarpyti tekstą.
*
* SPECIFIŠKUMAS: nė vienas iš trijų įrankių `.wizard-btn` ar `.client-input`
* taisyklėse `height`/`min-height` NEDEKLARUOJA (patikrinta, ne prielaida), todėl
* ši (0,1,0) taisyklė niekur nekonkuruoja, nors įrankio failas kraunamas vėliau.
*
* T2 16px teksto grindys lieka nepaliestos — `min-height` šrifto dydžio nekeičia. */
@media screen and (pointer: coarse) {
.wizard-btn,
.client-input {
min-height: 44px;
}
}
/* ── Kur bendras žiedas savaime nematomas (TOOLS T3A) ───────────────────────
*
* Aukščiau esanti taisyklė uždeda žiedą teisingam elementui, bet dviem atvejais
* jo vis tiek niekas nepamatytų. Abu rasti MATUOJANT, ne skaitant CSS — computed
* `outline-style` abiem atvejais sako „solid".
*
* 1. JUNGIKLIO LANGELIS YRA 0×0. Visi trys įrankiai slepia ``
* per `opacity: 0; width: 0; height: 0`, o mato vartotojas gretimą slankiklį.
* Žiedas ant nulinio dydžio dėžutės nupiešiamas ir lieka nematomas. Todėl jis
* perkeliamas ant slankiklio — lygiai taip, kaip sutarties generatorius jau
* darė (`styles.css:440`); čia tas pats sprendimas galioja visiems trims.
*
* 2. SEGMENTUOTAS PASIRINKIMAS UŽPILDO `overflow: hidden` KONTEINERĮ. `.party-type-btn`
* remiasi į `.party-type-selector` kraštus, todėl +2px žiedas nupiešiamas UŽ
* apkarpymo ribos ir dingsta iš trijų pusių. Neigiamas poslinkis piešia dėžutės
* VIDUJE, kur apkarpymas jo nepasiekia. Stogo sąmatoje tai tikras `