/* ============================================================
   01 — A verziókezelés és a Git története: oldalspecifikus elemek
   Kézi „verziózott” mappa · commit-kártya · Időgép · idővonal · Git vs GitHub
   ============================================================ */

.small{font-size:.9rem; color:var(--muted);}
.side-lbl{margin:0 0 8px; font-size:.92rem;}
.grid2 pre{margin-top:0;}

/* ---------- Fájlkezelő-utánzat: a kézi mentések káosza ---------- */
.explorer{
  background:var(--card-in); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; font-size:.88rem; color:var(--card-in-ink);
}
.explorer .ex-head{padding:9px 14px; background:var(--panel2); border-bottom:1px solid var(--line); font-weight:700;}
.explorer ul{list-style:none; margin:0; padding:6px 0;}
.explorer li{display:flex; align-items:center; gap:9px; padding:5px 14px;}
.explorer li:nth-child(even){background:var(--zebra);}
.explorer .ico{flex:0 0 auto;}
.explorer .nm{flex:1; min-width:0; overflow-wrap:anywhere; font-family:"Cascadia Mono",Consolas,monospace; font-size:.82rem;}
.explorer .dt{color:var(--muted); font-size:.8rem; white-space:nowrap;}
.explorer li.hot .nm{color:var(--red); font-weight:700;}
.explorer .ex-foot{padding:9px 14px; border-top:1px dashed var(--line); color:var(--orange); font-size:.84rem; font-style:italic;}

/* ---------- Egy commit részei ---------- */
.commit-card{
  background:var(--card-in); border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:12px; padding:8px 0; margin:16px 0; color:var(--card-in-ink);
}
.commit-card .cc-row{display:grid; grid-template-columns:150px 1fr; gap:14px; padding:6px 18px; font-size:.92rem;}
.commit-card .cc-row + .cc-row{border-top:1px solid var(--line);}
.commit-card .cc-k{color:var(--muted); font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; padding-top:2px;}
.commit-card .cc-v{min-width:0; overflow-wrap:anywhere;}
.commit-card .mono{font-family:"Cascadia Mono",Consolas,monospace; color:var(--orange);}

/* ---------- Időgép ---------- */
.tm-grid{display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:16px; margin-top:12px;}
.tm-log{list-style:none; margin:0; padding:0; position:relative;}
.tm-log::before{                         /* a commitokat összekötő függőleges „ág” */
  content:""; position:absolute; left:18px; top:24px; bottom:24px; width:3px;
  background:var(--accent); border-radius:2px; opacity:.55;
}
.tm-log li{margin:0 0 8px;}
.tm-log li:last-child{margin-bottom:0;}
.tm-log button{
  position:relative; width:100%; display:grid; grid-template-columns:22px 1fr; gap:4px 12px; align-items:center;
  text-align:left; background:var(--card-in); color:var(--card-in-ink); border:1px solid var(--line);
  border-radius:10px; padding:9px 12px 9px 8px; cursor:pointer; font-family:inherit; transition:.14s;
}
.tm-log button:hover{border-color:var(--accent);}
.tm-log button[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft);}
.tm-log .dot{
  grid-row:1 / span 2; width:14px; height:14px; border-radius:50%; justify-self:center;
  background:var(--panel); border:3px solid var(--accent);
}
.tm-log button[aria-pressed="true"] .dot{background:var(--accent);}
.tm-log .msg{font-size:.88rem; font-weight:600; line-height:1.35;}
.tm-log .sub{font-size:.76rem; color:var(--muted);}
.tm-log .sub b{font-family:"Cascadia Mono",Consolas,monospace; color:var(--orange); font-weight:600;}

.tm-view{min-width:0; display:flex; flex-direction:column;}
.tm-head{
  font-size:.82rem; color:var(--muted); background:var(--panel2); border:1px solid var(--line);
  border-bottom:0; border-radius:10px 10px 0 0; padding:7px 14px;
}
.tm-head b{color:var(--ink-strong); font-family:"Cascadia Mono",Consolas,monospace;}
.tm-head .h{color:var(--orange); font-family:"Cascadia Mono",Consolas,monospace;}
pre.tm-code{margin:0; border-radius:0 0 10px 10px; padding:10px 0; min-height:250px;}
pre.tm-code .ln{display:block; padding:0 14px 0 10px;}
pre.tm-code .ln::before{content:"  "; white-space:pre; color:#6b7684;}
pre.tm-code .ln.add{background:rgba(74,222,128,.14); color:#bbf7d0;}
pre.tm-code .ln.add::before{content:"+ "; color:#4ade80;}
pre.tm-code .ln.del{background:rgba(248,113,113,.13); color:#fecaca; text-decoration:line-through; text-decoration-color:rgba(248,113,113,.6);}
pre.tm-code .ln.del::before{content:"- "; color:#f87171;}
.tm-note{margin:10px 0 0; font-size:.9rem; color:var(--muted); min-height:2.8em;}
.tm-note strong{color:var(--ink-strong);}

/* ---------- Idővonal ---------- */
ol.tl{list-style:none; margin:16px 0; padding:0 0 0 6px; position:relative;}
ol.tl::before{content:""; position:absolute; left:60px; top:8px; bottom:8px; width:2px; background:var(--line);}
ol.tl li{display:grid; grid-template-columns:40px 1fr; gap:42px; position:relative; padding:7px 0; font-size:.95rem;}
ol.tl li::before{                         /* pont az idővonalon */
  content:""; position:absolute; left:49px; top:15px; width:11px; height:11px; border-radius:50%; box-sizing:border-box;
  background:var(--panel); border:2px solid var(--muted);
}
ol.tl .yr{font-weight:800; color:var(--muted); text-align:right; font-variant-numeric:tabular-nums;}
ol.tl li.key::before{background:var(--accent); border-color:var(--accent); width:15px; height:15px; left:47px; top:13px;}
ol.tl li.key .yr{color:var(--accent);}
ol.tl li.key > div{background:var(--accent-soft); border:1px solid var(--accent); border-radius:10px; padding:8px 12px; margin:-4px 0;}

/* ---------- Git vs GitHub kártyák ---------- */
.vs{margin:18px 0;}
.vs-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 20px; border-top:4px solid var(--accent);}
.vs-card.hub{border-top-color:var(--cyan);}
.vs-card .vs-t{font-size:1.35rem; font-weight:800; color:var(--ink-strong);}
.vs-card .vs-s{color:var(--muted); font-size:.9rem; margin-bottom:6px;}
.vs-card.git .vs-s strong{color:var(--accent2);}
.vs-card.hub .vs-s strong{color:var(--cyan);}
.vs-card ul{margin:0; padding-left:20px; font-size:.93rem;}
.vs-card li{margin:5px 0;}

@media (max-width:760px){
  .tm-grid{grid-template-columns:1fr;}
  pre.tm-code{min-height:0;}
  .commit-card .cc-row{grid-template-columns:1fr; gap:2px;}
}