/* ---------- lesson head ---------- */
.eyebrow{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:17px;}
.chip{font-family:'JetBrains Mono',monospace; font-size:11px; padding:5px 11px; border-radius:8px; background:color-mix(in srgb,var(--pc) 12%, transparent); color:var(--pc); font-weight:500; display:inline-flex; align-items:center; gap:6px;}
.chip.fa{font-family:var(--font); direction:rtl; font-weight:600;}
.step-meter{display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s4); flex-wrap:wrap;}
.sm-txt{font-size:12.5px; color:var(--muted); white-space:nowrap;}
.sm-txt b{color:var(--ink); font-weight:700;}
.sm-bar{flex:1; min-width:90px; height:3px; border-radius:var(--r-pill); background:var(--surface-3); overflow:hidden;}
.sm-bar i{display:block; height:100%; background:var(--ink); border-radius:var(--r-pill); transition:width .5s;}
.sm-phase{font-size:11.5px; color:var(--muted); background:var(--surface-2); border:1px solid var(--line); padding:var(--s1) var(--s3); border-radius:var(--r-pill); white-space:nowrap;}
h1.title{font-size:clamp(27px,3.3vw,37px); font-weight:900; letter-spacing:-.6px; line-height:1.45;}
.sub{color:var(--muted); font-size:16px; margin-top:10px;}
.meta{display:flex; gap:16px; flex-wrap:wrap; margin-top:16px; font-size:12.5px; color:var(--muted);}
.meta span{display:inline-flex; align-items:center; gap:6px;}
.rule{height:1px; background:var(--line); margin:26px 0 2px;}

/* ---------- lesson body ---------- */
.body{border-inline-start:1.5px solid var(--line); padding-inline-start:26px; margin-inline-start:5px;}
.body h2{position:relative; font-size:20px; font-weight:800; margin:var(--s8) 0 var(--s3); line-height:1.55; letter-spacing:-.2px;}
.body h2::before{content:''; position:absolute; inset-inline-start:-33px; top:.66em; width:11px; height:11px; border-radius:3.5px; background:var(--pc); transform:rotate(45deg); box-shadow:0 0 0 4px var(--paper);}
.body h2:first-child{margin-top:14px;}
.body h3{font-size:16px; font-weight:700; margin:var(--s6) 0 var(--s2);}
.body p{margin:10px 0; color:var(--ink-2);}
.body ul,.body ol{margin:10px 20px 14px 0;}
.body li{margin:6px 0; color:var(--ink-2);}
.body li::marker{color:var(--muted);}
.body strong{font-weight:700; color:var(--ink);}
.body em{color:var(--muted); font-style:normal; font-size:.93em;}
code{font-family:'JetBrains Mono',monospace; font-size:.85em; background:var(--surface-2); border:1px solid var(--line-soft); padding:1px 6px; border-radius:6px; direction:ltr; unicode-bidi:isolate; color:var(--accent-ink); white-space:nowrap;}
.code-wrap{position:relative; margin:var(--s4) 0;}
pre{background:var(--code-bg); color:var(--code-ink); border-radius:var(--r-md); padding:var(--s5); direction:ltr; text-align:left; overflow-x:auto; font-size:13px; line-height:1.9; font-family:'JetBrains Mono',monospace; border:1px solid var(--code-line);}
pre code{background:none; border:none; padding:0; color:inherit; white-space:pre; font-size:inherit;}
pre .c{color:#7A8AA3;} pre .g{color:#6ED79A;} pre .r{color:#FA8B7E;} pre .y{color:#E7BE5E;} pre .b{color:#84B8F9;}
.copy{position:absolute; top:10px; inset-inline-end:10px; background:#ffffff12; border:1px solid #ffffff24; color:#B7C4D6; font-family:'JetBrains Mono',monospace; font-size:10.5px; padding:5px 9px; border-radius:8px; cursor:pointer; opacity:0; transition:.15s; display:flex; align-items:center; gap:5px;}
.code-wrap:hover .copy,.copy:focus{opacity:1;}
.copy:hover{background:#ffffff26; color:#fff;}
.callout{border-radius:var(--r-lg); padding:var(--s4) var(--s5); margin:var(--s5) 0; font-size:14.7px; border:1px solid; line-height:1.85;}
.callout .co-title{font-weight:800; display:flex; align-items:center; gap:7px; margin-bottom:3px; font-size:13.5px;}
.callout.tip{background:var(--tip-bg); border-color:var(--tip-bd);} .callout.tip .co-title{color:var(--add);}
.callout.warn{background:var(--warn-bg); border-color:var(--warn-bd); border-inline-start-width:4px; border-inline-start-color:var(--warn-ink);}
.callout.warn .co-title{color:var(--warn-ink);} .callout.warn .co-title i{font-size:17px;}
.callout.note{background:var(--note-bg); border-color:var(--note-bd);} .callout.note .co-title{color:var(--info);}
.example{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s4) var(--s5); margin:var(--s4) 0; box-shadow:var(--sh-1);}
.example .ex-title{font-size:11.5px; font-weight:800; color:var(--pc); margin-bottom:5px; display:flex; align-items:center; gap:6px;}
table{width:100%; border-collapse:collapse; margin:var(--s4) 0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; font-size:14.3px;}
th{background:var(--surface-2); font-weight:700; padding:var(--s3) var(--s4); text-align:start; font-size:13.5px;}
td{padding:var(--s3) var(--s4); border-top:1px solid var(--line); vertical-align:top; color:var(--ink-2);}
.diff-add{background:var(--add-soft); color:var(--add); font-weight:600; display:block; padding:2px 9px; border-radius:6px; margin:3px 0;}
.diff-del{background:var(--del-soft); color:var(--del); text-decoration:line-through; display:block; padding:2px 9px; border-radius:6px; margin:3px 0;}

.gl-head{display:flex; align-items:center; gap:14px; margin-bottom:8px;}
.gl-ic{width:46px; height:46px; border-radius:14px; background:var(--accent-soft); color:var(--accent-ink); display:grid; place-items:center; font-size:23px;}
.gl-search{width:100%; background:var(--surface); border:1.5px solid var(--line); border-radius:13px; padding:13px 44px 13px 14px; font-family:inherit; font-size:15px; color:var(--ink); outline:none; margin:18px 0 6px;}
.gl-search:focus{border-color:var(--accent);}
.gl-wrap{position:relative;}
.gl-wrap>i{position:absolute; inset-inline-start:15px; top:32px; color:var(--muted); font-size:17px;}
.gl-count{font-size:12.5px; color:var(--muted); margin-bottom:14px;}
.gl-list{display:grid; gap:var(--s3);}
.gl-item{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s4) var(--s5); box-shadow:var(--sh-1); text-align:start;
}
.gl-top{display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; margin-bottom:var(--s1);}
.gl-term{
  font-family:var(--mono); font-size:14px; font-weight:700; color:var(--ink);
  direction:ltr; unicode-bidi:isolate;
}
.gl-fa{font-size:13.5px; color:var(--muted);}
.gl-fa::before{content:'—'; margin-inline-end:var(--s1); color:var(--line);}
.gl-lv{
  margin-inline-start:auto; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm);
  font-family:inherit; font-size:11.5px; color:var(--muted); padding:var(--s1) var(--s2); cursor:pointer; white-space:nowrap;
}
.gl-lv:hover{color:var(--accent-ink); border-color:var(--accent);}
.gl-pron{font-size:12.5px; color:var(--muted); display:block; margin-bottom:var(--s2);}
.gl-pron b{color:var(--ink-2); font-weight:600;}
.gl-item p{font-size:13.8px; color:var(--ink-2); line-height:1.9;}

/* ================= toc / helpers ================= */
.toc{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); margin:var(--s6) 0 var(--s2); overflow:hidden; box-shadow:var(--sh-1);}
.toc-h{width:100%; display:flex; align-items:center; gap:9px; padding:13px 16px; background:none; border:none; font-family:inherit; font-size:13.5px; font-weight:700; color:var(--ink); cursor:pointer; text-align:start;}
.toc-h .cnt{margin-inline-start:auto; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); font-weight:500;}
.toc-h .chev{transition:transform .25s; color:var(--muted); font-size:15px;}
.toc.collapsed .chev{transform:rotate(-90deg);}
.toc.collapsed .toc-list{display:none;}
.toc-list{list-style:none; margin:0; padding:0 16px 12px; display:grid; gap:2px;}
.toc-list a{display:flex; gap:9px; align-items:baseline; padding:7px 10px; border-radius:9px; font-size:13.5px; color:var(--ink-2); text-decoration:none; line-height:1.7;}
.toc-list a:hover{background:var(--surface-2); color:var(--accent-ink);}
.toc-list em{font-style:normal; font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--pc); flex-shrink:0;}
.body h2{scroll-margin-top:82px;}
.tbl-scroll{overflow-x:auto; margin:16px 0; border-radius:13px; -webkit-overflow-scrolling:touch;}
.tbl-scroll table{margin:0; min-width:460px;}
.tbl-scroll::-webkit-scrollbar{height:6px;} .tbl-scroll::-webkit-scrollbar-thumb{background:var(--line); border-radius:9px;}
.to-top{position:fixed; bottom:24px; inset-inline-end:24px; z-index:35; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--muted); font-size:17px; cursor:pointer; box-shadow:var(--sh-2); opacity:0; transform:translateY(12px); pointer-events:none; transition:.22s; display:grid; place-items:center;}
.to-top.show{opacity:1; transform:translateY(0); pointer-events:auto;}
.to-top:hover{color:var(--accent); border-color:var(--accent);}
.lvl-pill{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); background:var(--surface); border:1px solid var(--line); padding:6px 11px; border-radius:99px; white-space:nowrap;}
.lvl-pill i{color:var(--add); font-size:14px;}
.lvl-pill b{font-family:'JetBrains Mono',monospace; font-weight:700; color:var(--ink);}
.rail-close{display:none; width:32px; height:32px; border-radius:9px; border:1px solid var(--rail-line); background:transparent; color:var(--rail-muted); font-size:15px; cursor:pointer; margin-inline-start:auto; flex-shrink:0;}
.no-hit{padding:22px 20px; text-align:center; color:var(--rail-muted); font-size:12.5px;}

/* ---- شبیه‌ساز تعاملی سه ناحیهٔ Git ---- */
.sim{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5); margin:var(--s6) 0; box-shadow:var(--sh-1);}
.sim-head{display:flex; align-items:center; gap:9px; margin-bottom:4px;}
.sim-head i{color:var(--pc); font-size:19px;}
.sim-head b{font-size:14.5px; font-weight:800;}
.sim-note{font-size:12.6px; color:var(--muted); margin-bottom:14px;}
.sim-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:9px;}
.sim-col{background:var(--surface-2); border:1px solid var(--line); border-radius:13px; padding:11px 11px 13px; min-height:112px; transition:border-color .2s, background .2s;}
.sim-col.hot{border-color:var(--pc); background:color-mix(in srgb,var(--pc) 6%, var(--surface-2));}
/* Scoped through .sim-cols so the lesson-body h4 rules (here and in the
   responsive overrides) cannot win the cascade on equal specificity. */
.sim-cols .sim-col h3{font-size:11px; font-weight:700; color:var(--muted); display:flex; align-items:center; gap:5px; margin:0 0 9px;}
.sim-cols .sim-col h3 em{font-style:normal; font-family:'JetBrains Mono',monospace; font-size:9.5px; opacity:.75;}
.chips{display:grid; gap:6px;}
.chip-f{
  display:flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--line);
  border-radius:9px; padding:6px 9px; font-family:'JetBrains Mono',monospace; font-size:11px; direction:ltr;
  animation:chipIn .3s cubic-bezier(.2,.8,.2,1);
}
.chip-f.mod{border-color:color-mix(in srgb,var(--del) 45%, var(--line)); color:var(--del);}
.chip-f.stg{border-color:color-mix(in srgb,var(--add) 45%, var(--line)); color:var(--add);}
.chip-f.cmt{border-color:var(--line); color:var(--ink-2);}
.chip-f i{font-size:12px;}
@keyframes chipIn{from{opacity:0; transform:translateY(-6px) scale(.96);} to{opacity:1; transform:none;}}
.sim-empty{font-size:11.5px; color:var(--muted); opacity:.7; padding-top:4px;}
.sim-cmds{display:flex; flex-wrap:wrap; gap:7px; margin-top:13px;}
.sim-cmd{
  font-family:'JetBrains Mono',monospace; font-size:11.5px; direction:ltr; background:var(--code-bg); color:#C9D6E8;
  border:1px solid var(--code-line); border-radius:9px; padding:7px 11px; cursor:pointer; transition:.15s;
}
.sim-cmd:hover:not(:disabled){border-color:var(--pc); color:#fff;}
.sim-cmd:disabled{opacity:.35; cursor:not-allowed;}
.sim-cmd.ghost{font-family:var(--font); background:none; color:var(--muted); font-family:inherit; font-size:11.5px; direction:rtl;}
.sim-log{margin-top:12px; background:var(--code-bg); border:1px solid var(--code-line); border-radius:11px; padding:11px 13px; min-height:56px; font-size:11.5px; line-height:1.9;}
.sim-log div{display:flex; gap:8px; align-items:baseline;}
.sim-log .cmd{font-family:'JetBrains Mono',monospace; color:#7FD8A8; direction:ltr; flex-shrink:0;}
.sim-log .exp{color:#9FB0C6; font-size:12px;}