/* workspace.css — hands-on task dialog + tablet mealtime controls.
   Loaded after style.css. Tablet-first: 1024x768 / 768x1024, still fits 390px phones. */

/* ---------------- Task dialog ---------------- */
dialog.task-modal{width:min(1120px,96vw);max-height:94dvh;border-radius:24px;overflow:auto;overscroll-behavior:contain;background:#fffdf5}
dialog.task-modal::backdrop{background:#2a362dcc;backdrop-filter:blur(6px)}
.task-modal #modal-content{padding:18px 22px 16px;display:flex;flex-direction:column;gap:10px}
.task-modal .modal-heading{margin:0;gap:12px}
.task-modal .modal-heading h2{font:clamp(22px,3vw,30px)/1.2 var(--serif);text-wrap:balance}
.task-modal .modal-heading button{width:48px;height:48px;font-size:28px;line-height:1;border:1px solid #dcdfd2}
.workspace-shell{display:flex;flex-direction:column;gap:10px;min-height:0}
.workspace-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.workspace-instruction{flex:1 1 320px;font-size:clamp(16px,2vw,19px);line-height:1.4;color:var(--ink)}
.workspace-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.workspace-meta span{font-size:15px;font-weight:600;background:#f0f1e7;border:1px solid #e2e4d6;border-radius:999px;padding:8px 14px;font-variant-numeric:tabular-nums;white-space:nowrap}
#task-clock{background:#f7ecd9;border-color:#ecd9b8;color:#8a6a3e}
#task-pause{min-height:48px;min-width:96px;padding:0 18px;border-radius:14px;background:var(--lavender);border:1px solid #d6cce4;font-size:16px;font-weight:700;color:#5e4f78}
#task-pause:hover{background:#e0d8ec}

/* The board: dominant, never scrolls or pans while dragging. */
.task-board{position:relative;width:100%;height:clamp(320px,53dvh,560px);border-radius:20px;border:1px solid #dfe1d3;background:radial-gradient(circle at 50% 40%,#fbfaf2,#efeee2);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:inset 0 2px 10px #354b3f12}
.task-board>*{position:absolute;transform:translate(-50%,-50%)}
.board-wash{background:radial-gradient(circle at 50% 46%,#f3f8f6 0 30%,#e2ece9 70%)}
.board-sort{background:linear-gradient(#f6f2e6,#ece6d4)}
.board-desk{background:linear-gradient(#f1ede2,#e6dfcc)}
.board-math{background:radial-gradient(circle at 50% 35%,#f8f5fb,#ebe6f2)}
.board-cutlery{background:repeating-linear-gradient(90deg,#f4efe1 0 22px,#efe8d6 22px 44px)}

.workspace-feedback{min-height:24px;font-size:16px;font-weight:600;color:#8a6a3e;text-align:center}
.workspace-keyboard{font-size:14px;color:var(--muted);text-align:center}

/* Draggable pieces */
.drag-piece{z-index:3;min-width:64px;min-height:72px;padding:8px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:#fffdf7;border:2px solid #d8dccb;border-radius:16px;box-shadow:0 4px 0 #d9dccd;touch-action:none;cursor:grab;transition:box-shadow .15s,transform .15s,opacity .2s}
.drag-piece:hover{border-color:#b9c7b3}
.piece-icon{font-size:34px;line-height:1;pointer-events:none}
.piece-label{font-size:14px;font-weight:600;line-height:1.2;pointer-events:none;white-space:nowrap}
.drag-piece.dragging{z-index:10;cursor:grabbing;transform:translate(-50%,-50%) scale(1.1);box-shadow:0 14px 28px #2a362d40;border-color:#9b82bd;transition:none}
.drag-piece.placed{visibility:hidden;pointer-events:none}
.drag-piece:focus-visible{outline:4px solid #9b82bd;outline-offset:3px}

/* Drop targets */
.drop-zone{z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:3px dashed #c9cfbd;border-radius:18px;background:#ffffff8c;text-align:center;padding:6px;transition:background .15s,border-color .15s,transform .15s}
.zone-icon{font-size:30px;line-height:1;opacity:.8}
.zone-label{font-size:15px;font-weight:700;color:#5d6a58;line-height:1.2}
.drop-zone.active{border-color:#7f9a78;border-style:solid;background:#e8f0e2;transform:translate(-50%,-50%) scale(1.03);box-shadow:0 0 0 6px #7f9a7833}

/* Washing */
.wash-plate{left:50%;top:46%;width:min(42%,300px);aspect-ratio:1;border-radius:50%;background:#fdfdf8;border:12px double #c7d7d2;box-shadow:0 8px 0 #d3dcd6,inset 0 0 0 10px #eef3ec}
.scrub-spot{position:absolute;transform:translate(-50%,-50%);z-index:2;width:32px;height:28px;background:#b89665;border-radius:40% 60% 35% 55%;box-shadow:6px 4px 0 -2px #a58052;transition:opacity .35s,transform .35s;pointer-events:none}
.scrub-spot:nth-child(3n){border-radius:55% 45% 60% 40%;background:#a88857}
.scrub-spot.cleaned{opacity:0;transform:translate(-50%,-50%) scale(.4)}
.tool-home{z-index:1;border:3px dashed #cfd5c4;border-radius:18px;background:#f7f8f1b3;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;font-size:14px;color:var(--muted)}
.spray-tool{background:#e5f0f3;border-color:#a9c7cf;box-shadow:0 4px 0 #b7d1d7}
.sponge-tool{background:#f7eab8;border-color:#dcc36e;box-shadow:0 4px 0 #d9c37f;border-radius:22px 12px 22px 12px}
.spray-tool .piece-icon,.sponge-tool .piece-icon{font-size:40px}

/* Desk tidy */
.desk-surface{left:10%;top:12%;width:80%;height:60%;transform:none;border-radius:16px;background:linear-gradient(#e2c29b,#d4b086);border:8px solid #b5835c;box-shadow:0 8px 0 #8d6348}

/* Math */
.math-prompt{left:50%;top:22%;width:85%;text-align:center;font:clamp(24px,4.4vw,36px)/1.25 var(--serif);color:var(--ink);text-wrap:balance}
.math-drop{left:50%;top:48%;width:45%;height:20%;background:#fffdf7;border-color:#b2a3c7}
.math-drop .zone-label{font-size:18px}
.board-math .drag-piece .piece-icon{font:700 30px/1 -apple-system,BlinkMacSystemFont,sans-serif;color:var(--green)}
.board-math .drag-piece{min-width:80px;background:#fffef6;border-color:#c9bfd8;box-shadow:0 4px 0 #cfc5dd}

/* Cutlery */
.cutlery-mat{left:50%;top:44%;width:min(70%,520px);height:60%;border-radius:22px;background:#e9eee4;border:2px solid #cfdac8}
.cutlery-mat::before{content:'';position:absolute;left:50%;top:50%;width:min(40%,190px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#fdfdf8;border:10px double #c7d7d2}

/* Paused */
.task-board.task-paused::after{content:'Paused — tap Resume above';position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:#f6f4ede6;backdrop-filter:blur(4px);font:24px/1.3 var(--serif);color:var(--ink);text-align:center;padding:20px}
.task-board.task-paused>*{pointer-events:none}

/* Progress pips (optional) */
.progress-pips{display:flex;gap:6px}
.progress-pips span{width:12px;height:12px;border-radius:50%;background:#dde1d3}
.progress-pips span.done{background:#729077}

/* Portrait tablet */
@media(max-width:820px){
  .task-modal #modal-content{padding:16px}
  .task-board{height:clamp(360px,56dvh,600px)}
  .wash-plate{width:min(56%,300px)}
  .math-drop{width:60%}
  .cutlery-mat{width:84%}
}
/* Phone */
@media(max-width:520px){
  dialog.task-modal{width:98vw;border-radius:18px}
  .task-modal #modal-content{padding:12px;gap:8px}
  .workspace-top{gap:8px}
  .workspace-instruction{flex-basis:100%;font-size:16px}
  .workspace-meta span{font-size:14px;padding:6px 10px}
  .task-board{height:clamp(320px,52dvh,480px);border-radius:16px}
  .drag-piece{min-width:60px;min-height:64px;padding:6px 8px}
  .piece-icon{font-size:28px}
  .piece-label{font-size:14px;white-space:normal;text-align:center}
  .zone-icon{font-size:24px}
  .zone-label{font-size:14px}
  .wash-plate{width:min(66%,240px);border-width:10px}
  .math-drop{width:72%}
  .workspace-keyboard{display:none}
}

/* ---------------- Mealtime controls ---------------- */
.meal-controls{max-width:none;margin:22px 0 0;background:#fffdf7;border:1px solid #dce0d4;border-radius:20px;padding:22px;box-shadow:0 7px 0 #e8e9de}
.meal-control-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:22px;align-items:start}
.meal-main,.meal-bag{display:flex;flex-direction:column;gap:14px;min-width:0}
.meal-bag{background:#f7f5ec;border-radius:16px;padding:16px}
.meal-controls h2,.meal-controls h3{font:22px/1.25 var(--serif)}
.meal-controls p{font-size:15px;line-height:1.5}

.feet-button{min-height:64px;width:100%;font-size:19px;font-weight:700;border-radius:16px;position:relative}

.meal-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:8px 0;max-width:none}
.food-option{min-height:88px;font-size:14px;font-weight:600;padding:10px 6px;border-width:2px;border-radius:14px}
.food-option span{font-size:34px}
.food-option.selected{border-color:#7f9a78;box-shadow:0 0 0 3px #7f9a7833}

.meal-food-preview{display:flex;align-items:center;gap:14px;background:var(--peach);border-radius:16px;padding:12px 16px}
.food-art{font-size:56px;line-height:1;flex-shrink:0}
.meal-food-preview strong{display:block;font:20px/1.25 var(--serif)}
.meal-food-preview small{display:block;font-size:14px;color:var(--muted);margin-top:2px}

.bag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.bag-item{min-height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 6px;background:#fffdf7;border:2px solid #e2e3d7;border-radius:14px;text-align:center}
.bag-item>span:first-child,.bag-item .icon{font-size:32px;line-height:1.1}
.bag-item strong{font-size:14px;line-height:1.2}
.bag-item small{font-size:13px;color:var(--muted)}
.bag-item.selected{border-color:#9b82bd;background:var(--lavender);box-shadow:0 0 0 3px #9b82bd40}

.use-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.use-option{min-height:64px;padding:10px 12px;text-align:left;background:#eef1e7;border:1px solid #d8dfce;border-radius:14px;display:flex;flex-direction:column;justify-content:center}
.use-option strong{font-size:15px}
.use-option small{font-size:13px;color:var(--muted);line-height:1.35}
.use-option:not(:disabled):hover{background:#e4eadb}

.item-uses{margin:6px 0 0;padding-left:16px;font-size:12px;color:var(--muted);line-height:1.5}

/* School flow */
.school-banner{background:var(--lavender);border-radius:16px;padding:14px 16px;font:20px/1.3 var(--serif);display:flex;align-items:center;gap:12px}
.school-list{display:grid;gap:10px}
.school-task{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;border:1px solid #e4e4d9;border-radius:14px;background:#fffdf8;font-size:15px}
.school-task.current{border:2px solid #9b82bd;background:#f6f3fa}
.school-task.done{background:#edf1e3;color:#6b7e6a}
.school-task.done strong{text-decoration:line-through;text-decoration-color:#9dac87}
.school-progress{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--muted);gap:10px}
.task-progressbar{height:12px;background:#e9ecdf;border-radius:999px;overflow:hidden}
.task-progressfill{height:100%;background:linear-gradient(90deg,#9dac87,#729077);border-radius:inherit;transition:width .3s}

/* Tablet: bigger, readable, nothing clipped */
@media(max-width:1100px){
  .tablet{max-height:none;overflow:visible}
  .shop-item{overflow:visible}
  .meal-controls p,.use-option strong{font-size:16px}
  .food-option{font-size:15px}
}
@media(max-width:640px){
  .meal-controls{padding:16px;border-radius:16px}
  .meal-control-grid{grid-template-columns:1fr;gap:16px}
  .bag-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .food-art{font-size:44px}
}
@media(max-width:400px){
  .meal-options{grid-template-columns:repeat(2,minmax(0,1fr))}
  .use-options{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.drag-piece.dragging{transform:translate(-50%,-50%)}}
/* Keep finger-picked objects centred even under the base button active rule. */
.task-board .drag-piece:not(:disabled):active{transform:translate(-50%,-50%) scale(1.06)}
.task-board .drag-piece{max-width:25%;transition:box-shadow .15s,opacity .2s}
.task-board .piece-label{white-space:normal;text-align:center}
.task-board .answer-tile .piece-label{font-size:28px;font-weight:700}
.task-board .answer-tile .piece-icon:empty{display:none}
.drop-zone[data-zone=sponge],.drop-zone[data-zone=spray],.drop-zone[data-zone=home]{justify-content:flex-end;padding-bottom:8px}
.wash-plate.rinsing{background:#e4f6fa;border-color:#91c9d6}
.item-uses{padding-left:0;display:grid;gap:5px}.item-uses span{display:flex;justify-content:space-between;gap:8px}.item-uses b{white-space:nowrap}
.use-option b{font-size:13px;margin-top:7px;color:#536c48}
.school-task{width:100%;text-align:left}.school-task>span{font-size:28px}.school-task small{margin-left:auto;white-space:nowrap}
@media(pointer:coarse){.workspace-keyboard{display:none}.small-button,.tabs button,.icon-button,.text-button{min-height:48px}.icon-button{min-width:48px}.chore-info strong{font-size:14px}.chore-info small{font-size:12px}.primary{min-height:48px}}
@media(max-width:520px){.task-board{height:clamp(300px,40dvh,360px)}.task-board .drag-piece{padding:6px 4px;max-width:29%;min-width:56px}.task-board .piece-label{font-size:12px}.workspace-feedback{font-size:14px}.workspace-meta span{font-size:12px}.workspace-instruction{font-size:15px}.task-board .zone-label{font-size:12px}}
/* Keep the room and both hands-free meal controls in one tablet view. */
body.at-meal .game-layout,body.at-meal .welcome{display:none}
body.at-meal .meal-controls{margin-top:0}
#meal-scene-slot{border-radius:14px;overflow:hidden;border:1px solid #e0dfd0}
#meal-scene-slot .room{height:clamp(155px,23dvh,220px);aspect-ratio:auto}
#meal-scene-slot .room-art{object-fit:contain}
#meal-scene-slot .room-speech{font-size:11px;top:9px;max-width:92%;white-space:normal;text-align:center;padding:6px 10px}
#meal-scene-slot .scene-label{display:none}
#meal-scene-slot .scene-badge{font-size:9px;bottom:7px;left:8px}
@media(min-width:641px){.meal-controls .meal-food-preview{padding:8px 12px}.meal-controls .food-art{font-size:34px}.meal-controls .meal-food-preview strong{font-size:17px}.meal-controls .meal-food-preview small{font-size:12px}.meal-controls .meal-main{gap:10px}}