/* ============================================================
   Tutorial pages theme — GenAI-Powered .NET course renderer
   Light + dark mode (scoped to .tut-scope), title colors,
   step animations, notes highlights, term tooltips.
   ============================================================ */
.tut-scope{
  --ink:#0f1b2d; --paper:#f7f6f2; --card:#ffffff;
  --tx:#1c2431; --muted:#5b6676; --line:#dfdbd2;
  --accent:#b97a10;            /* amber — section numbers, highlights */
  --accent-soft:#f6e7c8;
  --teal:#0f8a86;              /* teal — subtitles, links, interactive */
  --teal-soft:#d2ecea;
  --note:#f2c94c; --ok:#1f8a4c; --bad:#c0392b;
  --codebg:#0f1b2d; --codetx:#e7edf5;
  --shadow:0 1px 0 rgba(15,27,45,.05),0 8px 22px -18px rgba(15,27,45,.35);
  color:var(--tx);
  background:var(--paper);
  border-radius:12px;
  padding:18px 20px 30px;
  transition:background .25s,color .25s;
}
.tut-scope.dark{
  --paper:#0d1622; --card:#13202f;
  --tx:#e7ecf3; --muted:#9aa7b8; --line:#26374b;
  --accent:#e6a33a; --accent-soft:#3a2f16;
  --teal:#3fb7b2; --teal-soft:#123330;
  --codebg:#0a1420; --codetx:#dce6f2;
  --shadow:0 8px 22px -18px rgba(0,0,0,.8);
}

/* ---------- top toolbar ---------- */
.tut-topbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.tut-topbar .spacer{flex:1}
.tut-btn{background:var(--card);color:var(--tx);border:1px solid var(--line);border-radius:9px;
  padding:7px 14px;cursor:pointer;font-size:.88rem;font-weight:600;box-shadow:var(--shadow)}
.tut-btn:hover{border-color:var(--accent)}
.tut-btn .cnt{display:inline-block;min-width:20px;text-align:center;background:var(--accent);color:#fff;
  border-radius:999px;font-size:.72rem;padding:1px 6px;margin-left:4px}

/* ---------- headings: professional colors ---------- */
.tut-scope .tut-title{font-family:Georgia,"Times New Roman",serif;font-weight:800;color:var(--tx);
  font-size:1.9rem;margin:0 0 4px;letter-spacing:.2px}
.tut-scope .tut-subtitle{color:var(--teal);font-size:.95rem;margin-bottom:12px}
.tut-scope section h2.tut-h2{display:flex;align-items:baseline;gap:10px;font-family:Georgia,serif;
  font-size:1.35rem;font-weight:700;color:var(--tx);border-bottom:2px solid var(--accent-soft);
  padding-bottom:8px;margin-bottom:14px}
.tut-scope section h2.tut-h2 .secnum{color:var(--accent);font-weight:900;font-size:1.5rem;line-height:1}
.tut-scope h3{color:var(--teal);font-size:1.05rem;font-weight:700}
.tut-scope .badge-row .badge{margin-right:4px}

/* ---------- cards / body ---------- */
.tut-scope section.tut-sec{background:var(--card);border:1px solid var(--line);border-radius:11px;
  padding:20px 24px;margin-bottom:18px;box-shadow:var(--shadow);scroll-margin-top:96px}
.tut-scope p,.tut-scope li{color:var(--tx)}
.tut-scope .text-muted{color:var(--muted)!important}
.tut-scope a{color:var(--teal)}

/* alerts / callouts re-tinted for dark mode */
.tut-scope.dark .alert-info{background:#12303c;color:#bfe3ee;border-color:#1d4a5a}
.tut-scope.dark .alert-success{background:#12321f;color:#bfe8cd;border-color:#1d5433}
.tut-scope.dark .alert-warning{background:#3a2f16;color:#f0ddb0;border-color:#5c4a20}
.tut-scope.dark .alert-secondary{background:#1b2a3b;color:#c9d4e0;border-color:#2c4054}
.tut-scope.dark .alert-danger{background:#3b1b1b;color:#f0c0ba;border-color:#5c2a26}

/* code blocks */
.tut-scope pre{background:var(--codebg);color:var(--codetx)}
.tut-scope .card{background:var(--card);border-color:var(--line);color:var(--tx)}
.tut-scope .card-header{background:var(--paper);color:var(--tx);border-color:var(--line)}

/* tables */
.tut-scope .table{color:var(--tx);border-color:var(--line)}
.tut-scope.dark .table{--bs-table-bg:transparent;--bs-table-color:#e7ecf3;--bs-table-border-color:#26374b;
  --bs-table-striped-bg:rgba(255,255,255,.03);--bs-table-striped-color:#e7ecf3}
.tut-scope.dark .table thead.table-dark{--bs-table-bg:#0a1420}

/* tabs */
.tut-scope .nav-tabs{border-color:var(--line);background:var(--paper)!important}
.tut-scope .nav-tabs .nav-link{color:var(--muted)}
.tut-scope .nav-tabs .nav-link.active{color:var(--accent);background:var(--card);border-color:var(--line) var(--line) var(--card);font-weight:700}

/* quiz cards in dark mode */
.tut-scope.dark .quiz-item{background:var(--card)}
.tut-scope.dark .form-check-label{color:var(--tx)}
.tut-scope.dark details{background:var(--card);border-color:var(--line)!important;color:var(--tx)}
.tut-scope.dark details .bg-light{background:var(--paper)!important;color:var(--tx)}
.tut-scope.dark .list-group-item{background:var(--card);color:var(--tx);border-color:var(--line)}
.tut-scope.dark .breadcrumb-item,.tut-scope.dark .breadcrumb-item.active{color:var(--muted)}

/* ============================================================
   ANIMATIONS — step-based pipeline diagrams
   ============================================================ */
.tut-anim{border:1px solid var(--line);border-radius:11px;background:var(--paper);
  padding:16px 18px;margin:18px 0}
.tut-anim .anim-title{font-family:Georgia,serif;font-weight:700;color:var(--accent);margin-bottom:2px}
.tut-anim .anim-intro{font-size:.85rem;color:var(--muted);font-style:italic;margin-bottom:12px}
.tut-anim .anim-stage{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;row-gap:14px}
.tut-anim .anim-node{flex:1;min-width:110px;background:var(--card);border:2px solid var(--line);border-radius:10px;
  padding:10px 8px;text-align:center;transition:border-color .35s,box-shadow .35s,transform .35s,opacity .35s;opacity:.55}
.tut-anim .anim-node b{display:block;font-size:.92rem;color:var(--tx)}
.tut-anim .anim-node small{color:var(--muted);font-size:.72rem}
.tut-anim .anim-node.on{border-color:var(--accent);opacity:1;transform:translateY(-3px);
  box-shadow:0 6px 16px -8px var(--accent)}
.tut-anim .anim-arrow{display:flex;align-items:center;padding:0 6px;color:var(--muted);font-size:1.2rem;user-select:none}
.tut-anim .anim-cap{margin-top:12px;background:var(--card);border:1px dashed var(--line);border-radius:8px;
  padding:9px 13px;font-size:.92rem;min-height:2.4em;color:var(--tx)}
.tut-anim .anim-ctrls{display:flex;gap:8px;margin-top:10px;align-items:center;flex-wrap:wrap}
.tut-anim .anim-ctrls button{background:var(--card);border:1px solid var(--line);border-radius:7px;
  color:var(--tx);padding:5px 12px;cursor:pointer;font-size:.84rem}
.tut-anim .anim-ctrls button:hover{border-color:var(--accent)}
.tut-anim .anim-ctrls button.play{background:var(--teal);color:#fff;border-color:transparent}
.tut-anim .anim-step-ind{font-size:.8rem;color:var(--muted);margin-left:auto}
@media (prefers-reduced-motion:reduce){.tut-anim .anim-node{transition:none}}

/* ============================================================
   NOTES — double-click highlights + bottom list
   ============================================================ */
.noted-word{background:linear-gradient(180deg,transparent 60%,var(--note) 60%);border-bottom:2px solid var(--note);
  cursor:pointer;border-radius:2px;color:inherit}
.tut-scope.dark .noted-word{background:linear-gradient(180deg,transparent 60%,rgba(242,201,76,.45) 60%)}

#notePop{position:absolute;z-index:2100;background:#fff;border:1px solid #dcd8cd;border-radius:10px;
  box-shadow:0 10px 26px -12px rgba(15,27,45,.55);padding:12px;width:262px;display:none}
#notePop .npword{font-weight:700;color:#b97a10;margin-bottom:6px;font-size:.9rem;font-family:Georgia,serif}
#notePop textarea{width:100%;min-height:64px;border:1px solid #dcd8cd;border-radius:7px;padding:7px;
  color:#1c2431;background:#fff;font-family:inherit;font-size:.88rem;resize:vertical;box-sizing:border-box}
#notePop .row2{display:flex;gap:6px;margin-top:8px}
#notePop button{flex:1;font-size:.82rem;padding:7px;border-radius:7px;cursor:pointer;border:1px solid #dcd8cd;background:#f5f4ef;color:#1c2431}
#notePop button.save{background:#0f8a86;color:#fff;border:none}
#notePop button.del{background:#c0392b;color:#fff;border:none}

/* bottom notes list */
#myNotes{background:var(--card);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow);
  padding:20px 24px;margin:10px 0 30px}
#myNotes h2{font-family:Georgia,serif;font-size:1.25rem;font-weight:700;color:var(--accent);
  border-bottom:2px solid var(--accent-soft);padding-bottom:8px;margin-bottom:12px}
#myNotes .notes-empty{color:var(--muted);font-size:.92rem}
.noterow{border:1px solid var(--line);border-radius:9px;padding:10px 13px;margin-bottom:8px;background:var(--paper)}
.noterow .w{font-weight:700;color:var(--accent);cursor:pointer}
.noterow .w:hover{text-decoration:underline}
.noterow .txt{font-size:.9rem;color:var(--tx);margin-top:3px;white-space:pre-wrap}
.noterow .meta{font-size:.74rem;color:var(--muted);margin-top:4px}
.noterow .acts{display:flex;gap:6px;margin-top:7px}
.noterow .acts button{font-size:.74rem;padding:4px 10px;border-radius:6px;border:1px solid var(--line);
  background:var(--card);color:var(--tx);cursor:pointer}
.noterow .acts button:hover{border-color:var(--accent)}

/* ============================================================
   TERM TOOLTIPS
   ============================================================ */
.term{border-bottom:1px dotted var(--teal);cursor:help}
#termTip{position:absolute;z-index:2200;max-width:290px;background:#0f1b2d;color:#eef2f7;
  border:1px solid rgba(255,255,255,.16);border-radius:9px;padding:10px 13px;font-size:.83rem;line-height:1.5;
  box-shadow:0 10px 26px -12px rgba(0,0,0,.65);opacity:0;transform:translateY(4px);
  transition:opacity .15s,transform .15s;pointer-events:none}
#termTip.show{opacity:1;transform:translateY(0)}
#termTip b{color:#e6a33a;display:block;margin-bottom:2px;font-family:Georgia,serif}