/* ============================================================
   06 — A három terület: oldalspecifikus elemek
   Élő háromterület-ábra a szimulátor alatt · GitHub Desktop Changes-utánzat · munkamenet-kör
   (a Git-szimulátor stílusa: assets/terminal-sim.css)
   ============================================================ */

.small{font-size:.88rem; color:var(--muted);}
.ix.term::before{content:"⌨ GIT-SZIMULÁTOR";}
pre .blk{font-weight:700; color:var(--code-ink);}

/* ---------- Élő háromterület-ábra ---------- */
.h3t{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:14px;}
.h3t .col{background:var(--card-in); border:1px solid var(--line); border-radius:12px; padding:10px 10px 8px; min-width:0; border-top:4px solid var(--line);}
.h3t .col.wt{border-top-color:var(--muted);}
.h3t .col.st{border-top-color:var(--cyan);}
.h3t .col.rp{border-top-color:var(--accent);}
.h3t .ch{font-weight:800; font-size:.86rem; color:var(--ink-strong); display:flex; align-items:center; gap:6px;}
.h3t .cs{font-size:.74rem; color:var(--muted); margin:1px 0 8px; min-height:1.2em; overflow-wrap:anywhere;}
.h3t .cs code{font-family:"Cascadia Mono",Consolas,monospace; color:var(--orange);}
.h3t ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px;}
.h3t li{
  display:flex; align-items:center; gap:6px; justify-content:space-between; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:4px 8px;
  font-family:"Cascadia Mono",Consolas,monospace; font-size:.8rem; min-width:0; animation:h3t-be .35s ease;
}
.h3t li .n{overflow-wrap:anywhere; min-width:0;}
.h3t li.gone .n{text-decoration:line-through; opacity:.7;}
.h3t .chip{font-family:"Segoe UI",sans-serif; font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:1px 6px; border-radius:99px; white-space:nowrap;}
.chip.untracked{background:var(--dgr-bg); color:var(--red);}
.chip.modified{background:var(--warn-bg); color:var(--orange);}
.chip.unmodified{background:var(--panel2); color:var(--muted);}
.chip.staged{background:var(--tip-bg); color:var(--green);}
.chip.torolve{background:var(--dgr-bg); color:var(--red);}
.chip.commit{background:var(--accent-soft); color:var(--accent2);}
.h3t .ures{font-size:.8rem; color:var(--muted); font-style:italic; padding:4px 2px;}
.h3t .nincs{grid-column:1 / -1; text-align:center; color:var(--muted); font-size:.88rem; padding:10px; border:1px dashed var(--line); border-radius:10px;}
@keyframes h3t-be{from{opacity:0; transform:translateY(-3px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){ .h3t li{animation:none;} }

/* ---------- GitHub Desktop Changes-utánzat ---------- */
.gdc{background:#0d1117; color:#e6edf3; border:1px solid var(--line); border-radius:10px; overflow:hidden; margin:16px 0; font-size:.84rem; box-shadow:var(--shadow-sm);}
.gdc-top{display:grid; grid-template-columns:repeat(3,1fr); background:#24292f; border-bottom:1px solid #3d444d;}
.gdc-top span{padding:7px 12px; border-right:1px solid #3d444d; font-size:.7rem; color:#8b949e; display:flex; flex-direction:column;}
.gdc-top b{color:#e6edf3; font-size:.84rem;}
.gdc-main{display:grid; grid-template-columns:230px minmax(0,1fr); min-height:220px;}
.gdc-side{border-right:1px solid #3d444d; display:flex; flex-direction:column;}
.gdc-tabs{display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid #3d444d;}
.gdc-tabs span{padding:7px; text-align:center; color:#8b949e;}
.gdc-tabs span.on{color:#e6edf3; font-weight:700; box-shadow:inset 0 -2px 0 #f78166;}
.gdc-tabs i{font-style:normal; background:#30363d; border-radius:99px; padding:0 6px; margin-left:3px; font-size:.72rem;}
.gdc-list{flex:1;}
.gdc-row{display:flex; align-items:center; gap:8px; padding:6px 10px; border-bottom:1px solid #21262d;}
.gdc-row .nm{flex:1; min-width:0; overflow-wrap:anywhere;}
.gdc-row .cb{width:13px; height:13px; border:1.5px solid #8b949e; border-radius:3px; flex:0 0 auto; position:relative;}
.gdc-row .cb.on{background:#1f6feb; border-color:#1f6feb;}
.gdc-row .cb.on::after{content:"✓"; position:absolute; inset:-3px 0 0 1px; color:#fff; font-size:.66rem; font-weight:800;}
.gdc-row .ic{font-weight:800; width:14px; text-align:center;}
.gdc-row .ic.m{color:#d29922;} .gdc-row .ic.a{color:#3fb950;}
.gdc-commit{padding:8px; border-top:1px solid #3d444d; display:flex; flex-direction:column; gap:6px;}
.gdc-in{background:#010409; border:1px solid #3d444d; border-radius:6px; padding:5px 8px;}
.gdc-ta{min-height:34px; color:#8b949e;}
.gdc-btn{background:#1f6feb; color:#fff; border-radius:6px; padding:6px; text-align:center; font-weight:600;}
.gdc-diff{min-width:0;}
.gdc-file{padding:7px 12px; border-bottom:1px solid #3d444d; font-weight:600;}
pre.gdc-pre{margin:0; border:0; border-radius:0; padding:8px 0; background:#0d1117; font-size:.8rem;}
pre.gdc-pre .ln{display:block; padding:0 12px;}
pre.gdc-pre .ln.add{background:rgba(46,160,67,.18); color:#aff5b4;}
.dm{color:var(--orange); font-weight:800;} .da{color:var(--green); font-weight:800;} .dd{color:var(--red); font-weight:800;}

/* ---------- VS Code betűjelek ---------- */
.vl{display:inline-block; width:18px; text-align:center; font-weight:800; font-family:"Cascadia Mono",Consolas,monospace;}
.vl.u{color:#73c991;} .vl.m{color:#e2c08d;} .vl.a{color:#81b88b;} .vl.d{color:#c74e39;}
:root[data-theme="light"] .vl.u{color:#1a7f37;} :root[data-theme="light"] .vl.m{color:#9a6700;}
:root[data-theme="light"] .vl.a{color:#1a7f37;} :root[data-theme="light"] .vl.d{color:#cf222e;}

/* ---------- Munkamenet-kör ---------- */
ol.cycle{list-style:none; margin:16px 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; counter-reset:kor;}
ol.cycle li{
  counter-increment:kor; position:relative; background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:12px 12px 10px 42px; display:flex; flex-direction:column; gap:2px;
}
ol.cycle li::before{
  content:counter(kor); position:absolute; left:10px; top:11px; width:22px; height:22px; border-radius:50%;
  background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font-size:.76rem; font-weight:800;
}
ol.cycle b{color:var(--ink-strong); font-size:.92rem;}
ol.cycle b code{font-family:"Cascadia Mono",Consolas,monospace; font-size:.86rem; color:var(--accent2);}
ol.cycle span{font-size:.82rem; color:var(--muted);}

@media (max-width:760px){
  .h3t{grid-template-columns:1fr;}
  .gdc-main{grid-template-columns:1fr;}
  .gdc-side{border-right:0; border-bottom:1px solid #3d444d;}
}