/* The editor (/draw/). Wide screens: tools | drawing | colours (a scrolling list, the size fixed at the bottom).
   Tall screens and phones: the drawing, then one row of tools with a Colour and a Size button that open sheets;
   Undo and Redo move to the top bar. */
/* Colours, light and dark: the Shiklo theme's (/shiklo/style.css, loaded first — the stylesheet of tools.shiklo.com
   and code.shiklo.com). The top bar is the sites' navy header with the editor's own buttons on it (owner, 2026-10-25),
   no taller than before, so the drawing keeps its room. */
:root { --panel: var(--surface); --ink: var(--text); --line: var(--border); --current: #e53935; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
/* No browser zoom on a double tap (quick taps on the tools); the drawing has its own zoom, pinching the page still works. */
html { touch-action: manipulation; }
body.editor {
  display: flex; flex-direction: column; background: var(--bg); color: var(--ink); overscroll-behavior: none;
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.bar-top {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--nav); color: #fff;
  padding-top: max(6px, env(safe-area-inset-top)); box-shadow: 0 2px 10px rgba(11, 31, 77, .18); position: relative; z-index: 2;
}
.name { margin: 0; font-weight: 700; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.status { color: #c7d2fe; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.status.error { color: #fecaca; font-weight: 600; white-space: normal; }
/* On the navy bar the buttons are white outlines, as the sites' header controls. */
.bar-top .icon-btn, .bar-top .tool { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .38); }
.bar-top .icon-btn:hover, .bar-top .icon-btn:focus-visible, .bar-top .tool:hover:not(:disabled) { background: var(--nav-hover); border-color: #fff; }
.bar-top .tool:disabled { opacity: .45; }
.bar-top :focus-visible { outline-color: #93c5fd; }
/* Home: the Shiklo logo, as on the sites (a tap goes to the home screen). */
#home { padding: 0; min-width: 0; width: 48px; border: 0; }
#home img { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: block; }
.spacer { flex: 1; }
.top-history { display: flex; gap: 6px; }
.top-history:empty { display: none; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 48px; height: 48px; padding: 0 10px;
  border-radius: 14px; border: 2px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.icon-btn svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Full screen: corners out to go in, corners in to come back. */
#fullscreen .fs-off, html.is-fullscreen #fullscreen .fs-on { display: none; }
html.is-fullscreen #fullscreen .fs-off { display: inline; }
.btn {
  min-height: 44px; padding: 0 14px; border-radius: 12px; border: 2px solid var(--line);
  background: var(--panel); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer;
}

.app { flex: 1; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
.tools { background: var(--panel); display: flex; flex-direction: column; gap: 7px; padding: 9px; overflow: auto; border-right: 1px solid var(--line); }
/* The drawing area scrolls when zoomed in; the drawing is centred while it fits (auto margins: no unreachable part). */
.canvas-area { position: relative; min-height: 0; min-width: 0; display: flex; }
#wrap { flex: 1; min-height: 0; min-width: 0; display: flex; overflow: auto; overscroll-behavior: contain; padding: 10px; }
#stage {
  position: relative; flex: none; margin: auto; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .18); border-radius: 8px; overflow: hidden; background: #fff;
}
.zoom {
  position: absolute; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 2px; padding: 3px; z-index: 2;
  background: color-mix(in srgb, var(--panel) 94%, transparent); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}
.zoom-btn, .zoom-pct {
  height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700;
}
.zoom-btn { width: 40px; display: grid; place-items: center; padding: 0; }
.zoom-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.zoom-btn:disabled { opacity: .35; cursor: default; }
.zoom-pct { min-width: 56px; padding: 0 6px; font-variant-numeric: tabular-nums; }
.zoom-btn:not(:disabled):hover, .zoom-pct:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
#stage canvas.layer { position: absolute; inset: 0; width: 100%; height: 100%; }

.tool {
  position: relative; width: 65px; min-height: 54px; padding: 4px 3px 3px; border-radius: 14px; border: 2px solid var(--line);
  background: var(--panel); color: var(--ink); font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.1; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.tool svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tool svg .paint { fill: var(--current); stroke: none; }
.tool svg .pink { fill: #f8bbd0; stroke: none; }
.tool[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); box-shadow: 0 0 0 2px var(--accent); }
.tool[aria-pressed="true"]::after { content: ""; position: absolute; top: 5px; right: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.tool:disabled { opacity: .35; cursor: default; }
/* A colour with its opacity, over a checkerboard so "see-through" shows. */
.color-dot, .color-preview b {
  background: linear-gradient(var(--current-a, var(--current)), var(--current-a, var(--current))), repeating-conic-gradient(#c9ced6 0 25%, #ffffff 0 50%) 0 0 / 10px 10px;
}
.color-dot { display: block; width: 27px; height: 27px; border-radius: 50%; box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--line); }
/* Thickness as a curved line in the current colour and opacity. */
.wave { overflow: visible; }
.wave path { fill: none; stroke: var(--current-a, var(--current)); stroke-linecap: round; stroke-linejoin: round; }
.wave-box { display: grid; place-items: center; width: 36px; height: 27px; }
.wave-box .wave, .size .wave { width: 34px; height: 17px; }
.sep { height: 2px; background: var(--line); margin: 4px 6px; border-radius: 1px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.hold { overflow: hidden; }
.hold i { position: absolute; left: 0; bottom: 0; height: 6px; width: 0; background: #c62828; }
.hold.holding i { width: 100%; transition: width 1s linear; }

/* The colour panel: the list scrolls, the size stays at the bottom. */
.side { background: var(--panel); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; width: 168px; }
.colors { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 10px 10px; }
.mini-title { margin: 10px 0 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.swatches { display: grid; grid-template-columns: repeat(2, 48px); gap: 10px; justify-content: center; }
.swatches[hidden], .mini-title[hidden] { display: none; }
.swatch {
  width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--panel); box-shadow: 0 0 0 2px var(--line);
  cursor: pointer; padding: 0; position: relative;
}
.swatch[aria-checked="true"] { box-shadow: 0 0 0 3px var(--panel), 0 0 0 6px var(--accent); }
.swatch[aria-checked="true"]::after { /* a tick, so the choice never depends on colour alone */
  content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 14px; margin: -10px 0 0 -4px;
  border: solid #fff; border-width: 0 4px 4px 0; transform: rotate(45deg); filter: drop-shadow(0 0 1.5px #000);
}
.any { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--muted); }
.any input { width: 56px; height: 40px; border: 2px solid var(--line); border-radius: 10px; padding: 2px; background: var(--panel); cursor: pointer; }
.size-box { flex: none; border-top: 1px solid var(--line); padding: 2px 10px 10px; }
.sizes { display: grid; grid-template-columns: repeat(3, 44px); gap: 6px; }
.size { width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--line); background: var(--panel); display: grid; place-items: center; cursor: pointer; padding: 0; color: var(--ink); font: inherit; }
.size .size-name { display: none; }
.size[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }

/* The Colour and Size sheets: centred panels on wide screens, from the bottom of the screen on phones. They stay open
   while choosing (preview and sliders update); Done or a tap outside closes them. */
/* Every popup (Colour, Size, Share) covers exactly the drawing area, between the toolbars, on every screen: editor.js
   sets --sheet-* from #wrap's box when it opens and when the window changes. The toolbars stay visible, slightly dimmed. */
dialog.sheet {
  position: fixed; inset: auto; margin: 0; box-sizing: border-box;
  top: var(--sheet-top, 10vh); left: var(--sheet-left, 10vw); width: var(--sheet-width, 80vw); height: var(--sheet-height, 80vh);
  max-width: none; max-height: none; overflow: hidden; /* the contents (.sheet-body) scroll, Done stays put */
  border: 0; border-radius: 16px; padding: 14px 18px 18px; background: var(--panel); color: var(--ink);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
}
dialog.sheet::backdrop { background: rgba(0, 0, 0, .18); }
.sheet .colors { padding: 0; overflow: visible; }
.sheet .swatches { grid-template-columns: repeat(auto-fill, minmax(38px, 52px)); gap: 8px; }
.sheet .swatch { width: 100%; height: auto; aspect-ratio: 1; }
.sheet .size-box { border-top: 0; padding: 0; }
.sheet .size-box .mini-title { display: none; }
.sheet .sizes { grid-template-columns: repeat(3, minmax(0, 160px)); gap: 10px; margin-top: 12px; }
.sheet .size { width: 100%; height: 84px; display: grid; grid-template-rows: 36px auto; place-items: center; align-content: center; gap: 6px; font-weight: 700; }
.sheet .size .size-name { display: block; }
.sheet .size .wave { width: 56px; height: 28px; }
.custom-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.custom-row .any { margin-top: 0; flex: 1; }
.color-preview { display: grid; place-items: center; width: 72px; height: 48px; border-radius: 12px; border: 2px solid var(--line); overflow: hidden; }
.color-preview b { display: block; width: 100%; height: 100%; }
.slider { display: grid; grid-template-columns: auto minmax(0, 1fr) 3.5em; align-items: center; gap: 12px; margin-top: 16px; font-size: 14px; font-weight: 700; color: var(--muted); }
.slider input[type="range"] { width: 100%; height: 36px; accent-color: var(--accent); }
.slider output { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.size-preview { display: grid; place-items: center; height: 110px; margin-top: 12px; border-radius: 14px; border: 2px dashed var(--line); background: #ffffff; overflow: hidden; }
.size-preview svg { max-width: 100%; height: auto; } /* drawn in CSS pixels: as thick as the line on the drawing */

/* The cursor over the drawing: the selected tool's icon at its working point, and a ring as big as the line. */
#stage.own-cursor { cursor: none; }
#stage.busy, #stage.busy.own-cursor { cursor: progress; }
.cursor { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 5; will-change: transform; }
.cursor .ring {
  position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%);
  border: 1.5px solid rgba(0, 0, 0, .75); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9);
}
.cursor svg {
  position: absolute; width: 30px; height: 30px; fill: none; stroke: #1f2328; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
}
.cursor svg .paint { fill: var(--current); stroke: none; }
.cursor svg .pink { fill: #f8bbd0; stroke: none; }

/* The phone layout (html.compact, set by editor.js): phones, tablets under about 9 inches (a touch screen whose
   shorter side is under 800 CSS pixels: iPad mini, 8-inch Android tablets) in both orientations, and any narrow or
   tall window. One row of tools under the drawing; Undo and Redo in the top bar; sheets from the bottom. */
html.compact .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
html.compact .canvas-area { order: 1; }
html.compact #wrap { padding: 6px; }
html.compact .zoom { right: 10px; bottom: 10px; }
html.compact .tools {
  order: 2; flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 5px; border-right: 0; border-top: 1px solid var(--line);
  padding: 8px 6px; padding-bottom: max(8px, env(safe-area-inset-bottom));
}
html.compact .side { display: none; }
html.compact dialog.sheet { border-radius: 14px; padding: 12px 14px 14px; }
html.compact .tool { width: 49px; min-height: 54px; font-size: 11px; border-radius: 13px; }
html.compact .tool svg { width: 25px; height: 25px; }
html.compact .sep { width: 2px; height: auto; margin: 6px 2px; }
html.compact .top-history .tool { width: 44px; min-height: 44px; padding: 0; border-radius: 13px; }
html.compact .top-history .tool span { display: none; }
html.compact .top-history .tool svg { width: 24px; height: 24px; }
html.compact .status:not(.error) { display: none; }
html.compact .icon-btn.wide span { display: none; }
/* Phones: six buttons in the top bar (Home, Undo, Redo, Open, Save, Share); the name takes what is left. */
html.compact .bar-top { gap: 6px; padding-left: 8px; padding-right: 8px; }
html.compact .bar-top .icon-btn { min-width: 44px; height: 44px; padding: 0 8px; }
html.compact .name { min-width: 0; flex: 0 1 auto; }
@media (prefers-reduced-motion: reduce) { .hold.holding i { transition: none; } }
/* Clear is held down: no scrolling, text selection or long-press menu may take the finger away. */
#clear { touch-action: none; user-select: none; -webkit-user-select: none; }

/* A short message over the drawing (e.g. how Clear works). */
.toast {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 3; max-width: calc(100% - 28px);
  padding: 10px 16px; border-radius: 14px; background: #1f2328; color: #fff; font-weight: 600; text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25); pointer-events: none;
}
.toast[hidden] { display: none; }

/* Colouring a picture: "Real colours" shows a small copy of it in its real colours. */
.guide-btn {
  position: absolute; left: 14px; top: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; height: 44px;
  padding: 0 12px; border-radius: 14px; border: 1px solid var(--line); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer;
  background: color-mix(in srgb, var(--panel) 94%, transparent); box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}
.guide-btn[hidden], .guide[hidden] { display: none; }
.guide-btn[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent), 0 2px 10px rgba(0, 0, 0, .15); color: var(--accent); }
.guide-btn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.guide-btn .c1 { fill: #e53935; stroke: none; } .guide-btn .c2 { fill: #fdd835; stroke: none; } .guide-btn .c3 { fill: #43a047; stroke: none; }
.guide {
  position: absolute; left: 14px; top: 66px; z-index: 3; width: min(240px, 42%); height: auto; border-radius: 12px; cursor: pointer;
  border: 2px solid var(--line); background: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
}
html.compact .guide-btn span { display: none; }

/* The loading popup (e.g. while a picture is opened). */
.busy { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(10, 14, 20, .45); }
.busy[hidden] { display: none; }
.busy-card {
  display: flex; align-items: center; gap: 14px; padding: 18px 24px; border-radius: 18px; background: var(--panel); color: var(--ink);
  font-size: 18px; box-shadow: 0 10px 40px rgba(0, 0, 0, .3); max-width: calc(100vw - 32px);
}
.spinner {
  width: 32px; height: 32px; flex: none; border-radius: 50%; border: 4px solid var(--line); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }

/* The Share dialog (when the device cannot share a picture itself). */
.share-img { display: block; max-width: 100%; max-height: 34vh; margin: 12px auto 0; border-radius: 12px; border: 2px solid var(--line); background: #fff; }
.share-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.share-actions .btn { flex: 1; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.share-note { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.share-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 10px; }
.share-links .btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* Colour, Size and Shapes (owner, 2026-10-25): half the screen's width and height, in its centre. On a narrow phone
   half the width is too small for the colours and shapes: up to 360 px there (never more than 94% of the screen). */
#color-sheet, #size-sheet, #shape-sheet {
  inset: 0; margin: auto; width: max(50vw, min(360px, 94vw)); height: max(50vh, min(420px, 90vh));
}
html.compact #color-sheet, html.compact #size-sheet { padding: 10px 12px 12px; }
html.compact .sheet .mini-title { margin: 6px 0 4px; font-size: 12px; }
html.compact .sheet .swatches { grid-template-columns: repeat(auto-fill, minmax(30px, 40px)); gap: 6px; }
html.compact .sheet .swatch { border-width: 2px; }
html.compact .custom-row { margin-top: 8px; }
html.compact .color-preview { width: 60px; height: 38px; }
html.compact .any input { height: 38px; }
html.compact .slider { margin-top: 6px; }
html.compact .slider input[type="range"] { height: 30px; }
html.compact .sheet .sizes { margin-top: 8px; }
html.compact .sheet .size { height: 68px; grid-template-rows: 30px auto; gap: 2px; }
html.compact .sheet .size .wave { width: 48px; height: 24px; }
html.compact .size-preview { height: 104px; margin-top: 6px; } /* the curve is drawn 1:1 in a 100 px box */
/* Phone layout: the Colour popup fits its half of the drawing area — no group headings (spacing separates the basic
   colours, My colours and skin tones), and "Any colour" shares a row with the opacity slider. */
html.compact #color-sheet .mini-title { display: none; }
html.compact #color-sheet .swatches { grid-template-columns: repeat(auto-fill, minmax(30px, 36px)); margin-top: 8px; }
html.compact #color-sheet .custom { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
html.compact #color-sheet .custom-row { margin-top: 0; flex: none; }
html.compact #color-sheet .any span, html.compact #color-sheet .color-preview { display: none; }
html.compact #color-sheet .slider { flex: 1; margin-top: 0; gap: 8px; }

/* Inside a popup: the contents (title on wide screens, colours or sizes or shapes) scroll when they are taller than the
   popup; Done stays at the bottom, outside them, always in reach. */
dialog.sheet[open] { display: flex; flex-direction: column; }
.sheet-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 auto; width: 100%; max-width: 560px;
  padding: 6px; box-sizing: border-box; /* room for the chosen colour's ring, which scrolling would cut off */
}
.sheet-title { margin: 0 0 8px; font-size: 20px; text-align: center; }
.sheet-foot { flex: none; display: flex; justify-content: center; margin-top: 14px; }
.sheet-foot .btn { min-width: 140px; }
.sheet .sizes, .share-links { justify-content: center; }
.share-actions { justify-content: center; }
html.compact .sheet-title { display: none; } /* the Colour or Size button just tapped says what this is */
html.compact .sheet-foot { margin-top: 10px; }
html.compact .sheet-foot .btn { min-height: 40px; }
/* Swatches in a popup: left-aligned rows that wrap (owner, 2026-10-24: colours left, buttons centred). */
.sheet .swatches { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; } /* colours stay left-aligned; only the buttons are centred */
.sheet .swatch { width: 48px; height: 48px; aspect-ratio: auto; flex: none; }
html.compact #color-sheet .swatches { gap: 6px; }
html.compact .sheet .swatch { width: 36px; height: 36px; }

/* Shapes: the picker (half the drawing area, like Colour and Size), the selection with big handles, its action bar. */
.shape-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.shape-btn {
  width: 72px; height: 72px; border-radius: 14px; border: 2px solid var(--line); background: var(--panel); color: var(--ink);
  display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 6px 2px 4px; cursor: pointer; font: inherit; font-size: 11px; font-weight: 600; line-height: 1.1;
}
.shape-btn[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.shape-icon { width: 36px; height: 36px; overflow: visible; }
.shape-icon path { fill: color-mix(in srgb, var(--current) 22%, transparent); stroke: var(--ink); stroke-width: 7; stroke-linejoin: round; stroke-linecap: round; }
.shape-icon path[fill="none"] { fill: none; }
.sheet-hint { margin: 12px 0 0; font-size: 14px; color: var(--muted); text-align: center; }
html.compact .shape-btn { width: 60px; height: 60px; font-size: 10px; }
html.compact .shape-icon { width: 30px; height: 30px; }
html.compact .sheet-hint { display: none; }
/* Letters: 26 to a group, no captions (the letter is its own name), so they fit without scrolling — on phones seven
   44 px buttons to a row. */
.shape-grid.letters { gap: 6px; }
.shape-grid.letters .shape-btn { width: 56px; height: 56px; grid-template-rows: 1fr; padding: 4px; }
.shape-grid.letters .shape-btn span { display: none; }
.shape-grid.letters .shape-icon { width: 42px; height: 42px; }
html.compact .shape-grid.letters { gap: 5px; }
html.compact .shape-grid.letters .shape-btn { width: 44px; height: 44px; border-radius: 11px; padding: 2px; }
html.compact .shape-grid.letters .shape-icon { width: 36px; height: 36px; }

.selection { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 4; }
.sel-box { position: absolute; outline: 2px dashed var(--accent); outline-offset: 2px; transform-origin: 50% 50%; }
.handle {
  position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: #fff;
  border: 3px solid var(--accent); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); pointer-events: auto; touch-action: none; cursor: nwse-resize;
}
.handle::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; } /* a 50 px touch target */
.h-nw { left: 0; top: 0; } .h-ne { left: 100%; top: 0; cursor: nesw-resize; }
.h-sw { left: 0; top: 100%; cursor: nesw-resize; } .h-se { left: 100%; top: 100%; }
.h-rot { left: 50%; top: -42px; cursor: grab; background: var(--accent); }
.h-rot::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 26px; margin-left: -1px; background: var(--accent); }
.sel-bar {
  /* Wraps into two rows when the drawing is narrower than the bar (phones). */
  position: absolute; z-index: 5; display: flex; flex-wrap: wrap; justify-content: center; max-width: calc(100% - 8px);
  gap: 4px; padding: 4px; border-radius: 14px; background: var(--panel);
  border: 1px solid var(--line); box-shadow: 0 3px 12px rgba(0, 0, 0, .2); touch-action: none;
}
.sel-bar button {
  width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; padding: 0;
}
.sel-bar button:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sel-bar button:disabled { opacity: .35; cursor: default; }
.sel-bar svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sel-bar svg .paint { fill: var(--current); stroke: none; }
.sel-bar .danger { color: #c62828; }
.sel-bar button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.sel-bar button[hidden] { display: none; }
.sel-bar [data-act="group"] .i-split, .sel-bar [data-act="group"].joined .i-join { display: none; }
.sel-bar [data-act="group"].joined .i-split { display: block; }
/* Several shapes chosen: a thin box on each, the dashed frame around them all. */
.sel-member { position: absolute; outline: 1.5px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 1px; transform-origin: 50% 50%; }
#stage.tool-shape { cursor: crosshair; }

/* Phone layout: seven tools in one row, also on 360 px phones (≥ 44 px each). */
html.compact .tools { gap: 4px; }
html.compact .tools .tool { width: min(49px, calc((100vw - 52px) / 7)); } /* 7 × 44 + gaps, divider, padding = 354 px on a 360 px phone */
/* The shape picker's group tabs: icon + name; icons only in the phone layout (one row). */
.shape-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 12px; }
.shape-tab {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 20px; border: 2px solid var(--line);
  background: var(--panel); color: var(--ink); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.shape-tab .shape-icon { width: 22px; height: 22px; }
.shape-tab .shape-icon path { stroke-width: 9; }
.shape-tab[aria-selected="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); box-shadow: 0 0 0 1px var(--accent); }
html.compact .shape-tabs { flex-wrap: nowrap; gap: 4px; margin-bottom: 8px; }
html.compact .shape-tab { width: 50px; height: 44px; padding: 0; justify-content: center; border-radius: 14px; }
html.compact .shape-tab span { display: none; }
html.compact .shape-tab .shape-icon { width: 26px; height: 26px; }
.sel-bar[hidden], .selection[hidden] { display: none; } /* their own display rules would otherwise override [hidden] */