/* Hand-drawn whiteboard kit (matches content/make_images.py: ink #1E1E24, blue #2456C9,
   red #D93A3A, green #1E9E5A, orange #F08A24, highlighter #FFE45C, board #F8F8F4).
   Boards stay light in both themes — like a real whiteboard on the wall. */
:root{--wb-ink:#1E1E24;--wb-blue:#2456C9;--wb-red:#D93A3A;--wb-green:#1E9E5A;--wb-orange:#F08A24;--wb-hl:#FFE45C;--wb-paper:#F8F8F4}

.wb{position:relative;background-color:var(--wb-paper);background-image:radial-gradient(#C9C9D4 1.2px,transparent 1.3px);background-size:22px 22px;color:var(--wb-ink);
  border:3px solid #C7C8D6;border-radius:18px 6px 16px 8px/8px 16px 6px 18px;box-shadow:0 1px 0 #fff inset,6px 8px 0 rgba(0,0,0,.18);padding:28px;box-sizing:border-box;font-family:'Itim','Chakra Petch',sans-serif}
.wb a{color:var(--wb-blue)}
.wb-hand{font-family:'Sriracha','Itim',cursive;font-weight:400;letter-spacing:.2px}
.wb-note{font-family:'Itim','Chakra Petch',sans-serif}
.wb-muted{color:#55556A}
.wb h2,.wb h3{color:var(--wb-ink)}

/* highlighter swipe behind text */
.wb-hl{background:linear-gradient(100deg,transparent 2%,var(--wb-hl) 4%,var(--wb-hl) 96%,transparent 98%) no-repeat 0 70%/100% 58%;padding:0 .15em;-webkit-box-decoration-break:clone;box-decoration-break:clone;color:inherit}
/* on the dark site (outside a board) the words switch to ink, so the band must cover the full
   line height — Thai vowel/tone marks above it would otherwise vanish into the dark page */
.wb-hl.on-page{color:#1E1E24;background-position:0 50%;background-size:100% 100%;padding:.02em .22em .06em;border-radius:6px 3px 7px 4px}

/* squiggly underline */
.wb-ul{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'%3E%3Cpath d='M0 5 Q5 0 10 5 T20 5 T30 5 T40 5' fill='none' stroke='%231E9E5A' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 100%/24px 8px;padding-bottom:9px}
.wb-ul.red{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'%3E%3Cpath d='M0 5 Q5 0 10 5 T20 5 T30 5 T40 5' fill='none' stroke='%23D93A3A' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E")}

/* marker circle around a word */
.wb-circle{position:relative;display:inline-block;padding:0 .2em}
.wb-circle::after{content:"";position:absolute;inset:-6px -10px;border:3px solid var(--wb-red);border-radius:50% 45% 55% 48%/55% 50% 48% 52%;transform:rotate(-3deg);pointer-events:none}

/* sketchy boxes */
.wb-box{background:#fff;border:3px solid var(--wb-ink);border-radius:14px 4px 12px 6px/6px 12px 4px 14px;padding:18px;box-sizing:border-box;position:relative}
.wb-box.blue{border-color:var(--wb-blue)}.wb-box.green{border-color:var(--wb-green)}.wb-box.orange{border-color:var(--wb-orange)}.wb-box.red{border-color:var(--wb-red)}
.wb-num{position:absolute;top:-18px;left:-14px;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Press Start 2P',monospace;font-size:14px;background:var(--wb-blue)}
.wb-num.green{background:var(--wb-green)}.wb-num.orange{background:var(--wb-orange)}

/* sticky notes */
.wb-sticky{position:relative;display:inline-block;background:var(--wb-hl);color:var(--wb-ink);padding:14px 16px 16px;font-family:'Itim',sans-serif;font-size:17px;line-height:1.45;box-shadow:2px 6px 10px rgba(0,0,0,.18);transform:rotate(-2deg);max-width:260px;box-sizing:border-box}
.wb-sticky::before{content:"";position:absolute;top:-10px;left:50%;width:64px;height:20px;transform:translateX(-50%) rotate(2deg);background:rgba(255,255,255,.55);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.wb-sticky.pink{background:#FFB3C9}.wb-sticky.blue{background:#B9DCFF}.wb-sticky.green{background:#C4F0B8}
.wb-sticky.r{transform:rotate(2.5deg)}
.wb-sticky strong{font-family:'Sriracha',cursive;font-weight:400;font-size:1.15em;display:block;margin-bottom:2px}

/* hand-drawn list marks */
.wb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.wb-list li{position:relative;padding-left:32px;line-height:1.5}
.wb-list li::before{position:absolute;left:0;top:-2px;font-family:'Sriracha',cursive;font-size:22px;line-height:1}
.wb-list.check li::before{content:"✓";color:var(--wb-green)}
.wb-list.cross li::before{content:"✗";color:var(--wb-red)}
.wb-list.dot li::before{content:"•";color:var(--wb-blue)}

/* arrows (inline SVG with class wb-draw get a draw-on stroke animation) */
.wb-arrow{display:block;overflow:visible}
.wb-arrow path{fill:none;stroke:var(--wb-ink);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.wb-arrow.red path{stroke:var(--wb-red)}.wb-arrow.blue path{stroke:var(--wb-blue)}.wb-arrow.green path{stroke:var(--wb-green)}
.wb-arrow.on-dark path{stroke:#FFE45C}

/* image framed on the board */
.wb-img{display:block;width:100%;height:auto;border-radius:12px 4px 10px 6px/6px 10px 4px 12px;box-shadow:4px 6px 0 rgba(0,0,0,.15)}

/* floating annotation (desktop only — on phones it would cover content) */
.wb-annot{position:absolute;z-index:3;pointer-events:none;display:flex;align-items:flex-end;gap:4px}
.wb-annot .wb-sticky{pointer-events:auto}
@media (max-width:900px){.wb-annot{display:none}}

/* ---------- scroll reveal: only when JS has marked the page, so no-JS still sees everything */
html.wb-js .wb-reveal{opacity:0;transform:translateY(14px) rotate(var(--wb-rot,0deg));transition:opacity .5s ease,transform .5s ease}
html.wb-js .wb-reveal.wb-in{opacity:1;transform:translateY(0) rotate(var(--wb-rot,0deg))}
html.wb-js .wb-reveal.wb-sticky{--wb-rot:-2deg}
html.wb-js .wb-reveal.wb-sticky.r{--wb-rot:2.5deg}
html.wb-js .wb-draw path{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);transition:stroke-dashoffset 1.1s ease .15s}
html.wb-js .wb-draw.wb-in path{stroke-dashoffset:0}
html.wb-js .wb-hl.wb-reveal{opacity:1;transform:none;background-size:0% 58%;transition:background-size .8s ease .2s}
html.wb-js .wb-hl.wb-reveal.wb-in{background-size:100% 58%}
/* on-page: keep the page's text colour until the band has swiped across, then switch to ink */
html.wb-js .wb-hl.on-page.wb-reveal{color:inherit;background-size:0% 100%;transition:background-size .8s ease .2s,color .2s ease .7s}
html.wb-js .wb-hl.on-page.wb-reveal.wb-in{color:#1E1E24;background-size:100% 100%}
@media (prefers-reduced-motion: reduce){
  html.wb-js .wb-reveal,html.wb-js .wb-reveal.wb-in{opacity:1;transform:rotate(var(--wb-rot,0deg));transition:none}
  html.wb-js .wb-draw path{stroke-dashoffset:0;transition:none}
  html.wb-js .wb-hl.wb-reveal{background-size:100% 58%;transition:none}
  html.wb-js .wb-hl.on-page.wb-reveal{background-size:100% 100%;color:#1E1E24;transition:none}
}

/* homepage explainer: problem → solution; stacks with a downward arrow on phones */
@media (max-width:820px){
  .wb-explain-grid{grid-template-columns:minmax(0,1fr) !important}
  .wb-explain-arrow{transform:rotate(90deg);margin:-6px auto}
}

/* layout helpers */
.wb-row{display:flex;flex-wrap:wrap;gap:20px;align-items:stretch}
.wb-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
@media (max-width:640px){.wb{padding:20px 16px}.wb-sticky{max-width:100%}}

/* hand-drawn doodles (templates/_wb.html) */
.wb-doodle{display:block;flex:none;overflow:visible;max-width:100%;height:auto}
.wb-doodle path{fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.wb-doodle .acc{stroke:var(--wb-red)}
.wb-doodle.blue .acc{stroke:var(--wb-blue)}.wb-doodle.green .acc{stroke:var(--wb-green)}.wb-doodle.orange .acc{stroke:var(--wb-orange)}
.wb-doodle.hl .acc{stroke:var(--wb-hl)}
.wb-doodle.lime .acc{stroke:var(--lime)}

/* collapsible "how to read this page" board */
.wb-guide{padding:18px 22px}
.wb-guide>summary{cursor:pointer;font-size:22px;list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.wb-guide>summary::-webkit-details-marker{display:none}
.wb-guide-hint{font-size:15px}
.wb-guide .when-open,.wb-guide[open] .when-closed{display:none}
.wb-guide[open] .when-open{display:inline}
.wb-guide-body{display:flex;gap:22px;align-items:center;margin-top:18px}
.wb-guide-pic{flex:none;padding:0 6px}
.wb-guide-notes{flex:1;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.wb-guide-notes .wb-sticky{max-width:none}
@media (max-width:640px){.wb-guide-body{flex-direction:column;align-items:stretch}.wb-guide-pic{align-self:center}.wb-guide>summary{font-size:19px}}

/* page header with a doodle beside the title */
.wb-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px}
.wb-head>.wb-doodle{color:var(--text3)}
@media (max-width:640px){.wb-head>.wb-doodle{display:none}}

/* small board used as a call-to-action box on dark pages */
.wb-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px}
.wb-cta .btn{font-family:'Chakra Petch',sans-serif}
@media (max-width:640px){.wb-head-pic{display:none !important}}