/* Approved proposal A. Each face is a responsive CSS window onto the original
   artwork, not a re-created icon. Hit areas, labels and state stay real HTML.
   Source sprite: 1295 x 1215. Only the button windows are ever displayed. */
#coloring-studio :where(.studio-header, .studio-app-toolbar) :where(.studio-button) {
    --glossy-art: url('../web-assets/coloring-studio-glossy-a-v1.png');
    --tile: 172;
    --tile-x: 5;
    --tile-y: 5;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    border-radius: 28%;
    isolation: isolate;
}
#coloring-studio .studio-app-toolbar .studio-button,
#coloring-studio .studio-zoom-actions .studio-button { position: relative; }
#coloring-studio :is(.studio-header, .studio-app-toolbar) .studio-button::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    clip-path: inset(0 round 28%);
    background-image: var(--glossy-art);
    background-repeat: no-repeat;
    background-size: calc(1295 / var(--tile) * 100%) calc(1215 / var(--tile) * 100%);
    background-position: calc(var(--tile-x) / (1295 - var(--tile)) * 100%)
        calc(var(--tile-y) / (1215 - var(--tile)) * 100%);
}
#coloring-studio :is(.studio-header, .studio-app-toolbar) .studio-button > :is(svg, img) {
    visibility: hidden;
    pointer-events: none;
}
#coloring-studio :is(.studio-header, .studio-app-toolbar) .studio-button:focus-visible {
    outline: 3px solid #6321d8;
    outline-offset: 3px;
}
#coloring-studio :is(.studio-header, .studio-app-toolbar) .studio-button:disabled {
    opacity: 1;
    filter: saturate(.45);
    cursor: default;
}
#coloring-studio :is(.studio-header, .studio-app-toolbar) .studio-button:disabled:active {
    transform: none;
}
#coloring-studio [data-close-studio] { --tile: 172; --tile-x: 5; --tile-y: 5; }
#coloring-studio [data-change-picture] { --tile: 172; --tile-x: 176; --tile-y: 5; }
#coloring-studio .studio-header [data-sound-toggle] { --tile: 184; --tile-x: 914; --tile-y: 0; }
#coloring-studio .studio-header [data-sound-toggle][aria-pressed='false'] {
    --glossy-art: url('../web-assets/coloring-studio-glossy-a-states-v1.png');
}
#coloring-studio [data-action='clear'] { --tile: 190; --tile-x: 4; --tile-y: 507; }
#coloring-studio [data-action='undo'] { --tile: 168; --tile-x: 4; --tile-y: 1036; }
#coloring-studio [data-action='redo'] { --tile: 168; --tile-x: 168; --tile-y: 1036; }
#coloring-studio [data-action='undo']:not(:disabled),
#coloring-studio [data-action='redo']:not(:disabled) {
    --glossy-art: url('../web-assets/coloring-studio-glossy-a-states-v1.png');
}
#coloring-studio [data-action='zoom-out'] { --tile: 132; --tile-x: 444; --tile-y: 1064; }
#coloring-studio [data-action='zoom-reset'] { --tile: 132; --tile-x: 585; --tile-y: 1064; }
#coloring-studio [data-action='zoom-in'] { --tile: 132; --tile-x: 720; --tile-y: 1064; }
#coloring-studio [data-action='done'] { --tile: 186; --tile-x: 1094; --tile-y: 1021; }
#coloring-studio .studio-app-toolbar [data-tool='brush'] {
    --glossy-art: url('../web-assets/coloring-studio-glossy-a-states-v1.png');
    --tile: 196; --tile-x: 1083; --tile-y: 310;
}
#coloring-studio .studio-app-toolbar [data-tool='fill'] {
    --tile: 196; --tile-x: 1083; --tile-y: 506;
}
#coloring-studio .studio-app-toolbar [data-tool='eraser'] {
    --tile: 196; --tile-x: 1083; --tile-y: 696;
}
/* Selection is live, never baked into the pink pencil: it follows every tool. */
#coloring-studio .studio-app-toolbar .studio-button.is-selected {
    outline: 4px solid #8a48ed;
    outline-offset: -2px;
    border-radius: 29%;
}
#coloring-studio .studio-app-toolbar .studio-button.is-selected::after {
    content: '✓' / '';
    position: absolute;
    top: -4%; right: -3%;
    display: grid; place-items: center;
    width: 29%; height: 29%;
    min-width: 22px; min-height: 22px;
    border: 3px solid white;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 20%, #c199ff, #8a42f1 65%, #6930cf);
    box-shadow: inset 0 2px 2px #ffffff80, 0 2px 6px #50369440;
    color: white;
    font-family: 'Nunito', sans-serif;
    font-size: clamp(18px, 2.4vw, 26px);
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}
#coloring-studio .studio-app-toolbar .studio-button.is-selected:focus-visible {
    box-shadow: 0 0 0 3px white, 0 0 0 6px #132968;
}
/* The color face must follow the actual selected paint, not a fixed pink image. */
#coloring-studio .studio-header [data-panel-toggle='colors'] {
    padding: 7px;
    border: 4px solid white;
    border-radius: 50%;
    background: #edf2ff;
    box-shadow: inset 0 0 0 2px #d9e5ff, 0 4px 0 #dbe4fc, 0 7px 15px #7165cf24;
}
#coloring-studio .studio-header [data-panel-toggle='colors']::before { content: none; }
#coloring-studio .paint-pot {
    background: radial-gradient(ellipse at 40% 28%, #ffffff1c, transparent 65%), var(--active-color, #f35b8f);
    box-shadow: inset 0 3px 3px #ffffff73, inset 0 -5px 6px #45005824,
        inset 0 0 0 2px #ffffff65, 0 0 0 2px white;
}
#coloring-studio .paint-pot::after {
    width: 27%; height: 14%; top: 16%; left: 16%;
    background: linear-gradient(120deg, #ffffffcf, #ffffff70);
}
#coloring-studio .studio-header [data-panel-toggle='colors'][aria-expanded='true'] {
    outline: 3px solid #8a48ed;
    outline-offset: 2px;
}
/* Rainbow is a real changing tool state, not the ordinary pencil sprite. */
#coloring-studio.is-rainbow-pencil .studio-app-toolbar [data-tool='brush'] {
    padding: 0;
    border: 4px solid white;
    background: radial-gradient(ellipse at 28% 12%, #ffffff90, transparent 55%),
        linear-gradient(125deg, #ffc6dc, #fff0a9 40%, #b9e9dc 70%, #d8cafa);
    box-shadow: inset 0 3px 0 #ffffffba, inset 0 -4px 0 #6850be20, 0 5px 10px #7165cf24;
}
#coloring-studio.is-rainbow-pencil .studio-app-toolbar [data-tool='brush']::before { content: none; }
#coloring-studio.is-rainbow-pencil .studio-app-toolbar .rainbow-draw-icon {
    visibility: visible;
    width: 70%; height: 70%;
}
/* High-contrast mode uses the existing native icons instead of raster faces. */
@media (forced-colors: active) {
    #coloring-studio :is(.studio-header, .studio-app-toolbar) .studio-button {
        border: 2px solid ButtonText;
        background: ButtonFace;
        color: ButtonText;
        opacity: 1;
        filter: none;
    }
    #coloring-studio :is(.studio-header, .studio-app-toolbar) .studio-button::before { content: none; }
    #coloring-studio :is(.studio-header, .studio-app-toolbar) .studio-button > :is(svg, img) { visibility: visible; }
    #coloring-studio .studio-app-toolbar .studio-button.is-selected { outline: 4px solid Highlight; }
    #coloring-studio :is(.studio-header, .studio-app-toolbar) .studio-button:disabled { color: GrayText; border-color: GrayText; }
    #coloring-studio .studio-app-toolbar .studio-button.is-selected::after { background: Highlight; color: HighlightText; }
}