/* Vonk — teacher scripts (SC-*): a step-by-step script for the school's own
 * approved chatbot. Three ways to use one page: read it on a laptop, put it
 * on the projector one step at a time (Projector view), or print it. Shared
 * by lab/twice.html and lab/ask-sources.html; behaviour in lab/script.js.
 * No live chatbot, no API, ever: the teacher uses the school's own tool. */
.sc{max-width:900px;}
.sc .kicker{font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0;}
.sc h2{font-family:var(--font-display); font-weight:600; color:var(--navy); font-size:clamp(21px,2.1vw,27px); margin:34px 0 10px;}
.sc .lead{font-size:clamp(18px,1.8vw,21px); margin:8px 0 14px;}
.sc .facts{display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0 0 6px; list-style:none;}
.sc .facts li{background:var(--paper); border:1px solid var(--line); border-radius:var(--pill); padding:4px 12px; font-size:14px;}
.sc .tools{display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 0;}
.sc .btn{display:inline-flex; align-items:center; gap:7px; border:none; cursor:pointer; background:var(--orange); color:#fff; font:600 15px/1.2 var(--font-body); padding:9px 18px;
         border-radius:var(--pill); text-decoration:none; box-shadow:0 4px 14px rgba(237,98,41,.28);}
.sc .btn.ghost{background:none; color:var(--navy); box-shadow:inset 0 0 0 1.5px var(--navy);}
.sc .box{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:14px 18px; margin:12px 0;}
.sc .box.safe{border-left:5px solid var(--rust);}
.sc .box.why{border-left:5px solid var(--teal);}
.sc .box.fall{border-left:5px solid var(--gold);}
.sc .box h3{margin:0 0 6px; font-size:17px; color:var(--navy);}
.sc ul.points{padding-left:1.2em; margin:6px 0;} .sc ul.points li{margin:5px 0;}
.sc ol.steps{list-style:none; padding:0; margin:0; counter-reset:st;}
.step{position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:14px 18px 14px 64px; margin:12px 0; counter-increment:st;}
.step::before{content:attr(data-n); position:absolute; left:16px; top:14px; width:34px; height:34px; border-radius:50%; background:var(--navy); color:#fff;
              font:800 17px/34px ui-monospace, Menlo, Consolas, monospace; text-align:center;}
.step h3{margin:2px 0 6px; font-size:18px; color:var(--navy); display:flex; flex-wrap:wrap; gap:6px 10px; align-items:baseline;}
.step h3 .min{font:700 12px/1 ui-monospace, Menlo, Consolas, monospace; color:var(--muted); background:var(--warm); border-radius:6px; padding:4px 7px;}
.step p{margin:6px 0;}
.type{display:flex; align-items:flex-start; gap:10px; background:#03182F; color:#BFE3C8; border-radius:12px; padding:10px 12px; margin:8px 0;
      font:500 15.5px/1.5 ui-monospace, Menlo, Consolas, monospace;}
.type .tl{flex:none; font:800 10px/1.6 ui-monospace, Menlo, Consolas, monospace; letter-spacing:.12em; text-transform:uppercase; color:#5E8F72; padding-top:2px;}
.type .tt{flex:1; min-width:0; overflow-wrap:anywhere;}
.type button{flex:none; border:none; border-radius:999px; padding:6px 11px; font:700 12px/1 ui-monospace, Menlo, Consolas, monospace; cursor:pointer; color:#03182F; background:#BFE3C8;}
.ask{background:#FFF6DC; border-left:4px solid var(--gold); border-radius:8px; padding:8px 12px; margin:8px 0;}
.ask b.l, .usual b.l{display:block; font:800 10px/1.4 ui-monospace, Menlo, Consolas, monospace; letter-spacing:.12em; text-transform:uppercase; color:#8A6400;}
.usual{background:#EEF4FB; border-left:4px solid var(--teal); border-radius:8px; padding:8px 12px; margin:8px 0;}
.usual b.l{color:var(--teal);}
/* "In real AI" (owner, 2026-10-09): one box per step saying what the chatbot
   is doing at that step and why it matters when pupils use one. Same green as
   the Lab's real card (.chatbox .msg.t.real in lab.css). .whyline is the one
   sentence under the lead on why the lesson matters, in the same colours. */
.real{display:block; background:#E6F4F1; border-left:4px solid #137A6B; color:#0B3B36; border-radius:8px; padding:8px 12px; margin:8px 0;}
.real b.l{display:block; font:800 10px/1.4 ui-monospace, Menlo, Consolas, monospace; letter-spacing:.12em; text-transform:uppercase; color:#137A6B;}
.real a{color:#0B3B36; font-weight:600;}
.sc .whyline{font-size:16.5px; margin:0 0 14px;}
.board{font-family:var(--font-display); font-weight:600; color:var(--navy); font-size:clamp(19px,2vw,24px); text-align:center; background:#fff; border:2px solid var(--navy); border-radius:14px; padding:12px 16px; margin:12px 0;}
.sc table.vs{width:100%; border-collapse:collapse; background:var(--paper); border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); font-size:15.5px;}
.sc table.vs th, .sc table.vs td{padding:10px 14px; text-align:left; vertical-align:top; border-top:1px solid var(--line);}
.sc table.vs thead th{background:var(--navy); color:#fff; border-top:none; font-size:14px;}
.sc table.vs tbody th{font-weight:600; color:var(--navy); width:24%;}
.sc ol.src{font-size:14.5px; padding-left:1.3em;} .sc ol.src li{margin:5px 0;}
.sc .note{color:var(--muted); font-size:14.5px;}
.sc .about-sec{border-top:2px solid var(--line); margin-top:40px; padding-top:4px;}
@media (max-width:640px){
  .step{padding:12px 14px 12px 54px;} .step::before{left:12px; width:30px; height:30px; line-height:30px; font-size:15px;}
  .type{flex-wrap:wrap;}
  .sc table.vs thead{display:none;}
  .sc table.vs, .sc table.vs tbody, .sc table.vs tr, .sc table.vs th, .sc table.vs td{display:block; width:auto;}
  .sc table.vs tr{border-top:1px solid var(--line); padding:6px 0;}
  .sc table.vs th, .sc table.vs td{border:none; padding:4px 14px;}
  .sc table.vs td::before{content:attr(data-col); display:block; font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.05em;}
}

/* Projector view: one step at a time, big type, arrows to move. */
.projbar{display:none;}
body.proj{background:#03182F;}
body.proj .bar, body.proj .topbar, body.proj .pagebar, body.proj .devnote, body.proj > footer, body.proj .sc > :not(#steps-wrap){display:none !important;}
body.proj main.sc{max-width:none; padding:0;}
body.proj #steps-wrap{min-height:100dvh; display:flex; flex-direction:column; padding:clamp(14px,3vw,40px);}
body.proj #steps-wrap > h2{display:none;}
body.proj .step{display:none; flex:1; margin:0; font-size:clamp(17px,min(1.7vw,2.9vh),28px); line-height:1.4; padding:clamp(16px,2.4vh,40px) clamp(20px,3vw,44px) clamp(16px,2.4vh,40px) clamp(80px,8vw,120px); border-radius:24px;}
body.proj .step.on{display:block;}
body.proj .step::before{width:clamp(44px,4.4vw,64px); height:clamp(44px,4.4vw,64px); line-height:clamp(44px,4.4vw,64px); font-size:clamp(22px,2.2vw,32px); left:clamp(18px,2vw,32px); top:clamp(20px,3vw,44px);}
body.proj .step h3{font-size:clamp(22px,min(2.6vw,4.4vh),42px); font-family:var(--font-display); font-weight:600;}
body.proj .type{font-size:clamp(16px,min(1.7vw,2.9vh),28px);} body.proj .step p, body.proj .ask, body.proj .usual, body.proj .real{margin:5px 0;}
body.proj .board{font-size:clamp(22px,min(2.6vw,4.6vh),42px);}
body.proj .projbar{display:flex; align-items:center; gap:12px; margin-top:14px; color:#BFE3C8; font:700 15px/1 ui-monospace, Menlo, Consolas, monospace;}
.projbar button{border:none; border-radius:999px; padding:12px 20px; font:700 16px/1 var(--font-body); cursor:pointer; background:#BFE3C8; color:#03182F;}
.projbar button.go{background:var(--orange); color:#fff;}
.projbar .grow{flex:1;}

/* Print: the script on paper, no buttons. */
@media print{
  .bar, .topbar, .pagebar .bback, .pagebar .crumb, footer, .tools, .type button, .projbar, .lang{display:none !important;}
  body{background:#fff; font-size:11.5pt;}
  main.sc{max-width:none; padding:0;}
  .step, .box{break-inside:avoid; box-shadow:none;}
  .type{background:#fff; color:#000; border:1.5px solid #000;} .type .tl{color:#444;}
  .real{-webkit-print-color-adjust:exact; print-color-adjust:exact; border:1px solid #137A6B; border-left-width:4px;}
  .step::before{background:#fff; color:#000; border:2px solid #000;}
  a{color:inherit;}
}
/* On the projector the small labels ("Ask the class", "What usually happens",
   "In real AI", "Type this") grow with the step text, so the room can read
   them (owner, 2026-10-09: bigger text for readability). */
body.proj .type .tl, body.proj .ask b.l, body.proj .usual b.l, body.proj .real b.l{font-size:clamp(12px,min(1vw,1.7vh),17px);}