/* ============================================================================
 * MelóPont — felvételi folyamat (HIRE-FLOW-01, 2026.10.04) — előtag: mp-hf-
 *   5 lépéses állapotsáv · interjú-panel (munkavállaló + cég) · időpont-ajánló ablak
 *   · jelöltlista „Meghívom” gombbal · meghívások · felvételi teendők
 * Színek csak tokenből (melopont-style.css + app-tracking.css --at-*).
 * Min. betűméret 14px, gombok min. 44px magasak (ui_audit.py méri).
 * ========================================================================== */
:root {
  --hf-ink: var(--mp-text-primary);
  --hf-text: #2B3340;
  --hf-muted: var(--mp-text-muted);
  --hf-line: var(--mp-card-border);
  --hf-soft: var(--mp-surface-2, #F6F8FB);
  --hf-blue: var(--mp-blue);
  --hf-blue-ink: #08498C;
  --hf-blue-soft: var(--mp-blue-light);
  --hf-green: var(--mp-green);
  --hf-green-ink: #06582F;
  --hf-green-soft: var(--mp-green-light);
  --hf-red-ink: #A30D12;
  --hf-orange-ink: var(--mp-orange-text);
  --hf-orange-soft: var(--mp-orange-light);
  --hf-off: #D5DBE3;
}

/* ---------------------------------------------------------------- 5 lépéses állapot
   STEPS-DOTS-01 (10.11, László: „a folyamatábra is az a gömbös megoldás legyen, mint máshol az alkalmazásban”):
   MINDEN szélességen függőleges, gömbös idővonal (mint az „Álláshirdetéseid elérése” és az Időrendi felsorolás) —
   régen asztalon vízszintes sávok voltak, csak mobilon gömbök. */
.mp-hf-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 12px 0 0; padding: 0; list-style: none; }
.mp-hf-step { position: relative; display: flex; gap: 10px; padding: 0 0 12px; font-size: calc(14px * var(--mp-fs, 1)); line-height: 1.4; color: var(--hf-muted); min-width: 0; }
.mp-hf-step::before { content: ""; position: absolute; top: 20px; bottom: -2px; left: 9px; width: 2px; background: var(--hf-off); }
.mp-hf-step:last-child { padding-bottom: 0; }
.mp-hf-step:last-child::before { display: none; }
/* STEP-TAGS-01 (10.13): 20 px-es gömb, benne fehér ikon (pipa / x / óra) — a színt nem csak a szín hordozza */
.mp-hf-step-dot { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--mp-white); border: 3px solid var(--hf-off); position: relative; z-index: 1; box-sizing: border-box; color: var(--mp-white); }
.mp-hf-step-dot svg { width: 12px; height: 12px; stroke-width: 3; }
.mp-hf-step-body { display: block; min-width: 0; overflow-wrap: anywhere; }
.mp-hf-step-body strong { display: inline; margin-right: 6px; font-size: calc(14px * var(--mp-fs, 1)); color: var(--hf-text); }
.mp-hf-step-body > span:not(.mp-act-badge):not(.mp-hf-step-tag) { display: inline; }
/* a címke a szöveg után; ha nem fér, a következő sorba törik (nagy betűnél, keskeny kártyán) */
.mp-hf-step-body .mp-act-badge, .mp-hf-step-tag { margin: 2px 0 0 4px; }
.mp-hf-step-tag { display: inline-block; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--mp-st-wait-line); background: var(--mp-st-wait-bg); color: var(--mp-st-wait-ink); font-size: calc(14px * var(--mp-fs, 1)); font-weight: 700; line-height: 1.3; cursor: help; }
.mp-hf-step-tag--ok { border-color: var(--mp-st-ok-line); background: var(--mp-st-ok-bg); color: var(--mp-st-ok-ink); }
.mp-hf-step-tag--info { border-color: var(--mp-st-info-line); background: var(--mp-st-info-bg); color: var(--mp-st-info-ink); }
.mp-hf-step-tag--todo { border-color: var(--mp-st-todo-line); background: var(--mp-st-todo-bg); color: var(--mp-st-todo-ink); }
.mp-hf-step-tag--closed { border-color: var(--mp-st-closed-line); background: var(--mp-st-closed-bg); color: var(--mp-st-closed-ink); }
.mp-hf-step-tag--off { border-color: var(--mp-st-off-line); background: var(--mp-st-off-bg); color: var(--mp-st-off-ink); }
/* a vonal a lépés színét viszi a következő gömbig */
/* SIGNS-01 (10.13): a lépések állapotszínei a közös palettából (css/mp-surfaces.css --mp-st-*):
   kész / elfogadva = rendben, egyeztetett interjú = tudnivaló, elutasítva / lezárva = LEZÁRULT (szilva),
   teendő = borostyán, szünetel / kimaradt = kikapcsolva, a cégen a sor = várakozás (üres gömb) */
.mp-hf-step.is-done::before { background: var(--mp-st-ok-bar); }
.mp-hf-step.is-done .mp-hf-step-dot { border-color: var(--mp-st-ok-bar); background: var(--mp-st-ok-bar); }
.mp-hf-step.is-done strong { color: var(--mp-st-ok-ink); }
.mp-hf-step.is-good .mp-hf-step-dot { border-color: var(--mp-st-ok-bar); background: var(--mp-st-ok-bar); }
.mp-hf-step.is-good strong { color: var(--mp-st-ok-ink); }
.mp-hf-step.is-info .mp-hf-step-dot { border-color: var(--mp-st-info-bar); background: var(--mp-st-info-bar); }
.mp-hf-step.is-info strong { color: var(--mp-st-info-ink); }
.mp-hf-step.is-bad .mp-hf-step-dot { border-color: var(--mp-st-closed-bar); background: var(--mp-st-closed-bar); }
.mp-hf-step.is-bad strong { color: var(--mp-st-closed-ink); }
.mp-hf-step.is-todo .mp-hf-step-dot { border-color: var(--mp-st-todo-bar); box-shadow: 0 0 0 3px var(--mp-st-todo-bg); }
.mp-hf-step.is-todo strong, .mp-hf-step.is-todo > .mp-hf-step-body > span:not(.mp-act-badge):not(.mp-hf-step-tag) { color: var(--mp-st-todo-ink); font-weight: 700; }
.mp-hf-step.is-closed .mp-hf-step-dot { border-color: var(--mp-st-closed-bar); background: var(--mp-st-closed-bar); }
.mp-hf-step.is-off .mp-hf-step-dot { border-color: var(--mp-st-off-bar); background: var(--mp-st-off-bg); }
.mp-hf-step.is-skip .mp-hf-step-dot { border-style: dashed; }
.mp-hf-step.is-skip::before { background: repeating-linear-gradient(180deg, var(--hf-off) 0 4px, transparent 4px 8px); }

.mp-hf-reply { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--hf-soft); border: 1px solid var(--hf-line); font-size: calc(14px * var(--mp-fs, 1)); line-height: 1.5; color: var(--hf-text); overflow-wrap: anywhere; }
.mp-hf-reply strong { color: var(--hf-blue-ink); }
.mp-hf-note { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; font-size: calc(14px * var(--mp-fs, 1)); color: var(--hf-muted); }
.mp-hf-note svg, .mp-hf-co-note svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }

/* ---------------------------------------------------------------- Interjú-panel (munkavállaló) */
.mp-hf-panel { margin: 12px 0 0; padding: 14px; border: 1px solid var(--hf-line); border-radius: 14px; background: var(--hf-soft); }
.mp-hf-panel--todo { border-color: var(--mp-st-todo-line); background: var(--mp-st-todo-bg); }
.mp-hf-panel--ok { border-color: var(--mp-st-ok-line); background: var(--mp-st-ok-bg); }
.mp-hf-panel-title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: calc(16px * var(--mp-fs, 1)); font-weight: 800; color: var(--hf-ink); line-height: 1.35; }
.mp-hf-panel-title svg { width: 20px; height: 20px; flex-shrink: 0; }
.mp-hf-meta { display: grid; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; }
.mp-hf-meta li { display: flex; align-items: flex-start; gap: 8px; font-size: calc(14px * var(--mp-fs, 1)); color: var(--hf-text); overflow-wrap: anywhere; }
.mp-hf-meta svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--hf-muted); }
.mp-hf-meta a { color: var(--hf-blue-ink); font-weight: 700; }
.mp-hf-quote { margin: 8px 0 0; font-size: calc(14px * var(--mp-fs, 1)); font-style: italic; line-height: 1.5; color: var(--hf-text); overflow-wrap: anywhere; }
.mp-hf-muted { margin: 8px 0 0; font-size: calc(14px * var(--mp-fs, 1)); color: var(--hf-muted); line-height: 1.5; }
.mp-hf-empty { margin: 0; padding: 14px; border: 1px dashed var(--hf-line); border-radius: 12px; font-size: calc(14px * var(--mp-fs, 1)); color: var(--hf-text); line-height: 1.5; }
.mp-hf-slots { display: grid; gap: 8px; margin: 12px 0 0; }
.mp-hf-slot {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 10px 14px;
  border: 2px solid var(--hf-green); border-radius: 12px; background: var(--mp-white); color: var(--hf-green-ink);
  font: inherit; font-size: calc(16px * var(--mp-fs, 1)); font-weight: 700; text-align: left; cursor: pointer;
}
.mp-hf-slot svg { width: 18px; height: 18px; flex-shrink: 0; }
.mp-hf-slot:hover { background: var(--hf-green-soft); }
.mp-hf-slot:focus-visible, .mp-hf-btn:focus-visible, .mp-hf-link:focus-visible, .mp-hf-chip:focus-visible { outline: 3px solid var(--hf-blue); outline-offset: 2px; }
.mp-hf-slot:disabled { cursor: progress; opacity: .7; }
.mp-hf-link {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; padding: 0 4px;
  border: 0; background: none; color: var(--hf-blue-ink); font: inherit; font-size: calc(15px * var(--mp-fs, 1)); font-weight: 700; text-decoration: underline; cursor: pointer;
}

/* ---------------------------------------------------------------- Gombok */
.mp-hf-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mp-hf-btn, a.mp-hf-btn, a.mp-hf-btn:visited {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 10px 16px; border: 1px solid transparent; border-radius: var(--mp-radius-pill);
  font: inherit; font-size: calc(15px * var(--mp-fs, 1)); font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap;
  max-width: 100%; box-sizing: border-box;
}
/* ZOOM-FIT-01 (10.20): nagy betűnél keskeny telefonon a gomb felirata törhet, a gomb nem lóghat ki */
@media (max-width: 420px) { html[data-mp-fs="1.3"] .mp-hf-btn, html[data-mp-fs="1.5"] .mp-hf-btn { white-space: normal; text-align: center; } }
.mp-hf-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.mp-hf-btn--primary, a.mp-hf-btn--primary, a.mp-hf-btn--primary:visited { background: var(--hf-blue); color: var(--mp-white); }
.mp-hf-btn--primary:hover, a.mp-hf-btn--primary:hover { background: var(--mp-blue-hover); color: var(--mp-white); text-decoration: none; }
.mp-hf-btn--company, a.mp-hf-btn--company { background: var(--hf-green); color: var(--mp-white); }
.mp-hf-btn--company:hover { background: var(--hf-green-ink); color: var(--mp-white); }
.mp-hf-btn--ghost, a.mp-hf-btn--ghost, a.mp-hf-btn--ghost:visited { background: var(--mp-white); border-color: var(--hf-line); color: var(--hf-ink); }
.mp-hf-btn--ghost:hover, a.mp-hf-btn--ghost:hover { background: var(--hf-soft); color: var(--hf-ink); text-decoration: none; }
.mp-hf-btn:disabled { background: var(--mp-disabled-bg); border-color: var(--mp-disabled-border); color: var(--mp-disabled-text); cursor: not-allowed; }
@media (max-width: 480px) { .mp-hf-actions .mp-hf-btn { flex: 1 1 auto; } }

/* ---------------------------------------------------------------- Cég: interjú a jelentkező sorában */
.mp-hf-co { margin-top: 8px; }
.mp-hf-co-note { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 0; font-size: calc(14px * var(--mp-fs, 1)); line-height: 1.45; color: var(--hf-text); overflow-wrap: anywhere; }
.mp-hf-co-note.is-ok { color: var(--hf-green-ink); font-weight: 700; }
.mp-hf-co-note.is-todo { color: var(--mp-st-todo-ink); font-weight: 700; }

/* ---------------------------------------------------------------- Ablakok (a .mp-rd alapra épül) */
.mp-hf-dialog .mp-rd-body { gap: 10px; }
.mp-hf-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-hf-chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 1px solid var(--hf-line);
  border-radius: var(--mp-radius-pill); background: var(--mp-white); color: var(--hf-ink); font: inherit; font-size: calc(14px * var(--mp-fs, 1)); font-weight: 600; cursor: pointer;
}
.mp-hf-chip:hover { background: var(--hf-soft); }
.mp-hf-chip.is-on { background: var(--hf-green-soft); border-color: var(--hf-green); color: var(--hf-green-ink); }
.mp-hf-chip:disabled { background: var(--mp-disabled-bg); border-color: var(--mp-disabled-border); color: var(--mp-disabled-text); cursor: default; }
.mp-hf-slot-grid { display: grid; gap: 8px; }
.mp-hf-slot-in { display: grid; gap: 4px; font-size: calc(14px * var(--mp-fs, 1)); font-weight: 700; color: var(--hf-ink); }
.mp-hf-input, .mp-hf-slot-in input {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 8px 12px; border: 1px solid var(--hf-line); border-radius: 12px;
  background: var(--mp-white); color: var(--hf-ink); font: inherit; font-size: calc(16px * var(--mp-fs, 1));
}
.mp-hf-input:focus, .mp-hf-slot-in input:focus { outline: none; border-color: var(--hf-blue); box-shadow: 0 0 0 3px var(--hf-blue-soft); }
.mp-hf-modes { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; border: 0; min-width: 0; }
.mp-hf-modes legend { margin-bottom: 4px; }
.mp-hf-modes label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: calc(15px * var(--mp-fs, 1)); color: var(--hf-ink); cursor: pointer; }
.mp-hf-modes input { width: 18px; height: 18px; accent-color: var(--hf-green); }
.mp-hf-err { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--mp-red-light); color: var(--hf-red-ink); font-size: calc(14px * var(--mp-fs, 1)); font-weight: 600; }
[hidden].mp-hf-err, .mp-hf-input[hidden], label[hidden] { display: none; }

/* ---------------------------------------------------------------- Jelöltlista, meghívások, teendők */
.mp-hf-card .mp-hf-h3 { margin: 14px 0 8px; font-size: calc(15px * var(--mp-fs, 1)); font-weight: 800; color: var(--hf-ink); }
.mp-hf-cands, .mp-hf-invites, .mp-hf-todos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.mp-hf-cand, .mp-hf-todo { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--hf-line); border-radius: 14px; background: var(--mp-white); }
.mp-hf-cand-body, .mp-hf-todo-body { flex: 1 1 auto; min-width: 0; }
.mp-hf-cand-name, .mp-hf-todo-name a { font-size: calc(16px * var(--mp-fs, 1)); font-weight: 800; color: var(--hf-ink); text-decoration: none; overflow-wrap: anywhere; }
.mp-hf-cand-name:hover, .mp-hf-todo-name a:hover { color: var(--hf-blue-ink); text-decoration: underline; }
.mp-hf-todo-name { margin: 0; font-size: calc(15px * var(--mp-fs, 1)); color: var(--hf-text); overflow-wrap: anywhere; }
.mp-hf-cand-sub, .mp-hf-cand-prof { margin: 2px 0 0; font-size: calc(14px * var(--mp-fs, 1)); color: var(--hf-muted); line-height: 1.4; overflow-wrap: anywhere; }
.mp-hf-cand-sub svg { width: 14px; height: 14px; vertical-align: -2px; color: var(--mp-orange); }
.mp-hf-cand-act { flex-shrink: 0; align-self: center; }
.mp-hf-av {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; overflow: hidden;
  border-radius: 50%; background: var(--hf-blue-soft); color: var(--hf-blue-ink); font-size: calc(15px * var(--mp-fs, 1)); font-weight: 800;
}
.mp-hf-av img { width: 100%; height: 100%; object-fit: cover; }
.mp-hf-state { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border-radius: var(--mp-radius-pill); font-size: calc(14px * var(--mp-fs, 1)); font-weight: 700; white-space: nowrap; max-width: 100%; }
@media (max-width: 600px) { .mp-hf-state { white-space: normal; } }   /* BOX-FIT-01: nagy betűnél telefonon tördel */
.mp-hf-state svg { width: 14px; height: 14px; }
.mp-hf-state.is-sent { background: var(--mp-st-wait-bg); color: var(--mp-st-wait-ink); }
.mp-hf-state.is-good { background: var(--mp-st-ok-bg); color: var(--mp-st-ok-ink); }
.mp-hf-state.is-muted { background: var(--mp-st-off-bg); color: var(--mp-st-off-ink); }
.mp-hf-state.is-closed { background: var(--mp-st-closed-bg); color: var(--mp-st-closed-ink); }
.mp-hf-quota { margin-top: 10px; }
.mp-hf-jobpick { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.mp-hf-inv { padding: 12px; border: 1px solid var(--hf-line); border-radius: 14px; background: var(--mp-white); }
/* ACTION-CUES-01: a teendő-sorok betétként (2. réteg) állnak ki a kártyából, a bal sáv a teendő típusa */
.mp-hf-todo.mp-act-item, .mp-hf-inv.mp-act-item { background: var(--mp-surface-2, #F6F8FB); border-color: var(--mp-line-2, #E4E8EE); }
.mp-hf-cue-note { margin: 4px 0 0; font-size: calc(14px * var(--mp-fs, 1)); line-height: 1.5; color: var(--mp-text-muted, #5B6676); overflow-wrap: anywhere; }
.mp-hf-inv-top { display: flex; gap: 12px; align-items: flex-start; }
.mp-hf-inv-top > div { min-width: 0; }
@media (max-width: 480px) {
  .mp-hf-cand { flex-wrap: wrap; min-width: 0; }
  .mp-hf-cand > * { min-width: 0; max-width: 100%; }
  .mp-hf-cand-act { flex: 1 1 100%; }
  .mp-hf-cand-act .mp-hf-btn { width: 100%; }
}

/* ---------------------------------------------------------------- Álláshirdetés oldal: meghívás + jelöltek */
.mp-hf-invite { flex: 1 1 100%; padding: 14px; border: 2px solid var(--hf-green); border-radius: 14px; background: var(--hf-green-soft); }
.mp-hf-invite-title { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: calc(15px * var(--mp-fs, 1)); line-height: 1.45; color: var(--hf-ink); }
.mp-hf-invite-title svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--hf-green-ink); }
.mp-action-bar > .mp-hf-panel, .mp-action-bar > .mp-hf-invite { flex: 1 1 100%; }

/* DELIVERY-01 (10.08): „Elküldve → Megkapta → Megnézte” — a cég látja, hogy a munkavállaló megkapta és megnézte,
   amit küldött (meghívás, válasz a jelentkezésre, interjú-időpont). Mobilon egymás alatt, asztalon egy sorban. */
.mp-hf-rcpt { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 0; padding: 8px 10px; list-style: none;
  border-radius: 10px; background: var(--hf-soft); border: 1px solid var(--hf-line); }
.mp-hf-rcpt-step { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: calc(14px * var(--mp-fs, 1)); line-height: 1.4; color: var(--hf-muted); }
.mp-hf-rcpt-step svg { flex-shrink: 0; width: 16px; height: 16px; }
.mp-hf-rcpt-step span { overflow-wrap: anywhere; }
.mp-hf-rcpt-step.is-done { color: var(--hf-text); }
.mp-hf-rcpt-step.is-done svg { color: var(--mp-st-ok-bar); }
.mp-hf-rcpt-step.is-seen { color: var(--hf-green-ink); font-weight: 700; }
.mp-hf-rcpt-step.is-wait svg { color: var(--hf-orange-ink); }
@media (max-width: 640px) { .mp-hf-rcpt { flex-direction: column; } }

/* ---------------------------------------------------------------- INVITE-CARD-01 (10.09): „Hívd meg őket” — álláshirdetésenként egy sor, előre a számokkal */
.mp-hf-ijobs { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.mp-hf-ijob { border: 1px solid var(--hf-line); border-radius: 14px; background: var(--mp-white); overflow: hidden; }
.mp-hf-ijob.is-open { border-color: var(--hf-green); }
.mp-hf-ijob-btn, .mp-hf-ijob-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px;
  border: 0; background: none; color: var(--hf-ink); font: inherit; text-align: left;
}
.mp-hf-ijob-btn { cursor: pointer; }
.mp-hf-ijob-btn:hover { background: var(--hf-soft); }
.mp-hf-ijob-btn:focus-visible { outline: 3px solid var(--hf-blue); outline-offset: -3px; }
.mp-hf-ijob-txt { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.mp-hf-ijob-name { font-size: calc(15px * var(--mp-fs, 1)); font-weight: 700; color: var(--hf-ink); overflow-wrap: anywhere; }
.mp-hf-ijob-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-hf-ibadge { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; border-radius: var(--mp-radius-pill); background: var(--hf-soft); border: 1px solid var(--hf-line); font-size: calc(14px * var(--mp-fs, 1)); color: var(--hf-text); }
.mp-hf-ibadge.is-go { background: var(--hf-green-soft); border-color: var(--hf-green); color: var(--hf-green-ink); font-weight: 700; }
.mp-hf-ibadge.is-none { color: var(--hf-muted); }
.mp-hf-ijob-chev { display: inline-flex; flex-shrink: 0; width: 24px; height: 24px; color: var(--hf-muted); transition: transform .2s ease; }
.mp-hf-ijob-chev svg { width: 24px; height: 24px; }
.mp-hf-ijob.is-open .mp-hf-ijob-chev { transform: rotate(180deg); color: var(--hf-green-ink); }
.mp-hf-ijob-panel { padding: 0 14px 14px; }
.mp-hf-ijob.is-empty { background: var(--hf-soft); }
.mp-hf-ijob.is-empty > .mp-hf-ijob-why, .mp-hf-ijob.is-empty > .mp-hf-ijob-acts { padding: 0 14px; }
.mp-hf-ijob.is-empty > .mp-hf-ijob-acts { padding-bottom: 6px; }
.mp-hf-ijob-why { margin: 0; font-size: calc(14px * var(--mp-fs, 1)); line-height: 1.5; color: var(--hf-text); }
.mp-hf-ijob-acts { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.mp-hf-ijob-acts .mp-hf-link svg { width: 18px; height: 18px; margin-right: 6px; flex-shrink: 0; }
.mp-hf-ijob-panel .mp-hf-ijob-acts { margin-bottom: 8px; }
[data-cands].is-busy { opacity: .6; transition: opacity .15s ease; }
@media (prefers-reduced-motion: reduce) { .mp-hf-ijob-chev { transition: none; } }

/* ---------------------------------------------------------------- CARD-ACTIONS-01 (10.10): cselekvés a kártyáról */
.mp-hf-opts { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mp-hf-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--hf-line); border-radius: 12px; background: var(--mp-white); }
.mp-hf-opt-t { display: grid; gap: 2px; min-width: 0; font-size: calc(15px * var(--mp-fs, 1)); color: var(--hf-ink); overflow-wrap: anywhere; }
.mp-hf-opt-t span { font-size: calc(14px * var(--mp-fs, 1)); color: var(--hf-muted); }
.mp-hf-cardacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mp-hf-cardacts [data-hf-acts] { display: contents; }
.mp-hf-cardacts .mp-hf-state { min-height: 44px; }
@media (max-width: 480px) {
  .mp-hf-opt .mp-hf-btn { width: 100%; }
  .mp-hf-cardacts .mp-hf-btn { flex: 1 1 auto; }
}

/* CANDS-CARD-02 (10.13): a hosszú, mondatszerű cím nem csupa nagybetűs (a .mp-section-title kis, nagybetűs fejléc) */
#mp-hf-cands-box .mp-hf-cands-title { text-transform: none; letter-spacing: normal; font-size: calc(17px * var(--mp-fs, 1)); font-weight: 700; line-height: 1.35; color: var(--mp-text-primary, #191919); }
#mp-hf-cands-box .mp-hf-cands-prof { color: var(--mp-green, #057642); }

/* IV-INFO-01 (10.18): „Mi történik, ha elküldöd / választasz?” — interjú, értesítés, naptár, emlékeztető */
.mp-hf-how { margin: 10px 0 4px; padding: 10px 12px; border: 1px solid var(--mp-st-info-line, #A9CBEF); border-radius: 12px; background: var(--mp-surface-2, #F6F8FB); }
.mp-hf-how > summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; font-size: calc(15px * var(--mp-fs, 1)); font-weight: 800; color: var(--mp-st-info-ink, #0A5CAD); }
.mp-hf-how[open] > summary { margin-bottom: 8px; }
.mp-hf-how-list { margin: 0; font-size: calc(14px * var(--mp-fs, 1)); line-height: 1.5; color: var(--mp-text-primary, #191919); }
.mp-hf-how-list .mp-orb-li-d { color: var(--mp-text-secondary, #1a1a1a); }
.mp-hf-co-cal { color: var(--mp-text-muted, #5B6676); }