/*
  Shared stylesheet for Zain's AI Inference Lab.
  Seeded from ~/.claude/skills/teach/lesson-template.html (the accessible baseline).
  Every lesson links this so the lab looks like one consistent whole.
  Portable: works over file://, Tailscale, and static hosting. No build step.
*/
:root { --ink:#1a1a1a; --muted:#6b6b6b; --rule:#e0ddd6; --accent:#2e5c7a;
        --add:#2e7d32; --del:#b23b3b; --warn:#9a7d1f; --triton:#7a3b8e; --cuda:#2e7d32; }
body { font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
       max-width:42rem; margin:3rem auto; padding:0 1.5rem; color:var(--ink);
       line-height:1.58; background:#fbfaf7; }
h1 { font-size:1.9rem; line-height:1.15; margin-bottom:.2rem; }
.sub { color:var(--muted); font-style:italic; margin-top:0; }
h2 { font-size:1.15rem; margin-top:2.2rem; border-bottom:1px solid var(--rule);
     padding-bottom:.25rem; }
h3 { font-size:1rem; margin-top:1.5rem; color:var(--accent); }
code { font-family:"SF Mono",Menlo,Consolas,monospace; font-size:.84em;
       background:#eef1f4; padding:.1em .3em; border-radius:3px; }
pre { background:#f4f6f8; border-left:3px solid var(--accent); padding:.9rem 1rem;
      overflow-x:auto; font-family:"SF Mono",Menlo,Consolas,monospace; font-size:.79rem;
      line-height:1.45; }
pre code { background:none; padding:0; font-size:1em; }
blockquote { border-left:3px solid var(--warn); margin:1.2rem 0; padding:.3rem 1rem;
             color:#3a3a3a; background:#faf6ea; }
table { border-collapse:collapse; width:100%; font-size:.82rem; margin:1rem 0; }
th,td { border:1px solid var(--rule); padding:.45rem .55rem; text-align:left; vertical-align:top; }
th { background:#eef1f4; }
.defense { background:#1a1a1a; color:#f4f1e8; padding:1rem 1.2rem; border-radius:6px;
           margin:1.4rem 0; }
.defense b { color:#e8c98a; }
/* REQUIRED: re-assert code color inside the dark box so it isn't light-on-light */
.defense code { background:#3a3f44; color:#f4f1e8; }
a { color:var(--accent); }
.add { color:var(--add); } .del { color:var(--del); }
.foot { margin-top:2.5rem; border-top:1px solid var(--rule); padding-top:1rem;
        font-size:.85rem; color:var(--muted); }
.ask { background:#eef4f7; border:1px solid #cfe0e8; border-radius:6px;
       padding:.7rem 1rem; font-size:.9rem; }
/* Source-reference chips: .vsc = local VS Code, .gh = portable GitHub permalink */
.vsc { font-family:"SF Mono",Menlo,Consolas,monospace; font-size:.72rem;
       text-decoration:none; background:#eef1f4; border:1px solid #cfe0e8;
       border-radius:4px; padding:.08em .45em; white-space:nowrap; color:var(--accent); }
.vsc:hover { background:#dbe7ef; }
.gh { font-family:"SF Mono",Menlo,Consolas,monospace; font-size:.7rem;
      text-decoration:none; background:#1a1a1a; color:#f4f1e8;
      border-radius:4px; padding:.08em .4em; white-space:nowrap; }
.gh:hover { background:#333; }
.srcline { margin:.35rem 0 0; font-size:.78rem; color:var(--muted); }

/* --- workspace-specific reusable components --- */

/* Figures: responsive, never overflow the page on mobile */
figure { margin:1.4rem 0; }
figure img { display:block; max-width:100%; height:auto; border:1px solid var(--rule);
             border-radius:6px; background:#fff; }
figcaption { font-size:.8rem; color:var(--muted); font-style:italic; margin-top:.4rem;
             text-align:center; }

/* Side-by-side CUDA vs Triton mental-model cards */
.compare { display:flex; gap:1rem; flex-wrap:wrap; margin:1.4rem 0; }
.compare > div { flex:1 1 14rem; border:1px solid var(--rule); border-radius:8px;
                 padding:.9rem 1.1rem; background:#fff; }
.compare h4 { margin:.1rem 0 .5rem; font-size:.95rem; }
.compare .c-cuda h4 { color:var(--cuda); }
.compare .c-triton h4 { color:var(--triton); }
.compare ul { margin:.3rem 0; padding-left:1.1rem; font-size:.86rem; }

/* The "level that vanishes" emphasis */
.gone { text-decoration:line-through; color:var(--del); opacity:.8; }
.keep { color:var(--triton); font-weight:600; }

/* Tile/level badges */
.lvl { display:inline-block; font-family:"SF Mono",Menlo,monospace; font-size:.72rem;
       border-radius:4px; padding:.05em .45em; border:1px solid currentColor; }
.lvl.grid { color:#b06a00; } .lvl.block { color:var(--triton); } .lvl.thread { color:#888; }