/* The doodle engine's look, the Studio page (Claude Design 1d, 20 Oct): the top bar, the device sheet and its pen strip, the
   right-hand panel (whose turn, The pen, the question card, Your moves, the step's working parts), the step timeline, the
   bar, and the Explain frame. One column, and the page scrolls, under 1100 px (half the whiteboard). */
  :root { --ink:#15181d; --text2:#3b414c; --muted:#596170; --faint:#8d95a3; --faint2:#a3a9b4; --bg:#eceef1; --sheet:#ffffff; --dev:#f7f8fa;
    --well:#f4f5f7; --line:#d9dbe0; --devline:#cfd3da; --rule:#cfd2d8; --rowrule:#eef0f3; --top:#15181d; --toptext:#aab1bd;
    --accent:#2a55c9; --soft:#e6ecfb; --ok:#1f7a5a; --done:#bfc8d8; --kick:#8a6d3b;
    --sans:"Public Sans", system-ui, sans-serif; --mono:"JetBrains Mono", ui-monospace, monospace; --hand:Caveat, cursive;
    --glide:cubic-bezier(.3,.7,.2,1) }
  * { box-sizing:border-box; margin:0 }
  body { background:var(--bg); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased }
  button { font-family:inherit }
  button:focus-visible, a:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid var(--accent); outline-offset:2px }
  [hidden] { display:none !important }

  /* ---------- the page: a column the height of the screen ---------- */
  .studio { height:100vh; display:flex; flex-direction:column; overflow:hidden }
  .topbar { flex:none; display:flex; align-items:center; gap:14px; height:44px; padding:0 28px; background:var(--top); color:#fff; white-space:nowrap }
  .topbar .course, .topbar .where { font:500 12px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--toptext) }
  .topbar .slash { color:var(--muted) }
  .topbar h1 { font:600 16px var(--sans); overflow:hidden; text-overflow:ellipsis }
  .topbar .grow { flex:1 }
  .content { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0, 1fr) 404px; gap:20px; padding:16px 28px 0 }
  .content > .sheet, .content > .excol { grid-column:1; grid-row:1 }
  .content > .panel { grid-column:2; grid-row:1 }

  /* ---------- the device sheet: the pen strip, then the stage ---------- */
  .sheet { background:var(--sheet); border:1px solid var(--line); border-radius:12px; padding:12px 22px 14px; display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; min-height:0; overflow:hidden }
  .penstrip { align-self:stretch; display:flex; align-items:baseline; gap:14px; min-height:46px; border-bottom:1px dashed var(--line); padding-bottom:6px }
  .stepno { flex:none; font:500 12px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--accent) }
  .steptitle { font:700 36px/1.05 var(--hand); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:.3em; margin-right:-.3em }   /* room for the hand's last letter, which leans past its box */
  .stagebox { position:relative; flex:1; min-height:0; width:100%; max-width:880px }
  #stage { display:block; width:100%; height:100%; touch-action:none; user-select:none; -webkit-user-select:none }
  .start { position:absolute; inset:0; display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center; background:rgba(255,255,255,.74) }
  .start button { font:700 17px var(--sans); background:var(--accent); color:#fff; border:1.5px solid var(--accent); border-radius:8px; padding:12px 26px; cursor:pointer; max-width:calc(100% - 32px) }
  .start button.alt { background:#fff; color:var(--ink); border-color:var(--line); font-size:16px; padding:11px 20px }
  .pausedTag { position:absolute; top:8px; right:8px; z-index:2; font:500 12px var(--mono); letter-spacing:.1em; text-transform:uppercase;
    background:var(--ink); color:#fff; border-radius:4px; padding:6px 10px; pointer-events:none }
  .hand { font-family:var(--hand); font-weight:700 }
  .hx { cursor:ew-resize } .hy { cursor:ns-resize } .hxy { cursor:move } .hp { cursor:pointer }
  .part { transition:opacity .5s ease }
  .glow { transition:opacity .4s }

  /* ---------- the opening (cfg.intro): the question in the pen strip; a card at the top of the panel ---------- */
  .studio.intro .steptitle { white-space:normal; font-size:40px }
  .introcard { flex:none; display:flex; flex-direction:column; gap:14px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px 22px 22px }
  .introcard .lede { font:500 18px/1.45 var(--sans); color:var(--text2); text-wrap:pretty }
  .introcard .hear { display:grid; grid-template-columns:1fr 1fr; gap:8px }
  .introcard .hear button { font:600 16px var(--sans); color:var(--accent); background:var(--soft); border:1.5px solid transparent; border-radius:8px; padding:14px 10px; cursor:pointer; transition:background .2s, color .2s }
  .introcard .hear button:hover { border-color:var(--accent) }
  .introcard .hear button[aria-pressed="true"] { background:var(--accent); color:#fff }
  .introcard .route { list-style:none; padding:0; counter-reset:r; margin-top:-8px }
  .introcard .route li { display:grid; grid-template-columns:18px 80px 1fr; align-items:baseline; gap:8px; padding:7px 0; border-bottom:1px solid var(--rowrule); counter-increment:r }
  .introcard .route li::before { content:counter(r); font:500 12px var(--mono); color:var(--accent) }
  .introcard .route b { font:700 15px var(--sans) }
  .introcard .route span { font:400 15px var(--sans); color:var(--muted) }
  .introcard .by { font:400 15px/1.45 var(--sans); color:var(--text2); text-wrap:pretty }
  .introcard .by b { color:var(--ink) }
  .introcard .go { display:flex; flex-direction:column; gap:8px }
  .introcard .go button { font:700 17px var(--sans); background:var(--accent); color:#fff; border:1.5px solid var(--accent); border-radius:8px; padding:14px 20px; cursor:pointer }
  .introcard .go button.alt { background:#fff; color:var(--ink); border-color:var(--line); font-size:16px; padding:11px 20px }

  /* ---------- the right-hand panel ---------- */
  .panel { display:flex; flex-direction:column; gap:14px; min-height:0; overflow:auto; padding-bottom:8px }
  .lab { display:block; font:500 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted) }
  .turns { position:sticky; top:0; z-index:1; box-shadow:0 0 0 6px var(--bg); flex:none; display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:4px }
  .turns span { display:flex; align-items:center; justify-content:center; padding:8px 4px; border-radius:7px; color:var(--muted);
    font:500 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; transition:background .3s, color .3s }
  .turns span.on { background:var(--ink); color:#fff }
  .penbox { display:flex; flex-direction:column; gap:6px; padding:4px 6px }
  #pen { display:flex; flex-direction:column; gap:6px }
  #pen .line, .mv, .ask .fb .line, .add { opacity:0; transform:translateY(4px); transition:opacity .4s, transform .4s }
  #pen .line.on, .mv.on, .ask .fb .line.on, .add.on { opacity:1; transform:none }
  .add { display:inline }
  #pen .line { font:700 30px/1.12 var(--hand); color:var(--ink); text-wrap:pretty }
  /* where to read: the newest thought in full ink with a blue bar; the ones before it grey but still readable (5.3:1), never
     blurred, so a pupil can look back (Mike, 21 Oct: for dyslexic pupils). A thought is a line and the lines joined to it
     (data-join, set in doodle.js); a line is old once a later line starts a new thought. The grey wins over a line's own colour */
  #pen .line { border-left:3px solid transparent; padding-left:11px; transition:opacity .4s, transform .4s, color .3s, border-color .3s }
  #pen .line[data-join] { margin-top:-6px; padding-top:6px }   /* the bar runs on through a thought */
  #pen .line:not(:has(~ .line:not([data-join]))) { border-left-color:var(--accent) }
  #pen .line:has(~ .line:not([data-join])), #pen .line:has(~ .line:not([data-join])) .add { color:var(--muted) !important }

  /* the question card ("Your turn") */
  .ask { scroll-margin-top:56px; flex:none; background:#fff; border:1px solid var(--line); border-radius:8px; padding:22px 24px 24px; display:flex; flex-direction:column; gap:16px;
    opacity:0; transition:opacity .3s }
  .ask.on { opacity:1 }
  .ask .head { display:flex; align-items:baseline; justify-content:space-between; gap:12px }
  .ask .yt { font:700 46px/1 var(--hand); color:var(--accent) }
  .ask .st { font:500 12px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
  .ask .q { display:flex; flex-direction:column; font:700 32px/1.15 var(--hand) }
  .ask .opts { display:grid; gap:12px }
  .opt { text-align:left; font:700 30px/1.1 var(--hand); color:var(--ink); background:#fff; border:2.5px solid var(--accent); border-radius:8px; padding:12px 18px; min-height:60px; cursor:pointer }
  .opt.waiting:hover { background:var(--soft) }
  .opt.done { cursor:default; pointer-events:none }
  .opt.picked.right { background:var(--ok); border-color:var(--ok); color:#fff }
  .opt.picked.wrong { background:var(--ink); border-color:var(--ink); color:#fff }
  .opt.picked.partly { background:var(--kick); border-color:var(--kick); color:#fff }
  .opt.answer { border:3px solid var(--ok); color:var(--ok) }
  .opt.other { border-color:var(--line); opacity:.4 }
  .ask .fb { display:flex; flex-direction:column }
  .ask .fb:empty { display:none }
  .ask .fb .line { font:700 28px/1.15 var(--hand); color:var(--ok) }

  /* Your moves (Try) */
  .movesbox { display:flex; flex-direction:column; gap:8px }
  #moves { list-style:none; padding:12px; background:#fff; border:1px solid var(--line); border-radius:8px; display:flex; flex-direction:column; gap:4px }
  .mv { display:flex; gap:10px; padding:8px 10px; border-radius:8px; font:700 28px/1.1 var(--hand); color:var(--ink) }
  .mv .mk { flex:none; width:34px; font:500 13px var(--mono); padding-top:6px; transition:opacity .3s }
  .mv[data-state="done"] { color:var(--muted) } .mv[data-state="done"] .mk { color:var(--ok) }
  .mv[data-state="now"] { background:var(--soft); transition:opacity .4s, transform .4s, background .3s } .mv[data-state="now"] .mk { color:var(--accent) }
  .movesbox .how { font:400 14px/1.45 var(--sans); color:var(--muted) }
  .movesbox button, .makes button, .clip button { align-self:flex-start; font:700 16px var(--sans); color:var(--ink); background:#fff; border:1.5px solid var(--line); border-radius:8px; padding:11px 20px; cursor:pointer }

  /* Make's working parts */
  .makes { flex:none; display:flex; flex-wrap:wrap; gap:10px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:14px }
  .makes .lab { flex-basis:100% }
  .makes button.play { border-color:var(--ink) }

  /* Explain: the small copy of the device, for reference */
  .refbox { display:flex; flex-direction:column; gap:8px }
  .refbox .ref { background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px }
  #refStage { display:block; width:100%; height:auto }

  /* ---------- the footer: the step timeline, then the bar ---------- */
  .foot { flex:none; margin:14px 28px 0; padding-top:12px; border-top:1px solid var(--rule) }
  /* each part sits in its own tray, so Watch, Try, Make and the rest read as groups (Mike, 22 Oct); the part you are in is tinted */
  .timeline { display:grid; grid-template-columns:var(--cols); gap:10px }
  .timeline .tpart { min-width:0; display:flex; flex-direction:column; gap:6px; padding:7px 8px 8px; border-radius:8px; background:#e0e3e8 }
  .timeline .tpart.now { background:var(--soft); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent) }
  .timeline .pl { font:500 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap; overflow:hidden }
  .timeline .tpart.now .pl { font-weight:700; color:var(--ink) }
  .timeline .cells { display:flex; gap:2px; height:30px }
  .cell { flex:1; min-width:0; padding:0; display:grid; place-items:center; border-radius:4px; font:500 11px var(--mono); cursor:pointer; color:var(--ink) }
  /* a done step's colour deepens from the first step to the last, so the last is the full blue (Mike, 21 Oct; --k: 0 to 1, set per step).
     Its number is black until the blue is 84% or more, then white: 4.5:1 or better either way */
  .cell[data-state="done"] { --fill:color-mix(in srgb, var(--accent) calc(16% + 84% * var(--k, 1)), #fff); background:var(--fill); border:0; color:#000 }
  .cell[data-state="done"][data-deep] { color:#fff } .cell[data-state="done"]:hover { box-shadow:inset 0 0 0 1px var(--ink) }
  .cell[data-state="now"] { background:var(--accent); color:#fff; font-weight:700; font-size:12px; border:0; outline:2px solid var(--ink); outline-offset:2px }
  .cell[data-state="open"] { background:#fff; border:1px solid color-mix(in srgb, var(--accent) calc(10% + 45% * var(--k, 0)), var(--line)) } .cell[data-state="open"]:hover { border-color:var(--accent) }
  .cell[data-state="locked"] { background:transparent; border:1px dashed var(--rule); color:var(--faint2); cursor:not-allowed }
  .cell:focus-visible { outline:2px solid var(--accent); outline-offset:2px }
  .bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:14px 0 }
  .bar button { font:700 16px var(--sans); color:var(--ink); background:#fff; border:1.5px solid var(--line); border-radius:8px; padding:11px 20px; cursor:pointer }
  .bar button:disabled { color:var(--faint2); cursor:not-allowed }
  .bar button.play { border-color:var(--ink) }
  .bar button.primary { font-size:17px; color:#fff; background:var(--accent); border-color:var(--accent); padding:11px 26px }
  .bar button.primary:disabled { color:var(--faint); background:#e3e6ea; border-color:#e3e6ea }
  .bar button.quiet { font:500 13px var(--mono); color:var(--muted); background:transparent; padding:9px 12px }
  .bar button.on { background:var(--ink); border-color:var(--ink); color:#fff }
  .bar .spacer { flex:1 }
  .bar .keys { font:500 12px var(--mono); color:var(--muted); white-space:nowrap }
  #asks { font:700 17px var(--sans); color:var(--accent); padding:0 6px }
  #asks .up { display:none }

  /* ---------- Explain: the heading row and the writing frame, where the device sheet was ---------- */
  .excol { display:flex; flex-direction:column; gap:12px; min-height:0; min-width:0; overflow:auto; padding-bottom:16px }
  .exhead { display:flex; align-items:baseline; gap:14px; padding:4px 2px 0 }
  .exhead h2 { font:700 26px/1.15 var(--sans) }
  .writing { background:#fff; border:1px solid var(--line); border-radius:8px; padding:26px 28px; display:flex; flex-direction:column; gap:14px }
  .writing .q { font-size:18px; line-height:1.45; text-wrap:pretty }
  .writing .how, .excol .how { font-size:15px; line-height:1.45; color:var(--muted); text-wrap:pretty }
  .frame { display:grid; grid-template-columns:repeat(auto-fit, minmax(256px, 1fr)); gap:12px 16px; margin-top:4px }
  .frame label { display:block; font-weight:700; font-size:16px; margin-bottom:5px }
  .frame textarea { display:block; width:100%; font:400 16px var(--sans); color:var(--ink); border:1.5px solid var(--line); border-radius:8px; padding:10px 12px; min-height:46px; resize:vertical; background:#fff }
  .writing .row { display:flex; gap:10px; flex-wrap:wrap; margin-top:4px }
  .writing .row button { font:700 16px var(--sans); color:#fff; background:var(--ink); border:0; border-radius:8px; padding:12px 20px; cursor:pointer }
  #points { display:grid; gap:6px; padding-left:0; list-style:none }
  #points li { font:700 26px/1.15 var(--hand); color:var(--ok); opacity:0; transform:translateY(4px); transition:opacity .5s, transform .5s }
  #points li.on { opacity:1; transform:none }
  #points label { cursor:pointer }
  .excol h3 { font:700 18px var(--sans); margin-top:10px }
  .explore { display:inline-block; margin-top:16px; font:700 16px var(--sans); color:#fff; background:var(--accent); border-radius:8px; padding:12px 22px; text-decoration:none }
  .footnote { font-size:13px; color:var(--muted); max-width:760px; line-height:1.5 }
  .studio[data-kind="explain"] .content > .sheet { display:none }
  .studio[data-kind="explain"] .penstrip { display:none }

  @media (prefers-reduced-motion: reduce) {
    .part, .glow, .turns span, #pen .line, .mv, .mv .mk, .ask, .ask .fb .line, .add, #points li { transition:none !important }
  }

  /* ---------- half a screen (760): one column, and the page scrolls ---------- */
  @media (max-width: 1099px) {
    .studio { height:auto; min-height:100vh; overflow:visible }
    .topbar { height:auto; flex-direction:column; align-items:flex-start; gap:2px; padding:12px 20px; white-space:normal }
    .topbar .course, .topbar .slash, .topbar .grow { display:none }
    .topbar .where { order:-1; font-size:11px }
    .content { display:flex; flex-direction:column; gap:14px; padding:16px 20px 8px }
    .sheet { padding:14px 18px 16px; gap:10px; overflow:visible }
    .penstrip { gap:12px; padding-bottom:8px }
    .steptitle { font-size:34px; white-space:normal }
    .stagebox { flex:none }
    #stage { height:auto }
    .panel { overflow:visible; padding-bottom:0 }
    .turns { position:static; box-shadow:none }
    .refbox { display:none !important }
    #moves { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:6px; padding:16px 14px }
    .mv { font-size:26px; padding:8px 12px }
    .excol { overflow:visible; padding-bottom:0 }
    .exhead h2 { font-size:24px }
    .studio[data-kind="explain"] .content > .sheet { display:flex }
    .foot { margin:0 20px; padding-top:12px }
    .timeline { grid-template-columns:var(--cols-half); gap:6px }
    .timeline .tpart { gap:5px; padding:4px 3px 4px; border-radius:6px }
    .timeline .pl { font-size:10px; letter-spacing:.06em }
    .timeline .pn, .timeline .num { display:none }
    .timeline .cells { height:26px }
    .cell { border-radius:3px }
    .bar .keys { display:none }
    #asks .side { display:none } #asks .up { display:inline }
  }