/* ============================================================
   AI in Data Science — course site

   This is a direct port of lessons/data-lessons.html. The light theme
   values below are that file's values, unchanged. Dark mode is layered on
   by redefining the same variable names and nothing else.

   The layout idiom is that file's idiom: prose is prose. Paragraphs get
   `margin:0 0 1rem` and nothing else. De-emphasised text is a colour
   (.note), not a box. The only bordered things on a page are the activity
   card and the check-yourself items.
   ============================================================ */

:root{
  --paper:#fafbfc;
  --ink:#1c2733;
  --slate:#5d6b7a;
  --line:#dde3e9;
  --accent:#0e7490;
  --accent-soft:#e3f1f5;
  --good:#15803d;
  --good-soft:#e9f5ec;
  --warn:#b45309;
  --warn-soft:#fdf3e7;
  --card:#ffffff;
  --chrome:#f0f3f6;
  --shadow:rgba(28,39,51,.06);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --serif:"Iowan Old Style",Palatino,"Palatino Linotype",Georgia,serif;
  --sans:"Avenir Next",Avenir,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --prov-a:#b45309; --prov-a-soft:#fdf3e7;
  --prov-b:#6d28d9; --prov-b-soft:#f1ecfd;
  --prov-c:#0e7490; --prov-c-soft:#e3f1f5;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#12161a;
    --ink:#e6ebf0;
    --slate:#a1aeba;
    --line:#2a333c;
    --accent:#58bed6;
    --accent-soft:#14303a;
    --good:#5fd39a;
    --good-soft:#132a1f;
    --warn:#e0a763;
    --warn-soft:#2b2116;
    --card:#181d23;
    --chrome:#1f262d;
    --shadow:rgba(0,0,0,.4);

    --prov-a:#e0a763; --prov-a-soft:#2b2116;
    --prov-b:#b79bec; --prov-b-soft:#231d33;
    --prov-c:#58bed6; --prov-c-soft:#14303a;
  }
}
:root[data-theme="dark"]{
  --paper:#12161a;
  --ink:#e6ebf0;
  --slate:#a1aeba;
  --line:#2a333c;
  --accent:#58bed6;
  --accent-soft:#14303a;
  --good:#5fd39a;
  --good-soft:#132a1f;
  --warn:#e0a763;
  --warn-soft:#2b2116;
  --card:#181d23;
  --chrome:#1f262d;
  --shadow:rgba(0,0,0,.4);

  --prov-a:#e0a763; --prov-a-soft:#2b2116;
  --prov-b:#b79bec; --prov-b-soft:#231d33;
  --prov-c:#58bed6; --prov-c-soft:#14303a;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
}
.col{max-width:42rem; margin:0 auto; padding:0 1.25rem}
.col-wide{max-width:56rem; margin:0 auto; padding:0 1.25rem}

/* ---------- masthead ---------- */
header.masthead{border-bottom:1px solid var(--line); padding:3.5rem 0 2.5rem; background:var(--card)}
.masthead .kicker{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0 0 .9rem}
.masthead h1{font-family:var(--serif); font-size:2.4rem; line-height:1.15; margin:0 0 1rem; text-wrap:balance; font-weight:600}
.masthead p{color:var(--slate); max-width:36rem; margin:0}

/* ---------- prose ---------- */
main{padding:3.5rem 0 1rem}
.eyebrow{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0 0 .7rem}
main h2{font-family:var(--serif); font-size:1.75rem; line-height:1.2; margin:2.75rem 0 1.1rem; text-wrap:balance; font-weight:600}
main h2:first-child{margin-top:0}
main h3{font-family:var(--serif); font-size:1.15rem; margin:2rem 0 .6rem; font-weight:600}
main h4{font-family:var(--serif); font-size:1.02rem; margin:1.6rem 0 .5rem; font-weight:600}
p{margin:0 0 1rem}
.note{color:var(--slate); font-size:.92rem}
a{color:var(--accent)}
strong{font-weight:600}
ul,ol{margin:0 0 1rem; padding-left:1.3rem}
li{margin:.3rem 0}
code{font-family:var(--mono); font-size:.88em; background:var(--chrome); padding:.1em .35em; border-radius:3px}
pre{font-family:var(--mono); font-size:.82rem; line-height:1.6; background:var(--chrome); color:var(--ink);
  padding:.85rem 1rem; border-radius:8px; border:1px solid var(--line); overflow-x:auto; margin:0 0 1rem}
pre code{background:none; padding:0; font-size:1em}
blockquote{margin:0 0 1rem; padding-left:1rem; border-left:3px solid var(--line); color:var(--slate)}
hr{border:none; border-top:1px solid var(--line); margin:2.5rem 0}

.tablescroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 1.2rem}
table{width:100%; min-width:30rem; border-collapse:collapse; font-size:.92rem}
th,td{border:1px solid var(--line); padding:.45rem .65rem; text-align:left; vertical-align:top}
th{background:var(--chrome); font-weight:600; font-size:.85rem}
td{color:var(--ink)}

/* ---------- section heading (uses the h2 idiom) ---------- */
.sectionbar{
  display:flex; align-items:baseline; gap:.85rem; flex-wrap:wrap;
  margin:3rem 0 1.1rem;
}
.sectiontitle{font-family:var(--serif); font-size:1.75rem; line-height:1.2; font-weight:600; text-wrap:balance}
.sectiontime{margin-left:auto; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--slate)}

.beat{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--slate); margin:3rem 0 1rem;
}
.beat .n{color:var(--accent); font-weight:600}

/* ---------- activity card ----------
   The header is its own rounded bar floating above the frame. The frame
   itself carries no border, so an activity shorter than its given height
   leaves plain page background rather than an outlined empty box. */
.activity-embed{margin:2rem auto 1.25rem}
.activity-header{
  display:flex; align-items:center; gap:.75rem; justify-content:space-between;
  background:var(--chrome); border:1px solid var(--line); border-radius:10px;
  padding:.55rem .9rem; margin-bottom:.55rem;
}
a.activity-title{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); font-weight:600; text-decoration:none;
}
a.activity-title:hover{color:var(--accent); text-decoration:underline}
.activity-fullscreen-btn{
  font-family:var(--sans); font-size:.82rem; font-weight:600;
  border:1px solid var(--line); color:var(--slate); background:var(--card);
  border-radius:6px; padding:.3rem .7rem; cursor:pointer;
  display:flex; align-items:center; gap:.35rem; flex:none;
}
.activity-fullscreen-btn:hover{border-color:var(--accent); color:var(--accent)}
.activity-embed iframe{width:100%; border:none; display:block; background:transparent}

/* ---------- author notes — a colour, not a box ---------- */
.todo{margin:0 0 1.4rem}
.todolabel{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--slate); margin:0 0 .5rem;
}
.todo p,.todo li{color:var(--slate); font-size:.92rem}
.todo ul,.todo ol{margin:0 0 .6rem}
.todo > :last-child{margin-bottom:0}
.todo strong{color:var(--ink)}

/* ---------- activity placeholder — same shell as the real card ---------- */
.slot{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  margin:2rem auto; overflow:hidden; box-shadow:0 1px 3px var(--shadow);
  display:flex; flex-direction:column;
}
.slothead{
  display:flex; align-items:center; gap:.5rem;
  background:var(--chrome); border-bottom:1px solid var(--line); padding:.55rem .9rem;
}
.sloticon{color:var(--slate); font-size:.85rem; line-height:1}
.slotlabel{font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--slate); font-weight:600}
.slotbody{
  flex:1; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:1.6rem 1.2rem; color:var(--slate); font-size:.92rem; max-width:34rem; margin:0 auto;
}

/* ---------- bare placeholder ---------- */
.ph{
  border:1px dashed var(--line); border-radius:10px; background:var(--card);
  margin:1.5rem 0; padding:.9rem 1rem;
  display:flex; flex-direction:column; gap:.3rem;
}
.ph-label{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--slate);
}
.ph-note{font-family:var(--mono); font-size:.72rem; color:var(--slate); opacity:.85}

/* ---------- check-yourself ---------- */
.check{margin:2rem 0 2.5rem}
.check .check-label{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); margin:0 0 .8rem}
.think-hint{font-size:.85rem; color:var(--slate); font-style:italic; margin:.2rem 0 1rem}
details.q{
  border:1px solid var(--line); border-radius:8px; background:var(--card);
  margin:0 0 .7rem; padding:0;
}
details.q summary{
  cursor:pointer; padding:.85rem 1rem; font-weight:600; list-style:none;
  display:flex; gap:.6rem; align-items:baseline;
}
details.q summary::-webkit-details-marker{display:none}
details.q summary::before{content:"?"; font-family:var(--mono); color:var(--accent); flex:none}
details.q[open] summary::before{content:"→"}
details.q .answer{padding:0 1rem 1rem; color:var(--ink); font-size:.95rem; border-top:1px dashed var(--line)}
details.q .answer p:first-child{margin-top:.9rem}

/* ---------- checklist — a label and a list ---------- */
.checklist{margin:1.6rem 0 2rem}
.checklist .check-label{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); margin:0 0 .6rem}
.checklist ul{margin:0}
.checklist li{color:var(--ink); font-size:.95rem}

/* ---------- notebook handoff — an action, so it gets a card ---------- */
.notebook{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  margin:2rem 0; padding:1.1rem 1.2rem; box-shadow:0 1px 3px var(--shadow);
}
.notebook h4{margin:0 0 .6rem}
.notebook p,.notebook li{font-size:.95rem}
.notebook > :last-child{margin-bottom:0}
.btn-colab{
  display:inline-block; font-family:var(--sans); font-size:.88rem; font-weight:600;
  background:var(--accent); color:var(--paper); text-decoration:none;
  border:1px solid var(--accent); border-radius:6px; padding:.4rem .85rem; margin-top:.3rem;
}
.btn-colab:hover{filter:brightness(1.1)}
.btn-colab.is-placeholder{
  background:var(--card); color:var(--slate); border-color:var(--line); cursor:not-allowed;
}

/* ---------- comparison — a label and a table ---------- */
.compare{margin:1.6rem 0 2rem}
.compare .check-label{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); margin:0 0 .6rem}
.compare table{min-width:32rem}

/* ---------- callout / instructor — left rule, no fill ---------- */
.callout{border-left:3px solid var(--accent); padding-left:1rem; margin:1.6rem 0}
.callout > :last-child{margin-bottom:0}
.callout.warn{border-left-color:var(--warn)}
.instructor{border-left:3px solid var(--line); padding-left:1rem; margin:2rem 0}
.instructor .ilabel{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--slate); margin:0 0 .5rem;
}
.instructor p,.instructor li{color:var(--slate); font-size:.92rem}
.instructor > :last-child{margin-bottom:0}

pre.prompt{white-space:pre-wrap; background:var(--card); border-left:3px solid var(--accent)}

.pill{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  font-weight:600; padding:.12rem .45rem; border-radius:4px; white-space:nowrap;
}
.pill-scaffold{background:var(--chrome); color:var(--slate); border:1px solid var(--line)}
.pill-drafted{background:var(--warn-soft); color:var(--warn)}
.pill-ready{background:var(--good-soft); color:var(--good)}

/* ---------- cards ---------- */
.cards{display:grid; gap:.9rem; margin:1.4rem 0 2rem}
.lcard{
  display:block; text-decoration:none; color:inherit;
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:1rem 1.15rem; box-shadow:0 1px 3px var(--shadow);
  transition:border-color .18s, transform .18s;
}
.lcard:hover{border-color:var(--accent); transform:translateY(-2px)}
.lcard .num{font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0 0 .35rem}
.lcard h3{font-family:var(--serif); font-size:1.2rem; margin:0 0 .4rem; font-weight:600}
.lcard p{font-size:.92rem; color:var(--slate); margin:0 0 .7rem}
.lcard .meta{
  font-family:var(--mono); font-size:.72rem; color:var(--slate);
  display:flex; gap:.9rem; flex-wrap:wrap; align-items:center;
  border-top:1px dashed var(--line); padding-top:.55rem;
}
.lcard .meta b{color:var(--ink); font-weight:600}

/* ---------- nav / footer ---------- */
.lessonnav{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:.82rem;
  max-width:42rem; margin:0 auto; padding:3rem 1.25rem 3.5rem;
}
.lessonnav a{text-decoration:none; color:var(--accent)}
.lessonnav a:hover{text-decoration:underline}
.lessonnav .spacer{flex:1}
footer.endcap{border-top:1px solid var(--line); padding:2rem 0 4rem; color:var(--slate); font-size:.9rem}

/* ---------- theme toggle ---------- */
#theme-toggle{
  position:fixed; right:1.1rem; top:1.1rem; z-index:70;
  width:2.4rem; height:2.4rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--card); color:var(--slate);
  border:1px solid var(--line); cursor:pointer;
  box-shadow:0 1px 3px var(--shadow);
}
#theme-toggle:hover{color:var(--accent); border-color:var(--accent)}
#theme-toggle svg{width:1.05rem; height:1.05rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
#theme-toggle .moon{display:none}
:root[data-theme="dark"] #theme-toggle .sun{display:none}
:root[data-theme="dark"] #theme-toggle .moon{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) #theme-toggle .sun{display:none}
  :root:not([data-theme="light"]) #theme-toggle .moon{display:block}
}
button:focus-visible, a:focus-visible, summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ---------- provenance ---------- */
.prov{border-left:3px solid transparent; padding-left:.9rem; margin-left:-1.15rem}
.prov::before{
  content:attr(data-prov); font-family:var(--mono); font-size:.62rem;
  letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  display:inline-block; padding:.1rem .4rem; border-radius:3px; margin-bottom:.4rem;
}
.prov-habiba{border-left-color:var(--prov-a)}
.prov-habiba::before{background:var(--prov-a-soft); color:var(--prov-a)}
.prov-susan{border-left-color:var(--prov-b)}
.prov-susan::before{background:var(--prov-b-soft); color:var(--prov-b)}
.prov-new{border-left-color:var(--prov-c)}
.prov-new::before{background:var(--prov-c-soft); color:var(--prov-c)}
body.prov-off .prov{border-left-color:transparent; padding-left:0; margin-left:0}
body.prov-off .prov::before{display:none}
body.prov-off #prov-legend{display:none}
#prov-toggle{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:70;
  font-family:var(--mono); font-size:.75rem;
  background:var(--ink); color:var(--paper); border:none; cursor:pointer;
  padding:.55rem .8rem; border-radius:7px;
}
#prov-legend{
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:.7rem .9rem; margin:1.5rem 0 0; font-size:.82rem; color:var(--slate);
  display:flex; gap:1.1rem; flex-wrap:wrap; align-items:center;
}
#prov-legend .dot{width:.65rem; height:.65rem; border-radius:2px; display:inline-block; margin-right:.35rem}
#prov-legend .swatch{display:inline-flex; align-items:center}
#prov-legend .lbl{font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase}

/* ---------- teaching-model page ---------- */
.whoblock{background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; margin:2rem 0; box-shadow:0 1px 3px var(--shadow)}
.whohead{padding:.55rem .9rem; background:var(--chrome); border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--slate)}
.whohead b{color:var(--ink); font-weight:600}
.whobody{padding:1rem .95rem 1.1rem}
.task{font-family:var(--mono); font-size:.82rem; background:var(--chrome); border-radius:6px;
  padding:.5rem .7rem; margin:0 0 .9rem; border-left:3px solid var(--slate)}
.steps{list-style:none; margin:0; padding:0}
.steps li{display:flex; gap:.7rem; align-items:flex-start; padding:.5rem 0; border-bottom:1px dashed var(--line); margin:0}
.steps li:last-child{border-bottom:none}
.who{font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  padding:.16rem .45rem; border-radius:4px; flex:none; width:5.5rem; text-align:center}
.who.us{background:var(--warn-soft); color:var(--warn)}
.who.ai{background:var(--prov-b-soft); color:var(--prov-b)}
.who.them{background:var(--accent-soft); color:var(--accent)}
.steps .what{font-size:.92rem}
.tally{margin:.9rem 0 0; padding:.7rem .85rem; border-radius:0 7px 7px 0; font-size:.92rem}
.tally.bad{background:var(--warn-soft); border-left:3px solid var(--warn)}
.tally.good{background:var(--good-soft); border-left:3px solid var(--good)}

@media (max-width:640px){
  body{font-size:16px}
  .masthead h1{font-size:1.95rem}
  .sectiontitle{font-size:1.5rem}
  .prov{margin-left:0}
  #theme-toggle{top:auto; bottom:1.1rem; right:auto; left:1.1rem}
  #prov-legend{flex-direction:column; align-items:flex-start; gap:.4rem}
  .who{width:4.6rem}
}
@media print{
  #theme-toggle,#prov-toggle,#prov-legend{display:none}
  .prov{border-left-color:transparent; padding-left:0; margin-left:0}
  .prov::before{display:none}
}

/* The frame is now sized to its content, so the only space under an
   activity is its own bottom margin. Whatever follows gives up its top
   margin so the two stop stacking up. Last in the file so it wins against
   the element rules above. */
.activity-embed + *{margin-top:0}

/* ---------- Tally feedback embed ---------- */
/* The form renders light whatever the page does, so in dark mode it sits on
   its own white card rather than floating on the dark background. Mirrors the
   two-signal theme handling used at the top of this file. */
.tally-embed-wrapper{margin:2.5rem 0 0}
.tally-embed-wrapper iframe{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tally-embed-wrapper{
    background:#fff; border-radius:8px; padding:8px 16px;
  }
}
:root[data-theme="dark"] .tally-embed-wrapper{
  background:#fff; border-radius:8px; padding:8px 16px;
}