/* ============================================================
   11 — Ágak és a HEAD: oldalspecifikus elemek
   ágpéldák · Ág-játszótér · GUI-kártyák
   (a Git-szimulátor stílusa: assets/terminal-sim.css, a gráfé: assets/git-graf.css)
   ============================================================ */

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

/* ---------- ágpéldák ---------- */
.ag-peldak{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin:14px 0;}
.ap{background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:10px; padding:10px 12px;}
.ap:nth-child(2){border-left-color:#2dd4bf;} .ap:nth-child(3){border-left-color:#60a5fa;}
.ap b{display:block; font-family:"Cascadia Mono",Consolas,monospace; color:var(--ink-strong); margin-bottom:3px;}
.ap span{font-size:.88rem; color:var(--muted);}

/* ---------- Ág-játszótér ---------- */
.ix.agjatek::before{content:"🌿 ÁG-JÁTSZÓTÉR";}
.aj-gombok{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin:10px 0 4px;}
.aj-csop{display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
.aj-gombok input[type=text], .aj-gombok select{
  font:inherit; font-size:.88rem; color:var(--ink); background:var(--card-in); border:1px solid var(--line); border-radius:8px; padding:6px 9px;
  font-family:"Cascadia Mono",Consolas,monospace;
}
.aj-gombok input[type=text]{width:140px;}
.aj-gombok input:focus, .aj-gombok select:focus{outline:2px solid var(--accent); outline-offset:1px;}
.aj-chk{display:flex; gap:5px; align-items:center; font-size:.84rem; color:var(--muted);}
.aj-chk input{accent-color:var(--accent);}
.aj-also{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:12px; margin-top:12px;}
.aj-lbl{font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:5px;}
pre.aj-log, pre.aj-git{margin:0; min-height:120px; max-height:200px; overflow:auto; font-size:.82rem; white-space:pre-wrap;}
pre.aj-log .c{color:#ffa07a;} pre.aj-log .p{color:#6b7684;} pre.aj-log .e{color:#f87171;}
pre.aj-git .f{color:#2dd4bf;} pre.aj-git .h{color:#fbbf24;}
.aj-fb{margin-top:10px; font-size:.92rem; min-height:1.4em;}
.aj-fb.figy{color:var(--orange);} .aj-fb.hibas{color:var(--red);} .aj-fb.jo{color:var(--green);}

/* ---------- GUI-kártyák ---------- */
.gui-cards{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin:16px 0;}
.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, .ag-peldak{grid-template-columns:minmax(0,1fr);}
  .aj-also{grid-template-columns:minmax(0,1fr);}
}