/* پوسته‌ی سند — نوار فصل‌ها، فهرست، ناوبری مشترک، و ویجت‌های فصل‌های جدید.
   بعد از deck.css و scene.css بارگذاری می‌شود. */

body { position: relative; }

/* ══════════════════════ نوار فصل‌ها (بالا) ══════════════════════ */
#rail {
  position: relative; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid #181830;
  background: #0d0d1aee;
  backdrop-filter: blur(6px);
  flex-shrink: 0;
}

#tocBtn, #ytLink {
  flex-shrink: 0;
  background: #1a1a30; color: #8888b8; border: 1px solid #2a2a50;
  padding: 5px 12px; border-radius: 8px; cursor: pointer;
  font-family: 'Vazirmatn', sans-serif; font-size: .74rem;
  text-decoration: none; transition: all .18s; white-space: nowrap;
}
#tocBtn:hover, #ytLink:hover { background: #26264c; color: #d8d5f0; }
#ytLink { color: #ff6b6b; border-color: #ff6b6b33; background: #ff6b6b0d; }
#ytLink:hover { background: #ff6b6b1f; color: #ff9a9a; }

#chips {
  display: flex; gap: 6px; overflow-x: auto; flex: 1;
  scrollbar-width: none; padding: 2px 0;
}
#chips::-webkit-scrollbar { display: none; }

.chip {
  flex-shrink: 0; cursor: pointer;
  display: flex; align-items: baseline; gap: 7px;
  background: #16162a; border: 1px solid #24244400;
  padding: 4px 11px; border-radius: 99px;
  font-size: .74rem; color: #55557e; transition: all .18s;
  white-space: nowrap;
}
.chip:hover { background: #20203c; color: #9090b8; }
.chip.on { background: #7c6ee01f; border-color: #7c6ee077; color: #cfc8ff; }
.chip .t {
  font-family: 'Courier New', monospace; font-size: .66rem;
  color: #4a4a72; direction: ltr;
}
.chip.on .t { color: #9a8cf5; }
.chip.todo { opacity: .55; }
.chip.todo .t { color: #55554a; }

/* ══════════════════════ فهرست کامل ══════════════════════ */
#toc {
  position: fixed; inset: 0; z-index: 60;
  background: #08080fee; backdrop-filter: blur(10px);
  overflow-y: auto; padding: 42px 32px 60px;
}
#toc[hidden] { display: none; }
#tocInner { max-width: 1000px; margin: 0 auto; }
#toc h2 {
  font-size: 1.4rem; color: #fff; text-align: center; margin-bottom: 6px;
}
#toc .lede {
  text-align: center; color: #6060a0; font-size: .84rem;
  margin-bottom: 30px; line-height: 1.9;
}
#tocList { display: grid; grid-template-columns: repeat(auto-fill, minmax(292px, 1fr)); gap: 12px; }
.tocCh {
  background: #13132480; border: 1px solid #232342; border-radius: 12px;
  padding: 12px 15px; cursor: pointer; transition: all .18s;
}
.tocCh:hover { background: #1c1c34; border-color: #3a3a6a; }
.tocCh.on { border-color: #7c6ee0; background: #7c6ee014; }
.tocCh.todo { opacity: .5; }
.tocCh .h { display: flex; align-items: baseline; gap: 9px; margin-bottom: 5px; }
.tocCh .n {
  font-family: 'Courier New', monospace; font-size: .7rem; color: #7c6ee0;
  background: #7c6ee01a; border-radius: 5px; padding: 1px 7px; direction: ltr;
}
.tocCh .ti { color: #d8d5f0; font-size: .9rem; font-weight: 700; }
.tocCh .ts {
  font-family: 'Courier New', monospace; font-size: .68rem;
  color: #ff6b6b; direction: ltr; margin-right: auto;
}
.tocCh .d { color: #6a6a95; font-size: .76rem; line-height: 1.75; }
.tocCh .c { color: #3e3e64; font-size: .68rem; margin-top: 6px; direction: rtl; }
#tocClose {
  position: fixed; top: 16px; left: 20px; z-index: 61;
  background: #1e1e38; color: #b0add8; border: 1px solid #323260;
  padding: 6px 16px; border-radius: 8px; cursor: pointer;
  font-family: 'Vazirmatn', sans-serif; font-size: .82rem;
}
#tocClose:hover { background: #2e2e58; color: #fff; }

/* ══════════════════════ حالت سه‌بعدی ══════════════════════ */
/* visibility و نه display:none — دِک باید جای خودش را در ستونِ flex نگه دارد،
   وگرنه نوارِ ناوبری بالا می‌پرد و روی تیترِ صحنه می‌افتد. visibility:hidden
   ضمناً pointer-events را هم می‌بندد تا چرخاندنِ صحنه با ماوس گیر نکند. */
body.scene-mode .deck { visibility: hidden; }
body.scene-mode #rail { background: #0d0d1a99; border-bottom-color: #14142699; }
body.scene-mode .nav { background: #0d0d1a99; border-top-color: #14142699; }

.deck { position: relative; z-index: 2; }
.nav { position: relative; z-index: 30; flex-shrink: 0; background: #0d0d1aee; }

/* شمارنده‌ی گام‌های داخل فصل، کنار شمارنده‌ی کل */
.cnt { direction: ltr; }
#chLabel {
  font-size: .74rem; color: #55557e; min-width: 92px; text-align: center;
  direction: rtl; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#breplay[hidden] { display: none; }

/* نقطه‌های ناوبری: رنگ بر اساس نوع فصل */
.dot.d-scene { background: #2a4a3a; }
.dot.d-scene.on { background: #2bcc6b; }
.dot.d-attn { background: #4a3a2a; }
.dot.d-attn.on { background: #ffd060; }
.dot.d-todo { background: #262636; }
.dot.d-todo.on { background: #55557e; }

/* ══════════════════════ نشانِ زمانِ ویدیو روی اسلاید ══════════════════════ */
.vstamp {
  position: absolute; top: 14px; left: 18px;
  font-family: 'Courier New', monospace; font-size: .68rem;
  color: #ff6b6b99; background: #ff6b6b0d; border: 1px solid #ff6b6b26;
  border-radius: 99px; padding: 2px 10px; direction: ltr;
  pointer-events: none;
}

/* ══════════════════════ ویجت‌های فصل‌های توجه ══════════════════════ */

/* --- ماتریس عمومی --- */
.mrow { display: flex; gap: 3px; direction: ltr; }
.mcell {
  width: 42px; height: 30px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Courier New', monospace; font-size: .7rem;
  border: 1px solid #2a2a50; background: #15152a; color: #7878a8;
  direction: ltr; transition: all .22s;
}
.mcell.zero { color: #2e2e50; background: #101020; }
.mcell.on { border-color: #7c6ee0; background: #7c6ee022; color: #fff; }
.mcell.rowhl { border-color: #2b9dff88; background: #2b9dff14; color: #9fd0ff; }
.mcell.colhl { border-color: #f0c04088; background: #f0c04014; color: #f0c040; }
.mcell.out { border-color: #2bcc6b88; background: #2bcc6b16; color: #7ce8a4; }
.mlab {
  font-family: 'Courier New', monospace; font-size: .62rem;
  color: #44446a; direction: ltr; text-align: center;
}
.mtitle {
  font-family: 'Courier New', monospace; font-size: .74rem;
  color: #9090b8; direction: ltr; text-align: center; margin-bottom: 7px;
}
.mop { color: #44448a; font-size: 1.3rem; direction: ltr; padding: 0 6px; align-self: center; }

/* --- نقشه‌ی حرارتی wei --- */
.hmwrap { display: flex; flex-direction: column; gap: 2px; direction: ltr; }
.hmrow { display: flex; gap: 2px; direction: ltr; }
.hmcell {
  width: 34px; height: 26px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Courier New', monospace; font-size: .58rem;
  border: 1px solid #23234400; color: #cfc8ff; direction: ltr;
  transition: background .3s, color .3s, border-color .3s;
}
.hmcell.masked { color: #3a3a5e; background: #0e0e1c !important; border-color: #1c1c34; }
.hmcell.selrow { outline: 1px solid #ffd06099; outline-offset: -1px; }

/* --- ژتون‌های متن --- */
.tokrow { display: flex; gap: 4px; direction: rtl; flex-wrap: wrap; justify-content: center; }
.tok {
  min-width: 34px; height: 34px; padding: 0 7px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; cursor: pointer;
  border: 1px solid #2a2a50; background: #15152a; color: #8888b8;
  transition: all .18s;
}
.tok:hover { background: #22224a; color: #d8d5f0; }
.tok.sel { border-color: #ffd060; background: #ffd06018; color: #ffd060; box-shadow: 0 0 10px #ffd06044; }
.tok.past { border-color: #2bcc6b66; background: #2bcc6b12; color: #7ce8a4; }
.tok.future { opacity: .25; }

/* --- میله‌های وزن --- */
.wbars { display: flex; gap: 4px; direction: rtl; align-items: flex-end; justify-content: center; }
.wbar { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 34px; }
.wbar .v { font-family: 'Courier New', monospace; font-size: .6rem; color: #9090b8; direction: ltr; min-height: 13px; }
.wbar .b { width: 22px; border-radius: 3px 3px 0 0; transition: height .3s; }
.wbar .l { font-size: .78rem; }

/* --- نقشه‌ی راه (فصل‌های هنوز نساخته) --- */
.rmlist { display: flex; flex-direction: column; gap: 7px; max-width: 660px; width: 100%; }
.rmitem {
  display: flex; align-items: baseline; gap: 12px; direction: rtl;
  background: #12122080; border: 1px solid #1f1f3a; border-radius: 10px;
  padding: 9px 14px;
}
.rmitem .ts {
  font-family: 'Courier New', monospace; font-size: .7rem; color: #ff6b6b88;
  direction: ltr; flex-shrink: 0; width: 56px;
}
.rmitem .ti { color: #b0add8; font-size: .87rem; }
.rmitem .no { color: #4a4a72; font-size: .76rem; margin-right: auto; }

/* --- بلوک کد درون‌اسلایدی --- */
.pycode {
  font-family: 'Courier New', monospace; font-size: .78rem; line-height: 1.95;
  white-space: pre;                    /* بدون این، خطوط کد به‌هم می‌چسبند */
  direction: ltr; text-align: left; color: #9090b8;
  background: #12121f; border: 1px solid #242444; border-radius: 10px;
  padding: 12px 16px; overflow-x: auto; max-width: 100%;
}
.pycode .kw { color: #c792ea; }
.pycode .cm { color: #4a4a70; }
.pycode .st { color: #ffd060; }
.pycode .hl { background: #7c6ee022; border-radius: 4px; }

/* --- لغزنده --- */
.slider { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px;
  background: #2a2a50; outline: none; direction: ltr; }
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 15px; height: 15px;
  border-radius: 50%; background: #7c6ee0; cursor: pointer; border: 2px solid #0d0d1a;
}
.slider::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%; background: #7c6ee0;
  cursor: pointer; border: 2px solid #0d0d1a;
}

/* --- کارت یادداشت --- */
.notecard {
  background: #12122080; border: 1px solid #232342; border-radius: 11px;
  padding: 11px 15px; text-align: right; direction: rtl;
}
.notecard .nh { font-weight: 700; font-size: .86rem; margin-bottom: 4px; }
.notecard .nb { color: #9090b8; font-size: .79rem; line-height: 1.85; }
.notegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 11px; max-width: 900px; width: 100%; }

@media (max-height: 720px) {
  h1 { font-size: 1.5rem; margin-bottom: 10px; }
  .sub { font-size: .86rem; margin-bottom: 16px; }
  .slide { padding: 20px 48px; }
}

/* ══════════════════════ نوارِ راهنما (پایین) ══════════════════════ */
#hint {
  position: relative; z-index: 30; flex-shrink: 0;
  text-align: center; font-size: .66rem; color: #35355a;
  padding: 0 0 6px; direction: rtl; background: #0d0d1aee;
}
body.scene-mode #hint { background: #0d0d1a99; }

/* ══════════════════════ اسلایدهای بلند ══════════════════════
   .slide یک ستونِ flex با justify-content:center است. اگر محتوا از ارتفاع
   بیشتر شود، فلکس‌باکس بچه‌ها را له می‌کند و بالای اسلاید هم غیرقابل‌اسکرول
   می‌شود. دو شبه‌المانِ کِششی همان مرکزچینی را می‌دهند ولی اجازه‌ی اسکرول
   را هم حفظ می‌کنند. */
.slide {
  justify-content: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #2a2a50 transparent;
}
.slide::before, .slide::after { content: ''; flex: 1 0 auto; }
.slide > * { flex-shrink: 0; }
.slide::-webkit-scrollbar { width: 7px; }
.slide::-webkit-scrollbar-thumb { background: #26264a; border-radius: 4px; }
.slide::-webkit-scrollbar-track { background: transparent; }