/* A separate sheet beside the question, never a layer over its diagrams. */
.sp-entry{min-height:44px;flex:none;padding:4px 10px;font-size:15px;background:#ffe38a}
.sp-entry[aria-expanded=true]{background:#cbeef7}
#stage.scratch-open{grid-template-columns:minmax(0,1fr) minmax(340px,40%);gap:14px;padding-right:var(--gutR)}
#stage.scratch-open>.coach{display:none}
#stage.scratch-open>.play{order:0;min-height:0;overflow:hidden}
#stage.scratch-open #board{max-height:100%;min-height:0;overflow:auto}
.sp-panel{order:1;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--paper);border:4px solid var(--ink);border-radius:22px;box-shadow:6px 6px 0 var(--ink);overflow:hidden;font:500 15px/1.4 var(--f-body)}
.sp-header{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:3px solid var(--ink);background:#ffe38a;flex:none}
.sp-title{flex:1;min-width:0}.sp-title strong{display:block;font:400 23px var(--f-display)}.sp-title small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.sp-panel button{min-width:44px;min-height:44px;border:3px solid var(--ink);border-radius:12px;background:#fff;padding:4px 8px;cursor:pointer;box-shadow:0 2px 0 var(--ink);font:700 14px var(--f-body)}
.sp-panel button:disabled{opacity:.4;cursor:default}.sp-panel button[aria-pressed=true]{background:#ffe38a;box-shadow:inset 0 0 0 2px #cf9a0c}
.sp-toolbar{display:flex;flex-wrap:wrap;gap:6px;padding:8px;border-bottom:2px dashed #d3c3a5;flex:none}
.sp-toolbar>div{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.sp-colors button{padding:6px}.sp-colors span{display:block;width:22px;height:22px;border-radius:50%;border:2px solid var(--ink)}
.sp-settings{padding:0 8px 6px;flex:none}.sp-settings>summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:700}.sp-options{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sp-settings[open]{flex:0 1 auto;min-height:44px;overflow:auto;overscroll-behavior:contain}.sp-settings[open]>summary{position:sticky;top:0;background:var(--paper);z-index:1}
.sp-options label{display:flex;align-items:center;gap:5px;min-height:44px}.sp-options select{font:inherit;min-height:44px;border:2px solid var(--ink);border-radius:9px;background:#fff}
.sp-eraser-preview{display:inline-block;flex:none;border:2px solid var(--ink);border-radius:50%;background:#fff;box-sizing:border-box}
.sp-navigation{display:flex;align-items:center;justify-content:center;gap:6px;padding:4px 8px;border-top:1px solid #dacdad;flex:none}.sp-navigation button{min-height:44px;font-size:13px}.sp-navigation button:nth-child(2){min-width:70px}
.sp-status{padding:6px 10px;min-height:32px;margin:0;border-top:2px solid #dacdad;flex:none;overflow-wrap:anywhere;font-size:13px}.sp-status[data-state=error]{color:#bc2939;background:#fff0e8}
.sp-paper{position:relative;flex:1;min-height:100px;min-width:0;background:#dfd3b8;display:grid;place-items:center;padding:8px;overflow:hidden}
.sp-canvas{display:block;background:#fff;box-shadow:0 2px 6px #61462b44;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:crosshair;max-width:100%;max-height:100%}
.sp-canvas[data-tool=pan]{cursor:grab}.sp-canvas.sp-panning{cursor:grabbing}.sp-canvas[data-tool=eraser]{cursor:none}
.sp-eraser-ring{position:absolute;pointer-events:none;transform:translate(-50%,-50%);border:2px solid var(--ink);border-radius:50%;box-sizing:border-box;background:#ffffff33;box-shadow:0 0 0 1px #fff;z-index:1}
.sp-conflict{padding:8px;background:#fff0ce;border:2px solid #b88918;flex:none;font-size:13px}.sp-conflict p{margin:0 0 6px}.sp-conflict button{font-size:13px;margin-right:6px}
#stage.scratch-full{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
#stage.scratch-full>.play{display:none}.scratch-full .sp-paper{min-height:0}.scratch-full .sp-panel{order:0}
@media(orientation:portrait),(max-width:740px){
  #stage.scratch-open{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(180px,42%) minmax(0,1fr);gap:10px;padding-bottom:max(14px,env(safe-area-inset-bottom))}
  #stage.scratch-open .gbar{gap:6px}#stage.scratch-open .combo{display:none}#stage.scratch-open #qtitle{font-size:18px}
  #stage.scratch-open #qtitle .src{display:none}
  body.focus-mode #stage.scratch-open #board .qhead{display:none}
  body.focus-mode #stage.scratch-open #qarea>.fm.fm-ex>.fm-acts{padding:4px 8px}
  body.focus-mode #stage.scratch-open .fm-got{min-height:44px;font-size:16px;padding:4px 10px}
  .sp-header{padding:5px 8px}.sp-title strong{font-size:21px}.sp-toolbar{gap:5px;padding:6px}
  .sp-panel button{font-size:13px;padding:4px 6px}.sp-settings{padding-bottom:0}
  #stage.scratch-full{grid-template-rows:minmax(0,1fr)}
}
@media(max-height:550px){.sp-settings{display:none}.sp-header{padding:4px 8px}.sp-title small{display:none}}

/* Temporary notes stay usable while the optional profile connection is pending. */
#scratchpad .sp-connection{display:flex;align-items:center;gap:8px;padding:6px 10px}
#scratchpad .sp-connection p{flex:1;min-width:0;margin:0;font-size:12px;line-height:1.4}
#scratchpad .sp-connection button{flex:none;font-size:12px}
body:has(#stage.scratch-open) .record-access{visibility:hidden}
#scratchpad:has(.sp-connection:not([hidden])) .sp-status[data-state=info]{display:none}
@media(max-width:740px),(orientation:portrait){
 #stage:not(.scratch-full) #scratchpad:has(.sp-connection:not([hidden])) .sp-settings{display:none}
 #scratchpad:has(.sp-connection:not([hidden])) .sp-paper{min-height:116px}
}

.sp-footer{display:flex;align-items:center;border-top:2px solid #dacdad;flex:none;min-height:44px}
.sp-footer .sp-status{flex:1;border:0;min-width:0}
.sp-footer .sp-account{flex:none;margin:2px 6px;min-height:44px;font-size:13px}
#scratchpad:has(.sp-connection:not([hidden])) .sp-footer:has(.sp-status[data-state=info]){display:none}
#scratchpad:has(.sp-connection:not([hidden])) .sp-account{display:none}