/* ============================================================
   24 — GitHub Flow: oldalspecifikus elemek
   Flow-lépések · Flow-kirakó · szabálykártya · Flow-labor
   ============================================================ */

.ix.term::before{content:"⌨ FLOW-LABOR";}
.gg-par{display:flex; flex-direction:column; gap:10px; margin-top:14px;}
.gg-par .gg-doboz{margin-top:0;}

/* ---------- Flow-lépések ---------- */
.flow{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin:14px 0;}
.fl{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px 12px; min-width:0; display:flex; flex-direction:column; gap:3px;}
.fl b{color:var(--ink-strong);}
.fl small{color:var(--muted); font-size:.82rem; line-height:1.35;}
.fl code{font-family:"Cascadia Mono",Consolas,monospace; font-size:.76rem; color:var(--accent2); background:var(--code-bg); border-radius:6px; padding:3px 7px; margin-top:auto;
  overflow-wrap:anywhere;}
.fl:first-child{border-color:var(--cyan);}
.fl:nth-child(5){border-color:#8957e5;}

/* ---------- Flow-kirakó ---------- */
.ix.kirako::before{content:"🧩 FLOW-KIRAKÓ";}
.fk-kesz{display:flex; flex-direction:column; gap:6px; margin:10px 0; counter-reset:fk;}
.fk-kesz:empty{display:none;}
.fk-lep{counter-increment:fk; position:relative; background:var(--ok-bg); border:1px solid color-mix(in srgb, var(--green) 45%, transparent); border-radius:10px;
  padding:7px 12px 7px 40px; font-size:.9rem; color:var(--ok-ink);}
.fk-lep::before{content:counter(fk); position:absolute; left:10px; top:7px; width:21px; height:21px; border-radius:50%; background:var(--green); color:#062b14;
  display:grid; place-items:center; font-size:.72rem; font-weight:800;}
.fk-lep code, .fk-valaszt code{font-family:"Cascadia Mono",Consolas,monospace; font-size:.8rem;}
.fk-valaszt{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0;}
.fk-valaszt button{font:inherit; font-size:.88rem; text-align:left; color:var(--ink); background:var(--opt-bg); border:1px solid var(--line); border-radius:10px;
  padding:7px 12px; cursor:pointer; max-width:100%;}
.fk-valaszt button:hover{border-color:var(--accent);}
.fk-valaszt button.rossz{border-color:var(--red); background:var(--bad-bg); color:var(--bad-ink); animation:fk-rezeg .35s;}
@keyframes fk-rezeg{0%,100%{transform:translateX(0);} 25%{transform:translateX(-4px);} 75%{transform:translateX(4px);}}
@media (prefers-reduced-motion:reduce){ .fk-valaszt button.rossz{animation:none;} }
.fk-szaml{font-size:.85rem; color:var(--muted); align-self:center;}
.fk-vege{font-weight:800; color:var(--green); margin:6px 0;}

/* ---------- szabálykártya ---------- */
.szabaly-kartya{background:var(--card-in); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:12px; padding:6px 16px; margin:12px 0;}
.szabaly-kartya ol{padding-left:20px; margin:8px 0;}
.szabaly-kartya li{margin-bottom:6px;}

@media (max-width:760px){
  .flow{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width:460px){
  .flow{grid-template-columns:minmax(0,1fr);}
}