/* ============================================================
   13 — Konfliktusok feloldása: oldalspecifikus elemek
   jelölő-anatómia · lépéslista · Sorrend-kirakó · Konfliktus-feloldó · VS Code-vázlat · GUI-kártyák
   ============================================================ */

.ix.term::before{content:"⌨ GIT-SZIMULÁTOR";}

/* ---------- jelölő-anatómia ---------- */
.anat{background:var(--code-bg); border:1px solid var(--line); border-radius:12px; padding:10px 0; margin:16px 0; overflow-x:auto;}
.an-row{display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:14px; padding:1px 16px; align-items:start;}
.an-txt{font-family:"Cascadia Mono",Consolas,monospace; font-size:.86rem; color:var(--code-ink); white-space:pre-wrap; border-left:3px solid transparent; padding-left:10px;}
.an-lbl{font-size:.76rem; font-weight:600; color:#8b949e; padding-top:2px;}
.an-lbl b{color:#e6edf3;}
.an-row.jel .an-txt{color:#fbbf24; font-weight:700; border-color:#fbbf24;}
.an-row.mi .an-txt{color:#4ade80; border-color:#4ade80; background:rgba(74,222,128,.08);}
.an-row.ok .an-txt{color:#60a5fa; border-color:#60a5fa; background:rgba(96,165,250,.08);}
.an-row.mi .an-lbl{color:#4ade80;} .an-row.ok .an-lbl{color:#60a5fa;} .an-row.jel .an-lbl{color:#fbbf24;}

/* ---------- lépéslista ---------- */
ol.lepes-lista{list-style:none; counter-reset:lp; margin:14px 0; padding:0; display:flex; flex-direction:column; gap:8px;}
ol.lepes-lista li{counter-increment:lp; position:relative; padding:10px 14px 10px 50px; background:var(--panel); border:1px solid var(--line); border-radius:11px; font-size:.95rem;}
ol.lepes-lista li::before{content:counter(lp); position:absolute; left:12px; top:9px; width:26px; height:26px; border-radius:8px;
  background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font-weight:800; font-size:.85rem;}

/* ---------- Sorrend-kirakó ---------- */
.ix.sorrend::before{content:"🔢 SORREND-KIRAKÓ";}
.sk-keszlet{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0;}
.sk-keszlet button{font:inherit; font-size:.88rem; text-align:left; padding:8px 12px; border-radius:10px; cursor:pointer;
  background:var(--card-in); color:var(--card-in-ink); border:1px solid var(--line);}
.sk-keszlet button:hover{border-color:var(--accent);}
.sk-keszlet button:disabled{opacity:.35; cursor:default;}
ol.sk-sor{margin:6px 0; padding-left:26px; min-height:1.5em; font-size:.92rem;}
ol.sk-sor li{margin:3px 0;}
ol.sk-sor li.jo{color:var(--green);} ol.sk-sor li.rossz{color:var(--red);}
.sk-fb{font-size:.92rem; font-weight:700; min-height:1.4em; margin-top:6px;}

/* ---------- Konfliktus-feloldó ---------- */
.ix.feloldo::before{content:"⚡ KONFLIKTUS-FELOLDÓ";}
.kf-tabs{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 6px;}
.kf-tabs button{font:inherit; font-size:.84rem; font-weight:700; padding:5px 12px; border-radius:99px; cursor:pointer; background:var(--panel2); color:var(--ink); border:1px solid var(--line);}
.kf-tabs button[aria-selected="true"]{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
.kf-tabs button.kesz::after{content:" ✓"; color:var(--green);}
.kf-tabs button[aria-selected="true"].kesz::after{color:var(--accent-ink);}
.kf-feladat{margin:8px 0 10px; font-size:.95rem;}
.kf-fajl{background:var(--code-bg); border:1px solid var(--line); border-radius:10px; overflow:hidden;}
.kf-fnev{background:#161b22; color:#c9d1d9; font-size:.8rem; padding:6px 12px; border-bottom:1px solid #30363d; font-family:"Cascadia Mono",Consolas,monospace;}
.kf-kod{padding:8px 0; font-family:"Cascadia Mono",Consolas,monospace; font-size:.86rem; color:var(--code-ink); overflow-x:auto;}
.kf-sor{padding:1px 14px; white-space:pre;}
.kf-blokk{margin:4px 0;}
.kf-lens{padding:2px 14px; font-family:"Segoe UI",system-ui,sans-serif; font-size:.76rem; color:#8b949e; display:flex; flex-wrap:wrap; gap:2px 4px; align-items:center;}
.kf-lens button{font:inherit; background:none; border:0; color:#8b949e; cursor:pointer; padding:1px 3px; border-radius:4px;}
.kf-lens button:hover, .kf-lens button:focus{color:#e6edf3; background:#30363d; outline:none;}
.kf-lens span{color:#484f58;}
.kf-sor.jel{color:#8b949e;}
.kf-sor.cur{background:rgba(74,222,128,.12);} .kf-sor.jel.cur{background:rgba(74,222,128,.22); color:#86efac;}
.kf-sor.inc{background:rgba(96,165,250,.12);} .kf-sor.jel.inc{background:rgba(96,165,250,.22); color:#93c5fd;}
.kf-sor.kesz{background:rgba(250,204,21,.08); box-shadow:inset 3px 0 0 #facc15;}
.kf-kezi{margin:4px 14px; display:flex; flex-direction:column; gap:6px;}
.kf-kezi textarea{width:100%; resize:vertical; background:#0d1117; color:#e6edf3; border:1px solid #30363d; border-radius:6px; padding:6px 8px;
  font-family:"Cascadia Mono",Consolas,monospace; font-size:.86rem;}
.kf-kezi .btn{align-self:flex-start; padding:4px 12px; font-size:.82rem;}
.kf-fb{margin-top:10px; font-size:.93rem; min-height:1.4em; font-weight:700;}
.kf-fb.jo{color:var(--green);} .kf-fb.hibas{color:var(--red);} .kf-fb.figy{color:var(--orange);}

/* ---------- VS Code-vázlat ---------- */
.vs-mock{background:#1e1e1e; border:1px solid #3c3c3c; border-radius:10px; padding:8px 0; margin:14px 0; font-family:"Cascadia Mono",Consolas,monospace; font-size:.84rem; overflow-x:auto;}
.vs-lens{padding:2px 14px 4px; font-family:"Segoe UI",system-ui,sans-serif; font-size:.76rem; color:#9d9d9d;}
.vs-lens span{text-decoration:underline dotted; text-underline-offset:3px;}
.vs-sor{padding:1px 14px; white-space:pre; color:#d4d4d4;}
.vs-sor.cur{background:rgba(64,200,174,.18);} .vs-sor.jel.cur{background:rgba(64,200,174,.35);}
.vs-sor.inc{background:rgba(64,166,255,.18);} .vs-sor.jel.inc{background:rgba(64,166,255,.35);}
.vs-sor.jel{color:#9d9d9d;}

/* ---------- GUI-kártyák ---------- */
.gui-cards{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin:16px 0;}
.gui-cards.ketto{grid-template-columns:repeat(2, minmax(0,1fr));}
.gc{min-width:0; overflow-wrap:anywhere; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px;}
.gc-h{font-weight:800; color:var(--ink-strong); margin-bottom:8px; display:flex; gap:8px; align-items:center;}
.gc ul{margin:0; padding-left:18px; font-size:.9rem; line-height:1.5;}
.gc li{margin-bottom:6px;}

@media (max-width:860px){
  .gui-cards, .gui-cards.ketto{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:760px){
  .an-row{grid-template-columns:minmax(0,1fr); gap:0;}
  .an-lbl{padding-left:13px; margin-bottom:4px;}
}