/* Vonk — Working with Data: the runner page (lab/data/runner.js).
 * Task panel on the left, GRID on the right; together they fit a 1366×660
 * laptop without the page scrolling. Under 900px they stack. */
.pagebar{padding-top:10px; padding-bottom:4px;}
.pagebar h1{font-size:clamp(17px,1.7vw,21px);}
.pagebar h1 .sep{color:var(--muted); font-weight:400;}
.pagebar h1 #acttitle{font-family:var(--font-body); font-weight:600; font-size:.8em; color:var(--muted);}

/* The page fits the window: topbar, pagebar, work area, a one-line footer. */
body{height:100dvh; min-height:560px; display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; overflow:hidden;}
/* the lab's "work in progress" strip is one more row above the page bar */
body:has(> .devnote){grid-template-rows:auto auto auto minmax(0,1fr) auto;}
/* in the app's grid the page bar would shrink to its words and float: full width, as on the other lab pages */
body > .pagebar{width:100%; box-sizing:border-box;}
.wd{display:grid; grid-template-columns:minmax(300px,30%) minmax(0,1fr); gap:14px; padding:12px clamp(10px,1.4vw,20px) 4px; min-height:0;}
.wd-panel{overflow:auto; min-height:0; padding:4px 6px 16px 2px; display:flex; flex-direction:column; gap:12px;}
.wd-grid{min-height:0; display:flex;}
.wd-grid .grid-app{flex:1;}
.wd-foot{padding:2px 20px 8px; margin:0; font-size:12.5px; color:var(--muted); text-align:right; max-width:none;}

.wd-head h2, .wd-panel > h2{font-family:var(--font-display); font-weight:600; color:var(--navy); font-size:clamp(22px,2vw,28px); line-height:1.2; margin:0;}
.wd-meta{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 4px; font:700 11.5px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing:.06em; text-transform:uppercase;}
.wd-id{color:var(--navy);}
.wd-lv{padding:3px 8px; border-radius:999px; color:#fff;}
.wd-lv.lv-B{background:var(--teal);} .wd-lv.lv-I{background:#B07A00;} .wd-lv.lv-A{background:var(--rust);}
.wd-tm{color:var(--muted);}
.wd-q{font-size:16.5px; line-height:1.5;}
.wd-q p{margin:0 0 8px;}
.wd-pred{margin:0; font-size:14px; color:var(--muted); background:#fff; border-radius:10px; padding:6px 10px; box-shadow:0 0 0 1.5px var(--line);}
.wd-pred b{color:var(--navy);}

.wd-card{background:#fff; border-radius:14px; padding:12px 14px; box-shadow:0 0 0 1.5px var(--line), 0 6px 16px rgba(5,41,80,.06);}
.wd-card h3{margin:0 0 6px; font:800 11.5px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing:.12em; text-transform:uppercase; color:#8A6400;}
.wd-card h4{margin:12px 0 4px; font-size:14px; color:var(--navy);}
.wd-card p{margin:0 0 8px; font-size:15.5px;}
.wd-small{font-size:13.5px !important; color:var(--muted);}
.wd-steps{margin:0; padding-left:1.3em; font-size:15.5px;}
.wd-steps li{margin:4px 0;}
.wd-steps code, .wd-q code, .wd-card code{font:13.5px ui-monospace, Menlo, Consolas, monospace; background:var(--warm); padding:1px 5px; border-radius:5px;}
.wd-text{width:100%; font:15px/1.4 var(--font-body); border:1.5px solid var(--line); border-radius:8px; padding:6px 8px; resize:vertical; margin-bottom:8px;}
.wd-opts{display:flex; flex-direction:column; gap:6px; margin:4px 0 8px;}
.wd-opt{border:none; border-radius:10px; padding:9px 12px; text-align:left; cursor:pointer; font:600 15px/1.3 var(--font-body); color:var(--navy); background:var(--warm); box-shadow:inset 0 0 0 1.5px var(--line);}
.wd-opt:hover, .wd-opt:focus-visible{box-shadow:inset 0 0 0 2px var(--gold);}
.wd-opt.on{box-shadow:inset 0 0 0 2px var(--navy);}
.wd-go{align-self:flex-start; border:none; border-radius:999px; padding:10px 18px; font:700 15px/1 var(--font-body); color:#fff; background:var(--orange); box-shadow:0 3px 0 #A8431A; cursor:pointer;}
.wd-go:active{transform:translateY(2px); box-shadow:0 1px 0 #A8431A;}
.wd-check{background:var(--navy); box-shadow:0 3px 0 #021327;}
.wd-link{border:none; background:none; color:var(--muted); font-size:14px; font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:6px 0; align-self:flex-start;}
.wd-row{display:flex; flex-wrap:wrap; align-items:center; gap:10px;}
.wd-num{width:120px; font:16px/1 var(--font-body); border:1.5px solid var(--line); border-radius:8px; padding:8px;}

.wd-results{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
.wd-results li{display:flex; gap:8px; align-items:flex-start; background:#fff; border-radius:10px; padding:7px 10px; font-size:14.5px;}
.wd-results li .mk{font-weight:800; width:1.1em; flex:none;}
.wd-results li.ok{box-shadow:inset 0 0 0 2px #9ED8B7; background:#F1FAF5;} .wd-results li.ok .mk{color:#137A47;}
.wd-results li.no{box-shadow:inset 0 0 0 2px #F3B7B9; background:#FFF6F6;} .wd-results li.no .mk{color:#B4232A;}
.wd-results .hint{color:var(--muted); font-weight:400;}
.wd-good{margin:0; font-weight:700; color:#137A47;} .wd-notyet{margin:0; font-weight:600; color:#B4232A;}
.wd-collide{box-shadow:0 0 0 3px var(--gold), 0 8px 22px rgba(242,173,32,.25);}
.wd-collide h3{color:var(--navy); font:700 19px/1.3 var(--font-display); letter-spacing:0; text-transform:none;}
.wd-fb{margin:8px 0 0 !important;} .wd-fb.ok{color:#137A47;} .wd-fb.no{color:#B4232A; font-weight:600;}
.wd-code{display:flex; align-items:baseline; gap:10px; margin:4px 0 !important;}
.wd-code span{font-size:14px; color:var(--muted);}
.wd-code b{font:800 26px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing:.08em; color:var(--navy);}
.wd-missing{font-weight:600; color:#B4232A;}
.wd-panel .tut-invite{align-items:flex-start; margin:4px 0 0;}

/* the tutorial's little spreadsheet */
.wd-mini{width:100%; max-width:420px; height:190px; display:flex;}
.wd-mini .grid-app{flex:1; font-size:13px;}
.wd-mini .g-tools, .wd-mini .g-status{display:none;}
.wd-tutcheck{display:flex; flex-direction:column; gap:10px; align-items:flex-start; width:100%; max-width:380px;}

.wd-print{display:none;}
@media print{
  .bar, .wd, .wd-foot{display:none !important;}
  .wd-print{display:block; padding:20mm; font-family:var(--font-body);}
  .wd-print h1{font-family:var(--font-display); color:var(--navy);}
  .wd-print .big{font-size:22pt; font-weight:800;}
}
@media (max-width:900px){
  body{height:auto; overflow:visible; display:block;}
  .wd{grid-template-columns:1fr;}
  .wd-grid{height:70dvh;}
}
/* on a phone the activity's own heading says which activity this is */
@media (max-width:640px){ .bar h1 .sep, .bar h1 #acttitle{display:none;} }
.wd-predict .wd-go{margin-right:14px;}

/* ---------- the index (/lab/data/ with no activity) ---------- */
.wdi{display:none;}
body.wd-index{height:auto; overflow:visible; display:block;}
body.wd-index .wd{display:none;}
body.wd-index .wdi{display:block; max-width:1200px; margin:0 auto; padding:clamp(16px,3vw,36px);}
.wdi-head h2{font-family:var(--font-display); font-weight:600; color:var(--navy); font-size:clamp(28px,3vw,40px); margin:0 0 6px;}
.wdi-lead{font-size:clamp(17px,1.6vw,20px); max-width:62ch; margin:0 0 14px;}
.wdi-cta{display:flex; flex-wrap:wrap; align-items:center; gap:16px;}
.wdi-cta .wd-go{text-decoration:none;}
.wdi-cta .tut-invite{margin:0; align-items:flex-start;}
.wdi-levels{display:flex; flex-wrap:wrap; gap:6px; margin:24px 0 6px;}
.wdi-lv{border:none; border-radius:999px; padding:7px 14px; font:700 14px/1 var(--font-body); color:var(--navy); background:#fff; box-shadow:inset 0 0 0 1.5px var(--line); cursor:pointer;}
.wdi-lv[aria-pressed="true"]{background:var(--navy); color:#fff; box-shadow:none;}
.wdi-sid{font:800 13px/1 ui-monospace, Menlo, Consolas, monospace; color:#fff; background:var(--navy); border-radius:7px; padding:5px 8px;}
/* the strands as cards, each with its own color (--ac), like the lab's
   category cards: tap one to open it */
.wds-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin-top:16px;}
.wds-card{position:relative; display:flex; flex-direction:column; gap:6px; background:#fff; border-radius:18px; padding:14px 16px 13px;
          text-decoration:none; color:var(--ink); border-top:6px solid var(--ac);
          box-shadow:0 0 0 1.5px var(--line), 0 8px 20px rgba(5,41,80,.07); transition:transform .15s ease, box-shadow .15s ease;}
.wds-card:hover, .wds-card:focus-visible{transform:translateY(-2px); box-shadow:0 0 0 1.5px var(--line), 0 12px 26px rgba(5,41,80,.16);}
.wds-sid{align-self:flex-start; font:800 13px/1 ui-monospace, Menlo, Consolas, monospace; color:#fff; background:var(--ac); border-radius:7px; padding:5px 8px;}
.wds-card h3{margin:2px 0 0; font-family:var(--font-display); font-weight:600; font-size:20px; line-height:1.25; color:var(--navy);}
.wds-count{margin:0; font:600 12.5px/1.3 var(--font-body); color:var(--muted);}
.wds-open{margin-top:auto; padding-top:6px; font-weight:700; font-size:14px; color:var(--ac);}
.wds-back{display:inline-block; margin:14px 0 4px; font-weight:600; color:var(--navy); text-decoration:none; font-size:15px;}
.wds-back:hover{color:var(--orange);}
.wds-head{background:#fff; border-radius:18px; padding:12px 18px 14px; margin-top:14px; border-top:6px solid var(--ac);
          box-shadow:0 0 0 1.5px var(--line), 0 8px 20px rgba(5,41,80,.07);}
.wds-head .wds-k{margin:0; font:800 11px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--ac);}
.wds-head h3{font-family:var(--font-display); font-weight:600; color:var(--navy); font-size:clamp(22px,2.4vw,30px); margin:4px 0; display:flex; align-items:center; gap:10px;}
.wds-head .wdi-sid{background:var(--ac);}
.wds-head .wds-count{font-size:13.5px;}
.wdi-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:13px; margin-top:14px;}
/* the activity cards wear the strand's color too: same rounded shape as the
   strand cards, the id as a chip, the open pill in the accent */
.wdi-card{background:#fff; border-radius:18px; padding:12px 14px; border-top:6px solid var(--ac, var(--orange));
          box-shadow:0 0 0 1.5px var(--line), 0 8px 20px rgba(5,41,80,.07); display:flex; flex-direction:column; gap:5px;
          opacity:.72; transition:transform .15s ease, box-shadow .15s ease;}
.wdi-card.is-live{opacity:1;}
.wdi-card.is-live:hover, .wdi-card.is-live:focus-within{transform:translateY(-2px); box-shadow:0 0 0 1.5px var(--line), 0 12px 26px rgba(5,41,80,.15);}
.wdi-card .wd-id{color:#fff; background:var(--ac, var(--navy)); border-radius:7px; padding:4px 7px;}
.wdi-card.is-chal{background:var(--warm);}
.wdi-card h4{margin:0; font-size:16px; line-height:1.3; color:var(--navy);}
.wdi-links{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:auto 0 0; padding-top:4px; font-size:14px;}
.wdi-open{background:var(--ac, var(--orange)); color:#fff; font-weight:700; text-decoration:none; padding:5px 12px; border-radius:999px;}
.wdi-pdf{color:var(--navy); font-weight:600;}
.wdi-plan{color:var(--muted); font-size:13px;}
.wd-lv.lv-X{background:var(--navy);}
body.wd-index .bar h1 .sep{display:none;}

/* ---------- the guided lesson (lab/data/tour.js) ----------
 * A spotlight that dims everything around the target but does not block it:
 * the pupil clicks and types in GRID itself. */
.tour-spot{position:fixed; z-index:90; border-radius:8px; pointer-events:none; box-shadow:0 0 0 3px var(--gold), 0 0 0 9999px rgba(3,24,47,.42);
  transition:left .12s ease, top .12s ease, width .12s ease, height .12s ease;}
.tour-spot.waiting{box-shadow:0 0 0 3px var(--orange), 0 0 18px 4px rgba(237,98,41,.55), 0 0 0 9999px rgba(3,24,47,.42); animation:tourPulse 1.6s ease-in-out infinite;}
.tour-spot.none{box-shadow:0 0 0 9999px rgba(3,24,47,.42);}
@keyframes tourPulse{50%{box-shadow:0 0 0 3px var(--orange), 0 0 28px 8px rgba(237,98,41,.35), 0 0 0 9999px rgba(3,24,47,.42);}}
.tour-mark{position:fixed; z-index:91; display:none; border-radius:6px; pointer-events:none; box-shadow:0 0 0 3px var(--orange), 0 0 14px 3px rgba(237,98,41,.45);}
.tour-bub{position:fixed; z-index:95; background:#fff; border-radius:14px; padding:12px 14px; box-shadow:0 0 0 2px var(--gold), 0 14px 36px rgba(0,0,0,.3); display:flex; flex-direction:column; gap:8px;}
.tour-bub.waiting{box-shadow:0 0 0 2px var(--orange), 0 14px 36px rgba(0,0,0,.3);}
.tour-top{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.tour-kick{font:800 10.5px/1 ui-monospace, Menlo, monospace; letter-spacing:.12em; text-transform:uppercase; color:#8A6400;}
.tour-bub.waiting .tour-kick{color:var(--orange);}
.tour-skip{border:none; background:none; color:var(--muted); font:600 12.5px var(--font-body); text-decoration:underline; cursor:pointer; padding:2px;}
.tour-say{margin:0; font-size:15.5px; line-height:1.45;}
.tour-say code{font:13.5px ui-monospace, Menlo, monospace; background:var(--warm); padding:1px 5px; border-radius:5px;}
.tour-nav{display:flex; align-items:center; justify-content:flex-end; gap:8px;}
.tour-back{border:none; background:none; color:var(--navy); font:600 14px var(--font-body); cursor:pointer; margin-right:auto;}
.tour-next{border:none; border-radius:999px; padding:8px 16px; font:700 14px var(--font-body); color:#fff; background:var(--orange); box-shadow:0 3px 0 #A8431A; cursor:pointer;}
.tour-next:disabled{background:#C9C3B6; box-shadow:none; cursor:default;}
.tour-did{font:700 14px var(--font-body); color:#137A47;}
@media (prefers-reduced-motion:reduce){ .tour-spot{transition:none; animation:none;} }
.wd-panel, .wd-grid{min-width:0;}
/* strand P: the script panel docks under the grid, so the page scrolls rather than squeezing either */
body.has-script{height:auto; overflow:visible; display:block;}
body.has-script .wd{min-height:calc(100dvh - 60px);}
body.has-script .wd-grid{height:clamp(720px, 112dvh, 860px);}
body.has-script .wd-panel{max-height:calc(100dvh - 70px); position:sticky; top:8px; align-self:start;}
.wd-panel code, .tour-say code{overflow-wrap:anywhere;}

/* ---- picture cards (owner, 2026-10-09: "match the bit lab card layout, the
   horizontal design with a picture and a description"): the drawn picture
   (lab/data/art.js) left, the words right; two to a row on a wide screen,
   the picture on top on a phone ---- */
.wds-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,520px),1fr));}
.wds-card.has-pic{display:grid; grid-template-columns:minmax(0,52%) minmax(0,1fr); gap:16px; align-items:center; padding:12px;}
.wds-card .wd-art-head, .wds-head .wd-art-head{border-radius:12px;}
.wds-body{display:flex; flex-direction:column; gap:6px; min-width:0; height:100%; justify-content:center;}
.wds-card.has-pic .wds-open{margin-top:6px;}
.wds-head.has-pic{display:grid; grid-template-columns:minmax(0,52%) minmax(0,1fr); gap:22px; align-items:center; padding:14px;}
.wdi-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,520px),1fr)); gap:16px;}
.wdi-card.has-pic{display:grid; grid-template-columns:minmax(0,44%) minmax(0,1fr); gap:16px; align-items:start; padding:12px;}
.wdi-card .wd-art{border-radius:11px; box-shadow:0 8px 22px -14px rgba(5,41,80,.5);}
.wdi-body{display:flex; flex-direction:column; gap:6px; min-width:0; height:100%;}
.wdi-card h4{font-family:var(--font-display); font-weight:600; font-size:19px; line-height:1.25;}
.wdi-d{margin:0; font-size:14px; line-height:1.45; color:var(--ink);}
.wdi-card.has-pic .wdi-links{margin-top:auto;}
@media (max-width:640px){
  .wds-card.has-pic, .wds-head.has-pic, .wdi-card.has-pic{grid-template-columns:1fr; gap:10px;}
}

/* strand P: extension badge and the divider before the extension cards */
.wd-ext{padding:3px 8px; border-radius:999px; color:#52306B; border:1.5px solid #52306B; background:#fff;}
.wdi-exthead{grid-column:1/-1; margin:18px 0 2px; padding-top:14px; border-top:2px dashed rgba(5,41,80,.18);}
.wdi-exthead h4{margin:0 0 4px; font-size:17px; color:var(--navy);} .wdi-exthead p{margin:0; color:var(--slate); font-size:14.5px;}
.wd-maplink{font:700 15px/1 var(--font-body); color:var(--navy); text-decoration:underline; text-underline-offset:4px;} .wd-maplink:hover{color:var(--orange);}
/* a lesson step that shows a skill card can be taller than a laptop screen:
   the bubble scrolls, and Back / Next stay pinned at its foot (2026-10-09) */
.tour-bub{max-height:calc(100vh - 16px); overflow-y:auto; overscroll-behavior:contain;}
.tour-bub .tour-nav{position:sticky; bottom:-12px; margin:0 -14px -12px; padding:8px 14px 12px; background:#fff; border-top:1px solid rgba(5,41,80,.08);}
/* a topic card lists its activities, each with its own time (2026-10-09) */
.wds-acts{list-style:none; margin:8px 0 10px; padding:0; display:grid; gap:2px; font:500 12.5px/1.35 var(--font-body); color:var(--ink);}
.wds-acts li{display:flex; justify-content:space-between; gap:10px; padding:3px 0; border-top:1px solid rgba(5,41,80,.08);}
.wds-acts .wds-an{min-width:0;}
.wds-acts .wds-am{color:var(--muted); white-space:nowrap; flex:none;}
.wd-min{color:var(--muted);}
/* the worked part as a guide, in the task panel (2026-10-09) */
.wd-guide{background:#F2F8F8; box-shadow:inset 0 0 0 1.5px #BFDDE0;}
.wd-guide h3{margin-bottom:4px;}
.wd-guide p{margin:0 0 6px;}
.wd-guide-list{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:3px;}
.wd-guide-row{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; width:100%; border:none; background:#fff; border-radius:8px; padding:6px 8px; text-align:left; cursor:pointer; font:14px/1.3 var(--font-body); color:var(--ink);}
.wd-guide-row:hover, .wd-guide-row:focus-visible{box-shadow:0 0 0 2px var(--gold); outline:none;}
.wd-guide-addr{font:700 12.5px/1 ui-monospace, Menlo, monospace; color:#fff; background:var(--teal); border-radius:5px; padding:3px 6px;}
.wd-guide-lab{font-weight:600; color:var(--navy);}
.wd-guide-row code{font:600 13px/1.3 ui-monospace, Menlo, monospace; color:var(--navy); overflow-wrap:anywhere;}
.wd-guide-val{color:var(--muted); font-variant-numeric:tabular-nums;}
.wd-guide-btn.nudge{animation:wdNudge 1.6s ease-in-out 2;}
@keyframes wdNudge{0%,60%,100%{transform:none;} 15%{transform:translateX(5px);} 30%{transform:translateX(-3px);} 45%{transform:translateX(2px);}}
@media (prefers-reduced-motion:reduce){ .wd-guide-btn.nudge{animation:none; text-decoration-thickness:2px;} }
.wd-guide-btn{display:inline-block;}
/* the Example sheet and the pupil's own sheet, one click apart (2026-10-09) */
.wd-guide .wd-guide-flip{margin-top:4px; background:var(--teal); box-shadow:0 3px 0 #08606A;}
.wd-guide .wd-guide-flip.is-back{background:var(--orange); box-shadow:0 3px 0 #A8431A;}
.wd-guide.on-example{box-shadow:inset 0 0 0 2px var(--orange); background:#FFF6EE;}
/* "In real life" (owner, 2026-10-09: tie every step back to computing): the
   activity's real-world line straight after the collision, and one line per
   topic. Same green as the games' real cards (.chatbox .msg.t.real). */
.wd-real{background:#E6F4F1; border-left:4px solid #137A6B; color:#0B3B36; border-radius:10px; padding:10px 14px;}
.wd-real p{margin:0;} .wd-real p + p{margin-top:2px;}
.wd-realk{font:800 10.5px/1.2 var(--font-body); letter-spacing:.12em; text-transform:uppercase; color:#137A6B; margin-bottom:4px !important;}
.wds-real{margin-top:10px; font-size:14px;}
/* the quiet pointer to Exercise 0, on every other activity and the sandbox */
.wd-ex0{margin:10px 0 0; font-size:14px;} .wd-ex0 a{color:var(--navy); font-weight:600; text-underline-offset:3px;}
/* the index: one column, in order, numbered (owner, 2026-10-09) */
.wdx-list{list-style:none; margin:22px auto 0; padding:0; max-width:980px; display:flex; flex-direction:column; gap:14px;}
.wdx-item{display:grid; grid-template-columns:64px minmax(0,1fr); gap:14px; align-items:center; scroll-margin-top:120px;}
.wdx-n{display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:var(--ac, var(--navy)); color:#fff; font:800 22px/1 var(--font-body); box-shadow:0 4px 12px -6px var(--ac, var(--navy));}
.wdx-card{display:grid; grid-template-columns:minmax(0,1fr); gap:20px; align-items:center; padding:14px 18px; border-radius:16px; background:#fff; color:inherit; text-decoration:none;
  box-shadow:0 0 0 1.5px var(--line), 0 6px 18px -12px rgba(5,41,80,.35); transition:box-shadow .15s ease, transform .15s ease;}
.wdx-card.has-pic{grid-template-columns:minmax(0,340px) minmax(0,1fr); padding:14px;}
.wdx-card .wd-art, .wdx-card svg{width:100%; height:auto; display:block; border-radius:12px;}
a.wdx-card:hover, a.wdx-card:focus-visible{box-shadow:0 0 0 2.5px var(--ac, var(--navy)), 0 10px 24px -12px rgba(5,41,80,.45); transform:translateY(-1px); outline:none;}
.wdx-k{margin:0 0 2px; font:700 12px/1 var(--font-body); letter-spacing:.06em; text-transform:uppercase; color:var(--ac, var(--navy));}
.wdx-body h3{margin:2px 0 8px; font-family:var(--font-display); font-weight:600; font-size:clamp(20px,1.9vw,24px); color:var(--navy);}
.wdx-body .wd-meta{margin:0 0 8px;}
.wdx-topic{padding:3px 8px; border-radius:999px; background:var(--ac, var(--navy)); color:#fff;}
.wdx-body .wdi-d{margin:0 0 10px; font-size:15px; color:var(--ink);}
.wdx-item.is-here .wdx-card{box-shadow:0 0 0 3px var(--gold), 0 10px 24px -12px rgba(5,41,80,.45);}
@media (max-width:760px){ .wdx-item{grid-template-columns:44px minmax(0,1fr); gap:10px;} .wdx-n{width:40px; height:40px; font-size:17px;} .wdx-card.has-pic{grid-template-columns:1fr;} }
.wd-exn{padding:3px 8px; border-radius:999px; background:var(--navy); color:#fff;}
/* hints, three levels from least to most (2026-10-09) */
.wd-hint{margin:10px 0;}
.wd-hint-ask{border:none; cursor:pointer; padding:8px 14px; border-radius:999px; font:700 14px/1 var(--font-body); color:#6B5415; background:#FFF1C9; box-shadow:inset 0 0 0 1.5px #F2AD20;}
.wd-hint-ask:hover, .wd-hint-ask:focus-visible{background:#F2AD20; color:var(--navy); outline:none;}
.wd-hint.is-open{padding:10px 12px 12px; border-radius:12px; background:#FFF8E6; box-shadow:inset 0 0 0 1.5px #F2AD20;}
.wd-hint-top{display:flex; align-items:baseline; gap:8px;}
.wd-hint-k{font:800 11.5px/1 var(--font-body); letter-spacing:.06em; text-transform:uppercase; color:#8A6400; white-space:nowrap;}
.wd-hint-for{flex:1; min-width:0; font-size:13px; color:var(--muted);}
.wd-hint-x{border:none; background:none; font-size:20px; line-height:1; color:#8A6400; cursor:pointer; padding:0 2px;}
.wd-hint-t{margin:6px 0 8px; font-size:15px; color:var(--ink);}
.wd-hint-t code{font:600 14px/1.3 ui-monospace, Menlo, monospace; color:var(--navy); background:#fff; padding:1px 4px; border-radius:4px;}
.wd-hint-more{border:none; cursor:pointer; padding:6px 12px; border-radius:999px; font:700 13.5px/1 var(--font-body); color:#fff; background:#B07A00;}
.wd-hint-more:hover, .wd-hint-more:focus-visible{background:#8A6400; outline:none;}
.wd-hint-end{font-size:13.5px; color:var(--muted);}
/* values given in a task step, as a small table (T1) */
.wd-given{border-collapse:collapse; margin:6px 0 2px; font-size:12.5px; width:100%;}
.wd-given th, .wd-given td{border:1px solid var(--line); padding:3px 5px; text-align:left; white-space:nowrap;}
.wd-given th{background:#F1F3F6; font-weight:600; color:var(--muted);} .wd-given td:first-child{font-weight:700;}
.wd-steps li:has(.wd-given){overflow-x:auto;}
/* the index's topics as collapsible sections (owner, 2026-10-09) */
.wdx-tools{display:flex; gap:16px; justify-content:flex-end; max-width:980px; margin:18px auto 0;}
.wdx-sec{max-width:980px; margin:12px auto 0; border-radius:18px; background:#fff; box-shadow:0 0 0 1.5px var(--line), 0 6px 18px -14px rgba(5,41,80,.4); overflow:hidden;}
.wdx-sum{display:flex; align-items:center; gap:16px; padding:12px 18px 12px 12px; cursor:pointer; list-style:none; border-left:6px solid var(--ac, var(--navy));}
.wdx-sum::-webkit-details-marker{display:none;}
.wdx-sum:hover, .wdx-sum:focus-visible{background:#F7F9FB; outline:none;}
.wdx-spic{flex:none; width:150px; border-radius:10px; overflow:hidden; line-height:0;}
.wdx-spic svg{width:100%; height:auto; display:block;}
.wdx-sbody{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;}
.wdx-sname{font-family:var(--font-display); font-weight:600; font-size:clamp(21px,2vw,26px); color:var(--navy);}
.wdx-srange{font:600 13.5px/1.2 var(--font-body); color:var(--muted);}
.wdx-chev{flex:none; font-size:22px; color:var(--ac, var(--navy)); transition:transform .2s ease;}
.wdx-sec[open] .wdx-chev{transform:rotate(180deg);}
.wdx-sec .wdx-list{margin:6px 18px 18px; max-width:none;}
.wdx-real{margin:4px 18px 0;}
@media (prefers-reduced-motion:reduce){ .wdx-chev{transition:none;} }
@media (max-width:760px){ .wdx-spic{width:96px;} }