/* Painting screens. Shared theme values are projected into design-tokens.json. */
#app[data-flow]{--flow-left:0px;--flow-right:0px;--flow-top:0px;--flow-bottom:0px;padding:0;background:var(--kid-color-paper);color:var(--kid-color-ink)}
#app[data-flow] :is(.topbar,#drawingActions,#settingsCornerCoach,#assetTray,#drawingEmpty,#flowPull){display:none!important}
#app[data-flow]>.stage{position:fixed;inset:0;width:auto;max-width:none;height:auto;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;overflow:hidden}
#app[data-flow]:not([data-flow=draw])>.stage{visibility:hidden}
#flowShell{font-family:var(--kid-font-family);color:var(--kid-color-ink)}
::selection{background:var(--kid-color-sun);color:var(--kid-color-ink)}
#flowShell canvas{position:static;inset:auto;width:100%;height:auto;touch-action:auto}
/* The paper decision lives outside flowShell; its thumbnail is not a drawing layer. */
#paperModal{width:min(var(--pt-paper-dialog-width),calc(100vw - var(--pt-space-panel)));box-sizing:border-box}
.paper-head{display:flex;align-items:center;justify-content:space-between;gap:var(--pt-space-control)}
#closePaperDecision{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--pt-target-min);height:var(--pt-target-min)}
#closePaperDecision svg{width:var(--pt-hint-icon-size);height:var(--pt-hint-icon-size);fill:none;stroke:currentColor;stroke-width:2;pointer-events:none}
.paper-summary{display:flex;align-items:center;gap:var(--pt-space-control);margin-block:var(--pt-space-section)}
#paperBefore{position:static;inset:auto;display:block;flex-shrink:0;width:var(--pt-paper-preview-width);height:var(--pt-paper-preview-height);border-radius:var(--pt-paper-thumbnail-radius);touch-action:auto}
.paper-copy{min-width:0;overflow-wrap:anywhere}
.paper-risk{margin:var(--pt-space-compact) 0 0}
#paperModal :is(.paper-save,.paper-discard){display:inline-flex;align-items:center;justify-content:center;gap:var(--pt-space-compact);min-height:var(--kid-size-target-min);box-sizing:border-box;line-height:1}
#paperModal .confirm-actions{align-items:stretch}
#paperModal .confirm-actions svg{flex:none;width:var(--pt-hint-icon-size);height:var(--pt-hint-icon-size);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#paperModal{background:var(--pt-ui-float-surface);border-radius:var(--pt-ui-float-radius);box-shadow:var(--pt-ui-float-shadow)}
#paperModal .paper-save{flex:1;--pt-key-fill:var(--kid-color-sun);--pt-key-edge:var(--kid-color-sun-edge)}
#paperModal .paper-discard{flex:1}
#flowShell [hidden],#calmSettingsPanel [hidden],#paperModal [hidden]{display:none!important}
#flowShell button,#calmSettingsPanel button,.flow-popover button{display:inline-flex;align-items:center;justify-content:center;gap:var(--pt-space-compact);min-width:var(--kid-size-target-min);min-height:var(--kid-size-target-min);padding:var(--pt-space-compact);border:0;border-radius:var(--kid-shape-key);background:var(--pt-ui-hud-surface);color:var(--kid-color-ink);box-shadow:none;translate:none;font-family:var(--kid-font-family);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;--pt-key-depth:0px;--pt-key-shape:var(--kid-shape-key);transition:scale var(--kid-motion-release) var(--kid-motion-ease-out),opacity var(--kid-motion-tap)}
#flowShell button::before,#flowShell button::after{display:none}
#flowShell button:active:not(:disabled):not([aria-disabled=true]),#calmSettingsPanel button:active:not(:disabled),#app[data-flow] .flow-popover button:active:not(:disabled){transform:none;scale:.97;transition-duration:var(--kid-motion-tap)}
#flowShell button:is(:disabled,[aria-disabled=true]),.flow-popover button:is(:disabled,[aria-disabled=true]){opacity:var(--pt-disabled-opacity);cursor:default}
#flowShell button:focus-visible,#calmSettingsPanel button:focus-visible,.flow-popover :focus-visible{outline:var(--pt-depth-sm) solid var(--kid-color-ocean-deep);outline-offset:var(--pt-space-island)}
#flowShell button svg,.flow-popover svg,#calmSettingsPanel button svg{width:var(--pt-hint-icon-size);height:var(--pt-hint-icon-size);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
#flowPrepare,#flowComplete,#flowInspect{position:fixed;inset:0;box-sizing:border-box;margin:0;padding:max(var(--pt-space-panel),env(safe-area-inset-top)) max(var(--pt-space-panel),env(safe-area-inset-right)) max(var(--pt-space-panel),env(safe-area-inset-bottom)) max(var(--pt-space-panel),env(safe-area-inset-left));background:var(--pt-ui-desk);overflow:auto;overscroll-behavior:contain}
#flowPrepare{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:0;height:100dvh;padding: max(var(--pt-chooser-padding),env(safe-area-inset-top)) 0 0;overflow:hidden}
/* Recovery owns readiness; do not paint the intermediate chooser before its groups exist. */
#app[aria-busy=true] #flowPrepare{visibility:hidden}
#flowPrepareTitle{grid-area:1/1;justify-self:center;max-width:calc(100% - var(--kid-size-target-min)*2);margin:0 0 var(--pt-space-compact);text-align:center;font-family:var(--kid-font-family);font-size:var(--pt-chooser-title-size);font-weight:var(--kid-font-weight-label);line-height:var(--pt-line-title)}
#flowPrepare>#flowCancelPrepare{grid-area:1/1;justify-self:start;margin-inline-start:max(var(--pt-space-panel),env(safe-area-inset-left))}
#flowChoices{grid-row:3;box-sizing:border-box;min-height:0;width:100%;overflow:auto;overscroll-behavior:contain;padding:var(--pt-space-control) max(var(--pt-space-panel),env(safe-area-inset-right),calc((100% - var(--pt-ui-choose-width))/2)) max(var(--pt-space-panel),env(safe-area-inset-bottom)) max(var(--pt-space-panel),env(safe-area-inset-left),calc((100% - var(--pt-ui-choose-width))/2));scroll-padding-block:var(--pt-space-compact)}
#flowChoiceGroups{grid-row:2;display:flex;justify-content:center;justify-self:center;max-width:100%;gap:var(--pt-space-compact);padding:0}
#flowChoiceGroups button{min-width:var(--pt-ui-category-min-width);font-weight:var(--kid-font-weight-body);color:var(--pt-ink-soft);display:flex;gap:var(--pt-space-compact);padding:var(--pt-space-compact) var(--pt-space-control);background:transparent;font-size:var(--kid-font-size-label);transition:background-color var(--pt-ui-feedback-time) var(--kid-motion-ease-out)}
#flowChoiceGroups .flow-theme-check{display:grid;place-items:center;flex-shrink:0;width:var(--pt-ui-category-check-size);height:var(--pt-ui-category-check-size);visibility:hidden}
#flowChoiceGroups .flow-theme-check svg{width:100%;height:100%}
#flowChoiceGroups [aria-pressed=true]{color:var(--kid-color-ink);font-weight:var(--kid-font-weight-label)}
#flowChoiceGroups [aria-pressed=true] .flow-theme-check{visibility:visible}
#flowPresets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-content:start;gap:var(--pt-space-control)}
#flowShell .flow-choice{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;gap:var(--pt-space-compact);padding:var(--pt-space-compact);background:var(--pt-ui-card-surface);border-radius:var(--kid-shape-card);box-shadow:none;font-size:var(--kid-font-size-label);text-align:center;transition:background-color var(--pt-ui-feedback-time) var(--kid-motion-ease-out)}
.flow-choice-art{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;width:100%;height:var(--pt-ui-choice-art-height);pointer-events:none}
#flowShell .flow-choice-art :is(img,svg){width:100%;height:100%;object-fit:contain}
#flowShell .flow-choice>span:not(.flow-choice-check){max-width:100%;font:inherit;overflow-wrap:anywhere;color:inherit}
#flowShell .flow-choice-check{display:none;position:absolute;top:var(--pt-space-compact);right:var(--pt-space-compact);color:var(--kid-color-leaf)}
#flowShell .flow-choice[aria-pressed=true]{background:var(--pt-ui-selection-fill)}
#flowShell .flow-choice[aria-pressed=true] .flow-choice-check{display:block}
#flowPresets[data-selected=true] .flow-choice[aria-pressed=false]{opacity:var(--pt-ui-unselected-opacity)}
.flow-start-actions{grid-row:4;display:flex;align-items:center;justify-content:center;gap:var(--pt-space-control);min-height:var(--kid-size-target-primary)}
.flow-start-actions:not(:has(button:not([hidden]))){display:none}
/* Keep transient messages above the chooser's reserved action row. */
body:has(#app[data-flow=prepare]) #toast{bottom:calc(var(--kid-size-target-primary) + var(--pt-space-panel) + max(var(--pt-space-panel),env(safe-area-inset-bottom)));width:max-content;max-width:calc(100vw - var(--pt-space-panel)*2);box-sizing:border-box;text-align:center;overflow-wrap:anywhere}
#flowSelectedName{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
#flowShell .flow-primary{width:var(--kid-size-target-primary);height:var(--kid-size-target-primary);min-height:var(--kid-size-target-primary);border-radius:var(--kid-shape-round);background:var(--kid-color-sun);color:var(--kid-color-ink);box-shadow:var(--kid-shadow-sun)}
#flowShell .flow-primary:not([hidden]){animation:pt-action-in var(--kid-motion-pop) var(--kid-motion-ease-spring)}
#flowShell #flowResumeArt{width:var(--pt-ui-preview-width);max-width:calc(100% - var(--pt-space-compact)*2);height:auto;aspect-ratio:var(--pt-ui-preview-ratio);object-fit:contain;background:var(--kid-color-paper);border-radius:var(--kid-shape-polaroid);box-shadow:var(--pt-ui-shadow-card);justify-self:center}
#flowPrepare.resume{padding:var(--pt-space-panel);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--pt-space-section)}
#flowPrepare.resume #flowStart{width:auto;padding-inline:var(--pt-space-panel);border-radius:var(--kid-shape-key)}
#flowComplete{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--pt-space-section)}
#flowArtworkCard{position:relative;flex-shrink:1;min-height:0;width:var(--pt-ui-preview-width);max-width:calc(100% - var(--pt-space-compact)*2);box-sizing:content-box;margin:0;padding:var(--pt-space-compact) var(--pt-space-compact) var(--pt-space-control);background:var(--kid-color-paper);border-radius:var(--kid-shape-polaroid);box-shadow:var(--pt-ui-shadow-card);transform:rotate(-2deg);animation:pt-art-land var(--pt-ui-art-land) var(--kid-motion-ease-spring)}
#flowArtworkCard::before{content:'';position:absolute;z-index:1;top:calc(-1 * var(--pt-space-compact));left:40%;width:20%;height:var(--pt-space-panel);background:var(--kid-color-sun);opacity:var(--pt-ui-tape-opacity);transform:rotate(4deg);pointer-events:none}
#flowShell #flowArtEdit{display:block;width:100%;height:100%;min-height:0;padding:0;background:transparent;border-radius:0}
#flowArtwork{display:block;width:100%;height:auto;aspect-ratio:var(--pt-ui-preview-ratio);object-fit:contain}
#flowSaved{position:absolute;right:var(--pt-space-section);bottom:var(--pt-space-control);display:grid;place-items:center;width:var(--kid-size-target-min);height:var(--kid-size-target-min);border:var(--pt-depth-sm) solid var(--kid-color-leaf);border-radius:var(--kid-shape-round);color:var(--kid-color-leaf);background:var(--kid-color-paper);transform:rotate(10deg);animation:pt-stamp var(--pt-ui-art-stamp) var(--kid-motion-ease-spring)}
#flowSaved svg{width:60%;height:60%;fill:none;stroke:currentColor;stroke-width:2.5}
#flowSaveNotice{margin:0;max-width:100%;color:var(--kid-color-ink);font-size:var(--kid-font-size-label);text-align:center}
.flow-art-actions,.flow-art-next{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--pt-ui-stack-gap)}
.flow-art-actions{flex-shrink:0}
#flowComplete[data-landed=false] .flow-art-actions{visibility:hidden}
#flowComplete[data-landed=true] .flow-art-actions{animation:pt-action-in var(--kid-motion-pop) var(--kid-motion-ease-spring)}
#flowShell .flow-art-actions>button:not(#flowSave){width:var(--kid-size-target-min);height:var(--kid-size-target-min)}
#flowShell #artworkHandoffBtn{position:relative;display:flex;flex-direction:column;min-width:var(--kid-size-target-primary);min-height:var(--kid-size-target-primary);padding:var(--pt-space-control);background:var(--kid-color-sun);color:var(--kid-color-ink);border:0;border-radius:var(--kid-shape-round);box-shadow:var(--kid-shadow-sun);font:inherit;font-size:var(--kid-font-size-label)}
#artworkHandoffIcon{display:none}
#flowInspect{display:flex;align-items:center;justify-content:center}
#flowInspectBack{position:absolute;left:var(--pt-space-panel);top:var(--pt-space-panel)}
#flowInspectPanel{width:min(100%,var(--kid-size-artwork-max));display:flex;flex-direction:column;align-items:center;gap:var(--pt-space-section)}
#flowInspectPanel figure{margin:0;width:100%;text-align:center}
#flowInspectArt :is(img,svg){width:100%;height:min(55dvh,var(--pt-ui-art-height));object-fit:contain}
#flowInspectName{font-size:var(--kid-font-size-label)}
#flowTooltip{position:fixed;z-index:1000;pointer-events:none;max-width:calc(100vw - var(--pt-space-panel));padding:var(--pt-space-compact) var(--pt-space-control);background:var(--kid-color-ink);color:var(--kid-color-paper);border-radius:var(--kid-shape-key);font-family:var(--kid-font-family);font-size:var(--kid-font-size-label)}
#flowIdleHand{position:fixed;z-index:40;width:var(--kid-size-chip);height:var(--kid-size-chip);pointer-events:none;transform:rotate(-15deg);animation:pt-hint var(--kid-motion-breathe) ease-in-out var(--pt-ui-hint-repeats)}
@keyframes pt-action-in{from{opacity:0;transform:translateY(20%) scale(.9)}to{opacity:1;transform:none}}
@keyframes pt-art-land{from{opacity:0;transform:translateY(-15%) rotate(3deg)}to{opacity:1;transform:rotate(-2deg)}}
@keyframes pt-stamp{from{opacity:0;transform:scale(1.5) rotate(10deg)}to{opacity:1;transform:scale(1) rotate(10deg)}}
@keyframes pt-hint{0%,100%{translate:0 0}50%{translate:0 var(--pt-space-compact)}}
@media(hover:hover) and (pointer:fine){#flowChoiceGroups button:hover{background:var(--pt-ui-choice-hover)}#flowShell .flow-choice:not(:disabled):not([aria-pressed=true]):hover{background:var(--pt-ui-choice-hover)}#flowShell :is(#flowHome,#flowDrawLesson,#flowDock button,#flowRest,#flowNew):not(:disabled):not([aria-pressed=true]):hover{background:var(--pt-ui-hud-surface)}}
@media(max-width:599px){#flowPresets{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--pt-space-control)}#flowPrepare,#flowComplete{padding: max(var(--pt-space-control),env(safe-area-inset-top)) max(var(--pt-space-control),env(safe-area-inset-right)) max(var(--pt-space-control),env(safe-area-inset-bottom)) max(var(--pt-space-control),env(safe-area-inset-left))}#flowPrepare{padding:max(var(--pt-chooser-padding-compact),env(safe-area-inset-top)) 0 0}#flowPrepareTitle{min-height:var(--kid-size-target-min);font-size:var(--pt-chooser-title-mobile);margin-bottom:var(--pt-space-island)}#flowChoices{padding-inline:max(var(--pt-space-control),env(safe-area-inset-left)) max(var(--pt-space-control),env(safe-area-inset-right))}}
@media(max-height:500px) and (orientation:landscape){#flowPrepare{padding-top:max(var(--pt-space-compact),env(safe-area-inset-top))}#flowPrepareTitle{font-size:var(--pt-chooser-title-landscape);margin-bottom:0}#flowChoices{padding-top:var(--pt-space-compact)}.flow-choice-art{height:var(--pt-ui-choice-art-short)}#flowChoiceGroups{margin:0;padding:0}#flowChoiceGroups button{flex-direction:row}#flowComplete{gap:var(--pt-space-control)}}
@media(prefers-reduced-motion:reduce){#flowShell *,#flowIdleHand{animation:none!important;transition:none!important;scroll-behavior:auto!important}#flowShell button,#calmSettingsPanel button,.flow-popover button{scale:none!important}}