/* Colour dial: one heavy turntable in the bottom-right corner (colours / pens / thickness faces), undo and redo beside it.
   Values: design-tokens.json pt-dial-*; pen-tray.js reads the same custom properties for its geometry. The same media conditions
   set --pt-workspace-draw-bottom and --pt-fit-inset-right below, so fitView() keeps most of the paper clear of the dial. */

/* ---- Paper reserve (read by fitView). The dial fades while drawing, so only part of its corner is reserved. ---- */
#app[data-two-stage=true]{--pt-workspace-draw-bottom:calc(var(--pt-dial-reserve) + env(safe-area-inset-bottom,0px))}
@media(orientation:portrait) and (max-width:760px){#app[data-two-stage=true]{--pt-workspace-draw-bottom:calc(var(--pt-dial-reserve-sm) + env(safe-area-inset-bottom,0px))}}
@media(orientation:landscape){#app[data-two-stage=true]{--pt-workspace-draw-bottom:calc(var(--pt-tray-landscape-bottom) + env(safe-area-inset-bottom,0px));--pt-fit-inset-left:0px;--pt-fit-inset-right:calc(var(--pt-dial-reserve-side) + env(safe-area-inset-right,0px))}}
@media(orientation:landscape) and (max-height:560px){#app[data-two-stage=true]{--pt-workspace-draw-top:var(--pt-v5-draw-top-sm);--pt-fit-inset-right:calc(var(--pt-dial-reserve-side-sm) + env(safe-area-inset-right,0px))}}

/* ---- Sizes: phones and short landscape use the small dial ---- */
#flowTray{display:contents}
#flowTray[hidden]{display:none}
@media(orientation:portrait) and (max-width:760px),(orientation:landscape) and (max-height:560px){
 #flowTray{--pt-dial-ro:var(--pt-dial-ro-sm);--pt-dial-ri:var(--pt-dial-ri-sm);--pt-dial-crayon-l:var(--pt-dial-crayon-l-sm);--pt-dial-crayon-w:var(--pt-dial-crayon-w-sm);--pt-dial-step:var(--pt-dial-step-sm);--pt-dial-chip:var(--pt-dial-chip-sm);--pt-dial-hub:var(--pt-dial-hub-sm);--pt-dial-rim:var(--pt-dial-rim-sm);--pt-dial-inset:var(--pt-dial-inset-sm);--pt-dial-knob:var(--pt-dial-knob-sm)}
}

/* ---- The dial ---- */
#flowDial{--R:var(--dial-r,200px);position:fixed;z-index:var(--kid-z-hud);width:calc(var(--R) * 2);height:calc(var(--R) * 2);right:calc(env(safe-area-inset-right,0px) + var(--pt-dial-inset) - var(--R));bottom:calc(env(safe-area-inset-bottom,0px) + var(--pt-dial-inset) - var(--R));clip-path:circle(50%);touch-action:none;user-select:none;-webkit-user-select:none;animation:dial-in var(--kid-motion-sheet) var(--kid-motion-ease-out)}
@keyframes dial-in{from{transform:translate(var(--pt-tray-sheet-shift),var(--pt-tray-sheet-shift));opacity:0}}
/* A quiet paper face with one fine rim; no wide band. */
#flowDial .dial-disc{position:absolute;inset:0;border-radius:var(--kid-shape-round);background:var(--pt-v5-chip);box-shadow:inset 0 0 0 var(--pt-depth-sm) var(--pt-v5-chip-edge)}
#flowDial button{position:absolute;display:grid;place-items:center;min-width:0;min-height:0;padding:0;border:0;background:transparent;color:var(--pt-v5-ink);font:inherit;cursor:pointer;touch-action:none}
#flowDial :focus-visible{outline:var(--pt-depth-sm) solid var(--pt-v5-leaf);outline-offset:var(--pt-depth-sm)}
#flowDial .dial-face{position:absolute;inset:0;pointer-events:none;transition:opacity var(--kid-motion-mid) var(--kid-motion-ease-out),visibility 0s linear var(--kid-motion-mid)}
#flowDial .dial-face[data-on=true]{transition:opacity var(--kid-motion-mid) var(--kid-motion-ease-out)}
#flowDial .dial-face[data-on=false]{opacity:0;visibility:hidden}
#flowDial .dial-face button{pointer-events:auto}

/* Colours: crayons ride the ring, tips outward; the chosen one slides out and gets a dot at its foot. */
#flowDial .dial-rot{position:absolute;left:50%;top:50%;width:0;height:0}
#flowDial .dial-rot.spring{transition:transform var(--kid-motion-mid) var(--kid-motion-ease-out)}
#flowDial .dial-crayon{left:0;top:0;width:var(--pt-dial-crayon-w);height:var(--pt-dial-crayon-l);margin:calc(var(--pt-dial-crayon-l) / -2) 0 0 calc(var(--pt-dial-crayon-w) / -2)}
#flowShell #flowDial button svg{stroke:none}
#flowDial :is(.dial-crayon,.dial-pen) svg{display:block;width:100%;height:100%;overflow:visible;transition:transform var(--kid-motion-mid) var(--kid-motion-ease-out)}
#flowDial :is(.dial-crayon,.dial-pen)[aria-pressed=true] svg{transform:translateY(calc(var(--pt-dial-crayon-l) * -.2))}
#flowDial :is(.dial-crayon,.dial-pen)[aria-pressed=true]::after{content:"";position:absolute;left:50%;bottom:calc(-1 * var(--pt-tray-dot));width:var(--pt-tray-dot);height:var(--pt-tray-dot);margin-left:calc(-0.5 * var(--pt-tray-dot));border-radius:var(--kid-shape-round);background:var(--pt-v5-ink)}
@media(hover:hover) and (pointer:fine){#flowDial .dial-crayon:not([aria-pressed=true]):hover svg{transform:translateY(calc(var(--pt-dial-crayon-l) * -.1))}}
#flowDial.nudge .dial-rot{animation:dial-nudge 1100ms var(--kid-motion-ease-out) 300ms 1}
@keyframes dial-nudge{30%{transform:rotate(calc(var(--dial-rot) - 10deg))}65%{transform:rotate(calc(var(--dial-rot) + 4deg))}}

/* Pens: four chunky pens spread over the arc. */
#flowDial .dial-pen{width:calc(var(--pt-dial-crayon-w) * 1.4);height:calc(var(--pt-dial-crayon-l) * 1.1);margin:calc(var(--pt-dial-crayon-l) * -.55) 0 0 calc(var(--pt-dial-crayon-w) * -.7)}

/* Thickness: a wedge that grows towards the top; the filled part and the knob show the current size. */
#dialSizeArt{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#dialSizeArt .dial-wedge{fill:var(--pt-v5-chip-edge)}
#dialSizeArt .dial-wedge-fill{fill:var(--pt-v5-cur,var(--pt-v5-ink))}
#flowDial #dialKnob{width:var(--pt-dial-knob);height:var(--pt-dial-knob);margin:calc(var(--pt-dial-knob) / -2) 0 0 calc(var(--pt-dial-knob) / -2);border-radius:var(--kid-shape-round);background:var(--pt-v5-chip);box-shadow:inset 0 0 0 var(--pt-v5-check-ring) var(--pt-v5-ink),0 var(--pt-flow-edge) 0 var(--pt-v5-chip-edge)}

/* Inner chips and hub */
#flowDial .dial-chip{width:var(--pt-dial-chip);height:var(--pt-dial-chip);margin:calc(var(--pt-dial-chip) / -2) 0 0 calc(var(--pt-dial-chip) / -2);border-radius:var(--kid-shape-round);background:var(--pt-v5-chip);box-shadow:var(--pt-v5-chip-lift);transition:transform var(--kid-motion-fast) var(--kid-motion-ease-out),box-shadow var(--kid-motion-fast)}
#flowDial .dial-chip:active{transform:translateY(var(--pt-v5-press));box-shadow:var(--pt-v5-chip-press)}
/* Yellow belongs to the current step only; an open dial face is marked in ink. */
#flowDial .dial-chip[aria-pressed=true]{background:var(--pt-v5-ink);box-shadow:0 var(--pt-v5-edge) 0 var(--pt-dial-chip-on-edge)}
#dialSizeChip[aria-pressed=true] i{box-shadow:0 0 0 var(--pt-depth-sm) var(--pt-v5-ink),0 0 0 calc(var(--pt-depth-sm) * 2) var(--pt-v5-tip-ink)}
#flowDial .dial-chip::before{content:"";position:absolute;inset:calc(-1 * var(--pt-hit-pad));border-radius:inherit}
#dialPenChip svg{width:40%;height:80%;rotate:45deg}
#dialSizeChip i{display:block;width:var(--dial-dot,12px);height:var(--dial-dot,12px);border-radius:var(--kid-shape-round);background:var(--pt-v5-cur,var(--pt-v5-ink));box-shadow:0 0 0 var(--pt-depth-sm) var(--pt-v5-chip)}
#flowDial #dialHub{left:50%;top:50%;width:calc(var(--pt-dial-hub) * 2);height:calc(var(--pt-dial-hub) * 2);translate:-50% -50%;border-radius:var(--kid-shape-round);background:var(--pt-v5-chip);box-shadow:var(--pt-v5-chip-lift)}
/* Only the top-left part of the hub is on screen, so the colour sits there. */

/* ---- Undo / redo beside the dial ---- */
#flowRound{position:fixed;z-index:var(--kid-z-hud);bottom:max(var(--pt-tray-edge),env(safe-area-inset-bottom));right:calc(env(safe-area-inset-right,0px) + var(--pt-dial-inset) + var(--dial-r,200px) + var(--pt-dial-gap));display:flex;flex-direction:row-reverse;gap:var(--pt-dial-gap)}
#flowRound button{position:relative;display:grid;place-items:center;min-width:0;min-height:0;width:var(--pt-tray-chip);height:var(--pt-tray-chip);padding:0;border:0;border-radius:var(--kid-shape-round);background:var(--pt-v5-chip);color:var(--pt-v5-ink);box-shadow:var(--pt-v5-chip-lift);cursor:pointer;touch-action:manipulation}
#flowRound button[hidden]{display:none}
#flowRound button::before{content:"";position:absolute;inset:calc(-1 * var(--pt-hit-pad));border-radius:inherit}
#flowRound button svg{width:var(--pt-v5-icon);height:var(--pt-v5-icon);fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
#flowRound button:active:not(:disabled){transform:translateY(var(--pt-v5-press));box-shadow:var(--pt-v5-chip-press)}
#flowRound button:disabled{opacity:.4;cursor:default}
#flowRound button:focus-visible{outline:var(--pt-depth-sm) solid var(--pt-v5-leaf);outline-offset:var(--pt-depth-sm)}
#flowRound #redoBtn:not([hidden]){animation:tray-fade var(--kid-motion-mid) var(--kid-motion-ease-out)}
@keyframes tray-fade{from{opacity:0}}

/* ---- Focus: everything folds into one fat crayon lying in the corner, its tail off screen; nothing pops back between strokes ---- */
#flowShell #dialToken{--box:var(--pt-dial-token-box);min-width:0;min-height:0;position:fixed;z-index:var(--kid-z-hud);right:env(safe-area-inset-right,0px);bottom:env(safe-area-inset-bottom,0px);width:var(--box);height:var(--box);display:block;padding:0;border:0;border-radius:100% 0 0 0;background:transparent;box-shadow:none;overflow:hidden;cursor:pointer;touch-action:manipulation;opacity:0;visibility:hidden;translate:var(--pt-dial-token-hide) var(--pt-dial-token-hide);transition:opacity var(--kid-motion-mid) var(--kid-motion-ease-out),translate var(--kid-motion-mid) var(--kid-motion-ease-out),visibility 0s linear var(--kid-motion-mid)}
#flowShell #dialToken svg{position:absolute;inset:0;width:100%;height:100%;stroke:none;filter:drop-shadow(0 2px 3px rgba(31,58,68,.22))}
#flowShell #dialToken:active{translate:4% 4%}
#flowShell #dialToken:focus-visible{outline:var(--pt-depth-sm) solid var(--pt-v5-leaf);outline-offset:calc(-2 * var(--pt-depth-sm))}
@media(orientation:portrait) and (max-width:760px),(orientation:landscape) and (max-height:560px){#flowShell #dialToken{--box:var(--pt-dial-token-box-sm)}}
#app[data-focus=true] #flowShell #dialToken{opacity:1;visibility:visible;translate:0 0;transition:opacity var(--kid-motion-mid) var(--kid-motion-ease-out) var(--kid-motion-fast),translate var(--kid-motion-mid) var(--kid-motion-ease-out) var(--kid-motion-fast)}
#app[data-focus=true][data-hud-quiet=true] #flowShell #dialToken{opacity:var(--pt-dial-token-quiet);transition:opacity var(--kid-motion-fast)}
#app[data-focus=true] :is(#flowDial,#flowRound,#flowReferenceWindow,#flowUtilities,#flowRefCard,#flowDemo){opacity:0!important;visibility:hidden;pointer-events:none;transition:opacity var(--kid-motion-mid) var(--kid-motion-ease-out),scale var(--kid-motion-mid) var(--kid-motion-ease-out),visibility 0s linear var(--kid-motion-mid)}
#app[data-focus=true] #flowDial{scale:var(--pt-dial-fold-scale)}
/* Only 画好了 stays at the top while folded; it appears on its own when the board is ready. */
#app[data-focus=true] #flowSteps{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
#app[data-focus=true] #flowSteps>:not(#flowDone){display:none}

/* ---- Scrims: paper-coloured fades (the current paper, never a colour) behind the control corner and the top edge ---- */
.flow-scrim{position:fixed;z-index:calc(var(--kid-z-hud) - 1);pointer-events:none;transition:opacity var(--kid-motion-mid) var(--kid-motion-ease-out),scale var(--kid-motion-mid) var(--kid-motion-ease-out)}
#flowScrimCorner{--size:calc((var(--dial-r,200px) + var(--pt-dial-inset)) * var(--pt-scrim-corner-scale));right:0;bottom:0;width:var(--size);height:var(--size);transform-origin:100% 100%;background:radial-gradient(circle var(--size) at 100% 100%,color-mix(in srgb,var(--paper-now,#fff) var(--pt-scrim-strong),transparent) 0,color-mix(in srgb,var(--paper-now,#fff) var(--pt-scrim-mid),transparent) 52%,transparent 80%)}
#flowScrimTop{left:0;right:0;top:0;height:calc(max(var(--pt-v5-top),env(safe-area-inset-top)) + var(--pt-v5-node) + var(--pt-scrim-top-extra));background:linear-gradient(color-mix(in srgb,var(--paper-now,#fff) var(--pt-scrim-strong),transparent),color-mix(in srgb,var(--paper-now,#fff) 55%,transparent) 55%,transparent)}
#app[data-focus=true] #flowScrimCorner{scale:var(--scrim-fold,.5)}
#app[data-focus=true]:not(:has(#flowDone:not([hidden]))) #flowScrimTop{opacity:0}
#app[data-flow=draw][data-hud-quiet=true] .flow-scrim{opacity:0;transition:opacity var(--kid-motion-fast)}

/* ---- Material: frameless. The dial is no plate, just a paper fade under the crayons; chips are pale translucent paper with soft
   shadows, no outlines and no blur (DESIGN.md section 11). The grain crayon images carry the artwork. ---- */
#flowSteps,#flowReferenceWindow #flowHome,#flowUtilities>#settingsCorner,#flowDial,#flowRound{--pt-v5-chip-lift:var(--pt-board-chip-lift);--pt-v5-chip-press:var(--pt-board-chip-press)}
#flowDial .dial-disc{box-shadow:none;background:radial-gradient(circle closest-side,color-mix(in srgb,var(--pt-v5-chip) var(--pt-dial-fade-center),transparent) 0,color-mix(in srgb,var(--pt-v5-chip) var(--pt-dial-fade-center),transparent) calc(var(--pt-dial-ri) + var(--pt-dial-chip) / 2),color-mix(in srgb,var(--pt-v5-chip) var(--pt-dial-fade-ring),transparent) var(--pt-dial-ro),transparent 100%)}
#flowDial .dial-groove{display:none}
#flowShell #flowDial .dial-chip,#flowRound button{background:var(--pt-glass-surface)}
#flowShell #flowDial .dial-chip[aria-pressed=true]{background:var(--pt-dial-chip-on);box-shadow:var(--pt-v5-chip-lift)}
#flowDial .dial-crayon img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none;filter:drop-shadow(var(--pt-dial-crayon-shadow));transition:transform var(--kid-motion-mid) var(--kid-motion-ease-out)}
#flowDial .dial-crayon[aria-pressed=true] img{transform:translateY(calc(var(--pt-dial-crayon-l) * -.2))}
@media(hover:hover) and (pointer:fine){#flowDial .dial-crayon:not([aria-pressed=true]):hover img{transform:translateY(calc(var(--pt-dial-crayon-l) * -.1))}}
/* Hub: a paint dab in the current colour. */
#flowShell #flowDial #dialHub{background:transparent;box-shadow:none;border-radius:0}
#flowShell #flowDial #dialHub:active{scale:.95}
#flowDial .dial-dab{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#flowDial .dial-dab-paint{fill:var(--pt-v5-cur,var(--pt-v5-ink));filter:drop-shadow(var(--pt-dial-crayon-shadow));transition:fill var(--kid-motion-fast)}
#flowDial .dial-dab-shine{fill:none;stroke:var(--pt-v5-tip-ink);stroke-opacity:.55;stroke-width:3.5;stroke-linecap:round}
#flowShell #flowDial #dialHub:focus-visible{outline:var(--pt-depth-sm) solid var(--pt-v5-leaf);outline-offset:calc(-1 * var(--pt-dial-hub))}
/* The folded crayon token. */
#flowShell #dialToken img.dial-token-crayon{position:absolute;width:68%;height:102%;left:31%;top:13%;rotate:-45deg;object-fit:contain;pointer-events:none;filter:drop-shadow(var(--pt-dial-token-shadow))}
#flowShell #dialToken svg{filter:drop-shadow(var(--pt-dial-token-shadow))}

/* ---- Rest dim: open controls sit a little faded while nothing is touched; a touch, hover or keyboard focus brings them back ---- */
#app[data-flow=draw]:not([data-focus=true]):not([data-hud-quiet=true]) :is(#flowSteps,#flowReferenceWindow,#flowUtilities,#flowDial,#flowRound){opacity:var(--pt-hud-rest-opacity);transition:opacity var(--kid-motion-slow) var(--kid-motion-ease-out)}
#app[data-flow=draw]:not([data-focus=true]):not([data-hud-quiet=true]) :is(#flowSteps,#flowReferenceWindow,#flowUtilities,#flowDial,#flowRound):has(:focus-visible),
#app[data-flow=draw][data-hud-wake=true]:not([data-focus=true]):not([data-hud-quiet=true]) :is(#flowSteps,#flowReferenceWindow,#flowUtilities,#flowDial,#flowRound){opacity:1;transition:opacity var(--kid-motion-fast)}
@media(hover:hover) and (pointer:fine){#app[data-flow=draw]:not([data-focus=true]):not([data-hud-quiet=true]) :is(#flowSteps,#flowReferenceWindow,#flowUtilities,#flowDial,#flowRound):hover{opacity:1;transition:opacity var(--kid-motion-fast)}}

@media(prefers-reduced-motion:reduce){#flowSteps,#flowReferenceWindow,#flowUtilities,#flowDial,#flowDial *,#flowRound,#flowRound *,#flowName,#dialToken,.flow-scrim{transition:none!important;animation:none!important}}
[data-motion=reduced] :is(#flowSteps,#flowReferenceWindow,#flowUtilities,#flowDial,#flowDial *,#flowRound,#flowRound *,#flowName,#dialToken,.flow-scrim){transition:none!important;animation:none!important}