/* ============================================================
   Shared design system — UAE Full-Stack learning workspace
   Linked by every lesson as ../styles.css
   ============================================================ */
:root{
  --ink:#1a1a1a; --paper:#fdfcf8; --rule:#d8d3c4; --accent:#7a1f1f;
  --muted:#6b6655; --soft:#f3efe4; --good:#3a6b35; --bad:#9a2a2a;
  --code:#2d2a24; --codebg:#f5f1e6; --blue:#2b5a7a; --warn:#8a6d1f;
}
*{box-sizing:border-box}
html{font-size:17px; scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; line-height:1.6;}
.wrap{max-width:46rem; margin:0 auto; padding:2.4rem 1.6rem 6rem}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* ---- header / typography ---- */
.kicker{font-size:.76rem; text-transform:uppercase; letter-spacing:.14em; color:var(--accent); font-weight:700}
.lvl-row{margin:.5rem 0 0}
h1{font-size:2.1rem; line-height:1.14; margin:.3rem 0 .4rem; letter-spacing:-.012em}
.sub{color:var(--muted); font-style:italic; margin:0 0 1rem; font-size:1.05rem}
.sub.divide{border-bottom:1px solid var(--rule); padding-bottom:1.2rem}
h2{font-size:1.4rem; margin:2.4rem 0 .5rem; color:var(--accent); line-height:1.2}
h2 .n{color:var(--rule); font-weight:400}
h3{font-size:1.12rem; margin:1.6rem 0 .3rem}
h4{font-size:.98rem; margin:1.2rem 0 .2rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-size:.78rem}
p{margin:.7rem 0}
strong{color:#000}
em{color:#3a3631}
hr{border:none; border-top:1px solid var(--rule); margin:2.2rem 0}
ul,ol{margin:.6rem 0; padding-left:1.3rem}
li{margin:.3rem 0}

/* ---- level badges ---- */
.lvl{display:inline-block; font-size:.66rem; padding:.12rem .5rem; border-radius:99px; letter-spacing:.05em; text-transform:uppercase; font-weight:700; vertical-align:middle; margin-right:.3rem}
.lvl.basic{background:#e3efe1; color:var(--good)}
.lvl.inter{background:#e6eef4; color:var(--blue)}
.lvl.adv{background:#f3e6e4; color:var(--accent)}
.lvl.build{background:#f6efdc; color:var(--warn)}

/* ---- code ---- */
code{font-family:"SF Mono",Menlo,Consolas,monospace; font-size:.85em; background:var(--codebg); padding:.08em .35em; border-radius:3px; color:var(--code)}
pre{background:var(--code); color:#f0ece0; padding:1rem 1.1rem; border-radius:6px; overflow-x:auto;
  font-size:.83rem; line-height:1.55; font-family:"SF Mono",Menlo,Consolas,monospace; margin:1rem 0}
pre code{background:none; padding:0; color:inherit; font-size:1em}
pre .c{color:#9b937f}        /* comment */
pre .k{color:#e0a85e}        /* keyword */
pre .s{color:#9fcf8a}        /* string  */
pre .f{color:#8ec6e6}        /* function/def */
pre .n{color:#d98a8a}        /* number/const */
.filename{font-size:.72rem; color:var(--muted); font-family:"SF Mono",Menlo,Consolas,monospace; margin:1rem 0 -.6rem; letter-spacing:.02em}

/* ---- tables ---- */
table{width:100%; border-collapse:collapse; margin:1.1rem 0; font-size:.9rem}
th,td{text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--rule); vertical-align:top}
th{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
td code{background:none; padding:0; font-size:.85rem}

/* ---- callout boxes ---- */
.box{padding:.85rem 1.15rem; border-radius:0 5px 5px 0; margin:1.2rem 0; font-size:.96rem; border-left:3px solid var(--muted); background:var(--soft)}
.box p:first-child{margin-top:0} .box p:last-child{margin-bottom:0}
.mission{border-left-color:var(--accent); background:var(--soft)}
.win{border-left-color:var(--good); background:#eef4ec}
.note{border-left-color:var(--blue); background:#eef3f7}
.warn{border-left-color:var(--warn); background:#f8f3e3}
.deep{border-left-color:var(--accent); background:#fbf6f5}
.mission strong{color:var(--accent)} .win strong{color:var(--good)}
.note strong{color:var(--blue)} .warn strong{color:var(--warn)}
.box .label{display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; margin-bottom:.25rem}

/* ---- analogy chip (PHP bridge) ---- */
.bridge{font-size:.9rem; color:var(--blue); background:#eef3f7; border-radius:5px; padding:.5rem .8rem; margin:.7rem 0; display:block}
.bridge b{color:var(--blue)}

/* ---- interview hook ---- */
.iv{font-size:.9rem; color:var(--accent); background:#fbf6f5; border:1px dashed rgba(122,31,31,.4); border-radius:5px; padding:.55rem .8rem; margin:.9rem 0}
.iv b{font-variant:small-caps; letter-spacing:.03em}

/* ---- table of contents ---- */
.toc{background:#fff; border:1px solid var(--rule); border-radius:8px; padding:1rem 1.2rem; margin:1.4rem 0; font-size:.92rem}
.toc .label{font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700}
.toc ol{margin:.4rem 0 0; padding-left:1.2rem}
.toc a{color:var(--ink)} .toc a:hover{color:var(--accent)}

/* ---- quiz ---- */
.quiz{background:#fff; border:1px solid var(--rule); border-radius:8px; padding:1.2rem 1.3rem; margin:1.3rem 0}
.quiz .label{font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); font-weight:700; margin-bottom:.3rem}
.q{margin:1.1rem 0} .q:first-of-type{margin-top:.3rem}
.q p.stem{font-weight:700; margin:.2rem 0 .6rem}
.opt{display:block; width:100%; text-align:left; background:var(--soft); border:1px solid var(--rule);
  border-radius:5px; padding:.55rem .8rem; margin:.35rem 0; cursor:pointer; font-family:inherit; font-size:.92rem; transition:.15s; color:var(--ink)}
.opt:hover{background:#ece7d8}
.opt.correct{background:#e3efe1; border-color:var(--good); color:var(--good); font-weight:700}
.opt.wrong{background:#f6e6e4; border-color:var(--bad); color:var(--bad)}
.fb{font-size:.85rem; margin-top:.45rem; min-height:1.1rem; font-style:italic}
.fb.ok{color:var(--good)} .fb.no{color:var(--bad)}
.score{font-weight:700; margin-top:1rem; font-size:1rem}

/* ---- flashcards ---- */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(13rem,1fr)); gap:.7rem; margin:1.2rem 0}
.flashcard{background:#fff; border:1px solid var(--rule); border-radius:8px; padding:.9rem 1rem; cursor:pointer; transition:.15s; min-height:5rem}
.flashcard:hover{border-color:var(--accent)}
.flashcard .fq{font-weight:700; font-size:.95rem}
.flashcard .fa{display:none; margin-top:.55rem; padding-top:.55rem; border-top:1px solid var(--rule); font-size:.88rem; color:#3a3631}
.flashcard.revealed{background:var(--soft)} .flashcard.revealed .fa{display:block}
.flashcard .hint{font-size:.7rem; color:var(--muted); margin-top:.5rem}
.flashcard.revealed .hint{display:none}

/* ---- drills / exercises ---- */
.drill{background:#fff; border:1px solid var(--rule); border-left:3px solid var(--warn); border-radius:0 6px 6px 0; padding:1rem 1.2rem; margin:1.3rem 0}
.drill .dh{font-weight:700; margin:0 0 .4rem}
.drill .dh .tag{font-size:.66rem; background:var(--warn); color:#fff; padding:.1rem .45rem; border-radius:3px; letter-spacing:.04em; margin-left:.4rem; vertical-align:middle; text-transform:uppercase}
details{margin:.7rem 0 0; border-top:1px dashed var(--rule); padding-top:.5rem}
details summary{cursor:pointer; font-size:.85rem; color:var(--accent); font-weight:700; list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"▸ "; }
details[open] summary::before{content:"▾ "; }
details[open] summary{margin-bottom:.5rem}

/* ---- self-check checklist ---- */
.checklist{list-style:none; padding:0; margin:1rem 0}
.checklist li{padding:.4rem 0 .4rem 2rem; position:relative; border-bottom:1px solid var(--rule); cursor:pointer; font-size:.94rem}
.checklist li::before{content:"☐"; position:absolute; left:.3rem; color:var(--muted); font-size:1.1rem; top:.3rem}
.checklist li.done{color:var(--muted); text-decoration:line-through}
.checklist li.done::before{content:"☑"; color:var(--good); text-decoration:none}

/* ---- navigation (auto-built by site.js) ---- */
.lesson-nav{margin:1.4rem 0; font-size:.85rem}
.lesson-nav.top{margin:0 0 1.6rem; padding-bottom:1rem; border-bottom:1px solid var(--rule); color:var(--muted)}
.lesson-nav .crumb{color:var(--muted)}
.lesson-nav .bar{display:flex; flex-wrap:wrap; gap:.4rem .9rem; align-items:center; justify-content:space-between}
.lesson-nav .grp{display:flex; gap:.9rem; flex-wrap:wrap}
.lesson-nav .prog{font-size:.74rem; color:var(--muted); letter-spacing:.03em}
.progressbar{height:4px; background:var(--rule); border-radius:99px; margin:.5rem 0 0; overflow:hidden}
.progressbar .fill{height:100%; background:var(--accent); border-radius:99px}

.src{background:var(--soft); border-radius:6px; padding:.9rem 1.1rem; font-size:.9rem; margin:1.6rem 0}
.src .label{display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); font-weight:700; margin-bottom:.2rem}
footer{margin-top:2.6rem; padding-top:1.2rem; border-top:1px solid var(--rule); font-size:.88rem; color:var(--muted)}
footer .teacher{background:var(--soft); border-radius:6px; padding:.8rem 1.1rem; margin-bottom:1rem; color:var(--ink)}

@media print{
  body{background:#fff}
  .opt,.flashcard,.checklist li{cursor:default}
  .flashcard .fa{display:block} .flashcard .hint{display:none}
  details{display:block} details summary{display:none} details > *:not(summary){display:block !important}
  .lesson-nav{display:none}
  pre{white-space:pre-wrap; word-break:break-word}
  a{color:var(--ink)}
}
@media (max-width:34rem){ h1{font-size:1.8rem} .wrap{padding:1.6rem 1.1rem 4rem} }

/* ============================================================
   Interview question bank (used by reference/interview/*.html)
   ============================================================ */
.cat{font-size:.74rem; text-transform:uppercase; letter-spacing:.07em; color:var(--accent); font-weight:700; margin:2rem 0 .5rem; border-bottom:1px solid var(--rule); padding-bottom:.35rem}
.cat .badge{float:right; font-weight:400; color:var(--muted); letter-spacing:0; text-transform:none}
.qa details{background:#fff; border:1px solid var(--rule); border-radius:6px; padding:.55rem .95rem; margin:.5rem 0}
.qa details[open]{border-color:var(--accent)}
.qa summary{color:var(--ink); font-weight:700; font-size:.96rem}
.qa summary::before{content:"Q  "; color:var(--accent); font-weight:700}
.qa details[open] summary{color:var(--accent); margin-bottom:.5rem; border-bottom:1px solid var(--rule); padding-bottom:.4rem}
.qa .a{font-size:.93rem; color:#33302b}
.qa .a code{font-size:.85em}
.qa .a p:first-child{margin-top:0}
.qa .tag{display:inline-block; font-size:.6rem; padding:.05rem .4rem; border-radius:99px; background:var(--soft); color:var(--muted); letter-spacing:.04em; text-transform:uppercase; margin-left:.4rem; vertical-align:middle; font-weight:700}
.qa .tag.tricky{background:#f9eceb; color:var(--bad)}
.qa .tag.theory{background:#eef3f7; color:var(--blue)}
.qa .tag.new{background:#f8f3e3; color:var(--warn)}
.gotcha{border-left-color:var(--bad); background:#f9eceb}
.gotcha .label, .gotcha strong{color:var(--bad)}
.mnemonic{border-left-color:var(--warn); background:#f8f3e3}
.mnemonic .label, .mnemonic strong{color:var(--warn)}
.whatsnew{border-left-color:var(--blue); background:#eef3f7}
.whatsnew .label, .whatsnew strong{color:var(--blue)}
.arena-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(13rem,1fr)); gap:.7rem; margin:1.2rem 0}
.arena{display:block; background:#fff; border:1px solid var(--rule); border-radius:8px; padding:.9rem 1rem; transition:.15s; color:inherit}
.arena:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:0 3px 12px rgba(122,31,31,.08)}
.arena .at{font-weight:700; font-size:1rem}
.arena .ad{font-size:.82rem; color:var(--muted); margin-top:.2rem}
.arena .ac{font-size:.7rem; color:var(--accent); margin-top:.45rem; font-weight:700}

/* ============================================================
   Cookbook — everyday project patterns (reference/cookbook/*.html)
   ============================================================ */
.rgroup{font-size:.74rem; text-transform:uppercase; letter-spacing:.07em; color:var(--accent); font-weight:700; margin:2.4rem 0 .5rem; border-bottom:1px solid var(--rule); padding-bottom:.35rem}
.rgroup .badge{float:right; font-weight:400; color:var(--muted); letter-spacing:0; text-transform:none}
.recipe{background:#fff; border:1px solid var(--rule); border-radius:8px; padding:1rem 1.2rem 1.1rem; margin:1.1rem 0}
.recipe:target{border-color:var(--accent); box-shadow:0 0 0 2px rgba(122,31,31,.12)}
.recipe > h3{margin:0 0 .15rem; font-size:1.06rem; scroll-margin-top:1rem}
.recipe > h3 .lvl{font-size:.6rem}
.recipe .when{font-size:.88rem; color:var(--muted); margin:.1rem 0 .2rem}
.recipe .when b{color:var(--ink); font-weight:700}
.recipe pre{margin:.6rem 0 0}
.recipe .filename{margin-top:.55rem}
.recipe .tip{font-size:.86rem; background:#eef3f7; border-left:3px solid var(--blue); padding:.45rem .75rem; border-radius:0 5px 5px 0; margin:.7rem 0 0}
.recipe .tip::before{content:"Why — "; font-weight:700; color:var(--blue)}
.recipe .pitfall{font-size:.86rem; background:#f9eceb; border-left:3px solid var(--bad); padding:.45rem .75rem; border-radius:0 5px 5px 0; margin:.55rem 0 0}
.recipe .pitfall::before{content:"⚠ Gotcha — "; font-weight:700; color:var(--bad)}