/* WP40 · Skillek: „Megmutatom egyszer” felvétel-sáv, lépés-tulajdonos jelölés, próba-összevetés, „Új skill?” sor, a közös „Mentés skillként” ablak. Csak változók (világos / sötét témában is jó). */

/* ── felvétel: alsó sáv ── */
.mx-rec-bar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 400; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; max-width: min(760px, calc(100vw - 24px)); padding: 10px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--bad); box-shadow: var(--shadow); }
.mx-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bad); animation: mx-rec-pulse 1.4s ease-in-out infinite; flex: none; }
@keyframes mx-rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .mx-rec-dot { animation: none; } }
.mx-rec-n { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); }
.mx-rec-goal { font-size: 13px; color: var(--muted); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .mx-rec-bar { border-radius: 16px; bottom: 10px; } .mx-rec-goal { max-width: 100%; flex-basis: 100%; } }

/* ── felvétel: áttekintő ablak lépésenként ── */
.sk-rec-steps { display: grid; gap: 6px; }
.sk-rec-step { display: grid; grid-template-columns: 28px minmax(0, 1fr) 150px auto; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.sk-rec-step i { font-style: normal; font-weight: 700; color: var(--muted); text-align: center; }
.sk-rec-step input[type="text"] { width: 100%; box-sizing: border-box; min-width: 0; font: inherit; font-size: 14px; padding: 5px 8px; border: 1px solid var(--border-strong, var(--border)); border-radius: 6px; background: var(--surface); color: var(--text); }
.sk-rec-step select { font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid var(--border-strong, var(--border)); border-radius: 6px; background: var(--surface); color: var(--text); min-width: 0; }
.sk-rec-step label { font-size: 12px; color: var(--muted); display: flex; gap: 4px; align-items: center; white-space: nowrap; }
@media (max-width: 700px) { .sk-rec-step { grid-template-columns: 24px minmax(0, 1fr); } .sk-rec-step select, .sk-rec-step label { grid-column: 2; } }

/* ── lépés-tulajdonos címke ── */
.sk-who { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; margin-left: 6px; white-space: nowrap; vertical-align: baseline; }
.sk-who.ai { background: var(--ai-bg); color: var(--ai); }
.sk-who.human { background: var(--warn-bg); color: var(--warn); }

/* ── eredmény oszlop (mért érték) ── */
.sk-res.sk-meas { display: flex; flex-direction: column; gap: 1px; font-size: 13px; line-height: 1.3; }
.sk-res.sk-meas b { font-size: 14px; }
.sk-res.sk-meas small { color: var(--muted); font-size: 12px; }
.sk-res .sk-dash { color: var(--muted); }

/* ── próba-összevetés ── */
.sk-trial h5 { margin: 0 0 4px; font-size: 16px; }
.sk-trial .sk-cmp b { font-variant-numeric: tabular-nums; }
.sk-trial .sk-verdict { font-size: 14px; font-weight: 700; margin: 2px 0 8px; }
.sk-trial .sk-verdict.better { color: var(--ok); }
.sk-trial .sk-verdict.worse { color: var(--bad); }
.sk-trial .sk-verdict.same { color: var(--text-2); }
.sk-trial .sk-mode { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); margin-left: 6px; }
.sk-trial .sk-mode.skeleton, .sk-trial .sk-mode.mixed { background: var(--warn-bg); color: var(--warn); }
.sk-trial .sk-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sk-sbs { display: grid; gap: 12px; margin-top: 10px; }
.sk-sbs-item { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface); }
.sk-sbs-item > b { font-size: 14px; display: block; margin-bottom: 6px; overflow-wrap: anywhere; }
.sk-sbs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sk-sbs-cols > div { min-width: 0; }
.sk-sbs-cols small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 2px; }
.sk-sbs-cols pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 13px; background: var(--surface-2); border-radius: 8px; padding: 8px 10px; max-height: 220px; overflow: auto; }
.sk-sbs-iss { margin: 4px 0 0; padding-left: 16px; font-size: 12px; color: var(--bad); }
.sk-sbs-diff { font-size: 12px; color: var(--text-2); margin-top: 6px; }
.sk-sbs-diff del { color: var(--bad); text-decoration: line-through; margin-right: 6px; }
.sk-sbs-diff ins { color: var(--ok); text-decoration: none; font-weight: 700; margin-right: 6px; }
@media (max-width: 700px) { .sk-sbs-cols { grid-template-columns: 1fr; } }

/* ── „Új skill?” sor a javaslat-kártyában ── */
.sk-prop.sk-new { box-shadow: inset 3px 0 0 var(--mk-g2, var(--ai)); }
.sk-prop.sk-new .mx-ch { background: var(--mk-subtle); color: var(--mk-deep, var(--text)); font-weight: 700; }

/* ── „Mutasd a javításokat” ── */
.sk-evid { display: grid; gap: 8px; }
.sk-evid-row { border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 13px; }
.sk-evid-row b { font-size: 14px; display: block; }
.sk-evid-row del { color: var(--bad); margin-right: 6px; }
.sk-evid-row ins { color: var(--ok); text-decoration: none; font-weight: 700; margin-right: 6px; }

/* ── „Mikor használja” / „Miből dolgozik” sorok a részletben ── */
.sk-meta { display: grid; gap: 4px; }
.sk-meta p { margin: 0; font-size: 14px; color: var(--text-2); overflow-wrap: anywhere; }