/* Write It Do It course styles. Tokens, fonts, and components follow the
   Science Lab hub (andychin/science-lab, site/assets/lab.css); WiDi's own
   accent is purple. */
:root{
  --bg:#F7F7F4; --paper:#FFFFFF; --paper-alt:#EEF0EC; --line:#D9DDD6;
  --ink:#17202A; --ink-2:#3A4550; --muted:#56616B;
  --brand:#243B53; --accent:#6A3FB5; --accent-soft:#EFE9FA; --accent-ink:#FFFFFF;
  --focus:#9A4A24; --ok:#1F7A3E; --ok-soft:#E5F3EA; --bad:#A3271C; --bad-soft:#FBEAE7;
  --warn:#8A5A12; --warn-soft:#FBF1DF;
  --board:#FBFAF6; --board-line:#D8D4CB; --board-edge:#9C968A;
  --f-display:'Zilla Slab', Georgia, serif;
  --f-body:'Public Sans', system-ui, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, monospace;
  --r-card:16px; --r-ctl:10px;
  --shadow:0 1px 2px rgba(20,30,40,.05), 0 10px 26px rgba(20,30,40,.07);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#11151A; --paper:#1A2027; --paper-alt:#222A33; --line:#33404C;
    --ink:#EEF2F5; --ink-2:#D2DAE1; --muted:#A3AFBA;
    --brand:#A9C4E0; --accent:#B99BF0; --accent-soft:#2A2340; --accent-ink:#17121F;
    --focus:#E08A5E; --ok:#6FD195; --ok-soft:#16301F; --bad:#F09A8E; --bad-soft:#3A2220;
    --warn:#D9A15B; --warn-soft:#33281A;
    --board:#E9E5DC; --board-line:#C9C3B7; --board-edge:#8F897D;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 12px 30px rgba(0,0,0,.4);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#11151A; --paper:#1A2027; --paper-alt:#222A33; --line:#33404C;
  --ink:#EEF2F5; --ink-2:#D2DAE1; --muted:#A3AFBA;
  --brand:#A9C4E0; --accent:#B99BF0; --accent-soft:#2A2340; --accent-ink:#17121F;
  --focus:#E08A5E; --ok:#6FD195; --ok-soft:#16301F; --bad:#F09A8E; --bad-soft:#3A2220;
  --warn:#D9A15B; --warn-soft:#33281A;
  --board:#E9E5DC; --board-line:#C9C3B7; --board-edge:#8F897D;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 12px 30px rgba(0,0,0,.4);
  color-scheme:dark;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:16px; line-height:1.55;}
a{color:var(--brand);}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px;}
svg.icon{fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
[hidden]{display:none !important;}
.wrap{max-width:820px; margin:0 auto; padding:24px 16px 48px;}

/* header: matches Detective's Desk (hub link or back link on the left,
   account button on the right) */
.topbar, .backnav{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:18px; font-size:.82rem;}
.hub-link{display:inline-flex; align-items:center; min-height:44px; font-size:.86rem; font-weight:700; color:var(--accent); text-decoration:none;}
.backnav > a{display:inline-flex; align-items:center; min-height:44px; text-decoration:none; color:var(--muted); font-weight:600;}
.backnav > a:hover, .hub-link:hover{color:var(--accent);}
.acct-slot{margin-left:auto;}

/* account button and menu (same look as Detective's Desk's account-menu.js) */
.acct-slot{position:relative; display:inline-flex; align-items:center; font-size:.82rem; line-height:1.6;}
.acct-btn{display:inline-flex; align-items:center; gap:7px; max-width:190px; min-height:32px; padding:2px 9px 2px 2px; border:1px solid var(--line);
  border-radius:999px; background:var(--paper); color:var(--ink); font:inherit; font-weight:600; cursor:pointer;}
.acct-btn:hover, .acct-btn[aria-expanded=true]{border-color:var(--accent);}
.acct-av{flex:none; width:22px; height:22px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:inline-flex;
  align-items:center; justify-content:center; font-size:.72rem; font-weight:700; text-transform:uppercase;}
.acct-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.acct-caret{flex:none; font-size:.62rem; color:var(--muted);}
.acct-guest{flex:none; font-size:.66rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:0 6px; border-radius:999px; border:1px solid var(--line, #d6e3df); color:var(--muted);}
.acct-in{display:inline-block; padding:2px 12px; border:1px solid var(--line); border-radius:999px; background:var(--paper); color:var(--accent); font-weight:600; text-decoration:none;}
.acct-menu{position:absolute; top:calc(100% + 6px); right:0; z-index:60; min-width:210px; max-width:calc(100vw - 32px); padding:6px;
  background:var(--paper); border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 28px rgba(0,0,0,.16); text-align:left;}
.acct-head{padding:6px 10px 8px; margin-bottom:4px; border-bottom:1px solid var(--line);}
.acct-head b{display:block; color:var(--ink); font-size:.88rem; overflow-wrap:anywhere;}
.acct-head span{display:block; color:var(--muted); font-size:.76rem; overflow-wrap:anywhere;}
.acct-menu a{display:block; padding:7px 10px; border-radius:8px; color:var(--ink); font-weight:600; text-decoration:none;}
.acct-menu a:hover{background:var(--paper-alt);}
.acct-sep{height:1px; margin:4px 0; background:var(--line);}
@media (max-width:420px){ .acct-btn{max-width:140px;} }

/* headings and text */
h1{font-family:var(--f-display); font-weight:700; color:var(--brand); font-size:clamp(34px, 8vw, 48px); line-height:1.05; margin:0 0 10px;}
h2{font-family:var(--f-display); font-weight:700; color:var(--ink); font-size:26px; line-height:1.15; margin:0 0 10px;}
h3{font-family:var(--f-display); font-weight:700; font-size:19px; margin:18px 0 6px;}
.lede{font-size:18px; color:var(--ink-2); max-width:62ch; margin:0 0 26px;}
.kicker{display:block; font-family:var(--f-mono); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:4px;}
.section-label{display:flex; align-items:center; gap:9px; margin:30px 0 10px; font-family:var(--f-mono); font-size:12px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
.section-label .dot{width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none;}
code, pre, .mono{font-family:var(--f-mono);}
code{font-size:.9em; background:var(--accent-soft); color:var(--ink); padding:1px 5px; border-radius:5px; white-space:nowrap;}
pre{background:var(--paper-alt); border:1px solid var(--line); padding:10px 12px; border-radius:var(--r-ctl);
  white-space:pre-wrap; word-break:break-word; font-size:14px; margin:10px 0;}
.rule-note{font-size:14px; color:var(--muted); border-left:3px solid var(--accent); padding-left:10px;}
table.tok{border-collapse:collapse; width:100%; font-size:15px; margin:10px 0;}
table.tok th, table.tok td{border:1px solid var(--line); padding:6px 8px; text-align:left; vertical-align:top;}
table.tok th{background:var(--paper-alt);}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 18px;
  font:600 15px/1 var(--f-body); border-radius:var(--r-ctl); border:1px solid var(--line); background:var(--paper);
  color:var(--ink); cursor:pointer; text-decoration:none;}
.btn:hover{border-color:var(--accent);}
.btn:disabled{opacity:.45; cursor:not-allowed;}
.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
.btn-small{min-height:40px; padding:0 12px; font-size:14px;}
.btn-link{background:none; border:none; color:var(--brand); text-decoration:underline; padding:0 4px; min-height:40px; cursor:pointer; font:inherit;}

/* cards */
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card); padding:20px; box-shadow:var(--shadow);}
.module-card{display:flex; gap:14px; align-items:flex-start; text-decoration:none; color:inherit;}
a.module-card:hover{border-color:var(--accent);}
.module-num{flex:none; width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font:700 22px/1 var(--f-display); color:var(--accent); background:var(--paper-alt); border:1px solid var(--line);}
.module-card h3{margin:0 0 2px;}
.module-card p{margin:0; color:var(--ink-2); font-size:15px;}
.module-meta{margin-top:8px !important; font-size:13px !important; color:var(--muted) !important; font-family:var(--f-mono);}
/* home: hero with a live demo, an up-next card, and stages of module tiles */
.hero{display:grid; gap:20px; align-items:center; margin:6px 0 24px;}
.hero .lede{margin-bottom:0;}
@media (min-width:760px){ .hero{grid-template-columns:1.05fr 1fr; gap:28px;} }
.demo{margin:0; padding:14px;}
.demo-tag{margin:0 0 6px; font:600 11px var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--accent);}
.demo-text{margin:0 0 12px; min-height:calc(5 * 1.5em + 20px); font-size:13px; line-height:1.5; white-space:pre; overflow:hidden;}
.caret{display:inline-block; width:.55em; height:1.1em; margin-left:1px; vertical-align:-.2em; background:var(--accent); animation:caret 1s steps(1) infinite;}
@keyframes caret{50%{opacity:0;}}
.demo-board{padding:4px;}
.demo-board .board-svg{max-height:240px;}
.thumb{background:var(--paper-alt); border:1px solid var(--line); border-radius:12px; padding:6px;}
.thumb .board-svg{max-height:none;}
.up-next{display:grid; gap:16px; text-decoration:none; color:inherit; border:2px solid var(--accent); margin-bottom:8px;}
a.up-next:hover{box-shadow:0 6px 22px rgba(106,63,181,.18);}
.up-next h2{margin:2px 0 4px;}
.up-next p{margin:0; color:var(--ink-2);}
.up-next .btn{margin-top:14px;}
@media (min-width:640px){ .up-next{grid-template-columns:240px 1fr; align-items:center;} .up-next.is-all-done{grid-template-columns:1fr;} }
.stage{margin-top:34px;}
.stage-head{display:flex; flex-wrap:wrap; align-items:baseline; column-gap:12px; row-gap:2px; margin-bottom:12px;}
.stage-head h2{margin:0; font-size:24px;}
.stage-num{font:600 12px var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--accent);}
.stage-sub{color:var(--ink-2); font-size:15px;}
.stage-count{margin-left:auto; font:13px var(--f-mono); color:var(--muted);}
.stage-grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));}
/* Every stage uses the same 4-column tile size, so tiles match across
   stages; a stage with fewer tiles leaves space on the right. */
@media (min-width:561px){
  .stage-grid{grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px;}
  .stage-grid .mod-tile{padding:10px;}
  .stage-grid .mod-tile h3{font-size:16px;}
  .stage-grid .mod-tile p{font-size:14px;}
}
@media (min-width:561px) and (max-width:700px){ .stage-grid{grid-template-columns:repeat(2, minmax(0, 1fr));} }
/* The capstone: one wide card in the warm color, a flag, and what it pulls together. */
.stage.is-capstone .stage-num{color:var(--warn);}
.capstone-card{display:grid; gap:16px; padding:16px; text-decoration:none; color:inherit; border:2px solid var(--warn); background:var(--warn-soft);}
a.capstone-card:hover{box-shadow:0 6px 22px rgba(138,90,18,.18);}
.capstone-card .thumb{background:var(--paper);}
.capstone-card h3{margin:2px 0 4px; font-size:22px;}
.capstone-card p{margin:0; color:var(--ink-2);}
.capstone-card .cap-note{margin-top:8px; font-size:15px;}
.cap-kicker{display:inline-flex; align-items:center; gap:6px; font:600 12px var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--warn);}
.cap-kicker .flag{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
@media (min-width:640px){ .capstone-card{grid-template-columns:1fr 240px; align-items:center;} }
.mod-tile{display:flex; flex-direction:column; gap:10px; padding:12px; text-decoration:none; color:inherit;}
a.mod-tile:hover{border-color:var(--accent);}
.mod-tile h3{display:flex; align-items:flex-start; gap:8px; margin:0 0 4px;}
.mod-tile h3 .tile-num{flex:none; margin-top:-2px;}
.mod-tile p{margin:0; color:var(--ink-2); font-size:15px;}
.tile-num{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; background:var(--accent-soft); color:var(--accent); font:700 15px/1 var(--f-display);}
.done-row{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px;}
.done-chip{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:4px 14px 4px 8px; border-radius:999px; border:1px solid var(--line);
  background:var(--paper); color:var(--ink); text-decoration:none; font-weight:600; font-size:15px;}
.done-chip:hover{border-color:var(--accent);}
.done-chip .check{width:22px; height:22px; padding:3px; border-radius:50%; background:var(--ok); fill:none; stroke:var(--paper); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; flex:none;}
.chip-num{font:700 14px var(--f-mono); color:var(--muted);}
.done-chip .badge-done{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
@media (prefers-reduced-motion: reduce){ .caret{animation:none;} }
@media (max-width:560px){
  .stage-count{display:none;}
  .mod-tile{flex-direction:row; align-items:flex-start; gap:12px;}
  .mod-tile .thumb{flex:none; width:112px; padding:4px;}
  .mod-tile .tile-body{min-width:0; flex:1;}
  .mod-tile h3{font-size:17px;}
  .mod-tile p{font-size:14px;}
  .up-next .thumb{max-width:260px;}
  .demo-board .board-svg{max-height:200px;}
}
.meter{height:6px; background:var(--paper-alt); border-radius:99px; overflow:hidden; margin-top:8px; border:1px solid var(--line);}
.meter > span{display:block; height:100%; background:var(--accent);}
.badge-done{display:inline-block; font:600 11px/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--ok); background:var(--ok-soft); border-radius:99px; padding:4px 8px; margin-left:6px; vertical-align:middle;}

/* lesson player */
.progress{display:flex; align-items:center; gap:10px; margin:0 0 14px; font-size:14px; color:var(--muted);}
.progress .meter{flex:1; margin:0;}
.drawer{margin:0 0 16px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-ctl);}
.drawer summary{cursor:pointer; padding:10px 14px; font-weight:600; min-height:44px; display:flex; align-items:center;}
.drawer table{margin:0 14px 14px; width:calc(100% - 28px);}
.drawer .mod-tag{font:600 11px/1 var(--f-mono); color:var(--muted);}
.step h2{margin-top:0;}
.step .q{font-size:17px;}
.step-nav{display:flex; justify-content:space-between; gap:10px; margin-top:16px;}
.actions{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:12px 0 0;}
.save-warn{background:var(--warn-soft); color:var(--ink); border:1px solid var(--warn); border-radius:var(--r-ctl); padding:10px 14px; margin-bottom:14px; font-size:14px;}

.options{display:grid; gap:8px; margin:12px 0;}
.option{text-align:left; padding:12px 14px; min-height:44px; border-radius:var(--r-ctl); border:1px solid var(--line);
  background:var(--paper); color:var(--ink); font:inherit; cursor:pointer;}
.option:hover{border-color:var(--accent);}
.option.is-right{border-color:var(--ok); background:var(--ok-soft);}
.option.is-wrong{border-color:var(--bad); background:var(--bad-soft);}

.fb{border-radius:var(--r-ctl); padding:10px 14px; margin:12px 0 0; font-size:15px;}
.fb p{margin:4px 0;}
.fb ul{margin:4px 0; padding-left:20px;}
.fb-ok{background:var(--ok-soft); border:1px solid var(--ok);}
.fb-bad{background:var(--bad-soft); border:1px solid var(--bad);}
.fb-info{background:var(--accent-soft); border:1px solid var(--accent);}
.fb-title{font-weight:700;}
.reads-as{font-size:14px; color:var(--ink-2);}
.reads-as b{color:var(--ink);}

label.field{display:block; font-weight:600; font-size:14px; margin:12px 0 4px;}
textarea, input.line{width:100%; font:15px/1.5 var(--f-mono); padding:10px 12px; border-radius:var(--r-ctl);
  border:1px solid var(--line); background:var(--paper); color:var(--ink);}
textarea{min-height:150px; resize:vertical;}
textarea.short{min-height:80px; font-family:var(--f-body);}

.line-list{list-style:none; padding:0; margin:8px 0 0; font-size:14px;}
.line-list li{padding:6px 8px; border-left:4px solid var(--line); margin:4px 0; background:var(--paper-alt); border-radius:4px;}
.line-list li.ok{border-left-color:var(--ok);}
.line-list li.bad{border-left-color:var(--bad);}
.line-list li.amb{border-left-color:var(--warn);}
.line-list .src{font-family:var(--f-mono); display:block;}
.coach-read{display:block; font-size:13px; color:var(--ink-2); margin-top:4px;}
.fast{display:block; font-size:13px; color:var(--ink-2); margin-top:4px;}
.fb .fast{margin-top:6px;}
.tag{font:600 11px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.05em; margin-right:6px;}
.tag.ok{color:var(--ok);} .tag.bad{color:var(--bad);} .tag.amb{color:var(--warn);}

/* boards */
.board-pair{display:grid; grid-template-columns:1fr; gap:12px; margin:12px 0;}
@media (min-width:700px){ .board-pair.two{grid-template-columns:1fr 1fr;} }
.board-cap{font:600 12px/1.2 var(--f-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 0 4px;}
.board-wrap{background:var(--paper-alt); border:1px solid var(--line); border-radius:var(--r-ctl); padding:6px;}
.board-svg{display:block; width:100%; height:auto; max-height:420px;}
.board-svg .base{fill:var(--board); stroke:var(--board-edge); stroke-width:1.5;}
.board-svg .grid{stroke:var(--board-line); stroke-width:1;}
.board-svg .front-edge{stroke:var(--accent); stroke-width:6; stroke-linecap:round;}
.board-svg .edge-label{font:600 11px var(--f-mono); fill:var(--muted); letter-spacing:.06em;}
.board-svg .edge-label.is-front{fill:var(--accent);}
.board-svg .seat{fill:var(--ink-2);}
.board-svg .seat-label{font:600 12px var(--f-body); fill:var(--ink-2);}
.board-svg .piece .shape{stroke-width:1.5;}
.board-svg .piece-label{font:700 13px var(--f-mono); pointer-events:none;}
.board-svg .piece-label.is-thin{font-size:11px; paint-order:stroke; stroke:rgba(0,0,0,.25); stroke-width:2px;}
.board-svg .piece-label.is-airy{paint-order:stroke; stroke:var(--board); stroke-width:3px;}
.board-svg .pclip-wire{stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;}
.board-svg .piece.is-sel .pclip-wire, .board-svg .piece.is-hl .pclip-wire{stroke-width:3.4;}
.board-svg .piece.is-dim{opacity:.3;}
.board-svg .piece.is-hl .shape{stroke:var(--accent); stroke-width:4;}
.board-svg .piece.is-sel .shape{stroke:var(--focus); stroke-width:4; stroke-dasharray:6 3;}
.board-svg .piece[tabindex]{cursor:pointer;}
.board-svg .piece[tabindex]:focus{outline:none;}
.board-svg .piece[tabindex]:focus-visible .shape{stroke:var(--focus); stroke-width:4;}
.board-svg .ghost{fill:var(--accent); fill-opacity:.1; stroke:var(--accent); stroke-width:2; stroke-dasharray:5 4;}
.board-svg .ghost-tip{fill:var(--accent);}
.board-svg .base3d-top{fill:var(--board); stroke:var(--board-edge); stroke-width:1.2;}
.board-svg .base3d-front{fill:var(--board-edge);}
.board-svg .base3d-side{fill:var(--board-edge); opacity:.75;}
.views-row{display:grid; gap:10px; margin-top:10px;}
@media (min-width:640px){ .views-row{grid-template-columns:1fr 1fr;} }
.view-svg{max-height:260px;}
.board-svg .base.paper{fill:#FFFFFF; stroke:#B9BDB6; stroke-width:1.5; filter:drop-shadow(0 2px 3px rgba(0,0,0,.14));}
.board-svg .landmark{fill:none; stroke:#A0A6AD; stroke-width:1.5;}
.board-svg .landmark.is-hl{fill:var(--focus); stroke:var(--focus);}
.board-svg .mark-line{stroke-width:5; stroke-linecap:round;}
.board-svg .mark-line.is-dash{stroke-dasharray:10 8;}
.board-svg .mark-shape{stroke-width:4; stroke-linejoin:round;}
.board-svg .piece.is-sel .mark-shape{stroke-width:6;}
.board-svg .mark-hit{stroke:transparent; stroke-width:18; fill:transparent;}
.board-svg .piece.is-sel .mark-line{stroke-width:7;}
.board-svg .piece.is-sel .mark-hit{stroke:var(--focus); stroke-opacity:.3;}
.board-svg .ghost-wire{fill:none; stroke-width:4; stroke-linecap:round; stroke-linejoin:round;}
.board-svg .raise-shadow{fill:#000; opacity:.28;}
.board-svg .wire{fill:none; stroke-width:7; stroke-linecap:round; stroke-linejoin:round;}
.board-svg .wire-fuzz{fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1 3; opacity:.8; pointer-events:none;}
.board-svg .wire-hit{fill:none; stroke:transparent; stroke-width:20; stroke-linecap:round;}
.board-svg .piece.is-sel .wire-hit{stroke:var(--focus); stroke-opacity:.35; stroke-width:16;}
.board-svg .piece.is-hl .wire{stroke-width:9;}
.board-svg .piece.is-sel .wire-start{stroke:var(--focus); stroke-width:3;}
.board-svg .wire-label{fill:var(--ink); paint-order:stroke; stroke:var(--board); stroke-width:3px;}
.board-svg .join-tag{fill:#fff; stroke:#1A2027; stroke-width:1; opacity:.92; pointer-events:none;}
.board-svg .join-text{font:700 9px var(--f-mono); fill:#1A2027; pointer-events:none;}

/* builder */
.builder{display:grid; gap:10px; margin:12px 0;}
.tray{display:flex; flex-wrap:wrap; gap:6px;}
.tray-item{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:4px 10px; border-radius:var(--r-ctl);
  border:1px solid var(--line); background:var(--paper); color:var(--ink); font:14px var(--f-body); cursor:pointer;}
.tray-item.is-sel{border-color:var(--focus); box-shadow:0 0 0 2px var(--focus) inset;}
.tray-item .sw{width:14px; height:14px; border-radius:4px; border:1px solid rgba(0,0,0,.35); flex:none;}
.tray-id{font:700 14px var(--f-mono);}
.tray-name{font-family:var(--f-mono); color:var(--ink-2);}
.tray-state{font-size:12px; color:var(--muted);}
.tray-item.is-placed .tray-state{color:var(--ok);}
.board-wrap.is-builder{cursor:crosshair; touch-action:none; -webkit-user-select:none; user-select:none;}
.board-wrap.is-builder .piece{cursor:grab;}
.board-wrap.is-builder .piece.is-drag{cursor:grabbing; filter:drop-shadow(0 4px 6px rgba(0,0,0,.35));}
.board-svg .snap-preview{fill:none; stroke:var(--focus); stroke-width:2; stroke-dasharray:4 3; pointer-events:none;}
.tray-item{-webkit-user-select:none; user-select:none;}
/* controls: a d-pad and two round action buttons, like a game controller */
.ctl{display:flex; align-items:center; justify-content:center; gap:28px; padding:6px 0;}
.dpad{display:grid; grid-template-columns:repeat(3, 52px); grid-template-rows:repeat(3, 52px);
  grid-template-areas:". up ." "left mid right" ". down .";}
.dpad[hidden], .act-btn[hidden]{display:none;}
.dpad::before{content:""; grid-area:mid; background:var(--paper-alt); border:1px solid var(--line); border-radius:4px;}
.pad-btn{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
  background:var(--paper-alt); color:var(--ink); border:1px solid var(--line); cursor:pointer; padding:0;
  font:600 10px/1 var(--f-body); touch-action:manipulation; -webkit-user-select:none; user-select:none;}
.pad-btn svg{width:22px; height:22px; stroke-width:2.6;}
.pad-back{grid-area:up; border-radius:12px 12px 4px 4px; border-bottom:none;}
.pad-front{grid-area:down; border-radius:4px 4px 12px 12px; border-top:none;}
.pad-left{grid-area:left; border-radius:12px 4px 4px 12px; border-right:none;}
.pad-right{grid-area:right; border-radius:4px 12px 12px 4px; border-left:none;}
.pad-btn:active:not(:disabled), .act-btn:active:not(:disabled){transform:translateY(1px); filter:brightness(.92);}
.pad-btn:hover:not(:disabled){color:var(--accent);}
.pad-actions{display:flex; gap:14px; align-items:center;}
.act-btn{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  width:68px; height:68px; border-radius:50%; cursor:pointer; padding:0; touch-action:manipulation;
  font:700 11px/1 var(--f-body); -webkit-user-select:none; user-select:none;
  box-shadow:0 3px 0 rgba(0,0,0,.18);}
.act-btn svg{width:22px; height:22px; stroke-width:2.4;}
.act-turn{background:var(--accent); color:var(--accent-ink); border:1px solid var(--accent);}
.act-off{background:var(--paper); color:var(--bad); border:2px solid var(--bad);}
.act-join{background:var(--paper); color:var(--ink); border:2px solid var(--ink-2);}
.ctl.has-join .act-btn{width:60px; height:60px;}
@media (max-width:380px){ .ctl.has-join{gap:8px;} .ctl.has-join .pad-actions{gap:6px;} .ctl.has-join .dpad{grid-template-columns:repeat(3, 40px) !important; grid-template-rows:repeat(3, 40px) !important;} .ctl.has-join .act-btn{width:50px !important; height:50px !important; font-size:9px;} }
@media (max-width:440px){ .ctl.has-join{gap:12px;} .ctl.has-join .pad-actions{gap:8px;} .ctl.has-join .dpad{grid-template-columns:repeat(3, 44px); grid-template-rows:repeat(3, 44px);} .ctl.has-join .act-btn{width:56px; height:56px; font-size:10px;} }
.pad-btn:disabled, .act-btn:disabled{opacity:.4; cursor:not-allowed; box-shadow:none;}
@media (max-width:380px){ .ctl{gap:16px;} .dpad{grid-template-columns:repeat(3, 46px); grid-template-rows:repeat(3, 46px);} }
.mark-form{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; justify-content:center; font-size:15px;}
.mark-form[hidden]{display:none;}
.mark-form select{min-height:44px; padding:0 8px; border-radius:var(--r-ctl); border:1px solid var(--line); background:var(--paper); color:var(--ink); font:inherit;}
.readout{margin:0; font-size:14px; color:var(--ink-2); min-height:2.6em;}

/* order step: move lines up and down */
.order-list{list-style:none; margin:10px 0; padding:0; display:grid; gap:6px;}
.order-list li{display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--paper);}
.order-list .order-n{font:700 13px var(--f-mono); color:var(--muted); min-width:1.6em;}
.order-list code{flex:1; min-width:0; white-space:pre-wrap; word-break:break-word;}
.order-list button{min-width:44px; min-height:44px; border-radius:var(--r-ctl); border:1px solid var(--line); background:var(--paper-alt); color:var(--ink); cursor:pointer; font-size:18px;}
.order-list button:disabled{opacity:.35; cursor:not-allowed;}
.char-count{font-size:13px; color:var(--muted); margin:4px 0 0;}
.char-count.is-over{color:var(--bad); font-weight:600;}

footer{margin-top:40px; font-size:13px; color:var(--muted);}

@media print{
  body{background:#fff; color:#000;}
  .topbar, .progress, .drawer, .step-nav, .actions, .no-print, footer{display:none !important;}
  .card{box-shadow:none; border:none; padding:0;}
}
.stage.is-capstone .done-chip{border-color:var(--warn); background:var(--warn-soft);}
@media (max-width:639px){ .capstone-card .thumb{width:180px;} }

/* A coach's practice session (session.html) */
.ss-err{margin:0 0 14px; padding:10px 14px; border-radius:10px; background:var(--bad-soft); color:var(--bad); font-weight:600;}
.ss-err[hidden]{display:none;}
.ss-spin{display:inline-block; width:14px; height:14px; border:2px solid var(--line); border-top-color:var(--accent); border-radius:50%; vertical-align:-2px; animation:ss-spin .8s linear infinite;}
@keyframes ss-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){ .ss-spin{animation:none;} }
.ss-role{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:0 0 14px; color:var(--ink-2);}
.ss-badge{display:inline-block; padding:4px 12px; border-radius:999px; font-weight:700; font-size:15px; background:var(--accent); color:var(--accent-ink);}
.ss-badge.is-doer{background:var(--warn-soft); color:var(--warn); border:1px solid var(--warn);}
.ss-clockbox{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 14px; padding:12px 16px; border:2px solid var(--accent); border-radius:14px; background:var(--paper);}
.ss-clock-label{font-family:var(--f-mono); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
.ss-clock{font-family:var(--f-mono); font-size:40px; font-weight:700; line-height:1; color:var(--accent); font-variant-numeric:tabular-nums;}
.ss-clock.is-up{color:var(--bad);}
.ss-notes{display:block; width:100%; box-sizing:border-box; min-height:260px; padding:12px; font:15px/1.55 var(--f-mono); color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:10px; resize:vertical;}
.ss-notes:focus{outline:2px solid var(--accent); outline-offset:1px;}
.ss-notes[readonly]{background:var(--paper-alt);}
.ss-save{margin:8px 0 10px; font-size:14px; color:var(--muted);}
.ss-pre{margin:8px 0 0; padding:12px; white-space:pre-wrap; overflow-wrap:anywhere; font:15px/1.55 var(--f-mono); background:var(--paper-alt); border:1px solid var(--line); border-radius:10px;}
.ss-photos{display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:10px 0; padding:0;}
.ss-photos li{display:flex; flex-direction:column; gap:6px; align-items:flex-start;}
.ss-photo{display:block; width:160px; height:120px; padding:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--paper-alt); cursor:zoom-in;}
.ss-photo img{display:block; width:100%; height:100%; object-fit:cover;}
@media (max-width:560px){ .ss-photo{width:calc(50vw - 44px); height:calc((50vw - 44px) * .75);} }
.ss-file{position:relative; cursor:pointer;}
.ss-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.ss-2{display:grid; gap:16px; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);}
@media (max-width:640px){ .ss-2{grid-template-columns:1fr;} }
.ss-big{margin:4px 0; font:700 48px/1 var(--f-display); color:var(--accent);}
.ss-big span{font:600 18px var(--f-body, inherit); color:var(--ink-2);}
.ss-comment{margin:10px 0 0; padding:10px 14px; border-left:4px solid var(--accent); background:var(--paper-alt); border-radius:0 10px 10px 0;}
.ss-zoom{width:min(900px, calc(100vw - 24px)); padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--paper); color:var(--ink);}
.ss-zoom::backdrop{background:rgba(0,0,0,.5);}
.ss-zoom img{display:block; max-width:100%; max-height:75vh; margin:0 auto 10px; border-radius:8px;}
.ss-link{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 14px; padding:14px 16px; border:2px solid var(--warn); border-radius:14px; background:var(--warn-soft); color:inherit; text-decoration:none;}
.ss-link b{display:block; font-size:18px;}
.ss-link > span:first-child span{display:block; color:var(--ink-2);}
.ss-link .btn{flex:none;}
.ss-link .btn-primary{color:var(--accent-ink);}
/* The Writer's model photos: one big, thumbnails to switch. */
.ss-viewer{display:grid; gap:10px;}
.ss-photo.ss-main{width:100%; height:auto; aspect-ratio:4 / 3; max-height:70vh; background:var(--paper-alt);}
.ss-photo.ss-main img{object-fit:contain;}
.ss-thumbs{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0;}
.ss-thumb{display:block; width:84px; height:63px; padding:0; border:2px solid var(--line); border-radius:8px; overflow:hidden; background:var(--paper-alt); cursor:pointer;}
.ss-thumb img{display:block; width:100%; height:100%; object-fit:cover;}
.ss-thumb.is-on{border-color:var(--accent);}
.ss-ready{border:2px solid var(--accent);}
#view > .card, #view > .ss-2{margin-bottom:14px;}
#view .card h2{margin-top:0;}
#view .muted{color:var(--muted);}
/* The logo beside the home title: a Writer's note card with a built block. */
h1.brand{display:flex; align-items:center; gap:.3em;}
.brand-mark{flex:none; width:1.15em; height:1.15em;}

/* ---------- coach dashboard (coach.html) and practice sessions (coach-sessions.js) ---------- */
.coach-dash{max-width:1040px;}
.coach-dash .muted{color:var(--muted);}
.coach-dash .sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.coach-dash .spin{display:inline-block; width:14px; height:14px; border:2px solid var(--line); border-top-color:var(--accent); border-radius:50%; vertical-align:-2px; animation:ss-spin .8s linear infinite;}
.cd-group{margin:26px 0 0;}
.cd-group > .card h2{margin:0 0 12px;}
.cd-tiles{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; margin:0 0 16px;}
.cd-tile{padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--paper-alt);}
.cd-tile .k{font:600 11px var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted);}
.cd-tile .v{font:700 26px/1.2 var(--f-display); color:var(--ink);}
.cd-tile .s{font-size:13px; color:var(--muted);}
@media (max-width:640px){ .cd-tiles{grid-template-columns:repeat(2, minmax(0, 1fr));} }
.coach-dash .tablewrap{overflow-x:auto;}
.cd-table, .coach-dash .adm-table{width:100%; border-collapse:collapse; font-size:15px;}
.cd-table th, .coach-dash .adm-table th{text-align:left; font:600 11px var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:6px 10px 6px 0; border-bottom:1px solid var(--line);}
.cd-table td, .coach-dash .adm-table td{padding:8px 10px 8px 0; border-bottom:1px solid var(--line); vertical-align:middle;}
.cd-name{display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0; border:0; background:none; font:inherit; font-weight:600; color:var(--ink); cursor:pointer; text-align:left;}
.cd-name:hover{color:var(--accent);}
.cd-name span{font-size:12px; color:var(--muted);}
.cd-bar{display:inline-block; vertical-align:middle; width:90px; height:8px; border-radius:99px; background:var(--paper-alt); border:1px solid var(--line); overflow:hidden;}
.cd-bar i{display:block; height:100%; background:var(--accent);}
.cd-next{color:var(--ink-2); font-size:14px;}
.cd-detail td{background:var(--paper-alt);}
.cd-grid{display:grid; grid-template-columns:repeat(16, minmax(0, 1fr)); gap:4px; list-style:none; margin:4px 0 6px; padding:0;}
@media (max-width:640px){ .cd-grid{grid-template-columns:repeat(8, minmax(0, 1fr));} }
.cd-grid li{position:relative; height:34px; border:1px solid var(--line); border-radius:6px; background:var(--paper); overflow:hidden;}
.cd-grid .fill{position:absolute; left:0; right:0; bottom:0; background:var(--accent-soft);}
.cd-grid li.is-done .fill{background:var(--accent);}
.cd-grid .n{position:relative; display:flex; align-items:center; justify-content:center; height:100%; font:600 12px var(--f-mono); color:var(--ink);}
.cd-grid li.is-done .n{color:var(--accent-ink);}
.cd-legend{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:0; font-size:13px; color:var(--muted);}
.cd-legend .sw{display:inline-block; width:12px; height:12px; border:1px solid var(--line); border-radius:3px; background:var(--paper); margin-right:-6px;}
.cd-legend .sw.is-done{background:var(--accent);} .cd-legend .sw.is-part{background:var(--accent-soft);}
.cd-note{margin:10px 0 0; font-size:14px;}
/* sessions */
.coach-dash .ws-host{margin-top:14px;}
.coach-dash .adm-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card); padding:18px; box-shadow:var(--shadow); margin:0 0 14px;}
.coach-dash .adm-card h3{margin:0 0 6px; font-size:19px;}
.coach-dash .adm-card p{margin:0 0 8px;}
.coach-dash .row{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap;}
.coach-dash .acts{display:flex; gap:8px; flex-wrap:wrap;}
.coach-dash .dash-h{margin:0 0 2px; font-size:22px;}
.coach-dash .btn-sm{display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:0 14px; font:inherit; font-size:14px; font-weight:600;
  color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:var(--r-ctl); cursor:pointer; text-decoration:none;}
.coach-dash .btn-sm:hover{border-color:var(--accent);}
.coach-dash .btn-sm.primary{color:var(--accent-ink); background:var(--accent); border-color:var(--accent);}
.coach-dash .btn-sm.danger{color:var(--bad); background:var(--bad-soft); border-color:var(--bad-soft);}
.coach-dash .btn-sm:disabled{opacity:.55; cursor:not-allowed;}
.coach-dash .chips{display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0;}
.coach-dash .chips li{font-size:12px; font-weight:600; color:var(--ink-2); background:var(--paper-alt); border:1px solid var(--line); border-radius:999px; padding:1px 8px;}
.coach-dash .field{margin-bottom:14px;}
.coach-dash .field label{display:block; font:600 12px var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:6px;}
.coach-dash .field input{width:100%; box-sizing:border-box; min-height:44px; padding:0 12px; font:inherit; font-size:16px; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:var(--r-ctl);}
.coach-dash .dlg-btns{display:flex; justify-content:flex-end; gap:10px; margin-top:12px;}
.coach-dash .adm-dlg{border:1px solid var(--line); border-radius:var(--r-card); background:var(--paper); color:var(--ink); padding:16px;}
.coach-dash .adm-dlg::backdrop{background:rgba(0,0,0,.5);}
.coach-dash .adm-more{margin:20px 0 0;}
.coach-dash .fold > summary{cursor:pointer;}
.coach-dash .ws-err{margin:0 0 12px; padding:10px 14px; border-radius:var(--r-ctl); background:var(--bad-soft); color:var(--bad); font-weight:600;}
.coach-dash .ws-err[hidden]{display:none;}
.ws-list{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px;}
.ws-row{display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:56px; padding:10px 14px; text-align:left; font:inherit; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:12px; cursor:pointer;}
.ws-row:hover{border-color:var(--accent);}
.ws-row-main{display:flex; flex-direction:column; gap:2px; min-width:0;}
.ws-row-main .muted{font-size:14px;}
.ws-status{flex:none; font:600 11px var(--f-mono); letter-spacing:.06em; text-transform:uppercase; padding:3px 10px; border-radius:999px; background:var(--paper-alt); color:var(--muted); white-space:nowrap;}
.ws-status.is-open{background:var(--accent); color:var(--accent-ink);}
.ws-status.is-scoring{background:var(--warn-soft); color:var(--warn);}
.ws-status.is-done{background:var(--paper-alt); color:var(--ink);}
.ws-steps{margin:8px 0 0; padding-left:22px; font-size:15px; line-height:1.55;}
.ws-steps li{margin-bottom:4px;}
.ws-form textarea{width:100%; min-height:110px; padding:10px 12px; font:15px/1.5 var(--f-mono); color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:var(--r-ctl); box-sizing:border-box;}
.ws-3{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px;}
@media (max-width:560px){ .ws-3{grid-template-columns:1fr;} }
.coach-dash .ws-left{justify-content:flex-start;}
.ws-phases{display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:12px 0 0; padding:0;}
.ws-phases li{font-size:13px; font-weight:600; padding:4px 10px; border-radius:999px; border:1px solid var(--line); color:var(--muted);}
.ws-phases li.is-past{color:var(--ink-2); background:var(--paper-alt);}
.ws-phases li.is-now{color:var(--accent-ink); background:var(--accent); border-color:var(--accent);}
.ws-photos{display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:10px 0; padding:0;}
.ws-photos li{display:flex; flex-direction:column; gap:6px; align-items:flex-start;}
.ws-photo{display:block; width:150px; height:112px; padding:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--paper-alt); cursor:zoom-in;}
.ws-photo img{display:block; width:100%; height:100%; object-fit:cover;}
@media (max-width:560px){ .ws-photo{width:calc(50vw - 44px); height:calc((50vw - 44px) * .75);} }
.ws-file{position:relative; cursor:pointer;}
.ws-pairs{display:grid; gap:8px; margin:10px 0;}
.ws-pair{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:8px 0; border-bottom:1px solid var(--line);}
.ws-pair label{display:flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--ink-2);}
.ws-pair select, .ws-scoreform input{min-height:40px; padding:0 8px; font:inherit; font-size:15px; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:var(--r-ctl);}
.ws-pn{font:600 14px var(--f-mono); color:var(--muted); min-width:18px;}
.ws-acts{margin:10px 0 8px;}
.ws-remain{font-family:var(--f-mono); font-weight:600; color:var(--accent); font-variant-numeric:tabular-nums;}
.ws-2{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:16px; margin-top:10px;}
@media (max-width:700px){ .ws-2{grid-template-columns:1fr;} }
.ws-k{margin:0 0 4px; font:600 11px var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted);}
.ws-notes{margin:0; padding:10px 12px; max-height:320px; overflow:auto; white-space:pre-wrap; font:14px/1.5 var(--f-mono); background:var(--paper-alt); border:1px solid var(--line); border-radius:var(--r-ctl);}
.ws-key{margin-top:10px;}
.ws-scoreform{display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 14px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line);}
.ws-scoreform label{display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:600; color:var(--ink-2);}
.ws-scoreform input[type=number]{width:84px;}
.ws-comment{flex:1 1 220px;}
.ws-comment input{width:100%; box-sizing:border-box;}
.ws-zoom{width:min(900px, calc(100vw - 24px));}
.ws-zoom img{display:block; max-width:100%; max-height:75vh; margin:0 auto; border-radius:8px;}