/* HiLTUS UI — komponentai.
 *
 * Po vieną kiekvienam darbui. Audite rasta: HiLEX turi 17 mygtukų variantų,
 * 8 lentelių stilius ir 6 ženkliukų sistemas; HiTDP — 11 ženkliukų šeimų.
 * Čia yra po vieną, o variantai daromi modifikatoriumi, ne nauja klase.
 *
 * Kraštas, užpildas, apvalinimas ir šešėlis kiekvienas sako „atskiras daiktas".
 * Jie leidžiami pagal vaidmenį, o ne uždedami ant visko iš eilės — kitaip
 * hierarchija suplokštėja ir niekas nebeišsiskiria.
 */

/* ---- Mygtukas ---------------------------------------------------------- */

.hi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--touch);
  padding: 0 var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}

.hi-btn:hover { background: var(--surface-hover); }
.hi-btn:disabled,
.hi-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* Pagrindinis. Tekstas TAMSIAI MĖLYNAS, ne baltas: baltas ant žydros yra
   2,80:1 ir neatitinka WCAG AA, o navy duoda 5,07:1. */
.hi-btn--primary {
  background: var(--accent);
  color: var(--accent-contrast);
}
.hi-btn--primary:hover { background: var(--accent-text); color: #fff; }

.hi-btn--ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--accent-text);
}
.hi-btn--ghost:hover { background: var(--accent-soft); }

.hi-btn--danger { background: var(--danger-soft); color: var(--danger); }
.hi-btn--danger:hover { background: var(--danger); color: #fff; }

/* Smulkus — tik ten, kur mygtukas yra eilutės dalis, o ne veiksmas.
   Paspaudimo laukas lieka 44px per padding, nors pats mygtukas žemesnis. */
.hi-btn--sm {
  min-height: 32px;
  padding: 0 var(--sp-3);
  font-size: var(--fs-xs);
}

/* Ženklo mygtukas: ✕, ＋ ir panašūs, kortelės ar eilutės kampe. Matomas mažas,
   bet paspaudimo laukas per ::after išlieka 44px — pirštas nėra pelė. */
.hi-btn--icon {
  position: relative;
  min-height: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  background: none;
  border-color: var(--line-strong);
  color: var(--muted);
  font-size: .72rem;
}

.hi-btn--icon::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: var(--touch);
  height: var(--touch);
  transform: translate(-50%, -50%);
}

.hi-btn--icon:hover { background: none; color: var(--ink); border-color: var(--accent); }
.hi-btn--icon.hi-btn--add { color: var(--accent-text); border-color: var(--accent-border); }

/* ---- Pilė (būsena) -----------------------------------------------------
   VIENA ženkliukų šeima. Spalva sako, kas tai; forma visada ta pati. */

.hi-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: .15rem var(--sp-2);
  border: 1px solid;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .02em;
  white-space: nowrap;
}

.hi-pill--neutral { color: var(--muted); border-color: var(--line-strong); background: var(--surface-2); }
.hi-pill--accent { color: var(--accent-text); border-color: var(--accent-border); background: var(--accent-soft); }
.hi-pill--success { color: var(--success); border-color: currentColor; background: var(--success-soft); }
.hi-pill--warn { color: var(--warn); border-color: currentColor; background: var(--warn-soft); }
.hi-pill--danger { color: var(--danger); border-color: currentColor; background: var(--danger-soft); }

/* Taškas prieš skaičių — raudonas klaidoms, žalias ištaisytoms. */
.hi-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* ---- Kortelė ----------------------------------------------------------- */

.hi-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--sp-4);
}

/* Pakylėjimas tik tam, kas tikrai turi išsiskirti. Ne visoms kortelėms. */
.hi-card--lift { box-shadow: var(--sh-lift); border-color: transparent; }

/* Kortelė be vidinio užpildo: turinys pats neša savo paraštes (lentelė,
   rodiklių juosta). `clip`, ne `hidden` — `hidden` sukurtų slinkties
   konteinerį ir lentelės lipni antraštė nustotų veikti. */
.hi-card--flush { padding: 0; overflow: clip; }

/* Rizikos kraštas — kairėje, spalva sako svarbumą. */
.hi-card--edge { border-left: 3px solid var(--accent); }
.hi-card--edge-danger { border-left-color: var(--danger); }
.hi-card--edge-warn { border-left-color: var(--warn); }
.hi-card--edge-success { border-left-color: var(--success); }

.hi-card__title { font-size: var(--fs-base); font-weight: var(--fw-bold); margin: 0 0 var(--sp-1); }
.hi-card__meta { font-size: var(--fs-sm); color: var(--muted); }

/* ---- Rodiklio kortelė --------------------------------------------------
   Didelis skaičius, pokytis ir pavadinimas. Telefone lūžta į dvi eiles, tad
   projektuojama nuo telefono, o ne atvirkščiai. */

.hi-metric { display: flex; flex-direction: column; gap: var(--sp-1); }
.hi-metric__value {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
/* Matavimo vienetas prie skaičiaus — mažas ir pilkas, kad neatimtų dėmesio. */
.hi-metric__unit {
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
  color: var(--muted);
  letter-spacing: .02em;
  margin-left: .35em;
}
.hi-metric__label { font-size: var(--fs-sm); color: var(--muted); }
.hi-metric__delta {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Spalva sako REIKŠMĘ, ne kryptį. Rodikliui kilti dažniausiai gerai, o kainai —
   blogai, tad kiekvienas puslapis pats nusprendžia, kuri kryptis ką reiškia. */
.hi-metric__delta--good { color: var(--success); }
.hi-metric__delta--bad { color: var(--danger); }
.hi-metric__delta--flat { color: var(--muted); }
/* Įprastas atvejis: kyla — gerai. Trumpiniai, kad nereikėtų versti kiekvieno šablono. */
.hi-metric__delta--up { color: var(--success); }
.hi-metric__delta--down { color: var(--danger); }
/* Eilutė po skaičiumi: laikotarpis ir pokyčiai. */
.hi-metric__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-3);
  font-size: var(--fs-xs);
}
.hi-metric__meta .hi-metric__label,
.hi-metric__meta .hi-metric__delta { font-size: var(--fs-xs); }

/* Sparkline. Naudoja ir rodikliai, ir pirkimai, tad gyvena čia, o ne puslapyje. */
.hi-spark { display: block; width: 100%; height: 30px; margin: var(--sp-1) 0; }
.hi-spark polyline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

/* Kompaktiškas variantas — kai rodiklių eilėje daug, o vietos mažai. */
.hi-metric--sm .hi-metric__value { font-size: var(--fs-lg); }
/* Žymė yra VIENAS vaidmuo, tad ir viena išvaizda. Iki šiol mažasis rodiklis
   turėjo `--fs-sm` mažosiomis, o toks pat rodiklis juostoje — `--fs-2xs`
   didžiosiomis: du gretimi blokai su ta pačia paskirtimi atrodė kaip dviejų
   skirtingų rūšių objektai. Sutapatinta su juostos konvencija. */
.hi-metric--sm .hi-metric__label {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.2;
}

/* ---- Rodiklių juosta ---------------------------------------------------
   Kelios reikšmės vienoje eilėje virš grafiko ar lentelės: kas svarbiausia,
   matoma prieš detales.

   Tinklelis, ne `flex-wrap`. Skirtumas praktinis: `flex-wrap` palieka
   nevienodo pločio uodegą ir eilė atrodo pusiau tuščia, o `auto-fit` stulpelius
   išplečia per visą plotį, tad tuščios vietos nebūna nė vienoje eilėje.

   Blokus skiria plona linija, ne didelis tarpas — linija leidžia tarpą
   perpus sumažinti neprarandant atskyrimo. */

.hi-metricbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  /* Trys eilės visai juostai: žymė, reikšmė, patikslinimas. Blokai jas
     pasidalina per `subgrid`, tad ilga vieno bloko pastaba nebenustumia kito
     bloko reikšmės — visos reikšmės lieka vienoje linijoje. Be to nė vienas
     tekstas nepersidengia su gretimu, nes eilės aukštį nustato ilgiausias
     tos eilės turinys, ne kaimynas. */
  grid-template-rows: auto auto auto;
  gap: var(--sp-3) 0;
}

.hi-metricbar > .hi-metric {
  min-width: 0;
  gap: 0;
  padding-inline: var(--sp-3);
  border-inline-start: 1px solid var(--line);
}
/* Pirmas blokas eilės kairėje krašto linijos neturi — ji atrodytų kaip rėmelis.
   `:first-child` padengia pirmą eilę, o tolesnes — pats naršyklės tinklelis:
   kai stulpelių skaičius keičiasi, vidinės linijos lieka tarp blokų. */
.hi-metricbar > .hi-metric:first-child { border-inline-start: 0; padding-inline-start: 0; }

@supports (grid-template-rows: subgrid) {
  .hi-metricbar > .hi-metric {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    align-content: start;
  }
  /* Eilė nurodoma aiškiai, o ne paliekama šaltinio tvarkai: blokas be reikšmės
     (pvz. „skaičiuojama…") kitaip nustumtų savo pastabą į reikšmių eilę ir
     lygiavimas sugriūtų. */
  .hi-metricbar .hi-metric__label { grid-row: 1; }
  .hi-metricbar .hi-metric__value { grid-row: 2; }
  .hi-metricbar .hi-metric__note { grid-row: 3; }
}

/* Juostoje žymė yra antraštė, ne tekstas: smulki, didžiosiomis, prigesinta.
   Kortelėje ta pati klasė lieka normali — konteinerio taisyklė, ne nauja klasė. */
.hi-metricbar .hi-metric__label {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.2;
}
/* Skaičius ir vienetas — VIENOJE eilutėje. Lietuviškas formatas skaičiuje naudoja
   nedalomus tarpus, tad pats skaičius nesilaužo, o ilgas vienetas („2021 m. = 100")
   persikelia žemiau tik tada, kai netelpa. Privalomas laužymas atrodo kaip klaida:
   „92,40" ir „EUR/m³" skirtingose eilutėse yra vienas dydis, ne du. */
/* Juostoje kontekstiniai skaičiai SUMAŽINAMI iki `--fs-lg`. Bazinis
   `--fs-2xl` yra kortelės dydis, kur skaičius vienas; juostoje jų penki–šeši,
   ir visi dideli reiškia, kad didelio nėra nė vieno. */
.hi-metricbar .hi-metric__value { line-height: 1.15; font-size: var(--fs-lg); }
/* Pirmas juostos blokas yra ATSAKYMAS, visi kiti — kontekstas. Kai visi skaičiai
   vienodo dydžio, hierarchijos nėra ir akis nežino, kur pradėti. Taisyklė čia, o
   ne šablonuose: taip jos nereikia atsiminti kiekvienam puslapiui.

   DĖMESIO, ištaisyta klaida: anksčiau čia stovėjo `--fs-xl` (1,375rem), o bazė
   liko `--fs-2xl` (1,75rem) — tad taisyklė veikė TIKSLIAI ATVIRKŠČIAI savo
   komentarui: atsakymas buvo mažiausias juostos skaičius, o penki konteksto
   skaičiai — didžiausi. Pastebėta dizaino audito metu, ne ekrane: apverstą
   hierarchiją akis priima kaip „tiesiog daug skaičių". */
.hi-metricbar > .hi-metric:first-child .hi-metric__value { font-size: var(--fs-2xl); }
.hi-metricbar .hi-metric__unit { white-space: nowrap; }

/* Paaiškinimas po reikšme — smulkus ir pilkas. */
.hi-metric__note { font-size: var(--fs-xs); line-height: 1.35; color: var(--muted); }

/* Patikimumo ženklas ŽYMĖJE, ne prie reikšmės: jis sako, kiek verta tikėti
   skaičiumi, o ne keičia patį skaičių — prie reikšmės būtų skaitomas kaip jos
   dalis. Toks pat „?“ kaip sąrašo eilutėje: viena reikšmė visame ekrane. */
.hi-metric__flag {
  display: inline-block;
  min-width: 1.1em;
  padding: 0 .15em;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--fs-2xs);
  line-height: 1.3;
  text-align: center;
  color: var(--muted);
  cursor: help;
}

/* ---- Grafikas ----------------------------------------------------------
   Istorijos kreivė. Braižoma SVG'u serverio paskaičiuotomis koordinatėmis —
   biblioteka duoda tik išvaizdą, ne geometriją.

   Ploto užpildui naudojamas perėjimas, o ne plokščias permatomumas: identiteto
   grafinė kalba yra perėjimai iš spalvos į skaidrumą, ir kreivė taip atrodo
   įaugusi į lapą, o ne uždėta ant jo. Perėjimui reikia <defs> bloko žymėjime —
   žr. README „Grafikas". Be jo veikia `hi-chart__area--flat`. */

.hi-chart { display: block; width: 100%; height: 260px; }

.hi-chart__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* Mėnuo be duomenų: kreivė nutrūksta, tarpas jungiamas punktyru. */
.hi-chart__line--gap {
  stroke-width: 1.2;
  stroke-dasharray: 4 5;
  opacity: .5;
}

.hi-chart__area { fill: url(#hiChartFill); }
.hi-chart__area--flat { fill: var(--accent); opacity: .12; }

/* Perėjimo spalva — CSS SAVYBE, ne SVG atributu.
   `var()` NEVEIKIA SVG prezentacijos atributuose (`stop-color="var(--accent)"`):
   reikšmė tampa negaliojanti, ir naršyklė piešia pradinę — JUODĄ. Klaida tyli,
   nes perėjimas vis tiek matomas, tik ne ta spalva. Šablone rašoma:
       <stop class="hi-chart__stop hi-chart__stop--from" offset="0%"/>
       <stop class="hi-chart__stop hi-chart__stop--to"   offset="100%"/> */
.hi-chart__stop { stop-color: var(--accent); }
.hi-chart__stop--from { stop-opacity: .28; }
.hi-chart__stop--to { stop-opacity: 0; }

/* ---- Sklaida ir imtis --------------------------------------------------
   Kreivė beveik visada yra vidurkis, o vidurkis be sklaidos yra tikslesnis,
   nei leidžia duomenys. Juosta rodo periodo reikšmių intervalą, o tušti taškai
   — kad reikšmė sudaryta iš per mažos imties. Tai ne dekoracija: be jų grafikas
   teigia daugiau, nei žino. */
/* Brėžiama VIRŠ ploto užpildo, po kreive — po juo apatinė juostos pusė
   susidėtų su užpildu ir atrodytų tankesnė už viršutinę, nors sklaida ta pati. */
.hi-chart__band {
  fill: var(--accent);
  opacity: .13;
  stroke: none;
}
/* Pavienis periodas — vertikali atkarpa, nes juosta iš vieno taško nematoma.
   Tas pats principas kaip tarpuose: ištisinė dalis vs pavieniai. */
.hi-chart__band-tick {
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: butt;
  opacity: .16;
}
/* ---- Atskaitos linijos ------------------------------------------------
   Skaičius be atskaitos taško neatsako į klausimą „ar tai daug". Vidurkis per
   rodomą laikotarpį yra pigiausia ir naudingiausia atskaita kainų grafike. */
.hi-chart__mean {
  stroke: var(--ink);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  opacity: .42;
  vector-effect: non-scaling-stroke;
}
.hi-chart-box .hi-chart__meanlab {
  position: absolute;
  inset-inline-end: 3px;
  transform: translateY(-100%);
  margin-top: -2px;
  padding-inline: 3px;
  background: var(--surface);
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* Tinklelis turi būti vos matomas: jis skirtas skaityti reikšmę, ne žiūrėti. */
.hi-chart__grid {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  vector-effect: non-scaling-stroke;
  opacity: .7;
}

/* Nulio linija — atskaita, o ne duomenys, tad ji PATI TYLIAUSIA ir VIENTISA.
   Brūkšniuota ji buvo nesuderinama su rinkos kreive: procentiniame režime
   rinkos indeksas irgi brūkšniuotas ir eina būtent per nulio zoną (0 % yra
   lango pradžia abiem kreivėms), tad dvi pilkos brūkšniuotos linijos
   susikirsdavo ir nebuvo aišku, kuri yra kuri. Grafike brūkšniai dabar reiškia
   DUOMENIS (rinka), vientisos plonos linijos — atskaitą (nulis, tinklelis). */
.hi-chart__zero {
  stroke: var(--muted);
  stroke-width: 1;
  opacity: .45;
  vector-effect: non-scaling-stroke;
}

/* ---- Taškai ------------------------------------------------------------
   Taškai NĖRA SVG viduje. Grafikas tempiamas netolygiai
   (`preserveAspectRatio="none"`), todėl SVG apskritimas tampa elipse — plačiame
   ekrane iki pusantro karto, ir žiedai atrodo kaip kiaušiniai. Taisyklė bendra:
   **kas privalo išlaikyti formą, gyvena virš SVG HTML sluoksniu** (kaip ašių
   reikšmės), o SVG lieka tik kreivės, plotai ir linijos — jiems tempimas
   nekenkia, o linijų storį išlaiko `vector-effect: non-scaling-stroke`.

   Padėtis nurodoma procentais (`left`/`top`), tad taškas lieka vietoje bet
   kokiame plotyje. */
.hi-chart__mark {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: 0;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1.5px var(--surface);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
/* Plonos imties taškas — tuščias. Dydis tas pats: keičiasi pasitikėjimas, ne
   reikšmės svoris. */
.hi-chart__mark--thin {
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
/* Paskutinis taškas — kur kreivė baigiasi dabar. Akiai reikia, kur nutūpti. */
.hi-chart__mark--last { width: 10px; height: 10px; }
/* Žiedas aplink žemiausią ir aukščiausią reikšmę. */
.hi-chart__mark--ring {
  width: 15px;
  height: 15px;
  background: transparent;
  border: 1.25px solid var(--ink);
  opacity: .45;
  box-shadow: none;
}
.hi-chart__mark--s1 { background: var(--series-1); }
.hi-chart__mark--s2 { background: var(--series-2); }
.hi-chart__mark--s3 { background: var(--series-3); }
.hi-chart__mark--s4 { background: var(--series-4); }
.hi-chart__mark--s5 { background: var(--series-5); }
.hi-chart__mark--s6 { background: var(--series-6); }
/* Taškas po pele — didesnis, nes atsako į klausimą, į kurį žmogus ką tik
   parodė. Jį valdo js/hi-chart.js, padėtį nustato pikseliais. */
.hi-chart__mark--hover { width: 11px; height: 11px; z-index: 2; }

/* Taškas kaip MYGTUKAS: paspaudus atveriamos to periodo sąskaitų eilutės.
   Tada jis privalo veikti ne tik pele, bet ir klaviatūra bei pirštu, todėl
   gauna `pointer-events`, paspaudimo lauką per ::after ir rikiuojamą
   `tabindex` (vienas taškas Tab tvarkoje, tarp jų judama rodyklėmis). */
button.hi-chart__mark { padding: 0; border: 0; cursor: pointer; pointer-events: auto; }
button.hi-chart__mark::after {
  content: "";
  position: absolute; inset: 50% auto auto 50%;
  width: var(--touch); height: var(--touch);
  transform: translate(-50%, -50%);
}
/* Atvertas periodas — žiedas aplink tašką: jo eilutės rodomos žemiau. */
.hi-chart__mark--open {
  width: 13px; height: 13px;
  background: transparent;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 2px var(--surface);
}
/* Plonos imties ženklas privalo išlikti ir užvestas, ir atvertas — kitaip jis
   dingsta būtent tą akimirką, kai į tašką žiūrima. */
.hi-chart__mark--thin.hi-chart__mark--hover {
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 1.5px var(--surface);
}
.hi-chart__mark--thin.hi-chart__mark--open {
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 2px var(--surface);
  border: 0;
}

.hi-chart__cursor { stroke: var(--muted); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* SVG elementai HTML atributo `hidden` nepaklūsta — naršyklės jį taiko tik HTML
   erdvės elementams. Todėl slėpimas nurodomas taisykle, ir tik tada `el.hidden`
   veikia gairei. */
.hi-chart [hidden], .hi-chart__tip[hidden], .hi-chart__mark[hidden] { display: none; }

/* Papildomos kreivės ant tos pačios skalės. Numeracija nuo 1: nulinė yra
   pagrindinė kreivė, ir ji visada --accent. */
/* Rinkos kreivė — ne dar viena mūsų serija, o fonas, su kuriuo gretinamasi.
   Todėl prigesinta ir punktyrinė: ji atsako į klausimą „ar tai rinka, ar mes",
   bet neturi konkuruoti su mūsų kreive. */
/* Rinkos indeksas — ilgas brūkšnys, ne trumpas: trumpas nesiskyrė nei nuo
   nulio linijos, nei nuo tinklelio. Jis yra DUOMENYS, tad tamsesnis už bet
   kurią atskaitos liniją, bet ne akcento spalvos — akcentas ekrane vienas ir
   priklauso mūsų kainai. */
.hi-chart__line--market {
  stroke: var(--ink);
  stroke-width: 1.75;
  stroke-dasharray: 10 5;
  stroke-linecap: butt;
  opacity: .65;
}

/* ---- Faktas ir tendencija -----------------------------------------------
   Mėnesio reikšmė yra faktas, bet kas antra jų sudaryta iš dviejų–trijų
   sąskaitos eilučių, tad kreivė šokinėja ten, kur kaina nekinta. Tada faktinė
   kreivė tampa FONU, o akį veda glodinta kryptis — duomenų neslepiame, tik
   pasakome, kur jie eina.

   Tvarka svarbi: `--raw` privalo stovėti po `--gap`, kad prigesintų ir
   punktyrinius tilteliai, o `--trend` — paskutinis, nes jis nugali abu. */
.hi-chart__line--raw { stroke-width: 1.25; opacity: .45; }
.hi-chart__line--trend {
  stroke: var(--accent);
  stroke-width: 2.5;
  opacity: 1;
}

.hi-chart__line--s1 { stroke: var(--series-1); }
.hi-chart__line--s2 { stroke: var(--series-2); }
.hi-chart__line--s3 { stroke: var(--series-3); }
.hi-chart__line--s4 { stroke: var(--series-4); }
.hi-chart__line--s5 { stroke: var(--series-5); }
.hi-chart__line--s6 { stroke: var(--series-6); }
/* Spalvos indikatorius. Be modifikatoriaus jis yra PAGRINDINĖS kreivės spalvos,
   o `--s1…s6` ją perrašo papildomoms.

   Bazinė taisyklė PRIVALO stovėti prieš modifikatorius: specifiškumas vienodas
   (viena klasė), tad laimi tas, kuris faile vėliau. Kai ji buvo žemiau,
   `background: var(--accent)` perrašydavo visas serijų spalvas ir užuominoje
   bei legendoje visi taškai atrodė vienodi — nors kreivės grafike buvo
   skirtingų spalvų. */
.hi-legend__dot {
  display: inline-block;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  margin-right: .35rem;
  background: var(--accent);
  flex: 0 0 auto;
}
/* Rinkos indeksas legendoje — BRŪKŠNELIS, ne taškas: grafike jis brūkšniuotas,
   ir taškas legendoje nepasakė, kuri iš dviejų pilkų linijų yra jis. */
.hi-legend__dot--market {
  width: 1.1rem;
  height: 0;
  border-radius: 0;
  background: none;
  border-top: 2px dashed var(--ink);
  opacity: .65;
  vertical-align: middle;
}
/* Kai yra tendencijos linija, faktinė kreivė grafike prigesinta — legendos
   taškas turi rodyti tą patį, kitaip abi eilutės ženklinamos vienodai. */
.hi-legend__dot--raw { opacity: .45; }
.hi-legend__dot--s1 { background: var(--series-1); }
.hi-legend__dot--s2 { background: var(--series-2); }
.hi-legend__dot--s3 { background: var(--series-3); }
.hi-legend__dot--s4 { background: var(--series-4); }
.hi-legend__dot--s5 { background: var(--series-5); }
.hi-legend__dot--s6 { background: var(--series-6); }

/* Legenda po grafiku ir grafiko poraštė (žemiausia, aukščiausia, vidurkis…) —
   ta pati forma: smulkūs prigesinti faktai viena eile. Du vardai vienam
   apibrėžimui, nes prasmė skirtinga: legenda aiškina kreivių spalvas, poraštė
   pateikia skaičius. Legendos be reikalo nerodyk — kai kreivė viena, ji nieko
   nesako. */
.hi-legend,
.hi-chart__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.hi-chart__foot {
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
}
.hi-chart__foot b { color: var(--ink); font-weight: var(--fw-medium); }


/* ---- Užuomina prie kursoriaus -----------------------------------------
   Keturi sprendimai, kurių kiekvienas turi priežastį:

   1. Ji stovi PRIE TAŠKO, ne grafiko viršuje. Žmogus žiūri į kreivės vietą, į
      kurią ką tik parodė — reikšmė turi būti ten, o ne kitame lapo gale.
   2. Plotis `max-content`, eilutės `nowrap`. Todėl prie krašto ji tik
      pasislenka, o **dydžio nebekeičia**: šokinėjantis stačiakampis skaitomas
      kaip klaida, net kai tekstas teisingas.
   3. **Viena eilutė per kreivę, su spalvos indikatoriumi.** Kairėje — spalva ir
      vardas, dešinėje — reikšmė. Pirmoje eilutėje vardo vietą užima
      laikotarpis, tad data ir reikšmė yra vienoje eilutėje, o ne dviejose.
      Grafike gali būti kelios kreivės, ir spalva yra vienintelis dalykas,
      susiejantis eilutę su kreive.
   4. Du stulpeliai, `tabular-nums`, todėl skaičiai lygiuojasi vertikaliai ir
      juos galima lyginti tarpusavyje.

   Tamsi ant šviesaus ir atvirkščiai — todėl `ink`/`bg`. */
.hi-chart__tip {
  position: absolute;
  z-index: 30;
  width: max-content;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--bg);
  box-shadow: var(--sh-lift);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  text-align: left;
  pointer-events: none;
}

/* Visos eilutės — vienas tinklelis: kairysis stulpelis vardas (ar laikotarpis),
   dešinysis reikšmė. */
.hi-chart__tip-rows {
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px var(--sp-3);
}
.hi-chart__tip-rows > span { white-space: nowrap; display: flex; align-items: center; }
.hi-chart__tip-rows > span:nth-child(even) { display: block; text-align: right; }

/* Pirma eilutė: laikotarpis ir pagrindinė reikšmė. Laikotarpis — antraštė,
   reikšmė — vienintelis dalykas, perskaitomas negalvojant. */
.hi-chart__tip-when {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .78;
}
.hi-chart__tip-now {
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
}

/* Iš ko reikšmė sudaryta (imtis, intervalas). Paskutinė eilutė, per abu
   stulpelius — tai ne dar viena reikšmė, o jos patikimumas. */
.hi-chart__tip-note {
  grid-column: 1 / -1;
  margin-top: 2px;
  font-size: var(--fs-2xs);
  opacity: .72;
}

/* Ašies nutrūkimo ženklas kairiajame apatiniame kampe. Kai nulis ašyje
   nerodomas, tai PRIVALO būti pažymėta: kitaip 0,6 % svyravimas per visą
   grafiko aukštį skaitomas kaip griūtis. Įprastas žymėjimas — dvi įstrižos. */
.hi-chart-box .hi-chart__break {
  position: absolute;
  left: 0;
  bottom: -2px;
  color: var(--muted);
  font-size: var(--fs-2xs);
  line-height: 1;
  letter-spacing: -.1em;
  pointer-events: none;
  opacity: .8;
}

/* ---- Nuosprendis -------------------------------------------------------
   Viena eilutė, atsakanti į klausimą, dėl kurio ekranas apskritai atveriamas:
   „ar ši kaina gera?". Skaičiai jos nepakeičia — skaičių sudėjimas į išvadą yra
   darbas, ir jį turi padaryti sistema, ne žmogus.

   Spalva sako REIKŠMĘ, ne kryptį (žr. hi-metric__delta): pirkėjui kylanti kaina
   yra bloga žinia, net kai rodyklė rodo į viršų. */
.hi-verdict {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  border-inline-start: 3px solid var(--muted);
  background: var(--surface-2);
}
.hi-verdict__head { font-size: var(--fs-base); font-weight: var(--fw-bold); line-height: 1.2; }
.hi-verdict__why { font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; }
.hi-verdict--bad { border-inline-start-color: var(--danger); }
.hi-verdict--bad .hi-verdict__head { color: var(--danger); }
.hi-verdict--good { border-inline-start-color: var(--success); }
.hi-verdict--good .hi-verdict__head { color: var(--success); }

/* ---- Faktų sąrašas ----------------------------------------------------
   Žymė kairėje, reikšmė dešinėje, viena eilutė vienam faktui. Kai faktų keli ir
   visi tos pačios rūšies (pokyčiai per skirtingus laikotarpius), plytelių eilė
   yra klaida: plytelės skirtos išskirti, o čia reikia palyginti. Sąrašas skaitomas
   akimi iš viršaus į apačią, plytelių eilė — ne. */
.hi-facts { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-1) var(--sp-3); }
.hi-facts__k { font-size: var(--fs-xs); color: var(--muted); min-width: 0; }
.hi-facts__v {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
/* Antraštė grupei — per abu stulpelius. */
.hi-facts__title {
  grid-column: 1 / -1;
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin-top: var(--sp-2);
}
.hi-facts__title:first-child { margin-top: 0; }

/* ---- Nustatymo blokas -------------------------------------------------
   Vienkartinė užduotis („su kuo lyginti šią kategoriją"), kuri kartojasi tol,
   kol neatlikta. Suskleista ji užima vieną eilutę, o ne trečdalį stulpelio:
   nustatymas nėra atsakymas ir neturi stovėti atsakymo vietoje. */
.hi-setup > summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.hi-setup > summary::-webkit-details-marker { display: none; }
.hi-setup > summary::after { content: " ▸"; }
.hi-setup[open] > summary::after { content: " ▾"; }
.hi-setup > summary:hover { color: var(--accent); }
.hi-setup__hint { text-transform: none; letter-spacing: 0; opacity: .75; }
.hi-setup > .hi-facts { margin-top: var(--sp-2); }

/* ---- Gretinimo juostelės ----------------------------------------------
   Du dydžiai, kuriuos reikia palyginti tarpusavyje (mūsų pokytis ir rinkos).
   Juostelės ilgis proporcingas didžiausiam iš jų — skaičiai vienas po kitu
   pasakytų tą patį, bet palyginimą reikėtų atlikti galvoje. */
.hi-bars { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-1) var(--sp-2); align-items: center; }
.hi-bars__k { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.hi-bars__track { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.hi-bars__fill { height: 100%; background: var(--accent); border-radius: 3px; }
.hi-bars__fill--muted { background: var(--muted); opacity: .55; }
.hi-bars__v {
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

/* ---- Paaiškinimas po ikonele -------------------------------------------
   Ilgas aiškinamasis tekstas po grafiku ar prie lauko atima vietą kiekvienam,
   o perskaitomas kartą. Todėl jis keliauja už „i" ikonelės ir pasirodo užvedus.

   Veikia be JavaScript: `:hover`, `:focus` ir `:focus-within`. `<button>`, ne
   `<span>` — taip jį pasiekia klaviatūra ir bakstelėjimas telefone.

       <button type="button" class="hi-info" aria-label="Paaiškinimas">i
         <span class="hi-info__pop" role="tooltip">…</span>
       </button>

   Tas pats `hi-info__pop` naudojamas visiems iššokantiems paaiškinimams —
   kad jų išvaizda sistemoje būtų viena, o ne po vienai kiekvienoje vietoje. */
.hi-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  line-height: 1;
  cursor: help;
}
/* Paspaudimo laukas didesnis už ženklą, bet ne per visą 44 px: ikonelė stovi
   prie antraštės, ir per didelis laukas iššokintų paaiškinimą vedant pele
   pro pavadinimą. */
.hi-info::before { content: ""; position: absolute; inset: -8px; }
.hi-info:hover, .hi-info:focus-visible { color: var(--accent); border-color: var(--accent); }

.hi-info__pop {
  position: absolute;
  z-index: 40;
  top: calc(100% + .4rem);
  inset-inline-start: 0;
  width: max-content;
  max-width: min(30rem, 78vw);
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-inline-start: 2px solid var(--accent);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-lift);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
  line-height: 1.45;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  cursor: auto;
}
.hi-info__pop b { font-weight: var(--fw-bold); }
.hi-info__pop .hi-muted { display: block; margin-top: var(--sp-1); font-size: var(--fs-xs); }
/* Kai ikonelė dešiniajame krašte, paaiškinimas lygiuojamas dešinėn — kitaip
   išeitų už kortelės. */
.hi-info__pop--end { inset-inline-start: auto; inset-inline-end: 0; }
/* Lipnioje lentelės antraštėje vietos virš ikonelės nėra — atsiveria žemyn. */
.hi-info__pop--below { inset-block: calc(100% + 6px) auto; }
/* Slepiama neigimu, o ne `display: none` + perrašymu: taip variantai
   (`--end`) nepriklauso nuo taisyklių tvarkos.
   `:not([popover])` — kai `hi-pop.js` pakelia langą į viršutinį sluoksnį,
   rodymą valdo jis, ir ši taisyklė turi pasitraukti. Be JavaScript'o atributo
   nėra, tad viskas veikia kaip anksčiau. */
:not(:hover):not(:focus):not(:focus-within) > .hi-info__pop:not([popover]) { display: none; }

/* Viršutinio sluoksnio langai. `inset: auto` ir `margin: 0` būtini: naršyklė
   atvertam `popover` pati nustato `position: fixed` ir centruoja per `inset`,
   o mums padėtį skaičiuoja `hi-pop.js`. */
[popover].hi-info__pop, [popover][data-hi-pop-panel] {
  inset: auto;
  margin: 0;
  /* Dėklo tvarka viršutiniame sluoksnyje nebeturi reikšmės, bet rėmelis ir
     šešėlis lieka iš to paties komponento. */
  overflow: auto;
  max-block-size: min(70vh, 34rem);
}
[popover]:popover-open { display: block; }

/* Ašies reikšmės. Šrifto dydis SVG'e nurodomas pikseliais, ne rem. */
.hi-chart__axis { fill: var(--muted); font-size: 10px; font-family: var(--font); }

/* Grafiko dėžė su ašių reikšmėmis aplink SVG. Y reikšmės dedamos grafiko
   VIDUJE, kairėje: atskiras ašies stulpelis atimtų ~3rem pločio iš pačios
   kreivės, o skaičiai virš prigesinto tinklelio skaitomi be jo. */
.hi-chart-box { position: relative; }
/* Reikšmė rašoma VIRŠ savo tinklelio linijos, ne ant jos. Dviguba nauda: tekstas
   nebeperkerta linijos, o apatinė reikšmė (dažnai ~96 % aukščio) nebeužlipa ant
   po grafiku esančios X ašies eilutės. Lygiuojama į liniją apačia, todėl aukštis
   nebesvarbus. */
.hi-chart-box .hi-chart__ylab {
  position: absolute; left: 3px; transform: translateY(-100%);
  margin-top: -2px;
  font-size: var(--fs-2xs); color: var(--muted);
  font-variant-numeric: tabular-nums; pointer-events: none;
  /* Plotas po kreive yra perėjimas, tad tekstas ant jo turi savo pagrindą —
     kitaip skaičius susilieja su užpildu. */
  background: var(--surface);
  padding-inline: 2px;
}

/* X ašies reikšmės po grafiku. Pirmoji lygiuojama kairėn, paskutinė dešinėn —
   centruotos jos išeitų už dėžės kraštų. */
.hi-chart__xrow { position: relative; height: 1.05rem; margin-top: var(--sp-1); }
.hi-chart__xlab {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: var(--fs-2xs); color: var(--muted);
  white-space: nowrap; line-height: 1; pointer-events: none;
}
.hi-chart__xlab:first-child { transform: none; }
.hi-chart__xlab:last-child { transform: translateX(-100%); }

@media (max-width: 639px) {
  .hi-chart { height: 200px; }
}

/* ---- Lentelė -----------------------------------------------------------
   VIENA. Plati lentelė visada gyvena .hi-scroll-x viduje. */

.hi-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }

.hi-table th,
.hi-table td {
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.hi-table thead th {
  background: var(--surface-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.hi-table tbody tr:last-child td { border-bottom: 0; }
.hi-table tbody tr:hover { background: var(--surface-hover); }

/* Dvieilė ląstelė: pagrindinis dalykas ir jo paaiškinimas vienoje vietoje. */
.hi-cell-2 { display: flex; flex-direction: column; gap: 2px; }
.hi-cell-2 small { color: var(--muted); }

/* Lentelė, kuri telefone virsta kortelėmis.
 *
 * Vienuolika stulpelių mažame ekrane netelpa jokiu būdu, o slinkti šonu per
 * vienuolika — žmogus pameta, kuri eilutė kurioje vietoje. Todėl eilutė tampa
 * kortele: stulpelio pavadinimas atsiranda prieš reikšmę iš `data-label`.
 *
 * Žymėjime reikia dviejų dalykų:
 *   - kiekvienam <td> — data-label="Stulpelio pavadinimas";
 *   - svarbiausiai ląstelei (aprašymui, pavadinimui) — klasė hi-table__lead:
 *     ji tampa kortelės antrašte per visą plotį, be etiketės.
 * Darbastalyje niekas nesikeičia — lentelė lieka lentele.
 */
@media (max-width: 639px) {
  /* Ta pati priežastis kaip prie `@container`: lentelės dėžė privalo nustoti
     būti lentele, kitaip kortelių reikšmės iškrenta už ekrano. */
  .hi-table--cards, .hi-table--cards tbody { display: block; }
  .hi-table--cards thead { display: none; }

  .hi-table--cards tbody tr {
    display: block;
    margin-bottom: var(--sp-3);
    padding: var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
  }

  .hi-table--cards tbody tr:hover { background: var(--surface); }

  .hi-table--cards tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-3);
    padding: .15rem 0;
    border: 0;
    text-align: right;
  }

  .hi-table--cards tbody td::before {
    content: attr(data-label);
    flex: none;
    color: var(--muted);
    font-size: var(--fs-xs);
    text-align: left;
  }

  /* Tuščia ląstelė kortelėje yra tik triukšmas. */
  .hi-table--cards tbody td:empty { display: none; }

  .hi-table--cards tbody td.hi-table__lead {
    display: block;
    margin-bottom: var(--sp-2);
    text-align: left;
    font-weight: var(--fw-bold);
  }

  .hi-table--cards tbody td.hi-table__lead::before { content: none; }
}

/* ---- Medis (hierarchinis sąrašas) --------------------------------------
   Sąrašas, kurio eilutės turi gylį: kategorija → subkategorija → dar giliau.
   `.hi-table` tam netinka — ji yra `<table>`, o čia kiekviena eilutė yra
   nuoroda, ją galima suskleisti, paslėpti ir įkelti per htmx.

   Kodėl tai atsirado bibliotekoje: iki šiol kiekvienas toks sąrašas buvo
   perrašomas puslapio `<style>` bloke iš naujo, ir bendro stiliaus paprastam
   sąrašui tiesiog nebuvo.

   Stulpelius nurodo pats puslapis — jie priklauso nuo turinio:
       <div class="hi-tree" style="--cols: minmax(0,1fr) 8rem 5rem 1.6rem">
   Eilutės gylis — `--d` (0, 1, 2, …). Spalvinė gaida — `--tone`.

   Gylis koduojamas VIENU dalyku: atitraukimu su vertikaliu bėgiu. Anksčiau jį
   kodavo keturi vienu metu (atitraukimas, taškas, fono atspalvis ir kitas
   šrifto dydis), ir sąrašas atrodė dryžuotas, nors informacijos nepadaugėjo. */

.hi-tree { --cols: minmax(0, 1fr); --tone: var(--accent); display: flex; flex-direction: column; }

.hi-tree__head,
.hi-tree__row {
  display: grid;
  grid-template-columns: var(--cols);
  align-items: center;
  gap: .2rem .9rem;
  padding-left: calc(var(--sp-1) + var(--d, 0) * 1.1rem);
}

.hi-tree__head {
  padding-block: 0 var(--sp-1);
  padding-right: var(--sp-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}

.hi-tree__head > :first-child { text-align: left; }

.hi-tree__row {
  position: relative;
  padding-block: .3rem;
  padding-right: var(--sp-2);
  cursor: pointer;
}

.hi-tree__row:hover { background: var(--surface-hover); }
.hi-tree__row[hidden] { display: none; }

/* Linija tik po viršutinio lygio eilute. Linija po KIEKVIENA eilute paverčia
   keturiasdešimties eilučių sąrašą tvora: brūkšnių tiek pat, kiek duomenų. */
.hi-tree__row--top + .hi-tree__row--top,
.hi-tree__row--sub + .hi-tree__row--top { border-top: 1px solid var(--line); }

/* Vertikalus bėgis — vienintelis gylio ženklas. Eilutės viena prie kitos, tad
   atkarpos susilieja į ištisinę liniją, rodančią, kam subkategorija priklauso. */
.hi-tree__row--sub::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: calc(var(--sp-1) + (var(--d, 1) - 1) * 1.1rem + .5rem);
  width: 1px;
  background: var(--line-strong);
}

.hi-tree__row--flash { outline: 2px solid var(--accent); outline-offset: -2px; }

.hi-tree__lead { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; }

.hi-tree__caret {
  flex: 0 0 1.1rem;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--tone);
  font-size: var(--fs-xs);
  line-height: 1;
  cursor: pointer;
  transition: transform .12s;
}

button.hi-tree__caret:hover { background: var(--surface-2); }
.hi-tree__row--open > .hi-tree__lead > .hi-tree__caret { transform: rotate(90deg); }

.hi-tree__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: var(--fs-sm);
}

.hi-tree__row--sub > .hi-tree__lead > .hi-tree__label { font-weight: var(--fw-normal); color: var(--muted); }
.hi-tree__row--top > .hi-tree__lead > .hi-tree__label { font-weight: var(--fw-bold); }

.hi-tree__tag {
  flex: 0 0 auto;
  padding: 0 .3rem;
  border: 1px solid var(--tone);
  border-radius: var(--r-sm);
  font-size: var(--fs-2xs);
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--tone);
}

/* Skaičius ir matas dviejuose takeliuose: mato plotis fiksuotas, tad kablelis
   lieka toje pačioje vietoje ir tada, kai viena eilutė yra EUR/t, o kita EUR/m³.
   Dešinysis lygiavimas be to skaičius sulygiuotų pagal mato galą, ne pagal skaitmenis. */
.hi-tree__num {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--ink);
  white-space: nowrap;
  text-align: right;
}

.hi-tree__num--weak { color: var(--muted); font-weight: var(--fw-normal); }
/* Mato takelis turi mažiausią plotį, kad kablelis liktų toje pačioje vietoje
   ir tada, kai viena eilutė yra EUR/t, o kita EUR/m³. Kai mato nėra, takelio
   irgi nėra — skaičius lieka prie dešiniojo krašto. */
.hi-tree__unit {
  min-width: 2.6em;
  padding-left: .3em;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-normal);
  color: var(--muted);
  text-align: left;
}

.hi-tree__meta {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-2xs);
  color: var(--muted);
  white-space: nowrap;
  text-align: right;
}

/* Kainos pokytis PIRKĖJO akimis: brangsta — raudona, pinga — žalia. */
.hi-tree__delta {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  white-space: nowrap;
  text-align: right;
  color: var(--muted);
}

.hi-tree__delta--up { color: var(--danger); }
.hi-tree__delta--down { color: var(--success); }
.hi-tree__delta--flat { color: var(--muted); }

/* ---- Skirtukai ir įrankių juosta --------------------------------------- */

/* Segmentinė juosta: kiekvienas skirtukas — atskiras segmentas ant bendro
   takelio, aktyvusis iškeltas ant paviršiaus su akcento rėmeliu. Aktyvumą
   žymi aria-selected (arba .active kaip atsarga senoms vietoms). */
.hi-tabs {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow-x: auto;
}

.hi-tab {
  min-height: calc(var(--touch) - 2 * var(--sp-1));
  padding: 0 var(--sp-3);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  color: var(--muted);
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  white-space: nowrap;
}

.hi-tab:hover { color: var(--ink); }

.hi-tab[aria-selected="true"],
.hi-tab.active {
  color: var(--accent-text);
  background: var(--surface);
  border-color: var(--accent-border);
}

.hi-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}

/* Juostos pavadinimas („Subkategorijos:") ir jos dešinysis kampas. Abu dažni,
   tad gyvena čia, o ne kiekviename puslapyje iš naujo. */
.hi-toolbar__label {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.hi-toolbar__end { margin-inline-start: auto; display: flex; gap: var(--sp-1); align-items: center; }

/* Filtro jungiklis. Įjungtas filtras turi matytis iš pirmo žvilgsnio. */
.hi-filter {
  min-height: 32px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  cursor: pointer;
}

/* `.on` yra tas pats, kas aria-pressed: serveryje atvaizduojami filtrai dažnai
   yra nuorodos, kurioms aria-pressed netinka, o būsena vis tiek turi matytis. */
.hi-filter[aria-pressed="true"],
.hi-filter.on {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-text);
}

/* Smulkesnis filtras — kai jų eilėje daug, pvz. laikotarpio pasirinkimas. */
.hi-filter--sm { min-height: 28px; padding: 0 var(--sp-2); }

/* ---- Laukas ------------------------------------------------------------ */

.hi-field { display: flex; flex-direction: column; gap: var(--sp-1); }
.hi-field__label { font-size: var(--fs-sm); color: var(--muted); font-weight: var(--fw-medium); }

.hi-input,
.hi-select,
.hi-textarea {
  min-height: var(--touch);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-base);
  width: 100%;
}

.hi-textarea { min-height: 8rem; resize: vertical; line-height: 1.5; }
.hi-input:focus, .hi-select:focus, .hi-textarea:focus { border-color: var(--accent); }
.hi-field__error { font-size: var(--fs-sm); color: var(--danger); }

/* ---- Pranešimas --------------------------------------------------------
   Viena klasė. Audite HiLEX turėjo septynis skirtingus .notice. */

.hi-alert {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: var(--fs-sm);
}

.hi-alert--success { border-left-color: var(--success); background: var(--success-soft); }
.hi-alert--warn { border-left-color: var(--warn); background: var(--warn-soft); }
.hi-alert--danger { border-left-color: var(--danger); background: var(--danger-soft); }

/* ---- Puslapio antraštė -------------------------------------------------
   Pavadinimas kairėje, veiksmas ar paieška dešinėje. Siaurame ekrane
   persilaužia savaime. */

.hi-pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  margin-block: var(--sp-5) var(--sp-2);
}

.hi-pagehead > :first-child { margin: 0; }
.hi-pagehead__aside { margin-left: auto; flex: 0 1 19rem; min-width: 11rem; }

/* ---- Sekcija -----------------------------------------------------------
   Grupės antraštė: maža, didžiosiomis, su linija. Viena visoms sistemoms —
   anksčiau kiekvienas puslapis turėjo savo. */

.hi-section { margin-block: var(--sp-5) 0; }

.hi-section__title {
  margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Skaičius prie antraštės — kiek jų ten yra. Ne to paties dydžio tekstas šalia
   pavadinimo: „Gelžbetonis 10" tada skaitomas kaip vienas vardas ir lieka
   neaišku, ko dešimt. Ženkliukas pasako, kad tai kiekis, ir nekonkuruoja su
   pavadinimu. */
.hi-section__count {
  margin-left: var(--sp-2);
  display: inline-block;
  min-width: 1.5em;
  padding: .05em .4em;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-align: center;
  color: var(--muted);
  vertical-align: .1em;
}

/* Siauresnis kortelių tinklelis — rodikliams, kur jų daug ir jos kompaktiškos. */
.hi-grid--cards { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }

@media (max-width: 639px) {
  .hi-grid--cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ---- Tuščia būsena -----------------------------------------------------
   Sako, kas bus toliau, o ne „nieko nerasta". */

.hi-empty {
  padding: var(--sp-7) var(--sp-4);
  text-align: center;
  color: var(--muted);
}

.hi-empty__title { font-weight: var(--fw-bold); color: var(--ink); margin-bottom: var(--sp-1); }

/* ===========================================================================
   SPRENDIMO EKRANAS
   Rikiuojama lentelė → išskleista eilutė su grafiku → to mėnesio SF eilutės.
   Trys gylio pakopos viename ekrane: „kas negerai", „kodėl", „iš ko sudaryta".
   =========================================================================== */

/* ---- Pagalbinės ---------------------------------------------------------- */

/* Tik ekrano skaitytuvui: dekoratyvių ženklų reikšmė ir grafiko duomenys. */
.hi-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Tekstinis mygtukas: veiksmas be rėmelio. Paspaudimo laukas — per ::after,
   kad matomas dydis liktų mažas, o pirštui užtektų viso lauko. */
.hi-link {
  position: relative;
  border: 0; background: none; padding: 0;
  font: inherit; font-size: var(--fs-xs);
  color: var(--accent-text);
  cursor: pointer;
}
.hi-link::after {
  content: "";
  position: absolute; inset: 50% auto auto 50%;
  width: 100%; min-width: var(--touch); height: var(--touch);
  transform: translate(-50%, -50%);
}
.hi-link:hover { text-decoration: underline; }
.hi-link--mut { color: var(--muted); }

/* Eilutė, kurios pradžioje turinys, o gale veiksmai. Pakeičia tuščius
   tarpiklius su iterptiniu margin-left: auto. */
.hi-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-3); }
.hi-head__end { margin-left: auto; display: flex; align-items: baseline; gap: var(--sp-3); }

/* Pokytis tekstu. Spalva sako REIKŠMĘ, ne kryptį: rodikliui kilti dažniausiai
   gerai, kainai — blogai, tad kryptį į reikšmę verčia puslapis. */
.hi-d { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); }
.hi-d--up { color: var(--danger); }
.hi-d--down { color: var(--success); }
.hi-d--flat { color: var(--muted); }

/* Segmentinis jungiklis: laikotarpis, tema, vaizdas. */
/* `flex-wrap`: septyni laikotarpiai siaurame ekrane netelpa, o `nowrap` juostą
   išstumdavo 509 px į 379 px vietą — pusė pasirinkimų būdavo už krašto. */
.hi-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: clip; }
.hi-seg button {
  border: 0; border-left: 1px solid var(--line-strong);
  background: none; font: inherit; font-size: var(--fs-xs);
  color: var(--muted);
  padding: var(--sp-1) var(--sp-3);
  min-height: 32px;
  cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s;
}
.hi-seg button:first-child { border-left: 0; }
.hi-seg button:hover { background: var(--surface-hover); color: var(--ink); }
.hi-seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); font-weight: var(--fw-medium); }

/* Įrankių eilė virš lentelės: kas rodoma, kaip rikiuota, ką galima nuimti. */
.hi-tools { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-3); }
/* Kortelėje be vidinio užpildo įrankių eilė savo paraštes neša pati — kitaip
   ji prilimptų prie krašto, nors juosta virš jos ir lentelė po ja turi savo. */
.hi-card--flush > * > .hi-tools,
.hi-card--flush > .hi-tools { padding: var(--sp-3) var(--sp-4) var(--sp-2); }
.hi-tools__h { margin: 0; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: var(--fw-bold); }
.hi-tools__note { font-size: var(--fs-xs); color: var(--muted); }
.hi-tools__n { font-size: var(--fs-xs); color: var(--muted); margin-left: auto; }
/* Telefone stulpelių antraščių nesimato, tad rikiavimui reikia savo valdiklio. */
.hi-tools__sort { display: none; margin-left: auto; }

.hi-tag { display: inline-block; padding: 0 .4em; border: 1px solid var(--line-strong); border-radius: var(--r-pill); font-size: var(--fs-2xs); font-weight: var(--fw-medium); color: var(--muted); white-space: nowrap; }
/* Žymė, kuri yra veiksmas. „Nesugretinta" kaip užrašas buvo klausimas be
   atsakymo: matai, kad indekso nėra, bet priskirti jo negali. Ta pati forma,
   akcento spalva — vienintelis ženklas, kad čia galima paspausti. */
.hi-tag--act {
  border-color: var(--accent-border); color: var(--accent-text);
  background: none; font: inherit; font-size: var(--fs-2xs);
  font-weight: var(--fw-medium); padding: .1em .5em; cursor: pointer;
}
.hi-tag--act:hover { background: var(--accent-soft); }

/* ---- Stebimų juosta -----------------------------------------------------
   Pažymėtos kategorijos puslapio viršuje. Be jos žvaigždutė buvo mygtukas be
   pasekmės: pažymėjus ekrane nepakisdavo niekas. Žodžio „stebima" nėra —
   ikona jį pasako, o ekrano skaitytuvui lieka antraštė. */
.hi-watch {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.hi-watch__h { margin: 0; font-size: var(--fs-base); line-height: 1; color: var(--accent); }
.hi-watch__c {
  display: flex; align-items: baseline; gap: var(--sp-2);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); padding: .15rem var(--sp-2);
  font: inherit; font-size: var(--fs-xs); color: inherit; cursor: pointer;
}
.hi-watch__c:hover { border-color: var(--accent-border); background: var(--surface-hover); }
.hi-watch__c[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); }
.hi-watch__n { font-weight: var(--fw-medium); }
.hi-watch__v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hi-watch__v small { font-family: var(--font); font-size: var(--fs-2xs); color: var(--muted); margin-left: .25em; }

/* ---- Rodiklių juostos skydas --------------------------------------------
   Ta pati `hi-metricbar`, tik su skirtukais ir paspaudžiamais blokais: KPI
   eilė nėra atskiras komponentas, o tos pačios juostos vaidmuo. */
.hi-metricbar--panel { gap: 0; border-bottom: 1px solid var(--line); }
.hi-metricbar--panel > .hi-metric { padding: var(--sp-3) var(--sp-4); border-inline-start-color: var(--line); }
.hi-metricbar--panel > .hi-metric:first-child { padding-inline-start: var(--sp-4); }
/* Įjungtas „%" — ta pati kalba kaip `hi-seg` pasirinkimas, ne atskira spalva. */
.hi-btn--icon.on { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-border); }

.hi-metric--act {
  text-align: start; background: none; border: 0;
  border-inline-start: 1px solid var(--line);
  font: inherit; color: inherit; cursor: pointer;
  transition: background .12s;
}
.hi-metric--alert .hi-metric__value { color: var(--danger); }
.hi-metric--on { background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--accent); }
/* Specifiškumas: įjungtas filtras privalo nugalėti hover, kitaip užvedus pelę
   ant aktyvaus bloko jis atrodo išjungtas. */
.hi-metric--act:hover { background: var(--surface-hover); }
.hi-metric--act.hi-metric--on:hover { background: var(--accent-soft); }

/* ---- Rikiuojama lentelė su išskleidžiama eilute -------------------------- */

/* `table-layout: fixed` yra BŪTINAS, ne pasirinkimas.

   Su numatytuoju `auto` langelio plotį diktuoja jo turinys, todėl išskleista
   eilutė su grafiku, subkategorijų kortelėmis ir sąskaitų eilučių lentele
   išplėsdavo VISĄ lentelę už kortelės ribų — ir vidinis `overflow-x: auto`
   nieko nedarydavo, nes jam reikia apibrėžto pločio. `max-width: 0` ant
   langelio šito neišsprendžia: auto algoritmas jo nepaiso.

   Su `fixed` lentelės plotis yra 100 % konteinerio, stulpelių pločius nurodo
   puslapis (`<colgroup>`), o platus turinys slenka savo lange. Papildomai
   dingsta stulpelių šokinėjimas tarp perpiešimų. */
.hi-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
/* `vertical-align: top` — kai pavadinimas lūžta į kelias eilutes (telefone tai
   nuolat), per vidurį lygiuojamas skaičius atsiduria ties antrąja eilute ir
   atrodo kaip užlipęs ant teksto. */
.hi-tbl th, .hi-tbl td { padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--line); text-align: right; vertical-align: top; }
.hi-tbl th:first-child, .hi-tbl td:first-child { text-align: left; padding-inline-start: var(--sp-4); }
.hi-tbl th:last-child, .hi-tbl td:last-child { padding-inline-end: var(--sp-4); }
.hi-tbl thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface);
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: var(--fw-bold); white-space: nowrap;
  box-shadow: inset 0 -1px 0 var(--line);
}
.hi-tbl thead th button {
  display: inline-flex; align-items: center; gap: 3px;
  border: 0; background: none; font: inherit; color: inherit;
  padding: var(--sp-1) 0; min-height: 32px; cursor: pointer;
}
.hi-tbl thead th button:hover { color: var(--ink); }
/* Ženklas „rikiuojama" matomas ir neaktyviame stulpelyje — kitaip niekas
   nesupranta, kad stulpelį galima rikiuoti. Jis yra VIENINTELIS tai sakantis
   ženklas, tad jam galioja 3:1, o ne „blanki dekoracija": `opacity: .55` ant
   --muted duodavo 1,80:1. */
.hi-tbl__mark { font-size: .85em; color: var(--muted); }
.hi-tbl thead th[aria-sort="ascending"] button,
.hi-tbl thead th[aria-sort="descending"] button { color: var(--ink); }
.hi-tbl thead th[aria-sort="ascending"] .hi-tbl__mark,
.hi-tbl thead th[aria-sort="descending"] .hi-tbl__mark { color: var(--accent-text); }

/* Eilutė lieka `role=row`; atidaro MYGTUKAS pirmame langelyje. `role=button`
   ant eilutės sugriauna lentelės semantiką ekrano skaitytuvui. */

/* ---- Hierarchija sąraše -------------------------------------------------
   Sąrašas yra medis: matomas viršutinis lygis, o atvėrus kategoriją pasirodo
   TIK jos subkategorijos. Plokščias sąrašas iš visų lygių vienu metu (arba
   šimtai eilučių, iškrentančių atvėrus sritį) nepasako, kas kam priklauso.

   Gylį koduoja VIENAS dalykas — atitraukimas su vertikaliu bėgiu. Ne keturi
   ženklai vienu metu: keturi tos pačios informacijos ženklai padaugina ne
   aiškumo, o dryžių. */
.hi-tbl__lead { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1); }
.hi-tbl td.hi-tbl__lead { padding-inline-start: calc(var(--sp-4) + var(--d, 0) * 1.15rem); }
/* Bėgis prie atitraukto lygio — kad atitraukimas skaitytųsi kaip priklausymas,
   o ne kaip atsitiktinis tarpas. Viršutiniam lygiui jo nėra: jis nieko neseka. */
.hi-tbl__lead::before {
  content: ""; position: absolute; inset-block: 0;
  inset-inline-start: calc(var(--sp-4) + (var(--d, 0) - 1) * 1.15rem + .35rem);
  width: 1px; background: var(--line);
}
/* Trikampis yra SAVAS mygtukas: atveria subkategorijas, kai pavadinimas atveria
   grafiką. Du veiksmai — du taikiniai; vienas mygtukas abiem reikštų, kad
   viena funkcija nepasiekiama. */
.hi-tbl__caret {
  position: relative; flex: none; width: 1.15rem;
  border: 0; background: none; padding: 0;
  font: inherit; line-height: 1; color: var(--accent-text); cursor: pointer;
}
.hi-tbl__caret > span { display: inline-block; transition: transform .12s; }
.hi-tbl__caret[aria-expanded="true"] > span { transform: rotate(90deg); }
/* Bakstelėjimo taikinys — 32 px, nors ženklas mažas. */
.hi-tbl__caret::after { content: ""; position: absolute; inset: -8px -4px; }
.hi-tbl__caret--none { cursor: default; }
.hi-tbl__row { transition: background .1s; }
.hi-tbl__row td { scroll-margin-top: 2.4rem; }   /* lipni antraštė neuždengia */
/* Viršutinis lygis — tikroji kategorija („04 Konstruktyvas"). Stipresnė linija
   virš jo atskiria sritis be atskiros antraštės eilutės. Bėgio jam nėra: jis
   nieko neseka. */
.hi-tbl__row--top > td { border-top: 1px solid var(--line-strong); }
.hi-tbl__row--top .hi-tbl__nm { font-weight: var(--fw-bold); }
.hi-tbl__row--top .hi-tbl__lead::before { display: none; }
.hi-tbl__row:hover { background: var(--surface-hover); }
.hi-tbl__row:hover .hi-tbl__go,
.hi-tbl__row:focus-within .hi-tbl__go { opacity: 1; transform: none; }
.hi-tbl__row--open { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.hi-tbl__row--open td { border-bottom-color: transparent; }
/* Specifiškumas: „atverta" privalo nugalėti hover, kitaip tarp eilutės ir po
   ja esančio skydo atsiranda matoma siūlė. */
.hi-tbl__row--open:hover { background: var(--surface-2); }

.hi-tbl__open {
  display: flex; align-items: baseline; gap: var(--sp-2);
  flex: 1 1 8rem; min-width: 0;
  border: 0; background: none; padding: var(--sp-1) 0;
  font: inherit; color: inherit; text-align: start; cursor: pointer;
}
.hi-tbl__nm { font-weight: var(--fw-medium); }
.hi-tbl__go {
  margin-left: auto; color: var(--accent-text); font-size: var(--fs-xs);
  opacity: 0; transform: translateX(-3px); white-space: nowrap;
  transition: opacity .12s, transform .12s;
}
.hi-tbl__p { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); white-space: nowrap; }
.hi-tbl__p small { font-family: var(--font); font-weight: var(--fw-normal); font-size: var(--fs-2xs); color: var(--muted); margin-left: .3em; }
.hi-tbl__n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-2xs); color: var(--muted); white-space: nowrap; }
/* Telefone paslėpti stulpeliai persikelia ČIA, o ne į horizontalų slankiklį:
   slankiklyje žmogus pameta, kurioje eilutėje yra. Blokas stovi UŽ mygtuko
   ribų, kad mygtuko prieinamas vardas neišpamptų iki viso sakinio. */
.hi-tbl__sub { display: none; font-size: var(--fs-2xs); color: var(--muted); }

/* Išskleista eilutė. Be savo rėmelio: kortelė kortelėje yra klaida.
   Priklausomybę rodo kairysis akcento bėgis, tęsiantis eilutės bėgį. */
/* Plotį sulaiko `table-layout: fixed` ant pačios lentelės (žr. `.hi-tbl`), o ne
   triukas su langeliu: `max-width: 0` auto algoritme neveikia, ir skydas vis
   tiek išeidavo už kortelės ribų. */
.hi-stage > td { padding: 0; background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
/* `grid-template-columns: minmax(0, 1fr)` yra BŪTINAS.

   Grid stulpelis be aiškaus pločio yra `auto`, o tai reiškia MAX-CONTENT: toks
   stulpelis išsiplečia iki plačiausio vaiko ir tėvo pločio nepaiso. Čia dėl to
   skydas būdavo 1579 px pločio 1126 px langelyje — grafikas, subkategorijų
   kortelės, legenda ir sąskaitų eilučių lentelė išeidavo už kortelės ribų, nors
   pats langelis jau buvo teisingo pločio. `minmax(0, 1fr)` stulpelį apriboja
   konteineriu, ir vidiniai `overflow-x: auto` pagaliau turi kur slinkti. */
.hi-stage__in {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3); min-width: 0;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}
/* Ta pati priežastis vienu lygiu giliau: flex stulpelio elementai nesusispaudžia
   žemiau savo min-content pločio, kol to aiškiai neleidžiama. */
.hi-stage__in > *, .hi-panel > * { min-width: 0; }
/* Pilnas plotis nuo krašto iki krašto: blokas, turintis savo vidines paraštes
   (eilučių lentelė), skydo paraštėse atsitraukdavo dukart. */
.hi-bleed { margin-inline: calc(var(--sp-4) * -1); }
.hi-stage__head { padding-top: var(--sp-3); }
.hi-stage__head h3 { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: -.01em; }
.hi-stage__big { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: 1; letter-spacing: -.02em; }
.hi-stage__big small { font-family: var(--font); font-size: var(--fs-xs); font-weight: var(--fw-normal); color: var(--muted); margin-left: .3em; }

/* ---- Kainos eiga eilutėje (mikrografikas) --------------------------------
   Skalė BENDRA visoms eilutėms ir seka laikotarpio langą — kiekviena savo
   skalėje atrodo įspūdingai ir nieko nesako. Nukirpimas žymimas toje vietoje,
   kur nukirpta, kitaip +88 % ir +25 % atrodo vienodai. */
.hi-trend { position: relative; display: block; width: 84px; height: 24px; margin-left: auto; }
.hi-trend svg { display: block; width: 100%; height: 100%; }
.hi-trend__base { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.hi-trend__l { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hi-trend__l--up { stroke: var(--danger); }
.hi-trend__l--down { stroke: var(--success); }
.hi-trend__cut { position: absolute; top: -2px; transform: translateX(-50%); font-size: 11px; line-height: 1; color: var(--danger); }
.hi-trend__cut--down { top: auto; bottom: -2px; color: var(--success); }

/* ---- Atotrūkio juostelė --------------------------------------------------
   Du tinklelio takeliai: juosta ir skaičius. Uždėtas ant juostos skaičius būtų
   raudonas ant raudono — tas pats tonas, kontrastas ~1:1. Skalė seka langą, o
   ties riba stovi plona žymė: be jos „normalus svyravimas" ir „viršija ribą"
   skiriasi tik spalva. */
.hi-gap { display: grid; grid-template-columns: 1fr 4.2rem; align-items: center; gap: var(--sp-2); margin-left: auto; width: 11rem; }
.hi-gap__t { position: relative; height: 12px; }
.hi-gap__ax { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line-strong); }
/* Reikšmingumo ribos žymė NEŠA informaciją (antraštės paaiškinimas apie ją
   kalba), tad jai galioja 3:1 — su `opacity: .6` ji duodavo 1,81:1. */
.hi-gap__lim { position: absolute; top: 1px; bottom: 1px; width: 1px; background: var(--muted); }
/* Mažiausias matomas plotis: 0,3 pp juosta būtų 0,75 px ir nebūtų nupiešta. */
.hi-gap__b { position: absolute; top: 1px; height: 10px; min-width: 2px; border-radius: 1px; background: var(--line-strong); }
.hi-gap__b--up { background: var(--danger); }
.hi-gap__b--down { background: var(--success); }
.hi-gap__v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-2xs); text-align: right; }
.hi-gap__over { position: absolute; top: 0; font-size: var(--fs-2xs); line-height: 12px; color: var(--danger); }

/* ---- Mažieji grafikai (small multiples) ---------------------------------- */
.hi-smalls { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--sp-2); }
.hi-small { display: block; width: 100%; text-align: start; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); padding: var(--sp-2); font: inherit; color: inherit; cursor: pointer; transition: border-color .12s, background .12s; }
.hi-small:hover { border-color: var(--accent-border); background: var(--surface-hover); }
.hi-small[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); cursor: default; }
.hi-small__n { font-size: var(--fs-xs); font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hi-small .hi-trend { width: 100%; margin: 2px 0; }
/* Kaina ir pokytis — VISADA dvi eilutes, ne „kol telpa". Su vienoje eileje
   besilauzianciomis ir nesilauzianciomis kortelemis greta (skiriasi vieneto
   ir procento ilgis) dvylika vienodu objektu atrodo kaip skirtingi. Pokytis
   po kaina: kaina yra atsakymas, pokytis — kontekstas. */
.hi-small__r { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.hi-small__v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); font-weight: var(--fw-bold); white-space: nowrap; }

/* ---- SF eilutės (gilyn nuo grafiko taško) --------------------------------
   `overflow-x: auto` BŪTINAS: keli nowrap stulpeliai telefone netelpa, o
   kortelė yra `overflow: clip`, tad be savo slankiklio paskutinis stulpelis
   tiesiog dingtų. */
.hi-lines { border-top: 2px solid var(--accent); background: var(--surface); overflow-x: auto; }
.hi-lines__h { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }
.hi-lines table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.hi-lines th, .hi-lines td { padding: var(--sp-1) var(--sp-3); text-align: right; border-top: 1px solid var(--line); white-space: nowrap; }
.hi-lines th:first-child, .hi-lines td:first-child { text-align: left; }
.hi-lines th { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: var(--fw-bold); }
.hi-lines td.n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.hi-lines tbody tr:hover { background: var(--surface-hover); }
.hi-lines__sum td { background: var(--surface-2); font-weight: var(--fw-bold); }
.hi-lines__out { color: var(--warn); }

@media (max-width: 700px) {
  /* Slepiami TIK langeliai. `display: none` ant `<col>` yra nestandartinis ir
     Chrome dėl jo stulpelio plotį paskirsto nenuspėjamai: pavadinimų stulpeliui
     443 px lentelėje likdavo 46 px, nors paslėptų stulpelių plotis jau buvo 0.
     Stulpelio plotį nuima `<col>`, langelius — `display`. */
  .hi-tbl th.sm-hide, .hi-tbl td.sm-hide { display: none; }
  .hi-tbl col.sm-hide { width: 0; }
  .hi-tbl__sub { display: block; }
  .hi-tools__sort { display: block; }
  .hi-tools__n { display: none; }
  /* Vienstulpeliame tinklelyje kairysis skirtukas kabo be paskirties. */
  .hi-metricbar--panel > .hi-metric { border-inline-start: 0; border-top: 1px solid var(--line); }
  .hi-metricbar--panel > .hi-metric:first-child { border-top: 0; }
}

/* ---- Šoninis meniu ------------------------------------------------------
   Antraštės juosta viršuje atima ~70 px aukščio kiekviename ekrane, o aukštis
   duomenų sistemose yra brangesnis už plotį: lentelėje tai keturios eilutės.
   Šoninis bėgis tą vietą grąžina ir kartu telpa daugiau punktų, nei telpa
   horizontalioje juostoje.

   Bėgis yra `position: fixed`, o turinys lieka įprastame dokumento sraute —
   ne tinklelyje. Priežastis praktinė: tinklelio stulpelis su savo slinktimi
   sugriauna `position: sticky` lentelės antraštes, ir tai atsitinka tyliai.

   Suskleistas jis yra NUMATYTASIS darbo ekranuose: pirkimų lentelei reikia
   ~960 px stulpeliams, ir 1280 px ekrane 228 px bėgis paliktų per mažai. */
.hi-nav {
  position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 40;
  width: var(--nav-w, 13.5rem);
  display: flex; flex-direction: column;
  background: var(--surface-2);
  border-inline-end: 1px solid var(--line);
  transition: width .14s;
}
.hi-nav__head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3);
  border-bottom: 1px solid var(--line);
  min-height: 3.25rem;
}
/* Sistemos vardas: „Hi“ įprasto storio, sistemos dalis („FIN“, „TDP“) pusjuodė —
   pabrėžiama tai, kuo sistemos skiriasi, ne bendras priešdėlis. 0.8.7. */
.hi-nav__logo {
  font-weight: var(--fw-normal); font-size: var(--fs-lg);
  letter-spacing: -.03em; color: var(--heading, var(--ink));
  text-decoration: none; white-space: nowrap; overflow: hidden;
}
/* Sistemos kodas — sistemos spalva (`data-sys` ant `.hi-nav`, žr. tokens.css);
   be jos — akcentas. 0.9.0 */
.hi-nav__sys { color: var(--sys-text, var(--accent-text)); font-weight: var(--fw-bold); }
/* Logotipas — dvi nuorodos: „Hi" (`__mark`) veda į portalą, sistemos kodas
   (`__sys`) — į tos sistemos pradžią. Pabraukimas tik ant tos pusės, virš
   kurios pelė, tad viena eilutė elgiasi kaip du mygtukai. Tarpo tarp jų
   nėra: tai vienas žodis „HiFIN". */
.hi-nav__logo a { color: inherit; text-decoration: none; }
.hi-nav__logo a.hi-nav__sys { color: var(--sys-text, var(--accent-text)); }
.hi-nav__logo a:hover { text-decoration: underline; }
/* Suskleistame bėgyje kodas nesitelpa, tad „Hi" tampa sistemos spalvos
   kvadratu — vienintelis ženklas, pagal kurį suskleistos sistemos skiriasi.
   Išskleidus kvadratas dingsta, ir „Hi" vėl paprastas tekstas. */
.hi-nav--mini .hi-nav__mark {
  display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: var(--r-sm);
  background: var(--sys, var(--accent)); color: var(--sys-on, var(--accent-contrast));
  font-size: var(--fs-sm); letter-spacing: 0; line-height: 1;
}

/* Vartotojas bėgio poraštėje: inicialai ikonos vietoje, vardas ir rolė tekste.
   Rolė yra antra eilutė (`small`), o ne skliausteliai prie vardo: suskleistame
   bėgyje jos nesimato, o išskleistame ji neplečia bėgio. */
.hi-nav__user .hi-nav__ico {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  letter-spacing: .02em; color: var(--accent-text, var(--accent));
}
.hi-nav__txt small {
  display: block; font-size: var(--fs-2xs); color: var(--muted);
  line-height: 1.2;
}
/* Smeigtukas: matomas tik išskleistame bėgyje (žr. 0.9.2
   žemiau). Užsmeigtas laiko bėgį platų.

   `padding: 0` ir `box-sizing` privalomi (0.9.1): sistemų bazinė `button`
   taisyklė (HiFIN — `padding: .5rem 1.1rem`) 28 px mygtuke ikonai palikdavo
   0 px, ir suskleistame bėgyje matėsi tuščias rėmelis. Ikona fiksuoto dydžio,
   kad tinklelis jos nesuspaustų. */
.hi-nav__toggle {
  margin-inline-start: auto; flex: none;
  width: 28px; height: 28px; display: grid; place-items: center;
  box-sizing: border-box; padding: 0; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: none; color: var(--muted); cursor: pointer;
  font-size: var(--fs-sm); line-height: 1;
}
.hi-nav__toggle > svg { flex: none; width: 15px; height: 15px; }
.hi-nav__toggle:hover { color: var(--accent); border-color: var(--accent-border); }

.hi-nav__body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--sp-2) 0; }
.hi-nav__group {
  padding: var(--sp-3) var(--sp-3) var(--sp-1);
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); font-weight: var(--fw-bold); white-space: nowrap;
}
.hi-nav__item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  color: var(--muted); text-decoration: none; font-size: var(--fs-sm);
  border-inline-start: 2px solid transparent; white-space: nowrap;
}
.hi-nav__item:hover { color: var(--ink); background: var(--surface-hover); }
.hi-nav__item[aria-current="page"] {
  color: var(--ink); border-inline-start-color: var(--accent);
  background: var(--accent-soft); font-weight: var(--fw-medium);
}
/* Ikona yra vienintelis dalykas, likęs suskleistame bėgyje, tad jai reikia
   fiksuotos vietos — kitaip punktai šokinėtų perjungiant. */
.hi-nav__ico { flex: none; width: 1.25rem; text-align: center; font-size: var(--fs-base); }
.hi-nav__txt { overflow: hidden; text-overflow: ellipsis; }
.hi-nav__foot { border-top: 1px solid var(--line); padding: var(--sp-2) 0; }

/* Suskleista: lieka tik ikonos. Tekstas slepiamas `display: none`, o ne
   pločiu — kitaip jis liktų slinkties konteineryje ir tampytų bėgį. */
.hi-nav--mini { --nav-w: 3.5rem; }
.hi-nav--mini .hi-nav__txt,
.hi-nav--mini .hi-nav__group,
.hi-nav--mini .hi-nav__sys { display: none; }
.hi-nav--mini .hi-nav__item { justify-content: center; padding-inline: 0; }
.hi-nav--mini .hi-nav__head { padding-inline: var(--sp-2); flex-direction: column; gap: var(--sp-2); }
/* Suskleistas bėgis išsiskleidžia UŽVEDUS — permatomai virš turinio, turinys
   nejuda (bėgis ir taip fixed). Smeigtukas pasirodo tik čia; jį užsmeigus
   (klasė --mini nuimama) bėgis lieka platus ir atstumia turinį. Klaviatūrai
   tą patį daro focus-within. Neužsmeigtas smeigtukas gulsčias — užuomina,
   kad paleidus pelę meniu susiskleis.

   0.8.3 šis išsiskleidimas buvo išimtas, nes HiFIN'e bėgis atrodė lipantis ant
   kategorijų stulpelio. 0.8.4 grąžintas: HiTDP su tuo pačiu 320 px stulpeliu
   prie pat bėgio elgiasi nepriekaištingai, tad problema buvo ne užvedimas, o
   tai, kad HiFIN suskleidimą uždėdavo per vėlai (po pirmo atvaizdavimo) ir
   bėgis likdavo netyčia užsmeigtas. Elgsena, kuri etalone veikia, nekeičiama —
   taisoma sistema, kuri nuo etalono atsiliko. */
@media (min-width: 901px) {
  /* Smeigtukas SUSKLEISTAME bėgyje nerodomas (0.9.2, Edgaro sprendimas): ten
     galvutėje lieka tik sistemos spalvos „Hi“ kvadratas. Smeigtukas atsiranda
     išskleidus bėgį užvedimu ar klaviatūra ir stovi eilės gale. 0.8.5–0.9.1 jis
     buvo matomas ir suskleistame — po logotipu, kaip antras kvadratas. */
  .hi-nav--mini .hi-nav__toggle { display: none; }
  .hi-nav--mini:hover,
  .hi-nav--mini:focus-within { --nav-w: 13.5rem; box-shadow: var(--sh-lift); }
  .hi-nav--mini:hover .hi-nav__txt,
  .hi-nav--mini:hover .hi-nav__group,
  .hi-nav--mini:hover .hi-nav__sys,
  .hi-nav--mini:focus-within .hi-nav__txt,
  .hi-nav--mini:focus-within .hi-nav__group,
  .hi-nav--mini:focus-within .hi-nav__sys { display: revert; }
  .hi-nav--mini:hover .hi-nav__item,
  .hi-nav--mini:focus-within .hi-nav__item { justify-content: flex-start; padding-inline: var(--sp-3); }
  .hi-nav--mini:hover .hi-nav__head,
  .hi-nav--mini:focus-within .hi-nav__head { flex-direction: row; padding-inline: var(--sp-3); gap: var(--sp-2); }
  .hi-nav--mini:hover .hi-nav__toggle,
  .hi-nav--mini:focus-within .hi-nav__toggle { display: grid; margin-inline-start: auto; }
  .hi-nav--mini .hi-nav__toggle > :first-child { transform: rotate(45deg); }
  /* Išskleidus užvedimu kvadratas vėl tampa tekstu „Hi“. */
  .hi-nav--mini:hover .hi-nav__mark,
  .hi-nav--mini:focus-within .hi-nav__mark { display: inline; width: auto; height: auto; background: none; color: inherit; font-size: inherit; letter-spacing: inherit; line-height: inherit; }
}

/* Užsmeigta: smeigtukas akcentinis ir statmenas. */
.hi-nav:not(.hi-nav--mini) .hi-nav__toggle { color: var(--accent); border-color: var(--accent-border); }
/* Telefone smeigtuko nėra: ten meniu valdo burgeris, scrimas ir Esc. */
@media (max-width: 900px) { .hi-nav__toggle { display: none; } }

/* Turinys atsitraukia tiek, kiek užima bėgis. */
.hi-shell { padding-inline-start: var(--nav-w, 13.5rem); transition: padding .14s; }
.hi-shell--mini { --nav-w: 3.5rem; }

/* Telefone bėgis užstumiamas ant turinio, o turinys nebeatsitraukia. */
.hi-nav__scrim { display: none; }
@media (max-width: 900px) {
  .hi-shell, .hi-shell--mini { padding-inline-start: 0; }
  .hi-nav { transform: translateX(-100%); box-shadow: var(--sh-lift); }
  .hi-nav--open { transform: none; }
  .hi-nav--mini { --nav-w: 13.5rem; }
  .hi-nav--mini .hi-nav__txt,
  .hi-nav--mini .hi-nav__group,
  .hi-nav--mini .hi-nav__sys { display: revert; }
  .hi-nav--mini .hi-nav__item { justify-content: flex-start; padding-inline: var(--sp-3); }
  .hi-nav--mini .hi-nav__head { flex-direction: row; padding-inline: var(--sp-3); }
  .hi-nav--mini .hi-nav__mark { display: inline; width: auto; height: auto; background: none; color: inherit; font-size: inherit; letter-spacing: inherit; line-height: inherit; }
  .hi-nav--open ~ .hi-nav__scrim {
    display: block; position: fixed; inset: 0; z-index: 39;
    background: rgb(0 0 0 / 45%);
  }
}
/* Mygtukas meniu punkto vietoje: elgiasi kaip nuoroda, bet yra veiksmas
   (tema, atsijungimas). Be šito jis paveldėtų `button` išvaizdą ir juosta
   atrodytų sulipdyta iš dviejų skirtingų dalykų. */
.hi-nav__btn { width: 100%; border: 0; background: none; font: inherit; cursor: pointer; text-align: start; }
/* `font: inherit` atstato ir dydį — be šios eilutės „Tema“ ir „Atsijungti“
   būdavo didesni už nuorodas greta (fs-base vietoj fs-sm). 0.8.6. */
.hi-nav__btn.hi-nav__item { font-size: var(--fs-sm); }

/* Telefono mygtukas. Darbalaukyje jo nėra — ten bėgis matomas visada. */
.hi-nav-burger { display: none; }
@media (max-width: 900px) {
  .hi-nav-burger {
    display: grid; place-items: center;
    position: fixed; inset-block-start: var(--sp-2); inset-inline-start: var(--sp-2);
    z-index: 38; width: 38px; height: 38px;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--surface); color: var(--ink); cursor: pointer;
    box-shadow: var(--sh-lift);
  }
  /* Turinys prasideda žemiau mygtuko, kad šis neuždengtų antraštės. */
  .hi-shell { padding-block-start: 3.2rem; }
}

/* ---- Darbo ekranas: stulpeliai su tempiamomis ribomis ---------------------
   Keturi stulpeliai (meniu, sąrašas, turinys, įrodymai) yra ne išdėstymo
   skonis, o darbo eiga: žmogus renkasi kairėje, žiūri viduryje ir tikrina
   dešinėje, nepamesdamas nė vieno iš trijų. Dėl to jie visi matomi vienu metu,
   o ne keičia vienas kitą.

   Kodėl pločius keičia žmogus, o ne mes: tas pats ekranas naudojamas skirtingai
   — vienam svarbiau ilgi kategorijų vardai, kitam platus grafikas, trečiam
   sąskaitų eilutės. Bet koks mūsų parinktas santykis dalį naudotojų apgauna.

   Kodėl tinklelio šablonas yra kintamasis (`--hi-tpl`), o ne įterptinis stilius:
   įterptinis `style="grid-template-columns:…"` nugalėtų media query, ir siaurame
   ekrane stulpeliai liktų sulipę. Dabar JS rašo TIK kintamąjį, o siauro ekrano
   taisyklė perrašo patį `grid-template-columns`.

   Aukštis fiksuotas (`100dvh`), slenka KIEKVIENAS stulpelis atskirai. Kitaip
   dešinėje slenkant eilučių lentelę nuslinktų ir grafikas, į kurį ji remiasi. */
.hi-shell--app {
  block-size: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hi-cols {
  display: grid;
  grid-template-columns: var(--hi-tpl, minmax(0, 1fr));
  flex: 1;
  min-block-size: 0;
}
.hi-col {
  /* Konteineris: viduje esanti lentelė matuojasi pagal STULPELĮ, ne pagal
     langą (`@container hi-col`). Plačiame monitoriuje siauras stulpelis kitaip
     gautų plataus ekrano išdėstymą. */
  container: hi-col / inline-size;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  min-block-size: 0;
  overflow: hidden;
}
/* Skiriamoji linija yra pati rankena, ne atskiras rėmelis: du gretimi
   skirtukai (linija + rankena) skaitomi kaip du objektai. */
.hi-col + .hi-col { border-inline-start: 1px solid var(--line); }

/* Stulpelio antraštė lieka vietoje, kai turinys slenka: be jos nuslinkus
   žemyn nebeaišku, kuris stulpelis ką rodo. */
.hi-col__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  /* Vienodas aukštis VISUOSE stulpeliuose: antraštė su mygtuku ir antraštė be
     jo kitaip nesutampa, ir trys gretimi stulpeliai skaitomi kaip trys
     skirtingi objektai, nors tai viena eilė.
     FIKSUOTAS, ne mažiausias: su `min-block-size` pakako vieno stulpelio, kurio
     antraštėje atsirado antra eilutė, ir gretimi stulpeliai tapdavo skirtingo
     storio. Antraštė yra vienos eilutės žyma; kas netelpa, gyvena po ja savo
     juostoje. */
  block-size: 2.75rem;
  padding: var(--sp-1) var(--sp-3);
  border-block-end: 1px solid var(--line);
  background: var(--surface);
}
.hi-col__h {
  margin: 0;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  white-space: nowrap;
  /* Antraštė vardija tai, kas pasirinkta, tad jos tekstas yra DUOMENYS, o ne
     trumpa etiketė: „Statybos sąnaudų indeksas — negyvenamieji pastatai“ į
     stulpelį netelpa. Be šių trijų savybių `nowrap` tekstas ne apkerpamas, o
     išstumia `hi-col__tools` mygtukus už stulpelio krašto — tyliai, nes flex
     elementas savaime nesusispaudžia žemiau savo turinio. */
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Matavimo vienetas arba patikslinimas prie antraštės. Bibliotekoje, ne
   puslapyje: tai jau antras ekranas, kurio grafiko stulpelis turi pasakyti,
   KUO matuojama tai, kas jame nubrėžta. */
.hi-col__sub {
  font-weight: var(--fw-normal);
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}
.hi-col__tools { margin-inline-start: auto; display: flex; align-items: center; gap: var(--sp-1); }
.hi-col__body { flex: 1; min-block-size: 0; overflow: auto; }
/* Tuščias stulpelis privalo pasakyti, ko iš žmogaus laukiama. Tuščias
   stačiakampis skaitomas kaip klaida. */
.hi-col__empty {
  display: grid;
  place-content: center;
  gap: var(--sp-2);
  block-size: 100%;
  padding: var(--sp-4);
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* Rankena yra TIKRAS tinklelio takelis, ne uždėtas sluoksnis: uždėtas nuslenka
   nuo ribos, kai stulpelio turinys pakeičia plotį. Plotis mažas, bet taikinys
   platesnis už matomą liniją (`::before`) — 6 px riba pele pagaunama sunkiai. */
.hi-split {
  position: relative;
  inline-size: 6px;
  cursor: col-resize;
  background: var(--line);
  touch-action: none;
  border: 0;
  padding: 0;
}
.hi-split::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: -3px;
}
/* Griffas: be jo 6 px juosta neatrodo kaip valdiklis. */
.hi-split::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  inline-size: 2px;
  block-size: 2.2rem;
  border-radius: 1px;
  background: var(--surface);
  opacity: .8;
}
.hi-split:hover, .hi-split:focus-visible { background: var(--accent); outline: none; }
.hi-split:focus-visible::after { background: var(--accent-contrast, #fff); opacity: 1; }
/* Tempiant kursorius nesikeičia visame lange, o tekstas nesižymi: kitaip
   nuvedus pelę nuo rankenos tempimas atrodo nutrūkęs. */
body.hi-resizing { cursor: col-resize; user-select: none; }
body.hi-resizing iframe, body.hi-resizing canvas { pointer-events: none; }

/* Siaurame ekrane stulpeliai vienas po kito, o rankenų nėra: tempti tai, kas
   užima visą plotį, nėra ką. Slenka visas konteineris, ne kiekvienas
   stulpelis atskirai — trys atskiros slinktys telefone yra spąstai. */
@media (max-width: 1199px) {
  .hi-cols { grid-template-columns: minmax(0, 1fr); grid-auto-rows: min-content; overflow: auto; }
  .hi-split { display: none; }
  .hi-col { overflow: visible; }
  .hi-col__body { overflow: visible; }
  .hi-col + .hi-col { border-inline-start: 0; border-block-start: 1px solid var(--line); }
  .hi-col__head { position: sticky; inset-block-start: 0; z-index: 5; }
}

/* Lentelė kortelėmis pagal STULPELIO, o ne lango plotį. Darbo ekrane lentelė
   gyvena siaurame tempiamame stulpelyje: langas gali būti 2560 px, o lentelei
   skirta 430 px. Lango lūžio taškas ten nieko nepasako, ir dvylikos stulpelių
   lentelė lieka su horizontaliu slankikliu, kuriame žmogus pameta, kurioje
   eilutėje yra.

   Taisyklės kartojamos, o ne dalijamos su media query: gryname CSS bendro bloko
   dviem skirtingiems užklausų tipams nėra, o preprocesoriaus ši biblioteka
   neturi — jis reikštų statymo žingsnį keturiose sistemose. */
/* Riba 460, ne 640: 640 px stulpelyje tikra lentelė su suspaustais pločiais ir
   kerpamu tekstu skaitoma puikiai, o kortelės ten atima aštuonias eilutes
   vienam įrašui — ekrane lieka trys įrašai vietoj dvidešimties. Kortelės skirtos
   stulpeliui, kuriame lentelė virstų horizontaliu slankikliu. */
@container hi-col (max-width: 460px) {
  /* Lentelė kortelių režimu nustoja būti lentele. Be šito `table` ir `tbody`
     lieka lentelės išdėstyme: dėžė gauna savo turinio plotį, o ne stulpelio,
     ir kortelių reikšmės nukeliauja UŽ stulpelio krašto — matomos lieka tik
     žymės, tad kortelė atrodo tuščia. */
  .hi-table--cards, .hi-table--cards tbody { display: block; }
  .hi-table--cards thead { display: none; }
  .hi-table--cards tbody tr {
    display: block;
    margin-block-end: var(--sp-2);
    padding: var(--sp-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
  }
  .hi-table--cards tbody tr:hover { background: var(--surface); }
  .hi-table--cards tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-2);
    min-inline-size: 0;
    padding: .1rem 0;
    border: 0;
    text-align: end;
  }
  .hi-table--cards tbody td::before {
    content: attr(data-label);
    flex: none;
    color: var(--muted);
    font-size: var(--fs-xs);
    text-align: start;
  }
  .hi-table--cards tbody td:empty { display: none; }
  .hi-table--cards tbody td.hi-table__lead {
    display: block;
    margin-block-end: var(--sp-1);
    text-align: start;
    font-weight: var(--fw-medium);
  }
  .hi-table--cards tbody td.hi-table__lead::before { content: none; }
}

/* Smulkūs variantai darbo ekrano stulpeliams. Ne „gražiau mažiau", o vietos
   klausimas: 250 px stulpelyje laukas ir laikotarpio juosta pilno dydžio
   išstumia patį sąrašą, dėl kurio stulpelis egzistuoja. Lietimo taikinys
   lieka pakankamas (28–30 px) — žemiau jo nebeleidžiama. */
.hi-input--sm {
  min-block-size: 30px;
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-xs);
}
.hi-seg--sm button { min-block-size: 28px; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-2xs); }

/* Besiplečiantis stulpelis. Taisyklė atrodo tuščia, bet nėra: be
   `min-inline-size: 0` tinklelio takelis `minmax(0, 1fr)` vis tiek išsipučia
   pagal plačiausią vaiką (grafiko SVG), ir gretimi stulpeliai netenka pločio. */
.hi-col--fill { min-inline-size: 0; }

/* Stulpelio turinys su paraštėmis. Ne visiems: sąrašo stulpelyje eilutės
   privalo eiti nuo krašto iki krašto (tada atitraukimas rodo gylį, o ne
   paraštę), o skydui paraštė būtina — be jos grafikas remiasi į stulpelio
   liniją ir atrodo nukirptas. */
.hi-col__body--pad { padding: var(--sp-3); }