/* Vonk — Learn lessons built on the "Neural networks, visualized" engine.
   Page extras only: the "say it in class" line under each stage, stage text
   inputs and chips, and the closing say / check block. /net/net.css is shared
   with two other pages and is not edited; everything here is additive. */

/* ---------------- under the stage: one line for the classroom ---------------- */
.lsay{display:flex; gap:14px; align-items:flex-start; margin:0 0 14px; padding:14px 18px;
      background:#fff; border-radius:16px; border-left:4px solid var(--accent);
      box-shadow:0 10px 24px -20px rgba(5,41,80,.55);}
#chapters > div:nth-child(even) .lsay{background:var(--warm);}
.lsay-k{flex:0 0 auto; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
        color:var(--accent); padding-top:4px; white-space:nowrap;}
.lsay p{margin:0; font-family:var(--font-display); font-weight:500; font-size:18px; line-height:1.4; color:var(--navy);}
@media (max-width:600px){ .lsay{flex-direction:column; gap:4px;} .lsay p{font-size:16.5px;} }

/* ---------------- on the stage ---------------- */
.lin{font-family:var(--font-body); font-size:14px; color:#fff; background:rgba(255,255,255,.07);
     border:1.5px solid rgba(255,255,255,.22); border-radius:999px; padding:9px 16px; min-width:0; width:260px; max-width:100%; outline:none;}
.lin::placeholder{color:#8FA6C2;}
.lin:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,255,255,.08);}
.lchips{display:flex; flex-wrap:wrap; gap:6px;}
.lchip{font-family:var(--font-body); font-size:12.5px; font-weight:600; color:#C9D6E4; cursor:pointer;
       background:rgba(255,255,255,.04); border:1.5px dashed rgba(255,255,255,.22); border-radius:999px; padding:5px 12px;}
.lchip:hover{color:#fff; border-color:rgba(255,255,255,.45);}
.lchip.is-on{color:#052950; background:#fff; border-style:solid; border-color:#fff;}
.lchip:focus-visible,.lin:focus-visible{outline:2px solid #fff; outline-offset:2px;}
.lrow{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.stage-ctl .lnote{font-size:12.5px; color:#8FA6C2; max-width:46ch; line-height:1.45;}

/* ---------------- closing: say it in class, check yourself ---------------- */
.lclose{padding:70px 0 10px;}
.lclose h2{margin-bottom:6px;}
.lc-say-g{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:20px;}
.lc-sayc{background:#fff; border-radius:18px; padding:18px 20px; box-shadow:0 14px 30px -24px rgba(5,41,80,.6);}
.lc-w{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff;
      background:var(--teal); border-radius:999px; padding:3px 10px; margin-bottom:10px;}
.lc-sayc:nth-child(2) .lc-w{background:var(--orange);}
.lc-sayc:nth-child(3) .lc-w{background:var(--navy);}
.lc-sayc p{margin:0; font-family:var(--font-display); font-size:18px; line-height:1.42; color:var(--navy);}
.lc-check{margin-top:56px;}
.lc-q{background:#fff; border-radius:16px; margin-top:12px; box-shadow:0 12px 26px -24px rgba(5,41,80,.6);
      border:1.5px solid var(--line);}
.lc-q summary{cursor:pointer; list-style:none; padding:16px 20px 16px 52px; position:relative; font-weight:600; color:var(--navy); font-size:16.5px; line-height:1.45;}
.lc-q summary::-webkit-details-marker{display:none;}
.lc-q summary::before{content:"?"; position:absolute; left:16px; top:14px; width:26px; height:26px; border-radius:50%;
      display:grid; place-items:center; background:var(--gold); color:var(--navy); font-weight:800; font-size:14px;}
.lc-q[open] summary::before{content:"\2713"; background:var(--teal); color:#fff;}
.lc-q p{margin:0; padding:0 22px 18px 52px; color:var(--ink); font-size:15.5px; line-height:1.6;}
.lc-q summary:focus-visible{outline:2px solid var(--orange); outline-offset:2px; border-radius:16px;}
@media (max-width:860px){ .lc-say-g{grid-template-columns:1fr;} }

/* the Lab links in the end box */
.lc-lab{list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px;}
.lc-lab a{display:flex; flex-direction:column; gap:3px; text-decoration:none; color:#C9D6E4; font-size:14px; line-height:1.45;
          background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.14); border-radius:16px; padding:12px 16px;
          transition:background .16s, border-color .16s;}
.lc-lab a:hover,.lc-lab a:focus-visible{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.35);}
.lc-lab b{color:#fff; font-size:15px; letter-spacing:.02em;}