/* ============================================================================
 * MelóPont — Teendő-jelzők (ACTION-CUES-01, 2026.10.12) · előtag: mp-act-
 * Párja: js/mp-act.js (window.mpAct). A lap <head>-jében a mp-surfaces.css ELŐTT.
 *
 * Egy szín = egy jelentés, mindenhol:
 *   todo   borostyán  — neked kell lépned (válaszolj, dönts, válassz)
 *   urgent piros      — sürgős (régóta vár, hamarosan lejár)
 *   wait   szürke     — a másik félre vársz, neked most nincs dolgod
 *   ok     zöld       — rendben / aktív
 *   info   kék        — tudnivaló
 *   closed szilva      — lezárult (csak erre; SIGNS-01, 10.13)
 *   off    szürke     — kikapcsolva
 * Kontraszt (számolva): a címke felirata a saját hátterén ≥ 5,3:1, a szöveg a betéten ≥ 5,5:1.
 * A profile.html nem tölti a melopont-style.css-t → minden var() mellé tartalék.
 * ========================================================================== */
:root {
  /* SIGNS-01 (10.13): az értékek egyetlen forrása a css/mp-surfaces.css --mp-st-* palettája */
  --mp-act-todo-bg: var(--mp-st-todo-bg);  --mp-act-todo-ink: var(--mp-st-todo-ink);  --mp-act-todo-line: var(--mp-st-todo-line);  --mp-act-todo-bar: var(--mp-st-todo-bar);
  --mp-act-urgent-bg: var(--mp-st-urgent-bg);  --mp-act-urgent-ink: var(--mp-st-urgent-ink);  --mp-act-urgent-line: var(--mp-st-urgent-line);  --mp-act-urgent-bar: var(--mp-st-urgent-bar);
  --mp-act-wait-bg: var(--mp-st-wait-bg);  --mp-act-wait-ink: var(--mp-st-wait-ink);  --mp-act-wait-line: var(--mp-st-wait-line);  --mp-act-wait-bar: var(--mp-st-wait-bar);
  --mp-act-ok-bg: var(--mp-st-ok-bg);  --mp-act-ok-ink: var(--mp-st-ok-ink);  --mp-act-ok-line: var(--mp-st-ok-line);  --mp-act-ok-bar: var(--mp-st-ok-bar);
  --mp-act-info-bg: var(--mp-st-info-bg);  --mp-act-info-ink: var(--mp-st-info-ink);  --mp-act-info-line: var(--mp-st-info-line);  --mp-act-info-bar: var(--mp-st-info-bar);
  --mp-act-closed-bg: var(--mp-st-closed-bg);  --mp-act-closed-ink: var(--mp-st-closed-ink);  --mp-act-closed-line: var(--mp-st-closed-line);  --mp-act-closed-bar: var(--mp-st-closed-bar);
  --mp-act-off-bg: var(--mp-st-off-bg);  --mp-act-off-ink: var(--mp-st-off-ink);  --mp-act-off-line: var(--mp-st-off-line);  --mp-act-off-bar: var(--mp-st-off-bar);
}

/* ── Címke ───────────────────────────────────────────────────────────── */
.mp-act-badge {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--mp-act-info-line);
  border-radius: 999px;
  background: var(--mp-act-info-bg); color: var(--mp-act-info-ink);
  font-size: calc(14px * var(--mp-fs, 1)); font-weight: 700; line-height: 1.3;
  vertical-align: middle;
}
.mp-act-badge svg { width: calc(16px * var(--mp-fs, 1)); height: calc(16px * var(--mp-fs, 1)); flex-shrink: 0; }
.mp-act-badge span { min-width: 0; overflow-wrap: anywhere; }
.mp-act-badge--todo   { background: var(--mp-act-todo-bg);   color: var(--mp-act-todo-ink);   border-color: var(--mp-act-todo-line); }
.mp-act-badge--urgent { background: var(--mp-act-urgent-bg); color: var(--mp-act-urgent-ink); border-color: var(--mp-act-urgent-line); }
.mp-act-badge--wait   { background: var(--mp-act-wait-bg);   color: var(--mp-act-wait-ink);   border-color: var(--mp-act-wait-line); }
.mp-act-badge--ok     { background: var(--mp-act-ok-bg);     color: var(--mp-act-ok-ink);     border-color: var(--mp-act-ok-line); }
.mp-act-badge--closed { background: var(--mp-act-closed-bg); color: var(--mp-act-closed-ink); border-color: var(--mp-act-closed-line); }
.mp-act-badge--off    { background: var(--mp-act-off-bg);    color: var(--mp-act-off-ink);    border-color: var(--mp-act-off-line); }

/* Címke-sor: címke + rövid magyarázat mellette (keskenyen alá tör) */
.mp-act-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; }
.mp-act-row-text { font-size: calc(14px * var(--mp-fs, 1)); color: var(--mp-text-muted, #5B6676); line-height: 1.4; }

/* ── Tétel állapot-füle (EDGE-TAB-01: a teendő típusa ránézésre; a fül a mp-surfaces.css-ben) ── */
.mp-act-item { position: relative; --mp-edge: var(--mp-act-info-bar); }
.mp-act-item--todo   { --mp-edge: var(--mp-act-todo-bar); }
.mp-act-item--urgent { --mp-edge: var(--mp-act-urgent-bar); }
.mp-act-item--wait   { --mp-edge: var(--mp-act-wait-bar); }
.mp-act-item--ok     { --mp-edge: var(--mp-act-ok-bar); }
.mp-act-item--closed { --mp-edge: var(--mp-act-closed-bar); }
.mp-act-item--off    { --mp-edge: var(--mp-act-off-bar); }

/* ── Kis állapotsor ──────────────────────────────────────────────────── */
.mp-act-steps {
  display: flex; flex-wrap: wrap; gap: 4px 0;
  margin: 6px 0 10px; padding: 0; list-style: none;
  font-size: calc(14px * var(--mp-fs, 1)); color: var(--mp-text-muted, #5B6676);
}
.mp-act-steps li { display: inline-flex; align-items: center; gap: 6px; }
.mp-act-steps li:not(:last-child)::after {
  content: "›"; margin: 0 8px; color: var(--mp-act-off-bar); font-weight: 700;
}
.mp-act-dot {
  width: 10px; height: 10px; flex-shrink: 0; border-radius: 50%;
  background: var(--mp-surface-1, #FFFFFF); border: 2px solid var(--mp-act-off-bar);
}
.mp-act-steps li.is-done { color: var(--mp-act-ok-ink); }
.mp-act-steps li.is-done .mp-act-dot { background: var(--mp-act-ok-bar); border-color: var(--mp-act-ok-bar); }
.mp-act-steps li.is-now { font-weight: 700; color: var(--mp-text-primary, #191919); }
.mp-act-steps--todo   li.is-now .mp-act-dot { background: var(--mp-act-todo-bar);   border-color: var(--mp-act-todo-bar);   box-shadow: 0 0 0 3px var(--mp-act-todo-bg); }
.mp-act-steps--urgent li.is-now .mp-act-dot { background: var(--mp-act-urgent-bar); border-color: var(--mp-act-urgent-bar); box-shadow: 0 0 0 3px var(--mp-act-urgent-bg); }
.mp-act-steps--wait   li.is-now .mp-act-dot { background: var(--mp-act-wait-bar);   border-color: var(--mp-act-wait-bar);   box-shadow: 0 0 0 3px var(--mp-act-wait-bg); }
.mp-act-steps--ok     li.is-now .mp-act-dot { background: var(--mp-act-ok-bar);     border-color: var(--mp-act-ok-bar);     box-shadow: 0 0 0 3px var(--mp-act-ok-bg); }
.mp-act-steps--closed li.is-now .mp-act-dot { background: var(--mp-act-closed-bar); border-color: var(--mp-act-closed-bar); box-shadow: 0 0 0 3px var(--mp-act-closed-bg); }
.mp-act-steps--info   li.is-now .mp-act-dot { background: var(--mp-act-info-bar);   border-color: var(--mp-act-info-bar);   box-shadow: 0 0 0 3px var(--mp-act-info-bg); }

/* ── Lenyitható „Mit jelent ez?” ─────────────────────────────────────── */
.mp-act-explain {
  margin: 12px 0 0;
  border: 1px solid var(--mp-line-2, #E4E8EE);
  border-radius: 12px;
  background: var(--mp-surface-2, #F6F8FB);
}
.mp-act-explain > summary {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 14px;
  list-style: none; cursor: pointer;
  font-size: calc(15px * var(--mp-fs, 1)); font-weight: 700;
  color: var(--mp-act-info-ink);
}
.mp-act-explain > summary::-webkit-details-marker { display: none; }
.mp-act-explain > summary > span:not(.mp-act-chev) { flex: 1; min-width: 0; }
.mp-act-explain > summary svg { width: 18px; height: 18px; flex-shrink: 0; }
.mp-act-chev { display: inline-flex; transition: transform .15s; }
.mp-act-explain[open] .mp-act-chev { transform: rotate(180deg); }
.mp-act-explain > summary:focus-visible { outline: 2px solid var(--mp-act-info-bar); outline-offset: 2px; border-radius: 12px; }
.mp-act-body { padding: 2px 14px 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.mp-act-sec {
  padding: 10px 12px;
  background: var(--mp-surface-1, #FFFFFF);
  border: 1px solid var(--mp-line-2, #E4E8EE);
  border-radius: 10px;
}
.mp-act-sec h4 { margin: 0 0 4px; font-size: calc(15px * var(--mp-fs, 1)); font-weight: 700; color: var(--mp-text-primary, #191919); }
.mp-act-sec p, .mp-act-sec li {
  margin: 0; font-size: calc(14px * var(--mp-fs, 1)); line-height: 1.55;
  color: var(--mp-text-secondary, #3B4654);
}
.mp-act-sec ul { margin: 0; padding-left: 20px; }
.mp-act-sec li + li { margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .mp-act-chev { transition: none; } }

/* ── Címke magyarázattal (SIGNS-01): fókuszálható, koppintásra / fölé állva buborék (js/mp-ui.js) ── */
.mp-act-badge[data-mp-tip] { cursor: help; }
.mp-act-badge[data-mp-tip]:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ── „Mit jelentenek a jelek?” jelmagyarázat (mpAct.legend) ─────────── */
.mp-act-legend { margin: 12px 0 0; }
.mp-act-legend > summary {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 0;
  list-style: none; cursor: pointer;
  font-size: calc(14px * var(--mp-fs, 1)); font-weight: 700; color: var(--mp-act-info-ink);
}
.mp-act-legend > summary::-webkit-details-marker { display: none; }
.mp-act-legend > summary svg { width: 18px; height: 18px; flex-shrink: 0; }
.mp-act-legend[open] .mp-act-chev { transform: rotate(180deg); }
.mp-act-legend ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.mp-act-legend li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: calc(14px * var(--mp-fs, 1)); line-height: 1.45; color: var(--mp-text-secondary, #3B4654); }
.mp-act-legend li .mp-act-badge { flex-shrink: 0; }