/* ============================================================
   08 — Előzmények és a commit-hash: oldalspecifikus elemek
   Hash-labor · Hash-lánc · log-anatómia · Log-labor · Célkereső · diff-ábra · Diff-labor · GUI-kártyák
   (a Git-szimulátor stílusa: assets/terminal-sim.css)
   ============================================================ */

.small{font-size:.86rem; color:var(--muted);}
.ix.term::before{content:"⌨ GIT-SZIMULÁTOR";}
.mono{font-family:"Cascadia Mono",Consolas,monospace;}

/* közös apróságok (mint a 7. fejezetben) */
.ln-top{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin:8px 0;}
.ln-chk{display:flex; gap:8px; align-items:center; font-size:.9rem;}
.ln-minta{font-size:.82rem; color:var(--muted); margin:6px 0 10px; display:flex; gap:6px; flex-wrap:wrap; align-items:center;}
.mini-link{background:var(--panel2); border:1px solid var(--line); border-radius:99px; padding:2px 10px; font:inherit; font-size:.8rem; color:var(--ink); cursor:pointer;}
.mini-link:hover{border-color:var(--accent); color:var(--accent2);}
.ix select, .ix textarea, .ix input[type=text]{
  font:inherit; color:var(--ink); background:var(--card-in); border:1px solid var(--line); border-radius:8px;
}
.ix select{padding:3px 6px; font-size:.85rem;}
.ix textarea:focus, .ix input[type=text]:focus, .ix select:focus{outline:2px solid var(--accent); outline-offset:1px;}
.ix textarea{
  width:100%; resize:vertical; background:var(--code-bg); color:var(--code-ink); padding:10px 12px;
  font-family:"Cascadia Mono",Consolas,monospace; font-size:.88rem; line-height:1.5;
}

/* ---------- Hash-labor ---------- */
.ix.hashlab::before{content:"🔑 HASH-LABOR";}
.hl-out{background:var(--code-bg); border:1px solid var(--line); border-radius:10px; padding:10px 14px; display:flex; flex-direction:column; gap:6px;}
.hl-row{display:grid; grid-template-columns:92px minmax(0,1fr); gap:10px; align-items:baseline;}
.hl-lbl{font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:#8b949e;}
.hl-row code{font-family:"Cascadia Mono",Consolas,monospace; font-size:.92rem; color:var(--code-ink); overflow-wrap:anywhere; letter-spacing:.02em;}
.hl-hash{color:#fbbf24 !important;}
.hl-hash .v{background:rgba(245,105,63,.35); color:#fff; border-radius:2px;}
.hl-short{color:#fbbf24 !important; font-weight:700;}
.hl-prev{color:#6b7684 !important;}
.hl-fb{margin-top:10px; font-size:.92rem; font-weight:700; min-height:1.4em;}

/* ---------- Hash-lánc ---------- */
.ix.chain::before{content:"⛓ HASH-LÁNC";}
.hc-row{display:flex; align-items:stretch; gap:0; margin-top:10px; overflow-x:auto; padding-bottom:6px;}
.hc-c{flex:1 0 170px; background:var(--card-in); border:2px solid var(--line); border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; gap:6px; transition:border-color .3s, box-shadow .3s;}
.hc-c.valt{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.hc-nev{font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);}
.hc-c input{width:100%; padding:5px 8px; font-size:.86rem;}
.hc-h{font-family:"Cascadia Mono",Consolas,monospace; font-size:.9rem; font-weight:700; color:var(--yellow, #fbbf24);}
.hc-c.valt .hc-h{color:var(--accent2);}
.hc-regi{font-family:"Cascadia Mono",Consolas,monospace; font-size:.76rem; color:var(--muted); text-decoration:line-through; min-height:1.1em;}
.hc-p{font-family:"Cascadia Mono",Consolas,monospace; font-size:.74rem; color:var(--muted);}
.hc-nyil{flex:0 0 34px; display:grid; place-items:center; color:var(--muted); font-size:1.3rem;}
.hc-fb{margin-top:10px; font-size:.92rem; min-height:1.4em;}
.hc-fb.figy{color:var(--orange);} .hc-fb.ok{color:var(--green);}

/* ---------- Anatómia (log és diff) ---------- */
.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) 260px; gap:14px; padding:1px 16px; align-items:start;}
.an-txt{font-family:"Cascadia Mono",Consolas,monospace; font-size:.85rem; 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-lbl code.inline{font-size:.72rem;}
.an-row.hsh .an-txt{border-color:#fbbf24; color:#fbbf24;}
.an-row.msg .an-txt{border-color:#2dd4bf; color:#fff;}
.an-row.meta .an-txt{border-color:#e6edf3; color:#fff; font-weight:700;}
.an-row.hunk .an-txt{border-color:#56d4dd; color:#56d4dd;}
.an-row.add .an-txt{border-color:#4ade80; color:#4ade80; background:rgba(74,222,128,.08);}
.an-row.del .an-txt{border-color:#f87171; color:#f87171; background:rgba(248,113,113,.08);}
.an-row.add .an-lbl{color:#4ade80;} .an-row.del .an-lbl{color:#f87171;} .an-row.hunk .an-lbl{color:#56d4dd;}

/* ---------- Log-labor és Diff-labor kimenete ---------- */
.ix.loglab::before{content:"🔎 LOG-LABOR";}
.ll-opts{display:flex; flex-wrap:wrap; gap:8px 16px; margin:10px 0; font-family:"Cascadia Mono",Consolas,monospace; font-size:.86rem;}
.ll-opts label{display:flex; align-items:center; gap:6px; cursor:pointer;}
.ll-opts input{accent-color:var(--accent); width:15px; height:15px;}
pre.ll-cmd{margin:0 0 8px; padding:8px 12px; font-size:.86rem; white-space:pre-wrap;}
pre.ll-out{margin:0; max-height:380px; overflow:auto; font-size:.82rem; line-height:1.45; white-space:pre;}
pre.ll-out .o-hash, pre.ll-out .o-graph{color:#fbbf24;}
pre.ll-out .o-ref{color:#56d4dd; font-weight:700;}
pre.ll-out .o-meta{color:#fff; font-weight:700;}
pre.ll-out .o-hunk{color:#56d4dd;}
pre.ll-out .o-grn{color:#4ade80;}
pre.ll-out .o-red{color:#f87171;}
pre.ll-out .o-dim{color:#6b7684; font-style:italic;}

/* ---------- Célkereső ---------- */
.ix.refs::before{content:"🎯 CÉLKERESŐ";}
.rf-lanc{display:flex; gap:0; align-items:stretch; overflow-x:auto; padding:18px 2px 6px; margin-top:6px;}
.rf-c{
  position:relative; flex:1 0 108px; background:var(--card-in); border:2px solid var(--line); border-radius:11px; padding:8px 8px 7px;
  font:inherit; color:var(--ink); text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:3px; transition:border-color .2s, background .2s;
}
.rf-c:hover{border-color:var(--accent);}
.rf-c .h{font-family:"Cascadia Mono",Consolas,monospace; font-size:.82rem; font-weight:700; color:#fbbf24;}
:root[data-theme="light"] .rf-c .h, :root[data-theme="light"] .hc-h{color:#b45309;}
.rf-c .m{font-size:.76rem; color:var(--muted); line-height:1.3;}
.rf-c .jel{position:absolute; top:-12px; right:6px; display:flex; gap:4px;}
.rf-c .jel span{font-size:.66rem; font-weight:800; padding:1px 6px; border-radius:99px; background:var(--accent); color:var(--accent-ink);}
.rf-c .jel span.ag{background:#2dd4bf; color:#04211d;}
.rf-c.cel{border-color:#2dd4bf; background:rgba(45,212,191,.12);}
.rf-c.jo{border-color:var(--green); background:rgba(74,222,128,.14);}
.rf-c.rossz{border-color:var(--red); background:rgba(248,113,113,.12);}
.rf-nyil{flex:0 0 22px; display:grid; place-items:center; color:var(--muted);}
.rf-in{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:12px 0;}
.rf-in input{width:190px; padding:6px 10px; font-family:"Cascadia Mono",Consolas,monospace; font-size:.92rem;}
.rf-fb{font-size:.9rem;}
.rf-fb.ok{color:var(--green);} .rf-fb.no{color:var(--red);} .rf-fb.figy{color:var(--orange);}
.rf-quiz{border-top:1px dashed var(--line); padding-top:10px;}
.rf-quiz .meta{display:flex; justify-content:space-between; font-size:.82rem; color:var(--muted); font-weight:700;}
.rf-kerdes{font-size:1rem; margin:8px 0 4px;}
.rf-kerdes code{font-family:"Cascadia Mono",Consolas,monospace; color:var(--accent2); font-weight:700; font-size:1.05rem;}
.rf-qfb{font-size:.9rem; min-height:1.4em;}

/* ---------- git diff: a három terület ---------- */
.dz{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px 14px; margin:18px 0;}
.dz-box{border:2px solid var(--line); border-radius:12px; padding:10px 12px; text-align:center; background:var(--panel);}
.dz-box b{display:block; color:var(--ink-strong);}
.dz-box small{color:var(--muted); font-size:.8rem;}
.dz-box.wd{border-color:#f87171;} .dz-box.st2{border-color:#4ade80;} .dz-box.hd{border-color:#60a5fa;}
.dz-bar{position:relative; text-align:center; border-top:2px solid var(--accent); margin:12px 18px 0; padding-top:4px;}
.dz-bar::before, .dz-bar::after{content:""; position:absolute; top:-7px; width:0; height:0; border:6px solid transparent;}
.dz-bar::before{left:-6px; border-right-color:var(--accent); border-left:0;}
.dz-bar::after{right:-6px; border-left-color:var(--accent); border-right:0;}
.dz-bar code{font-family:"Cascadia Mono",Consolas,monospace; font-size:.86rem; color:var(--accent2); font-weight:700;}
.dz-bar.b1{grid-column:1 / 3;} .dz-bar.b2{grid-column:2 / 4;} .dz-bar.b3{grid-column:1 / 4;}

/* ---------- Diff-labor ---------- */
.ix.difflab::before{content:"± DIFF-LABOR";}
.dl-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; margin-top:10px;}
.dl-col{display:flex; flex-direction:column; gap:4px;}
.dl-col span{font-size:.78rem; font-weight:800; color:var(--muted); font-family:"Cascadia Mono",Consolas,monospace;}
.dl-col:first-child span{color:var(--red);} .dl-col:last-child span{color:var(--green);}
.ln-chk select{margin-left:4px;}

/* ---------- 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;}

/* ---------- a szimulátor alatti commitlánc ---------- */
.g8-lanc{margin-top:14px; display:flex; gap:8px; overflow-x:auto; padding:14px 2px 4px;}
.g8-c{position:relative; flex:0 0 auto; min-width:118px; max-width:170px; background:var(--card-in); border:1px solid var(--line); border-radius:10px; padding:6px 9px;}
.g8-c .rf{position:absolute; top:-10px; left:8px; font-size:.66rem; font-weight:800; padding:1px 6px; border-radius:99px; background:var(--panel2); border:1px solid var(--line); color:var(--accent2); font-family:"Cascadia Mono",Consolas,monospace;}
.g8-c.fej{border-color:var(--accent);}
.g8-c.fej .rf{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
.g8-c .h{font-family:"Cascadia Mono",Consolas,monospace; font-size:.8rem; font-weight:700; color:#fbbf24;}
:root[data-theme="light"] .g8-c .h{color:#b45309;}
.g8-c .m{font-size:.74rem; color:var(--muted); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.g8-c .a{font-size:.7rem; color:var(--muted); opacity:.8;}

@media (max-width:860px){
  .gui-cards{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:760px){
  .an-row{grid-template-columns:1fr; gap:0;}
  .an-lbl{padding-left:13px; margin-bottom:4px;}
  .an-lbl:empty{display:none;}
  .dl-grid{grid-template-columns:1fr;}
  .hl-row{grid-template-columns:1fr; gap:2px;}
  .dz{gap:8px;}
  .dz-box{padding:8px 6px;}
  .dz-box small{display:none;}
  .dz-box b{font-size:.82rem;}
  .dz-bar{margin:10px 8px 0;}
  .dz-bar code{font-size:.76rem;}
}

/* keskeny kijelzőn a hash-lánc függőleges */
@media (max-width:640px){
  .hc-row{flex-direction:column; overflow-x:visible;}
  .hc-c{flex:0 0 auto;}
  .hc-nyil{flex:0 0 26px; transform:rotate(90deg);}
}