/* ==========================================================================
   dsa-chapter.css — page chrome for every chapter of the Data Structures &
   Algorithms course. Shared by all 30 chapters so a chapter file contains
   almost nothing but its own content.

   Palette follows the AmouAI Hub platform tokens, with violet as this
   course's accent (indigo = LM, teal = diffusion, amber = programming).
   ========================================================================== */
:root, html[data-theme="dark"]{
  --bg:#0f1117; --bg2:#181b24; --bg3:#1f2330; --line:#2a2f3d;
  --tx:#e6e8ee; --tx2:#9aa3b2; --tx3:#5b6478;
  --ac:#b98cff;          /* course accent — violet */
  --ac2:#5be0c0;
  --pur:#7c8cff;
  --good:#5be08a; --warn:#ffc06b; --bad:#ff9090;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --maxw:1100px;
}
html[data-theme="light"]{
  --bg:#ffffff; --bg2:#f6f8fa; --bg3:#eef2f6; --line:#d8dee4;
  --tx:#1f2328; --tx2:#57606a; --tx3:#8b949e;
  --ac:#8250df; --ac2:#1a7f37; --pur:#0969da;
  --good:#1a7f37; --warn:#9a6700; --bad:#cf222e;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--sans);
  line-height:1.68;font-size:16px;-webkit-font-smoothing:antialiased}
a{color:var(--ac);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ac);color:#12101a;
  padding:10px 18px;border-radius:0 0 8px 0;font-weight:700;z-index:99}
.skip:focus{left:0}

/* ---------- chapter rail ---------- */
.dayrail{position:sticky;top:var(--plat-nav-h,54px);z-index:40;
  background:var(--bg2);border-bottom:1px solid var(--line)}
.dayrail-in{max-width:var(--maxw);margin:0 auto;padding:9px 20px;display:flex;align-items:center;
  gap:14px;flex-wrap:wrap;font-size:13px}
.dr-day{font-family:var(--mono);font-size:11.5px;color:var(--ac);text-transform:uppercase;
  letter-spacing:1.1px;font-weight:700;white-space:nowrap}
.dr-title{color:var(--tx2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-prog{display:flex;align-items:center;gap:9px;color:var(--tx3);font-size:12px;white-space:nowrap}
.progbar{width:112px;height:5px;background:var(--bg3);border-radius:99px;overflow:hidden}
.progfill{height:100%;width:0%;background:linear-gradient(90deg,var(--ac),var(--ac2));transition:width .35s}
.dr-jump{font-size:12.5px;white-space:nowrap}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px 90px;display:grid;
  grid-template-columns:212px minmax(0,1fr);gap:38px}
.toc{position:sticky;top:calc(var(--plat-nav-h,54px) + 58px);align-self:start;max-height:calc(100vh - 122px);overflow:auto;
  padding-top:30px;font-size:13.5px}
.toc h4{margin:0 0 10px;font-size:11px;text-transform:uppercase;letter-spacing:.9px;color:var(--tx3)}
.toc a{display:block;padding:5px 10px;color:var(--tx2);border-left:2px solid var(--line);
  border-radius:0 5px 5px 0;margin-bottom:1px;line-height:1.45}
.toc a:hover{color:var(--tx);background:var(--bg2);text-decoration:none}
.toc a.act{color:var(--ac);border-left-color:var(--ac);background:var(--bg2)}
main{min-width:0;padding-top:30px}
@media(max-width:940px){.wrap{grid-template-columns:1fr;gap:0}.toc{display:none}}

.crumb{font-size:12.5px;color:var(--tx3);margin:0 0 18px}
.crumb .sep{margin:0 7px;opacity:.5}
.crumb .cur{color:var(--tx2)}

/* ---------- hero ---------- */
.hero{border:1px solid var(--line);border-radius:16px;padding:30px 32px;background:
  radial-gradient(1000px 300px at 0% 0%,rgba(185,140,255,.13),transparent 60%),var(--bg2);margin-bottom:28px}
.eyebrow{font-size:11.5px;text-transform:uppercase;letter-spacing:1.6px;color:var(--ac);font-weight:700}
.hero h1{margin:9px 0 10px;font-size:clamp(26px,4vw,34px);line-height:1.2;letter-spacing:-.8px}
.hero .sub{color:var(--tx2);font-size:17px;margin:0 0 22px;max-width:64ch}
.metagrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px}
.metacard{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:11px 14px}
.metacard .k{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:var(--tx3);font-weight:700}
.metacard .v{font-size:14px;margin-top:3px;font-family:var(--mono)}

/* ---------- objectives ---------- */
.objbox{border:1px solid var(--line);border-left:3px solid var(--ac2);border-radius:0 12px 12px 0;
  padding:18px 22px;background:var(--bg2);margin-bottom:30px}
.objbox h3{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--ac2)}
.objbox ol{margin:0;padding-left:20px;color:var(--tx2)}
.objbox li{margin:5px 0}

/* ---------- sections ---------- */
section{margin-bottom:46px;scroll-margin-top:calc(var(--plat-nav-h,54px) + 56px)}
section>h2{font-size:23px;letter-spacing:-.5px;margin:0 0 6px;display:flex;align-items:center;gap:11px}
.snum{flex:0 0 auto;width:27px;height:27px;border-radius:7px;background:var(--ac);color:#12101a;
  display:grid;place-items:center;font-size:13px;font-weight:800;font-family:var(--mono)}
.slead{color:var(--tx2);font-size:15.5px;margin:0 0 20px;padding-left:38px;max-width:70ch}
h3{font-size:17.5px;margin:30px 0 10px;letter-spacing:-.2px}
h4{font-size:15px;margin:22px 0 8px;color:var(--tx2)}
p{margin:0 0 15px;max-width:74ch}
ul,ol{margin:0 0 16px;padding-left:24px;max-width:72ch}
li{margin:6px 0}
code{font-family:var(--mono);font-size:.88em;background:var(--bg3);padding:2px 6px;
  border-radius:5px;border:1px solid var(--line)}
strong{color:var(--tx);font-weight:650}
em{color:var(--tx)}
blockquote{margin:0 0 18px;padding:2px 0 2px 18px;border-left:3px solid var(--line);color:var(--tx2);font-style:italic}
table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14.5px}
th,td{border:1px solid var(--line);padding:8px 12px;text-align:left;vertical-align:top}
th{background:var(--bg2);font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--tx2)}
td code{font-size:.9em}
tbody tr:hover{background:var(--bg2)}

/* ---------- analogy block ---------- */
.analogy{border:1px solid var(--line);border-left:3px solid var(--ac);border-radius:0 13px 13px 0;
  padding:18px 22px;margin:0 0 22px;background:
  linear-gradient(90deg,rgba(185,140,255,.07),transparent 70%),var(--bg2)}
.analogy .at{font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:var(--ac);
  font-weight:700;margin-bottom:7px}
.analogy p:last-child{margin-bottom:0}

/* ---------- code blocks ---------- */
.cb{background:var(--bg2);border:1px solid var(--line);border-radius:11px;margin:0 0 20px;overflow:hidden}
.cb-h{display:flex;align-items:center;gap:9px;padding:7px 13px;border-bottom:1px solid var(--line);
  background:var(--bg3);font-size:11.5px;color:var(--tx3);font-family:var(--mono)}
.cb-h .fname{color:var(--tx2)}
.cb-h .cbadge{margin-left:auto;color:var(--ac);border:1px solid var(--line);border-radius:5px;padding:0 7px}
.cb pre{margin:0;padding:15px 17px;overflow-x:auto;font-family:var(--mono);font-size:13.5px;line-height:1.62}
.cb pre code{background:none;border:none;padding:0;font-size:inherit}
.cb .out{border-top:1px dashed var(--line);background:var(--bg);padding:11px 17px;
  font-family:var(--mono);font-size:13px;color:var(--ac2);white-space:pre-wrap}
.cb .out::before{content:"output";display:block;font-size:10px;text-transform:uppercase;
  letter-spacing:1px;color:var(--tx3);margin-bottom:5px}
.t-kw{color:#ff7b72}.t-str{color:#a5d6ff}.t-num{color:#79c0ff}.t-com{color:#8b949e;font-style:italic}
.t-fn{color:#d2a8ff}.t-bi{color:#ffa657}.t-cls{color:#7ee787}
html[data-theme="light"] .t-kw{color:#cf222e}
html[data-theme="light"] .t-str{color:#0a3069}
html[data-theme="light"] .t-num{color:#0550ae}
html[data-theme="light"] .t-com{color:#6e7781}
html[data-theme="light"] .t-fn{color:#8250df}
html[data-theme="light"] .t-bi{color:#953800}
html[data-theme="light"] .t-cls{color:#1a7f37}

/* ---------- callouts ---------- */
.call{border-radius:11px;padding:15px 18px;margin:0 0 20px;border:1px solid;
  border-left-width:3px;font-size:15px;max-width:78ch}
.call .ct{font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.call p:last-child{margin-bottom:0}
.call.warn{background:rgba(255,192,107,.07);border-color:rgba(255,192,107,.35)}
.call.warn .ct{color:var(--warn)}
.call.tip{background:rgba(124,140,255,.07);border-color:rgba(124,140,255,.35)}
.call.tip .ct{color:var(--pur)}
.call.key{background:rgba(91,224,192,.07);border-color:rgba(91,224,192,.35)}
.call.key .ct{color:var(--ac2)}
.call.trap{background:rgba(255,144,144,.07);border-color:rgba(255,144,144,.4)}
.call.trap .ct{color:var(--bad)}

/* ---------- complexity summary card ---------- */
.bigo{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:9px;margin:0 0 22px}
.bigo .bo{border:1px solid var(--line);border-radius:10px;background:var(--bg2);padding:11px 13px}
.bigo .bo .k{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:var(--tx3);font-weight:700}
.bigo .bo .v{font-family:var(--mono);font-size:15px;margin-top:4px;font-weight:700}
.bigo .bo.good .v{color:var(--good)} .bigo .bo.mid .v{color:var(--warn)} .bigo .bo.bad .v{color:var(--bad)}

/* ---------- editor + console ---------- */
.ed{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--bg2);margin-bottom:6px}
.ed-h{display:flex;align-items:center;gap:9px;padding:7px 13px;background:var(--bg3);
  border-bottom:1px solid var(--line);font-size:11.5px;font-family:var(--mono);color:var(--tx3)}
.ed-h .sp{flex:1}
.ed-body{display:flex;background:var(--bg)}
.gutter{flex:0 0 auto;padding:12px 8px 12px 12px;text-align:right;font-family:var(--mono);
  font-size:13.5px;line-height:1.62;color:var(--tx3);user-select:none;background:var(--bg2);
  border-right:1px solid var(--line);white-space:pre;overflow:hidden}
.ed textarea{flex:1;border:none;border-radius:0;background:transparent;color:var(--tx);
  padding:12px 14px;font-family:var(--mono);font-size:13.5px;line-height:1.62;resize:vertical;
  min-height:170px;white-space:pre;overflow-wrap:normal;overflow-x:auto;tab-size:4;outline:none}
.ed-f{display:flex;align-items:center;gap:9px;padding:9px 13px;border-top:1px solid var(--line);
  background:var(--bg2);flex-wrap:wrap}
.ed-f .sp{flex:1}
.console{border-top:1px solid var(--line);background:#080b10;padding:12px 15px;font-family:var(--mono);
  font-size:13px;white-space:pre-wrap;max-height:300px;overflow:auto;color:#c9d1d9}
.console .err{color:#ff8080}
.console .ok{color:#7ee787}
.console .dim{color:#6e7d8f}
.btn{background:var(--bg3);color:var(--tx);border:1px solid var(--line);border-radius:8px;
  padding:7px 13px;font-size:13px;font-family:inherit;cursor:pointer;transition:.15s;white-space:nowrap}
.btn:hover:not(:disabled){border-color:var(--ac);color:var(--ac)}
.btn.primary{background:var(--ac);color:#12101a;border-color:var(--ac);font-weight:650}
.btn.primary:hover:not(:disabled){filter:brightness(1.12);color:#12101a}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.45;cursor:not-allowed}
input[type=text],input[type=number],select{background:var(--bg);color:var(--tx);
  border:1px solid var(--line);border-radius:7px;padding:7px 11px;font-family:var(--mono);
  font-size:13.5px;outline:none}
input:focus,select:focus{border-color:var(--ac)}
.mini{font-size:12.5px;color:var(--tx3)}
.pyst{font-size:11.5px;color:var(--tx3);font-family:var(--mono)}
.pyst.rdy{color:var(--good)}
.pyst.load{color:var(--warn)}

/* ---------- exercises ---------- */
.exfilter{display:flex;gap:6px;margin:0 0 18px;flex-wrap:wrap;align-items:center}
.chip{background:var(--bg2);border:1px solid var(--line);border-radius:99px;padding:5px 14px;
  font-size:12.5px;cursor:pointer;color:var(--tx2)}
.chip.on{background:var(--ac);border-color:var(--ac);color:#12101a;font-weight:650}
.ex{border:1px solid var(--line);border-radius:13px;margin-bottom:14px;background:var(--bg2);overflow:hidden}
.ex.pass{border-color:var(--good)}
.ex-h{display:flex;align-items:center;gap:11px;padding:13px 17px;cursor:pointer;user-select:none}
.ex-h:hover{background:var(--bg3)}
.ex-n{flex:0 0 auto;width:29px;height:29px;border-radius:8px;background:var(--bg3);border:1px solid var(--line);
  display:grid;place-items:center;font-size:12.5px;font-weight:700;color:var(--tx2)}
.ex.pass .ex-n{background:var(--good);border-color:var(--good);color:#0f1117}
.ex-t{flex:1;font-weight:600;font-size:15px;min-width:0}
.lvl{font-size:10px;text-transform:uppercase;letter-spacing:1px;font-weight:700;padding:2px 9px;
  border-radius:99px;border:1px solid;white-space:nowrap}
.lvl.warm{color:var(--ac2);border-color:var(--ac2)}
.lvl.core{color:var(--ac);border-color:var(--ac)}
.lvl.chal{color:var(--pur);border-color:var(--pur)}
.ex-x{color:var(--tx3);font-size:13px;transition:.2s}
.ex.open .ex-x{transform:rotate(90deg)}
.ex-b{display:none;padding:0 17px 17px;border-top:1px solid var(--line)}
.ex.open .ex-b{display:block}
.prompt{padding:15px 0 13px;font-size:15px}
.prompt ul,.prompt ol{margin-top:6px}
.hintbox{background:var(--bg3);border:1px dashed var(--line);border-radius:9px;padding:12px 15px;
  margin:12px 0 0;font-size:14px;display:none}
.hintbox.show{display:block}
.hintbox .ht{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--warn);
  font-weight:700;margin-bottom:5px}
.verdict{margin-top:11px;border-radius:9px;padding:12px 15px;font-size:13.5px;display:none;
  font-family:var(--mono);white-space:pre-wrap}
.verdict.show{display:block}
.verdict.good{background:rgba(91,224,192,.1);border:1px solid rgba(91,224,192,.4);color:var(--good)}
.verdict.bad{background:rgba(255,144,144,.09);border:1px solid rgba(255,144,144,.4);color:var(--bad)}

/* ---------- recap + next ---------- */
.recap{border:1px solid var(--line);border-radius:13px;background:var(--bg2);padding:20px 24px;margin:0 0 26px}
.recap h3{margin:0 0 12px;font-size:13px;text-transform:uppercase;letter-spacing:1.1px;color:var(--ac)}
.recap ul{margin:0;padding-left:20px;color:var(--tx2)}
.recap li{margin:7px 0}
.recap li b{color:var(--tx)}
.nextbox{border:1px solid var(--line);border-radius:13px;padding:22px 26px;background:var(--bg2);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.nextbox .nt{flex:1;min-width:220px}
.nextbox h3{margin:0 0 4px;font-size:18px}
.nextbox p{margin:0;color:var(--tx2);font-size:14.5px}
footer{border-top:1px solid var(--line);margin-top:44px;padding:26px 20px;text-align:center;
  color:var(--tx3);font-size:13px}
@media(max-width:640px){
  .hero{padding:22px 20px}
  .slead{padding-left:0}
  main{padding-top:20px}
}