/* Learn with Joseph: the hub and the lesson pages (the 10/10 plan, 2026-09-29: T42 T45 T34 T56 T77 T08).
   Needs <body class="kit learn">. One frame per lesson; the quiz is a tint, answers are 52px chips, badges are kit .stamp stickers. */

/* ---------- page ---------- */
.lw{max-width:800px;margin:0 auto;padding:var(--s-6) var(--gutter) var(--s-7)}
.lw--hub{max-width:980px}
@media (min-width:768px){.lw{padding-top:var(--s-7)}}
.learn .h1{margin:0 0 var(--s-2)}
.lw-tag{font-family:var(--f-mono);font-weight:700;font-size:var(--fs-label);letter-spacing:.06em;color:var(--teal-ink);margin:0 0 var(--s-3)}
.lw-intro{max-width:var(--measure);margin:0 0 var(--s-5)}
.lw-intro + .lw-intro{margin-top:calc(-1 * var(--s-3))}
.updated{font-size:var(--fs-small);font-weight:700;color:var(--muted);margin:0 0 var(--s-4)}

/* ---------- hub hero ---------- */
.lh-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-4);align-items:center;margin-bottom:var(--s-5)}
.lh-joseph{position:relative;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.lh-joseph img{display:block;width:96px;height:auto}
.lh-bubble{position:relative;margin:0;padding:8px 14px;background:var(--card);border:3px solid var(--ink);border-radius:18px;
  font-family:var(--f-hand);font-weight:700;font-size:1.4rem;line-height:1;white-space:nowrap;transform:rotate(-4deg)}
.lh-bubble::after{content:"";position:absolute;right:10px;bottom:-12px;width:16px;height:16px;background:var(--card);border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(45deg)}
.lh-hero .lede{margin:0}
@media (min-width:768px){.lh-joseph img{width:120px}}
@media (max-width:420px){.lh-joseph img{width:70px}.lh-bubble{font-size:1.1rem;padding:5px 9px}.lh-hero{gap:var(--s-2)}}

/* ---------- course cards ---------- */
.courses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5);margin:0 0 var(--s-7)}
@media (max-width:640px){.courses{grid-template-columns:1fr;gap:var(--s-4)}}
.course{display:flex;flex-direction:column;background:var(--card);border:3px solid var(--ink);border-radius:var(--r-card);box-shadow:var(--sh-3);overflow:hidden;
  color:var(--ink);text-decoration:none;transition:transform var(--t-quick) var(--ease-pop),box-shadow var(--t-quick) var(--ease-pop)}
@media (hover:hover) and (pointer:fine){.course:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-4)}}
.course:active{transform:translate(2px,2px);box-shadow:var(--sh-1)}
.course-art{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--sand);border-bottom:3px solid var(--ink)}
.course-body{display:flex;flex-direction:column;gap:var(--s-2);flex:1;padding:var(--s-4) var(--s-5) var(--s-5)}
.course .tag{align-self:flex-start;font-family:var(--f-mono);font-weight:700;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;background:var(--sun);border:2px solid var(--ink);border-radius:var(--r-pill);padding:2px 10px}
.course h2{font-family:var(--f-display);font-weight:400;font-size:var(--fs-h3);line-height:1.12;margin:0}
.course .desc{color:var(--muted);flex:1;margin:0}
.course .progress-row{display:flex;align-items:center;gap:10px;padding-top:var(--s-3);border-top:2px dashed rgba(43,35,68,.25)}
.course .go{align-self:flex-start;margin-top:var(--s-2)}
/* phones: the first course's button must be on the first screen (T45) */
@media (max-width:640px){
  .course{display:grid;grid-template-columns:112px minmax(0,1fr)}
  .course-art{grid-row:1;height:100%;aspect-ratio:auto;border-bottom:0;border-right:3px solid var(--ink)}
  .course-body{padding:var(--s-3) var(--s-4) var(--s-4);gap:6px}
  .course .desc{display:none}
  .course .progress-row{padding-top:var(--s-2)}
  .course .go{min-height:44px;padding:0 16px;font-size:1rem}
}
.pdots,.rail-dots{display:flex;gap:6px}
.pdot,.rail-dot{width:14px;height:14px;border-radius:50%;border:2.5px solid var(--ink);background:var(--card);flex:none}
.pdot.on,.rail-dot.on{background:var(--teal)}
.pcount,.rail-count{font-family:var(--f-mono);font-weight:700;font-size:var(--fs-label);color:var(--muted);white-space:nowrap}

.lh-more{border:3px dashed var(--ink);border-radius:var(--r-card);background:var(--paper);padding:var(--s-5);margin:0 0 var(--s-6)}
.lh-more h2{font-family:var(--f-display);font-weight:400;font-size:var(--fs-h3);margin:0 0 var(--s-2)}
.lh-more p{margin:0;color:var(--muted)}

/* ---------- rail: sits under the sticky header, never under it ---------- */
.rail{position:sticky;top:var(--ttl-head);z-index:40;background:var(--paper);border-bottom:3px solid var(--ink)}
.rail-inner{max-width:800px;margin:0 auto;padding:10px var(--gutter);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rail-label{font-family:var(--f-mono);font-weight:700;font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.rail-count{margin-left:auto}

/* ---------- lessons: one frame each ---------- */
.lesson{background:var(--card);border:3px solid var(--ink);border-radius:var(--r-panel);box-shadow:var(--sh-3);padding:var(--s-5) var(--s-5) var(--s-6);margin:var(--s-6) 0}
@media (max-width:640px){.lesson{padding:var(--s-4) var(--s-4) var(--s-5);border-radius:var(--r-card)}}
.lesson-num{display:inline-block;font-family:var(--f-mono);font-weight:700;font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--error);margin-bottom:var(--s-1)}
.lesson h2{font-family:var(--f-display);font-weight:400;font-size:var(--fs-h2-doc);line-height:1.1;margin:0 0 var(--s-4)}
.lesson p,.lesson li{max-width:62ch}
.lesson p{margin:0 0 var(--s-4)}
.lesson ul{margin:0 0 var(--s-4);padding-left:22px}
.lesson li{margin-bottom:var(--s-2)}
.lesson strong{font-weight:900}

/* a picture per lesson: step rows with HTML labels (never under 14px on a phone) */
.steps{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:var(--s-3);margin:var(--s-2) 0 var(--s-5);padding:var(--s-4);
  background:var(--paper);border-radius:var(--r-card);list-style:none}
.steps li{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1 1 120px;max-width:170px;margin:0;text-align:center;font-weight:800;font-size:1rem;line-height:1.25}
.steps li svg{width:72px;height:72px}
.steps li small{font-family:var(--f-hand);font-weight:700;font-size:1.15rem;color:var(--teal-ink);line-height:1.1}
.steps .arrow{flex:0 0 auto;align-self:center;max-width:none;font-family:var(--f-display);font-size:1.6rem;color:var(--error)}
.steps + .cap{font-weight:800;font-size:1rem;text-align:center;color:var(--muted);margin:calc(-1 * var(--s-3)) 0 var(--s-5)}
@media (max-width:520px){
  .steps{flex-direction:column;align-items:stretch;gap:2px}
  .steps li{max-width:none;flex:none;flex-direction:row;gap:var(--s-3);text-align:left}
  .steps li svg{width:56px;height:56px;flex:none}
  .steps li.arrow{display:block;align-self:flex-start;width:56px;height:22px;text-align:center;line-height:22px;font-size:1.3rem;transform:none}
  .steps li.arrow::before{content:"\2193"}
  .steps li.arrow{color:var(--error);font-size:0}
  .steps li.arrow::before{font-size:1.3rem}
}
/* the Imaginator's line as five numbered chips (was a terminal box) */
.chips5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-2);margin:0 0 var(--s-5);padding:0;list-style:none;counter-reset:c}
.chips5 li{counter-increment:c;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:none;margin:0;padding:var(--s-3) var(--s-2);text-align:center;
  background:var(--paper);border:2px solid var(--ink);border-radius:var(--r-card);font-weight:800;font-size:.95rem;line-height:1.25}
.chips5 li::before{content:counter(c);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--sun);border:2px solid var(--ink);font-family:var(--f-display);font-size:1rem}
.chips5 svg{width:44px;height:44px}
@media (max-width:640px){.chips5{grid-template-columns:1fr}.chips5 li{flex-direction:row;text-align:left;gap:var(--s-3);padding:var(--s-2) var(--s-3)}.chips5 svg{width:36px;height:36px;flex:none}}
.lesson .polaroid{width:min(360px,90%);margin:var(--s-2) auto var(--s-6)}
.lesson .polaroid img{aspect-ratio:3/2}

/* From Dad's desk: grown-up detail, folded */
.lesson details.dad-desk{padding:0;margin:0 0 var(--s-5);box-shadow:none}
.lesson details.dad-desk > summary{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 18px;cursor:pointer;list-style:none;font-weight:900}
.lesson details.dad-desk > summary::-webkit-details-marker{display:none}
.lesson details.dad-desk > summary::after{content:"+";margin-left:auto;font-family:var(--f-display);font-size:1.5rem}
.lesson details.dad-desk[open] > summary::after{content:"\2212"}
.lesson details.dad-desk .dad-chip{margin:0}
.lesson details.dad-desk > p{padding:0 18px;margin:0 0 var(--s-4)}

/* ---------- quiz: a tint, chip answers, a sticker when right ---------- */
.quiz{background:var(--tint-butter);border-radius:var(--r-card);padding:var(--s-4) var(--s-4) var(--s-5);margin-top:var(--s-5)}
.quiz-q{font-weight:900;font-size:1.1rem;margin:0 0 var(--s-3)}
.quiz-q::before{content:"Quick check";display:block;font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--error);margin-bottom:4px}
.quiz-opts{display:flex;flex-direction:column;gap:var(--s-2);margin:0 0 var(--s-4)}
.quiz-opts label{position:relative;display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 16px;background:var(--card);border:3px solid var(--ink);border-radius:14px;
  font-weight:800;font-size:1rem;line-height:1.3;cursor:pointer;transition:transform var(--t-tap) var(--ease-out),background var(--t-quick)}
.quiz-opts label::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;border:3px solid var(--ink);background:var(--card)}
.quiz-opts input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.quiz-opts label:has(input:checked){background:var(--sun);box-shadow:var(--sh-1)}
.quiz-opts label:has(input:checked)::before{background:var(--ink);box-shadow:inset 0 0 0 4px var(--sun)}
.quiz-opts label:has(input:focus-visible){outline:3px dashed var(--ink);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.quiz-opts label:hover{transform:translateY(-1px)}}
.quiz.is-right .quiz-opts label:has(input:checked){background:var(--teal)}
.quiz-check{min-width:140px}
.quiz-fb{display:flex;align-items:center;gap:8px;margin:var(--s-3) 0 0;font-weight:900}
.quiz-fb::before{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--ink);font-family:var(--f-display);font-size:1rem}
.quiz-fb.good{color:var(--teal-ink)}
.quiz-fb.good::before{content:"\2713";background:var(--teal);color:var(--ink)}
.quiz-fb.bad{color:var(--ink)}
.quiz-fb.bad::before{content:"?";background:var(--card)}
.quiz-fb[hidden]{display:none}
.quiz-badge{display:none;align-items:center;gap:var(--s-4);margin-top:var(--s-4)}
.quiz-badge.show{display:flex}
.quiz-badge .stamp{flex:none}
.quiz-badge .stamp__ring{width:88px;height:88px}
.quiz-badge.pop .stamp{animation:lw-stamp var(--t-show) var(--ease-pop) both}
@keyframes lw-stamp{from{transform:scale(1.8) rotate(-18deg);opacity:0}to{transform:scale(1) rotate(-6deg);opacity:1}}
.quiz-badge .stamp{transform:rotate(-6deg)}
@media (prefers-reduced-motion:reduce){.quiz-badge.pop .stamp{animation:none}}
html.calm .quiz-badge.pop .stamp{animation:none}
.badge-txt{font-weight:800;line-height:1.3}
.badge-txt b{display:block;font-family:var(--f-display);font-weight:400;font-size:1.3rem}
.stamp__ring svg{width:56px;height:56px}
.quiz-badge .stamp__ring svg{width:64px;height:64px}

/* ---------- complete! ---------- */
.graduate{display:none;margin:var(--s-6) 0;text-align:center;background:var(--paper);border:4px solid var(--ink);border-radius:var(--r-panel);box-shadow:var(--sh-3);padding:var(--s-6) var(--s-5)}
.graduate.show{display:block}
.graduate h2{font-family:var(--f-display);font-weight:400;font-size:var(--fs-h2);line-height:1.05;margin:0 0 var(--s-3)}
.graduate p{max-width:46ch;margin:0 auto var(--s-4)}
.grad-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-4);margin:0 0 var(--s-5)}
.grad-badges .stamp:nth-child(odd){transform:rotate(-5deg)}.grad-badges .stamp:nth-child(even){transform:rotate(4deg)}
.graduate .btn-row{justify-content:center}
.graduate .small{color:var(--muted)}

/* sign-in note after the lessons */
.lw .lab-progress{margin:var(--s-6) 0}

/* ---------- ways on ---------- */
.lw-next{margin:var(--s-6) 0 0}
.lw-next h2{font-family:var(--f-display);font-weight:400;font-size:var(--fs-h3);margin:0 0 var(--s-2)}
.lw-next p{margin:0 0 var(--s-4);max-width:var(--measure)}

/* the certificate prints on its own */
@media print{
  body.learn.is-printing-cert > *:not(.lw){display:none!important}
  body.learn.is-printing-cert .lw > *:not(.graduate){display:none!important}
  body.learn.is-printing-cert .graduate{display:block!important;border-width:6px;page-break-inside:avoid}
  body.learn.is-printing-cert .graduate .btn-row{display:none!important}
}
/* 13px floor (G23) for the shared bits that sit on these pages */
.learn .lab-kicker,.learn .dad-chip{font-size:var(--fs-label)}