/*
 * Drawing tools: Replace an area and Erase objects.
 * Stage: js/tools/drawing/{selection,mask-layer,box-layer,tool-kit}.js. Inspector: partials/inspector/_drawing.php.
 * Tokens only (css/tokens.css): selection fill --mask, edge --mask-edge, hairline --on-accent. Four radii plus pill.
 */

/* ================================================================ stage layers */

/* Inside the transformed .it-canvas box: same geometry as the image by construction. */
.it-canvas > .it-draw-mask,
.it-canvas > .it-draw-edge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  image-rendering: auto;
}
.it-canvas > .it-draw-mask[hidden],
.it-canvas > .it-draw-edge[hidden] { display: none; }
/* Compare view: the kept area's dashed outline sits on the Before side only. */
.it-canvas.is-compare > .it-draw-edge.is-ghost { clip-path: inset(0 calc(100% - var(--clip-left, 50%)) 0 0); }

/* Viewport-space surface: strokes and boxes can start past the image edge. */
.it-viewport > .it-draw-surface {
  z-index: var(--z-stage-ui);
  cursor: crosshair;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.it-viewport > .it-draw-surface.has-ring { cursor: none; }
.it-viewport > .it-draw-surface.is-panning,
.it-viewport > .it-draw-surface[data-draw-mode="hand"],
.it-viewport > .it-draw-surface[data-display="ghost"] { pointer-events: none; }
.it-viewport > .it-draw-surface[data-draw-mode="hand"] { touch-action: pan-y; }
/* Hand mode on a fitted image: one finger scrolls the page (two fingers still pan and zoom). */
body.imagestack-page .it-viewport:not(.is-pannable):has(> .it-draw-surface[data-draw-mode="hand"]) { touch-action: pan-y; }
.it-viewport.is-pannable:has(> .it-draw-surface.is-panning) { cursor: grab; }

/* Brush ring: the exact footprint. Light line with a dark halo, dashed for the eraser. */
.it-viewport > .it-draw-ring {
  position: absolute;
  left: 0;
  top: 0;
  z-index: calc(var(--z-stage-ui) + 1);
  border-radius: var(--r-pill);
  border: 1px solid var(--text);
  box-shadow: 0 0 0 1px var(--badge-ground), inset 0 0 0 1px var(--badge-ground);
  pointer-events: none;
  will-change: transform;
}
.it-viewport > .it-draw-ring[data-mode="eraser"] { border-style: dashed; }
.it-viewport > .it-draw-ring.is-preview {
  background: var(--accent-tint);
  border-color: var(--accent);
  transition: width var(--t-fast) var(--ease-out), height var(--t-fast) var(--ease-out);
}

/* Touch: one clear way to start marking (Hand is the default on touch, so scrolling never paints). */
body.imagestack-page .it-viewport > .it-draw-armcta {
  position: absolute;
  left: 50%;
  bottom: var(--sp-3);
  z-index: calc(var(--z-stage-ui) + 1);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 44px;
  padding: 0 var(--sp-4);
  transform: translateX(-50%);
  border: 1px solid var(--border-control);
  border-radius: var(--r-md);
  background: var(--surface-1);
  color: var(--text);
  font: 600 var(--fs-label)/var(--lh-label) var(--font-ui);
  box-shadow: var(--e-2);
  white-space: nowrap;
}
body.imagestack-page .it-viewport > .it-draw-armcta > i { color: var(--accent); }

/* ---- Boxes. Fill and 1px edge come from the mask canvas (same as brush marks). The DOM box only
   carries the SELECTED box's chrome: a 2px edge, handles (Box mode) and the remove button. ---- */
.it-draw-surface > .it-draw-box {
  position: absolute;
  left: 0;
  top: 0;
  background: transparent;
  pointer-events: none;
  outline: none;
  will-change: transform;
}
.it-draw-surface > .it-draw-box.is-selected { box-shadow: 0 0 0 2px var(--mask-edge), 0 0 0 3px var(--on-accent); }
body.imagestack-page .it-draw-surface > .it-draw-box:focus { outline: none; }
body.imagestack-page .it-draw-surface > .it-draw-box:focus-visible { box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px var(--on-accent); }

/* Handles: visual only (hit-testing is geometric in box-layer.js: the handle square plus 6px mouse / 16px touch slop). */
.it-draw-handle {
  position: absolute;
  display: none;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background: var(--text);
  box-shadow: 0 0 0 1px var(--on-accent);
  pointer-events: none;
}
.it-draw-box.has-chrome .it-draw-handle { display: block; }
.it-draw-box.has-chrome:focus-visible .it-draw-handle { background: var(--accent); }
.it-draw-handle[data-handle="nw"] { left: 0; top: 0; cursor: nwse-resize; }
.it-draw-handle[data-handle="ne"] { left: 100%; top: 0; cursor: nesw-resize; }
.it-draw-handle[data-handle="se"] { left: 100%; top: 100%; cursor: nwse-resize; }
.it-draw-handle[data-handle="sw"] { left: 0; top: 100%; cursor: nesw-resize; }
.it-draw-handle[data-handle="n"] { left: 50%; top: 0; cursor: ns-resize; }
.it-draw-handle[data-handle="e"] { left: 100%; top: 50%; cursor: ew-resize; }
.it-draw-handle[data-handle="s"] { left: 50%; top: 100%; cursor: ns-resize; }
.it-draw-handle[data-handle="w"] { left: 0; top: 50%; cursor: ew-resize; }
/* Small boxes: corner handles only, sitting just outside the corners (must match handleCentres()). */
.it-draw-box.is-small .it-draw-handle[data-handle="n"],
.it-draw-box.is-small .it-draw-handle[data-handle="e"],
.it-draw-box.is-small .it-draw-handle[data-handle="s"],
.it-draw-box.is-small .it-draw-handle[data-handle="w"] { display: none; }
.it-draw-box.is-small .it-draw-handle[data-handle="nw"] { transform: translate(-6px, -6px); }
.it-draw-box.is-small .it-draw-handle[data-handle="ne"] { transform: translate(6px, -6px); }
.it-draw-box.is-small .it-draw-handle[data-handle="se"] { transform: translate(6px, 6px); }
.it-draw-box.is-small .it-draw-handle[data-handle="sw"] { transform: translate(-6px, 6px); }
@media (pointer: coarse) {
  .it-draw-handle { width: 12px; height: 12px; margin: -6px 0 0 -6px; }
  .it-draw-box.is-small .it-draw-handle[data-handle="nw"] { transform: translate(-7px, -7px); }
  .it-draw-box.is-small .it-draw-handle[data-handle="ne"] { transform: translate(7px, -7px); }
  .it-draw-box.is-small .it-draw-handle[data-handle="se"] { transform: translate(7px, 7px); }
  .it-draw-box.is-small .it-draw-handle[data-handle="sw"] { transform: translate(-7px, 7px); }
}

.it-draw-sizetag {
  position: absolute;
  left: 0;
  top: calc(100% + var(--sp-3));
  padding: 2px 6px;
  border-radius: var(--r-sm);
  background: var(--badge-ground);
  color: var(--text);
  font: 600 var(--fs-meta)/var(--lh-meta) var(--font-ui);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease-out);
}
.it-draw-box:not(.below-fits) .it-draw-sizetag { top: auto; bottom: calc(100% + var(--sp-3)); }
.it-draw-box.is-dragging .it-draw-sizetag,
.it-draw-box.has-chrome:focus-visible .it-draw-sizetag { opacity: 1; }

/* Remove: an icon above the corner of a normal box; a small labelled chip under a small box (so the chrome never covers the target). */
body.imagestack-page .it-draw-box-remove {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--sp-3));
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 28px;
  height: 28px;
  margin: 0;
  padding: 0 7px;
  border: 1px solid var(--border-control);
  border-radius: var(--r-md);
  background: var(--surface-1);
  color: var(--text);
  font: 600 var(--fs-meta)/var(--lh-meta) var(--font-ui);
  box-shadow: var(--e-2);
  cursor: pointer;
  pointer-events: auto;
}
.it-draw-box.has-chrome .it-draw-box-remove { display: inline-flex; }
.it-draw-box-remove-text { display: none; }
.it-draw-box.is-small .it-draw-box-remove { right: auto; left: 50%; bottom: auto; top: calc(100% + 14px); transform: translateX(-50%); }
.it-draw-box.is-small .it-draw-box-remove-text { display: inline; }
.it-draw-box.is-small:not(.below-fits) .it-draw-box-remove { top: auto; bottom: calc(100% + 14px); }
body.imagestack-page .it-draw-box-remove:hover { background: var(--surface-3); border-color: var(--danger); color: var(--danger); }
.it-draw-box.is-dragging .it-draw-box-remove { visibility: hidden; }
@media (pointer: coarse) {
  body.imagestack-page .it-draw-box-remove { min-width: 44px; height: 44px; }
}

/* ================================================================ stage bar: view toggle + tools */

.it-draw-view[hidden], .it-draw-mini[hidden] { display: none !important; }
body.imagestack-page .it-draw-view .it-segmini-btn { gap: 6px; padding: 0 var(--sp-3); }
body.imagestack-page .it-draw-view .it-segmini-btn > i { font-size: 11px; }
body.imagestack-page .it-draw-view .it-segmini-btn[aria-pressed="true"] { background: var(--surface-3); color: var(--text); }

.it-draw-mini { display: none; position: relative; }
.it-draw-mini-divider { width: 1px; height: 16px; margin: 0 2px; background: var(--border); }
.it-draw-mini-divider[hidden] { display: none; }
body.imagestack-page .it-draw-mini .it-segmini-btn { min-width: 36px; padding: 0 var(--sp-2); }
body.imagestack-page .it-draw-mini .it-segmini-btn[hidden] { display: none; }
body.imagestack-page .it-draw-mini .it-segmini-btn[aria-pressed="true"] { background: var(--surface-3); color: var(--accent); }
body.imagestack-page .it-draw-mini .it-segmini-btn:disabled { color: var(--text-disabled); background: transparent; cursor: not-allowed; }
body.imagestack-page .it-draw-mini-size { font-variant-numeric: tabular-nums; color: var(--text); }

.it-draw-sizepop {
  position: absolute;
  right: 0;
  top: calc(100% + var(--sp-2));
  z-index: var(--z-popover);
  width: min(280px, calc(100vw - 32px));
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--surface-3);
  border: 1px solid var(--border);
  box-shadow: var(--e-2);
}
.it-draw-sizepop[hidden] { display: none; }
.it-draw-sizepop-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-2); }
body.imagestack-page .it-draw-preset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text-2);
  font: 600 var(--fs-label)/var(--lh-label) var(--font-ui);
}
body.imagestack-page .it-draw-preset[aria-pressed="true"] { border-color: var(--accent); color: var(--text); }
.it-draw-preset-dot { width: var(--d); height: var(--d); border-radius: var(--r-pill); background: var(--text-2); }

@media (max-width: 959px) {
  .it-draw-mini:not([hidden]) { display: inline-flex; }
  .it-draw-view.is-working { display: none !important; }
}
@media (max-width: 767px) {
  /* A small title row stays above the tools ("Replaced an area · 1536 × 1024"). */
  .it-stagebar.has-draw-mini { flex-wrap: wrap; row-gap: var(--sp-1); }
  .it-stagebar.has-draw-mini .it-stagebar-start { flex: 1 0 100%; min-height: 16px; }
  body.imagestack-page .it-stagebar.has-draw-mini .it-stagebar-name { font-size: var(--fs-meta); line-height: var(--lh-meta); }
  .it-stagebar.has-draw-mini .it-stagebar-dims { display: inline; }
  .it-stagebar.has-draw-mini [data-replace-image] { display: none; }
  .it-stagebar.has-draw-mini .it-stagebar-end { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 959px) and (pointer: coarse) {
  .it-draw-mini, .it-draw-view { height: 50px; }
  body.imagestack-page .it-draw-mini .it-segmini-btn { min-width: 44px; width: 44px; height: 44px; padding: 0; }
  body.imagestack-page .it-draw-view .it-segmini-btn { height: 44px; }
}

/* The "editing" mark on the result's version tile (no new tile until the run). */
body.imagestack-page .it-version.is-draw-editing { outline: 2px dashed var(--accent); outline-offset: 2px; }
.it-draw-tilebadge {
  position: absolute;
  right: 3px;
  top: 3px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 9px;
  pointer-events: none;
}
.it-version:not(.is-draw-editing) .it-draw-tilebadge { display: none; }

/* ================================================================ inspector */

.it-draw-modes { position: relative; }
body.imagestack-page .it-draw-keysbtn { position: absolute; top: -30px; right: 0; width: 28px; height: 26px; font-size: 13px; }
/* Four modes: icon over label so every label fits at 320px. */
body.imagestack-page .it-draw-modes .it-seg-option { flex-direction: column; gap: 3px; height: 48px; padding: 0 2px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
.it-draw-modes .it-seg-icon { font-size: 14px; }

[data-draw-tools] > .it-field + .it-field,
[data-draw-tools] > .it-field + .it-draw-actions { margin-top: var(--sp-5); }

.it-draw-size-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.it-draw-size-head .it-label { margin-bottom: var(--sp-2); }
.it-draw-size-value { font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: 600; color: var(--text-2); }

/* Range slider: accent fill up to the value (--fill set by the module), accent thumb. */
body.imagestack-page .it-range {
  --fill: 25%;
  display: block;
  width: 100%;
  height: 24px;
  margin: 0;
  padding: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  touch-action: pan-y;
}
.it-range::-webkit-slider-runnable-track { height: 4px; border-radius: var(--r-pill); background: linear-gradient(to right, var(--accent) var(--fill), var(--surface-1) var(--fill)); box-shadow: inset 0 0 0 1px var(--border); }
.it-range::-moz-range-track { height: 4px; border-radius: var(--r-pill); background: var(--surface-1); }
.it-range::-moz-range-progress { height: 4px; border-radius: var(--r-pill); background: var(--accent); }
.it-range::-webkit-slider-thumb {
  width: 16px; height: 16px; margin-top: -6px; border: 0; border-radius: var(--r-pill);
  background: var(--accent); box-shadow: 0 0 0 3px var(--surface-1);
  appearance: none; -webkit-appearance: none; transition: transform var(--t-fast) var(--ease-out);
}
.it-range::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: var(--r-pill); background: var(--accent); box-shadow: 0 0 0 3px var(--surface-1); }
.it-range:hover::-webkit-slider-thumb, .it-range:active::-webkit-slider-thumb { transform: scale(1.12); }
body.imagestack-page .it-range:focus-visible { outline: none; }
.it-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--accent); }
.it-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--accent); }
@media (pointer: coarse) {
  body.imagestack-page .it-range { height: 44px; }
  .it-range::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -10px; }
  .it-range::-moz-range-thumb { width: 24px; height: 24px; }
}

.it-draw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); }
body.imagestack-page .it-draw-action { height: 36px; }
body.imagestack-page .it-draw-action--icon { width: 36px; padding: 0; }
body.imagestack-page .it-draw-action--end { margin-left: auto; }
body.imagestack-page .it-draw-action:disabled { background: transparent; box-shadow: none; }
body.imagestack-page .it-draw-action:disabled > i { opacity: .6; }
@media (pointer: coarse) {
  body.imagestack-page .it-draw-action { height: 44px; }
  body.imagestack-page .it-draw-action--icon { width: 44px; }
}

body.imagestack-page .it-draw-status {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--text-3);
}
body.imagestack-page .it-draw-status:empty { display: none; }
body.imagestack-page .it-draw-status.is-ready { color: var(--text-2); }
.it-draw-status.is-ready::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border-radius: 2px;
  background: var(--mask);
  box-shadow: inset 0 0 0 1px var(--mask-edge), 0 0 0 1px var(--on-accent);
}

.it-draw-comparenote .it-help { margin-top: 0; font-size: var(--fs-label); line-height: var(--lh-label); color: var(--text-2); }
body.imagestack-page .it-draw-runagain { width: 100%; height: 44px; margin-top: var(--sp-3); justify-content: flex-start; gap: var(--sp-2); padding: 0 var(--sp-3); }
.it-draw-runagain-label { flex: 1 1 auto; text-align: left; }
body.imagestack-page .it-draw-runagain-tag { font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: 500; color: var(--text-3); }
body.imagestack-page .it-draw-adjust { display: inline-block; margin-top: var(--sp-3); }

body.imagestack-page .it-draw-removecopy-text {
  display: flex;
  gap: var(--sp-2);
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-2);
}
.it-draw-removecopy-text > i { margin-top: 4px; color: var(--accent); font-size: 13px; }

.it-draw-remove-chip > i { color: var(--text-3); }
[data-replace-only] > .it-field + .it-field,
[data-replace-only] > .it-draw-chipundo + .it-field { margin-top: var(--sp-5); }
body.imagestack-page .it-draw-chipundo { margin: var(--sp-2) 0 0; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-3); }
body.imagestack-page .it-draw-linkbtn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: 600 var(--fs-meta)/var(--lh-meta) var(--font-ui);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.it-draw-gap { height: var(--sp-5); }
body.imagestack-page .it-draw-sizenote { margin: var(--sp-4) 0; color: var(--text-2); }
.it-draw-sizenote > i { color: var(--warning); }


/* ================================================================ round 4 */

/* Eraser danger preview: the box it will delete (stroke reaches the box's inner 50%). */
.it-draw-surface > .it-draw-box.is-doomed {
  background: var(--danger-line);
  box-shadow: 0 0 0 2px var(--danger), 0 0 0 3px var(--on-accent);
}

/* The handle you grabbed grows and fills, so a slop grab is visible. */
.it-draw-box .it-draw-handle.is-active { display: block; width: 20px; height: 20px; margin: -10px 0 0 -10px; background: var(--accent); }

/* Stage-bar Compare | Edit: icon-only below 1100px so the title never truncates (labels via aria-label + tooltip). */
@media (max-width: 1099px) {
  body.imagestack-page .it-draw-view .it-segmini-btn { min-width: 32px; padding: 0 var(--sp-2); }
  .it-draw-view .it-segmini-btn > span { display: none; }
}

/* Phones: one row in the switcher bar ([tool] [Replace | Remove] [Tools]); the stage bar row goes. */
.it-draw-compact { display: none; }
@media (max-width: 767px) {
  .it-draw-compact:not([hidden]) { position: relative; display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }
  .it-switcherbar.has-draw-compact .it-switcher-usage { display: none; }
  .it-switcherbar.has-draw-compact .it-switcher { flex: 1 1 auto; }
  /* Integration polish: the switcher row keeps the shared 56px height and the stage bar stays, so the
     image sits at the same place while marking, in compare, and on every other tool (no jump). */
  body.imagestack-page .it-switcherbar.has-draw-compact { height: 56px; }
  .it-draw-mini, .it-draw-view { display: none !important; }
  /* With Replace | Remove in the row, the tool name sits under its icon (small, never dropped). */
  body.imagestack-page .it-switcherbar.has-draw-compact:has(.it-draw-compact-seg) .it-switcher {
    gap: 6px;
    height: 48px;
    margin-left: calc(-1 * var(--sp-1));
    padding: 0 var(--sp-1);
    min-width: 0;
  }
  body.imagestack-page .it-switcherbar.has-draw-compact:has(.it-draw-compact-seg) .it-switcher-icon { flex: 0 0 auto; width: 24px; height: 24px; font-size: 11px; }
  @media (max-width: 399px) { body.imagestack-page .it-switcherbar.has-draw-compact:has(.it-draw-compact-seg) .it-switcher-icon { display: none; } }
  /* One line at --fs-meta with an ellipsis (the full name is in the button's accessible name). */
  body.imagestack-page .it-switcherbar.has-draw-compact:has(.it-draw-compact-seg) .it-switcher-label {
    min-width: 0;
    font-size: var(--fs-meta);
    line-height: var(--lh-meta);
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.imagestack-page .it-switcherbar.has-draw-compact:has(.it-draw-compact-seg) .it-switcher-chevron { display: none; }
  body.imagestack-page .it-switcherbar.has-draw-compact { gap: var(--sp-2); }

  .it-draw-compact-seg {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 2px;
    padding: 2px;
    border-radius: var(--r-md);
    border: 1px solid var(--border-control);
    background: var(--bg);
  }
  body.imagestack-page .it-draw-compact-segbtn {
    min-width: 44px;
    height: 44px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-2);
    font: 600 var(--fs-label)/var(--lh-label) var(--font-ui);
  }
  body.imagestack-page .it-draw-compact-segbtn[aria-pressed="true"] { background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px rgba(94, 234, 212, .45); }

  body.imagestack-page .it-draw-toolsbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 48px;
    padding: 0 10px;
    border: 1px solid var(--border-control);
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--text);
    font: 600 var(--fs-label)/var(--lh-label) var(--font-ui);
  }
  .it-draw-toolsbtn [data-tools-icon] { color: var(--accent); }
  .it-draw-toolsbtn > .fa-chevron-down { font-size: 10px; color: var(--text-3); }

  /* Integration polish: a compact strip anchored above the phone action bar (not a popover over the image). */
  .it-draw-toolspop {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--actionbar-h) + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-popover);
    width: auto;
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-bottom: 0;
    box-shadow: var(--e-2);
  }
  .it-draw-toolspop[hidden] { display: none; }
  body.imagestack-page .it-draw-toolspop-title { margin: 0 0 var(--sp-1); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .it-draw-toolspop-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-1); }
  body.imagestack-page .it-draw-toolspop-mode {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 44px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--text-2);
    font: 600 var(--fs-meta)/var(--lh-meta) var(--font-ui);
  }
  body.imagestack-page .it-draw-toolspop-mode > i { font-size: 14px; }
  body.imagestack-page .it-draw-toolspop-mode[aria-pressed="true"] { border-color: var(--accent); color: var(--text); background: var(--surface-1); }
  .it-draw-toolspop-size { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); }
  .it-draw-toolspop-size .it-draw-sizepop-presets { margin: 0; grid-template-columns: repeat(3, 44px); gap: var(--sp-1); }
  body.imagestack-page .it-draw-toolspop-size .it-draw-preset { height: 44px; padding: 0; gap: 3px; font-size: var(--fs-meta); }
  .it-draw-toolspop-size[hidden] { display: none; }
  .it-draw-toolspop-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
  body.imagestack-page .it-draw-toolspop-actions .it-btn { flex: 1 1 0; height: 44px; padding: 0 var(--sp-2); }
  body.imagestack-page .it-draw-toolspop-actions .it-btn[hidden] { display: none; }
}

/* Phone result bar: Keep editing is the primary (first, filled), then Download and Continue (as on desktop). */
@media (max-width: 959px) {
  body.imagestack-page .it-actionbar-result.has-primary-extra { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: var(--sp-2); }
  body.imagestack-page .it-actionbar-result.has-primary-extra > .it-btn { min-width: 0; padding: 0 var(--sp-2); font-size: var(--fs-label); gap: 6px; }
  body.imagestack-page .it-actionbar-result.has-primary-extra > [data-action="continue-sheet"] {
    background: var(--surface-2);
    color: var(--text);
    box-shadow: var(--e-1), inset 0 0 0 1px var(--border);
    font-weight: 600;
  }
}

/* A disabled menu item that explains itself (title tooltip), e.g. "Run again · Not while editing". */
body.imagestack-page .it-menu-item[aria-disabled="true"] { color: var(--text-disabled); cursor: not-allowed; }
body.imagestack-page .it-menu-item[aria-disabled="true"] > i { opacity: .6; }


/* Touch: every link-style button in these tools has a 44px hit area. */
@media (pointer: coarse) {
  body.imagestack-page .it-draw-linkbtn { display: inline-flex; align-items: center; min-height: 44px; }
  body.imagestack-page .it-draw-comparenote .it-draw-adjust { margin-top: var(--sp-1); }
}

@media (pointer: coarse) {
  body.imagestack-page [data-inspector-for="inpainting"] .it-advanced-summary,
  body.imagestack-page [data-inspector-for="watermark-remover"] .it-advanced-summary { min-height: 44px; }
}
@media (pointer: coarse) {
  body.imagestack-page [data-inspector-for="inpainting"] .it-switch-row { min-height: 44px; align-items: center; }
}
body.imagestack-page .it-draw-surface:focus { outline: none; }
/* Final product #28: the brush size in the stage toolbar says what it is (dot + px). */
body.imagestack-page .it-draw-mini-size { gap: 4px; }
.it-draw-mini-size-dot { font-size: 6px; opacity: .8; }
.it-draw-mini-size-unit { font-size: 10px; color: var(--text-3); }