/* Sketchpad: a control bar, a stacked pair of canvases, and an action row. Chrome uses the theme
   tokens; the canvas contents deliberately do not, because a downloaded PNG must not change
   appearance with the site theme. */

.sk-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
    margin: 20px 0 12px;
}
.sk-bar--paper { margin-top: 0; }
.sk-field { display: flex; align-items: center; gap: 8px; }
.sk-label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sk-size-out { font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace; font-size: 13px; min-width: 2.5ch; }
.sk-color { width: 42px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: none; }
.sk-check { display: flex; align-items: center; gap: 7px; font-size: 14px; }

.sk-swatches { display: flex; gap: 6px; }
.sk-swatch {
    width: 26px; height: 26px; padding: 0; cursor: pointer;
    border: 1px solid var(--border); border-radius: 50%;
}
.sk-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sk-swatch--paper { border-radius: 8px; }
.sk-swatch--paper.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-weak); }

/* The stage is the positioning context for the two canvases; the paper one sits under the ink
   one, both filling it exactly. Height is set by the controller from the page aspect ratio. The
   ratio below matches the default landscape page preset and reserves the right height before the
   lazy controller loads, so the layout does not jump; the controller keeps it in sync from
   onPage() and _resize() once a page is chosen or restored. */
.sk-stage {
    position: relative; width: 100%;
    aspect-ratio: 1600 / 1067;
    border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
.sk-canvas { display: block; width: 100%; }
.sk-canvas--paper { position: absolute; inset: 0; }
.sk-canvas--ink {
    position: relative;
    /* Touch and pen input must reach the canvas as drawing, not as a page scroll, and a drag
       must not turn the surroundings into a text selection. */
    touch-action: none;
    -webkit-user-select: none; user-select: none;
    cursor: crosshair;
}

.sk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.sk-spacer { flex: 1 1 auto; }
.sk-status { margin-top: 10px; min-height: 1.2em; font-size: 13.5px; color: var(--muted); }
.sk-hint { margin-top: 2px; font-size: 12.5px; color: var(--muted); }

@media (max-width: 720px) {
    .sk-bar { gap: 8px 12px; }
    .sk-spacer { display: none; }
    .sk-hint { display: none; }  /* the shortcuts are keyboard-only */
}