/* ============================================================================
 * MelóPont — felületek és rétegek (SURFACE-01, 2026.10.12)
 *
 * László: „a felület homogén fehér, a kártyák elveszítik a körvonalukat,
 * az információk összeolvadnak” — szabad kéz a színekben, csak halvány,
 * elegáns szürkék / pasztellek.
 *
 * A koncepció: „hűvös pala” — négy réteg, mindegyik alig láthatóan, de
 * egyértelműen elválik a következőtől (fehéren mért kontraszt zárójelben):
 *
 *   0. VÁSZON   --mp-surface-0  #ECEFF3  az oldal háttere            (1,15:1)
 *   1. KÁRTYA   --mp-surface-1  #FFFFFF  minden kártya és ablak
 *               --mp-line-1     #D8DEE6  a kártya kerete             (1,35:1)
 *               --mp-elev-1               lágy, kétrétegű árnyék
 *   2. BETÉT    --mp-surface-2  #F6F8FB  kártyán BELÜLI tétel / blokk (lista-sor,
 *               --mp-line-2     #E4E8EE  al-kártya) — nem olvad a kártyába
 *      MÉLYEDÉS --mp-bg (= vászon)       csoportosító doboz kártyán belül
 *                                         (tabletták, összesítő, „Röviden”)
 *   3. KIEMELÉS halvány pasztell, szerepkör szerint:
 *               --mp-tint-worker  #F2F7FD / keret #D3E3F5  (munkavállaló, kék)
 *               --mp-tint-company #F1F8F4 / keret #CDE6D7  (cég, zöld)
 *               --mp-tint-warm    #FFF8EC / keret #F0DDB5  (teendő, figyelem)
 *
 * Olvashatóság (számolva, WCAG): a másodlagos szöveg (#5B6676) a vásznon 5,05:1,
 * a betéten 5,47:1; a kék link (#0A66C2) a vásznon 4,93:1, a zöld (#057642) 4,95:1,
 * a pasztelleken a szerepkör-szín 5,3:1 — mind ≥ 4,5:1.
 *
 * EGYETLEN FORRÁS: minden lap <head>-jének UTOLSÓ stíluslapja (a lap saját
 * <style>-ja után), ezért a régi nevek (--mp-bg, --mp-card-border,
 * --mp-card-shadow, --mp-page-bg) itt kapják a végső értéküket.
 * Új oldalnál a </head> elé: <link rel="stylesheet" href="/css/mp-surfaces.css">
 * Hardkódolt háttérszín helyett ezeket a tokeneket használd.
 * Méri: scripts/ui-check/ui_audit.py — SURFACE szabály.
 * ========================================================================== */
:root {
  --mp-surface-0: #ECEFF3;
  --mp-surface-1: #FFFFFF;
  --mp-surface-2: #F6F8FB;
  --mp-line-1: #D8DEE6;
  --mp-line-2: #E4E8EE;
  --mp-elev-1: 0 1px 2px rgba(15, 23, 42, 0.05), 0 2px 10px rgba(15, 23, 42, 0.05);
  --mp-elev-2: 0 2px 4px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.08);

  --mp-tint-worker: #F2F7FD;
  --mp-tint-worker-line: #D3E3F5;
  --mp-tint-company: #F1F8F4;
  --mp-tint-company-line: #CDE6D7;
  --mp-tint-warm: #FFF8EC;
  --mp-tint-warm-line: #F0DDB5;

  /* régi nevek → az új rétegek (minden modul ezeken át kapja) */
  --mp-bg: var(--mp-surface-0);
  --mp-page-bg: var(--mp-surface-0);
  --mp-card-border: var(--mp-line-1);
  --mp-card-shadow: var(--mp-elev-1);

  /* a NÉZŐ szerepkörének kiemelő színe (html[data-mp-role] — js/mp-early.js) */
  --mp-tint-role: var(--mp-tint-worker);
  --mp-tint-role-line: var(--mp-tint-worker-line);
  /* …és teli színe (fő gomb, oldalfejléc ikonja) — PRIMARY-ONE-01 (10.13) */
  --mp-role: #0A66C2;
  --mp-role-hover: #084E96;
}
html[data-mp-role="company"] {
  --mp-tint-role: var(--mp-tint-company);
  --mp-tint-role-line: var(--mp-tint-company-line);
  --mp-role: #057642;
  --mp-role-hover: #045A32;
}

/* ── 1. réteg: kártyák — keret + árnyék tokenből ───────────────────────── */
.mp-card { border-color: var(--mp-line-1); box-shadow: var(--mp-elev-1); }

/* ── 2. réteg: kártyán belüli tételek (eddig fehér a fehéren) ──────────── */
/* Jelentkezéseid állapota / Álláshirdetéseid elérése — egy-egy álláshirdetés sora */
.mp-at-item { background: var(--mp-surface-2); border-color: var(--mp-line-2); }
a.mp-at-item:hover { background: var(--mp-surface-1); }
/* Szűrő-sáv dobozai, kereső-mezők csoportja */
.mp-sp-box { background: var(--mp-surface-2); }

/* ── 3. réteg: kiemelés — vezérlőpult profilkártyája szerepkör-színű fejsávot kap ── */
.dashboard-sidebar #profile-card {
  background:
    linear-gradient(var(--mp-tint-role), var(--mp-tint-role)) top / 100% 64px no-repeat,
    var(--mp-surface-1);
}
.dashboard-sidebar #profile-card .mp-profile-avatar,
.dashboard-sidebar #profile-card .mp-profile-avatar-img { box-shadow: 0 0 0 4px var(--mp-surface-1); }


/* ============================================================================
 * ÁLLAPOT-SZÍNEK (SIGNS-01, 2026.10.13) — az alkalmazás EGYETLEN állapot-palettája.
 * Javaslat: „MelóPont – egységes vizuális jelrendszer” (Claude Docs). Egy szín = egy jelentés,
 * mindig ikonnal + szóval együtt (js/mp-act.js). A szín a NÉZŐ helyzetét írja le.
 *   todo    borostyán — neked kell lépned
 *   urgent  piros     — sürgős (ha nem lépsz, lehetőség vész el)
 *   wait    szürke    — a másik félen a sor
 *   ok      zöld      — rendben / sikerült
 *   info    kék       — tudnivaló, nincs teendő
 *   closed  SZILVA    — lezárult (mást választottak, lejárt, visszavontad) — CSAK erre!
 *   off     halvány   — kikapcsolva (te kapcsoltad ki)
 * A szerepkör-szín (kék munkavállaló / zöld cég) állapotot NEM jelölhet.
 * Kontraszt (számolva): minden -ink a saját -bg hátterén ≥ 5,3:1 (closed: 6,9:1).
 * Méri: scripts/ui-check/signs_check.mjs
 * ========================================================================== */
:root {
  --mp-st-todo-bg: #FCEBC8;   --mp-st-todo-ink: #8A5300;   --mp-st-todo-line: #EBC77E;   --mp-st-todo-bar: #D99A1E;
  --mp-st-urgent-bg: #FBE0DD; --mp-st-urgent-ink: #A3261B; --mp-st-urgent-line: #EFB4AD; --mp-st-urgent-bar: #D0453A;
  --mp-st-wait-bg: #E9EDF2;   --mp-st-wait-ink: #475467;   --mp-st-wait-line: #CED5DF;   --mp-st-wait-bar: #98A2B3;
  --mp-st-ok-bg: #DDF1E5;     --mp-st-ok-ink: #146C43;     --mp-st-ok-line: #A9D9BC;     --mp-st-ok-bar: #2E9E65;
  --mp-st-info-bg: #DCEBFA;   --mp-st-info-ink: #0A5CAD;   --mp-st-info-line: #A9CBEF;   --mp-st-info-bar: #2E8BFF;
  /* ACTIVITY-BADGE-01 (10.17): „új esemény a másik féltől” — EGY jelentés (Vezérlőpult lila száma, Történt valami kártya) */
  --mp-fresh: #7B39ED; --mp-fresh-deep: #5B21B6; --mp-fresh-bg: #F4EFFF; --mp-fresh-line: #DCCBFB;
  --mp-st-closed-bg: #EEE8F7; --mp-st-closed-ink: #5A3F8C; --mp-st-closed-line: #D3C6EA; --mp-st-closed-bar: #8B6FB8;
  --mp-st-off-bg: #EEF0F3;    --mp-st-off-ink: #5B6676;    --mp-st-off-line: #D3D9E1;    --mp-st-off-bar: #B4BCC8;
}

/* ============================================================================
 * MOZGÁS KIKAPCSOLVA (SIGNS-01) — ha a felhasználó a telefonján / gépén kérte, hogy
 * kevesebb legyen a mozgás, MINDEN animáció áll (eddig 11 fájl nem vette figyelembe,
 * a lüktető értesítő-pötty soha nem állt meg). Az áttűnés rövidre vált, nem tűnik el,
 * így az állapotváltás továbbra is látszik. Egy helyen — modulonként nem kell külön.
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.08s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ── Egységes oldalfejléc (PAGE-HEAD-01, SIGNS-01 3. lépés, 2026.10.13) ─────────────────────────
   Az eszköz-oldalak (Fiókom, Gyors ajánlások, Időrendi felsorolás, Kapcsolati háló, Bértárgyalás-segéd,
   Hibabejelentés, Önéletrajz-készítő) tetején EGY minta: ikon + egyetlen fő cím + egy mondat, mire jó az oldal,
   a néző szerepkörének halvány hátterén. Itt (a <head> utolsó stíluslapjában) él, hogy az első rajzoláskor kész legyen.
   <header class="mp-ph"><span class="mp-ph-ic" aria-hidden="true"><svg data-ic="…" …></svg></span>
     <div class="mp-ph-txt"><h1>Cím</h1><p class="mp-ph-lead">Egy mondat.</p></div></header> */
.mp-ph {
  display: flex; align-items: flex-start; gap: 14px;
  margin: 8px 0 16px; padding: 16px 18px;
  background: var(--mp-tint-role); border: 1px solid var(--mp-tint-role-line);
  border-radius: var(--mp-card-radius, 16px);
}
.mp-ph-ic {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: calc(48px * var(--mp-fs, 1)); height: calc(48px * var(--mp-fs, 1)); border-radius: 14px;
  background: var(--mp-role); color: var(--mp-white, #FFFFFF);
}
.mp-ph-ic svg { width: 26px; height: 26px; }
.mp-ph-txt { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.mp-ph-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.mp-ph h1 {
  margin: 0; font-size: calc(24px * var(--mp-fs, 1)); font-weight: 800; line-height: 1.2;
  letter-spacing: -0.01em; color: var(--mp-text-primary, #1A1A1A);
}
.mp-ph-lead { margin: 6px 0 0; font-size: calc(15px * var(--mp-fs, 1)); line-height: 1.5; color: var(--mp-text-muted, #5B6676); }
.mp-ph-lead a { color: var(--mp-role); font-weight: 600; }
@media (max-width: 600px) {
  .mp-ph { gap: 12px; padding: 14px; margin-top: 4px; }
  .mp-ph-ic { width: calc(40px * var(--mp-fs, 1)); height: calc(40px * var(--mp-fs, 1)); border-radius: 12px; }
  .mp-ph-ic svg { width: 22px; height: 22px; }
  .mp-ph h1 { font-size: calc(21px * var(--mp-fs, 1)); }
}

/* ── Fő gomb a néző szerepkörének színében (PRIMARY-ONE-01, SIGNS-01 3. lépés, 2026.10.13) ──────────────
   A teli (fő) gomb színe = KINEK a felülete: munkavállalónak kék, cégnek zöld. Ezek a közös modulok eddig
   mindig kéket rajzoltak, így a cég oldalán a fő gomb „munkavállalós” volt. EGY helyen igazítjuk a nézőhöz
   (html[data-mp-role] — js/mp-early.js); vendégnél és munkavállalónál marad a kék. ÚJ fő gombnál eleve
   var(--mp-role)-t használj. Mérő: ui_audit.py PRIMARY. */
html[data-mp-role="company"] :is(.mp-rec-btn--main, .cp-btn--primary, .mp-tr-btn, .mp-2fa-btn:not(.mp-2fa-btn-sec):not(.mp-2fa-btn-danger),
  .mp-dx-btn:not(.mp-dx-btn-sec), .btn-start-chat, .cm-btn--primary, .mp-sp-go, .mp-br-submit, .mp-feed-empty-btn, .mp-feed-btn-primary):not(:disabled) {
  background: var(--mp-role); border-color: var(--mp-role); box-shadow: none;
}
html[data-mp-role="company"] :is(.mp-rec-btn--main, .cp-btn--primary, .mp-tr-btn, .mp-2fa-btn:not(.mp-2fa-btn-sec):not(.mp-2fa-btn-danger),
  .mp-dx-btn:not(.mp-dx-btn-sec), .btn-start-chat, .cm-btn--primary, .mp-sp-go, .mp-br-submit, .mp-feed-empty-btn, .mp-feed-btn-primary):not(:disabled):hover {
  background: var(--mp-role-hover); border-color: var(--mp-role-hover);
}

/* PILL-FIT-01 (2026.10.14, László: „a színnel kiemelt részeken kilóg a szöveg a kiemelő színből”): a több sorba tört
   kapszula / kerek doboz kisebb lekerekítést kap, hogy a sorok sarka a színes háttéren belül maradjon.
   Az osztályt a js/mp-ui.js teszi ki és veszi le magától (minden oldalon, a navbar tölti). */
.mp-pill-ml { border-radius: calc(12px * var(--mp-fs, 1)) !important; }

/* ORB-LIST-01 + ORB-LINE-01 (2026.10.16, László: „az info kártyákban a felsorolás függőleges gömbös megoldással”;
   „a gömbök legyenek összekötve függőleges vonallal”): EGY stílus minden szöveges felsoroláshoz — a súgóablakok
   („Infó”), a regisztráció „Ki mit lát?” része, a jogi oldalak listái. Tételenként egy sor, előtte gömb a
   szerepkör-színnel (--orb-c, a hívó felülírhatja), a gömböket halvány függőleges vonal köti össze (tételenként
   egy szakasz a gömb aljától a következő gömb tetejéig, így eltérő sormagasságnál sem szakad). Itt él, mert ez a
   stíluslap minden oldalon betöltődik. Méretek a betűméret-szorzóval nőnek. */
/* ORB-WHERE-01 (10.24): nulla súlyú alap — e lap minden oldalon UTOLSÓKÉNT töltődik, így a sima .mp-orb-list felülírta a
   modulok saját térközét és színét (súgó: a gömb a keretre ült; „Látnak a cégek?”: a címke összeért a listával). */
:where(.mp-orb-list) { --orb-c: var(--mp-role, #0A66C2); --orb-dot: calc(14px * var(--mp-fs, 1)); --orb-gap: 10px; --orb-lh: 1.5;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--orb-gap); margin: 0 0 12px; padding: 0; list-style: none; }
:where(.mp-orb-list):last-child { margin-bottom: 0; }
.mp-orb-list > li { --orb-top: calc((var(--orb-lh) * 1em - var(--orb-dot)) / 2);
  position: relative; margin: 0; padding-left: calc(var(--orb-dot) + 12px); line-height: var(--orb-lh); overflow-wrap: break-word; }
.mp-orb-list > li::marker { content: none; }
.mp-orb-list > li::before { content: ''; position: absolute; z-index: 1; left: 0; top: var(--orb-top); box-sizing: border-box;
  width: var(--orb-dot); height: var(--orb-dot); border-radius: 999px; border: 3px solid var(--orb-c);
  background: color-mix(in srgb, var(--orb-c) 14%, var(--mp-surface-1, #FFFFFF)); }
.mp-orb-list > li:not(:last-child)::after { content: ''; position: absolute; z-index: 0; left: calc(var(--orb-dot) / 2 - 1.5px); width: 3px;
  top: calc(var(--orb-top) + var(--orb-dot) - 1px); bottom: calc(-1 * var(--orb-gap) - var(--orb-top) - 1px); border-radius: 2px;
  background: color-mix(in srgb, var(--orb-c) 32%, var(--mp-surface-1, #FFFFFF)); }
/* címke + leírás: a félkövér címke a gömb sorában, alatta a magyarázat (súgóablak) */
.mp-orb-list .mp-orb-li-t { display: block; font-weight: 700; }
.mp-orb-list .mp-orb-li-d { display: block; margin-top: 2px; }
/* ORB-CARDS-01 (2026.10.27, László: „C ikonjait a D kártyáival”): az Infó ablakok és a „Hogyan működik?” felsorolása
   EGY alakban — tételenként ikonos gömb (34 px, szerepkör-keret, halvány háttér) + saját halvány kártya, a gömböket EGY
   folyamatos vonal köti össze (a gömb aljától a következő gömb tetejéig — nem szakad). A tételt a js/mp-ui.js
   `orbCards` alakítja (`is-carded`); amíg nem alakult át, a sima gömbös alak látszik. */
.mp-orb-list.mp-orb-list--cards { --orb-ic: calc(34px * var(--mp-fs, 1)); --orb-gap: 10px; gap: var(--orb-gap); }
.mp-orb-list.mp-orb-list--cards > li.is-carded { display: grid; grid-template-columns: var(--orb-ic) minmax(0, 1fr); column-gap: 12px;
  align-items: start; padding: 0; margin: 0; background: none; border: 0; }
.mp-orb-list.mp-orb-list--cards > li.is-carded::before { content: none; display: none; }
.mp-orb-list.mp-orb-list--cards > li.is-carded:not(:last-child)::after { left: calc(var(--orb-ic) / 2 - 1px); width: 2px;
  top: calc(var(--orb-ic) - 1px); bottom: calc(-1 * var(--orb-gap) - 1px); border-radius: 0;
  background: color-mix(in srgb, var(--orb-c) 30%, var(--mp-surface-1, #FFFFFF)); }
.mp-orb-list--cards .mp-orb-ic { position: relative; z-index: 1; grid-column: 1; grid-row: 1; box-sizing: border-box;
  width: var(--orb-ic); height: var(--orb-ic); border-radius: 999px; border: 2px solid var(--orb-c); color: var(--orb-c);
  background: color-mix(in srgb, var(--orb-c) 12%, var(--mp-surface-1, #FFFFFF));
  display: inline-flex; align-items: center; justify-content: center; }
.mp-orb-list--cards .mp-orb-ic svg { width: calc(17px * var(--mp-fs, 1)); height: calc(17px * var(--mp-fs, 1)); flex: 0 0 auto; }
.mp-orb-list--cards .mp-orb-card { grid-column: 2; grid-row: 1; min-width: 0; box-sizing: border-box; padding: 12px 14px;
  border-radius: 12px; background: var(--mp-surface-2, #F6F8FB); border: 1px solid var(--mp-line-2, #E3E8EF);
  line-height: 1.5; overflow-wrap: break-word; color: var(--mp-text, #191919); }
.mp-orb-list--cards .mp-orb-card .mp-orb-li-t { font-size: calc(15px * var(--mp-fs, 1)); font-weight: 700; }
.mp-orb-list--cards .mp-orb-card .mp-orb-li-d { font-size: calc(14px * var(--mp-fs, 1)); color: var(--mp-text-muted, #5B6676); margin-top: 2px; }

/* FRESH-FOCUS-01 (2026.10.18): aki miatt lila jelzés jött, annak a sora / kártyája elöl áll, lila kerettel —
   ugyanaz a jelentés, mint a lila számé (a másik fél új lépése). Bármely kártya-elemen (js/mp-focus.js). */
.mp-fc-hit { box-shadow: 0 0 0 2px var(--mp-fresh), 0 4px 14px rgba(123, 57, 237, .14) !important; }

/* ============================================================================
 * FONTOSSÁGI KIEMELÉS (EMPHASIS-01, 2026.10.18, László: „vizuálisan kicsit jobban emeld ki a fontosabb
 * dolgokat az alkalmazásban” — szabad kéz). Elv: ami a NÉZŐ lépésére vár, az előrelép (meleg háttér,
 * erősebb keret, kis árnyék); ami lezárult, az hátralép (betét-szürke, árnyék nélkül) — így a szem
 * magától a teendőn akad meg. Csak a meglévő jelentésekre épül (SIGNS-01 paletta: todo / urgent /
 * closed), új szín nincs. A sorokat a bennük lévő állapot-címke alapján ismeri fel (:has), így minden
 * modulban egyszerre él: Felvételi teendők, „Jelentkezők” sorai, Jelentkezéseid állapota,
 * Álláshirdetéseim. Kontraszt (számolva): a másodlagos szöveg a meleg háttéren ≥ 5,2:1, a piroson ≥ 5,0:1.
 * ========================================================================== */
:root {
  --mp-emph-todo-bg: color-mix(in srgb, var(--mp-st-todo-bg) 42%, var(--mp-surface-1));
  --mp-emph-urgent-bg: color-mix(in srgb, var(--mp-st-urgent-bg) 42%, var(--mp-surface-1));
  --mp-emph-lift: 0 2px 4px rgba(15, 23, 42, 0.06), 0 6px 18px rgba(15, 23, 42, 0.08);
}
/* 1. Neked kell lépned → előrelép */
.mp-act-item.mp-act-item--todo,
.mp-mj-card[data-state="active"].is-todo,
:is(.mp-jp-row, a.mp-at-item, .mp-hf-todo):has(:is(.mp-act-badge--todo, .mp-at-pill--todo)) {
  background: var(--mp-emph-todo-bg) !important;
  border-color: var(--mp-st-todo-line) !important;
  box-shadow: var(--mp-emph-lift);
}
/* 2. Sürgős → még erősebb (piros árnyalat) */
.mp-act-item.mp-act-item--urgent,
:is(.mp-jp-row, a.mp-at-item, .mp-hf-todo):has(:is(.mp-act-badge--urgent, .mp-at-pill--urgent)) {
  background: var(--mp-emph-urgent-bg) !important;
  border-color: var(--mp-st-urgent-line) !important;
  box-shadow: var(--mp-emph-lift);
}
/* 3. Lezárult → hátralép (a lezárt sor nem versenyez a figyelemért) */
.mp-act-item.mp-act-item--closed,
:is(.mp-jp-row, a.mp-at-item, .mp-hf-todo):has(:is(.mp-act-badge--closed, .mp-at-pill--closed)):not(:has(:is(.mp-act-badge--todo, .mp-act-badge--urgent))) {
  background: var(--mp-surface-2) !important;
  box-shadow: none;
}
/* 4. A teendő- és sürgős-címke halvány fénykört kap; a sürgős háromszor finoman jelez, aztán megáll
   (a „kevesebb mozgás” beállítás fent mindet leállítja) */
.mp-act-badge--todo { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mp-st-todo-bar) 18%, transparent); }
.mp-act-badge--urgent { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mp-st-urgent-bar) 22%, transparent);
  animation: mp-emph-ping 1.6s ease-out 3; }
@keyframes mp-emph-ping {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mp-st-urgent-bar) 45%, transparent); }
  100% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--mp-st-urgent-bar) 0%, transparent); }
}
/* 5. A fő lépés gombja (teli) kiemelkedik a keretes gombok közül */
:is(.mp-hf-btn--primary, .mp-hf-btn--company):not(:disabled) { box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18); }
:is(.mp-hf-btn--primary, .mp-hf-btn--company):not(:disabled):hover { box-shadow: 0 4px 12px rgba(15, 23, 42, 0.22); }
/* 6. (EDGE-NONE-01, 10.20) az oldalfejléc bal oldali szerepkör-sávja megszűnt — a fejléc halvány szerepkör-háttere jelzi a témát */

/* ============================================================================
 * DATE-QUIET-01 (2026.10.20 este, László: „a dátum-megjelenítéseket csináljuk vissza, ahogy régebben voltak
 * (vékonyabb szürke karakterek) — ne legyen kétféle”): EGY megjelenés minden időponthoz. Az elem marad
 * (mpFormat.timeHtml → <time class="mp-time">, a pontos dátum a magyarázó buborékban), de kapszula, keret,
 * háttér és félkövér nélkül: halvány szürke, normál vastagságú szöveg — mint a régi dátumok.
 * Visszaállítás: a 5ab927c-s változat ide visszamásolva (kapszula). Új időpontnál is csak ezt az elemet használd.
 * ========================================================================== */
.mp-time {
  display: inline; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  color: var(--mp-text-muted, #5B6676); font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: 0;
  white-space: normal; cursor: help;   /* BOX-FIT-01: a felirat és a dátum között törhet (a kettő külön-külön egyben marad) */
}
.mp-time-k { font-weight: 400; color: inherit; white-space: nowrap; }
/* BOX-FIT-01 (10.27): címkés időpont = két egység (felirat, dátum), amelyek egészben törnek egymás alá — a dátum sortöréskor
   nem kezdődik beljebb, és a sor nem lóg ki a kártyából */
.mp-time.mp-time--l { display: inline-flex; flex-wrap: wrap; column-gap: 0.3em; align-items: baseline; }
.mp-time--l > .mp-time-k, .mp-time--l > .mp-time-v { min-width: 0; max-width: 100%; }
.mp-time-k::after { content: ":"; }
.mp-time-v { white-space: nowrap; }
.mp-times { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 6px 0 2px; font-size: calc(14px * var(--mp-fs, 1)); line-height: 1.45; color: var(--mp-text-muted, #5B6676); }
.mp-times > .mp-time { margin: 0; }
/* keskenyen, nagy betűnél a hosszú dátum és — BOX-FIT-01 — a hosszú felirat („Legutóbbi jelentkezés:”) is törhet;
   a felirat és a dátum közti hely a kettőspont után áll, így sortöréskor nem tolja ki a dátumot */
@media (max-width: 420px) {
  .mp-time, .mp-time-k, .mp-time-v { white-space: normal; }
}
.mp-time { max-width: 100%; }

/* CARD-GAP-01 (2026.10.24, László: „vannak olyan kártyák, amelyek összeérnek — a kártyák között mindenhol a megszokott gap
   legyen”): EGY érték a kártyák közti hézagra — asztalon 16 px, telefonon 12 px. Mérő: scripts/ui-check/card_gap_check.py */
:root { --mp-card-gap: 16px; }
@media (max-width: 600px) { :root { --mp-card-gap: 12px; } }
/* a keresősáv (Munkalehetőségek, Böngészés) alá kerülő oldal-tipp ne tapadjon rá */
.mp-sp-bar + .mp-tip { margin-top: var(--mp-card-gap, 16px); }

/* DOCK-TINT-01 (2026.10.27, László: „az alsó menü fölötti felbukkanó kártyák fehér háttérrel beleolvadnak a többi kártyába —
   legyen jó pasztellszín háttere”): EGY helyen a telefonos alsó kártyák (álláshirdetés, céglap / profil, önéletrajz)
   háttere és kerete — a NÉZŐ szerepkör-színének pasztell árnyalata (munkavállaló / vendég kék, cég zöld).
   Olvashatóság: a #5B6676 halvány szöveg ezen a háttéren is ≥ 4,5:1. */
:root {
  --mp-dock-bg: color-mix(in srgb, var(--mp-role, #0A66C2) 12%, #fff);
  --mp-dock-top: color-mix(in srgb, var(--mp-role, #0A66C2) 55%, #fff);
  --mp-dock-line: color-mix(in srgb, var(--mp-role, #0A66C2) 32%, #fff);
}


/* SEEN-JOBS-01 (2026.10.28, László: „ugyanezt a »Megnézted« jelzést a Munkalehetőségek kártyáira és a hasonló munkák
   listájára is”): EGY címke minden álláshirdetés-listán (Munkalehetőségek, hasonló munkák, alsó kártya). Semleges
   (wait) paletta — nem állapot, csak emlékeztető; a kártya nem tűnik el. Forrás: window.mpSeenJobs (js/mp-early.js). */
:where(.mp-seen-tag) {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  margin-top: 4px; padding: 2px 8px; border-radius: 999px;
  font-size: calc(14px * var(--mp-fs, 1)); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere;
  color: var(--mp-st-wait-ink); background: var(--mp-st-wait-bg); border: 1px solid var(--mp-st-wait-line);
}
:where(.mp-seen-tag) svg { width: 14px; height: 14px; flex: 0 0 auto; }