/* =============================================================================
   v3-kit.css — a Mediapartizan Workspace EGYSÉGES V3 alaprétege (W2 · 0. hullám)
   -----------------------------------------------------------------------------
   MI EZ? A jóváhagyott „Nyugodt munkaközpont" (V3, D-220) vizuális nyelvének
   KÖZÖS forrása: a meleg felület-lépcső, a ZÖLD egyetlen akcent, a három betű-
   szerep és az alap-komponensek EGY fájlban. Ez lesz a ~90 régi oldal közös
   alapja, hogy egyik se másolja újra a tokeneket vagy a markupot.

   IGAZSÁGFORRÁS: docs/modules/w2-design-coherence/DESIGN_SYSTEM_V3.md (§2, §3, §5).
   Az értékek a `home_v3.css` MÉRT tokenjei; a `--v3-accent-tint` és a
   `--v3-on-accent` a §2.3 szerinti kiegészítés (a tömör zöld gombhoz / aktív
   jelvényhez kell).

   ELVEK
   • EGY akcent, és az ZÖLD (világos #2F6B4F / sötét #7FAE93) — sehol lila.
   • A szín ÁLLAPOT, nem dekoráció; a típust ikon + szó hordozza, soha a szín.
   • Token-vezérelt, hardcode-mentes: a komponensek CSAK var(--v3-*)-ot írnak,
     nyers hex kizárólag a lenti token-definíciókban él.
   • A sötét/világos váltás a HÁZ kapcsolójára hallgat (html[data-theme=…], D-225)
     — nincs árva kapcsoló.
   ============================================================================= */

/* ══════════════════════════════════════════════════════════════════════════
   1. TOKENEK — világos világ (meleg papír) + állandó zöld akcent
   ══════════════════════════════════════════════════════════════════════════ */
[data-v3] {
  /* — RÉTEGSORREND (z-index) — D-223. NE TALÁLJ KI ÚJ SZÁMOT. ————————————————
     MIÉRT ITT? Mert a panel/fátyol/toast/felugró NEM egy lap sajátja: a Kezdőlap, a
     Munkám, a Projekt-otthon, a tétel- és a jóváhagyás-lap MIND ugyanazt a panelt
     nyitja. Amíg ezek a számok egyetlen oldal-CSS-ben éltek, minden további lapnak
     újra ki kellett volna találnia őket — és a hej PADLÓJA ALATT landolt volna.
     A hej saját skálája: 1100 felső sáv · 1200 oldalsáv · 1290/1300 fiók + háttér ·
     1400 gyors-AI · 1401 DM-panel · 1450 hej-felugró · 1600 kereső · 9000 overlay. */
  --v3-z-scrim: 1500;
  --v3-z-panel: 1501;
  --v3-z-toast: 1502;   /* a visszajelzés a panel fölött is látszik */
  --v3-z-fab:   1402;   /* mobil rögzítő-gomb: a hej gombjai fölé, a panel alá */
  --v3-z-pop:   1499;   /* „Későbbre" választó: a hej fölé, de a panel/fátyol ALÁ (D-226) */

  /* — Betűszerepek (állandó identitás; rendszerbetűk, külső CDN nélkül) — */
  --v3-font-display: ui-serif, Georgia, "Times New Roman", serif;
  --v3-font-ui:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --v3-font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;

  /* — Akcent: AZ EGYETLEN kiemelő szín (világos) — */
  --v3-accent:       #2F6B4F;
  --v3-accent-hover: #265740;
  --v3-accent-tint:  rgba(47, 107, 79, .12);   /* aktív menü-háttér, halk zöld kiemelés */
  --v3-on-accent:    #FFFFFF;                   /* tömör zöldre írt szöveg (AA a #2F6B4F-en) */

  /* — Felület / szöveg (meleg papír) — */
  --v3-bg:            #F7F5F1;
  --v3-bg-raised:     #FBFAF7;
  --v3-surface:       #FFFFFF;
  --v3-surface-muted: #F2EFE9;
  --v3-border:        #E8E3DA;
  --v3-border-strong: #DCD6CA;
  --v3-divider:       #F1EDE5;
  --v3-track-empty:   #D6D0C4;
  --v3-ink:           #211E1A;
  --v3-text-2:        #54504A;
  --v3-text-3:        #6E6A61;
  --v3-text-4:        #767066;

  /* — Elsődleges (tartalom) gomb = tömör „tinta" pill (NEM zöld) — */
  --v3-btn-primary-bg: #211E1A;
  --v3-btn-primary-tx: #F6F4EF;

  /* — Állapot (SOHA nem akcent) — */
  --v3-ok:   #2C5A42;  --v3-ok-bg:   #EAF2EA;
  --v3-warn: #7A5014;  --v3-warn-bg: #F6EEDC;
  --v3-crit: #A8462F;  --v3-crit-bg: #F6E7E1;
  /* Figyelmeztető PANEL (halkabb, mint a warn-chip) — a tehermentesítő sáv, a blokkolási
     ajánlás és a „Későbbre" figyelmeztetés használja, három külön lapon. Ezért közös. */
  --v3-warn-panel:        #FBF7EC;
  --v3-warn-panel-border: #EBE2CE;

  /* — Térköz / sugár / árnyék — */
  --v3-sp-1: 4px;  --v3-sp-2: 8px;  --v3-sp-3: 12px;
  --v3-sp-4: 16px; --v3-sp-5: 24px; --v3-sp-6: 32px;
  --v3-r-card: 14px;  --v3-r-box: 12px;  --v3-r-menu: 10px;  --v3-r-pill: 999px;
  --v3-shadow-card: 0 2px 10px rgba(30, 25, 18, .04);

  /* — FÁTYOL (a réteglap mögötti sötétítés) —————————————————————————————————
     ⚠️ EZ EGY VALÓDI HIBÁT JAVÍT. A `--v3-scrim` tokenre NÉGY fájl hivatkozott
     (`inbox_w2.css`, `my_work_v3.css`, `work_item_detail_v3.css` kétszer), de
     SEHOL nem volt meghatározva — mindegyik a saját tartalék-értékére esett
     vissza, és azok NEM voltak azonosak. Vagyis ugyanaz a fátyol laponként más
     sötét volt, és ezt egyetlen helyen sem lehetett állítani.
     KÉT fátyol van, mert két dolog van, és ez szándékos:
       `--v3-scrim`      = a képernyőt elfoglaló réteglap mögé (erős, .45),
       `--v3-scrim-soft` = az oldalról benyíló panel mögé (halk, .18 — a
                           Kezdőlap `.v3-scrim` osztálya ma pont ezt használja).
     A shadow-tokenek külön vannak: az árnyék NEM fátyol, csak véletlenül volt
     ugyanaz a szám a `work_item_detail_v3.css`-ben. */
  --v3-scrim:      rgba(30, 26, 18, .45);
  --v3-scrim-soft: rgba(24, 21, 16, .18);
  --v3-shadow-panel: 0 12px 30px rgba(30, 26, 18, .28);
  --v3-shadow-sheet: 0 18px 44px rgba(30, 26, 18, .28);
}

/* ══════════════════════════════════════════════════════════════════════════
   2. TOKENEK — sötét világ (meleg grafit). A HÁZ témájára hallgat (D-225):
   dark · focus-dark · studio-dark. NEM inverz: halkabb állapot, papír-világos
   gombok, világos zöld akcent sötét tintával.
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] [data-v3],
html[data-theme="focus-dark"] [data-v3],
html[data-theme="studio-dark"] [data-v3] {
  --v3-accent:       #7FAE93;
  --v3-accent-hover: #93BFA5;
  --v3-accent-tint:  rgba(127, 174, 147, .16);
  --v3-on-accent:    #1C1A17;                   /* világos zöldre sötét tinta (AA) */

  --v3-bg:            #1C1A17;
  --v3-bg-raised:     #211E1B;
  --v3-surface:       #26231F;
  --v3-surface-muted: #2E2B25;
  --v3-border:        #35312A;
  --v3-border-strong: #454037;
  --v3-divider:       #2E2B25;
  --v3-track-empty:   #454037;
  --v3-ink:           #EDE9E0;
  --v3-text-2:        #A8A296;
  --v3-text-3:        #9C9587;
  --v3-text-4:        #8A8478;

  --v3-btn-primary-bg: #EDE9E0;
  --v3-btn-primary-tx: #1C1A17;

  --v3-ok:   #8FC3A4;  --v3-ok-bg:   #222E25;
  --v3-warn: #D3A75C;  --v3-warn-bg: #322A1C;
  --v3-crit: #DB9078;  --v3-crit-bg: #33231E;
  --v3-warn-panel:        #2A2419;
  --v3-warn-panel-border: #3D3527;

  --v3-shadow-card: none;
  /* Sötétben a fátyol ERŐSEBB: a réteglap felülete (#26231F) közel van a
     háttérhez (#1C1A17), ezért a világos .45 nem választaná el őket. */
  --v3-scrim:      rgba(0, 0, 0, .60);
  --v3-scrim-soft: rgba(0, 0, 0, .32);
  --v3-shadow-panel: 0 12px 30px rgba(0, 0, 0, .45);
  --v3-shadow-sheet: 0 18px 44px rgba(0, 0, 0, .5);
}

/* ══════════════════════════════════════════════════════════════════════════
   2/b. A JOBB ALSÓ SAROK EMELETEI — EGY GAZDA, NEM NÉGY
   ──────────────────────────────────────────────────────────────────────────
   ⚠️ EZ EGY VALÓDI, TELEFONON LEFÉNYKÉPEZETT HIBÁT JAVÍT (2026-07-31).

   A jobb alsó sarokba NÉGY külön fájl tett le lebegő elemet, és mindegyik
   FELTÉTELEZETT valamit a másik háromról:

     visszajelzés-gomb  `.fbw4`     → assets/feedback_w4.css   ⚠️ MÁR NEM LEBEG
     gyors-AI           `.quick-ai` → assets/style.css
     üzenet-buborék     `.dm-fab`   → lib.php (render_dm_widget <style>)
     régi visszajelzés  `.mpn-fb`   → lib.php (render_feedback_widget <style>)

   Mindegyik KÉZZEL számolta ki, hányadik „emeleten" ül (20 · 84 · 196 px), és
   mindegyik külön képlettel emelte magát a mobil alsó sáv fölé. Amíg négy hely
   számol ugyanarról, előbb-utóbb két elem ugyanoda kerül — és pontosan ez
   történt: a „Visszajelzés" gomb rátakart előbb egy dátum-mezőre, aztán egy
   „Megnézem" gombra. Nem az volt a baj, hogy rossz szám állt valahol, hanem
   hogy NEM VOLT GAZDA.

   INNENTŐL EZ A GAZDA. Aki új lebegő elemet tesz a jobb alsó sarokba, ITT vesz
   magának emeletet — és SOHA nem ír be pixelt a saját fájljába.

   ⚠️ W11 — A TANULSÁG, AMI EBBŐL LETT (2026-08-01, a tulajdonos sokadik jelzése).
   Az „egy gazda" rend HELYES, de KEVÉS volt: a „Visszajelzés" gomb az 1. emeletről
   is takart, mert a lebegtetés MÉRTÉKE sosem volt a hiba —

       ⚠️ BÁRMI, AMI A TARTALOM FÖLÖTT ÚSZIK, ELŐBB-UTÓBB ELTAKAR VALAMIT.

   Ezért a „Segítség" és a „Visszajelzés" gomb KIKÖLTÖZÖTT innen: a FELSŐ SÁVBAN
   él, a kereső mellett, és a panelje legördülő (`assets/feedback_w4.css`,
   `assets/help_w4.css`). Az 1. emelet ezzel a mai, éles állapotban ÜRESEN maradt
   — a tokent mégsem töröljük, mert a kapcsoló-ki állapotban a régi buborék
   (`.mpn-fb`) még mindig ott ül. Aki új elemet tenne a jobb alsó sarokba: előbb
   gondolja végig, hogy KELL-E ODA LEBEGNIE. A sávban van hely.

   MIÉRT `:root` ÉS NEM `[data-v3]`: ezek az elemek a lap VÉGÉN születnek
   (lib.php `render_page_end()`), a `[data-v3]` dobozon KÍVÜL — a `[data-v3]`-ra
   tett változó pedig csak a doboz leszármazottjaiban létezik (lásd §8 és a
   home_v3.php-beli figyelmeztetés). A `:root` a `<html>`: mindenkinek szülője.

   MIÉRT KÉT KÉSZLET (asztali + „-mobil") ÉS NEM EGY MÉDIA-KAPCSOLÓ: mert a
   mobil emelést nem mindig kell alkalmazni — a gomb csak akkor lép a sáv fölé,
   ha a lapon TÉNYLEG van alsó sáv (`.mpn-mobilenav~…`). Ezt a HÍVÓ tudja, nem a
   token. Egy média-kapcsolós token olyan lapokon is feltolná az elemeket,
   ahol nincs mi elé kitérni.

   A SZÁMOK (mobil, 64 px-es sáv — az emeletek helye VÁLTOZATLAN):
     1. emelet   76 px …  (44 px magas gombbal 120-ig)   régi visszajelzés-buborék
                                                          (kapcsoló-ki; ma ÜRES)
     2. emelet  160 px …  (…204-ig)                       gyors-AI
     3. emelet  272 px …  (…316-ig)                       üzenetek
   Hézag az 1. és 2. között 40 px, a 2. és 3. között 68 px — egyik sem takar.
   Asztali gépen: 20 · 84 · 196 (hézag 20 és 68).

   Az 1. és 2. emelet köze mobilon 20 px-szel nagyobb, mint asztali gépen. Ez
   MA is így van (a `--v3-lebego-koz-*` és `--v3-lebego-koz-*-mobil` páros őrzi
   meg), és nem baj: mindkettőbe elfér a 44 px-es gomb. Ha valaha egységesíteni
   akarod, EGY sort kell átírni — nem négy fájlt átfésülni.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* — mérőszámok — */
  --v3-lebego-sav:   var(--mpn-mobilenav-h, 64px);  /* a mobil alsó sáv magassága */
  --v3-lebego-hezag: 12px;                          /* levegő a sáv és az 1. emelet közt */
  --v3-lebego-perem: 20px;                          /* a lap alsó pereme asztali gépen */
  --v3-lebego-gomb:  44px;                          /* egy lebegő gomb magassága = érintési cél */

  /* — az oszlop TALPA: innen indul a számolás — */
  --v3-lebego-talp:       var(--v3-lebego-perem);
  --v3-lebego-talp-mobil: calc(var(--v3-lebego-sav) + var(--v3-lebego-hezag));

  /* — az emeletek TÁVOLSÁGA a talptól — */
  --v3-lebego-koz-1:   0px;   --v3-lebego-koz-1-mobil:   0px;
  --v3-lebego-koz-2:  64px;   --v3-lebego-koz-2-mobil:  84px;
  --v3-lebego-koz-3: 176px;   --v3-lebego-koz-3-mobil: 196px;

  /* — AZ EMELETEK: EZT hivatkozzák az elemek, mást nem — */
  --v3-lebego-1: calc(var(--v3-lebego-talp) + var(--v3-lebego-koz-1));
  --v3-lebego-2: calc(var(--v3-lebego-talp) + var(--v3-lebego-koz-2));
  --v3-lebego-3: calc(var(--v3-lebego-talp) + var(--v3-lebego-koz-3));
  --v3-lebego-1-mobil: calc(var(--v3-lebego-talp-mobil) + var(--v3-lebego-koz-1-mobil));
  --v3-lebego-2-mobil: calc(var(--v3-lebego-talp-mobil) + var(--v3-lebego-koz-2-mobil));
  --v3-lebego-3-mobil: calc(var(--v3-lebego-talp-mobil) + var(--v3-lebego-koz-3-mobil));

  /* — a lap alsó tere: az alsó sáv + a legalsó emelet lakója + levegő ——————————
     Eddig itt egy külön 150 px-es szám állt, aminek semmi köze nem volt az
     emeletekhez — ha valaki feljebb tolt egy gombot, ez néma maradt, és a lap
     alja eltűnt alatta. Ezért kötöttük az emeletekhez.

     ⚠️ W11 — ITT MOST VISSZAVETTÜNK 84 PIXELT (214 → 130). A képlet a 2. EMELETIG
     tartott fenn helyet, mert az 1. és a 2. emeleten IS ült valami: alul a
     „Visszajelzés" pirula, fölötte a gyors-AI. A „Visszajelzés" azóta a felső
     sávba költözött, a gyors-AI pedig a keret mai állapotában szintén a sávban
     él (`render_quick_ai_widget()` kapcsoló-on nem renderel lebegőt). Marad, ami
     tényleg kell: a keret 64 px-es alsó sávja, fölötte EGY gomb magassága
     (a kapcsoló-ki állapot régi buborékja, illetve a Kezdőlap bal oldali „+"
     gombja ül itt), plusz 10 px levegő → 76 + 44 + 10 = 130 px.

     Amit NEM veszünk vissza: a sáv magasságát. Telefonon az alsó sáv FIX, tehát
     a lap utolsó sora enélkül továbbra is alácsúszna.

     (A 3. emelet — üzenet-buborék — szándékosan kimarad: a lebegő gomb a görgetés
     BÁRMELY pillanatában takarhat, azon a padding nem segít; a padding csak azt
     garantálja, hogy a lap UTOLSÓ sora kigörgethető a legalsó emelet alól.) */
  --v3-lebego-also-ter: calc(var(--v3-lebego-1-mobil) + var(--v3-lebego-gomb) + 10px);
}

/* ══════════════════════════════════════════════════════════════════════════
   3. ALAP — a V3-burok maga
   ══════════════════════════════════════════════════════════════════════════ */
[data-v3] { background: var(--v3-bg); color: var(--v3-ink); font-family: var(--v3-font-ui);
  min-height: 100%; }
[data-v3] *, [data-v3] *::before, [data-v3] *::after { box-sizing: border-box; }

/* Szakaszcímke (eyebrow) — mono, ritkított, UPPERCASE; a vonal a sor végéig */
.v3-eyebrow-row { display: flex; align-items: center; gap: var(--v3-sp-3); margin: 0 0 var(--v3-sp-3); }
/* A `display:flex` a darabszám (`.v3-eyebrow-n`) miatt kell: a szakaszcímke mellé alapvonalra
   igazított, halk szám kerül. Korábban ez csak a kezdőlap CSS-ében élt — de a számláló minden
   listás szakaszon ugyanígy kell, ezért a közös alapba való. */
.v3-eyebrow { font-family: var(--v3-font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .16em; color: var(--v3-text-4); margin: 0; flex: none;
  display: flex; align-items: baseline; gap: var(--v3-sp-2); }
.v3-eyebrow-n { font-size: 11px; color: var(--v3-text-3); letter-spacing: 0; }
.v3-eyebrow-line { flex: 1; height: 1px; background: var(--v3-border); }

/* ══════════════════════════════════════════════════════════════════════════
   4. KÁRTYA — tömör felület, halk árnyék, 14px sugár (nem üveg, nem blur)
   ══════════════════════════════════════════════════════════════════════════ */
.v3-card { background: var(--v3-surface); border: 1px solid var(--v3-border);
  border-radius: var(--v3-r-card); box-shadow: var(--v3-shadow-card); overflow: hidden; }
.v3-card-pad { padding: 22px 28px; }
/* Mobilon a kártya szűkebb belső tere — a 28px oldalt 390px-en elveszi a tartalom helyét.
   A közös alapban él, hogy MINDEN kártyás lap ugyanúgy szűküljön, ne csak a kezdőlap. */
@media (max-width: 767px) { .v3-card-pad { padding: 18px 18px; } }

/* ══════════════════════════════════════════════════════════════════════════
   5. GOMBOK — oldalanként EGY elsődleges. A zöld ritka és felismerhető marad.
   ══════════════════════════════════════════════════════════════════════════ */
.v3-btn, .v3-btn-accent, .v3-btn-ghost, .v3-btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: 13px; font-weight: 600; padding: 9px 16px;
  border-radius: var(--v3-r-pill); border: 1px solid transparent; cursor: pointer;
  text-decoration: none; transition: background .14s ease, opacity .14s ease, border-color .14s ease; }

/* Elsődleges (tartalom): tömör „tinta" pill */
.v3-btn { background: var(--v3-btn-primary-bg); color: var(--v3-btn-primary-tx); }
.v3-btn:hover { opacity: .9; }

/* Akcent (rendszer/AI-moment): tömör ZÖLD — ritka, kiemelt */
.v3-btn-accent { background: var(--v3-accent); color: var(--v3-on-accent); }
.v3-btn-accent:hover { background: var(--v3-accent-hover); }

/* Másodlagos: átlátszó, vonalas */
.v3-btn-ghost { background: transparent; color: var(--v3-text-2);
  border-color: var(--v3-border-strong); font-weight: 500; }
.v3-btn-ghost:hover { background: var(--v3-surface-muted); }

/* Veszély: NEM tömör piros — vonalas, a piros ritka (mellé mindig megerősítés) */
.v3-btn-danger { background: transparent; color: var(--v3-crit); border-color: var(--v3-crit); }
.v3-btn-danger:hover { background: var(--v3-crit-bg); }

.v3-btn-sm { font-size: 12px; padding: 6px 12px; }
.v3-actions { display: flex; gap: var(--v3-sp-2); align-items: center; flex-wrap: wrap; }
/* Érintési cél ≥44px mobilon (D-227, WCAG). A közös alapban: ami gomb, az MINDEN lapon
   megfoghatóan nagy legyen — ezt korábban laponként kellett volna újra megírni. */
@media (max-width: 767px) {
  .v3-btn, .v3-btn-accent, .v3-btn-ghost, .v3-btn-danger { min-height: 44px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   6. PILL / JELVÉNY — a TÍPUST soha nem a szín hordozza (ikon + szó)
   ══════════════════════════════════════════════════════════════════════════ */
/* Típus-pill: semleges felület, ikon + szó */
.mw-type { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  border-radius: var(--v3-r-pill); font-family: var(--v3-font-ui); font-size: 11px;
  line-height: 1.5; white-space: nowrap; color: var(--v3-text-2);
  background: var(--v3-surface-muted); border: 1px solid var(--v3-border); }
.mw-type .ui-icon { flex: none; width: 14px; height: 14px; color: var(--v3-text-3); }

/* Állapot-pill: tint CSAK ha állapotot jelöl (ok/warn) */
.v3-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px;
  font-weight: 600; padding: 3px 10px; border-radius: var(--v3-r-pill);
  color: var(--v3-text-2); background: var(--v3-surface-muted); border: 1px solid var(--v3-border); }
.v3-pill--ok   { color: var(--v3-ok);   background: var(--v3-ok-bg);   border-color: transparent; }
.v3-pill--warn { color: var(--v3-warn); background: var(--v3-warn-bg); border-color: transparent; }
.v3-pill--crit { color: var(--v3-crit); background: var(--v3-crit-bg); border-color: transparent; }

/* Nav-jelvény: figyelmet kérő = kis ZÖLD pill; sima darabszám = halk mono */
.v3-badge-accent { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--v3-r-pill);
  font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
  background: var(--v3-accent); color: var(--v3-on-accent); }
.v3-badge-count { font-family: var(--v3-font-mono); font-size: 11.5px; color: var(--v3-text-3); }

/* ══════════════════════════════════════════════════════════════════════════
   7. FÜL / NÉZETVÁLTÓ — aláhúzós, aktív = ZÖLD alsó vonal (a11y-minta)
   URL-t váltó nézet: <a href> + aria-current="page". Lapon belüli:
   role="tablist"/role="tab" + aria-selected + nyílbillentyűs mozgás.
   ══════════════════════════════════════════════════════════════════════════ */
.mw-tabs { display: flex; gap: var(--v3-sp-4); border-bottom: 1px solid var(--v3-border);
  overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mw-tab { display: inline-flex; align-items: center; gap: 6px; padding: 10px 2px;
  min-height: 44px; font: inherit; font-size: 14px; font-weight: 500; color: var(--v3-text-2);
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  text-decoration: none; white-space: nowrap; cursor: pointer; }
.mw-tab:hover { color: var(--v3-ink); }
.mw-tab-on, .mw-tab[aria-selected="true"], .mw-tab[aria-current="page"] {
  color: var(--v3-accent); border-bottom-color: var(--v3-accent); font-weight: 600; }
.mw-tab-n { font-family: var(--v3-font-mono); font-size: 12px; color: var(--v3-text-3); }

/* ══════════════════════════════════════════════════════════════════════════
   8. TEENDŐ-PANEL — a jobbról benyíló panel BELSEJE (D-234): összefoglaló,
   adatsorok, műveletek, űrlapok, kapcsolatok, eseménytörténet.
   ──────────────────────────────────────────────────────────────────────────
   MIÉRT A KÖZÖS ALAPBAN? Mert UGYANEZT a panelt öt lap nyitja — Kezdőlap,
   Munkám, Projekt-otthon, tétel-részletlap, jóváhagyás —, a jelölőjét pedig
   mind az öt ugyanabból a helyről (`home_v3_panel_lib.php`) kapja.

   ⚠️ EZ EGY VALÓDI HIBÁT IS JAVÍT, NE ÍRD VISSZA A RÉGIT. A `.v3p-form` itt
   korábban EGY BEVITELI MEZŐ leírása volt (keret + háttér + 44px magasság) —
   csakhogy a jelölőben a `.v3p-form` maga a `<form>`. Vagyis a közös alap
   dobozt rajzolt az űrlap KÖRÉ, a `.v3p-label`-t pedig mono-nagybetűssé tette,
   miközben a címke valójában a mezőt is magában foglaló rács. A Kezdőlap
   panelje pontosan ezt kapta, a többi lap pedig csak azért nem, mert ott a
   `my_work_v3.css` később felülírta. A mezőket most a `.v3p-form` GYEREKEIN
   címezzük — ez az, ami a jelölővel egyezik.
   ══════════════════════════════════════════════════════════════════════════ */
.v3p-summary { font-size: 14px; line-height: 1.6; color: var(--v3-text-2); margin: 0 0 var(--v3-sp-4); }
.v3p-meta { margin: 0 0 18px; padding: 0; display: grid; gap: var(--v3-sp-2); }
.v3p-meta-row { display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: baseline; }
.v3p-meta-row dt { margin: 0; font-size: 12px; color: var(--v3-text-3); }
.v3p-meta-row dd { margin: 0; font-size: 13.5px; color: var(--v3-ink); word-break: break-word; }

.v3p-ops { display: flex; flex-wrap: wrap; gap: var(--v3-sp-2); margin: 0 0 14px; }
.v3p-formslot { margin: 0 0 18px; }

/* Blokkolási kapcsolatok + eseménytörténet */
.v3p-h3 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--v3-text-3); margin: 18px 0 var(--v3-sp-2); }
.v3p-none { font-size: 13px; color: var(--v3-text-3); margin: 0 0 var(--v3-sp-2); }
.v3p-conseq { font-size: 13px; color: var(--v3-ink); margin: 0 0 var(--v3-sp-2); font-weight: 600; }
.v3p-deplist { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: var(--v3-sp-2); }
.v3p-dep { padding: var(--v3-sp-2) 10px; border: 1px solid var(--v3-border);
  border-radius: var(--v3-r-menu); background: var(--v3-bg-raised); }
.v3p-dep.is-proposed { border-style: dashed; }
.v3p-deplink { background: none; border: 0; padding: 0; font: inherit; font-size: 13.5px;
  font-weight: 600; color: var(--v3-accent); cursor: pointer; text-align: left; }
.v3p-deplink:hover { text-decoration: underline; }
.v3p-dep-meta { font-size: 12px; color: var(--v3-text-3); margin-top: 3px; }
.v3p-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px;
  border-radius: var(--v3-r-pill); margin-left: 6px; vertical-align: middle; }
.v3p-badge-approved { background: var(--v3-warn-bg); color: var(--v3-text-2); }
.v3p-badge-proposed { background: transparent; color: var(--v3-text-3);
  border: 1px dashed var(--v3-border-strong); }

.v3p-evlist { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 10px; }
.v3p-ev { padding-left: var(--v3-sp-3); border-left: 2px solid var(--v3-divider); }
.v3p-ev-tx { font-size: 13.5px; color: var(--v3-ink); line-height: 1.5; }
.v3p-ev-meta { font-size: 12px; color: var(--v3-text-4); margin-top: 2px; }

/* ── A MEZŐ — a felület EGYETLEN beírható alakja ────────────────────────────
   MIÉRT KERÜLT IDE? Mert három lap három külön mező-szabályt írt magának, és
   HÁROM KÜLÖNBÖZŐ eredmény jött ki ugyanarra a dologra:
     belépő   44px magas · 10px 12px belső tér · 15px betű
     Tudástár 40px magas ·  9px 12px belső tér · 14px betű  ← a 40px ráadásul
              az érintési cél alatt volt (D-227), csak mobilon javították 44-re
     panel    44px magas ·  9px 12px belső tér · 14px betű
   Ez pontosan az a „majdnem ugyanaz", amitől a felület nem egységesnek látszik,
   miközben minden lap „a mai nyelvet beszéli". A kánoni alak a panelé (44 · 9/12
   · 14px), mert azt használja a legtöbb lap. Új lap NE írjon sajátot: `.v3-input`
   önmagában, vagy `.v3-field`-be csomagolva a címkével együtt.
   A `.v3p-*` (panel) nevek megmaradnak — ugyanez az EGY szabály festi őket. */
.v3-input, .v3-field input, .v3-field select, .v3-field textarea,
.v3-form-scope input[type="text"], .v3-form-scope input[type="search"],
.v3-form-scope input[type="date"], .v3-form-scope input[type="email"],
.v3-form-scope input[type="number"], .v3-form-scope input[type="password"],
.v3-form-scope input[type="url"], .v3-form-scope select, .v3-form-scope textarea,
.v3p-form input[type="text"], .v3p-form input[type="datetime-local"],
.v3p-form input[type="date"], .v3p-form input[type="email"],
.v3p-form input[type="number"], .v3p-form input[type="password"],
.v3p-form input[type="search"], .v3p-form select, .v3p-form textarea {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 9px 12px; font: inherit;
  font-size: 14px; color: var(--v3-ink); background: var(--v3-bg-raised);
  border: 1px solid var(--v3-border); border-radius: var(--v3-r-menu); box-shadow: none; }
.v3-input::placeholder, .v3-field input::placeholder, .v3-form-scope input::placeholder,
.v3p-form input::placeholder, .v3p-form textarea::placeholder { color: var(--v3-text-4); }
textarea.v3-input, .v3-field textarea, .v3-form-scope textarea, .v3p-form textarea {
  min-height: 64px; resize: vertical; line-height: 1.5; }
/* A fókusz SOHA nem csak szín: látható körvonal + keret-váltás. */
.v3-input:focus, .v3-field input:focus, .v3-field select:focus, .v3-field textarea:focus,
.v3-form-scope input:focus, .v3-form-scope select:focus, .v3-form-scope textarea:focus,
.v3p-form input:focus, .v3p-form select:focus, .v3p-form textarea:focus {
  outline: 2px solid var(--v3-accent); outline-offset: 1px; border-color: var(--v3-accent); }

/* ── `.v3-form-scope` — MIÉRT VAN, ÉS MIKOR HASZNÁLD ────────────────────────
   Nem minden lap tud minden mezőre osztályt tenni: van, ahol húsz mező van
   három űrlapon, és a jelölőt nem érdemes húsz helyen bolygatni. Az ilyen lap
   a KÖRÜLVEVŐ dobozra teszi ezt az egy osztályt, és onnantól minden mezője a
   közös alakot kapja — a lapnak nem kell (és NEM SZABAD) saját mező-szabályt
   írnia. Ez a tétel váltotta ki: a Tudástár 40px magas mezőket írt magának, a
   belépő 44-eset, a panel szintén 44-eset — három hely, három eredmény. */

/* Címke + mező egy rácsban. A `margin: 0` NEM kozmetika: az alap `style.css`
   minden `label`-nek ad 6px alsó margót, ami ráadódna a rács 5px-ére, és a
   címke–mező távolság laponként eltérne. */
.v3-field { display: grid; gap: 5px; }
.v3-field > label, .v3-label { font-size: 12.5px; color: var(--v3-text-3); margin: 0; }
.v3-hint, .v3p-hint { font-size: 12px; color: var(--v3-text-3); margin: 0; line-height: 1.5; }

/* Űrlapok a panelben — a `.v3p-form` a FORM, a `.v3p-label` a címke+mező rácsa. */
.v3p-form { display: grid; gap: var(--v3-sp-3); }
.v3p-label { display: grid; gap: 5px; font-size: 12px; color: var(--v3-text-3); }
.v3p-check { display: flex; align-items: center; gap: var(--v3-sp-2); font-size: 13.5px;
  color: var(--v3-ink); min-height: 32px; }
.v3p-check input { width: 18px; height: 18px; flex: none; }
.v3p-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--v3-sp-3); }
.v3p-flags { border: 1px solid var(--v3-divider); border-radius: var(--v3-r-menu);
  padding: 10px var(--v3-sp-3); display: grid; gap: var(--v3-sp-1); margin: 0; }
.v3p-flags legend { font-size: 12px; color: var(--v3-text-3); padding: 0 var(--v3-sp-1); }
.v3p-form-actions { display: flex; flex-wrap: wrap; gap: var(--v3-sp-2); margin-top: var(--v3-sp-1); }
.v3p-warn { font-size: 13px; color: var(--v3-warn); background: var(--v3-warn-bg);
  border: 1px solid var(--v3-warn-panel-border); border-radius: var(--v3-r-menu);
  padding: 9px var(--v3-sp-3); line-height: 1.5; }

@media (max-width: 767px) {
  .v3p-meta-row { grid-template-columns: 1fr; gap: 2px; }
  .v3p-grid2 { grid-template-columns: 1fr; }
  .v3p-ops .v3-btn, .v3p-form-actions .v3-btn { min-height: 44px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   9. ÁLLAPOTOK — üres / hiba / tiltott (nyugodt, nem riasztó)
   ══════════════════════════════════════════════════════════════════════════ */
/* Üres: EGY mondat / ✓ + hint — soha nem nagy kongó doboz */
.v3-empty { display: flex; gap: 14px; align-items: center; padding: 6px 0; }
.v3-empty-t { font-size: 15px; font-weight: 600; color: var(--v3-ink); }
.v3-empty-s { font-size: 13.5px; color: var(--v3-text-3); }

/* Hiba (per blokk): megmondja MI nem frissült; a lap többi része él */
.v3-err { background: var(--v3-bg-raised); border: 1px solid var(--v3-border);
  border-radius: var(--v3-r-box); padding: 18px 20px; }
.v3-err p { margin: 0 0 6px; font-size: 13.5px; color: var(--v3-text-2); }
.v3-err-when { font-family: var(--v3-font-mono); font-size: 11.5px; color: var(--v3-text-4); }

/* Beágyazott jelzés: bal-szegélyes doboz szemantikus tinttel (szín SOHA egyedüli jel) */
.v3-note { border-left: 3px solid var(--v3-border-strong); background: var(--v3-surface-muted);
  border-radius: var(--v3-r-box); padding: 12px 16px; font-size: 13.5px; color: var(--v3-text-2); }
.v3-note--ok   { border-left-color: var(--v3-ok);   background: var(--v3-ok-bg); }
.v3-note--warn { border-left-color: var(--v3-warn); background: var(--v3-warn-bg); }
.v3-note--crit { border-left-color: var(--v3-crit); background: var(--v3-crit-bg); }

/* Tiltott (fail-closed): nyugodt lakat + EGY mondat + a gazda neve.
   Flag-off → 404, nincs-hozzáférés → 403. Nyers 403-szöveg tilos. */
.v3-denied { max-width: 560px; margin: 40px auto; padding: var(--v3-sp-5) var(--v3-sp-6);
  background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: var(--v3-r-card);
  box-shadow: var(--v3-shadow-card); text-align: center; }
.v3-denied-ico { color: var(--v3-text-3); margin-bottom: var(--v3-sp-3); }
.v3-denied-title { font-family: var(--v3-font-display); font-size: 20px; font-weight: 600;
  color: var(--v3-ink); margin: 0 0 var(--v3-sp-2); }
.v3-denied-body { font-size: 14px; color: var(--v3-text-2); margin: 0 0 var(--v3-sp-2); }
.v3-denied-owner { font-size: 13.5px; color: var(--v3-ink); }
.v3-denied-actions { display: flex; gap: var(--v3-sp-3); justify-content: center;
  flex-wrap: wrap; margin-top: var(--v3-sp-5); }

/* Betöltő csontváz — az AI-nál MELLÉ a window.AIElapsed mp-számláló KÖTELEZŐ (D-152) */
.v3-skel { background: var(--v3-surface-muted); border-radius: 6px;
  animation: v3kitpulse 1.6s ease-in-out infinite; }
@keyframes v3kitpulse { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }

/* ══════════════════════════════════════════════════════════════════════════
   10. FÓKUSZ + MOZGÁS — WCAG. A fókusz soha nem csak szín: látható ZÖLD gyűrű.
   ══════════════════════════════════════════════════════════════════════════ */
[data-v3] :focus-visible { outline: 2px solid var(--v3-accent); outline-offset: 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--v3-accent) 25%, transparent); border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  [data-v3] *, [data-v3] *::before, [data-v3] *::after {
    animation-duration: 0ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   11. ELRENDEZÉS-BUROK — a tartalom középre, bőséges holttérrel
   Műszerfal: .v3-wrap (1136). Lista/triázs egy hasáb: + .mw-wrap (900).
   (Azonos érték, mint a home_v3.css — ha valaha együtt töltődne, nem ütközik.)
   ══════════════════════════════════════════════════════════════════════════ */
.v3-wrap { max-width: 1136px; margin: 0 auto; padding: 38px 40px 64px; }
.mw-wrap { max-width: 900px; }
@media (max-width: 1199px) { .v3-wrap { padding: 28px 24px 64px; } }
/* ⚠️ TELEFONON A LAP ALJA HÁROM DOLOG ALÁ CSÚSZOTT (2026-07-31, élő képernyőkép alapján).
   A 96px kevés volt: alul a keret 64px magas sávja ÁLL, fölötte pedig LEBEGNEK a §2/b emeletei.
   A szabadságkérelem képernyőképén emiatt vágódott el a mező alatti magyarázó mondat — a
   felhasználó szempontjából egyszerűen hiányzott a szöveg vége.

   ⚠️ ITT KORÁBBAN EGY KÜLÖN 150 px-es SZÁM ÁLLT. Az volt a baj vele, hogy semmi nem kötötte a
   lebegőkhöz: aki feljebb tolt egy gombot, annak ez a szám néma maradt. Most a §2/b-ből jön
   (`--v3-lebego-also-ter`), tehát MAGÁTÓL követi az emeleteket. Aki új emeletet nyit, annak itt
   nincs dolga.

   ⚠️ W11: az érték 214-ről 130 px-re CSÖKKENT — a „Visszajelzés" és a „Segítség" gomb kiköltözött
   a jobb alsó sarokból a felső sávba, tehát a nekik fenntartott emeletnyi hely fölöslegessé vált.
   Ami maradt: a keret 64 px-es alsó sávja + egy gombnyi magasság + levegő. A sáv helyét telefonon
   továbbra is ki kell hagyni — az FIX, alatta nincs mit görgetni. A számot NEM itt kell átírni,
   hanem a §2/b-ben. */
@media (max-width: 767px)  {
  .v3-wrap { padding: 20px 16px var(--v3-lebego-also-ter); }
}

/* Lap-fejléc — szerif cím + alcím; osztott változatban jobbra a mellék-műveletek */
.v3-head { margin: 0 0 22px; }
.v3-head.is-split { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; }
.v3-head h1 { font-family: var(--v3-font-display); font-size: 26px; line-height: 1.2;
  font-weight: 500; letter-spacing: -.01em; margin: 0 0 6px; color: var(--v3-ink); }
.v3-head-sub { font-size: 14px; line-height: 1.55; color: var(--v3-text-2); max-width: 64ch; margin: 0; }
@media (max-width: 767px) { .v3-head.is-split { flex-direction: column; }
  .v3-head .v3-actions .v3-btn-ghost { min-height: 44px; } }

/* ══════════════════════════════════════════════════════════════════════════
   12. LISTA / SOR — a ~40 lista/triázs-oldal közös alapja (DESIGN_SYSTEM_V3 §5.3).
   Sorok 1px osztóval RÁCSBA fogva (nem táblázat), 14px sugarú keretben.
   ══════════════════════════════════════════════════════════════════════════ */
.mw-tabs { margin-bottom: 18px; }                 /* a nézetváltó és a lista közé levegő */
.mw-list { display: grid; gap: 1px; background: var(--v3-border);
  border: 1px solid var(--v3-border); border-radius: var(--v3-r-card); overflow: hidden; }
.mw-row { display: flex; gap: 16px; align-items: flex-start; padding: 16px 20px;
  background: var(--v3-surface); }
.mw-row:hover { background: var(--v3-bg-raised); }
.mw-row-main { flex: 1; min-width: 0; }
.mw-row-top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 5px; }
.mw-title { font-size: 15px; font-weight: 600; color: var(--v3-ink); }
a.mw-title { text-decoration: none; }
a.mw-title:hover { color: var(--v3-accent); }
.mw-metas { display: flex; gap: 14px; flex-wrap: wrap; }
.mw-meta { font-size: 12px; color: var(--v3-text-3); }
.mw-meta-l { color: var(--v3-text-4); }
.mw-row-act { display: flex; gap: 6px; flex: none; align-items: center; }
/* Súlyosság: NEM piros kártya — halk bal-csík, CSAK valódi figyelemnél (warn/crit). */
.mw-sev-warn { box-shadow: inset 3px 0 0 var(--v3-warn); }
.mw-sev-crit { box-shadow: inset 3px 0 0 var(--v3-crit); }
.mw-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; align-self: center; }
.mw-sev-warn .mw-dot { background: var(--v3-warn); }
.mw-sev-crit .mw-dot { background: var(--v3-crit); }
/* Üres lista: EGY mondat (a .v3-empty is jó erre). */
.mw-empty { font-size: 14.5px; color: var(--v3-text-3); padding: 28px 4px; margin: 0; }
@media (max-width: 767px) {
  .mw-row { flex-direction: column; gap: 12px; padding: 16px; }
  .mw-row-act { width: 100%; }
  .mw-row-act .v3-btn, .mw-row-act .v3-btn-ghost { flex: 1; min-height: 44px; }
}