/* ==========================================================================
   Software Engineering for AI Engineers — shared chapter stylesheet.

   One file for all 24 chapter pages. Everything is expressed in the same custom
   properties the rest of AmouAI Hub uses, so light mode and any future theme
   change carry through with no extra work here.

   Load order on a chapter page:
     platform.css → se-chapter.css → wt-widgets.css → se-widgets.css
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root, html[data-theme="dark"]{
  --bg:#0f1117; --bg2:#181b24; --bg3:#1f2330; --line:#2a2f3d;
  --tx:#e6e8ee; --tx2:#9aa3b2; --tx3:#5b6478;
  --ac:#38bdf8;          /* course accent — sky */
  --ac2:#5be0c0;
  --pur:#a78bfa;
  --good:#5be08a; --warn:#ffc06b; --bad:#ff9090;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Roboto Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --r:10px; --maxw:1080px;
}
html[data-theme="light"]{
  --bg:#ffffff; --bg2:#f7f8fa; --bg3:#eef1f5; --line:#dbe0e8;
  --tx:#1a1d23; --tx2:#535c6b; --tx3:#858e9c;
  --ac:#0369a1; --ac2:#0f8a72; --pur:#7c3aed;
  --good:#12833f; --warn:#8a6100; --bad:#c92a2a;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:radial-gradient(1200px 600px at 50% -10%,#101d2b 0%,var(--bg) 55%);
  color:var(--tx);
  font-family:var(--plat-sans,var(--sans));
  line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased;
}
html[data-theme="light"] body{background:radial-gradient(1200px 600px at 50% -10%,#eef7fd 0%,var(--bg) 55%)}
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;background:var(--ac);color:#04121c;
  padding:10px 18px;border-radius:0 0 8px 0;font-weight:700;z-index:2000}
.skip:focus{left:0}

/* ------------------------------------------------------------- day rail -- */
.dayrail{position:sticky;top:var(--plat-nav-h,54px);z-index:40;
  background:rgba(15,17,23,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
html[data-theme="light"] .dayrail{background:rgba(255,255,255,.92)}
.dayrail-in{max-width:var(--maxw);margin:0 auto;padding:9px 22px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dr-day{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ac);font-weight:700;white-space:nowrap}
.dr-title{font-size:13.5px;color:var(--tx2);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;flex:1}
.dr-prog{display:flex;align-items:center;gap:9px;white-space:nowrap;font-size:12.5px;color:var(--tx2)}
.progbar{display:inline-block;width:120px;height:6px;background:var(--bg3);
  border-radius:99px;overflow:hidden;vertical-align:middle}
.progfill{display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--ac),var(--ac2));transition:width .35s}
.dr-jump{font-size:12.5px;color:var(--ac);border:1px solid var(--line);
  border-radius:8px;padding:5px 12px;white-space:nowrap}
.dr-jump:hover{border-color:var(--ac);text-decoration:none}
@media(max-width:700px){.dr-title{display:none}}

/* ---------------------------------------------------------------- layout -- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px 90px;display:grid;
  grid-template-columns:212px minmax(0,1fr);gap:38px}
.toc{position:sticky;top:calc(var(--plat-nav-h,54px) + 56px);align-self:start;
  max-height:calc(100vh - 140px);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}
.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:8px}
@media(max-width:940px){.wrap{grid-template-columns:1fr;gap:0}.toc{display:none}}

.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--tx3);margin:26px 0 0}
.crumb a{color:inherit}
.crumb a:hover{color:var(--tx2)}
.crumb .sep{opacity:.5;padding:0 6px}
.crumb .cur{color:var(--ac)}

/* ------------------------------------------------------------------ hero -- */
.hero{border:1px solid var(--line);border-radius:16px;padding:30px 32px;margin-bottom:30px;
  background:radial-gradient(1000px 300px at 0% 0%,rgba(56,189,248,.10),transparent 60%),var(--bg2)}
.eyebrow{font-size:11.5px;text-transform:uppercase;letter-spacing:1.6px;color:var(--ac);font-weight:700}
.hero h1{margin:9px 0 8px;font-size:34px;line-height:1.2;letter-spacing:-.9px}
.hero .sub{color:var(--tx2);font-size:17px;margin:0 0 22px;max-width:62ch}
.metagrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px;margin-top:6px}
.metacard{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 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}

.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:14px;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:44px;scroll-margin-top:calc(var(--plat-nav-h,54px) + 60px)}
html{scroll-padding-top:calc(var(--plat-nav-h,54px) + 60px)}
section>h2{font-size:23px;letter-spacing:-.5px;margin:0 0 4px;display:flex;align-items:center;gap:11px}
.snum{flex:0 0 auto;width:27px;height:27px;border-radius:7px;background:var(--ac);color:#04121c;
  font-size:13px;font-weight:700;display:grid;place-items:center}
.slead{color:var(--tx2);margin:0 0 18px;font-size:15.5px;padding-left:38px}
section h3{font-size:17px;margin:26px 0 8px;letter-spacing:-.3px}
section h4{font-size:14.5px;margin:18px 0 6px;color:var(--tx)}
p{margin:0 0 14px}
ul,ol{margin:0 0 14px;padding-left:22px}
li{margin:5px 0}
code{font-family:var(--mono);font-size:.88em;background:var(--bg3);padding:2px 6px;
  border-radius:5px;border:1px solid var(--line)}
kbd{font-family:var(--mono);font-size:.8em;background:var(--bg3);border:1px solid var(--line);
  border-bottom-width:2px;border-radius:5px;padding:1px 6px}
strong{color:var(--tx);font-weight:650}
table{width:100%;border-collapse:collapse;margin:0 0 18px;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:12.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--tx2)}
td code{font-size:.9em}
.scrollx{overflow-x:auto;margin-bottom:18px}
.scrollx table{margin-bottom:0}

/* ----------------------------------------------------------- code blocks -- */
.cb{background:var(--bg2);border:1px solid var(--line);border-radius:11px;margin:0 0 18px;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 .sp{flex:1}
.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}
.cb .out.renders::before{content:"renders as"}
.cb .out.sends::before{content:"sends"}
.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-tag{color:#7ee787}.t-att{color:#79c0ff}
.t-sel{color:#ffa657}.t-prop{color:#79c0ff}.t-val{color:#a5d6ff}.t-var{color:#ff7b72}
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-tag{color:#116329}
html[data-theme="light"] .t-att{color:#0550ae}
html[data-theme="light"] .t-sel{color:#953800}
html[data-theme="light"] .t-prop{color:#0550ae}
html[data-theme="light"] .t-val{color:#0a3069}
html[data-theme="light"] .t-var{color:#cf222e}

/* --------------------------------------------------------------- callouts -- */
.call{border-radius:11px;padding:15px 18px;margin:0 0 18px;border:1px solid;
  border-left-width:3px;font-size:15px}
.call .ct{font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.call p:last-child{margin-bottom:0}
.call.warn{background:rgba(240,180,41,.07);border-color:rgba(240,180,41,.35)}
.call.warn .ct{color:var(--warn)}
.call.tip{background:rgba(56,189,248,.07);border-color:rgba(56,189,248,.35)}
.call.tip .ct{color:var(--ac)}
.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,.08);border-color:rgba(255,144,144,.4)}
.call.trap .ct{color:var(--bad)}
.analogy{border:1px solid var(--line);border-left:3px solid var(--pur);border-radius:0 12px 12px 0;
  padding:15px 20px;background:var(--bg2);margin:0 0 18px;font-size:15px}
.analogy .at{font-size:11.5px;text-transform:uppercase;letter-spacing:1.2px;color:var(--pur);
  font-weight:700;margin-bottom:6px}
.analogy p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- buttons -- */
.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{border-color:var(--ac);color:var(--ac)}
.btn.primary{background:var(--ac);color:#04121c;border-color:var(--ac);font-weight:650}
.btn.primary:hover{filter:brightness(1.1);color:#04121c}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sm{padding:4px 10px;font-size:12px}

/* ---------------------------------------------------------------- widgets -- */
.widget{border:1px solid var(--line);border-radius:13px;background:var(--bg2);margin:0 0 20px;overflow:hidden}
.widget-h{padding:11px 17px;border-bottom:1px solid var(--line);background:var(--bg3);
  display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.widget-h .wt{font-weight:650;font-size:14px}
.widget-h .wb{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:var(--pur);
  border:1px solid var(--pur);border-radius:5px;padding:1px 7px;font-weight:700}
.widget-b{padding:17px}
.wrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.wrow label{font-size:13px;color:var(--tx2)}
.wrow.tight{margin-bottom:8px}
input[type=text],input[type=number],input[type=search],select,textarea{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,textarea:focus,select:focus{border-color:var(--ac)}
input[type=range]{accent-color:var(--ac);vertical-align:middle}
input[type=color]{background:var(--bg);border:1px solid var(--line);border-radius:7px;
  width:44px;height:32px;padding:2px;cursor:pointer}
.mini{font-size:12.5px;color:var(--tx3)}
.wout{background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:13px 15px;
  font-family:var(--mono);font-size:13.5px;white-space:pre-wrap;min-height:44px}
.wgrid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.wgrid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:700px){.wgrid2,.wgrid3{grid-template-columns:1fr}}
.wcol h5{margin:0 0 9px;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--tx3)}
.pill{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;padding:2px 8px;border-radius:99px;border:1px solid var(--line);
  color:var(--tx2);background:var(--bg)}
.pill.ok{color:var(--good);border-color:var(--good)}
.pill.no{color:var(--bad);border-color:var(--bad)}
.pill.wa{color:var(--warn);border-color:var(--warn)}
.pill.ac{color:var(--ac);border-color:var(--ac)}

/* ----------------------------------------------------------------- editor -- */
.ed{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--bg2)}
.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;padding:12px 14px;
  font-family:var(--mono);font-size:13.5px;line-height:1.62;resize:vertical;min-height:150px;
  white-space:pre;overflow-wrap:normal;overflow-x:auto;tab-size:2}
.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:#0b0d13;padding:12px 15px;font-family:var(--mono);
  font-size:13px;white-space:pre-wrap;max-height:290px;overflow:auto;color:#c9d1d9}
.console .err{color:#ff8080}
.console .ok{color:#7ee787}
.console .dim{color:#6e7d8f}
.console .warnln{color:#ffc06b}

/* -------------------------------------------------------------- exercises -- */
.exfilter{display:flex;gap:6px;margin:0 0 18px;flex-wrap:wrap}
.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:#04121c;font-weight:600}
.ex{border:1px solid var(--line);border-radius:13px;margin-bottom:15px;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,138,.1);border:1px solid rgba(91,224,138,.4);color:var(--good)}
.verdict.bad{background:rgba(255,144,144,.09);border:1px solid rgba(255,144,144,.4);color:var(--bad)}

/* ------------------------------------------------------------------ misc -- */
.videocard{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:11px;
  padding:14px 17px;background:var(--bg2);margin-bottom:11px}
.videocard .vi{flex:0 0 auto;width:38px;height:38px;border-radius:9px;background:var(--bg3);
  display:grid;place-items:center;color:var(--ac);font-weight:700;font-size:12px;border:1px solid var(--line)}
.videocard .vt{font-weight:650;margin-bottom:2px}
.videocard .vc{font-size:13.5px;color:var(--tx2)}
.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}