/* Trendfigyelő — Task 5 váz stílus (a korábbi inline <style>-ból áthozva).
   Csak saját, relatív stílus — külső @import / url() TILOS (Task 1 CSS-guard). */

body { font-family: system-ui, sans-serif; max-width: 78rem; margin: 2rem auto;
       padding: 0 1rem; line-height: 1.6; color: #222; }
h1 { margin-bottom: .25rem; }
h2 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
.halvany { color: #666; }
ul { padding-left: 1.2rem; }
code { background: #f2f2f2; padding: .1rem .3rem; border-radius: 3px; }

/* §7.1 per-szekció elrendezés: minden szekció bal oldalán a saját (sticky) vezérlősávja.
   A #kulcsszo-blokk/#trend-blokk MARAD a tartalom-konténer (ID-szerződés), a vezérlő a .vezerlo-sav-ban. */
/* a lap fejléce (H1 + alcím) a szokásos keretes dobozban, mint a szekciók */
.fejlec-doboz { background: #fff; border: 1px solid #e3e3e3; border-radius: 6px;
  padding: .9rem 1.25rem; margin: 0 0 1.5rem; box-sizing: border-box; }
.fejlec-doboz h1 { margin: 0 0 .25rem; }
.fejlec-doboz .halvany { margin: 0; }
/* a vezérlősávok (időszak-gombok, kategória-legend) fölötti kis cím */
.vezerlo-cim { font-weight: 600; font-size: .9rem; color: #333; margin: 0 0 .6rem; }
/* vízszintes elválasztó a fő blokkok között (ugyanaz a vonal, mint a .szekcio+.szekcio-nál) */
.blokk-vonal { border: none; border-top: 1px solid #e3e3e3; margin: 1.5rem 0; }

.szekcio { display: flex; gap: 1.5rem; align-items: flex-start; margin: 1.5rem 0; }
/* A1: a két nagy blokk vizuális elválasztása (a margó önmagában nem látszott) */
.szekcio + .szekcio { border-top: 1px solid #e3e3e3; padding-top: 1.5rem; }
/* blokk-elkülönítés (2026-08-18): FEHÉR háttér + finom keret + lekerekített sarok (a #fafafa szürkézés
   [d86af56] felülírva — a szürke rosszabb volt). A négy nagy blokk (2 vezerlo-sav + 2 tartalom) így KÜLÖNÜL. */
.vezerlo-sav { flex: 0 0 14rem; position: sticky; top: 1rem; align-self: flex-start;
  background: #fff; border: 1px solid #e3e3e3; border-radius: 6px; padding: .75rem; box-sizing: border-box; }
#kulcsszo-blokk, #trend-blokk, #heti-blokk, #idosor-blokk { flex: 1; min-width: 0;
  background: #fff; border: 1px solid #e3e3e3; border-radius: 6px; padding: 1rem; box-sizing: border-box; }

/* KATEGÓRIA-IDŐSOR kétdobozos: bal #idosor-legend (kattintható HTML-legend, a Chart.js belső legend reprodukciója),
   jobb #idosor-blokk (h2 → chart → magyarázat). A pötty kerek szürke; aktív = kék pötty + kék szöveg. */
#idosor-legend { display: flex; flex-direction: column; gap: .1rem; }
#idosor-legend .idosor-legend-elem { display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: .25rem .3rem; background: none; border: none; border-radius: 4px; cursor: pointer;
  font-size: .9rem; color: #444; text-align: left; }
#idosor-legend .idosor-legend-elem:hover { background: #f2f2f2; }
#idosor-legend .idosor-legend-pont { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%;
  background: #cccccc; }
#idosor-legend .idosor-legend-elem.kiemelt { color: #3366cc; font-weight: 600; }
#idosor-legend .idosor-legend-elem.kiemelt .idosor-legend-pont { background: #3366cc; }
#idosor-legend .idosor-legend-elem:focus-visible { outline: 2px solid #3366cc; outline-offset: 2px; }
#idosor-blokk .idosor-adat { display: none; }   /* rejtett DOM-tükör (data-* assertálható, nem látszik) */
#idosor-blokk .idosor-chart-doboz { position: relative; height: 440px; width: 100%; }
#idosor-blokk .idosor-magyarazat { color: #666; font-size: .85rem; margin: .6rem 0 0; max-width: 55rem; }
#heti-blokk .heti-tabla { width: 100%; border-collapse: collapse; }
#heti-blokk .heti-nap-sor { border-top: 1px solid #eee; }
#heti-blokk .heti-nap { white-space: nowrap; vertical-align: top; padding: .4rem .8rem .4rem 0; color: #333; font-weight: 600; }
#heti-blokk .heti-szavak { vertical-align: top; padding: .4rem 0; color: #444; line-height: 1.4; }
#heti-blokk .heti-nap-sor .heti-szavak:only-child, #heti-blokk .heti-ures { color: #999; }
@media (max-width: 900px) {
  .szekcio { flex-direction: column; }
  /* column módban a fő tengely FÜGGŐLEGES → a flex:0 0 14rem MAGASSÁGOT fixálna (üresen 224px, az első
     kártyát a rootMargin-zóna alá tolja); auto-basis + static a természetes magasságra ejti (L10). */
  .vezerlo-sav { flex: 0 0 auto; position: static; }
}
/* Fő menüsor — Excel-munkalap stílusú kis fülek (fülecskék) */
#fomenu { display: flex; gap: .2rem; margin: 0 0 -1px; padding: 0 .4rem; position: relative; z-index: 1; }
#fomenu a { padding: .28rem .85rem; font-size: .82rem; text-decoration: none; color: #666;
  background: #ededed; border: 1px solid #ddd; border-bottom: none; border-radius: 7px 7px 0 0; }
#fomenu a:hover { background: #e4e4e4; }
#fomenu a.aktiv { background: #fff; color: #1a3a8a; font-weight: 600; border-color: #e3e3e3;
  border-bottom: 1px solid #fff; }

/* „Az adatokról" oldal — tematikus dobozok (mint a főoldal szekciói) */
#adatokrol { max-width: 44rem; }
.adat-csoport { font-size: 1.25rem; margin: 1.8rem 0 .8rem; padding-bottom: .3rem;
  border-bottom: 2px solid #d4d4d4; color: #222; }
.adat-csoport:first-child { margin-top: 0; }
.adat-doboz { background: #fff; border: 1px solid #e3e3e3; border-radius: 6px;
  padding: .8rem 1.2rem; margin: 0 0 1rem; }
.adat-doboz h2 { font-size: 1.05rem; margin: 0 0 .4rem; }
.adat-doboz p { line-height: 1.55; margin: .4rem 0; }
.adat-doboz li { line-height: 1.55; }
.adat-doboz ol { margin: .3rem 0 .3rem 1.3rem; }
.adat-doboz > *:last-child { margin-bottom: 0; }

/* üres lábléc — a tartalom és a lábléc között a szokásos elválasztó vonal (mint a .blokk-vonal) */
#labresz { margin-top: 1.5rem; border-top: 1px solid #e3e3e3; padding-top: 1.5rem; min-height: 2.5rem; }

/* hibaállapot: a loader ezt írja a blokk konténerébe (nem néma, §7.5) */
.hiba { color: #a00; }

/* Task 6 vezérlők + 8b-utáni layout-javítás: a gomb + ok-szöveg párok wrapper nélkül INLINE összefolytak
   (a „2 hét"/„1 hó" a szövegek KÖZÉ ékelődött). Fix: a konténer flex-column (intervallumok egymás alatt),
   minden .intervallum-tetel flex-row (a gomb + a saját .ok egy sorban). A gombköz margin-right → wrapper-gap. */
#intervallum-vezerlo { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
/* item 2: a tétel OSZLOP (gomb-sor + magyarázat alatta); a gomb-sor a régi flex-row (gomb + .ok egy sorban) */
#intervallum-vezerlo .intervallum-tetel { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; }
#intervallum-vezerlo .intervallum-gomb-sor { display: flex; align-items: baseline; gap: .5rem; }
/* kék vonal a kísérő szöveg elé (ⓘ nélkül); FIX magasságú sáv (pseudo), hogy MIND egyforma hosszú legyen,
   függetlenül attól, hogy a szöveg 1 vagy 2 sorra tördel */
#intervallum-vezerlo .gomb-magyarazat { font-size: .7rem; color: #888; line-height: 1.1;
  position: relative; padding-left: .5rem; }
#intervallum-vezerlo .gomb-magyarazat::before {
  content: ""; position: absolute; left: 0; top: .05rem; width: 3px; height: .8rem;
  background: #3366cc; border-radius: 1px; }
#intervallum-vezerlo button { padding: .3rem .7rem; cursor: pointer;
  background: #fff; border: 1px solid #ccc; border-radius: 4px; color: #222;
  min-width: 3.5rem; box-sizing: border-box; white-space: nowrap; }

#intervallum-vezerlo button[aria-pressed="true"] { font-weight: bold; background: #e8e8e8; }
#intervallum-vezerlo button[disabled] { cursor: not-allowed; color: #6b6b6b; background: #f0f0f0; }
#intervallum-vezerlo .ok { color: #666; font-size: .85rem; }

/* Task 10 §2: a dátum-<select> érintési célmérete AA-ra (19px → >=24px, kényelmes 32px); egérrel is bukó volt.
   MIN-CSS (08-18): a #intervallum-vezerlo szabályblokk KÖZÜL kiemelve (a gomb- és a date-select-szabály közé
   ékelődött) — a date-select KÜLÖN vezérlő. Rendering-no-op: más elem, más specificitás, nincs átfedő szabály. */
/* naptár nap-választó (inline; a select helyett) */
#datum-valaszto .naptar { font-size: .82rem; }
.naptar-fej { display: flex; align-items: center; justify-content: space-between; margin-bottom: .3rem; }
.naptar-cim { font-weight: 600; color: #333; }
.honap-lep { border: none; background: none; cursor: pointer; font-size: 1.15rem; color: #333;
  padding: 0 .4rem; border-radius: 4px; line-height: 1.3; }
.honap-lep:hover:not([disabled]) { background: #eee; }
.honap-lep[disabled] { color: #ccc; cursor: default; }
.naptar-racs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.naptar-fejnap { text-align: center; font-size: .68rem; color: #999; padding: .1rem 0; }
.nap-cella { aspect-ratio: 1; min-height: 28px; display: flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer; border-radius: 50%; font-size: .8rem; color: #222; padding: 0; }
.nap-cella:hover:not([disabled]) { background: #eef2ff; }
.nap-cella.nem-valaszthato { color: #ccc; cursor: default; }   /* nincs adat → kicsit szürke, nem-választható */
.nap-cella.szomszed-honap { color: #ddd; }
.nap-cella.valasztott { background: #3366cc; color: #fff; font-weight: 600; }
.nap-cella.valasztott:hover { background: #2a52a0; }
/* heti naptár: a kiválasztott HÉT mind a 7 napja UGYANÚGY néz ki, mint a napi kiválasztott (kék kör, fehér szám) */
#heti-valaszto .nap-cella.valasztott-het { background: #3366cc; color: #fff; font-weight: 600; }
#heti-valaszto .nap-cella.valasztott-het:hover { background: #2a52a0; }
.ures { color: #666; font-style: italic; }

/* „Elemzés" fül — VALÓS csempék + diff-összegzés (.elemzes-megfigyeles kék bal-szegéllyel,
   mint a többi kiemelés, #3366cc) + folyó AI-próza (.elemzes-szoveg <p>-ekként, réteg nélkül). */
#elemzes { display: grid; grid-template-columns: minmax(15rem, 20rem) 1fr; gap: 1.5rem; align-items: start; max-width: 72rem; }
#elemzes-naptar { margin: 0; max-width: none; position: sticky; top: 1rem; }
.elemzes-szekcio { background: #fff; border: 1px solid #e3e3e3; border-radius: 6px;
  padding: .8rem 1.2rem; margin: 0 0 1rem; }
.elemzes-szekcio h3 { font-size: 1rem; margin: 0 0 .4rem; }
.elemzes-szoveg { color: #333; margin: .3rem 0 .7rem; line-height: 1.55; }
.elemzes-megfigyeles { border-left: 3px solid #3366cc; padding-left: .6em; margin: .3em 0; }
.elemzes-csempek { margin: 0 0 1rem; }
.elemzes-csempe { display: inline-block; border: 1px solid #e3e3e3; border-radius: 6px; padding: .3em .6em; margin: .2em; }
.elemzes-csempe.irany-emelkedik { border-color: #3366cc; color: #1a3a8a; }
.elemzes-csempe.irany-csokken { border-color: #a00; color: #a00; }
.elemzes-felkapott-csempe { display: inline-block; border: 1px solid #e3e3e3; border-radius: 6px;
  padding: .3em .6em; margin: .2em; background: #f5f8ff; }
@media (max-width: 760px) { #elemzes { grid-template-columns: 1fr; } #elemzes-naptar { position: static; } }

/* Task 9b kulcsszó-blokk — szavankénti chartok, domen-csoportokban (rács, small multiples).
   A kártya-magasság KELL a lusta rendereléshez: enélkül a canvasok összeesnek és nem lóg túl a viewporton. */
#kulcsszo-blokk .frissesseg { color: #666; font-style: italic; font-size: .9rem; margin: .25rem 0 1rem; }
/* H2a: EXPLICIT 2 oszlop (nem auto-fill minmax — az a konténer-szélességtől függött, 3-at is adott);
   a minmax(0,1fr) engedi a kártyát a konténer FELÉRE zsugorodni (a canvas min-content nélkül). <900px → 1 oszlop. */
#kulcsszo-blokk .domen-csoport { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0; }
@media (max-width: 900px) { #kulcsszo-blokk .domen-csoport { grid-template-columns: 1fr; } }
#kulcsszo-blokk .domen-fejlec { grid-column: 1 / -1; font-size: 1rem; margin: .5rem 0 0; }
#kulcsszo-blokk .kulcsszo-chart { border: 1px solid #d0d0d0; border-radius: 4px; padding: .5rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.06); }
/* H1: látható kulcsszó-címke a canvas fölött (visszafogott: félkövér, kis alsó margó) */
#kulcsszo-blokk .kulcsszo-cimke { font-size: .9rem; font-weight: 600; margin: 0 0 .3rem; }
/* item 3: felbontás-felirat (óránkénti/napi/heti) — visszafogott, a címke alatt, minden kártyán */
#kulcsszo-blokk .felbontas { font-size: .72rem; color: #888; margin: 0 0 .4rem; }
/* H2b: a Chart.js kanonikus wrapper — fix magasság + position:relative, a canvas ezt tölti ki 100%-ban */
#kulcsszo-blokk .chart-doboz { position: relative; height: 250px; }
#kulcsszo-blokk .merteszamok { font-size: .8rem; margin: .4rem 0 0; }
#kulcsszo-blokk .tengely-felirat { font-size: .7rem; color: #666; margin: .1rem 0 0; }
#kulcsszo-blokk .csupa-nulla, #kulcsszo-blokk .elettartam { font-size: .75rem; color: #666; margin: .2rem 0 0; }
/* TELJES-NEZET: a kártya forrás-felirata (honnan van adata) — a felbontás-sorral egyező halvány stílus */
#kulcsszo-blokk .teljes-forras-felirat { font-size: .72rem; color: #888; margin: .2rem 0 0; }

/* Task 7 trend-blokk — napi felkapott trendlista + kategória-eloszlás chart + kategória-szűrő.
   Az összefoglaló (chart+magyarázat+szűrő) a lista FÖLÖTT (áttekintés → részletek). Csak saját stílus. */
#trend-blokk .trend-osszefoglalo { margin: 1rem 0 1.25rem; }
/* a Chart.js kanonikus wrapper — fix magasság + position:relative, a canvas ezt tölti ki (mint a 9b chart-doboz) */
#trend-blokk .kategoria-chart-doboz { position: relative; height: 200px; max-width: 40rem; }
#trend-blokk .kategoria-magyarazat { font-size: .8rem; color: #666; margin: .4rem 0 .6rem; max-width: 40rem; }
#trend-blokk .kategoria-szuro { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 0; }
#trend-blokk .kategoria-gomb { padding: .25rem .6rem; font-size: .85rem; cursor: pointer;
  border: 1px solid #ccc; border-radius: 999px; background: #fff; color: #222; }
#trend-blokk .kategoria-gomb[aria-pressed="true"] { font-weight: bold; background: #3366cc; color: #fff; border-color: #3366cc; }
/* „Other" — a besorolás Google-gyűjtővödre: vizuálisan elválik (szürke), az OSZTÁLYON keresztül (nem számított szín) */
#trend-blokk .kategoria-gomb--other { border-color: #bbb; color: #666; }
#trend-blokk .kategoria-gomb--other[aria-pressed="true"] { background: #9e9e9e; color: #fff; border-color: #9e9e9e; }
/* az "Összes" reset-gomb szűrt állapotban: visszafogott hangsúly (keret + szöveg), a "×" a kilépést jelzi */
#trend-blokk .kategoria-gomb--reset-aktiv { border-color: #a33; color: #a33; font-weight: 600; }
/* explicit rejtés: a szűrt kártya biztosan tűnjön el (a natív [hidden]-t a rács-elem display-e felül ne írja) */
#trend-blokk .trend-kartya[hidden] { display: none; }
#trend-blokk .trend-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0; }
@media (max-width: 900px) { #trend-blokk .trend-lista { grid-template-columns: 1fr; } }
#trend-blokk .trend-kartya { border: 1px solid #d0d0d0; border-radius: 4px; padding: .6rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.06); }
#trend-blokk .trend-kifejezes { font-size: .95rem; font-weight: 600; margin: 0 0 .25rem; }
#trend-blokk .trend-volumen { font-size: .85rem; color: #333; margin: 0 0 .2rem; }
#trend-blokk .trend-kategoria { font-size: .75rem; color: #666; margin: 0; }
/* 8b: MÉRT magasság — 96px. Mérve 2026-08-09 adaton (e2e/_diag, eldobva), a legrosszabb tüskés
   (gundel takács gábor: 84% nulla / 11 izolált tüske) + a legfolytonosabb (autó: 26% nulla) kártyán,
   380px és 1280px szélességen: 96px-en a sűrű 8-perces klaszter és a görbe-ív OLVASHATÓ; 64px összenyomja,
   112px nem ad érdemi pluszt (+16px/kártya áron). A csúcs-levágást a y-fejtér (max:110) oldja, NEM a magasság.
   A magasítás a kulcsszó-blokkot (fent) nem tolja → a T11 lusta-render őr zöld marad (méréssel igazolva). */
#trend-blokk .trend-sparkline-doboz { position: relative; height: 96px; margin-top: .4rem; }
/* 8b (LELET 2): a normalizálás-magyarázat vizuálisan ELVÁLIK a kategória-magyarázattól (bal akcentus-border
   + halvány/dőlt), hogy ne olvadjon annak második bekezdésévé. A lista fölött, a szekció szélességében. */
#trend-blokk .trend-normalizalas-magyarazat { font-size: .8rem; color: #555; font-style: italic;
  border-left: 3px solid #3366cc; padding: .3rem 0 .3rem .6rem; margin: .6rem 0 .2rem; max-width: 40rem; }
#trend-blokk .trend-idosor-ures { color: #666; font-style: italic; font-size: .85rem; margin-top: .4rem; }
#trend-blokk .trend-idosor-ures-blokk { color: #666; font-style: italic; margin: .5rem 0; }

/* SZEMLE 08-19: EGYSÉGES információ-jelző a magyarázó szövegekre (a trend-normalizalas mintája, amit a user kért):
   kék bal-szegély (#3366cc) + ⓘ ikon (::before, nem kézzel a szövegbe) + dőlt. Minden „hogyan olvasd" magyarázat
   egyformán néz ki. A meglévő szabályok UTÁN áll → azonos specificitásnál ez nyer a közös tulajdonságokra. */
#kulcsszo-blokk .frissesseg,
#trend-blokk .kategoria-magyarazat,
#idosor-blokk .idosor-magyarazat,
#trend-blokk .trend-normalizalas-magyarazat,
.attekinto-panel .attekinto-magyarazat,
#adatokrol .adat-magyarazat {
  font-style: italic; color: #555; font-size: .85rem;   /* ne legyen nagyobb, mint a többi honlap-szöveg */
  border-left: 3px solid #3366cc; padding: .3rem 0 .3rem .6rem;
}
#kulcsszo-blokk .frissesseg::before,
#trend-blokk .kategoria-magyarazat::before,
#idosor-blokk .idosor-magyarazat::before,
#trend-blokk .trend-normalizalas-magyarazat::before,
.attekinto-panel .attekinto-magyarazat::before,
#adatokrol .adat-magyarazat::before {
  content: "ⓘ ";   /* az ⓘ CSS-ből (nem a szövegben) — így egységes és a szövegek nem duplázzák */
}

/* Task 10 §3: látható billentyűzet-fókusz (eddig nem volt focus-CSS; az A2 explicit gomb-háttere mellett
   a natív ring inkonzisztens). :focus-visible → csak billentyűzetnél, egérkattintásnál nem villan. */
#intervallum-vezerlo button:focus-visible,
#trend-blokk .kategoria-gomb:focus-visible,
#datum-valaszto .nap-cella:focus-visible,
#datum-valaszto .honap-lep:focus-visible { outline: 2px solid #3366cc; outline-offset: 2px; }

/* Task 10 §2: érintő-eszközön minden vezérlő tap-magassága >= 44px (AAA 2.5.5 komfort). A DESKTOP VÁLTOZATLAN.
   A pill/szögletes forma megmarad — csak a magasság nő. */
@media (pointer: coarse) {
  #intervallum-vezerlo button,
  #trend-blokk .kategoria-gomb,
  #datum-valaszto .nap-cella { min-height: 44px; }
}

/* A panel EGY keretes box, ugyanaz a minta, mint a többi szekció (#kulcsszo-blokk stb., 21-22. sor). */
.attekinto-panel { background: #fff; border: 1px solid #e3e3e3; border-radius: 6px; padding: 1rem; box-sizing: border-box; }

/* TÖMÖR ELRENDEZÉS: a kategória-cellák FIX oszlop-rácsban, a nagy kategóriák egymás MELLETT, a teljes
   szélességben; az oszlopok közt vékony elválasztó csík (border-left a nem-első oszlopon). Cellán belül a
   domén-címke balra (fix szélesség), a szó-chipek jobbra (wrap). */
.attekinto-panel .attekinto-lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: .15rem 0; max-width: 100%; }
.attekinto-panel .attekinto-sor { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .6rem;
  padding: .25rem 1.3rem; min-width: 0; }
.attekinto-panel .attekinto-sor:not(:nth-child(3n+1)) { border-left: 1px solid #eee; }   /* csík az oszlopok közt */
.attekinto-panel .attekinto-domen { flex: 0 0 8.5rem; font-weight: 600; font-size: .85rem; }
.attekinto-panel .attekinto-chipek { display: flex; flex-wrap: wrap; gap: .3rem .4rem; flex: 1 1 0; min-width: 0; }
.attekinto-panel .attekinto-kartya { display: inline-flex; align-items: center; gap: .3rem;
  padding: .1rem .5rem; border: 1px solid #e2e2e2; border-radius: 999px; font-size: .85rem; white-space: nowrap;
  cursor: pointer; }
.attekinto-panel .attekinto-kartya:hover { border-color: #3366cc; background: #f5f8ff; }
.attekinto-panel .attekinto-kartya:focus-visible { outline: 2px solid #3366cc; outline-offset: 1px; }
/* a MAI ELTÉRÉS ikonja a szó ELŐTT: ▲ felette ZÖLD · ▼ alatta PIROS · • illeszkedik SZÜRKE (trendkövető, semleges) */
.attekinto-panel .attekinto-ikon[data-illeszkedes="felette"]::before     { content: "▲"; color: #2e7d32; }
.attekinto-panel .attekinto-ikon[data-illeszkedes="alatta"]::before      { content: "▼"; color: #b23c3c; }
.attekinto-panel .attekinto-ikon[data-illeszkedes="illeszkedik"]::before { content: "•"; color: #777; }
/* TREND-panel ikonjai: ▲ növekvő ZÖLD · ▼ csökkenő PIROS · ■ stagnáló/esemény SZÜRKE NÉGYZET */
.attekinto-panel .attekinto-ikon[data-trend="novekszik"]::before { content: "▲"; color: #2e7d32; }
.attekinto-panel .attekinto-ikon[data-trend="csokken"]::before   { content: "▼"; color: #b23c3c; }
.attekinto-panel .attekinto-ikon[data-trend="stagnal"]::before   { content: "■"; color: #777; font-size: .8em; }
.attekinto-panel .attekinto-ikon[data-trend="esemeny"]::before   { content: "■"; color: #777; font-size: .8em; }

/* reszponzív oszlopszám: 3 → 2 → 1, a csík mindig a nem-első oszlopon (a keskeny nézet 1 oszlop, csík nélkül) */
@media (max-width: 1100px) {
  .attekinto-panel .attekinto-lista { grid-template-columns: repeat(2, 1fr); }
  .attekinto-panel .attekinto-sor { border-left: none; }
  .attekinto-panel .attekinto-sor:not(:nth-child(2n+1)) { border-left: 1px solid #eee; }
}
@media (max-width: 700px) {
  .attekinto-panel .attekinto-lista { grid-template-columns: 1fr; }
  .attekinto-panel .attekinto-sor { border-left: none; padding-left: 0; }
  .attekinto-panel .attekinto-domen { flex-basis: 100%; }
}