/* A genuinely usable student workspace: leave the geometry prominent,
   spend the remaining height on mathematical lines or freehand working. */
body[data-view="puzzle"] .side .rule,
body[data-view="puzzle"] .side .description,
body[data-view="puzzle"] .side .facts,
body[data-view="puzzle"] .side-bottom{display:none!important}
.workspace-brief{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px 11px;
  color:#5f634e;font-size:11px;line-height:1.45}
.workspace-brief strong{font:600 12px 'Cinzel',serif;color:#4e5746}
.workspace-brief span{color:#88775f}
.workspace-answer-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;line-height:1.4}
.workspace-answer-head strong{font:600 13px 'Cinzel',serif;color:#4b5145}
.workspace-answer-head span{font-size:10px;color:#81725a}
.answer-field{margin:0!important}
.answer-field label{margin:0 0 4px!important;font-size:9px!important}
.answer-field .input-row input{padding:8px 10px!important;min-height:38px;font-size:16px!important}
.answer-field .input-row .submit{min-height:38px}
.working-pad-mount{min-height:0;margin:3px 0 0}
.ws-root{min-height:0;display:flex;flex-direction:column}
.ws-header{flex:0 0 auto;min-height:32px;margin-bottom:7px}
.ws-body{min-height:0;display:flex;flex-direction:column;flex:1}
.ws-math-keys{flex:0 0 auto;margin-bottom:7px}
.ws-line-list{flex:1;min-height:135px;overflow-y:auto;overscroll-behavior:contain}
.ws-maths-toolbar{flex:0 0 auto;margin:7px 0 0}
.ws-line-caption{display:none}
.ws-body>.ws-help{font-size:9px;line-height:1.3;margin-top:6px}
.ws-ink-frame{flex:1;min-height:170px}
.ws-ink-tools{flex:0 0 auto}
.side .status-strip{margin:0}
.side .progress-track{margin:3px 0 6px}
.side-topline{min-height:30px}
body[data-view="puzzle"] #inspector{gap:7px;min-height:0}
body[data-view="puzzle"] #inspector .panel-actions{
  flex:0 0 auto;margin:3px 0 0;padding:5px 0 0;
  align-items:center;min-height:25px}
body[data-view="puzzle"] #inspector .panel-actions .btn-link{padding:4px 0;font-size:9px}
body[data-view="puzzle"] #inspector .hint-area{
  flex:0 0 auto;margin:2px 0;padding:0;border:0}
body[data-view="puzzle"] #inspector .hint-button{
  padding:5px 8px;text-align:left;width:auto;min-height:26px;font-size:9px}
body[data-view="puzzle"] #inspector .hint-content{
  margin:6px 0 0;padding:9px 11px;font-size:11px}
body[data-view="puzzle"] .working-pad-mount .ws-ink-frame.is-large{flex:none}
@media(min-width:900px){
  body[data-view="puzzle"] .side{padding:9px 11px 8px}
  body[data-view="puzzle"] #inspector{
    display:flex;flex-direction:column;padding:8px 9px}
  body[data-view="puzzle"] .inspector>.inspect-field{flex:0 0 auto;margin:0!important}
  body[data-view="puzzle"] .inspector .inspect-field select{
    padding:7px 8px;font-size:12px;min-height:34px}
  body[data-view="puzzle"] .inspector .inspect-field label{
    font-size:9px;margin-bottom:4px}
  body[data-view="puzzle"] .inspector .working-pad-mount{
    flex:1;display:flex;flex-direction:column;min-height:170px;margin-top:1px}
  body[data-view="puzzle"] .working-pad-mount .ws-root{
    flex:1;height:100%;padding:9px 10px 8px}
  body[data-view="puzzle"] .ws-line-list{
    max-height:none;min-height:120px}
  body[data-view="puzzle"] .ws-ink-frame:not(.is-large){
    height:auto;min-height:160px;max-height:none}
  body[data-view="puzzle"] .ws-ink-frame.is-large{
    height:clamp(265px,45vh,480px)}
}
@media(min-width:900px) and (max-height:730px){
  body[data-view="puzzle"] .challenge-heading{
    min-height:45px;margin-bottom:6px}
  body[data-view="puzzle"] .challenge-heading h1{font-size:clamp(19px,2vw,26px)}
  body[data-view="puzzle"] .side{padding:6px 8px 6px}
  body[data-view="puzzle"] .status-strip{padding-top:3px}
  body[data-view="puzzle"] .progress-track{margin:3px 0}
  body[data-view="puzzle"] #inspector{padding:5px 7px;gap:5px}
  body[data-view="puzzle"] .working-pad-mount .ws-root{padding:6px}
  body[data-view="puzzle"] .ws-header{margin-bottom:4px;min-height:29px}
  body[data-view="puzzle"] .ws-math-keys{margin-bottom:4px}
  body[data-view="puzzle"] .ws-math-keys .ws-key{min-height:29px;padding:4px 7px}
  body[data-view="puzzle"] .ws-line-list{min-height:100px}
  body[data-view="puzzle"] .ws-math-row{gap:3px}
  body[data-view="puzzle"] .ws-math-field,
  body[data-view="puzzle"] .ws-math-fallback{min-height:40px;padding:5px 8px}
  body[data-view="puzzle"] .ws-body>.ws-help{display:none}
}
@media(max-width:899px){
  body[data-view="puzzle"] #inspector{display:flex;flex-direction:column;gap:9px}
  body[data-view="puzzle"] .working-pad-mount{min-height:260px}
  body[data-view="puzzle"] .ws-root{min-height:290px}
  body[data-view="puzzle"] .ws-line-list{min-height:190px;max-height:420px}
  body[data-view="puzzle"] .ws-ink-frame:not(.is-large){min-height:260px}
}


/*
 * Drawing pad containment fix.
 *
 * Previous rules gave the parchment (.ws-root) height:100% while the
 * drawing canvas also required a fixed/minimum height. The flex item
 * could therefore shrink below its children, leaving the canvas
 * visually outside the yellow parchment and over the solution actions.
 *
 * Ink mode now owns its intrinsic height, and the inspector is the
 * ONLY vertical scroll container when the viewport is short. Maths
 * mode keeps its existing available-height flex layout.
 */
body[data-view="puzzle"] #inspector .working-pad-mount.ws-drawing-host {
  display: block;
  flex: 0 0 auto;
  align-self: stretch;
  height: auto;
  min-height: 0;
  margin: 3px 0 0;
  overflow: visible;
}
body[data-view="puzzle"] #inspector .working-pad-mount.ws-drawing-host .ws-root.ws-drawing {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: visible;
  box-sizing: border-box;
}
body[data-view="puzzle"] #inspector .ws-root.ws-drawing .ws-body {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
  overflow: visible;
}
body[data-view="puzzle"] #inspector .ws-root.ws-drawing .ws-ink-tools,
body[data-view="puzzle"] #inspector .ws-root.ws-drawing .ws-help {
  flex: 0 0 auto;
}
body[data-view="puzzle"] #inspector .ws-root.ws-drawing .ws-ink-frame {
  display: block;
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: clamp(215px, 33dvh, 330px);
  min-height: 0;
  max-height: none;
  overflow: hidden;
}
body[data-view="puzzle"] #inspector .ws-root.ws-drawing .ws-ink-frame.is-large {
  height: clamp(325px, 49dvh, 475px);
}
body[data-view="puzzle"] #inspector .ws-root.ws-drawing .ws-ink-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
body[data-view="puzzle"] #inspector .panel-actions {
  position: static;
  z-index: auto;
  flex: 0 0 auto;
  clear: both;
}
@media (min-width: 900px) {
  body[data-view="puzzle"] #inspector {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
  }
}
@media (min-width: 900px) and (max-height: 690px) {
  body[data-view="puzzle"] #inspector .ws-root.ws-drawing .ws-ink-frame {
    height: 225px;
  }
  body[data-view="puzzle"] #inspector .ws-root.ws-drawing .ws-ink-frame.is-large {
    height: 340px;
  }
}
@media (max-width: 899px) {
  body[data-view="puzzle"] #inspector .ws-root.ws-drawing .ws-ink-frame {
    height: clamp(260px, 35dvh, 355px);
  }
  body[data-view="puzzle"] #inspector .ws-root.ws-drawing .ws-ink-frame.is-large {
    height: clamp(365px, 48dvh, 505px);
  }
}

/* Real-browser audit fix: at 1024 x 640 the ink canvas could grow
   80px beyond the flex-allocated mount and cover solution controls.
   Put the inspector in normal document flow only in Draw mode.
   Maths mode keeps its taller flexible lines editor. */
@media (min-width:900px) {
  body[data-view="puzzle"] #inspector.ws-drawing-inspector {
    display:block!important;
    overflow-y:auto;
    overflow-x:hidden;
  }
  body[data-view="puzzle"] #inspector.ws-drawing-inspector
    .working-pad-mount.ws-drawing-host {
    display:block!important;
    width:100%;
    height:auto!important;
    margin-top:6px;
    margin-bottom:8px;
  }
  body[data-view="puzzle"] #inspector.ws-drawing-inspector .panel-actions {
    display:flex;
    position:static;
    margin-top:8px;
  }
}