/* style.css — A felület alap stílusa (0. lépés).

   Irány: tiszta "mérőműszer" hangulat — világos felület, egyetlen "jel"
   (signal) kiemelőszín, a státuszsor pedig egy kis műszer-kijelzőként.
   A teljes csiszolás a 10. lépésben jön; itt a fegyelmezett alap a cél.

   Tudatos döntés: NINCS letöltött webfont. A projekt offline / zárt iskolai
   hálóra készül, ezért rendszerbetűket használunk (semmi külső kérés, azonnali
   megjelenés). A UI sans-serif, a mérőértékek/státusz monospace — ez idézi a
   műszerek kijelzőjét. */

:root {
  /* Színek (világos "labor" téma) */
  --bg: #f6f7f9;
  --surface: #ffffff;
  --ink: #1b2430;
  --muted: #64748b;
  --line: #e6e9ee;
  /* A kiemelőszín a logóhoz igazítva: réz/bronz (tudomány-ikonok színe). */
  --signal: #b05c20;      /* réz — a "mérés / jel" kiemelőszín */
  --signal-weak: #f6e8db;
  --ok: #b05c20;
  --warn: #b45309;
  --error: #dc2626;

  /* Tipográfia */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Méretek */
  --radius: 10px;
  --pad: 16px;
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  /* Háromsávos elrendezés: fejléc / fő terület / státuszsor. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
}

/* --- Fejléc ----------------------------------------------------------------
   KOMPAKT: a grafikoné a hely — a fejléc egyetlen alacsony sor. */
header {
  display: flex;
  align-items: center;
  /* MINDEN szélességen törhet. A fejlécben 11 elem van (logó, cím, alcím,
     Csatlakozás, Mérés, Adatok, Táblázat, 2 mentés, nyelv, Vezérlők, teljes
     képernyő) — ez tableten (~768 px) törés nélkül kilógna a képernyőről.
     A korábbi tördelés csak 640 px alatt élt, így a 640–900 px közti sáv
     (épp a tabletek) hibás volt. */
  flex-wrap: wrap;
  gap: 12px;
  row-gap: 4px;
  padding: 5px calc(var(--pad) * 0.75);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
header h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
header .subtitle {
  color: var(--muted);
  font-size: 12px;
}
/* Keskenyebb ablakban az alcím csak helyet foglal — tűnjön el. */
@media (max-width: 1100px) {
  header .subtitle { display: none; }
}

/* Csatlakozás gomb: jobbra tolva, visszafogott "jel"-színű kiemelés. */
#connect-btn {
  margin-left: auto;
  padding: 6px 16px;
  border: 1px solid var(--signal);
  border-radius: var(--radius);
  background: var(--signal);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 550;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
#connect-btn:hover:not(:disabled) {
  background: #8f4a19; /* a --signal sötétebb árnyalata */
}
#connect-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Mérés indítása/leállítása gomb. Indításra „jel"-színű, méréskor piros (állj). */
#measure-btn {
  padding: 6px 16px;
  border: 1px solid var(--signal);
  border-radius: var(--radius);
  background: var(--signal);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 550;
  cursor: pointer;
}
#measure-btn[data-measuring="true"] {
  background: var(--error);
  border-color: var(--error);
}
#measure-btn[hidden] { display: none; }

/* Adatok gomb a fejlécben — visszafogott stílus. */
#snapshot-btn {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  cursor: pointer;
}
#snapshot-btn:hover:not(:disabled) { background: var(--bg); }
#snapshot-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Nézetvezérlő sáv (3. lépés) -------------------------------------------
   KOMPAKT: kis paddingok, a csempék a sorban folynak (nem külön teljes sor) —
   tipikusan 1–2 sor, a maradék hely a grafikoné. */
#controls {
  /* ALAP: FÜGGŐLEGES LISTA (mindig elfér, sosem csúsznak egymásra a zónák).
     Sorrend (DOM): Adat → időablak → csempék (középen, 2 sor) → tengely-
     beállítások → predikció. Széles képernyőn (lásd lentebb, @media) 3-oszlopos
     KÖZÉPRE igazítássá alakul, hogy ne maradjon üres sáv a csempék mellett. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  padding: 4px calc(var(--pad) * 0.75);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
#controls[hidden] { display: none; }

/* A csempesor: a csempék blokkja, középre igazítva. */
#ctl-row-type {
  align-items: center;
  justify-content: center;
}

/* --- Széles képernyő (≥1280px): 3-OSZLOPOS, KÖZÉPRE igazított elrendezés ----
   BAL: fent az Adat, alatta az időablak. KÖZÉP: a csempék (2 sor). JOBB: a
   predikció. LEGALUL, TELJES SZÉLESSÉG: a tengely-/típusbeállítások. Ennyi
   helyen a szélső zónák elférnek a középső csempeblokk mellett — nincs üres
   sáv, és nincs átfedés sem (a keskeny nézet marad a függőleges lista). */
@media (min-width: 1280px) {
  #controls {
    display: grid;
    /* A KÖZÉPSŐ oszlopot a csempeblokk méretéhez kötjük (minmax 0–680) — így nem
       „fújódik fel", és a két szélső 1fr EGYENLŐ marad → a csempék valódi középen. */
    grid-template-columns: 1fr minmax(0, 680px) 1fr;
    grid-template-rows: auto auto auto;
    align-items: center;
    column-gap: 14px;
    row-gap: 3px;
  }
  #ctl-row-focus { grid-column: 1; grid-row: 1; justify-self: start; }
  #ctl-row-view  { grid-column: 1; grid-row: 2; justify-self: start; }
  #ctl-row-type  { grid-column: 2; grid-row: 1 / span 2; justify-self: center; }
  #ctl-row-pred  { grid-column: 3; grid-row: 1 / span 2; justify-self: end; }
  #ctl-row-opts  { grid-column: 1 / -1; grid-row: 3; justify-self: start; }
}

/* Egy vezérlő-sor: fix minimum-magasság → a benne ki/be kapcsolódó választók
   nem változtatják a sáv magasságát. */
.ctl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 32px;
}

/* Rugalmas térköz (a jobb oldali zónát tolja szélre) és vékony elválasztó. */
.ctl-spacer { flex: 1 1 0; min-width: 8px; }

.ctl-divider {
  flex: none;
  width: 1px;
  height: 20px;
  background: var(--line);
}

/* A típusfüggő beállítások fix "fészke" (a csempék után, a sor közepén). */
#type-options {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Összecsukott vezérlők: a csempék, a tengely-beállítások és a predikció
   eltűnnek, csak az időablak-sor marad — a grafikon a lehető legnagyobb helyet
   kapja. Az Adatok/mentés + visszanyitó gombok a FEJLÉCBEN vannak, azok
   maradnak. A kapcsolódó paneleket is elrejtjük (állapotuk megmarad). */
body.controls-collapsed #ctl-row-type,
body.controls-collapsed #ctl-row-opts,
body.controls-collapsed #ctl-row-pred { display: none !important; }

/* A csempesor a KÖZÉPSŐ oszlopban, középre igazítva, két sorba tördelve. */
#ctl-row-type {
  flex-wrap: wrap;
  justify-content: center;
  min-height: 30px;
  position: relative;
}
body.controls-collapsed #snapshot-panel,
body.controls-collapsed #meta-panel,
body.controls-collapsed #fit-panel { display: none !important; }

/* Összecsukó + teljes képernyő gombok a sáv jobb szélén. */
#collapse-btn,
#fullscreen-btn {
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 12px;
  cursor: pointer;
}
#collapse-btn:hover,
#fullscreen-btn:hover { background: var(--bg); color: var(--ink); }

/* „‹ Vissza" gomb: egy szinttel feljebb a nézet-hierarchiában (a jobb-klikk
   helyett — érintőképernyőn is működik). „Jel"-színnel kiemelve, mert navigáció.
   Abszolút pozícionált a csempesor alá — nem növeli a csempesor magasságát. */
/* A lefúrt nézet sávja: a „‹ Vissza" gomb ÉS a kiemelt adatsor NEVE — így a
   diagram fölött, középen látszik, melyik adaton állunk (nem csak a bal felső
   „Adat" legördülőben). Abszolút a csempesor alá → nem növeli a sor magasságát. */
#focus-bar {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 4px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
#focus-bar[hidden] { display: none; }

/* A kiemelt adatsor neve — „jel"-színű, hangsúlyos (ez a nézet „címe"). */
#focus-title {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 650;
  color: var(--signal);
  max-width: 40ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#focus-title:empty { display: none; }

#back-btn {
  padding: 5px 12px;
  border: 1px solid var(--signal);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--signal);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
}
#back-btn:hover { background: var(--signal); color: #fff; }

/* Időablak-gombcsoport: összefűzött "szegmens" kapcsoló. */
.control-group {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.control-group button {
  border: 0;
  border-left: 1px solid var(--line);
  padding: 5px 12px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
  cursor: pointer;
}
.control-group button:first-child { border-left: 0; }
.control-group button:hover { background: var(--bg); }
.control-group button.active {
  background: var(--signal);
  color: #fff;
}

/* Egyéni időablak mezői (tól–ig, mp a mérés kezdetétől). */
#custom-range {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#custom-range[hidden] { display: none; }
#custom-range input[type="number"] {
  width: 72px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
}

/* Vezérlősáv-gombok (CSV, PNG, táblázat, tengely) — közös stílus.
   A .active állapot (bekapcsolt toggle) „jel"-színnel kiemelve. */
#export-btn,
#png-btn,
#table-btn,
#axis-assign-btn {
  padding: 5px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
  cursor: pointer;
}
#export-btn:hover,
#png-btn:hover,
#table-btn:hover,
#axis-assign-btn:hover { background: var(--bg); }
/* A bekapcsolt toggle-gombok (nyitott panel / aktív nézet) "jel"-színnel. */
#table-btn.active,
#axis-assign-btn.active {
  background: var(--signal);
  border-color: var(--signal);
  color: #fff;
}
#axis-assign-btn[hidden] { display: none; }
#snapshot-btn.active,
#snap-paste-btn.active {
  background: var(--signal);
  border-color: var(--signal);
  color: #fff;
}
/* KONTRASZT: aktív toggle fölé érve is sötét háttér + fehér szöveg maradjon.
   (A sima :hover:not(:disabled) szabály specifikusabb volt, és világos hátteret
   tett a fehér szöveg alá — olvashatatlan lett.) */
#snapshot-btn.active:hover,
#snap-paste-btn.active:hover,
#table-btn.active:hover,
#axis-assign-btn.active:hover {
  background: #8f4a19; /* a --signal sötétebb árnyalata */
  border-color: #8f4a19;
  color: #fff;
}

/* --- Pillanatkép-panel (7. lépés) ----------------------------------------- */
#snapshot-panel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px calc(var(--pad) * 1.5);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
#snapshot-panel[hidden] { display: none; }
#snapshot-panel input[type="text"] {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
}
#snapshot-panel button {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
  cursor: pointer;
}
#snapshot-panel button:hover:not(:disabled) { background: var(--surface); border-color: var(--signal); }
/* KONTRASZT: az AKTÍV (nyitott beillesztő) gomb fölé érve is sötét háttér +
   fehér szöveg maradjon — a fenti hover-szabály specifikusabb volt, és világos
   hátteret tett a fehér szöveg alá (olvashatatlan). */
#snapshot-panel button.active:hover:not(:disabled) {
  background: #8f4a19; /* a --signal sötétebb árnyalata */
  border-color: #8f4a19;
  color: #fff;
}
#snapshot-panel button:disabled { opacity: 0.5; cursor: not-allowed; }
#snapshot-panel button[hidden] { display: none; }
#snap-info {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}
.snap-sep { color: var(--line); }
.snap-ref-label {
  font-size: 13px;
  color: var(--muted);
}

/* Beillesztő al-panel (CSV / pillanatkép szövege) — teljes sort elfoglal. */
#snap-paste-panel {
  flex-basis: 100%;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
#snap-paste-panel[hidden] { display: none; }
#snap-paste-area {
  flex: 1;
  resize: vertical;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
}
#snap-paste-load {
  padding: 6px 16px;
  border: 1px solid var(--signal);
  border-radius: var(--radius);
  background: var(--signal);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 14px;
  cursor: pointer;
}

/* --- Csempés / szegmentált / chipes választók (oktatási UI) ----------------
   A legördülők helyett: minden opció EGYSZERRE látszik, ikonnal/felirattal —
   egy pillantásra átlátható, kattintásra vált. Az app.js tileGroup segédje
   kezeli (rádió-viselkedés: egyszerre egy aktív). */

/* Adat nélkül a nézet-vezérlők láthatók, de INAKTÍVAK (halványan) — az
   app.js setControlsEnabled kapcsolja, amint eszköz csatlakozik / adat jön. */
#controls button:disabled,
#controls select:disabled,
#controls input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* A tiltott csempe/szegmens hoverje se "éledjen fel". */
#controls .tile:disabled:hover,
#controls .ctl-seg button:disabled:hover,
#controls .chip:disabled:hover {
  border-color: var(--line);
  background: var(--surface);
  color: var(--muted);
}

/* Diagramtípus-csempék: a KÖZÉPSŐ oszlop kompakt, középre igazított blokkja.
   A csempén FELÜL az ikon, ALUL a név (függőleges) — így keskenyebbek, és a
   szélesség-korlát két EGYENLETES sorba tördeli őket (6+6). */
.ctl-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  /* Nagy képernyőn pont 7 csempe fér ki egy sorba → a 13 típus 7–6 elrendezésű,
     mindkét sor középre igazítva (a második sor 6 csempéje a 7 alatt középen).
     A szélesség 7 csempéhez van szabva (a legszélesebb DE-felirattal is befér, de
     a 8. már nem), a min(100%,…) pedig kisebb kijelzőn magától tördel tovább. */
  max-width: min(100%, 740px);
  margin: 0 auto;
}
.tile {
  display: inline-flex;
  flex-direction: column;   /* ikon FÖLÖTT a szöveg */
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 8px;
  min-width: 92px;          /* egyenletes csempeszélesség → rendezett rács */
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.tile svg { display: block; width: 30px; height: 20px; }
.tile:hover {
  border-color: var(--signal);
  color: var(--ink);
}
.tile.active {
  /* KONTRASZT: teli "jel"-szín fehér szöveggel/ikonnal (a réz-a-bézsen halvány
     volt) — összhangban a szegmens-kapcsolók és chipek aktív állapotával. */
  border-color: var(--signal);
  background: var(--signal);
  color: #fff;
  font-weight: 600;
}

/* Szegmens-kapcsoló (tengely-elrendezés, predikciós modell): összefűzött
   gombok, az aktív "jel"-színnel — mint az időablak-váltó. */
.ctl-seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.ctl-seg button {
  border: 0;
  border-left: 1px solid var(--line);
  padding: 5px 12px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
  cursor: pointer;
}
.ctl-seg button:first-child { border-left: 0; }
.ctl-seg button:hover { background: var(--bg); }
.ctl-seg button.active {
  background: var(--signal);
  color: #fff;
}

/* Chip-csoport (kiemelt adat választó): lekerekített "címkék". */
.chip-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* Az „Adat" forrásváltó LEGÖRDÜLŐ (chipek helyett) — kompakt, sok betöltött
   forrásnál sem visz el sok helyet; hosszú címkénél levágja az ellipszis. */
.focus-select {
  max-width: 220px;
  text-overflow: ellipsis;
}
.chip {
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
  cursor: pointer;
}
.chip:hover { border-color: var(--signal); }
.chip.active {
  background: var(--signal);
  border-color: var(--signal);
  color: #fff;
}

/* Predikció: a checkbox vizuális BILLENŐ KAPCSOLÓKÉNT (be/ki ránézésre látszik). */
#fit-ctl input[type="checkbox"] {
  appearance: none;
  width: 34px;
  height: 18px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: var(--line);
  position: relative;
  cursor: pointer;
  transition: background 0.15s ease;
}
#fit-ctl input[type="checkbox"]:checked { background: var(--signal); }
#fit-ctl input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(27, 36, 48, 0.25);
  transition: left 0.15s ease;
}
#fit-ctl input[type="checkbox"]:checked::after { left: 18px; }

/* Vezérlő-címke + legördülő (típus- és csatornaválasztók). */
.ctl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--muted);
}
.ctl[hidden] { display: none; }
.ctl select {
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
}
#xy-selectors[hidden] { display: none; }
#xy-selectors { display: inline-flex; gap: 10px; }

/* Párválasztó (közös/kéttengelyes nézet, 3+ csatorna): melyik kettő látsszon. */
#pair-selectors[hidden] { display: none; }
#pair-selectors { display: inline-flex; gap: 10px; }

/* Jelmagyarázat-sáv a diagram ALATT (PNG-mentésbe is bekerül), középre igazítva. */
#legend-bar {
  display: flex;
  justify-content: center;
  padding: 3px calc(var(--pad) * 0.75);
  background: var(--surface);
  border-top: 1px solid var(--line);
}
#legend-bar[hidden] { display: none; }

/* Csatorna-legend: színes pötty + név. Kattintható elemek: stílus-szerkesztő. */
#legend {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}
#legend .legend-click { cursor: pointer; }
#legend .legend-click:hover { color: var(--ink); text-decoration: underline; }
#legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
#legend .legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* --- Görbeillesztés (8. lépés) -------------------------------------------- */
#fit-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#fit-controls[hidden] { display: none; }
#fit-controls select {
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
}
#fit-panel {
  padding: 8px calc(var(--pad) * 1.5);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
}
#fit-panel[hidden] { display: none; }

/* --- Címke/mértékegység szerkesztő (5. lépés) ----------------------------- */
#meta-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px calc(var(--pad) * 1.5);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  /* Sok betöltött fájlnál (sok csatorna) a panel NE nyúljon a képernyőn túl —
     legyen görgethető, hogy MINDEN sor (tengely-választó) elérhető maradjon. */
  max-height: min(46vh, 340px);
  overflow-y: auto;
}
#meta-panel[hidden] { display: none; }
.meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.meta-ch {
  min-width: 90px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}
.meta-input {
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
}
.meta-input { min-width: 220px; }
/* A csatorna megjelenített neve a tengely-panelen (csak kiírás — az átnevezés
   a jelmagyarázat felugrójában történik). */
.meta-label {
  min-width: 180px;
  font-size: 13px;
  color: var(--ink);
}
.meta-axis {
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
}
.meta-axis[hidden] { display: none; }

/* --- Fejléc-logó + nyitóképernyő (logó + tutorial diákoknak) --------------- */
#app-logo {
  height: 28px;
  width: auto;
  align-self: center;
}

/* Nyelvválasztó + földgömb-ikon egy egységként. Saját, SZŰK belső réssel, hogy
   az ikon a választóhoz tapadjon, ne a fejléc nagy gap-jével essen tőle távol. */
.lang-ctl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
}
.lang-ctl svg { flex: none; }

/* Nyelvválasztó a fejlécben — kompakt. */
#lang-select {
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 12px;
}

/* Alap (keskeny képernyő): minden egymás ALATT, középre igazítva. */
#welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 560px;
  padding: 24px;
}
.welcome-logo {
  width: 220px;
  height: auto;
}
/* A szövegek saját oszlopa: a cím / lépések / lábjegyzet közti távolság FIX
   (gap), a logó méretétől független — a kép nagyítása nem húzza szét őket. */
.welcome-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
#welcome #chart-placeholder {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.tutorial {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}
.tutorial[hidden] { display: none; }
/* A lépés szövege NORMÁL folyó szöveg (nem flex! — flexben a <b> elemek külön
   oszlopokká esnének szét); a számkorong abszolút pozícióban ül elé. */
.tutorial li {
  counter-increment: step;
  position: relative;
  padding-left: 36px;
}
/* Számozott lépés-korong a logó réz színével. */
.tutorial li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--signal);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.tutorial-alt {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
.tutorial-alt[hidden] { display: none; }

/* Súgó-felhívás a nyitóoldalon: halk keretes doboz, hogy elváljon a lépésektől,
   de ne vonja el a figyelmet a tutorialról. A benne lévő link a „jel"-színnel
   hívja fel magára a figyelmet. */
.tutorial-help {
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  text-align: center;
}
/* A dobozban két sor van (Súgó + mintafájl) — saját margó helyett egységes rés. */
.tutorial-help p { margin: 0; }
.tutorial-help p + p { margin-top: 5px; }
.tutorial-help[hidden] { display: none; }
.tutorial-help a {
  color: var(--signal);
  font-weight: 600;
  text-decoration: underline;
}

/* Széles képernyőn: a NAGY logó BALRA, mellette (jobbra) a szöveg-oszlop.
   A logó és a szövegek külön flex-elemek — a kép mérete csak a sor magasságát
   adja, a szövegek egymás közti távolsága változatlan (a .welcome-text gap-je). */
@media (min-width: 880px) {
  #welcome {
    flex-direction: row;
    align-items: center;
    gap: 56px;
    max-width: 1000px;
    text-align: left;
  }
  .welcome-logo {
    flex: none;
    width: clamp(260px, 32vmin, 400px); /* nagy, de a képernyővel skálázódik */
  }
  .welcome-text { align-items: flex-start; }
  .tutorial-alt { text-align: left; }
  .tutorial-help { text-align: left; }
}

/* --- Fő terület: a grafikon "színpada" + opcionális táblázat --------------- */
main {
  flex: 1;                 /* kitölti a maradék helyet */
  padding: 6px;            /* KOMPAKT: a grafikoné a hely, minimális keret */
  display: flex;
  /* A táblázat LEBEGŐ ablakként ül a diagram fölött (position: absolute) — az
     abszolút pozíció miatt a diagramterületet NEM szűkíti. */
  position: relative;
}

/* Táblázatos adatsor-nézet: LEBEGŐ ablak — a fejlécénél fogva MOZGATHATÓ
   (app.js pointer-követés), a jobb alsó sarkánál ÁTMÉRETEZHETŐ (CSS resize).
   fixed pozíció: nem nyomja össze a diagram-területet, görgetéskor is marad. */
#data-table {
  position: fixed;
  top: 130px;
  right: 24px;
  z-index: 40;
  width: 340px;
  height: min(420px, 70vh);
  min-width: 240px;
  min-height: 160px;
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  resize: both;      /* átméretezés a jobb alsó saroknál */
  overflow: hidden;  /* a resize-hoz nem-visible kell; a törzs görget */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 32px rgba(27, 36, 48, 0.2);
  font-family: var(--font-mono);
  font-size: 12px;
}
#data-table[hidden] { display: none; }

/* Az ablak fejléce = húzó-fogantyú: cím + sor-limit választó + bezárás. */
.table-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  cursor: move;
  user-select: none;
  touch-action: none; /* érintőn is a mi húzásunk fusson */
}
.table-close {
  margin-left: auto;
  border: 0;
  background: none;
  padding: 0 2px;
  font-size: 17px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.table-close:hover { color: var(--error); }

/* A görgethető törzs (a keret marad, csak ez frissül). */
.table-body {
  flex: 1;
  overflow: auto;
  padding: 8px 10px;
}
.table-title {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--ink);
}
.table-limit {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--muted);
  font-size: 11px;
}
.table-limit-btn {
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
}
.table-limit-btn:hover { background: var(--bg); }
.table-limit-btn.active {
  background: var(--signal);
  border-color: var(--signal);
  color: #fff;
}
#data-table table {
  width: 100%;
  border-collapse: collapse;
}
#data-table th {
  position: sticky; /* a fejléc görgetésnél is látszik */
  top: -8px; /* a .table-body felső paddingja */
  background: var(--surface);
  text-align: right;
  padding: 4px 8px;
  border-bottom: 2px solid var(--line);
  color: var(--muted);
  font-weight: 600;
}
#data-table td {
  text-align: right;
  padding: 3px 8px;
  border-bottom: 1px solid var(--line);
}
#data-table tbody tr { cursor: pointer; }
#data-table tbody tr:hover { background: var(--bg); }
#data-table tbody tr.active { background: var(--signal-weak); }
.table-note {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 11px;
}

/* A „CSV mentése" kérdés-felugró gombjai (teljes mérés / látható nézet). */
.csv-choice {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.csv-choice:hover {
  border-color: var(--signal);
  background: var(--signal-weak);
}

/* A stílus-felugró névmezője. */
.style-name {
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
  min-width: 170px;
}

/* A legendből kikapcsolt sorozat halványan látszik (visszakapcsolható). */
#legend .legend-off { opacity: 0.45; }
#chart-area {
  flex: 1;
  display: grid;
  place-items: center;     /* a placeholder középre */
  min-height: 240px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* finom belső árnyék → "mérőfelület" benyomás */
  box-shadow: inset 0 1px 3px rgba(27, 36, 48, 0.04);
}
#chart-placeholder {
  margin: 0;
  max-width: 36ch;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

/* Ha él a grafikon, a "színpad" középre-igazításból blokká vált, hogy az uPlot
   kitöltse a teljes szélességet. */
#chart-area.has-chart {
  display: block;
  place-items: initial;
  padding: 0;
  /* A terület magasságát a flex-elrendezés szabja meg (rendelkezésre álló hely),
     NE a tartalom — különben az uPlot-tal visszacsatolási hurok alakulhat ki. */
  min-height: 0;
  overflow: hidden;
  /* A belső, abszolút host pozícionálási referenciája. */
  position: relative;
}

/* A grafikon belső befogadója: kitölti a területet, de ki van véve a normál
   tördelésből, így a tartalma nem tudja megnöveszteni a területet. */
.chart-host {
  position: absolute;
  inset: 6px;
}

/* Az uPlot céleleme és a "nagy szám" kijelző egymásra téve töltik ki a hostot;
   a chart.js az egyiket mutatja, a másikat elrejti (display). */
.chart-uplot,
.chart-gauge {
  position: absolute;
  inset: 0;
}
/* „Külön panel" elrendezésben az uhost a panelek tárolója. Kattintásra egy
   panel kiemelhető (csak az látszik) — a kurzor jelzi. A sor-irányú változat
   (hisztogram-panelek) egymás MELLETT ül. */
.chart-uplot { overflow: hidden; }
/* Sok panelnél a panelterület görgethető (a chart.js kapcsolja): függőlegesen
   az idősoros paneleknél, vízszintesen a hisztogram-paneleknél. A görgő a
   grafikonok KÖZTI sávban / a görgetősávon működik (a rajzterületen a görgő
   a nagyításé). */
.chart-uplot.chart-scroll-y { overflow-y: auto; overflow-x: hidden; }
.chart-uplot.chart-scroll-x { overflow-x: auto; overflow-y: hidden; }
.chart-panel { width: 100%; cursor: pointer; }
.chart-panel-row {
  display: inline-block;
  width: auto;
  vertical-align: top;
}

/* Stílus-felugró (a jelmagyarázatra kattintva): szín / vonal / pont. */
.style-popover {
  position: fixed;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 6px 24px rgba(27, 36, 48, 0.18);
  font-size: 13px;
}
.style-title {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}
.style-swatches { display: flex; gap: 6px; }
.style-swatch {
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  padding: 0;
}
.style-swatch.active { border-color: var(--ink); }
.style-row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}
.style-row select {
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
}

/* Adatpont-buborék (hover) sorai: fejléc (X-érték) + sorozatonként egy sor
   színpöttyel; a kurzorhoz legközelebbi sor kiemelve. */
.chart-tip .tip-head {
  color: var(--muted);
  margin-bottom: 2px;
}
.chart-tip .tip-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.chart-tip .tip-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.chart-tip .tip-strong { font-weight: 700; }

/* Adatpont-buborék (hover): a kurzor melletti kis érték-kijelző. */
.chart-tip {
  position: absolute;
  z-index: 10;
  pointer-events: none; /* ne fogja el az egeret a grafikon elől */
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(27, 36, 48, 0.12);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  white-space: nowrap;
}
.chart-gauge {
  display: none; /* alapból az uPlot látszik; a chart.js kapcsolja */
  /* A DOM-nézetek (nagy szám / pite / sodrófa / kis ábrák) itt élnek. Ha a
     tartalom magasabb a területnél (pl. sodrófa referenciákkal), FELÜLRŐL
     kezdve görgethető — a "safe center" fentre esik vissza, így az alsó
     rész (statisztika-tábla) sem vágódik le. */
  justify-items: center;
  align-content: safe center;
  overflow: auto;
  text-align: center;
}
.gauge-value {
  font-family: var(--font-mono);
  font-size: clamp(48px, 12vw, 140px);
  font-weight: 650;
  line-height: 1;
  color: var(--signal);
}
.gauge-label {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--muted);
}

/* --- Pite és sodrófa (9. lépés) — a DOM-rétegen (SVG), nem uPlot ------------ */

/* Üzenet, ha egy nézethez nincs értelmezhető adat. */
.chart-message {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

/* Pite: körcikk-SVG + oldalsó érték-lista egymás mellett. */
.pie-wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
}
.pie-svg {
  /* Reszponzív: a kör az ablakkal együtt nő (a felső sapka is nagyobb),
     hogy a rendelkezésre álló függőleges teret jobban kihasználja. */
  width: clamp(200px, 62vmin, 720px);
  height: auto;
}
.pie-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
}
.pie-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.pie-row .legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: none;
}
.pie-note {
  color: var(--muted);
  font-size: 12px;
}

/* Sodrófa (boxplot): dobozok közös tengelyen + statisztika-tábla alatta. */
.box-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  max-height: 100%;
  overflow: auto; /* sok csatornánál / kis területen görgethető */
}
.box-svg {
  /* Reszponzív: a rajz a képernyővel nő (a fejléc+vezérlők+stat-tábla helyét
     levonva), sok referenciánál továbbra is görgethető marad. */
  width: min(100%, 1100px);
  height: auto;
  max-height: max(320px, calc(100vh - 340px));
}
/* Mérő-oszlop(ok) — a hőmérő-nézet SVG-je: a sodrófáéhoz hasonló reszponzív
   méret, hogy a rendelkezésre álló helyet kitöltse (szenzoronként egy oszlop). */
/* Mérő-oszlop(ok) — DOM/flexbox „hőmérők". A wrap ABSZOLÚT tölti a grafikon-
   területet (a .chart-gauge inset:0 gyerekeként), a sín flex:1-gyel a teljes
   magasságot → nincs nagy üres rész, mint a fix-viewBox SVG-nél. */
.meter-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;      /* az oszlopok a teljes magasságot kapják */
  justify-content: center;
  gap: clamp(18px, 6vw, 90px);
  padding: 14px clamp(16px, 4vw, 60px) 10px;
  box-sizing: border-box;
  overflow: auto;            /* sok szenzornál görgethető */
}
/* Értéktengely: felül a felső, alul az alsó skálahatár — a value (30px) és a
   label (24px) FIX magasságához igazítva, hogy a sín-régióval egy vonalban áll. */
.meter-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px 2px 30px;   /* value (30) fent, label margó+magasság (6+24) lent */
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  flex: 0 0 auto;
}
.meter-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 1 130px;           /* nő a helyre, de nem lesz aránytalanul széles */
  min-width: 56px;
  max-width: 170px;
}
.meter-value {
  height: 30px;
  line-height: 30px;
  font-family: var(--font-mono);
  font-size: clamp(16px, 2.4vw, 26px);
  font-weight: 650;
  color: var(--ink);
  white-space: nowrap;
}
.meter-track {
  position: relative;
  flex: 1 1 auto;            /* KITÖLTI a függőleges helyet */
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.meter-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;                 /* alulról töltődik, mint egy hőmérő */
  transition: height 0.15s ease;
}
.meter-label {
  height: 24px;
  line-height: 24px;
  margin-top: 6px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Kis ábraként (összevetés): nem abszolút, hanem rögzített magasságú cella. */
.multi-cell .meter-wrap {
  position: static;
  height: 240px;
  width: 100%;
  gap: clamp(12px, 4vw, 40px);
  padding: 6px 10px;
}

.box-axis {
  stroke: var(--line);
  stroke-width: 1;
}
.box-tick {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--muted);
  text-anchor: end;
}
.box-name {
  font-family: var(--font-ui);
  font-size: 13px;
  fill: var(--ink);
  text-anchor: middle;
}
.box-stats {
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
}
.box-stats th,
.box-stats td {
  padding: 3px 10px;
  border: 1px solid var(--line);
  text-align: right;
}
.box-stats th {
  background: var(--bg);
  color: var(--muted);
  font-weight: 550;
}
.box-stats td:first-child,
.box-stats th:first-child {
  text-align: left;
}

/* Pókháló (radar): csatornánként egy küllő, a profilt poligon rajzolja ki.
   A wrap a grafikonterületet tölti (a .chart-gauge inset:0 gyereke), az SVG
   arányosan illeszkedik; több forrásnál belül van a jelmagyarázat. */
.radar-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;
}
.radar-svg {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}
.radar-grid {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
}
.radar-spoke {
  stroke: var(--line);
  stroke-width: 1;
}
.radar-axis {
  font-family: var(--font-ui);
  font-size: 12px;
  fill: var(--ink);
}
/* Belső jelmagyarázat (több forrás összevetésekor) — a profilok azonosításához. */
.radar-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
}
.radar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.radar-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: none;
}

/* --- Összevetés kis ábrákkal (small multiples) ------------------------------ */
/* Forrásonként egy-egy sodrófa/pite/hisztogram/nagy szám, egymás mellett. */
.multi-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  justify-content: center;
  /* FELÜLRŐL kezdve, a magasság a tartalomhoz nő; a görgetést a szülő
     (.chart-gauge) intézi — így semmi nem vágódik le, se a tetején, se az alján. */
  align-content: flex-start;
  align-items: flex-start;
  width: 100%;
  min-height: 100%;
  padding: 8px;
}
.multi-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  /* A rendelkezésre álló helyet töltsék ki (pl. betöltött adatok mérés
     nélkül): kevés cellánál nagyra nőnek, soknál tördelődnek. */
  flex: 1 1 300px;
  max-width: 640px;
  min-width: 220px;
}
.multi-caption {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 2px solid var(--signal);
  padding: 0 6px 2px;
}
/* Kattintható kis ábra (összevetés): kattintásra a forrás kiemelése. */
.multi-clickable {
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 0.12s ease, box-shadow 0.12s ease;
}
.multi-clickable:hover {
  background: var(--bg);
  box-shadow: 0 0 0 2px var(--line);
}
/* A cellákban az ábrák a cella szélességéhez igazodnak (kevés cella → nagy
   ábra, sok cella → kompakt). */
.multi-cell .pie-svg { width: clamp(120px, 40%, 260px); }
.multi-cell .pie-wrap { gap: 14px; }
/* Doboz a kis ábrákban: KOMPAKT (statisztika-tábla nélkül, lásd buildBox
   compact) és alacsonyabb, hogy sok betöltött forrásnál (5-6 db) is elférjen —
   a csatornanevek ne csússzanak a látható terület alá. */
.multi-cell .box-svg { width: min(100%, 260px); max-height: 150px; }
.multi-cell .box-stats { font-size: 11px; }
.multi-cell .gauge-value { font-size: clamp(30px, 9vw, 110px); }
.multi-hist,
.multi-scatter { width: 100%; max-width: 460px; height: auto; }

/* --- 3D mozgás-pálya (traj3d): forgatható canvas a DOM-rétegen ------------- */
.traj3d-wrap {
  /* ABSZOLÚT kitöltés: a .chart-gauge (grid) gyerekeként a százalékos magasság
     bizonytalan volt — így a 3D vászon mindig a TELJES rendelkezésre álló
     területet kapja, és az ablakkal együtt reszponzívan nő. */
  position: absolute;
  inset: 0;
}
.traj3d-canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none; /* érintőn is a forgatásé a mozdulat, ne görgessen */
}
.traj3d-canvas:active { cursor: grabbing; }
.traj3d-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  pointer-events: none;
}

/* A gauge érték+név blokkja (egyforrásos és kis-ábrás nézetben közös). */
.gauge-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* uPlot illesztése a téma betűjéhez (a színeket a series.stroke adja JS-ből). */
.u-wrap,
.u-legend {
  font-family: var(--font-ui);
}
.u-legend {
  font-size: 13px;
  color: var(--muted);
}

/* --- Státuszsor: kis "műszer-kijelző" -------------------------------------- */
footer {
  display: flex;
  align-items: center;
  /* MINDEN szélességen törhet: a lábléc tartalma (státusz + jelvény + Súgó +
     támogatás-gomb + licenc) együtt könnyen szélesebb a képernyőnél — törés
     nélkül vízszintes görgetést okozna az egész oldalon. */
  flex-wrap: wrap;
  gap: 14px;
  row-gap: 2px;
  padding: 4px calc(var(--pad) * 0.75);
  background: var(--surface);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
}

/* Állapotjelző pötty; a színt a data-state attribútum adja (a JS állítja). */
#status-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
}
#status-dot[data-state="loading"] {
  background: var(--signal);
  animation: pulse 1.2s ease-in-out infinite;
}
#status-dot[data-state="ok"]    { background: var(--ok); }
#status-dot[data-state="error"] { background: var(--error); }

#status-text { color: var(--ink); }

/* Készítő + licenc a lábléc jobb szélén. */
/* Súgó-link a láblécben: a felhasználói útmutató (sugo.html) új lapon. */
#help-link,
#contact-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--signal);
  text-decoration: none;
  white-space: nowrap;
}
#help-link:hover,
#contact-link:hover { text-decoration: underline; }

/* Támogatás-gomb („Hívj meg egy kávéra") a NYITÓKÉPERNYŐN. Saját gomb, nem külső
   widget: nincs hálózati kérés, amíg rá nem kattintanak. Visszafogott pirula —
   ne vonja el a figyelmet a tutorialról, de legyen kattinthatóan gombszerű. */
#coffee-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* Igazítást a szülő .welcome-text align-items-e adja: keskenyen középre,
     széles képernyőn balra — így a Súgó-dobozzal egy vonalban áll. */
  padding: 7px 16px;
  border: 1px solid var(--signal-weak);
  border-radius: 999px;
  background: var(--signal-weak);
  color: var(--signal);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
#coffee-link:hover {
  background: var(--signal);
  border-color: var(--signal);
  color: #fff;
}
#coffee-link[hidden] { display: none; }
#coffee-link svg { flex: none; }

#credit {
  font-size: 12px;
  color: var(--muted);
  /* A leghosszabb elem: hadd törjön belül, ha kell (a nowrap túlcsordulást
     okozott, amint a támogatás-gomb bekerült a lábléc sorába). */
  min-width: 0;
}
#credit a {
  color: var(--signal);
  text-decoration: none;
}
#credit a:hover { text-decoration: underline; }

/* Képesség-jelvény (Web Serial) jobbra tolva. */
#capability-badge {
  margin-left: auto;
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--muted);
}
#capability-badge[data-state="ok"] {
  color: var(--ok);
  background: var(--signal-weak);
  border-color: var(--signal-weak);
}
#capability-badge[data-state="warn"] {
  color: var(--warn);
  background: #fdf3e6;
  border-color: #fde9cf;
}

/* Lüktetés a betöltés-jelzéshez. */
@keyframes pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.85); }
}

/* Minőségi alap: ha a felhasználó kéri, ne animáljunk. */
@media (prefers-reduced-motion: reduce) {
  #status-dot[data-state="loading"] { animation: none; }
}

/* Látható billentyűzet-fókusz (akadálymentesség). */
:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

/* --- MOBIL (≤640px): kompakt, összecsukható menü --------------------------
   Elvek: a fejléc törhet (a gombok kisebbek, ujjbaráttal), a vezérlő-grid EGY
   OSZLOPBA rendeződik (időablak → csempék → tengelyek → predikció egymás alatt),
   és a fejléc ▲ Vezérlők gombja az EGÉSZ menüt összecsukja (a grafikoné a hely). */
/* TABLET-SÁV (~900 px alatt): a fejléc-gombok kompaktabbak lesznek, hogy a sok
   elem még EGY sorban elférjen — így nem kell tördelnie. A tördelés attól még
   megmarad biztonsági hálónak (lásd a header alapszabályát), pl. ha a hosszabb
   német feliratokkal mégsem férne ki. */
/* FIGYELEM: ez a 960 px-es töréspont PÁRBAN van az app.js
   NARROW_HEADER_QUERY-jével — ha az egyiket módosítod, a másikat is kell!
   Miért pont 960? Mérve: a TELJES feliratokkal a fejléc ~900 px-et igényel
   (magyarul 900, németül 899, angolul 802). A görgetősávot is beszámítva 910 px
   viewportnál már tördelt, ezért kell a ráhagyás. */
@media (max-width: 960px) {
  /* A mentés-gombok felirata itt RÖVID („CSV", „PNG" — lásd updateHeaderLabels
     az app.js-ben), ezért felszabadul ~100 px: ezt levegőre fordítjuk, hogy a
     fejléc ne legyen zsúfolt, és a gombok ujjal is kényelmesen találhatók
     legyenek. A tördelés (header alapszabály) továbbra is biztonsági háló. */
  header { gap: 10px; }
  header h1 { font-size: 15px; }
  #connect-btn,
  #measure-btn { padding: 6px 13px; font-size: 13px; }
  #snapshot-btn,
  #table-btn,
  #export-btn,
  #png-btn,
  #collapse-btn,
  #fullscreen-btn { padding: 6px 11px; font-size: 12px; white-space: nowrap; }
  #lang-select { font-size: 12px; }
  /* Az elválasztó vonal a szűk sorban csak helyet vinne. */
  header .ctl-divider { display: none; }
}

@media (max-width: 640px) {
  header {
    gap: 6px;
    padding: 5px 10px;
  }
  header h1 { font-size: 15px; }
  /* A Csatlakozás ne tolja külön sorba a többit — természetes tördelés. */
  #connect-btn { margin-left: auto; }
  #connect-btn,
  #measure-btn { padding: 5px 12px; font-size: 13px; }
  /* A fejlécbe került akció-/hely-gombok kompaktak és törhetnek. */
  #snapshot-btn,
  #table-btn,
  #export-btn,
  #png-btn,
  #collapse-btn,
  #fullscreen-btn { padding: 5px 9px; font-size: 12px; white-space: nowrap; }

  /* Telefon-méretben a teljes képernyő gomb KIMARAD: egyedül lógna át a második
     sorba (csúnya), miközben itt a legkevésbé hasznos — a böngésző/OS saját
     teljes képernyője adott, a helyet pedig a „Vezérlők" gomb amúgy is
     felszabadítja. (iPhone-on a requestFullscreen amúgy sem támogatott.) */
  #fullscreen-btn { display: none; }

  /* A vezérlő-grid egyetlen oszlop lesz: a sorok természetes sorrendben egymás
     alatt (nincs bal/közép/jobb tördelés, ami mobilon összepréselődne). */
  #controls {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding: 4px 8px;
    row-gap: 4px;
  }
  #ctl-row-focus,
  #ctl-row-view,
  #ctl-row-opts,
  #ctl-row-type,
  #ctl-row-pred {
    grid-column: 1;
    grid-row: auto;
    justify-self: stretch;
  }
  #ctl-row-type { justify-content: center; }
  .ctl-row { gap: 6px; }

  /* Kompakt vezérlők, de ujjbarát magassággal. */
  .control-group button,
  .ctl-seg button,
  .chip { padding: 5px 9px; font-size: 12px; }

  /* A típusfüggő beállítások törhetnek több sorba. */
  #type-options { flex-wrap: wrap; }

  footer { flex-wrap: wrap; row-gap: 2px; }
  #capability-badge { margin-left: 0; }
  #credit { white-space: normal; }
}

/* Nagyon keskeny kijelzőn a fejléc-logó és alcím csak helyet foglal. */
@media (max-width: 480px) {
  #app-logo { display: none; }
  header .subtitle { display: none; }
}