/* Art & Photo Editing pages (Issue #186): editor controls, toolbar and the scrollable picture. */
.art-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 24px;align-items:start}
.art-choice{border:0;padding:0;margin:0}
.art-choice legend{padding:0;margin-bottom:6px}
.art-choice label{display:inline-flex;align-items:center;gap:6px;margin:4px 16px 4px 0;font-weight:600}
.art-choice input{width:auto;margin:0}
.art-colour input{max-width:120px;height:44px;padding:4px}
.art-select-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:10px 0}
.art-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:20px 0 10px}
.art-toolbar .button{padding:8px 13px;margin:0}
.art-toolbar-gap{flex:1 1 auto}
.art-zoom{display:inline-flex;align-items:center;gap:6px}
.art-zoom-value{min-width:3.5em;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.art-viewport{max-height:70vh;overflow:auto;border:1px solid var(--line);border-radius:12px;background:repeating-conic-gradient(#eef1f3 0 25%,#fff 0 50%) 50%/22px 22px}
.art-stage.crop-stage{display:block;margin:0;max-width:none}
.art-stage canvas.art-canvas{display:block;max-width:none;max-height:none;image-rendering:auto}
.art-stage.art-mode-brush canvas.art-canvas{touch-action:none;cursor:crosshair}
/* The site's .crop-stage canvas rule caps canvases at 500 px tall; the brush layer must keep the picture's exact box. */
.art-overlay{position:absolute;left:0;top:0;pointer-events:none}
.art-stage canvas.art-overlay{max-width:none;max-height:none}
@media(max-width:700px){.art-controls{grid-template-columns:1fr}.art-select-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.art-target-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
.art-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.art-actions .button{margin:0}
.art-target{cursor:default;border-style:dashed}
.art-ring,.art-source{position:absolute;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;box-sizing:border-box}
.art-ring{border:2px solid #fff;outline:1px solid rgba(24,34,45,.7)}
.art-source{border:2px dashed #fff;outline:1px solid rgba(24,34,45,.7)}
/* Square, rectangle and stamp brushes (Issue #198) have square-cornered outlines. */
.art-ring.art-box,.art-source.art-box{border-radius:0}
/* The cross keeps a fixed 14 px so the source point stays visible when a small brush makes the ring tiny. */
.art-source::before,.art-source::after{content:"";position:absolute;left:50%;top:50%;background:#fff;box-shadow:0 0 0 1px rgba(24,34,45,.65)}
.art-source::before{width:2px;height:14px;margin:-7px 0 0 -1px}
.art-source::after{width:14px;height:2px;margin:-1px 0 0 -7px}
.art-guide{margin:4px 0 10px;padding:10px 12px;border-radius:9px;background:#f0f6f4;color:var(--brand-dark);font-weight:600}
/* The keyboard point is shown only while it has focus, so it is not an unexplained mark on the picture. */
.art-grab{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border:2px solid #fff;border-radius:50%;outline:1px solid rgba(24,34,45,.65);box-shadow:inset 0 0 0 2px var(--brand);pointer-events:none;opacity:0}
.art-grab:focus{opacity:1}
.art-grab:focus-visible{outline:3px solid var(--accent)}
/* Light, Shadow and Shine's Glossy surface (#230): the light the visitor drags, a small sun. */
/* Its size follows Light size (--sun, set by the page) so the mark hints at how large the light is. */
.art-light{--sun:26px;position:absolute;width:var(--sun);height:var(--sun);margin:calc(var(--sun) / -2) 0 0 calc(var(--sun) / -2);border-radius:50%;background:radial-gradient(circle,#fff7c2 0 35%,#ffc94d 36% 55%,rgba(255,201,77,0) 56%);box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 0 3px rgba(24,34,45,.65);cursor:grab;touch-action:none}
.art-light:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* A grid item's minimum width is its content's by default, so a large picture would widen the
   step and the fit-to-width would chase it for several frames. Keep the steps at page width. */
.tool-shell>.tool-step{min-width:0}
/* Add Texture to a Photo (#195): the chosen texture's thumbnail. */
.art-texture{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.art-texture-preview{max-width:160px;max-height:160px;border:1px solid var(--line);border-radius:6px}
/* Remove object (Issue #193): the selection or hole, drawn at picture resolution over its bounding box. */
.art-stage canvas.art-mask{position:absolute;max-width:none;max-height:none;pointer-events:none;image-rendering:pixelated}
#object-progress{width:100%;margin:6px 0}
/* Mirror fill (Issue #193, A3.1b): the line of symmetry and its two draggable ends. */
.art-stage svg.art-mirror{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.art-mirror line{vector-effect:non-scaling-stroke}
.art-mirror-light{stroke:#fff;stroke-width:3}
.art-mirror-dark{stroke:rgba(24,34,45,.85);stroke-width:1.5;stroke-dasharray:6 5}
.art-handle{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border:3px solid #fff;border-radius:50%;outline:1px solid rgba(24,34,45,.75);background:var(--brand);touch-action:none;cursor:grab;box-sizing:border-box}
.art-handle:focus-visible{outline:3px solid var(--accent)}
/* Copy from a spot's frame (#205): drag inside it to move it, a square corner to resize it in proportion. */
.art-frame{position:absolute;box-sizing:border-box;border:2px dashed rgba(24,34,45,.85);outline:1px solid rgba(255,255,255,.85);touch-action:none;cursor:move}
.art-corner{width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:3px}
.art-corner[data-corner="nw"],.art-corner[data-corner="se"]{cursor:nwse-resize}
.art-corner[data-corner="ne"],.art-corner[data-corner="sw"]{cursor:nesw-resize}
/* Copy and Paste Between Photos (#194): the pasted part while it is dragged, before its exact result is drawn. */
.art-stage canvas.art-layer{position:absolute;max-width:none;max-height:none;pointer-events:none}
/* Cut Out and Paste Between Photos (#227 Stage 1): panel 1 (Copy from) and panel 2 (Paste into),
   side by side on wide screens and one above the other below 1000 px. */
.hero-tagline{margin:-6px 0 14px;font-size:1.25rem;font-weight:700;color:var(--brand-dark)}
@media(min-width:1000px){.paste-panels{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
.paste-panel .drop-zone{min-height:160px}
.paste-panel .art-controls{grid-template-columns:1fr}
.paste-panel .art-select-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.paste-save{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.paste-save h3{font-size:1.05rem;margin:0 0 4px}
/* Hide parts (#227 Stage 4): while painting, the layer's frame and handles let strokes through to the photo. */
.art-stage.layer-painting .art-frame,.art-stage.layer-painting .art-handle{pointer-events:none}
/* Lasso handles (#227 Stage 4b): a 10 px square on a 44 px touch target; the selected one is filled. */
.art-stage svg.lasso-outline{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;max-height:none;overflow:visible;pointer-events:none}
.lasso-outline polyline{fill:none;vector-effect:non-scaling-stroke;pointer-events:none}
/* A wide invisible line takes double-clicks and double-taps while selecting. */
.lasso-line-hit{stroke:transparent;stroke-width:16}
.lasso-outline:not(.lasso-fixed) .lasso-line-hit{pointer-events:stroke}
.lasso-line-light{stroke:#fff;stroke-width:3}
.lasso-line-dark{stroke:rgba(24,34,45,.85);stroke-width:1.5;stroke-dasharray:5 4}
.lasso-handles{position:absolute;inset:0;pointer-events:none}
.lasso-handles:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.lasso-handle{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;pointer-events:auto;touch-action:none;cursor:move}
.lasso-handle::after{content:"";position:absolute;left:17px;top:17px;width:10px;height:10px;box-sizing:border-box;background:#fff;border:2px solid var(--brand-dark)}
.lasso-handle.selected{z-index:1}
.lasso-handle.selected::after{background:var(--brand);border-color:#fff;outline:1px solid var(--brand-dark)}
/* Screenshot Highlighter & Annotator (Issue #215) */
.highlight-open-actions{justify-content:center;margin:4px 0}
.highlight-tools{margin-bottom:10px}
.highlight-swatches{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:7px}
.highlight-swatch{width:34px;height:34px;padding:0;border:2px solid #fff;border-radius:50%;outline:1px solid #8a96a0;background:var(--swatch)}
.highlight-swatch[aria-pressed="true"]{outline:3px solid var(--brand-dark);outline-offset:1px}
.highlight-swatches input[type="color"]{width:48px;height:38px;margin:0;padding:3px}
.highlight-swatches .highlight-hex{width:7.5em;margin:0;padding:8px 10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.highlight-stage canvas.art-canvas{touch-action:none;cursor:crosshair}
.highlight-stage.highlight-select canvas.art-canvas{cursor:default}
.highlight-frame{pointer-events:none}
.highlight-handle{z-index:1}
.highlight-handle::before{content:"";position:absolute;inset:-14px}
.art-viewport:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.highlight-handle[data-handle="nw"],.highlight-handle[data-handle="se"]{cursor:nwse-resize}
.highlight-handle[data-handle="ne"],.highlight-handle[data-handle="sw"]{cursor:nesw-resize}
/* A select is as wide as its longest option; let the save fields shrink to a phone screen. */
.highlight-save-grid>*{min-width:0}
.highlight-save-grid select{min-width:0;max-width:100%;contain:paint}