/**
 * Switchable tools with an outer, full-height navigation strip.
 * Author: Rolf-Peter Blümlein. Version: 1.4.29. No site template overrides.
 */
.coloring-app .paint-workspace {
    --paint-menu-width: clamp(10rem, 27vw, 16.5rem);
}

/* Keep both columns even on narrow screens; the strip does not scroll with tools. */
.coloring-app[data-coloring-app] .paint-workspace .paint-layout {
    grid-template-columns: minmax(0, 1fr) var(--paint-menu-width);
    align-items: stretch;
    gap: .75rem;
}

.coloring-app .paint-workspace .paint-sidebar {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    top: auto;
    align-self: stretch;
    width: 100%;
    height: 100%;
    max-height: none;
    min-width: 0;
    overflow: visible;
}

.coloring-app .paint-workspace .canvas-shell {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

/* Mirror the whole column, not only the colour/pencil contents. */
.coloring-app[data-menu-side="left"][data-phone-mode="0"] .paint-workspace .paint-layout {
    grid-template-columns: var(--paint-menu-width) minmax(0, 1fr);
}
.coloring-app[data-menu-side="left"][data-phone-mode="0"] .paint-workspace .paint-sidebar { grid-column: 1; }
.coloring-app[data-menu-side="left"][data-phone-mode="0"] .paint-workspace .canvas-shell { grid-column: 2; }
.coloring-app[data-menu-side="left"] .paint-workspace .paint-sidebar { flex-direction: row-reverse; }

.coloring-app .paint-workspace .paint-tools-scroll {
    position: sticky;
    top: 0;
    align-self: flex-start;
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    max-height: 100vh;
    max-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

.coloring-app .paint-sidebar.is-viewport-docked .paint-tools-scroll {
    position: relative;
    top: 0;
    align-self: stretch;
    height: 100%;
    max-height: 100%;
}

.coloring-app[data-coloring-app] .paint-workspace .paint-scroll-zone {
    align-self: stretch;
    height: auto;
    min-height: 0;
    flex-shrink: 0;
}

/* Keep the hint visible while the full-page strip itself continues downwards. */
.coloring-app .paint-scroll-zone span {
    position: sticky;
    top: 50vh;
    align-self: start;
}

.coloring-app[data-coloring-app] .paint-workspace .paint-tools {
    width: auto;
    height: auto;
    min-width: 0;
    flex: 1 1 0;
    overflow-wrap: anywhere;
}

.coloring-app .paint-tools .palette {
    grid-template-columns: repeat(auto-fit, minmax(28px, 1fr));
}

.coloring-app .paint-tools .paint-actions {
    grid-template-columns: minmax(0, 1fr);
}

/* The native page may zoom. Only the tools receive inverse compensation;
   visual-viewport coordinates keep them at the selected visible side. */
.coloring-app .paint-workspace .paint-sidebar.is-viewport-docked {
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: var(--paint-menu-width);
    max-width: var(--paint-dock-width);
    height: var(--paint-dock-height);
    max-height: none;
    transform-origin: 0 0;
    transform: translate(var(--paint-dock-x), var(--paint-dock-y)) scale(var(--paint-dock-scale));
    background: var(--panel, #f7f7fb);
}

/* All menu content, including help, scrolls together without a pinned header. */
.coloring-app .paint-account-status { margin: .4rem 0; color: var(--ink, #172033); }
.coloring-app .paint-account-status:empty { display: none; }

/* A separate section below the brushes; native range control stays keyboard usable. */
.coloring-app .paint-desktop-zoom {
    border-top: 1px solid var(--line, #d6dae3);
    margin-top: .75rem;
    padding-top: .75rem;
}
.coloring-app .paint-desktop-zoom[hidden] { display: none; }
.coloring-app .paint-desktop-zoom label { display: grid; gap: .35rem; }
.coloring-app .paint-desktop-zoom input { width: 100%; min-width: 0; }

/* Only the image grows. A fixed unzoomed viewport exposes native scrollbars,
   instead of clipping the far edges or enlarging the adjacent tool menu. */
.coloring-app[data-desktop-zoom="1"] {
    box-sizing: border-box;
    width: var(--paint-desktop-width, 90vw);
    max-width: none;
    margin-left: var(--paint-desktop-offset, 0px);
    margin-right: 0;
}
.coloring-app[data-desktop-zoom="1"] .paint-workspace .canvas-shell {
    box-sizing: border-box;
    align-self: start;
    overflow: auto;
    overscroll-behavior: auto;
}

/* Right-button navigation never changes the current drawing tool. */
.coloring-app .canvas-shell.is-mouse-panning,
.coloring-app .canvas-shell.is-mouse-panning canvas { cursor: grabbing; }